:root {
  --background: #ffffff;
  --foreground: #171717;
  --muted: #686868;
  --muted-background: #f6f6f6;
  --border: #e5e5e5;
  --accent: #5a3fe8;
  --accent-foreground: #fffdf5;
  --content-width: 46rem;
  --text-display: clamp(2.35rem, 4.8vw, 3.5rem);
  --text-section: clamp(1.55rem, 2.7vw, 2rem);
  --text-subheading: 1.1rem;
  --section-space: clamp(3.25rem, 6vw, 4.75rem);
  --success: #176b3a;
  --danger: #a11d1d;
  --radius: 0.65rem;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.04);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.container, .narrow { width: min(100% - 2.5rem, var(--content-width)); margin-inline: auto; }
.section { padding-block: var(--section-space); border-bottom: 1px solid var(--border); }
.section.compact { padding-block: 3rem; }
.section:last-child { border-bottom: 0; }
.surface-muted { background: var(--muted-background); }

.site-header {
  border-bottom: 1px solid var(--border);
  background: rgb(255 255 255 / 0.94);
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(10px);
}
.site-header .container { min-height: 4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { font-weight: 700; text-decoration: none; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 0.5rem; }
.brand-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.nav { display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; }
.nav a { color: var(--muted); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--foreground); }

.eyebrow {
  margin: 0 0 1rem;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
h1, h2, h3 { color: var(--foreground); font-weight: 600; line-height: 1.12; letter-spacing: -0.025em; }
h1 { max-width: 46rem; margin: 0; font-size: var(--text-display); }
h2 { margin: 0; font-size: var(--text-section); }
h3 { margin: 0; font-size: var(--text-subheading); letter-spacing: -0.015em; }
.lead { max-width: 43rem; margin: 1.4rem 0 0; color: var(--muted); font-size: clamp(1rem, 2vw, 1.2rem); }
.body-copy { color: var(--muted); }
.hero { padding-block: clamp(4rem, 10vw, 8rem); }
.hero-grid { display: grid; gap: 2.5rem; align-items: end; }
.hero-note { border: 1px solid var(--border); border-radius: var(--radius); background: var(--muted-background); padding: 1.25rem; box-shadow: var(--shadow); }
.hero-note p { margin: 0; color: var(--muted); font-size: 0.92rem; }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.8rem; }
.button {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-foreground);
  padding: 0.68rem 1.05rem;
  font-size: 0.9rem;
  font-weight: 650;
  text-decoration: none;
  transition: transform 140ms ease, opacity 140ms ease;
}
.button:hover { transform: translateY(-1px); }
.button.secondary { background: var(--background); color: var(--foreground); border-color: var(--border); }
.button.small { min-height: 2.35rem; padding: 0.5rem 0.8rem; font-size: 0.82rem; }
.button:disabled { cursor: wait; opacity: 0.6; transform: none; }
.nav a.button { color: var(--accent-foreground); }

.grid-2, .grid-3 { display: grid; gap: 1rem; }
.card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); padding: 1.35rem; box-shadow: var(--shadow); }
.card p { margin: 0.65rem 0 0; color: var(--muted); font-size: 0.94rem; }
.badge { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.55rem; color: var(--muted); font-size: 0.75rem; font-weight: 650; }
.metric { font-size: clamp(2.15rem, 5vw, 3.4rem); font-weight: 700; line-height: 1; letter-spacing: -0.05em; }
.metric-label { margin-top: 0.8rem; font-weight: 650; }
.metric-detail { margin-top: 0.45rem; color: var(--muted); font-size: 0.82rem; }
.section-heading { max-width: 46rem; margin-bottom: 2rem; }
.section-heading p { margin: 1rem 0 0; color: var(--muted); }
.check-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.check-list li { display: grid; grid-template-columns: 1.2rem 1fr; gap: 0.55rem; }
.check-list li::before { content: "✓"; color: var(--success); font-weight: 800; }
.steps { counter-reset: step; }
.step { display: grid; grid-template-columns: 2.25rem 1fr; gap: 1rem; padding-block: 1.2rem; border-top: 1px solid var(--border); }
.step::before { counter-increment: step; content: counter(step); width: 2.1rem; height: 2.1rem; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; font-size: 0.82rem; font-weight: 700; }
.step p { margin: 0.35rem 0 0; color: var(--muted); }

.figure { margin: 1.5rem 0 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); box-shadow: var(--shadow); }
.figure-header, figcaption { padding: 1rem 1.15rem; }
.figure-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem; border-bottom: 1px solid var(--border); }
.figure-header strong { font-size: 1.05rem; }
.figure-header span, figcaption { color: var(--muted); font-size: 0.82rem; }
.figure-image { padding: 0.45rem; background: var(--muted-background); }
figcaption { border-top: 1px solid var(--border); }
.boundary { margin-top: 1rem; border-left: 3px solid var(--accent); background: var(--muted-background); padding: 1.1rem 1.2rem; color: var(--muted); }
.boundary strong { color: var(--foreground); }
.evidence-list { margin: 1rem 0 0; padding-left: 1.2rem; }
.evidence-list li + li { margin-top: 0.7rem; }

.gate { margin-top: 1.8rem; max-width: 38rem; }
.gate-row { display: grid; gap: 0.7rem; }
.input { width: 100%; min-height: 3rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); color: var(--foreground); padding: 0.7rem 0.9rem; outline: none; }
.input:focus { border-color: var(--foreground); box-shadow: 0 0 0 3px rgb(0 0 0 / 0.06); }
.form-note, .form-error { margin: 0.7rem 0 0; font-size: 0.8rem; }
.form-note { color: var(--muted); }
.form-error { color: var(--danger); }
.success { margin-top: 1.5rem; border: 1px solid #b9dcc7; border-radius: var(--radius); background: #f1faf5; padding: 1rem; }
.success strong { color: var(--success); }

/* Checklist success state. One light card holds the confirmation and the audit
   offer, separated by a hairline. The accent eyebrow, the heading and the solid
   button carry the emphasis, so the container itself stays plain. */
.gate-success {
  margin-top: 1.5rem;
  max-width: 38rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
}
/* Focus is moved here in script so screen readers announce the confirmation.
   That is not a keyboard action, so the ring is shown only to keyboard users. */
.gate-success:focus { outline: none; }
.gate-success:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.gate-receipt { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; font-size: 0.9rem; }
.gate-receipt-icon { width: 17px; height: 17px; flex: none; margin-top: 0.14rem; color: var(--success); }
.gate-receipt strong { color: var(--success); }

.audit-invite { margin-top: 1.05rem; padding-top: 1.05rem; border-top: 1px solid var(--border); }
.audit-invite-eyebrow {
  margin: 0 0 0.3rem;
  color: var(--accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.audit-invite h3 { margin: 0 0 0.4rem; font-size: 1.05rem; }
.audit-invite-copy { margin: 0 0 0.9rem; color: var(--muted); font-size: 0.88rem; }
.audit-invite .button { display: inline-flex; }
.audit-invite-note { margin: 0.75rem 0 0; color: var(--muted); font-size: 0.76rem; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.preview-list { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); }
.preview-row { display: grid; grid-template-columns: 2rem 1fr; gap: 0.5rem; padding: 1rem; border-bottom: 1px solid var(--border); }
.preview-row:last-child { border-bottom: 0; }
.preview-row span:first-child { color: var(--muted); font-size: 0.8rem; }

/* Checklist capture page: founder-led, editorial, and intentionally unboxed. */
.checklist-capture-hero { padding-block: clamp(4.5rem, 9vw, 7rem); }
.checklist-capture-hero h1 {
  max-width: 42rem;
  font-size: clamp(2.45rem, 5vw, 3.5rem);
  line-height: 1.02;
}
.checklist-capture-hero .lead { max-width: 40rem; }
.checklist-origin {
  max-width: 39rem;
  margin: 1rem 0 0;
  color: var(--muted);
}
.checklist-capture-page .gate { max-width: 36rem; }
.hero-alt { margin-top: 12px; color: var(--muted); font-size: 0.9rem; }
.hero-alt a { text-decoration: underline; }
.gate-steps {
  list-style: none;
  margin: 2.2rem 0 0;
  padding: 1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.82rem;
}
.gate-steps li { display: flex; align-items: center; gap: 0.5rem; }
.gate-steps span { color: var(--accent); font-size: 0.72rem; font-weight: 700; }
.checklist-audience-list {
  max-width: 42rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.checklist-audience-list li {
  position: relative;
  padding: 1rem 0 1rem 1.65rem;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
}
.checklist-audience-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 750;
}
.checklist-loop {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.checklist-loop > li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 1rem;
  padding-block: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.loop-number {
  padding-top: 0.15rem;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
}
.loop-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.loop-heading span { color: var(--muted); font-size: 0.75rem; white-space: nowrap; }
.checklist-loop p { max-width: 39rem; margin: 0.45rem 0 0; color: var(--muted); }
.diy-or-done { margin-top: 2.25rem; }
.checklist-preview-section .preview-list { max-width: 42rem; border-width: 1px 0 0; border-radius: 0; }
.checklist-preview-section .preview-row { padding-inline: 0; }

.checklist-service-note {
  margin: 2rem 0 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 8%, white);
}
.checklist-service-note p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.checklist-service-note .button { flex: none; }
@media (max-width: 639px) {
  .checklist-service-note { flex-direction: column; align-items: flex-start; }
  .checklist-service-note .button { width: 100%; text-align: center; }
}

.checklist-intro { padding-block: 3.5rem; border-bottom: 1px solid var(--border); }
.roadmap { margin-top: 2rem; gap: 1.25rem; }
.roadmap .card { display: flex; flex-direction: column; }
.roadmap-meta { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; color: var(--muted); font-size: 0.78rem; }
.roadmap-outcome { margin-top: auto !important; padding-top: 1rem; border-top: 1px solid var(--border); }
.checklist-layout { display: grid; gap: 2rem; align-items: start; }
.checklist-sidebar { display: grid; gap: 0.8rem; }
.progress-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; background: var(--background); }
.progress-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.progress-value { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.05em; }
.progress-count { color: var(--muted); font-size: 0.8rem; }
.progress-track { height: 0.55rem; margin-top: 0.8rem; overflow: hidden; border-radius: 999px; background: var(--border); }
.progress-bar { width: 0; height: 100%; background: var(--foreground); transition: width 180ms ease; }
.filter-group { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.25rem; }
.filter-button { border: 0; border-radius: calc(var(--radius) - 0.2rem); background: transparent; padding: 0.55rem 0.3rem; color: var(--muted); font-size: 0.8rem; }
.filter-button.active { background: var(--accent); color: var(--accent-foreground); }
.tool-actions { display: grid; gap: 0.5rem; }
.tool-actions .button { width: 100%; }
.section-block + .section-block { margin-top: 2rem; }
.section-title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; border: 1px solid var(--foreground); border-radius: var(--radius); background: var(--foreground); color: var(--background); padding: 1.25rem; }
.section-title h2 { color: inherit; font-size: 1.8rem; }
.section-title p { max-width: 40rem; margin: 0.5rem 0 0; color: #cfcfcf; font-size: 0.88rem; }
.section-count { color: #cfcfcf; font-size: 0.8rem; }
.stage { margin-top: 0.8rem; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); }
.stage-header { padding: 1rem; border-bottom: 1px solid var(--border); background: var(--muted-background); }
.stage-header-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.stage-header p { margin: 0.45rem 0 0; color: var(--muted); font-size: 0.86rem; }
.check-row { display: grid; grid-template-columns: 1.3rem 1fr; gap: 0.75rem; padding: 1rem; border-bottom: 1px solid var(--border); cursor: pointer; }
.check-row:last-child { border-bottom: 0; }
.check-row:hover { background: var(--muted-background); }
.check-row input { width: 1.05rem; height: 1.05rem; margin: 0.18rem 0 0; accent-color: var(--foreground); }
.check-task { display: block; font-size: 0.94rem; font-weight: 650; }
.check-done { display: block; margin-top: 0.32rem; color: var(--muted); font-size: 0.82rem; }
.check-row.is-done .check-task { color: var(--muted); text-decoration: line-through; }
.empty-state { border: 1px dashed var(--border); border-radius: var(--radius); padding: 2rem; text-align: center; color: var(--muted); }
.site-footer { padding-block: 2.5rem; color: var(--muted); font-size: 0.82rem; }
.site-footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; }
.site-footer a { text-decoration: none; }

@media (min-width: 640px) {
  .gate-row { grid-template-columns: 1fr auto; }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 860px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 18rem; }
  .checklist-layout { grid-template-columns: 15rem minmax(0, 1fr); }
  .checklist-sidebar { position: sticky; top: 5rem; }
}
@media (max-width: 639px) {
  .nav a:not(.nav-primary) { display: none; }
  .section { padding-block: 3.5rem; }
  .figure-header { display: block; }
  .figure-header span { display: block; margin-top: 0.25rem; }
}
@media print {
  .site-header, .site-footer, .checklist-sidebar, .print-hidden { display: none !important; }
  .container { width: 100%; }
  .checklist-layout { display: block; }
  .stage, .section-block { break-inside: avoid; }
  .check-row[hidden], .stage[hidden], .section-block[hidden] { display: grid !important; }
}

/* Service page: a narrow, editorial layout with no decorative panels. */
.service-page {
  --service-width: var(--content-width);
  --service-rule: #e9e9e9;
  line-height: 1.55;
}
.service-shell {
  width: min(100% - 2.5rem, var(--service-width));
  margin-inline: auto;
}
.service-header .header-inner {
  min-height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.service-section {
  padding-block: var(--section-space);
  border-bottom: 1px solid var(--service-rule);
}
.service-section:last-child { border-bottom: 0; }
.service-hero { padding-top: var(--section-space); }
.service-page h1 {
  max-width: 43rem;
  font-size: clamp(2.3rem, 4.2vw, 3rem);
  line-height: 1.04;
}
.service-page h1 mark {
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background: var(--accent);
  color: white;
  padding-inline: 0.1em;
  white-space: nowrap;
}
.service-page h2 {
  max-width: 41rem;
  font-size: var(--text-section);
}
.service-page .lead { max-width: 39rem; }
.capacity-note {
  max-width: 39rem;
  margin-top: 1.7rem;
  padding: 0.9rem 0;
  border-block: 1px solid var(--border);
  font-size: 0.86rem;
  color: var(--muted);
}
.capacity-note strong { color: var(--foreground); }
.spots-left { color: var(--danger); font-weight: 700; }
.hero-metrics {
  margin: 2.5rem 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--border);
}
.hero-metrics > div { padding: 1rem 1.1rem; }
.hero-metrics > div:first-child { padding-left: 0; }
.hero-metrics > div + div { border-left: 1px solid var(--border); }
.hero-metrics dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hero-metrics dd {
  margin: 0.25rem 0 0;
  font-size: 1.55rem;
  font-weight: 650;
  letter-spacing: -0.03em;
}
.hero-metrics small { color: var(--muted); font-size: 0.65rem; font-weight: 500; letter-spacing: 0; }
.hero-proof { margin: 1.5rem 0 0; }
.hero-proof a { display: block; text-decoration: none; }
.hero-proof img {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.hero-proof figcaption {
  padding: 0.65rem 0 0;
  border: 0;
  color: var(--muted);
  font-size: 0.78rem;
}
.service-page .actions { align-items: center; }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 650;
  text-decoration: none;
}
.text-link:hover { color: var(--foreground); }
.service-intro {
  max-width: 40rem;
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 1.05rem;
}
.founder-story .service-intro + .service-intro { margin-top: 0.9rem; }
.founder-layout { display: grid; gap: 2.25rem; }
/* The portrait (667x1178, ratio 0.57) and the basketball shot (1182x665, ratio
   1.78) sit side by side here, so both are cropped to a shared square with
   object-fit: cover rather than shown at their natural ratios, which would
   make one figure much taller than the other. align-items: start keeps the
   two images top-aligned even when one figcaption wraps to two lines and the
   other does not. */
.founder-figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: start;
}
.founder-desk-figure { margin: 0; }
.founder-desk {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 75%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.founder-action-figure { margin: 0; }
.founder-action {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 60% center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.founder-small { display: block; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; object-position: center 75%; border: 1px solid var(--border); margin-bottom: 1.1rem; }
.founder-links {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}
.founder-links a { color: var(--muted); text-decoration: none; }
.founder-links a:hover { text-decoration: underline; }
.service-benefits {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.service-benefits li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--muted);
}
.service-benefits li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--foreground);
  font-weight: 750;
}
.service-benefits strong { color: var(--foreground); }
/* Hero check list: reuses .service-benefits' check style, tighter spacing, sized to match the hero paragraphs it sits beside. */
.hero-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  max-width: 40rem;
  display: grid;
  gap: 0.6rem;
}
.hero-list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--muted);
}
.hero-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--foreground);
  font-weight: 750;
}
.hero-list strong { color: var(--foreground); }
.service-boundary {
  margin: 2.4rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--service-rule);
  color: var(--muted);
  font-size: 0.92rem;
}
.service-boundary strong { color: var(--foreground); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.service-nudge {
  max-width: 40rem;
  margin: 1.8rem 0 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--service-rule);
  color: var(--muted);
  font-size: 0.92rem;
}
.service-nudge a { color: var(--foreground); }
.options-table {
  width: 100%;
  margin-top: 2.25rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.options-table th,
.options-table td {
  padding: 0.95rem 0.75rem;
  border-bottom: 1px solid var(--service-rule);
  text-align: left;
  vertical-align: top;
}
.options-table thead th {
  padding-top: 0;
  color: var(--foreground);
  font-size: 1rem;
  font-weight: 650;
  border-bottom: 2px solid var(--foreground);
}
.options-table tbody th {
  width: 34%;
  padding-left: 0;
  color: var(--muted);
  font-weight: 500;
}
.options-table td { color: var(--foreground); }
.options-table td::before { display: none; }
.options-note {
  max-width: 40rem;
  margin: 1.4rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
}
.guarantee-list {
  max-width: 40rem;
  margin: 2rem 0 0;
  padding-left: 1.4rem;
  display: grid;
  gap: 0.9rem;
  color: var(--muted);
  font-size: 1.02rem;
}
.guarantee-list li::marker { color: var(--accent); font-weight: 700; }
.guarantee-list strong { color: var(--foreground); }

/* 90-day timeline: CSS grid Gantt. Bars are positioned from --start/--end (days 1 to 90). */
.timeline-section {
  --tl-label-width: 12rem;
  --tl-row-height: 2.35rem;
  --owner-me: var(--accent);
  --owner-me-text: var(--accent-foreground);
  --owner-agents: var(--success);
  --owner-agents-text: #ffffff;
  --owner-you: rgb(23 23 23 / 0.1);
  --owner-you-text: var(--foreground);
  --owner-you-ring: rgb(23 23 23 / 0.4);
}
.timeline-legend {
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  color: var(--muted);
  font-size: 0.82rem;
}
.timeline-legend li { display: inline-flex; align-items: center; gap: 0.45rem; }
.legend-swatch { width: 0.9rem; height: 0.9rem; border-radius: 0.2rem; }
.owner-me { background: var(--owner-me); color: var(--owner-me-text); }
.owner-agents { background: var(--owner-agents); color: var(--owner-agents-text); }
.owner-you { background: var(--owner-you); color: var(--owner-you-text); box-shadow: inset 0 0 0 1px var(--owner-you-ring); }

.timeline { margin-top: 1.4rem; }
.timeline-axis {
  display: grid;
  grid-template-columns: var(--tl-label-width) minmax(0, 1fr);
  gap: 1rem;
  align-items: end;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--foreground);
  color: var(--muted);
  font-size: 0.74rem;
}
.timeline-axis-label { padding-left: 0; }
.timeline-axis-track { position: relative; height: 1.1rem; }
.timeline-axis-track span {
  position: absolute;
  left: calc(var(--day) / 90 * 100%);
  transform: translateX(-50%);
  bottom: 0;
}
.timeline-axis-track span:first-child { transform: none; }
.timeline-axis-track span:last-child { transform: translateX(-100%); }
.timeline-axis-track span.is-key { color: var(--accent); font-weight: 700; }

.timeline-rows { list-style: none; margin: 0; padding: 0; }
.timeline-row {
  display: grid;
  grid-template-columns: var(--tl-label-width) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding-block: 0.4rem;
  border-bottom: 1px solid var(--service-rule);
}
.timeline-label { font-size: 0.86rem; line-height: 1.3; }
.timeline-days {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.78rem;
}
.timeline-track {
  position: relative;
  height: var(--tl-row-height);
  background: var(--muted-background);
  border-radius: 0.25rem;
  background-image:
    linear-gradient(var(--border), var(--border)),
    linear-gradient(var(--border), var(--border));
  background-repeat: no-repeat;
  background-size: 1px 100%, 1px 100%;
  background-position: calc(14 / 90 * 100%) 0, calc(30 / 90 * 100%) 0;
}
.timeline-bar {
  position: absolute;
  top: 0.3rem;
  bottom: 0.3rem;
  left: calc((var(--start) - 1) / 90 * 100%);
  width: calc((var(--end) - var(--start) + 1) / 90 * 100%);
  display: flex;
  align-items: center;
  padding-inline: 0.45rem;
  border-radius: 0.2rem;
  font-size: 0.72rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
}
.timeline-dot {
  position: absolute;
  top: 50%;
  left: calc(var(--day) / 90 * 100%);
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--owner-me);
  transform: translate(-50%, -50%);
}
.timeline-row-calls .timeline-dot:last-child { transform: translate(-100%, -50%); }
.timeline-dot-optional {
  background: #ffffff;
  box-shadow: inset 0 0 0 2px var(--accent);
}

.milestones {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}
.milestones > li { padding-top: 1rem; border-top: 2px solid var(--foreground); }
.milestone-day {
  display: block;
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.milestones h3 { margin-top: 0.5rem; font-size: 1.02rem; }
.milestone-lead {
  margin: 0.9rem 0 0.3rem;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.milestones ul { margin: 0; padding-left: 1.05rem; color: var(--muted); font-size: 0.86rem; }
.milestones ul li + li { margin-top: 0.25rem; }

@media (min-width: 720px) {
  .timeline-days { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 719px) {
  .timeline-axis, .timeline-track { display: none; }
  .timeline-row { display: block; padding-block: 0.8rem; }
  .timeline-label { font-size: 0.95rem; }
  .timeline-days { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.3rem; }
  .timeline-days::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--owner-you); box-shadow: inset 0 0 0 1px var(--owner-you-ring); flex: none; }
  .timeline-row[data-owner="me"] .timeline-days::before { background: var(--owner-me); box-shadow: none; }
  .timeline-row[data-owner="agents"] .timeline-days::before { background: var(--owner-agents); box-shadow: none; }
  .milestones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .milestones { grid-template-columns: 1fr; }
}
.application-section { scroll-margin-top: 4rem; overflow-x: hidden; }
.apply-steps {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  color: var(--muted);
  font-size: 0.82rem;
}
.apply-step-num { color: var(--accent); font-weight: 700; margin-right: 0.15rem; }
@media (max-width: 639px) {
  .apply-steps { flex-direction: column; gap: 0.4rem; }
}
/* Cal.com needs roughly 1000px of container width to render its horizontal month view; .service-shell
   caps out at 736px, so this breaks the embed out wider than the shell while staying centered on the
   page. The width formula caps itself below the viewport (100vw - 2.5rem), so it never forces a
   horizontal scrollbar; below about 1040px of viewport it naturally shrinks back to the shell's own
   width and cal.com falls back to its stacked layout on its own, no extra breakpoint needed for that.
   .application-section gets overflow-x: hidden as a guard against the sub-pixel 100vw/scrollbar edge
   case, matching the same guard already used for the hero's full-bleed marquee below. */
.cal-inline-embed {
  width: min(100vw - 2.5rem, 68rem);
  margin-left: 50%;
  transform: translateX(-50%);
  min-height: 900px;
  margin-top: 1.5rem;
}
/* Above ~1040px viewport the container clears cal.com's horizontal threshold, so the min-height only
   needs to cover the much shorter two-pane month view instead of the tall stacked one. */
@media (min-width: 1040px) {
  .cal-inline-embed { min-height: 480px; }
}
@media (max-width: 639px) {
  .cal-inline-embed { min-height: 780px; }
}
.inquiry-card {
  max-width: 38rem;
  margin-top: 2.5rem;
  background: var(--muted-background);
  border: 1px solid var(--service-rule);
  border-radius: var(--radius);
  padding: 28px;
}
.inquiry-form {
  display: grid;
  gap: 1.35rem;
}
.form-field { display: grid; gap: 0.5rem; }
.form-field label {
  font-size: 0.9rem;
  font-weight: 650;
}
.form-field label span {
  margin-left: 0.25rem;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 500;
}
.service-page .input {
  min-height: 3.15rem;
  border-color: #d8d8d8;
  border-radius: 0.5rem;
  background: transparent;
}
.service-page .input::placeholder { color: #9a9a9a; }
.service-page textarea.input { min-height: 7rem; resize: vertical; font: inherit; line-height: 1.5; }
.inquiry-submit { justify-self: start; margin-top: 0.35rem; }
.inquiry-form .form-note { max-width: 34rem; margin-top: -0.45rem; }
.inquiry-form .form-error { margin-top: -0.4rem; }
.inquiry-success {
  max-width: 38rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--service-rule);
  outline: none;
}
.inquiry-success h3 { font-size: clamp(1.5rem, 4vw, 2.1rem); }
.inquiry-success > p:not(.eyebrow) { margin: 0.8rem 0 1.4rem; color: var(--muted); }
.success-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0 0 1.1rem;
  padding: 0.85rem 1rem;
  border: 1px solid #b9e2c6;
  border-radius: var(--radius);
  background: #ecf8f0;
  color: #1c6b3b;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.45;
}
.success-banner-icon { width: 20px; height: 20px; flex: none; margin-top: 0.1rem; color: var(--success, #1c8f4a); }
.success-banner strong { font-weight: 650; }
.recap-label { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.inquiry-recap {
  display: grid;
  gap: 0.9rem;
  margin: 0 0 1.6rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--service-rule);
  border-radius: var(--radius);
  background: var(--muted-background);
}
.inquiry-recap > div { display: grid; gap: 0.2rem; }
.inquiry-recap dt {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.inquiry-recap dd { margin: 0; font-size: 0.95rem; font-weight: 500; }

/* /audit hero: copy left, form right on wide screens, stacked below 900px. */
.audit-hero .service-shell { --service-width: 66rem; }
.audit-page .service-shell > .eyebrow,
.audit-page .service-shell > h2,
.audit-page .service-shell > .service-intro,
.audit-page .service-shell > .guarantee-list,
.audit-page .founder-copy { max-width: 44rem; }
.audit-hero-grid { display: grid; gap: 2.5rem; align-items: start; }
.audit-hero .inquiry-card { margin-top: 0; }
.audit-hero .inquiry-success { margin-top: 0; padding-top: 0; border-top: 0; }
h2.inquiry-card-title { margin: 0 0 0.4rem; font-size: 1.35rem; }
.inquiry-card-intro { margin: 0 0 1.4rem; color: var(--muted); font-size: 0.95rem; }
.ai-logos-label { margin: 1.4rem 0 0.6rem; color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.audit-steps { margin-top: 0; }
.audit-steps li { font-size: 0.95rem; }
.ai-logos { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; margin: 0; padding: 0; list-style: none; }
.ai-logos li { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 550; }
.ai-logos svg { width: 22px; height: 22px; flex: none; }
.audit-hero-link { margin: 1.6rem 0 0; }
@media (min-width: 900px) {
  .audit-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: 3.5rem; }
}
.service-footer .service-shell {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
}

@media (max-width: 639px) {
  .checklist-capture-hero h1 { font-size: clamp(2.3rem, 10vw, 2.7rem); }
  .gate-steps { display: grid; }
  .loop-heading { display: block; }
  .loop-heading span { display: block; margin-top: 0.2rem; }
  .service-shell { width: min(100% - 2rem, var(--service-width)); }
  .service-section { padding-block: 3.75rem; }
  /* Two 1.5rem-gap squares would run under 160px wide on a 375px screen, too
     small to read as photos. Stack them at their natural ratios instead, as
     before this layout existed. */
  .founder-figures { grid-template-columns: 1fr; gap: 1.5rem; }
  .founder-desk, .founder-action { aspect-ratio: auto; height: auto; }
  .founder-desk { max-width: 18rem; }
  .service-hero { padding-top: 4.5rem; }
  .hero-metrics { grid-template-columns: 1fr; }
  .hero-metrics > div { padding: 0.85rem 0; }
  .hero-metrics > div + div { border-left: 0; border-top: 1px solid var(--border); }
  .inquiry-card { padding: 20px; }
  .inquiry-submit { width: 100%; }
  .options-table thead { display: none; }
  .options-table,
  .options-table tbody,
  .options-table tr,
  .options-table th,
  .options-table td { display: block; width: auto; }
  .options-table tr { padding-block: 0.9rem; border-bottom: 1px solid var(--service-rule); }
  .options-table tbody th { padding: 0 0 0.35rem; border: 0; font-weight: 650; color: var(--foreground); }
  .options-table td { padding: 0.15rem 0; border: 0; display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0.5rem; }
  .options-table td::before { display: block; content: attr(data-label); color: var(--muted); font-size: 0.85rem; }
}

/* proof page */
.proof-table th,
.proof-table td { padding: 0.95rem 0.75rem; }
.proof-table th:first-child,
.proof-table td:first-child { padding-left: 0; }
.proof-table th:not(:first-child),
.proof-table td:not(:first-child) { text-align: right; }
.proof-table thead th { white-space: nowrap; }

/* Hero H1 before/after mark pair. --danger is the existing red token. */
.service-page h1 mark.mark-before {
  background: var(--danger);
  color: white;
}
.service-page h1 mark.mark-after {
  background: var(--success);
  color: white;
}

/* Hero proof intro: short muted caption framing the full-bleed marquee below, aligned with the H1. */
.proof-intro {
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

/* Hero proof marquee: full-bleed strip, track holds the four proof figures twice for a seamless loop. */
.service-hero { overflow-x: hidden; }
.proof-carousel {
  width: 100%;
  margin: 1.25rem 0 0;
  overflow: hidden;
}
.proof-track {
  --proof-gap: 28px;
  display: flex;
  align-items: flex-start;
  width: max-content;
  gap: var(--proof-gap, 28px);
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
  animation: proof-marquee 70s linear infinite;
}
.proof-kind {
  margin: 0 0 0.4rem;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.proof-carousel:hover .proof-track,
.proof-carousel:focus-within .proof-track {
  animation-play-state: paused;
}
@keyframes proof-marquee {
  to { transform: translateX(calc(-50% - var(--proof-gap, 28px) / 2)); }
}
.proof-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.proof-slide { flex: 0 0 auto; width: min(860px, 72vw); min-width: 0; }
.proof-slide figure { margin: 0; }
.proof-slide img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.proof-slide figcaption {
  padding: 0.65rem 0 0;
  border: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

/* Hover/focus CTA over each proof screenshot, linking through to the full /proof page. Scrim keeps the label readable over light screenshots; always-on under @media (hover: none) since touch has no hover state. */
.proof-shot {
  position: relative;
  display: block;
  color: inherit;
  text-decoration: none;
}
.proof-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--radius);
  background: color-mix(in srgb, black 45%, transparent);
  opacity: 0;
  transition: opacity 0.18s ease;
  pointer-events: none;
}
.proof-shot-cta {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.75rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-foreground);
  padding: 0.68rem 1.05rem;
  font-size: 0.9rem;
  font-weight: 650;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.35);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.proof-slide:hover .proof-shot::after,
.proof-slide:hover .proof-shot-cta,
.proof-shot:focus-visible::after,
.proof-shot:focus-visible .proof-shot-cta {
  opacity: 1;
}
@media (hover: none) {
  .proof-shot::after { opacity: 0.28; }
  .proof-shot-cta { opacity: 1; }
}
@media (max-width: 639px) {
  .proof-slide { flex-basis: 88vw; width: 88vw; }
}
@media (prefers-reduced-motion: reduce) {
  .proof-track {
    animation: none;
    width: auto;
    overflow-x: auto;
  }
  .proof-shot::after,
  .proof-shot-cta {
    transition: none;
  }
}

/* "Your part" two-column split list. */
.split-list {
  margin-top: 2rem;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.split-list-col { padding: 1.5rem; border-radius: var(--radius); }
.split-list-highlight { background: color-mix(in srgb, var(--accent) 8%, white); }
.split-list-col h3 { margin: 0 0 1rem; font-size: 1.02rem; }
.split-list-col .service-benefits { margin-top: 0; }
.split-list-plain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  color: var(--muted);
}
@media (max-width: 639px) {
  .split-list { grid-template-columns: 1fr; }
}

/* "What you get" deliverables list: reuses .service-benefits' check style, laid out in two columns. */
.deliverables-list {
  display: block;
  columns: 2;
  column-gap: 40px;
}
.deliverables-list li {
  break-inside: avoid;
  margin-bottom: 1rem;
}
@media (max-width: 719px) {
  .deliverables-list { columns: 1; }
}

/* Proof marquee carries 4 figures, duplicated once for the loop. */
.proof-track {
  animation-duration: 65s;
}
/* proof.html ChatGPT section: 2-column figure grid, 1 column under 720px. */
.proof-grid {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 720px) {
  .proof-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* proof page */
.proof-table .growth { color: var(--success); font-weight: 700; }