/* Praktend Ops shared stylesheet
   Mirrors the inline design system in index.html. New pages link this sheet.
   index.html keeps its inline copy (do not modify). */

:root {
  --ink:        #1A1814;
  --ink-soft:   #2D2820;
  --paper:      #F2EBDD;
  --paper-deep: #E8DEC8;
  --accent:     #7A2E1F;
  --accent-mid: #9C4530;
  --gold:       #A88B5C;
  --rule:       #C7BCA3;
  --rule-soft:  #DCD2BC;
  --mute:       #6B6357;

  --serif: 'Fraunces', 'Times New Roman', serif;
  --mono:  'IBM Plex Mono', 'Courier New', monospace;

  --content: 1140px;
  --reading: 720px;

  /* ─── Global type scale (#334) ───────────────────────────────────
     Every font-size on the site references a token below. To resize
     a category globally, change the token here. To add a new size,
     add a token. NEVER hard-code px values in component CSS or in
     inline style attributes. */
  --text-9:  9px;
  --text-10: 10px;
  --text-11: 11px;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-16: 16px;
  --text-17: 17px;
  --text-18: 18px;
  --text-19: 19px;
  --text-20: 20px;
  --text-21: 21px;
  --text-22: 22px;
  --text-24: 24px;
  --text-26: 26px;
  --text-28: 28px;
  --text-30: 30px;
  --text-32: 32px;
  --text-36: 36px;
  --text-42: 42px;
  --text-48: 48px;
  --text-56: 56px;
  --text-64: 64px;
  --text-72: 72px;
  --text-84: 84px;
  --text-92: 92px;
  /* Fluid (responsive clamp) tokens for headlines */
  --text-pull:    clamp(22px, 3.4vw, 30px);
  --text-h3-fluid:clamp(34px, 4.6vw, 52px);
  --text-h2-sm:   clamp(36px, 5vw, 56px);
  --text-h2:      clamp(40px, 5.6vw, 76px);
  --text-h2-lg:   clamp(40px, 6vw, 72px);
  --text-h2-xl:   clamp(44px, 6vw, 78px);
  --text-h1:      clamp(48px, 7vw, 92px);

  /* Font-weight tokens (Fraunces variable wght axis + mono 400/500) */
  --weight-light:   300;
  --weight-soft:    360;
  --weight-display: 380;
  --weight-normal:  400;
  --weight-medium:  500;

  /* Letter-spacing tokens (full ladder; named by role) */
  --tracking-display-xl:-0.04em;
  --tracking-h1:        -0.035em;
  --tracking-mid-tight: -0.03em;
  --tracking-h2:        -0.025em;
  --tracking-h2-sm:     -0.02em;
  --tracking-h3:        -0.015em;
  --tracking-display-sm:-0.012em;
  --tracking-em:        -0.01em;
  --tracking-normal:    0;
  --tracking-tight:     0.02em;
  --tracking-wide-1:    0.04em;
  --tracking-wide-2:    0.06em;
  --tracking-wide-3:    0.08em;
  --tracking-wide-4:    0.1em;
  --tracking-wide-5:    0.12em;
  --tracking-cta:       0.14em;
  --tracking-wide-6:    0.16em;
  --tracking-eyebrow:   0.18em;
  --tracking-stamp:     0.2em;

  /* Line-height tokens (full ladder) */
  --leading-h1:       0.96;
  --leading-headline: 0.98;
  --leading-h2:       1.0;
  --leading-display:  1.02;
  --leading-tight:    1.05;
  --leading-snug:     1.1;
  --leading-snug-2:   1.15;
  --leading-snug-3:   1.2;
  --leading-pull:     1.25;
  --leading-faq:      1.3;
  --leading-quote:    1.35;
  --leading-cozy:     1.4;
  --leading-lead:     1.45;
  --leading-medium:   1.5;
  --leading-body:     1.55;
  --leading-relax:    1.6;
  --leading-faq-a:    1.65;
  --leading-loose:    1.8;
}

/* ============================================================
 * GLOBAL TYPE UTILITY CLASSES (#334)
 * One canonical declaration per recurring type style. Components
 * apply these via class to compose styling; do NOT redeclare
 * font-family / size / weight / tracking / transform per-component.
 * Add new utilities here when a pattern shows up twice. Existing
 * component blocks are being migrated incrementally; until that
 * sweep completes both paths render identically because both
 * reference the same tokens.
 * ============================================================ */

/* Mono uppercase eyebrow (the dominant micro-label across the site:
   section nums, CTAs, captions, urgency lines, footer column heads).
   .eyebrow is the legacy class name; .t-eyebrow is the new canonical.
   Both share one declaration so changes propagate uniformly. */
.t-eyebrow,
.eyebrow {
  font-family: var(--mono);
  font-size: var(--text-11);
  font-weight: var(--weight-normal);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mute);
}
.t-eyebrow-accent { color: var(--accent); }
.t-eyebrow-tight  { letter-spacing: var(--tracking-cta); }
.t-eyebrow-tiny   { font-size: var(--text-9); letter-spacing: var(--tracking-stamp); }

/* Mono uppercase CTA / button text. */
.t-mono-cta {
  font-family: var(--mono);
  font-size: var(--text-13);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
}

/* Display headings (Fraunces). */
.t-display-h1 {
  font-family: var(--serif);
  font-size: var(--text-h1);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-h1);
  line-height: var(--leading-h1);
  font-variation-settings: "opsz" 144, "wght" 380, "SOFT" 0;
}
.t-display-h2 {
  font-family: var(--serif);
  font-size: var(--text-h2);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-h2);
  line-height: var(--leading-h2);
  font-variation-settings: "opsz" 96, "wght" 380, "SOFT" 0;
}
.t-display-h3 {
  font-family: var(--serif);
  font-size: var(--text-28);
  font-weight: var(--weight-normal);
  letter-spacing: var(--tracking-h3);
  line-height: var(--leading-tight);
}

/* Body copy. */
.t-body {
  font-family: var(--serif);
  font-size: var(--text-19);
  line-height: var(--leading-body);
  color: var(--ink);
}
.t-body-lead {
  font-family: var(--serif);
  font-size: var(--text-21);
  line-height: var(--leading-lead);
  color: var(--ink-soft);
}
.t-body-sm {
  font-family: var(--serif);
  font-size: var(--text-15);
  line-height: var(--leading-relax);
  color: var(--ink-soft);
}

/* Italic pull-quote / promise line. */
.t-pull {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-pull);
  line-height: var(--leading-pull);
  letter-spacing: var(--tracking-em);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-variation-settings: "opsz" 14, "SOFT" 30;
  font-size: var(--text-19);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.06;
  mix-blend-mode: multiply;
  z-index: 99;
}

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

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: var(--weight-normal);
  margin: 0;
  letter-spacing: var(--tracking-em);
}

p { margin: 0 0 1.1em; }

.container { max-width: var(--content); padding: 0 32px; margin: 0 auto; }
.reading { max-width: var(--reading); }

/* .eyebrow now defined alongside .t-eyebrow earlier in this file. */

.rule {
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}
.rule-thick {
  height: 2px;
  background: var(--ink);
  border: 0;
}

/* ─── header ─── */
header.site {
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
}

.site-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  max-width: var(--content);
  margin: 0 auto;
  gap: 24px;
}

.wordmark {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "wght" 500, "SOFT" 0;
  font-size: var(--text-26);
  letter-spacing: var(--tracking-h2);
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.wordmark .ops-mark {
  font-family: var(--mono);
  font-size: var(--text-11);
  font-weight: var(--weight-normal);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mute);
  transform: translateY(-3px);
}

.wordmark .dot {
  color: var(--accent);
  font-variation-settings: "opsz" 144, "wght" 700;
  margin-left: -2px;
}

.nav-cta {
  font-family: var(--mono);
  font-size: var(--text-12);
  letter-spacing: var(--tracking-wide-5);
  text-transform: uppercase;
  border: 1px solid var(--ink);
  padding: 10px 18px;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.nav-cta:hover {
  background: var(--ink);
  color: var(--paper);
}

/* secondary inline nav inside header (links to /team, /for/..., comparisons) */
.subnav {
  display: flex;
  gap: 22px;
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--mute);
  align-items: baseline;
  flex-wrap: wrap;
}
.subnav a:hover { color: var(--accent); }
.subnav a[aria-current="page"] {
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

/* mobile menu — pure-CSS hamburger via <details>
   On desktop (>900px), force the nav to render regardless of [open] state
   (overrides the user-agent default that hides <details> non-summary children
   when collapsed). Hamburger summary itself is hidden on desktop. */
details.mobile-menu { position: relative; }
details.mobile-menu > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: var(--text-12);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--mute);
  border: 1px solid var(--rule);
  padding: 8px 14px;
  user-select: none;
}
details.mobile-menu > summary::-webkit-details-marker { display: none; }
details.mobile-menu > summary::marker { display: none; content: ''; }
details.mobile-menu > summary::before { content: '☰  Menu'; color: var(--ink); }
details.mobile-menu[open] > summary::before { content: '×  Close'; color: var(--accent); }

/* Desktop: nav is always shown inline; hamburger is hidden */
@media (min-width: 901px) {
  details.mobile-menu > summary { display: none; }
  details.mobile-menu > *:not(summary) { display: revert; }
  details.mobile-menu .subnav { display: flex; }
}

/* Mobile: nav collapses behind hamburger; expanded panel on [open] */
@media (max-width: 900px) {
  details.mobile-menu > summary { display: inline-block; }
  details.mobile-menu .subnav { display: none; }
  details.mobile-menu[open] .subnav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    background: var(--paper);
    border: 1px solid var(--rule);
    padding: 14px 0;
    min-width: 220px;
    box-shadow: 0 12px 28px -16px color-mix(in srgb, var(--ink) 30%, transparent);
    z-index: 60;
  }
  details.mobile-menu[open] .subnav a {
    display: block;
    width: 100%;
    padding: 10px 22px;
    font-size: var(--text-12);
  }
  details.mobile-menu[open] .subnav a:hover { background: var(--paper-deep); color: var(--accent); }
}

/* sticky-header anchor offset — section ids land below the header, not under it */
section[id] { scroll-margin-top: 80px; }
@media (max-width: 900px) { section[id] { scroll-margin-top: 64px; } }

/* nav dropdown (Compare → competitor list, etc.)
   Uses native <details> for click-toggle; UA-stylesheet hides panel when closed
   so no JS visibility logic needed — site.js only adds click-outside-closes. */
details.nav-dropdown { position: relative; }
details.nav-dropdown > summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--mute);
  user-select: none;
}
details.nav-dropdown > summary::-webkit-details-marker { display: none; }
details.nav-dropdown > summary::marker { display: none; content: ''; }
details.nav-dropdown > summary::after { content: ' ▾'; font-size: var(--text-9); opacity: 0.55; margin-left: 4px; }
details.nav-dropdown[open] > summary::after { content: ' ▴'; opacity: 1; }
details.nav-dropdown > summary:hover,
details.nav-dropdown[open] > summary { color: var(--accent); }

.dropdown-panel {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 10px 0;
  min-width: 220px;
  box-shadow: 0 12px 28px -16px color-mix(in srgb, var(--ink) 30%, transparent);
  z-index: 60;
}
.dropdown-panel a {
  display: block;
  padding: 10px 22px;
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
}
.dropdown-panel a:hover {
  background: var(--paper-deep);
  color: var(--accent);
}
.dropdown-panel a[aria-current="page"] {
  color: var(--ink);
  background: var(--paper-deep);
  border-left: 2px solid var(--accent);
  padding-left: 20px;
}

/* Header "The team" dropdown — 2-column grid of personas. Each cell:
   portrait + (dept eyebrow + persona name). Renders inside the same
   .nav-dropdown <details> shell so open/close and outside-click behavior
   are inherited; mobile collapses to a single column. */
.dropdown-panel--team {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  min-width: 560px;
  padding: 14px;
  /* Align panel's left edge with the "The team" summary instead of right edge. */
  left: 0;
  right: auto;
}
.dropdown-panel--team .team-dd-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  white-space: nowrap;
  text-decoration: none;
  border-radius: 4px;
}
.dropdown-panel--team .team-dd-portrait {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper-deep);
  border: 1px solid var(--rule-soft);
}
.dropdown-panel--team .team-dd-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dropdown-panel--team .team-dd-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.dropdown-panel--team .team-dd-eyebrow {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--mute);
  opacity: 0.8;
}
.dropdown-panel--team .team-dd-name {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.dropdown-panel--team .team-dd-row:hover { background: var(--paper-deep); }
.dropdown-panel--team .team-dd-row:hover .team-dd-name { color: var(--accent); }
@media (max-width: 900px) {
  details.mobile-menu[open] .dropdown-panel--team {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    gap: 0;
  }
  details.mobile-menu[open] .dropdown-panel--team .team-dd-row { padding: 8px 0; }
  details.mobile-menu[open] .dropdown-panel--team .team-dd-portrait {
    width: 32px;
    height: 32px;
  }
  details.mobile-menu[open] .dropdown-panel--team .team-dd-name { font-size: 16px; }
}

/* Inside the mobile hamburger panel, dropdowns flow inline (no absolute positioning) */
@media (max-width: 900px) {
  details.mobile-menu[open] details.nav-dropdown { width: 100%; padding: 0 22px; }
  details.mobile-menu[open] details.nav-dropdown > summary { padding: 10px 0; }
  details.mobile-menu[open] .dropdown-panel {
    position: static;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0 0 6px 14px;
    min-width: 0;
  }
  details.mobile-menu[open] .dropdown-panel a {
    padding: 6px 0;
    font-size: var(--text-11);
  }
}

/* ─── breadcrumb / back link ─── */
.crumb {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-wide-5);
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.crumb:hover { color: var(--accent); }

/* utility: last <section> on a page (sub-pages use this on the section
   that immediately precedes the .end CTA). Drops the default 1px hairline
   that <section> inherits and tightens bottom padding so the .end CTA
   doesn't sit on top of an empty rule. */
.section-final {
  border-bottom: none;
  padding-bottom: 60px;
}

/* ─── page hero (used by all sub-pages) ─── */
/* page-hero also hosts the same .hero-bg + .hero-overlay backdrop pattern
   that the chooser .hero uses, so every industry page carries the editorial
   illustration. overflow + isolation are required so the absolute-positioned
   bg/overlay stack inside this section instead of bleeding out. */
.page-hero {
  padding: 96px 0 72px;
  border-bottom: 1px solid var(--rule);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.page-hero h1 {
  font-variation-settings: "opsz" 144, "wght" 380, "SOFT" 0;
  font-size: var(--text-h2);
  line-height: var(--leading-headline);
  letter-spacing: var(--tracking-mid-tight);
  margin: 24px 0 28px;
  max-width: 920px;
}

.page-hero h1 em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "wght" 380, "SOFT" 100;
  color: var(--accent);
}

.page-hero .lead {
  max-width: 640px;
  font-size: var(--text-21);
  line-height: var(--leading-lead);
  color: var(--ink-soft);
  margin: 0 0 32px;
}

.page-hero .one-line {
  display: inline-block;
  border-left: 3px solid var(--accent);
  padding: 10px 18px;
  font-size: var(--text-16);
  color: var(--ink-soft);
  background: var(--paper-deep);
  font-style: italic;
  font-variation-settings: "opsz" 14, "wght" 420, "SOFT" 60;
  max-width: 720px;
}

/* ─── btn primary (matches index.html) ─── */
.btn-primary {
  font-family: var(--mono);
  font-size: var(--text-13);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 16px 28px;
  border: 1px solid var(--ink);
  transition: all 0.18s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
}
.btn-primary .arrow {
  transition: transform 0.2s ease;
}
.btn-primary:hover .arrow {
  transform: translateX(4px);
}

.btn-ghost {
  font-family: var(--mono);
  font-size: var(--text-12);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--mute);
  padding: 14px 0;
}
.btn-ghost:hover { color: var(--accent); }

/* Phone — header-only. The body CTA is "Book a demo"; we don't pair phone pills next to it. */
.nav-phone {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--mute);
  text-decoration: none;
  margin-right: 14px;
  white-space: nowrap;
}
.nav-phone:hover { color: var(--accent); }
.nav-phone .nav-phone-num { font-family: Georgia, serif; font-size: var(--text-14); letter-spacing: var(--tracking-tight); text-transform: none; color: var(--ink); }

/* Sign in — secondary link for existing app users (consultants + companies). */
.nav-signin {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  margin-right: 14px;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.nav-signin:hover { color: var(--accent); border-bottom-color: var(--accent); }
@media (max-width: 600px) {
  .nav-signin { display: none; }
}

/* On desktop the inline .nav-signin is the canonical Sign in entry; hide
   the in-subnav duplicate so it doesn't render twice. The burger menu
   on mobile still surfaces it via the open subnav. */
@media (min-width: 901px) {
  nav.subnav > a.subnav-signin { display: none; }
}

/* ─── section base ─── */
section {
  padding: 100px 0;
  border-bottom: 1px solid var(--rule);
}

.section-head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  margin-bottom: 60px;
  align-items: baseline;
}

.section-head .num {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mute);
}

.section-head h2 {
  font-variation-settings: "opsz" 96, "wght" 380, "SOFT" 0;
  font-size: var(--text-h2-sm);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
  max-width: 720px;
}

.section-head h2 em {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: "opsz" 96, "wght" 380, "SOFT" 100;
}

.section-head .blurb {
  grid-column: 2;
  font-size: var(--text-18);
  color: var(--ink-soft);
  line-height: var(--leading-body);
  max-width: 680px;
  margin: 16px 0 0;
}

/* compact hint disclosure inside a section-head; sits below the h2 in the
   right column. Mono summary so it reads as metadata, not body copy. */
.section-head .section-hint {
  grid-column: 2;
  margin-top: 14px;
  max-width: 680px;
}
.section-head .section-hint summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mute);
  user-select: none;
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
}
.section-head .section-hint summary::-webkit-details-marker { display: none; }
.section-head .section-hint summary::marker { display: none; content: ''; }
.section-head .section-hint summary:hover { color: var(--accent); }
.section-head .section-hint[open] summary { color: var(--ink); }
.section-head .section-hint[open] summary span[aria-hidden] { transform: rotate(45deg); }
.section-head .section-hint summary span[aria-hidden] {
  display: inline-block;
  transition: transform 0.18s ease;
  font-family: var(--mono);
  color: var(--accent);
}
.section-head .section-hint p {
  margin: 12px 0 0;
  font-size: var(--text-15);
  color: var(--ink-soft);
  line-height: var(--leading-body);
}

/* ─── industry vertical sections ─── */
.industry-row {
  display: grid;
  grid-template-columns: 200px 1fr 280px;
  gap: 40px;
  align-items: start;
  padding: 36px 0;
  border-top: 1px solid var(--rule);
}

.industry-row:first-of-type { border-top: 2px solid var(--ink); }
.industry-row:last-of-type { border-bottom: 1px solid var(--rule); }

.industry-row .label {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 10px;
}

.industry-row h3 {
  font-variation-settings: "opsz" 72, "wght" 460, "SOFT" 30;
  font-size: var(--text-28);
  line-height: var(--leading-snug-2);
  margin-bottom: 12px;
  letter-spacing: var(--tracking-h2-sm);
}

.industry-row p { font-size: var(--text-17); color: var(--ink-soft); margin: 0 0 16px; max-width: 580px; }

.industry-row .persona-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--mute);
  border-top: 1px solid var(--rule-soft);
  padding-top: 14px;
  margin-top: 8px;
}

.industry-row .persona-tag a { color: var(--accent); }
.industry-row .persona-tag a:hover { text-decoration: underline; }

.industry-row .stat-card {
  background: var(--paper-deep);
  padding: 28px 24px;
  border: 1px solid var(--rule);
}

.industry-row .stat-card .num {
  font-family: var(--mono);
  font-size: var(--text-42);
  font-weight: var(--weight-light);
  color: var(--accent);
  letter-spacing: var(--tracking-h2-sm);
  line-height: var(--leading-h2);
  display: block;
  margin-bottom: 16px;
}

.industry-row .stat-card .desc {
  font-size: var(--text-13);
  color: var(--ink-soft);
  line-height: var(--leading-medium);
}

/* ─── industry chooser (root praktend.com agnostic home) ─── */
.industry-chooser {
  list-style: none;
  padding: 0;
  margin: 48px 0 0;
  border-top: 1px solid var(--rule);
}
.industry-chooser > li { border-bottom: 1px solid var(--rule); }
.industry-row-link {
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  gap: 24px;
  align-items: center;
  padding: 28px 0;
  color: var(--ink);
  transition: padding-inline 0.18s ease, color 0.18s ease;
}
.industry-row-link:hover {
  color: var(--accent);
  padding-inline: 8px;
}
.industry-row-link:hover .industry-arrow { transform: translateX(6px); }
.industry-rank {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-22);
  color: var(--mute);
  font-variation-settings: "opsz" 144, "wght" 400, "SOFT" 0;
}
.industry-name {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "wght" 400, "SOFT" 0;
  font-size: var(--text-h3);
  letter-spacing: var(--tracking-h2);
  margin-bottom: 4px;
}
.industry-status {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mute);
}
.industry-status-pill {
  font-family: var(--mono);
  font-size: var(--text-10);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--rule);
  white-space: nowrap;
}
.industry-status-pill--live { color: var(--accent); border-color: var(--accent); }
.industry-arrow {
  font-family: var(--mono);
  font-size: var(--text-22);
  color: var(--mute);
  transition: transform 0.18s ease, color 0.18s ease;
}
.industry-row-link:hover .industry-arrow { color: var(--accent); }
@media (max-width: 600px) {
  .industry-row-link {
    grid-template-columns: 32px 1fr auto;
    gap: 14px;
    padding: 22px 0;
  }
  .industry-row-link .industry-status-pill { display: none; }
}

/* ─── compare model (used inline + on comparison pages) ─── */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--paper);
  border: 2px solid var(--ink);
  font-size: var(--text-16);
}

.compare-table thead th {
  background: var(--ink);
  color: var(--paper);
  text-align: left;
  padding: 22px 22px;
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  font-weight: var(--weight-normal);
  vertical-align: top;
  border-right: 1px solid var(--ink-soft);
}

.compare-table thead th:last-child { border-right: none; }
.compare-table thead th .tier-name {
  font-family: var(--serif);
  font-variation-settings: "opsz" 72, "wght" 500, "SOFT" 0;
  font-size: var(--text-22);
  letter-spacing: var(--tracking-h3);
  display: block;
  margin-top: 6px;
  text-transform: none;
  color: var(--paper);
}

.compare-table thead th.col-praktend .tier-name { color: var(--gold); }

.compare-table tbody td {
  padding: 22px 24px;
  border-top: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  vertical-align: top;
  line-height: var(--leading-medium);
  color: var(--ink-soft);
}
.compare-table tbody td:last-child { border-right: none; }

.compare-table tbody td.dim {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-wide-5);
  text-transform: uppercase;
  color: var(--mute);
  background: var(--paper-deep);
  white-space: nowrap;
  width: 200px;
}

.compare-table tbody td.win {
  color: var(--ink);
  font-variation-settings: "opsz" 14, "wght" 460, "SOFT" 30;
  background: color-mix(in srgb, var(--accent) 4%, var(--paper));
}

.compare-table tbody td.win::before {
  content: '●';
  color: var(--accent);
  font-size: var(--text-10);
  margin-right: 8px;
  position: relative;
  top: -2px;
}

@media (max-width: 900px) {
  .compare-table thead { display: none; }
  .compare-table tbody td.dim { width: auto; white-space: normal; padding: 14px 18px 6px; background: var(--ink); color: var(--paper); display: block; }
  .compare-table tbody td { display: block; border-right: none; padding: 8px 18px; }
  .compare-table tbody td:before { content: attr(data-col) ' - '; font-family: var(--mono); font-size: var(--text-10); letter-spacing: var(--tracking-cta); text-transform: uppercase; color: var(--mute); margin-right: 6px; }
  .compare-table tbody td.dim:before { content: ''; }
  .compare-table tbody td.win { background: color-mix(in srgb, var(--accent) 6%, var(--paper)); }
  .compare-table tbody tr { display: block; border-bottom: 2px solid var(--ink); }
}

/* ─── team grid (cards) ─── */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 2px solid var(--ink);
}

.team-grid > a {
  display: block;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 32px 28px 36px;
  background: var(--paper);
  transition: background 0.18s ease;
  position: relative;
}

.team-grid > a:hover { background: var(--paper-deep); }

.team-grid .role {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 16px;
}

.team-grid h3 {
  font-variation-settings: "opsz" 72, "wght" 500, "SOFT" 30;
  font-size: var(--text-32);
  margin-bottom: 6px;
  letter-spacing: var(--tracking-h2);
}

.team-grid h3 .last { color: var(--mute); font-variation-settings: "opsz" 72, "wght" 380, "SOFT" 0; }

.team-grid .pitch {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: "opsz" 14, "wght" 400, "SOFT" 80;
  margin: 0 0 18px;
  font-size: var(--text-17);
}

.team-grid .bio {
  font-size: var(--text-16);
  color: var(--ink-soft);
  line-height: var(--leading-body);
  margin: 0 0 22px;
}

.team-grid .channels {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--mute);
  border-top: 1px solid var(--rule-soft);
  padding-top: 14px;
}

.team-grid .channels strong {
  color: var(--accent);
  font-weight: var(--weight-normal);
  display: block;
  margin-bottom: 4px;
  letter-spacing: var(--tracking-eyebrow);
}

.team-grid > a.is-human { background: var(--paper-deep); }
.team-grid > a.is-human .role { color: var(--accent); }
.team-grid .tier { color: var(--accent); margin-left: 8px; letter-spacing: var(--tracking-eyebrow); }
.team-grid.solo { grid-template-columns: 1fr; }
.lede { max-width: 680px; font-size: var(--text-17); color: var(--ink-soft); line-height: var(--leading-body); margin: 0 0 36px; }

/* tier-grouped team sections */
.tier-group { margin-bottom: 56px; }
.tier-group:last-child { margin-bottom: 0; }
.tier-group .tier-heading {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: baseline;
  margin-bottom: 24px;
}
.tier-group .tier-heading .label {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.tier-group .tier-heading h3 {
  font-variation-settings: "opsz" 72, "wght" 460, "SOFT" 30;
  font-size: var(--text-28);
  letter-spacing: var(--tracking-h2-sm);
  margin: 0;
}
.tier-group .tier-heading h3 em {
  color: var(--accent);
  font-style: italic;
  font-variation-settings: "opsz" 72, "wght" 460, "SOFT" 80;
}
.tier-group .tier-heading p {
  grid-column: 2;
  font-size: var(--text-16);
  color: var(--ink-soft);
  line-height: var(--leading-medium);
  margin: 8px 0 0;
  max-width: 580px;
}
@media (max-width: 900px) {
  .tier-group .tier-heading { grid-template-columns: 1fr; gap: 12px; }
  .tier-group .tier-heading p { grid-column: 1; }
}

@media (max-width: 900px) {
  .team-grid { grid-template-columns: 1fr; }
  .team-grid > a { border-right: none; }
}

.team-section-label {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 18px;
}

/* ─── persona detail page ─── */
.persona-hero {
  padding: 96px 0 60px;
  border-bottom: 1px solid var(--rule);
}

.persona-hero .role {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}

.persona-hero h1 {
  font-variation-settings: "opsz" 144, "wght" 380, "SOFT" 0;
  font-size: var(--text-h2-xl);
  line-height: var(--leading-headline);
  letter-spacing: var(--tracking-mid-tight);
  margin: 0 0 28px;
  max-width: 880px;
}

.persona-hero h1 em {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: "opsz" 144, "wght" 380, "SOFT" 100;
}

.persona-hero .greeting {
  max-width: 640px;
  font-size: var(--text-20);
  color: var(--ink-soft);
  line-height: var(--leading-medium);
  margin: 0;
}

.persona-grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.persona-grid .label {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mute);
  padding-top: 6px;
}

.persona-grid h3 {
  font-variation-settings: "opsz" 72, "wght" 460, "SOFT" 30;
  font-size: var(--text-24);
  margin: 0 0 16px;
  letter-spacing: var(--tracking-h2-sm);
}

.persona-grid p, .persona-grid li {
  font-size: var(--text-17);
  color: var(--ink-soft);
  line-height: var(--leading-relax);
}

.persona-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.persona-grid li {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.persona-grid li:last-child { border-bottom: none; }

.persona-grid li::before {
  content: '- ';
  color: var(--accent);
  margin-right: 6px;
}

@media (max-width: 900px) {
  .persona-grid { grid-template-columns: 1fr; gap: 22px; }
}

.persona-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}

.persona-stats > div {
  padding: 32px 28px;
  border-right: 1px solid var(--rule);
}

.persona-stats > div:last-child { border-right: none; }

.persona-stats .num {
  font-family: var(--mono);
  font-size: var(--text-42);
  font-weight: var(--weight-light);
  color: var(--accent);
  letter-spacing: var(--tracking-h2-sm);
  line-height: var(--leading-h2);
  margin-bottom: 16px;
  display: block;
}

.persona-stats .desc {
  font-size: var(--text-14);
  color: var(--ink-soft);
  line-height: var(--leading-medium);
}

@media (max-width: 900px) {
  .persona-stats { grid-template-columns: 1fr; }
  .persona-stats > div { border-right: none; border-bottom: 1px solid var(--rule); }
  .persona-stats > div:last-child { border-bottom: none; }
}

/* ─── verdict / closing block ─── */
.verdict {
  background: var(--ink);
  color: var(--paper);
}

.verdict .container { padding-top: 96px; padding-bottom: 96px; }

.verdict .num { color: var(--gold); }

.verdict .body {
  font-size: var(--text-21);
  line-height: var(--leading-body);
  max-width: 720px;
  color: color-mix(in srgb, var(--paper) 90%, var(--ink));
  font-variation-settings: "opsz" 36, "wght" 360, "SOFT" 30;
}

.verdict .body em {
  color: var(--gold);
  font-style: italic;
  font-variation-settings: "opsz" 36, "wght" 400, "SOFT" 80;
}

.verdict .body strong {
  color: var(--paper);
  font-weight: var(--weight-medium);
}

/* ─── end / cta ─── */
.end {
  padding: 140px 0 80px;
  background: var(--paper-deep);
  border-bottom: none;
  text-align: center;
}

.end h2 {
  font-variation-settings: "opsz" 144, "wght" 360, "SOFT" 0;
  font-size: var(--text-h1);
  line-height: var(--leading-headline);
  letter-spacing: var(--tracking-h1);
  max-width: 900px;
  margin: 0 auto 36px;
}

.end h2 em {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: "opsz" 144, "wght" 360, "SOFT" 100;
}

.end .end-sub {
  font-size: var(--text-19);
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0 auto 40px;
  line-height: var(--leading-body);
}

.end .end-fineline {
  margin-top: 28px;
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mute);
}

/* ─── footer ─── */
footer.foot {
  background: var(--ink);
  color: color-mix(in srgb, var(--paper) 70%, var(--ink));
  padding: 56px 0 28px;
  font-size: var(--text-14);
}

.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 25%, transparent);
}

.foot-mark {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "wght" 500, "SOFT" 0;
  font-size: var(--text-28);
  color: var(--paper);
  letter-spacing: var(--tracking-h2);
  margin-bottom: 6px;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.foot-mark .ops-mark {
  font-family: var(--mono);
  font-size: var(--text-11);
  font-weight: var(--weight-normal);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  transform: translateY(-4px);
}

.foot-mark .dot {
  color: var(--accent-mid);
  margin-left: -2px;
}

.foot-tag {
  font-style: italic;
  font-variation-settings: "opsz" 14, "wght" 400, "SOFT" 80;
  color: var(--gold);
  font-size: var(--text-15);
}

.foot-col h5 {
  font-family: var(--mono);
  font-size: var(--text-10);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 50%, var(--ink));
  font-weight: var(--weight-normal);
  margin: 0 0 16px;
}

.foot-col a, .foot-col span:not(.foot-mark-toggle) {
  display: block;
  color: color-mix(in srgb, var(--paper) 80%, var(--ink));
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: var(--text-12);
  letter-spacing: var(--tracking-wide-1);
}

.foot-col a:hover {
  color: var(--paper);
}

.foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: var(--text-10);
  letter-spacing: var(--tracking-wide-5);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 40%, var(--ink));
}

@media (max-width: 900px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
}

/* ─── responsive ─── */
@media (max-width: 900px) {
  body { font-size: var(--text-17); }
  .container, .site-inner { padding: 0 22px; }
  .site-inner { padding: 16px 22px; }

  .page-hero { padding: 60px 0 50px; }
  .persona-hero { padding: 60px 0 44px; }

  section { padding: 56px 0; }

  .section-head { grid-template-columns: 1fr; gap: 14px; margin-bottom: 32px; }
  .section-head .blurb { grid-column: 1; }

  .industry-row { grid-template-columns: 1fr; gap: 16px; }
  .industry-row .label { padding-top: 0; }
}

/* ─── portrait + verify-me row (Chris) ─── */
.portrait {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 4 / 5;
  background: var(--paper-deep);
  border: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: var(--text-10);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--mute);
  position: relative;
  overflow: hidden;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait .placeholder-mark {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "wght" 500, "SOFT" 0;
  font-size: var(--text-84);
  color: var(--accent);
  letter-spacing: var(--tracking-display-xl);
}
.portrait::after {
  content: '';
  position: absolute; inset: 0;
  border: 6px solid var(--paper);
  pointer-events: none;
}

.verify-me {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
}
.verify-me .label { color: var(--mute); }
.verify-me a {
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 2px;
}
.verify-me a:hover { color: var(--accent); border-color: var(--accent); }

/* ─── mobile pricing cards (replaces matrix below 900px) ─── */
.tier-cards {
  display: none;
  flex-direction: column;
  gap: 20px;
}

.tier-card {
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 26px 24px 28px;
  position: relative;
}
.tier-card .tier-name {
  font-family: var(--serif);
  font-variation-settings: "opsz" 72, "wght" 500, "SOFT" 0;
  font-size: var(--text-28);
  letter-spacing: var(--tracking-h2);
  margin-bottom: 4px;
}
.tier-card .tier-pitch {
  font-family: var(--mono);
  font-size: var(--text-10);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 14px;
}
.tier-card .tier-price {
  font-family: var(--mono);
  font-size: var(--text-28);
  font-weight: var(--weight-normal);
  letter-spacing: var(--tracking-em);
  margin-bottom: 14px;
}
.tier-card .tier-price small {
  font-size: var(--text-12);
  color: var(--mute);
  margin-left: 6px;
  letter-spacing: var(--tracking-wide-2);
  font-weight: var(--weight-light);
}
.tier-card.featured {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.tier-card.featured .tier-name { color: var(--paper); }
.tier-card.featured .tier-pitch { color: var(--gold); }
.tier-card.featured .tier-price { color: var(--paper); }
.tier-card.featured .tier-price small { color: color-mix(in srgb, var(--paper) 60%, var(--ink)); }

.tier-card .badge {
  position: absolute;
  top: -10px;
  right: 18px;
  font-family: var(--mono);
  font-size: var(--text-9);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  background: var(--accent);
  color: var(--paper);
  padding: 4px 10px;
}

.tier-card ul {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  font-size: var(--text-15);
}
.tier-card li {
  padding: 8px 0;
  border-top: 1px solid color-mix(in srgb, var(--rule) 40%, transparent);
  color: inherit;
}
.tier-card.featured li {
  border-color: color-mix(in srgb, var(--paper) 18%, transparent);
  color: color-mix(in srgb, var(--paper) 88%, var(--ink));
}
.tier-card li:first-child { border-top: none; }
.tier-card li::before {
  content: '●';
  color: var(--accent);
  margin-right: 10px;
  font-size: var(--text-9);
  position: relative;
  top: -2px;
}
.tier-card.featured li::before { color: var(--gold); }

.full-comparison {
  margin-top: 8px;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.full-comparison > summary {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-wide-5);
  text-transform: uppercase;
  color: var(--mute);
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
}
.full-comparison > summary::-webkit-details-marker { display: none; }
.full-comparison > summary::after { content: ' ↓'; }
.full-comparison[open] > summary::after { content: ' ↑'; }
.full-comparison .menu-card { margin: 0 18px 18px; border-width: 1px; }
.full-comparison-note { padding: 0 18px 12px; }

/* contract-length micro-line in pricing tier head badge-strip */
.contract-line {
  font-family: var(--mono);
  font-size: var(--text-9);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  line-height: var(--leading-cozy);
}

@media (max-width: 900px) {
  .tier-cards { display: flex; }
  .pricing .menu-card.matrix { display: none; }
}

/* ─── pricing pin on industry pages ─── */
.pricing-pin {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding: 12px 18px;
  border: 1px solid var(--rule);
  background: var(--paper-deep);
  font-family: var(--mono);
  font-size: var(--text-12);
  letter-spacing: var(--tracking-wide-5);
  text-transform: uppercase;
  color: var(--ink);
}
.pricing-pin .price {
  color: var(--accent);
  font-variation-settings: "opsz" 14, "wght" 500;
}
.pricing-pin a {
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  color: var(--accent);
}
.pricing-pin a:hover { color: var(--accent-mid); }

/* ─── soft-callout (used for "When Lindy is right" inoculation) ─── */
.soft-callout {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold);
  padding: 22px 24px;
  background: var(--paper);
  max-width: 720px;
  margin-bottom: 32px;
}
.soft-callout .label {
  font-family: var(--mono);
  font-size: var(--text-10);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 10px;
}
.soft-callout h3 {
  font-variation-settings: "opsz" 36, "wght" 500, "SOFT" 30;
  font-size: var(--text-20);
  margin-bottom: 12px;
  letter-spacing: var(--tracking-h3);
}
.soft-callout ul {
  list-style: none; padding: 0; margin: 0;
  font-size: var(--text-16); color: var(--ink-soft); line-height: var(--leading-body);
}
.soft-callout li {
  padding: 6px 0;
  border-top: 1px solid var(--rule-soft);
}
.soft-callout li:first-child { border-top: none; }
.soft-callout li::before { content: '- '; color: var(--accent); }

/* ─── reassurance line under persona hero ─── */
.reassurance {
  margin-top: 18px;
  padding: 12px 18px;
  border-left: 2px solid var(--accent);
  background: var(--paper-deep);
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 14, "wght" 420, "SOFT" 60;
  font-size: var(--text-16);
  color: var(--ink-soft);
  max-width: 640px;
}
.reassurance strong { color: var(--ink); font-weight: var(--weight-medium); font-style: normal; }

/* ─── stat source tag (under .num inside .persona-stats / .stat-card) ─── */
.persona-stats .source,
.stat-card .source {
  display: block;
  font-family: var(--mono);
  font-size: var(--text-9);
  letter-spacing: var(--tracking-wide-5);
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 8px;
}
.persona-stats .source.industry,
.stat-card .source.industry { color: var(--mute); }

/* ─── PMS / integrations matrix ─── */
.pms-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.pms-grid > div {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 22px 24px;
}
.pms-grid > div:nth-child(2n) { border-right: none; }
.pms-grid h4 {
  font-variation-settings: "opsz" 36, "wght" 500, "SOFT" 0;
  font-size: var(--text-22);
  margin-bottom: 4px;
  letter-spacing: var(--tracking-h3);
}
.pms-grid .status {
  font-family: var(--mono);
  font-size: var(--text-10);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  display: inline-block;
  padding: 4px 10px;
  margin-bottom: 12px;
}
.pms-grid .status.live { background: var(--accent); color: var(--paper); }
.pms-grid .status.planned { background: var(--gold); color: var(--ink); }
.pms-grid .status.tbd { background: var(--paper-deep); color: var(--mute); border: 1px solid var(--rule); }
.pms-grid p { font-size: var(--text-15); color: var(--ink-soft); line-height: var(--leading-medium); margin: 0; }

@media (max-width: 900px) {
  .pms-grid { grid-template-columns: 1fr; }
  .pms-grid > div { border-right: none; }
}

/* founder-grid (used on /team/chris hero for portrait + bio) */
.founder-grid {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px) {
  .founder-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ─── reveal ─── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(12px);
    animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }
  .reveal.d1 { animation-delay: 0.1s; }
  .reveal.d2 { animation-delay: 0.22s; }
  .reveal.d3 { animation-delay: 0.34s; }
  .reveal.d4 { animation-delay: 0.46s; }

  @keyframes rise {
    to { opacity: 1; transform: translateY(0); }
  }
}

/* ─── editorial illustrations ─── */
.hero-figure {
  margin: 72px 0 0;
  padding: 0;
  border-top: 1px solid var(--rule);
  padding-top: 36px;
}
.hero-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--paper-deep);
}
.hero-figure figcaption {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.hero-figure figcaption em {
  font-style: italic;
  font-variation-settings: "opsz" 14, "wght" 400, "SOFT" 80;
  color: var(--accent);
  text-transform: none;
  letter-spacing: var(--tracking-normal);
  font-family: var(--serif);
  font-size: var(--text-14);
}
@media (max-width: 900px) {
  .hero-figure { margin-top: 48px; padding-top: 24px; }
}

/* start-row icon — small editorial dingbat right of body text */
.start-icon {
  float: right;
  width: 88px;
  height: 88px;
  margin: -6px 0 8px 20px;
  background: transparent;
}
.start-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  mix-blend-mode: multiply;
}
@media (max-width: 900px) {
  .start-icon { width: 64px; height: 64px; margin: 0 0 6px 14px; }
}

/* team-grid persona mark — circle-cropped portrait photo */
.team-grid > a .team-mark {
  width: 112px;
  height: 112px;
  margin: -8px 0 22px;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.team-grid > a .team-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* fallback for personas that still render the editorial illustration */
.team-grid > a .team-mark.is-illustration {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  width: 96px;
  height: 96px;
}
.team-grid > a .team-mark.is-illustration img {
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* persona-page hero mark — circle-cropped portrait photo */
.persona-mark {
  width: 132px;
  height: 132px;
  margin: 0 0 24px;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.persona-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.persona-mark.is-illustration {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  width: 110px;
  height: 110px;
}
.persona-mark.is-illustration img {
  object-fit: contain;
  mix-blend-mode: multiply;
}

/* Typographic placeholder for a persona-page hero mark when no portrait
   exists yet (e.g. Otis). Matches the circle dimensions of .persona-mark
   so layout below is unchanged. */
.persona-mark.persona-mark--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-deep);
}
.persona-mark--placeholder .persona-mark-text {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "wght" 460, "SOFT" 0;
  font-size: var(--text-64);
  letter-spacing: var(--tracking-display-xl);
  color: var(--ink);
  line-height: var(--leading-h2);
  margin-top: 6px;
}
@media (max-width: 900px) {
  .persona-mark { width: 100px; height: 100px; margin-bottom: 18px; }
  .persona-mark.is-illustration { width: 84px; height: 84px; }
  .persona-mark--placeholder .persona-mark-text { font-size: var(--text-48); }
}

/* -----------------------------------------------------------------
   "Book a demo" modal — single dialog, two panes (form → calendar).
   Triggered by any [data-cta-modal] or legacy mailto:chris@praktend.com.
   ----------------------------------------------------------------- */

dialog.pk-modal {
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  padding: 0;
  max-width: 640px;
  width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  border-radius: 4px;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--ink) 28%, transparent);
  font-family: var(--serif);
  overflow: hidden;
}

dialog.pk-modal::backdrop {
  background: color-mix(in srgb, var(--ink) 62%, transparent);
  backdrop-filter: blur(2px);
}

.pk-modal[open] {
  animation: pk-modal-in 220ms ease-out;
}

@keyframes pk-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pk-modal .pk-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--mute);
  font-size: var(--text-26);
  line-height: var(--leading-h2);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: color 120ms ease, border-color 120ms ease;
}
.pk-modal .pk-close:hover {
  color: var(--ink);
  border-color: var(--rule);
}

.pk-modal .pk-pane {
  padding: 40px 44px 36px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.pk-modal .pk-eyebrow {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

.pk-modal h2 {
  font-family: var(--serif);
  font-weight: var(--weight-normal);
  font-size: var(--text-30);
  line-height: var(--leading-snug-2);
  letter-spacing: var(--tracking-display-sm);
  margin: 0 0 12px 0;
}
.pk-modal h2 em {
  font-style: italic;
  color: var(--accent);
}

.pk-modal .pk-sub {
  color: var(--mute);
  margin: 0 0 24px 0;
  font-size: var(--text-16);
  line-height: var(--leading-medium);
}

.pk-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}

.pk-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--text-14);
}
.pk-field-wide { grid-column: 1 / -1; }

.pk-field > span {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pk-field .pk-hint {
  font-style: normal;
  color: var(--mute);
  text-transform: none;
  letter-spacing: var(--tracking-normal);
  font-size: var(--text-11);
  margin-left: 4px;
}

.pk-field input,
.pk-field select,
.pk-field textarea {
  font-family: var(--serif);
  font-size: var(--text-17);
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 8px 0 6px 0;
  outline: none;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 140ms ease;
}
.pk-field textarea {
  border: 1px solid var(--rule);
  padding: 10px 12px;
  resize: vertical;
  min-height: 76px;
  font-size: var(--text-16);
  line-height: var(--leading-lead);
}
.pk-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%),
                    linear-gradient(135deg, var(--mute) 50%, transparent 50%);
  background-position: calc(100% - 14px) 17px, calc(100% - 9px) 17px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 22px;
}
.pk-field input:focus,
.pk-field select:focus,
.pk-field textarea:focus {
  border-color: var(--accent);
}

.pk-honey {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.pk-error {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: var(--text-13);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-left: 2px solid var(--accent);
  padding: 8px 12px;
}

.pk-submit {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 6px;
}
.pk-submit[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.pk-fineline {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-wide-1);
  color: var(--mute);
  margin: 6px 0 0 0;
}

.pk-pane-cal .pk-cal {
  margin-top: 12px;
  min-height: 560px;
  border: 1px solid var(--rule-soft);
  background: #fff;
}

.pk-book-anchor {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 720px) {
  dialog.pk-modal {
    max-width: 100vw;
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    border: none;
  }
  .pk-modal .pk-pane { padding: 56px 22px 32px; }
  .pk-modal h2 { font-size: var(--text-26); }
  .pk-form { grid-template-columns: 1fr; }
  .pk-pane-cal .pk-cal { min-height: 480px; }
}

/* When JS is disabled, keep the #book anchor visible at the bottom of pages
   that have it as a footer fallback (those pages opt in by adding a
   <section id="book"> block of their own). */
@media (scripting: none) {
  .pk-book-anchor {
    position: static;
    left: auto;
    width: auto;
    height: auto;
    overflow: visible;
    padding: 24px;
    text-align: center;
    border-top: 1px solid var(--rule-soft);
  }
}

/* -----------------------------------------------------------------
   Department grouping on /team — wraps the existing tier-group
   rhythm but groups cards by domain (Patient Office, Revenue Cycle,
   Growth & Talent, Operations). Tier identity moves to a per-card
   pill (.tier-badge) and a single tier-callout block below.
   ----------------------------------------------------------------- */

.dept-group { margin-bottom: 56px; }
.dept-group:last-of-type { margin-bottom: 64px; }

.dept-group .dept-heading {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: baseline;
  margin-bottom: 24px;
}

.dept-eyebrow {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.dept-group .dept-heading h3 {
  font-variation-settings: "opsz" 72, "wght" 460, "SOFT" 30;
  font-size: var(--text-28);
  letter-spacing: var(--tracking-h2-sm);
  margin: 0;
}
.dept-group .dept-heading h3 em {
  color: var(--accent);
  font-style: italic;
  font-variation-settings: "opsz" 72, "wght" 460, "SOFT" 80;
}
.dept-group .dept-heading p {
  grid-column: 2;
  font-size: var(--text-16);
  color: var(--ink-soft);
  line-height: var(--leading-medium);
  margin: 8px 0 0;
  max-width: 580px;
}

/* Adaptive grid inside a dept-group: 2 cards become 2 columns,
   3 cards become 3 columns (auto-fit collapses empty tracks). */
.dept-group .team-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Tier badge — small mono-caps pill placed top-right of every card.
   Steady is muted, Build is mid-accent, Run is full accent. */

.tier-badge {
  position: absolute;
  top: 22px;
  right: 22px;
  font-family: var(--mono);
  font-size: var(--text-10);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  padding: 4px 9px 3px;
  border: 1px solid currentColor;
  border-radius: 999px;
  line-height: var(--leading-h2);
  white-space: nowrap;
  pointer-events: none;
}
.tier-badge[data-tier="steady"] { color: var(--mute); }
.tier-badge[data-tier="build"]  { color: var(--accent-mid); }
.tier-badge[data-tier="run"]    { color: var(--accent); }

/* Inline tier-badge inside the tier-callout (no absolute positioning) */
.tier-callout .tier-badge {
  position: static;
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}

/* Tier-callout — one secondary block below the four department sections
   that summarises Steady / Build / Run with pricing and what each unlocks. */
.tier-callout {
  border-top: 1px solid var(--rule);
  padding-top: 36px;
  margin-top: 16px;
}
.tier-callout-head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 40px;
  align-items: baseline;
  margin-bottom: 24px;
}
.tier-callout-head h3 {
  font-variation-settings: "opsz" 72, "wght" 460, "SOFT" 30;
  font-size: var(--text-26);
  letter-spacing: var(--tracking-h2-sm);
  margin: 0;
}
.tier-callout-head h3 em {
  color: var(--accent);
  font-style: italic;
  font-variation-settings: "opsz" 72, "wght" 460, "SOFT" 80;
}
.tier-callout-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.tier-callout-grid > div {
  border: 1px solid var(--rule);
  padding: 20px 22px;
  background: var(--paper);
}
.tier-callout-label {
  font-family: var(--mono);
  font-size: var(--text-12);
  letter-spacing: var(--tracking-wide-5);
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 10px;
}
.tier-callout-grid p {
  font-size: var(--text-15);
  color: var(--ink-soft);
  line-height: var(--leading-medium);
  margin: 0;
}

@media (max-width: 900px) {
  .dept-group .dept-heading,
  .tier-callout-head { grid-template-columns: 1fr; gap: 12px; }
  .dept-group .dept-heading p { grid-column: 1; }
  .tier-callout-grid { grid-template-columns: 1fr; }
  .tier-badge { top: 18px; right: 18px; }
}

/* -----------------------------------------------------------------
   Persona-page chrome for the department model.
   .dept-tag — sits between .persona-mark and .eyebrow on each
   persona page, links back to the matching /team#anchor.
   .works-alongside — single muted line above section.end on each
   persona page, naming the sibling specialists in the department.
   ----------------------------------------------------------------- */

.dept-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin: 4px 0 18px;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
}
.dept-tag:hover { color: var(--ink); }

.works-alongside {
  border-top: 1px solid var(--rule);
  padding: 32px 0 8px;
  margin: 48px 0 0;
  font-family: var(--mono);
  font-size: var(--text-12);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--mute);
  text-align: center;
}
.works-alongside a {
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.works-alongside a:hover { color: var(--ink); }
@media (max-width: 900px) {
  .works-alongside { padding-top: 24px; margin-top: 32px; }
}

/* -----------------------------------------------------------------
   Coordinator card grid on /team — four large editorial cards
   (one per department), each with portrait + meta header and a
   skills list. Replaces the prior dept-group + specialist-card
   layout. The .dept-group / .dept-eyebrow rules above still apply
   on persona pages.
   ----------------------------------------------------------------- */

.coord-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 2px solid var(--ink);
  margin-bottom: 64px;
}

.coord-card {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
}
.coord-card:nth-child(2n) { border-right: none; }
/* Last card sits alone in its row — drop the orphan right-border. */
.coord-card:last-child { border-right: none; }

.coord-head {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 24px;
}

.coord-portrait {
  display: block;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.coord-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Typographic placeholder for a coordinator who doesn't have a portrait
   photo yet. Same circle dimensions as .coord-portrait; renders an
   editorial monogram in the brand serif. */
.coord-portrait--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-deep);
}
.coord-portrait--placeholder .coord-portrait-mark {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "wght" 460, "SOFT" 0;
  font-size: var(--text-56);
  letter-spacing: var(--tracking-display-xl);
  color: var(--ink);
  line-height: var(--leading-h2);
  margin-top: 6px;
}

.coord-meta .dept-eyebrow {
  display: block;
  margin-bottom: 4px;
}
.coord-meta h3 {
  font-variation-settings: "opsz" 72, "wght" 500, "SOFT" 30;
  font-size: var(--text-36);
  letter-spacing: var(--tracking-h2);
  margin: 4px 0 6px;
}
.coord-meta h3 a { color: var(--ink); }
.coord-meta h3 a:hover { color: var(--accent); }
.coord-meta .pitch {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: "opsz" 14, "wght" 400, "SOFT" 80;
  font-size: var(--text-17);
  margin: 0 0 12px;
}
.coord-meta .pitch em {
  font-style: italic;
  color: var(--accent-mid);
  font-variation-settings: "opsz" 14, "wght" 400, "SOFT" 80;
}
.coord-meta .bio {
  font-size: var(--text-15);
  color: var(--ink-soft);
  line-height: var(--leading-body);
  margin: 0;
}

.coord-card .skills {
  border-top: 1px solid var(--rule-soft);
  padding-top: 18px;
  margin-top: auto;
}
.coord-card .skills-head {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.coord-card .skills-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.coord-card .skill-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 4px;
  padding: 12px 0;
  border-top: 1px dashed var(--rule-soft);
  align-items: baseline;
}
.coord-card .skill-row:first-child { border-top: none; padding-top: 0; }
.coord-card .skill-row:last-child  { padding-bottom: 0; }

.coord-card .skill-name {
  font-family: var(--serif);
  font-size: var(--text-17);
  font-variation-settings: "opsz" 14, "wght" 460, "SOFT" 30;
  color: var(--ink);
  letter-spacing: var(--tracking-em);
  grid-column: 1;
  grid-row: 1;
}
.coord-card .skill-channels {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--mute);
  grid-column: 1;
  grid-row: 2;
}
.coord-card .skill-row .tier-badge {
  position: static;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .coord-grid { grid-template-columns: 1fr; }
  .coord-card { border-right: none !important; padding: 28px 22px; }
  .coord-head { grid-template-columns: 96px 1fr; gap: 18px; }
  .coord-portrait { width: 96px; height: 96px; }
  .coord-meta h3 { font-size: var(--text-28); }
}

/* -----------------------------------------------------------------
   .pteam — three-pane editorial persona browser used on /team.
   Replaces the prior .coord-grid layout. Departments on the left,
   selected persona detail in the middle, featured portrait + byline
   on the right. Skills accordion default-closed. Powered by inline
   script in team.html — persona data lives in that script.
   ----------------------------------------------------------------- */

.pteam {
  border: 1px solid var(--rule);
  border-top: 2px solid var(--ink);
  background: var(--paper);
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
  margin-bottom: 64px;
}
@media (min-width: 1024px) {
  .pteam {
    grid-template-columns: 240px 1fr 1.25fr;
    min-height: 720px;
  }
}

.pteam__rail {
  background: var(--paper-deep);
  border-right: 1px solid var(--rule);
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
@media (min-width: 1024px) {
  .pteam__rail { grid-template-columns: 1fr; align-content: start; padding: 22px 18px; }
}
.pteam__rail-label {
  display: none;
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mute);
  padding: 4px 6px 14px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 10px;
}
@media (min-width: 1024px) { .pteam__rail-label { display: block; } }
.pteam__dept {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  text-align: left;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  border-radius: 1px;
  cursor: pointer;
  font: inherit;
}
.pteam__dept:hover { background: var(--paper); color: var(--ink); }
.pteam__dept.is-active {
  background: var(--paper);
  border-color: var(--ink);
  color: var(--ink);
}
.pteam__dept-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: currentColor; }
.pteam__dept-icon svg { width: 22px; height: 22px; stroke-width: 1.4; }
.pteam__dept-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pteam__dept-eyebrow {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.1;
}
.pteam__dept-name {
  font-family: var(--serif);
  font-variation-settings: "opsz" 14, "wght" 460, "SOFT" 30;
  font-size: 15px;
  letter-spacing: var(--tracking-em);
  line-height: 1.15;
  color: inherit;
}

.pteam__mid {
  background: var(--paper);
  padding: 36px 32px;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 1024px) {
  .pteam__mid { border-bottom: 0; border-right: 1px solid var(--rule); padding: 40px 36px; }
}
.pteam__mid-eyebrow {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.pteam__mid-name {
  font-family: var(--serif);
  font-variation-settings: "opsz" 72, "wght" 500, "SOFT" 30;
  font-size: clamp(36px, 4.4vw, 52px);
  letter-spacing: var(--tracking-h2);
  line-height: var(--leading-display);
  margin: 0 0 12px;
  color: var(--ink);
}
.pteam__mid-name a { color: var(--ink); }
.pteam__mid-name a:hover { color: var(--accent); }
.pteam__mid-pitch {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: "opsz" 14, "wght" 400, "SOFT" 80;
  font-size: var(--text-19);
  line-height: var(--leading-quote);
  margin: 0 0 18px;
}
.pteam__mid-pitch em {
  color: var(--accent-mid);
  font-style: italic;
  font-variation-settings: "opsz" 14, "wght" 400, "SOFT" 80;
}
.pteam__mid-bio {
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: var(--leading-relax);
  margin: 0 0 28px;
  max-width: 56ch;
}
.pteam__mid-section {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  padding-top: 18px;
  margin-bottom: 6px;
  border-top: 1px solid var(--rule);
}

.pteam__skills { display: flex; flex-direction: column; }
.pteam__skill { border-top: 1px dashed var(--rule-soft); }
.pteam__skill:first-child { border-top: 0; }
.pteam__skill-btn {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 16px 0;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  transition: color 0.15s;
  font: inherit;
}
.pteam__skill-btn:hover { color: var(--accent); }
.pteam__skill-name {
  font-family: var(--serif);
  font-size: var(--text-17);
  font-variation-settings: "opsz" 14, "wght" 460, "SOFT" 30;
  letter-spacing: var(--tracking-em);
}
.pteam__skill-chev { width: 16px; height: 16px; transition: transform 0.4s; color: var(--mute); }
.pteam__skill.is-open .pteam__skill-chev { transform: rotate(180deg); }
.pteam__skill-tier {
  font-family: var(--mono);
  font-size: var(--text-10);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  padding: 4px 9px 3px;
  border: 1px solid currentColor;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1;
}
.pteam__skill-tier[data-tier="steady"] { color: var(--mute); }
.pteam__skill-tier[data-tier="build"]  { color: var(--accent-mid); }
.pteam__skill-tier[data-tier="run"]    { color: var(--accent); }

.pteam__skill-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
}
.pteam__skill.is-open .pteam__skill-body { max-height: 280px; opacity: 1; padding: 0 0 18px; }
.pteam__skill-channels {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--mute);
  line-height: 1.8;
  max-width: 60ch;
}

.pteam__feature {
  position: relative;
  min-height: 460px;
  background: var(--paper-deep);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pteam__feature::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 25%, rgba(168,139,92,0.10), transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(122,46,31,0.06), transparent 70%);
  pointer-events: none;
}
.pteam__feature::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(26,24,20,0.04) 1px, transparent 0);
  background-size: 18px 18px;
  opacity: 0.6;
  pointer-events: none;
}

.pteam__feature-header {
  position: relative; z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 28px 32px 0;
}
.pteam__feature-tag {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--accent);
}
.pteam__feature-tag:hover { color: var(--ink); border-color: var(--ink); }
.pteam__feature-status {
  font-family: var(--mono);
  font-size: var(--text-10);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mute);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pteam__feature-status::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}

.pteam__portrait-wrap {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 32px 0;
}
.pteam__portrait {
  display: block;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--rule), 0 30px 60px -30px rgba(26,24,20,0.25);
  position: relative;
}
.pteam__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pteam__portrait-stamp {
  position: absolute;
  bottom: 14px;
  right: 14px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mute);
  background: rgba(242,235,221,0.85);
  padding: 4px 8px 3px;
  border: 1px solid var(--rule);
  border-radius: 999px;
}

.pteam__nameplate {
  position: relative; z-index: 2;
  margin: 22px 32px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 16px;
  border-top: 1px solid var(--ink);
  padding-top: 14px;
}
.pteam__nameplate-role {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink);
  display: flex; flex-direction: column; gap: 4px;
}
.pteam__nameplate-role .role-eyebrow { color: var(--mute); }
.pteam__nameplate-name {
  font-family: var(--serif);
  font-variation-settings: "opsz" 144, "wght" 380, "SOFT" 30;
  font-size: clamp(48px, 5.4vw, 76px);
  line-height: 0.86;
  letter-spacing: var(--tracking-display-xl);
  color: var(--ink);
}

.pteam__byline {
  position: relative; z-index: 2;
  margin: 22px 32px 28px;
  padding: 18px 20px;
  background: var(--paper);
  border: 1px solid var(--rule);
}
.pteam__byline-head {
  font-family: var(--mono);
  font-size: var(--text-10);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.pteam__byline p {
  font-size: 14px;
  line-height: var(--leading-body);
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.pteam__byline-tiers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.pteam__byline-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}
.pteam__byline-cta:hover { color: var(--ink); border-color: var(--ink); }
.pteam__byline-cta svg { width: 12px; height: 12px; }

@media (max-width: 1023px) {
  .pteam__feature { min-height: 540px; }
  .pteam__nameplate { grid-template-columns: 1fr; gap: 6px; }
}

/* -----------------------------------------------------------------
   "Chat with Maya" floating bubble + side panel.
   Lives in every page via /assets/chat.js. On-theme: paper background,
   ink text, accent border on the open bubble. Maya's portrait is the
   visual anchor on the bubble and on every Maya message.
   ----------------------------------------------------------------- */

.pk-chat-root {
  position: fixed;
  z-index: 100;
  right: 24px;
  bottom: 24px;
  font-family: var(--serif);
  color: var(--ink);
  pointer-events: none;
}
.pk-chat-root > * { pointer-events: auto; }

/* ── floating bubble ── */
.pk-chat-bubble {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 8px 8px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--mono);
  font-size: var(--text-12);
  letter-spacing: var(--tracking-wide-2);
  text-transform: uppercase;
  box-shadow: 0 12px 28px -16px color-mix(in srgb, var(--ink) 35%, transparent);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.pk-chat-bubble:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
  box-shadow: 0 16px 32px -16px color-mix(in srgb, var(--ink) 45%, transparent);
}
.pk-chat-bubble-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--paper-deep);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.pk-chat-bubble-tag {
  white-space: nowrap;
  color: var(--ink);
}
.pk-chat-bubble-dot {
  position: absolute;
  top: 6px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--paper);
}
.pk-chat-root.is-open .pk-chat-bubble-tag { opacity: 0.55; }

/* ── panel ── */
.pk-chat-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  width: 380px;
  max-width: calc(100vw - 32px);
  height: min(560px, calc(100vh - 120px));
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--ink) 28%, transparent);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  transition: opacity 180ms ease, transform 180ms ease;
  pointer-events: none;
}
.pk-chat-root.is-open .pk-chat-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.pk-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 14px 16px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.pk-chat-id {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pk-chat-portrait {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper-deep);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.pk-chat-eyebrow {
  font-family: var(--mono);
  font-size: var(--text-10);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}
.pk-chat-title {
  font-family: var(--serif);
  font-size: var(--text-19);
  letter-spacing: var(--tracking-em);
  line-height: var(--leading-snug);
}
.pk-chat-close {
  background: transparent;
  border: 1px solid transparent;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: var(--text-22);
  line-height: var(--leading-h2);
  color: var(--mute);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.pk-chat-close:hover { color: var(--ink); border-color: var(--rule); }

/* ── thread ── */
.pk-chat-thread {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pk-chat-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  max-width: 100%;
}
.pk-chat-row--user { justify-content: flex-end; }
.pk-chat-row--assistant { justify-content: flex-start; }

.pk-chat-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  background: var(--paper-deep);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.pk-chat-bubble-msg {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 14px;
  font-family: var(--serif);
  font-size: var(--text-15);
  line-height: var(--leading-medium);
}
.pk-chat-bubble-msg p { margin: 0 0 0.5em; }
.pk-chat-bubble-msg p:last-child { margin-bottom: 0; }
.pk-chat-bubble-msg a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.pk-chat-row--assistant .pk-chat-bubble-msg {
  background: var(--paper-deep);
  border-top-left-radius: 4px;
  color: var(--ink);
}
.pk-chat-row--user .pk-chat-bubble-msg {
  background: var(--ink);
  color: var(--paper);
  border-top-right-radius: 4px;
}

/* typing dots */
.pk-chat-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
}
.pk-chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mute);
  animation: pk-chat-blink 1.2s infinite ease-in-out;
}
.pk-chat-typing span:nth-child(2) { animation-delay: 0.18s; }
.pk-chat-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes pk-chat-blink {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

/* ── input ── */
.pk-chat-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.pk-chat-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--text-15);
  line-height: var(--leading-lead);
  padding: 9px 12px;
  border-radius: 10px;
  max-height: 140px;
  min-height: 40px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.pk-chat-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.pk-chat-input::placeholder { color: var(--mute); }

.pk-chat-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.pk-chat-send:hover { background: var(--accent); border-color: var(--accent); }
.pk-chat-send:disabled { opacity: 0.4; cursor: default; transform: none; }

.pk-chat-honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.pk-chat-foot {
  padding: 9px 14px 12px;
  border-top: 1px solid var(--rule-soft);
  background: color-mix(in srgb, var(--paper) 96%, var(--paper-deep));
  font-family: var(--mono);
  font-size: var(--text-10);
  letter-spacing: var(--tracking-wide-1);
  color: var(--mute);
  text-align: center;
}
.pk-chat-foot a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 600px) {
  .pk-chat-root { right: 12px; bottom: 12px; }
  .pk-chat-bubble { padding: 6px 14px 6px 6px; }
  .pk-chat-bubble-img { width: 38px; height: 38px; }
  .pk-chat-bubble-tag { display: none; }
  .pk-chat-bubble-dot { right: 4px; top: 2px; }
  .pk-chat-panel {
    width: calc(100vw - 24px);
    height: min(72vh, calc(100vh - 96px));
  }
}

@media print {
  .pk-chat-root { display: none !important; }
}

/* ============================================================
 * REDESIGN — Phase 0 (issue #334)
 * Progressive-disclosure patterns added on top of the existing
 * editorial system. All tokens reused; no new fonts, no new
 * colors. Pure typography-driven micro-affordances.
 * ============================================================ */

:root {
  interpolate-size: allow-keywords;
}

/* Smooth open/close animation. Scoped to disclosure components that
   reveal CONTENT below the summary (FAQ answers, hero expander panel,
   start-step "more" details, footer column accordion). NOT applied to
   .nav-dropdown which uses an absolutely-positioned panel - overflow:
   clip on the details-content pseudo would clip the panel out of view. */
.faq-list .faq-item::details-content,
.hero-expand::details-content,
.start-step-more::details-content,
.foot-cluster::details-content {
  height: 0;
  overflow-y: clip;
  transition: height 220ms cubic-bezier(0.16, 1, 0.3, 1),
              content-visibility 220ms allow-discrete;
}
details[open]::details-content {
  height: auto;
}
@media (prefers-reduced-motion: reduce) {
  .faq-list .faq-item::details-content,
  .hero-expand::details-content,
  .start-step-more::details-content,
  .foot-cluster::details-content { transition: none; }
}

/* --- Hero expander: "What runs the back office?" --- */

.hero-expand {
  margin-top: 28px;
  border-top: 1px solid var(--rule-soft);
  padding-top: 18px;
}
.hero-expand > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--mute);
  transition: color 180ms ease;
}
.hero-expand > summary::-webkit-details-marker { display: none; }
.hero-expand > summary:hover,
.hero-expand[open] > summary { color: var(--ink); }
/* Universal disclosure mark: + in a circle that rotates 45deg into ×.
   ONE definition for every <details> summary marker on the site - hero,
   start steps, FAQ, footer clusters. Adding a new disclosure? Apply
   one of these class names to the marker span and you're done. */
.hero-expand-mark,
.start-step-more .step-mark,
.foot-mark-toggle,
.faq-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--serif);
  font-size: var(--text-17);
  line-height: var(--leading-h2);
  color: var(--mute);
  background: var(--paper);
  transition: color 220ms ease, transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
              border-color 220ms ease, background 220ms ease;
  flex-shrink: 0;
}
.hero-expand > summary:hover .hero-expand-mark,
.start-step-more > summary:hover .step-mark,
.foot-cluster > summary:hover .foot-mark-toggle,
.faq-list .faq-item > summary:hover .faq-mark {
  color: var(--accent);
  border-color: var(--accent);
}
.hero-expand[open] .hero-expand-mark,
.start-step-more[open] .step-mark,
.foot-cluster[open] .foot-mark-toggle,
.faq-list .faq-item[open] .faq-mark {
  color: var(--paper);
  background: var(--accent);
  border-color: var(--accent);
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) {
  .hero-expand-mark,
  .start-step-more .step-mark,
  .foot-mark-toggle,
  .faq-mark {
    transition: color 220ms ease, border-color 220ms ease, background 220ms ease;
  }
}
.hero-expand-panel {
  padding-top: 18px;
}
.persona-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.persona-chips .chip {
  position: relative;
  display: block;
  padding: 16px 16px 14px 16px;
  border-top: 1px solid var(--gold);
  background: color-mix(in srgb, var(--gold) 4%, transparent);
  text-decoration: none;
  color: var(--ink);
  min-height: 88px;
  overflow: hidden;
  transition: background 180ms ease, transform 180ms ease;
}
.persona-chips .chip:hover {
  background: color-mix(in srgb, var(--gold) 10%, transparent);
}
.chip-glyph {
  position: absolute;
  right: 6px;
  top: -8px;
  font-family: var(--serif);
  font-size: var(--text-64);
  font-weight: var(--weight-soft);
  line-height: var(--leading-h2);
  color: var(--gold);
  opacity: 0.12;
  pointer-events: none;
  user-select: none;
}
.chip-name {
  display: block;
  font-family: var(--serif);
  font-size: var(--text-18);
  letter-spacing: var(--tracking-em);
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}
.chip-role {
  display: block;
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-wide-2);
  text-transform: uppercase;
  color: var(--mute);
  position: relative;
  z-index: 1;
}
.hero-expand-note {
  margin-top: 18px;
  font-size: var(--text-14);
  line-height: var(--leading-body);
  color: var(--ink-soft);
  max-width: 520px;
}
@media (min-width: 700px) {
  .persona-chips { grid-template-columns: repeat(3, 1fr); }
}

/* --- Sticky stat strip (ledger ticker) --- */

.stat-strip {
  position: sticky;
  top: 56px;
  z-index: 30;
  background: var(--paper-deep);
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  height: 36px;
  overflow: hidden;
  transform: translateY(-100%);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.stat-strip[data-visible="true"] {
  transform: translateY(0);
  pointer-events: auto;
}
.stat-strip-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  height: 100%;
  font-family: var(--mono);
  font-size: var(--text-11);
  text-transform: lowercase;
  letter-spacing: var(--tracking-wide-1);
  color: var(--ink-soft);
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.stat-strip-inner::-webkit-scrollbar { display: none; }
.stat-strip .stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.stat-strip .stat strong {
  font-family: var(--serif);
  font-size: var(--text-18);
  font-weight: var(--weight-normal);
  letter-spacing: var(--tracking-em);
  color: var(--ink);
}
.stat-strip-tag {
  margin-left: auto;
  font-style: italic;
  color: var(--mute);
}
@media (prefers-reduced-motion: reduce) {
  .stat-strip { transition: none; }
}
@media (max-width: 600px) {
  .stat-strip-tag { display: none; }
}

/* --- TOC numeral rail (right edge, tablet+) --- */

.toc-rail {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 25;
  display: none;
  pointer-events: none;
}
@media (min-width: 768px) {
  .toc-rail { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .toc-rail { display: none; }
}
.toc-rail ol {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.toc-rail ol::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 12px;
  bottom: 12px;
  width: 1px;
  background: var(--rule);
  transform: translateX(-50%);
  pointer-events: none;
}
.toc-rail li {
  position: relative;
  margin: 0;
  padding: 0;
}
.toc-rail a {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-13);
  color: var(--mute);
  text-decoration: none;
  background: var(--paper);
  position: relative;
  transition: color 180ms ease;
}
.toc-rail a:hover { color: var(--ink); }
.toc-rail a[data-active="true"] {
  color: var(--accent);
  font-weight: var(--weight-medium);
}
.toc-rail a[data-active="true"]::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  height: 1px;
  background: var(--gold);
}

/* --- §01 start steps --- */

.start-steps {
  list-style: none;
  margin: 32px 0 0 0;
  padding: 0;
  display: grid;
  gap: 24px;
}
.start-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding: 24px 20px;
  border-top: 1px solid var(--rule);
}
.start-step:last-child {
  border-bottom: 1px solid var(--rule);
}
.start-step-mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-32);
  color: var(--gold);
  line-height: var(--leading-h2);
}
.start-step-body h3 {
  font-family: var(--serif);
  font-size: var(--text-28);
  font-weight: var(--weight-normal);
  letter-spacing: var(--tracking-h3);
  margin: 0 0 6px 0;
  line-height: var(--leading-tight);
}
.start-step-meta {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-wide-2);
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 14px 0;
}
.start-step-more > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-wide-3);
  text-transform: uppercase;
  color: var(--mute);
  padding: 10px 0;
  transition: color 180ms ease;
  min-height: 44px;
}
.start-step-more > summary::-webkit-details-marker { display: none; }
.start-step-more > summary:hover { color: var(--ink); }
.start-step-more[open] > summary { color: var(--ink); }
/* .start-step-more .step-mark: styled by the universal disclosure-mark
   block above. Adjust gap so the inline summary text + mark align. */
.start-step-more p {
  margin: 12px 0 0 0;
  font-size: var(--text-15);
  line-height: var(--leading-relax);
  color: var(--ink-soft);
  max-width: 580px;
}
@media (min-width: 760px) {
  .start-step { grid-template-columns: 64px 1fr; gap: 24px; padding: 28px 24px; }
}

/* --- §02 work tabs (button-driven WAI-ARIA) --- */

.work-tabs { margin-top: 32px; }
.work-tab-strip {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-bottom: 1px solid var(--rule);
  scrollbar-width: none;
}
.work-tab-strip::-webkit-scrollbar { display: none; }
.work-tab-strip [role="tab"] {
  position: relative;
  flex: 0 0 auto;
  padding: 13px 20px 15px 20px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--mute);
  cursor: pointer;
  scroll-snap-align: start;
  transition: color 180ms ease;
  min-height: 44px;
}
.work-tab-strip [role="tab"]:last-child { border-right: 0; }
.work-tab-strip [role="tab"]:hover { color: var(--ink-soft); }
.work-tab-strip [role="tab"][aria-selected="true"] {
  color: var(--ink);
}
.work-tab-strip [role="tab"][aria-selected="true"]::before {
  content: '※';
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  color: var(--accent);
  font-size: var(--text-14);
  font-style: normal;
  pointer-events: none;
}
.work-tab-strip [role="tab"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.work-tab-panels { padding-top: 28px; }
.work-panel[hidden] { display: none; }
.work-panel h3 {
  font-family: var(--serif);
  font-size: var(--text-32);
  font-weight: var(--weight-normal);
  letter-spacing: var(--tracking-h2-sm);
  margin: 12px 0 14px 0;
  line-height: var(--leading-tight);
}
.work-panel p {
  font-size: var(--text-17);
  line-height: var(--leading-relax);
  color: var(--ink-soft);
  max-width: 640px;
  margin: 0;
}
.work-tier-strip {
  display: block;
  margin-top: 36px;
  padding: 18px 0;
  border-top: 1px solid var(--rule-soft);
  text-align: center;
  text-decoration: none;
  color: var(--mute);
  transition: color 180ms ease;
}
.work-tier-strip:hover { color: var(--ink); }
.work-tier-strip .link-arrow { color: var(--accent); margin-left: 4px; }

/* --- §06 FAQ filter chips + collapsed details --- */

.faq-filter > input[type="radio"] { display: none; }

.faq-chip-strip {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 24px 0 28px 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}
.faq-chip-strip::-webkit-scrollbar { display: none; }
.faq-chip-strip label {
  flex: 0 0 auto;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--paper-deep);
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--mute);
  cursor: pointer;
  scroll-snap-align: start;
  transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.faq-chip-strip label:hover { color: var(--ink); }

#fc-all:checked    ~ .faq-chip-strip label[for="fc-all"],
#fc-money:checked  ~ .faq-chip-strip label[for="fc-money"],
#fc-process:checked ~ .faq-chip-strip label[for="fc-process"],
#fc-fit:checked    ~ .faq-chip-strip label[for="fc-fit"],
#fc-data:checked   ~ .faq-chip-strip label[for="fc-data"] {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--accent);
}

#fc-money:checked  ~ .faq-list .faq-item:not([data-cat="money"])  { display: none; }
#fc-process:checked ~ .faq-list .faq-item:not([data-cat="process"]) { display: none; }
#fc-fit:checked    ~ .faq-list .faq-item:not([data-cat="fit"])    { display: none; }
#fc-data:checked   ~ .faq-list .faq-item:not([data-cat="data"])   { display: none; }

.section-sub {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-wide-3);
  text-transform: uppercase;
  color: var(--mute);
  margin: 12px 0 0 0;
}

/* FAQ list: vertical expander list with bottom-border separators.
   Banded list, no per-card chrome (which forced false visual equivalence
   on unequal-length questions). Affordance: circle-+ mark on the right
   that rotates 45deg into × on open, set via global .faq-mark token. */

/* Wider container variant so the FAQ section breaks out of the standard
   1140px reading container. Question columns inherit the extra width.
   Also pulls in horizontal padding on mobile to reclaim viewport edge. */
.container-wide {
  max-width: 1480px;
  padding: 0 16px;
}
@media (min-width: 600px) { .container-wide { padding: 0 24px; } }
@media (min-width: 1024px) { .container-wide { padding: 0 32px; } }

.faq-list {
  display: block;
  margin-top: 4px;
  border-top: 1px solid var(--rule);
}

.faq-list .faq-item {
  border-bottom: 1px solid var(--rule);
  background: transparent;
  padding: 0;
  transition: background 180ms ease, border-color 180ms ease;
}

/* Desktop FAQ layout: question takes the full row width so it never
   wraps past 1 line on reasonable viewports. Mark on the right via
   justify-content: space-between. Answer reveals BELOW summary on
   [open], with a left rule + indent for visual nesting.
   Earlier 3-column grid attempts (display:contents on summary, etc.)
   were too flaky across browsers; this single-flex-row is robust and
   makes the question fit on 1-2 lines max. */
@media (min-width: 900px) {
  .faq-list .faq-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    min-height: 56px;
    list-style: none;
    cursor: pointer;
  }
  .faq-list .faq-item > summary > .faq-q {
    flex: 1 1 auto;
    font-family: var(--serif);
    font-size: var(--text-17);
    line-height: var(--leading-faq);
    color: var(--ink);
    transition: color 180ms ease;
  }
  .faq-list .faq-item > summary:hover > .faq-q { color: var(--accent); }
  .faq-list .faq-item > summary > .faq-mark { flex: 0 0 auto; }
  .faq-list .faq-item > p {
    margin: 0 0 0 18px;
    padding: 4px 18px 18px 24px;
    border-left: 1px solid var(--rule);
    font-size: var(--text-15);
    line-height: var(--leading-relax);
    color: var(--ink-soft);
    max-width: 980px;
  }
}
.faq-list .faq-item:hover {
  background: color-mix(in srgb, var(--paper-deep) 60%, transparent);
}
.faq-list .faq-item[open] {
  background: color-mix(in srgb, var(--gold) 8%, transparent);
  border-bottom-color: var(--accent);
}
.faq-list .faq-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  /* justify-content: space-between fixes the visual inconsistency where
     the + mark sat right after short questions ("Can I cancel?") but at
     the row edge after long ones. Now the mark always sits at the right
     edge regardless of question length. */
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 14px 18px;
  font-family: var(--serif);
  font-size: var(--text-17);
  font-weight: var(--weight-normal);
  letter-spacing: var(--tracking-em);
  line-height: var(--leading-faq);
  color: var(--ink);
  transition: color 180ms ease;
  min-height: 56px;
}
.faq-list .faq-item > summary::-webkit-details-marker { display: none; }
.faq-list .faq-item > summary:hover { color: var(--accent); }

.faq-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  position: relative;
}
/* "Read" label hidden at every viewport. The circle-+ mark alone
   carries the affordance and gives the question full width across
   mobile and desktop. */
.faq-cta-label { display: none; }

/* .faq-mark visual: now inherits from the universal disclosure-mark
   block earlier in this file (shared selector with .hero-expand-mark,
   .step-mark, .foot-mark-toggle). Hover + open states also shared.
   Component-specific rules below are positioning + the answer-paragraph
   (which is FAQ-specific). */
.faq-list .faq-item p {
  padding: 0 14px 18px 14px;
  margin: 0;
  font-size: var(--text-15);
  line-height: var(--leading-relax);
  color: var(--ink-soft);
  max-width: 760px;
}
@media (prefers-reduced-motion: reduce) {
  .faq-list .faq-item { transition: background 180ms ease, border-color 180ms ease; }
}

/* --- Footer mobile clusters (collapsed under 900px) --- */

.foot-cluster > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.foot-cluster > summary::-webkit-details-marker { display: none; }
.foot-cluster > summary h5 { margin: 0; }
/* .foot-mark-toggle: styled by the universal disclosure-mark block
   above (circle + that rotates to ×). Sized 22px on mobile to fit the
   tighter footer h5 row. */
@media (max-width: 900px) {
  .foot-mark-toggle { width: 22px; height: 22px; font-size: var(--text-14); }
}

@media (min-width: 901px) {
  /* Always-open on desktop; same primitive as .mobile-menu */
  .foot-cluster > summary { display: none; }
  .foot-cluster::details-content { height: auto !important; }
}

/* ============================================================
 * CONVERSION AFFORDANCES — Phase 0.1 (issue #334)
 * Floating mobile CTA, scroll toast, Olivia pull quote, urgency
 * eyebrow, hero CTA sub-caption. All editorial-aesthetic.
 * ============================================================ */

/* --- Hero urgency eyebrow + CTA sub-caption --- */

.hero-cta-row .urgency-eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--accent);
  padding: 6px 0 2px 0;
  border-top: 1px solid var(--gold);
  margin-right: auto;
  width: 100%;
  margin-bottom: 6px;
}
.hero-cta-row .cta-sub {
  display: block;
  margin-top: 4px;
  width: 100%;
  font-size: var(--text-11);
  color: var(--mute);
}

/* --- Olivia pull quote (above §03 stats grid) --- */

.olivia-quote {
  margin: 0 0 36px 0;
  padding: 22px 0 24px 0;
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  text-align: center;
  position: relative;
}
.olivia-quote::before {
  content: '\201C';
  position: absolute;
  left: 50%;
  top: -22px;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: var(--text-56);
  line-height: var(--leading-h2);
  color: var(--gold);
  opacity: 0.6;
  background: var(--ink);
  padding: 0 14px;
  pointer-events: none;
}
.olivia-quote p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: var(--weight-normal);
  font-size: var(--text-pull);
  letter-spacing: var(--tracking-h3);
  line-height: var(--leading-pull);
  color: var(--paper);
  margin: 0 auto;
  max-width: 720px;
}
.olivia-quote cite {
  display: block;
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--gold);
  font-style: normal;
  margin-top: 14px;
}
@media (max-width: 600px) {
  .olivia-quote { margin: 0 0 28px 0; padding: 18px 4px 20px 4px; }
}

/* --- Floating mobile CTA --- */

.floating-cta {
  position: fixed;
  z-index: 50;
  right: 14px;
  bottom: 14px;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: var(--accent);
  color: var(--paper);
  font-family: var(--mono);
  font-size: var(--text-12);
  letter-spacing: var(--tracking-wide-3);
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--gold);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 18%, transparent);
  transform: translateY(120%);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
              background 180ms ease;
  min-height: 48px;
}
.floating-cta:hover { background: var(--accent-mid); }
.floating-cta:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.floating-cta[data-visible="true"] { transform: translateY(0); }
.floating-cta-mark {
  font-family: var(--serif);
  font-size: var(--text-18);
  color: var(--gold);
  font-style: normal;
  line-height: var(--leading-h2);
}
.floating-cta-label {
  white-space: nowrap;
}
.floating-cta-arrow {
  font-size: var(--text-14);
  transition: transform 180ms ease;
}
.floating-cta:hover .floating-cta-arrow { transform: translateX(3px); }

@media (max-width: 900px) {
  .floating-cta { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
  .floating-cta { transition: none; }
}

/* --- Scroll toast (reading-progress nudge) --- */

.scroll-toast {
  position: fixed;
  z-index: 45;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 130%);
  width: min(420px, calc(100vw - 32px));
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 14px 40px color-mix(in srgb, var(--ink) 22%, transparent);
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}
.scroll-toast[data-visible="true"] {
  transform: translate(-50%, 0);
}
.scroll-toast-inner {
  padding: 18px 20px 18px 22px;
  border-left: 3px solid var(--gold);
}
.scroll-toast-eyebrow {
  font-family: var(--mono);
  font-size: var(--text-10);
  letter-spacing: var(--tracking-wide-5);
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 6px 0;
}
.scroll-toast-body {
  font-family: var(--serif);
  font-size: var(--text-19);
  letter-spacing: var(--tracking-em);
  color: var(--ink);
  margin: 0 0 12px 0;
  line-height: var(--leading-pull);
}
.scroll-toast-body em {
  font-style: italic;
  color: var(--accent);
}
.scroll-toast-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.scroll-toast-cta {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid var(--accent);
}
.scroll-toast-cta:hover { color: var(--accent-mid); border-bottom-color: var(--accent-mid); }
.scroll-toast-dismiss {
  background: transparent;
  border: 0;
  font-family: var(--mono);
  font-size: var(--text-10);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--mute);
  cursor: pointer;
  padding: 10px 12px;
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.scroll-toast-dismiss:hover { color: var(--ink); }
.scroll-toast[hidden] { display: none; }

@media (max-width: 600px) {
  .scroll-toast { bottom: 76px; } /* leave room for floating CTA */
}
@media (prefers-reduced-motion: reduce) {
  .scroll-toast { transition: none; }
}

/* --- Tab auto-rotate visual hint --- */

.work-tabs[data-auto-rotating="true"] .work-tab-strip [role="tab"][aria-selected="true"]::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(to right, var(--accent) 0%, var(--gold) 100%);
  transform-origin: left center;
  animation: tab-progress 6000ms linear forwards;
}
@keyframes tab-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.work-tabs:hover[data-auto-rotating="true"] .work-tab-strip [role="tab"][aria-selected="true"]::after,
.work-tabs[data-auto-paused="true"] .work-tab-strip [role="tab"][aria-selected="true"]::after {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .work-tabs[data-auto-rotating="true"] .work-tab-strip [role="tab"][aria-selected="true"]::after {
    display: none;
  }
}

/* ============================================================
 * MIGRATED FROM INLINE STYLE BLOCK IN index.html (Phase 0.2)
 * Single source of truth. Cascade order preserved (this block
 * sits AFTER all prior site.css rules, matching the prior
 * "inline wins" behavior). Some tokens duplicate :root above;
 * harmless. The broken <feColorMatrix> in the inline noise
 * overlay is corrected (20 values, was 19).
 * ============================================================ */
  :root {
    --ink:        #1A1814;
    --ink-soft:   #2D2820;
    --paper:      #F2EBDD;
    --paper-deep: #E8DEC8;
    --accent:     #7A2E1F;
    --accent-mid: #9C4530;
    --gold:       #A88B5C;
    --rule:       #C7BCA3;
    --rule-soft:  #DCD2BC;
    --mute:       #6B6357;

    --serif: 'Fraunces', 'Times New Roman', serif;
    --mono:  'IBM Plex Mono', 'Courier New', monospace;

    --content: 1140px;
    --reading: 720px;
  }

  /* `*`, `html` removed: byte-identical to canonical copies at L204/L206. */


  /* body::before noise overlay + ::selection: removed; canonical versions
     live earlier in this stylesheet (lines 40-49 + 51) with the correct
     20-value feColorMatrix. The inline block had a broken 19-value matrix
     that was silently rendering identity. Migration drops the duplicate. */



  /* p, .container, .reading removed: byte-identical to canonical copies at L242/L244/L245. */

  .eyebrow {
    font-family: var(--mono);
    font-size: var(--text-11);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--mute);
    font-weight: var(--weight-normal);
  }



  /* ─── header ─── */


    /* .subnav a:hover removed: identical to canonical copy at L328. */
  @media (max-width: 900px) { .subnav { display: none; } }






  /* ─── hero ─── */
  .hero {
    padding: 120px 0 100px;
    border-bottom: 1px solid var(--rule);
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  /* Hero backdrop image. The default points at the dental ambient
     illustration; per-industry pages override --hero-bg-image at the
     <body data-industry="..."> level so swap is a single token, no
     markup change. The .hero-bg div is a real (semantic) image-role
     element so screen readers announce alt-text via aria-label. */
  .hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image: var(--hero-bg-image, url('/assets/img/hero-ambient.png'));
    /* Zoomed out from cover so the dental chair (and other subject
       matter) sit comfortably inside the visible frame. Mirrored
       horizontally so the strongest visual subject sits on the side
       opposite the eyebrow + H1. */
    background-size: 115%;
    background-position: 50% 75%;
    background-repeat: no-repeat;
    transform: scaleX(-1);
    opacity: 0.45;
    mix-blend-mode: multiply;
  }
  /* Paper-tinted overlay so the H1 + subhead remain crisp against any
     industry's photo. Stronger on the left where the type sits. */
  .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
      to right,
      var(--paper) 0%,
      color-mix(in srgb, var(--paper) 92%, transparent) 35%,
      color-mix(in srgb, var(--paper) 60%, transparent) 65%,
      color-mix(in srgb, var(--paper) 25%, transparent) 100%
    );
  }
  /* Per-industry overrides (set on <body data-industry="...">). Default
     above already covers `health` (dental); each other industry needs
     its own asset under /assets/img/. Operator generates art per
     industry; if the file is missing, the default dental image still
     renders, so the override is fail-soft. */
  body[data-industry="dental"]     { --hero-bg-image: url('/assets/img/hero-ambient.png'); }
  body[data-industry="healthcare"] { --hero-bg-image: url('/assets/img/hero-healthcare.png'); }
  body[data-industry="legal"]      { --hero-bg-image: url('/assets/img/hero-legal.png'); }
  body[data-industry="services"]   { --hero-bg-image: url('/assets/img/hero-services.png'); }
  body[data-industry="trades"]     { --hero-bg-image: url('/assets/img/hero-trades.png'); }
  body[data-industry="wellness"]   { --hero-bg-image: url('/assets/img/hero-wellness.png'); }

  .hero-grid {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 80px;
    align-items: end;
  }

  .hero h1 {
    font-variation-settings: "opsz" 144, "wght" 380, "SOFT" 0;
    font-size: var(--text-h1);
    line-height: var(--leading-h1);
    letter-spacing: var(--tracking-h1);
    margin: 24px 0 36px;
    max-width: 880px;
  }

  .hero h1 em {
    font-style: italic;
    font-variation-settings: "opsz" 144, "wght" 380, "SOFT" 100;
    color: var(--accent);
  }

  .hero-sub {
    max-width: 580px;
    font-size: var(--text-21);
    line-height: var(--leading-lead);
    color: var(--ink-soft);
    margin-bottom: 18px;
  }

  /* The single-line promise that follows hero-sub, in brand voice. Italic
     serif, accent color, slightly smaller than the H1. Reads as the
     operator's direct invitation: tell me your problems. */
  .hero-promise {
    max-width: 580px;
    font-family: var(--serif);
    font-style: italic;
    font-size: var(--text-22);
    line-height: var(--leading-quote);
    letter-spacing: var(--tracking-em);
    color: var(--accent);
    margin: 0 0 36px 0;
    border-left: 2px solid var(--gold);
    padding-left: 18px;
  }

  .hero-cta-row {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
  }





  .hero-meta {
    font-family: var(--mono);
    font-size: var(--text-11);
    letter-spacing: var(--tracking-wide-5);
    text-transform: uppercase;
    color: var(--mute);
    text-align: right;
    border-left: 1px solid var(--rule);
    padding-left: 24px;
    line-height: var(--leading-loose);
  }

  .hero-meta strong {
    color: var(--ink);
    font-weight: var(--weight-medium);
    display: block;
  }

  .tagline-strip {
    margin-top: 110px;
    padding-top: 28px;
    border-top: 1px solid var(--rule);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 16px;
  }

  .tagline-strip .tag {
    font-variation-settings: "opsz" 144, "wght" 420, "SOFT" 60;
    font-style: italic;
    font-size: var(--text-22);
    letter-spacing: var(--tracking-em);
  }

  .tagline-strip .reg {
    font-family: var(--mono);
    font-size: var(--text-11);
    letter-spacing: var(--tracking-wide-5);
    text-transform: uppercase;
    color: var(--mute);
  }

  /* ─── section base ─── */





  /* ─── section-edge convention ───
     Each light-tone body section gets a 2px gold rule on top + an
     inset ink-tinted shadow + a paper-deep top fading to paper at the
     bottom. Adjacent sections alternate top color (paper-deep vs paper)
     so the transition between them always has color contrast in
     addition to the gold rule. */
  .start-free,
  #work {
    background: linear-gradient(180deg, var(--paper-deep) 0%, var(--paper) 100%);
    border-top: 2px solid var(--gold);
    box-shadow: inset 0 1px 0 0 color-mix(in srgb, var(--ink) 8%, transparent);
  }
  /* §02 sits between §01 (paper at bottom) and §03 #proof (locked dark
     ink). To keep the §01-paper to §02-top-paper-deep edge crisp, §02
     uses the same recipe as §01. */
  #work {
    padding-top: 96px;
    padding-bottom: 96px;
  }

  /* "From Chris" byline above the start-grid. Humanises the pilot offer */
  .from-chris-row {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px 10px 10px;
    margin: 0 0 36px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--paper);
    color: inherit;
    transition: background 0.18s ease, border-color 0.18s ease;
  }
  .from-chris-row:hover {
    background: var(--paper-deep);
    border-color: var(--accent-mid);
  }
  .from-chris-mark {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--paper);
    box-shadow: inset 0 0 0 1px var(--rule);
    flex: 0 0 auto;
  }
  .from-chris-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .from-chris-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: var(--leading-snug-3);
  }
  .from-chris-meta strong {
    font-family: var(--mono);
    font-size: var(--text-11);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--accent);
    font-weight: var(--weight-normal);
  }
  .from-chris-meta > span {
    font-family: var(--serif);
    font-size: var(--text-15);
    color: var(--ink-soft);
    font-variation-settings: "opsz" 14, "wght" 400, "SOFT" 30;
  }

  .start-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: start;
    margin-bottom: 60px;
  }

  .start-pitch {
    font-size: var(--text-19);
    line-height: var(--leading-relax);
    color: var(--ink-soft);
    max-width: 460px;
    position: sticky;
    top: 100px;
  }

  .start-pitch p:first-child {
    font-variation-settings: "opsz" 36, "wght" 460, "SOFT" 30;
    font-style: italic;
    font-size: var(--text-24);
    color: var(--ink);
    margin-bottom: 1.1em;
    line-height: var(--leading-quote);
  }

  .start-fineprint {
    border-top: 1px solid var(--rule);
    padding-top: 18px;
    margin-top: 24px;
    font-size: var(--text-16);
    color: var(--mute);
  }

  .start-fineprint em {
    font-style: italic;
    color: var(--accent);
    font-variation-settings: "opsz" 14, "wght" 460, "SOFT" 80;
  }

  .start-menu {
    border: 2px solid var(--ink);
    background: var(--paper);
  }

  .start-menu-head {
    background: var(--ink);
    color: var(--paper);
    padding: 14px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .start-tag {
    font-family: var(--mono);
    font-size: var(--text-11);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: color-mix(in srgb, var(--paper) 80%, var(--ink));
  }

  .start-tag.right { color: var(--gold); }

  .start-row {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 0;
    border-top: 1px solid var(--rule);
    padding: 22px 22px 22px 0;
    transition: background 0.2s ease;
    position: relative;
  }

  .start-row:first-of-type { border-top: none; }

  .start-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: transparent;
    transition: background 0.2s ease;
  }

  .start-row:hover {
    background: var(--paper-deep);
  }

  .start-row:hover::before {
    background: var(--accent);
  }

  .start-num {
    font-family: var(--serif);
    font-variation-settings: "opsz" 72, "wght" 400, "SOFT" 80;
    font-style: italic;
    font-size: var(--text-22);
    color: var(--accent);
    text-align: center;
    padding-top: 4px;
    letter-spacing: var(--tracking-wide-1);
  }

  .start-body h4 {
    font-variation-settings: "opsz" 36, "wght" 500, "SOFT" 0;
    font-size: var(--text-21);
    margin-bottom: 6px;
    letter-spacing: var(--tracking-h3);
  }

  .start-body p {
    margin: 0;
    font-size: var(--text-16);
    color: var(--ink-soft);
    line-height: var(--leading-medium);
    max-width: 540px;
  }

  .start-cta-row {
    display: flex;
    align-items: center;
    gap: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--rule);
    flex-wrap: wrap;
  }

  /* ─── value props (the work) ─── */
  .work-list {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 40px;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .work-item {
    display: contents;
  }

  .work-item dt,
  .work-item .label {
    font-family: var(--mono);
    font-size: var(--text-11);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--accent);
    padding-top: 12px;
  }

  .work-item dd,
  .work-item .body {
    margin: 0;
    padding: 32px 0 32px;
    border-top: 1px solid var(--rule);
    grid-column: 2;
  }

  .work-item:first-of-type dd { border-top: 2px solid var(--ink); }
  .work-item:last-of-type dd { border-bottom: 1px solid var(--rule); }

  .work-item h3 {
    font-variation-settings: "opsz" 72, "wght" 460, "SOFT" 30;
    font-size: var(--text-28);
    line-height: var(--leading-snug-2);
    margin-bottom: 10px;
    letter-spacing: var(--tracking-h2-sm);
  }

  .work-item p {
    font-size: var(--text-18);
    color: var(--ink-soft);
    max-width: 640px;
    margin: 0;
  }

  .work-stat {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--rule-soft);
    max-width: 640px;
    font-family: var(--mono);
    font-size: var(--text-12);
    letter-spacing: var(--tracking-cta);
    text-transform: uppercase;
    color: var(--mute);
    line-height: var(--leading-medium);
  }
  .work-stat strong {
    color: var(--accent);
    font-weight: var(--weight-normal);
    margin-right: 8px;
  }
  .work-stat .work-stat-num {
    color: var(--ink);
    font-variation-settings: "opsz" 14, "wght" 460;
    letter-spacing: var(--tracking-wide-1);
  }

  /* ─── how it works (delegation tiers) ─── */
  .delegation {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--rule);
  }

  .delegation > div {
    padding: 32px 28px 36px;
    border-right: 1px solid var(--rule);
  }

  .delegation > div:last-child { border-right: none; }

  .delegation .level-label {
    font-family: var(--mono);
    font-size: var(--text-11);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 12px;
  }

  .delegation h3 {
    font-variation-settings: "opsz" 72, "wght" 500, "SOFT" 30;
    font-size: var(--text-32);
    margin-bottom: 8px;
    letter-spacing: var(--tracking-h2);
  }

  .delegation .pitch {
    font-style: italic;
    color: var(--accent);
    font-variation-settings: "opsz" 14, "wght" 400, "SOFT" 80;
    margin-bottom: 24px;
    font-size: var(--text-17);
  }

  .delegation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--text-16);
    color: var(--ink-soft);
  }

  .delegation li {
    padding: 8px 0;
    border-bottom: 1px solid var(--rule-soft);
  }

  .delegation li:last-child { border-bottom: none; }

  /* ─── pricing menu ─── */
  .pricing {
    background: var(--paper-deep);
  }

  .menu-card {
    background: var(--paper);
    border: 2px solid var(--ink);
    padding: 0;
  }

  .menu-row {
    display: grid;
    grid-template-columns: 200px 1fr 1fr 1fr;
    border-bottom: 1px solid var(--rule);
  }

  .menu-row:last-child { border-bottom: none; }

  .menu-row > div {
    padding: 22px 24px;
    border-right: 1px solid var(--rule);
  }

  .menu-row > div:last-child { border-right: none; }

  .menu-head {
    background: var(--ink);
    color: var(--paper);
  }

  .menu-head > div {
    border-right: 1px solid var(--ink-soft);
    padding: 28px 24px;
  }

  .menu-head .tier-name {
    font-variation-settings: "opsz" 72, "wght" 500, "SOFT" 0;
    font-size: var(--text-22);
    letter-spacing: var(--tracking-h3);
    margin-bottom: 4px;
  }

  .menu-head .tier-pitch {
    font-family: var(--mono);
    font-size: var(--text-10);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--rule);
  }

  .menu-head .tier-price {
    font-family: var(--mono);
    font-size: var(--text-28);
    font-weight: var(--weight-normal);
    letter-spacing: var(--tracking-em);
    margin-top: 14px;
  }

  .menu-head .tier-price small {
    font-size: var(--text-12);
    color: var(--rule);
    font-weight: var(--weight-light);
    margin-left: 4px;
    letter-spacing: var(--tracking-wide-2);
  }

  .menu-head .badge-strip {
    height: 28px;
    margin-top: 12px;
    display: flex;
    align-items: center;
  }

  .menu-head .badge {
    font-family: var(--mono);
    font-size: var(--text-9);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    background: var(--accent);
    color: var(--paper);
    padding: 4px 10px;
    border-radius: 0;
    line-height: var(--leading-faq);
  }

  .menu-row .feature {
    font-family: var(--mono);
    font-size: var(--text-11);
    letter-spacing: var(--tracking-cta);
    text-transform: uppercase;
    color: var(--mute);
    align-self: center;
  }

  .menu-row .check {
    font-size: var(--text-18);
    color: var(--ink);
    align-self: center;
    line-height: var(--leading-h2);
  }

  .menu-row .dash {
    font-size: var(--text-18);
    color: var(--rule);
    align-self: center;
    line-height: var(--leading-h2);
  }

  .pricing-foot {
    margin-top: 36px;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 40px;
    align-items: start;
  }

  .pricing-foot .label {
    font-family: var(--mono);
    font-size: var(--text-11);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--mute);
  }

  .pricing-foot .note {
    font-size: var(--text-16);
    color: var(--ink-soft);
    line-height: var(--leading-relax);
    max-width: 720px;
  }

  .pricing-foot .modifier {
    font-family: var(--mono);
    font-size: var(--text-13);
    color: var(--ink);
    margin-top: 18px;
    padding: 14px 18px;
    background: var(--paper);
    border-left: 3px solid var(--accent);
  }

  .pricing-foot .modifier strong {
    text-transform: uppercase;
    letter-spacing: var(--tracking-cta);
    font-size: var(--text-11);
    display: block;
    margin-bottom: 8px;
    color: var(--mute);
    font-weight: var(--weight-normal);
  }

  /* ─── case study ─── */
  .field-note {
    background: var(--ink);
    color: var(--paper);
  }

  .field-note .container {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .field-note .eyebrow { color: var(--gold); }
  .field-note hr { background: color-mix(in srgb, var(--rule) 30%, transparent); }

  .field-note .section-head h2 {
    color: var(--paper);
  }

  .field-note .section-head h2 em {
    color: var(--gold);
    font-variation-settings: "opsz" 96, "wght" 380, "SOFT" 100;
  }

  .field-note-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
  }

  .field-note-body {
    font-size: var(--text-19);
    line-height: var(--leading-faq-a);
    color: color-mix(in srgb, var(--paper) 90%, var(--ink));
  }

  .field-note-body p { margin-bottom: 1.2em; }

  .field-note-body em {
    color: var(--gold);
    font-variation-settings: "opsz" 14, "wght" 400, "SOFT" 80;
  }

  .disclosure {
    border-left: 2px solid var(--gold);
    padding: 14px 0 14px 22px;
    margin: 32px 0;
    font-style: italic;
    font-variation-settings: "opsz" 14, "wght" 400, "SOFT" 80;
    color: var(--gold);
    font-size: var(--text-17);
  }

  .stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-top: 1px solid color-mix(in srgb, var(--rule) 30%, transparent);
  }

  .stat {
    padding: 24px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--rule) 30%, transparent);
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 24px;
    align-items: baseline;
  }

  .stat .num {
    font-family: var(--mono);
    font-size: var(--text-32);
    font-weight: var(--weight-light);
    color: var(--gold);
    letter-spacing: var(--tracking-h2-sm);
    line-height: var(--leading-h2);
  }

  .stat .num small {
    font-size: var(--text-14);
    color: color-mix(in srgb, var(--paper) 60%, var(--ink));
    margin-left: 4px;
  }

  .stat .desc {
    font-size: var(--text-15);
    color: color-mix(in srgb, var(--paper) 78%, var(--ink));
    line-height: var(--leading-lead);
  }

  .stat-pending {
    font-family: var(--mono);
    font-size: var(--text-11);
    letter-spacing: var(--tracking-wide-5);
    color: color-mix(in srgb, var(--paper) 50%, var(--ink));
    text-transform: uppercase;
    margin-top: 18px;
  }

  /* ─── founder ─── */

  .founder-mark {
    font-variation-settings: "opsz" 144, "wght" 500, "SOFT" 0;
    font-size: var(--text-64);
    line-height: var(--leading-h2);
    color: var(--accent);
    letter-spacing: var(--tracking-display-xl);
  }

  .founder-body {
    max-width: 680px;
    font-size: var(--text-19);
    line-height: var(--leading-relax);
  }

  .founder-body p { margin-bottom: 1.1em; }

  .founder-sig {
    margin-top: 32px;
    font-family: var(--mono);
    font-size: var(--text-11);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--mute);
  }

  .founder-sig strong {
    color: var(--ink);
    font-weight: var(--weight-medium);
    display: block;
    margin-bottom: 4px;
  }

  /* ─── faq ─── (legacy block deleted: pre-redesign FAQ used a 200px-grid
     with mono uppercase labels for .faq-q. The Phase 0 redesign converted
     .faq-item to <details> with .faq-q as the question text inside <summary>.
     The legacy rules forced .faq-item display:grid + .faq-q mono uppercase
     11px accent, which is why questions rendered like wide-tracking caps.
     Canonical FAQ rules now live earlier in this file under .faq-list. */

  /* ─── footer / cta ─── */




  .end .end-cta {
    margin-top: 12px;
    display: inline-flex;
  }

  .end-fineline {
    margin-top: 28px;
    font-family: var(--mono);
    font-size: var(--text-11);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--mute);
  }











  /* ─── responsive ─── */
  @media (max-width: 900px) {
    body { font-size: var(--text-17); }
    .container, .site-inner { padding: 0 22px; }
    .site-inner { padding: 16px 22px; }

    .hero { padding: 70px 0 60px; }
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero-meta { text-align: left; border-left: none; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 18px; }

    section { padding: 60px 0; }

    .section-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; }

    .start-grid { grid-template-columns: 1fr; gap: 36px; }
    .start-pitch { position: static; max-width: 100%; }
    .start-pitch p:first-child { font-size: var(--text-21); }
    .start-row { grid-template-columns: 50px 1fr; padding: 18px 18px 18px 0; }
    .start-num { font-size: var(--text-18); padding-top: 2px; }
    .start-body h4 { font-size: var(--text-19); }
    .start-cta-row { gap: 14px; }

    .work-list { grid-template-columns: 1fr; gap: 0; }
    .work-item { display: block; }
    .work-item dt, .work-item .label { padding-top: 24px; padding-bottom: 8px; }
    .work-item dd, .work-item .body { padding: 0 0 28px; border-top: none; }
    .work-item:first-of-type dd { border-top: none; }

    .delegation { grid-template-columns: 1fr; }
    .delegation > div {
      border-right: none;
      border-bottom: 1px solid var(--rule);
    }
    .delegation > div:last-child { border-bottom: none; }

    .menu-row { grid-template-columns: 1fr; }
    .menu-row > div {
      border-right: none;
      border-bottom: 1px solid var(--rule-soft);
      padding: 14px 18px;
    }
    .menu-head > div { border-right: none; border-bottom: 1px solid var(--ink-soft); }

    .menu-row .feature {
      background: var(--paper-deep);
      padding: 14px 18px 14px;
      font-size: var(--text-11);
      letter-spacing: var(--tracking-wide-5);
    }

    .menu-row .check,
    .menu-row .dash {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
    }

    .menu-row .check::before,
    .menu-row .dash::before {
      content: attr(data-tier);
      font-family: var(--mono);
      font-size: var(--text-11);
      letter-spacing: var(--tracking-wide-5);
      text-transform: uppercase;
      color: var(--mute);
      font-weight: var(--weight-normal);
    }

    .menu-row .dash::before { color: var(--rule); }

    .pricing-foot { grid-template-columns: 1fr; gap: 12px; }

    .field-note-grid { grid-template-columns: 1fr; gap: 40px; }

    .founder-grid { grid-template-columns: 1fr; gap: 24px; }
    .founder-mark { font-size: var(--text-48); }

    /* legacy .faq-item / .faq-q responsive rules removed alongside the
       legacy desktop block earlier in this file. */

    .foot-grid { grid-template-columns: 1fr; gap: 32px; }
    .foot-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
  }

  /* ─── reveal ─── */
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 0;
      transform: translateY(12px);
      animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    }
    .reveal.d1 { animation-delay: 0.1s; }
    .reveal.d2 { animation-delay: 0.22s; }
    .reveal.d3 { animation-delay: 0.34s; }
    .reveal.d4 { animation-delay: 0.46s; }

    @keyframes rise {
      to { opacity: 1; transform: translateY(0); }
    }
  }

  /* persona stamp. Small portrait + name appearing next to dept labels
     and task rows. Reuses the persona-{name}.png portraits used elsewhere. */
  .persona-stamp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--serif);
    font-size: var(--text-14);
    letter-spacing: var(--tracking-normal);
    text-transform: none;
    color: var(--ink);
    line-height: var(--leading-h2);
  }
  .persona-stamp img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--paper-deep);
    box-shadow: inset 0 0 0 1px var(--rule);
    display: block;
  }
  .work-item dt .persona-stamp {
    display: flex;
    margin-top: 10px;
    color: var(--ink);
  }
  .start-row .persona-stamp {
    margin-top: 8px;
    font-size: var(--text-13);
    color: var(--ink-soft);
  }
  .start-row .persona-stamp img {
    width: 22px;
    height: 22px;
  }

/* ============================================================
 * A11Y BASELINE — Phase 0.2 (issue #334)
 * Global :focus-visible reset + tap-target floor for every
 * interactive element. Replaces UA-default outline (barely
 * visible on warm paper) with a 2px accent ring.
 * ============================================================ */

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

/* Header CTAs lifted to 44px touch floor on mobile */
@media (max-width: 900px) {
  .nav-cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .nav-signin,
  .nav-phone,
  .subnav a {
    min-height: 44px;
    padding-top: 12px;
    padding-bottom: 12px;
    display: inline-flex;
    align-items: center;
  }
}

/* §02 work tabs - bump from 41px to 44px */

/* FAQ chip strip - 44px tap target */

/* Start step expanders - 44px tap target */

/* Scroll toast dismiss - 44px tap target */

/* Footer cluster summaries - 44px tap target on mobile */
@media (max-width: 900px) {
  .foot-cluster > summary {
    min-height: 44px;
    padding: 10px 0;
  }
}

/* Skip-link for keyboard users (paired with #main landmark) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 20px;
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  z-index: 100;
  text-decoration: none;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
}

/* ============================================================
 * TRUST PAGE
 * Editorial almanac treatment for /trust. Type-led hero with a
 * live scoreboard, hand-stamped certifications, dense control
 * matrix, asymmetric pillars, vendor wordmarks, horizontal
 * roadmap, and an inverted "honest part" dark section.
 * ============================================================ */

/* Extended reveal stagger (base system stops at d4). */
@media (prefers-reduced-motion: no-preference) {
  .reveal.d5  { animation-delay: 0.58s; }
  .reveal.d6  { animation-delay: 0.70s; }
  .reveal.d7  { animation-delay: 0.82s; }
  .reveal.d8  { animation-delay: 0.94s; }
  .reveal.d9  { animation-delay: 1.06s; }
  .reveal.d10 { animation-delay: 1.18s; }
}

/* ─── Hero ─── */
.trust-hero {
  position: relative;
  padding: 96px 0 56px;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.trust-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 85% 15%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 70%),
    radial-gradient(ellipse 60% 55% at 10% 90%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.trust-hero > .container { position: relative; z-index: 1; }

.trust-hero-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 64px;
  align-items: end;
}
@media (max-width: 900px) {
  .trust-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .trust-hero { padding: 64px 0 40px; }
}

.trust-hero-title {
  font-family: var(--serif);
  font-size: var(--text-h1);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-h1);
  line-height: var(--leading-h1);
  font-variation-settings: "opsz" 144, "wght" 380, "SOFT" 0;
  color: var(--ink);
  margin: 20px 0 0;
}
.trust-hero-title em {
  font-style: italic;
  font-weight: var(--weight-soft);
  color: var(--accent);
  display: block;
  font-variation-settings: "opsz" 144, "wght" 360, "SOFT" 100;
}
.trust-hero-lead {
  margin: 28px 0 0;
  font-family: var(--serif);
  font-size: var(--text-21);
  line-height: var(--leading-lead);
  color: var(--ink-soft);
  max-width: 30em;
}
.trust-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin: 36px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mute);
}
.trust-hero-meta strong {
  color: var(--ink);
  font-weight: var(--weight-medium);
}

/* ─── Scoreboard (24-dot mini matrix) ─── */
.trust-scoreboard {
  position: relative;
  background: color-mix(in srgb, var(--paper-deep) 70%, var(--paper));
  border: 1px solid var(--rule);
  padding: 28px 28px 24px;
  box-shadow: 0 24px 60px -36px color-mix(in srgb, var(--ink) 30%, transparent);
}
.trust-scoreboard-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 22px;
  gap: 12px;
}
.trust-scoreboard-head .label {
  font-family: var(--mono);
  font-size: var(--text-10);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--mute);
}
.trust-scoreboard-head .live-pulse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: var(--text-9);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--accent);
}
.trust-scoreboard-head .live-pulse::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: trust-pulse 2s ease-in-out infinite;
}
@keyframes trust-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); }
  50% { opacity: 0.55; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 0%, transparent); }
}

.trust-scoreboard-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.trust-scoreboard-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  border: 1px solid var(--rule-soft);
  position: relative;
}
.trust-scoreboard-cell::after {
  content: '';
  width: 38%;
  height: 38%;
  border-radius: 50%;
  background: var(--rule);
  transition: transform 240ms ease, background 240ms ease;
}
.trust-scoreboard-cell[data-status='live']::after {
  background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}
.trust-scoreboard-cell[data-status='building']::after {
  background: conic-gradient(from 0deg, var(--gold) 0deg 180deg, transparent 180deg 360deg);
  border: 1px solid var(--gold);
  border-radius: 50%;
}
.trust-scoreboard-cell[data-status='planned']::after {
  background: transparent;
  border: 1.5px solid var(--mute);
  border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .trust-scoreboard-cell {
    opacity: 0;
    animation: trust-cell-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }
  @keyframes trust-cell-in {
    from { opacity: 0; transform: translateY(8px) scale(0.92); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
}

.trust-scoreboard-key {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: var(--text-10);
  letter-spacing: var(--tracking-wide-2);
  text-transform: uppercase;
  color: var(--mute);
}
.trust-scoreboard-key span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.trust-scoreboard-key i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  font-style: normal;
}
.trust-scoreboard-key .k-live i { background: var(--accent); }
.trust-scoreboard-key .k-building i { background: conic-gradient(from 0deg, var(--gold) 0deg 180deg, transparent 180deg 360deg); border: 1px solid var(--gold); }
.trust-scoreboard-key .k-planned i { background: transparent; border: 1.5px solid var(--mute); }

.trust-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 64px;
  border-top: 1px solid var(--rule);
}
.trust-hero-stat {
  padding: 24px 24px 4px;
  border-right: 1px solid var(--rule-soft);
}
.trust-hero-stat:last-child { border-right: none; }
.trust-hero-stat:first-child { padding-left: 0; }
.trust-hero-stat-num {
  font-family: var(--serif);
  font-size: var(--text-64);
  font-weight: var(--weight-soft);
  letter-spacing: var(--tracking-h2);
  line-height: 1;
  color: var(--ink);
  font-variation-settings: "opsz" 96, "wght" 360, "SOFT" 30;
}
.trust-hero-stat-num .unit {
  font-size: var(--text-22);
  color: var(--mute);
  margin-left: 4px;
  letter-spacing: var(--tracking-tight);
}
.trust-hero-stat-label {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: var(--text-10);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--mute);
  line-height: 1.4;
}
@media (max-width: 900px) {
  .trust-hero-stats { grid-template-columns: repeat(2, 1fr); }
  .trust-hero-stat { border-right: none; border-top: 1px solid var(--rule-soft); padding: 20px 0; }
  .trust-hero-stat:nth-child(odd) { padding-right: 20px; }
}

/* ─── Certification stamps ─── */
.trust-stamps {
  padding: 56px 0 64px;
  background: color-mix(in srgb, var(--paper-deep) 50%, var(--paper));
  border-bottom: 1px solid var(--rule);
}
.trust-stamps-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 36px;
  gap: 16px;
  flex-wrap: wrap;
}
.trust-stamps-head .num {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mute);
}
.trust-stamps-head h2 {
  font-family: var(--serif);
  font-size: var(--text-h3-fluid);
  font-weight: var(--weight-normal);
  letter-spacing: var(--tracking-h3);
  line-height: var(--leading-tight);
  margin: 0;
  flex: 1 1 60%;
  min-width: 0;
}
.trust-stamps-head h2 em { font-style: italic; color: var(--accent); }

.trust-stamps-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: center;
  align-items: center;
  padding: 24px 0 12px;
}
.trust-stamp {
  position: relative;
  width: 152px;
  height: 152px;
  border-radius: 50%;
  border: 2.5px solid var(--accent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-family: var(--mono);
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--paper) 60%, transparent);
  text-align: center;
  flex: 0 0 auto;
}
.trust-stamp::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0.35;
}
.trust-stamp-line1 {
  font-size: var(--text-10);
  letter-spacing: var(--tracking-stamp);
  margin-bottom: 6px;
}
.trust-stamp-line2 {
  font-size: var(--text-15);
  letter-spacing: var(--tracking-wide-2);
  font-weight: var(--weight-medium);
  line-height: 1.15;
}
.trust-stamp-line3 {
  font-size: var(--text-9);
  letter-spacing: var(--tracking-stamp);
  margin-top: 6px;
  opacity: 0.75;
}
.trust-stamp--inherited {
  color: var(--ink);
  border-color: var(--ink);
}
.trust-stamp--building {
  color: var(--gold);
  border-color: var(--gold);
  border-style: dashed;
}
.trust-stamp--building::before { border-style: dashed; }
.trust-stamp--soft {
  color: var(--mute);
  border-color: var(--mute);
  opacity: 0.7;
}

/* Tilt each stamp at a slightly different angle for hand-pressed feel. */
.trust-stamp:nth-child(1) { transform: rotate(-4deg); }
.trust-stamp:nth-child(2) { transform: rotate(3deg); }
.trust-stamp:nth-child(3) { transform: rotate(-2deg); }
.trust-stamp:nth-child(4) { transform: rotate(5deg); }
.trust-stamp:nth-child(5) { transform: rotate(-3deg); }
.trust-stamp:hover {
  transform: rotate(0deg) scale(1.04);
  transition: transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (prefers-reduced-motion: no-preference) {
  .trust-stamp {
    opacity: 0;
    animation: trust-stamp-down 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  }
  @keyframes trust-stamp-down {
    0%   { opacity: 0; transform: rotate(var(--tilt, 0)) scale(1.4); }
    60%  { opacity: 1; transform: rotate(var(--tilt, 0)) scale(0.94); }
    100% { opacity: 1; transform: rotate(var(--tilt, 0)) scale(1); }
  }
}

@media (max-width: 600px) {
  .trust-stamp { width: 124px; height: 124px; padding: 12px; }
  .trust-stamp-line2 { font-size: var(--text-13); }
}

/* ─── Pull-quote breaker ─── */
.trust-pullquote {
  padding: 96px 0;
  border-bottom: 1px solid var(--rule);
}
.trust-pullquote-grid {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 36px;
  align-items: start;
}
.trust-pullquote-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(80px, 12vw, 160px);
  line-height: 0.85;
  color: var(--accent);
  font-variation-settings: "opsz" 144, "wght" 340, "SOFT" 100;
}
.trust-pullquote-body {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 4.2vw, 52px);
  letter-spacing: var(--tracking-mid-tight);
  line-height: var(--leading-tight);
  color: var(--ink);
  font-variation-settings: "opsz" 96, "wght" 380, "SOFT" 50;
  max-width: 22em;
}
.trust-pullquote-body em { color: var(--accent); }
.trust-pullquote-attr {
  margin-top: 28px;
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mute);
}
@media (max-width: 700px) {
  .trust-pullquote { padding: 64px 0; }
  .trust-pullquote-grid { grid-template-columns: 1fr; gap: 18px; }
  .trust-pullquote-num { font-size: 96px; }
}

/* ─── Control matrix ─── */
.trust-matrix-section {
  padding: 96px 0;
  border-bottom: 1px solid var(--rule);
}
.trust-matrix-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
  margin-bottom: 56px;
}
.trust-matrix-head .num {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 18px;
}
.trust-matrix-head h2 {
  font-family: var(--serif);
  font-size: var(--text-h2-sm);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-h2-sm);
  line-height: var(--leading-tight);
  margin: 0;
  font-variation-settings: "opsz" 96, "wght" 380, "SOFT" 0;
}
.trust-matrix-head h2 em { font-style: italic; color: var(--accent); }

.trust-matrix-tally {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--mono);
  text-align: right;
}
.trust-matrix-tally-row {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  justify-content: flex-end;
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mute);
}
.trust-matrix-tally-num {
  font-family: var(--serif);
  font-size: var(--text-24);
  font-style: italic;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  font-variation-settings: "opsz" 36, "wght" 380, "SOFT" 50;
}
.trust-matrix-tally-row[data-s='live'] .trust-matrix-tally-num { color: var(--accent); }
.trust-matrix-tally-row[data-s='building'] .trust-matrix-tally-num { color: var(--gold); }

@media (max-width: 700px) {
  .trust-matrix-head { grid-template-columns: 1fr; gap: 24px; }
  .trust-matrix-tally { text-align: left; }
  .trust-matrix-tally-row { justify-content: flex-start; }
}

.trust-matrix {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
@media (max-width: 1024px) { .trust-matrix { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .trust-matrix { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .trust-matrix { grid-template-columns: 1fr; } }

.trust-control {
  padding: 22px 22px 24px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 156px;
  transition: background 240ms ease, transform 240ms ease;
}
.trust-control:hover {
  background: color-mix(in srgb, var(--paper-deep) 50%, var(--paper));
  transform: translateY(-2px);
}
.trust-control-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.trust-control-domain {
  font-family: var(--mono);
  font-size: var(--text-9);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--mute);
}
.trust-control-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex: 0 0 auto;
  position: relative;
}
.trust-control-dot[data-status='live'] {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.trust-control-dot[data-status='live']::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  animation: trust-pulse 2.4s ease-in-out infinite;
}
.trust-control-dot[data-status='building'] {
  background: conic-gradient(from 0deg, var(--gold) 0deg 180deg, transparent 180deg 360deg);
  border: 1.5px solid var(--gold);
}
.trust-control-dot[data-status='planned'] {
  background: transparent;
  border: 1.5px solid var(--mute);
}
.trust-control-label {
  font-family: var(--serif);
  font-size: var(--text-17);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  margin: 0;
  font-variation-settings: "opsz" 24, "wght" 400, "SOFT" 30;
}
.trust-control-status {
  margin-top: auto;
  font-family: var(--mono);
  font-size: var(--text-10);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
}
.trust-control-status[data-status='live'] { color: var(--accent); }
.trust-control-status[data-status='building'] { color: var(--gold); }
.trust-control-status[data-status='planned'] { color: var(--mute); }

/* ─── Pillars (foundation) ─── */
.trust-pillars-section {
  padding: 96px 0;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper-deep) 35%, var(--paper));
}
.trust-pillars-head {
  margin-bottom: 64px;
}
.trust-pillars-head .num {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 18px;
}
.trust-pillars-head h2 {
  font-family: var(--serif);
  font-size: var(--text-h2-sm);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-h2-sm);
  line-height: var(--leading-tight);
  margin: 0;
  max-width: 16em;
}
.trust-pillars-head h2 em { font-style: italic; color: var(--accent); }

.trust-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
}
@media (max-width: 800px) { .trust-pillars { grid-template-columns: 1fr; } }

.trust-pillar {
  padding: 40px 36px 44px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: start;
}
.trust-pillar:nth-child(2n) { border-right: none; }
@media (max-width: 800px) {
  .trust-pillar { border-right: none; padding: 32px 0; }
}
.trust-pillar-numeral {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-72);
  line-height: 1;
  color: var(--accent);
  font-variation-settings: "opsz" 96, "wght" 340, "SOFT" 100;
  letter-spacing: var(--tracking-h1);
  width: 64px;
}
.trust-pillar-title {
  font-family: var(--serif);
  font-size: var(--text-30);
  font-weight: var(--weight-normal);
  letter-spacing: var(--tracking-h3);
  line-height: var(--leading-tight);
  margin: 8px 0 0;
  font-variation-settings: "opsz" 48, "wght" 380, "SOFT" 30;
}
.trust-pillar-lead {
  margin: 12px 0 0;
  font-size: var(--text-17);
  line-height: var(--leading-body);
  color: var(--ink-soft);
}
.trust-pillar ul {
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-soft);
}
.trust-pillar li {
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: var(--text-15);
  line-height: var(--leading-snug);
  color: var(--ink-soft);
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
}
.trust-pillar li::before {
  content: '→';
  font-family: var(--mono);
  color: var(--accent);
  font-size: var(--text-13);
}
.trust-pillar li:last-child { border-bottom: none; }

/* ─── Vendor wordmarks ─── */
.trust-vendors-section {
  padding: 96px 0;
  border-bottom: 1px solid var(--rule);
}
.trust-vendors-head { margin-bottom: 56px; }
.trust-vendors-head .num {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 18px;
}
.trust-vendors-head h2 {
  font-family: var(--serif);
  font-size: var(--text-h2-sm);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-h2-sm);
  line-height: var(--leading-tight);
  margin: 0;
  max-width: 18em;
}
.trust-vendors-head h2 em { font-style: italic; color: var(--accent); }
.trust-vendors-head .lead {
  margin: 16px 0 0;
  font-size: var(--text-17);
  line-height: var(--leading-body);
  color: var(--ink-soft);
  max-width: 32em;
}

.trust-vendors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
@media (max-width: 900px) { .trust-vendors { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .trust-vendors { grid-template-columns: 1fr; } }

.trust-vendor {
  padding: 36px 28px 32px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  min-height: 220px;
}
.trust-vendor-region {
  position: absolute;
  top: 18px;
  right: 18px;
  font-family: var(--mono);
  font-size: var(--text-9);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--mute);
}
.trust-vendor-wordmark {
  font-family: var(--serif);
  font-size: var(--text-28);
  font-style: italic;
  letter-spacing: var(--tracking-em);
  line-height: var(--leading-tight);
  color: var(--ink);
  font-variation-settings: "opsz" 36, "wght" 400, "SOFT" 80;
  margin: 4px 0 0;
}
.trust-vendor-purpose {
  font-size: var(--text-14);
  line-height: var(--leading-snug-2);
  color: var(--ink-soft);
  margin: 0;
  flex: 1 1 auto;
}
.trust-vendor-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}
.trust-vendor-pill {
  display: inline-block;
  padding: 5px 9px;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--text-9);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--paper-deep) 30%, transparent);
}
.trust-vendor-pill--accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }

/* ─── Roadmap timeline ─── */
.trust-roadmap-section {
  padding: 96px 0;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper-deep) 35%, var(--paper));
}
.trust-roadmap-head { margin-bottom: 64px; }
.trust-roadmap-head .num {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 18px;
}
.trust-roadmap-head h2 {
  font-family: var(--serif);
  font-size: var(--text-h2-sm);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-h2-sm);
  line-height: var(--leading-tight);
  margin: 0;
  max-width: 16em;
}
.trust-roadmap-head h2 em { font-style: italic; color: var(--accent); }

.trust-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding-top: 60px;
}
.trust-timeline::before {
  content: '';
  position: absolute;
  top: 60px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(to right, var(--rule) 0%, var(--gold) 25%, var(--accent) 65%, var(--rule) 100%);
}
.trust-timeline-marker {
  position: relative;
  padding: 0 14px;
  text-align: center;
}
.trust-timeline-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin: -8px auto 28px;
  background: var(--paper);
  border: 2.5px solid var(--accent);
  position: relative;
  z-index: 1;
}
.trust-timeline-marker[data-state='now'] .trust-timeline-dot {
  background: var(--accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent);
}
.trust-timeline-marker[data-state='building'] .trust-timeline-dot {
  border-color: var(--gold);
  background: var(--paper);
}
.trust-timeline-marker[data-state='planned'] .trust-timeline-dot {
  border-color: var(--mute);
}
.trust-timeline-date {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}
.trust-timeline-marker[data-state='building'] .trust-timeline-date { color: var(--gold); }
.trust-timeline-marker[data-state='planned'] .trust-timeline-date { color: var(--mute); }
.trust-timeline-title {
  font-family: var(--serif);
  font-size: var(--text-20);
  font-style: italic;
  line-height: var(--leading-snug);
  margin: 10px 0 8px;
  letter-spacing: var(--tracking-em);
  color: var(--ink);
  font-variation-settings: "opsz" 36, "wght" 400, "SOFT" 60;
}
.trust-timeline-desc {
  font-size: var(--text-13);
  line-height: var(--leading-snug-2);
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 800px) {
  .trust-timeline { grid-template-columns: 1fr; gap: 32px; padding-top: 0; }
  .trust-timeline::before {
    top: 0;
    bottom: 0;
    left: 18px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(to bottom, var(--accent) 0%, var(--gold) 50%, var(--rule) 100%);
  }
  .trust-timeline-marker { text-align: left; padding-left: 48px; }
  .trust-timeline-dot { margin: 0; position: absolute; left: 10px; top: 4px; }
}

/* ─── Reports panel ─── */
.trust-reports-section {
  padding: 96px 0;
  border-bottom: 1px solid var(--rule);
}
.trust-reports-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 900px) { .trust-reports-grid { grid-template-columns: 1fr; gap: 40px; } }
.trust-reports-head .num {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 18px;
}
.trust-reports-head h2 {
  font-family: var(--serif);
  font-size: var(--text-h3-fluid);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-h2-sm);
  line-height: var(--leading-tight);
  margin: 0;
  font-variation-settings: "opsz" 72, "wght" 380, "SOFT" 0;
}
.trust-reports-head h2 em { font-style: italic; color: var(--accent); }
.trust-reports-head p {
  margin: 22px 0 0;
  font-size: var(--text-17);
  line-height: var(--leading-body);
  color: var(--ink-soft);
}
.trust-reports-head .reports-cta {
  display: inline-flex;
  margin-top: 26px;
  padding: 14px 22px;
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--ink);
  transition: background 240ms ease, color 240ms ease;
}
.trust-reports-head .reports-cta:hover { background: var(--ink); color: var(--paper); }

.trust-reports-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.trust-reports-list li {
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 18px;
  align-items: baseline;
}
.trust-reports-list .idx {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--mute);
}
.trust-reports-list h3 {
  font-family: var(--serif);
  font-size: var(--text-22);
  font-weight: var(--weight-normal);
  letter-spacing: var(--tracking-em);
  margin: 0 0 4px;
  font-variation-settings: "opsz" 36, "wght" 400, "SOFT" 30;
}
.trust-reports-list p {
  margin: 0;
  font-size: var(--text-14);
  line-height: var(--leading-snug-2);
  color: var(--ink-soft);
}
.trust-reports-list .req {
  font-family: var(--mono);
  font-size: var(--text-10);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

/* ─── Honest part (inverted) ─── */
.trust-honest {
  background: var(--ink);
  color: var(--paper);
  padding: 112px 0;
  position: relative;
  overflow: hidden;
}
.trust-honest::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 60% at 80% 30%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 60%),
    radial-gradient(ellipse 40% 50% at 10% 80%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 70%);
  pointer-events: none;
}
.trust-honest > .container { position: relative; }
.trust-honest .num {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper) 60%, transparent);
  margin-bottom: 24px;
}
.trust-honest h2 {
  font-family: var(--serif);
  font-size: var(--text-h2);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-h2);
  line-height: var(--leading-h2);
  margin: 0 0 16px;
  color: var(--paper);
  max-width: 14em;
  font-variation-settings: "opsz" 144, "wght" 380, "SOFT" 0;
}
.trust-honest h2 em { font-style: italic; color: var(--gold); }
.trust-honest-sub {
  margin: 0 0 56px;
  font-size: var(--text-19);
  line-height: var(--leading-body);
  color: color-mix(in srgb, var(--paper) 75%, transparent);
  max-width: 28em;
}
.trust-honest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
}
@media (max-width: 800px) { .trust-honest-list { grid-template-columns: 1fr; } }
.trust-honest-list li {
  padding: 28px 32px 32px 0;
  border-right: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: baseline;
}
.trust-honest-list li:nth-child(2n) { border-right: none; padding-right: 0; }
.trust-honest-list .idx {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--gold);
}
.trust-honest-list h3 {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-22);
  letter-spacing: var(--tracking-em);
  margin: 0 0 8px;
  color: var(--paper);
  font-variation-settings: "opsz" 36, "wght" 400, "SOFT" 80;
}
.trust-honest-list p {
  margin: 0;
  font-size: var(--text-15);
  line-height: var(--leading-snug-2);
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}

@media (max-width: 800px) {
  .trust-honest { padding: 80px 0; }
  .trust-honest-list li { padding: 24px 0; border-right: none; }
}

/* ─── §01 home-page "How it starts" — compressed mirror of /how-it-works ─
   Renders inside .start-free.hiw-start-section. Tighter than the full
   six-week timeline on /how-it-works but uses the same visual language:
   italic Fraunces numerals, mono week meta, rust vertical spine,
   accent emphasis on disclosed copy. */

.hiw-start-section .from-chris-row { margin-bottom: 28px; }

.hiw-start {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.hiw-start::before {
  /* Vertical rust spine — runs through the marker dots */
  content: '';
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 27px;
  width: 1px;
  background: var(--accent);
  z-index: 0;
}
.hiw-start-row {
  position: relative;
  display: grid;
  grid-template-columns: 56px 120px 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 22px 0 24px;
  border-top: 1px solid var(--rule);
}
.hiw-start-row:first-child { border-top: 2px solid var(--ink); }
.hiw-start-row:last-child { border-bottom: 2px solid var(--ink); }
.hiw-start-marker {
  position: relative;
  width: 14px;
  height: 14px;
  margin: 10px auto 0;
  border-radius: 999px;
  background: var(--accent);
  /* Halo punches the spine away from the dot so it reads as a stop, not a tick */
  box-shadow: 0 0 0 6px var(--paper);
  z-index: 1;
  justify-self: center;
}
/* On the gradient section, the top half is paper-deep; tint halos accordingly */
.start-free.hiw-start-section .hiw-start-row:nth-child(1) .hiw-start-marker {
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--paper-deep) 60%, var(--paper));
}
.hiw-start-aside {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hiw-start-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--text-42);
  line-height: 0.9;
  color: var(--accent);
  font-variation-settings: "opsz" 96, "wght" 380, "SOFT" 100;
  letter-spacing: var(--tracking-h1);
}
.hiw-start-when {
  font-family: var(--mono);
  font-size: var(--text-10);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--mute);
}
.hiw-start-body { min-width: 0; }
.hiw-start-title {
  font-family: var(--serif);
  font-variation-settings: "opsz" 60, "wght" 420, "SOFT" 0;
  font-size: var(--text-24);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-h3);
  margin: 0 0 6px;
  color: var(--ink);
}
.hiw-start-title em {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: "opsz" 60, "wght" 420, "SOFT" 100;
}
.hiw-start-meta {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--mute);
  margin: 0 0 8px;
}
.hiw-start-more {
  margin-top: 4px;
}
.hiw-start-more > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: var(--text-10);
  letter-spacing: var(--tracking-stamp);
  text-transform: uppercase;
  color: var(--mute);
  padding: 6px 0;
  transition: color 180ms ease;
  min-height: 36px;
}
.hiw-start-more > summary::-webkit-details-marker { display: none; }
.hiw-start-more > summary:hover { color: var(--accent); }
.hiw-start-more[open] > summary { color: var(--ink); }
.hiw-start-more p {
  margin: 8px 0 0;
  font-family: var(--serif);
  font-size: var(--text-15);
  line-height: var(--leading-relax);
  color: var(--ink-soft);
  max-width: 56ch;
}

/* The link to the full /how-it-works page sits next to the primary CTA. */
.start-free.hiw-start-section .start-cta-row {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.hiw-start-more-link {
  font-family: var(--mono);
  font-size: var(--text-11);
  letter-spacing: var(--tracking-cta);
  text-transform: uppercase;
  color: var(--mute);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  padding-bottom: 2px;
  transition: color 180ms ease, border-color 180ms ease;
  white-space: nowrap;
}
.hiw-start-more-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

@media (max-width: 760px) {
  .hiw-start-row {
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    gap: 12px 16px;
    padding: 20px 0;
  }
  .hiw-start::before { left: 21px; top: 22px; bottom: 22px; }
  .hiw-start-marker { margin-top: 8px; }
  .hiw-start-aside {
    grid-row: 1;
    grid-column: 2;
    flex-direction: row;
    align-items: baseline;
    gap: 14px;
  }
  .hiw-start-body {
    grid-row: 2;
    grid-column: 2;
  }
  .hiw-start-num { font-size: var(--text-32); }
}

/* Compress the home-page §01 vertical padding (was inheriting full
   section padding of 100px). The dense, single-rule stepper makes
   the old breathing-room feel hollow; tighten so the section reads
   as a brisk preview before §02 The work. */
section.hiw-start-section {
  padding-top: 64px;
  padding-bottom: 64px;
}
section.hiw-start-section .section-head {
  margin-bottom: 28px;
}
@media (max-width: 760px) {
  section.hiw-start-section { padding-top: 52px; padding-bottom: 52px; }
  section.hiw-start-section .section-head { margin-bottom: 20px; }
}