/* ============================================================================
   TechBrot · BSS-1 · 04 — PAGE OVERRIDES
   ----------------------------------------------------------------------------
   Page-specific tweaks. Most styling lives in components.css.
   Each page gets a body class (e.g. page--home, page--service)
   and styles are scoped under that class.
   ============================================================================ */

/* ============================================================================
   HOME PAGE
   ============================================================================ */

.page--home .section--hero {
  padding-block: var(--space-12) var(--space-16);
}

@media (min-width: 960px) {
  .page--home .section--hero {
    padding-block: var(--space-20) var(--space-24);
  }
}

.page--home .section--services {
  padding-block: var(--space-16);
}

@media (min-width: 960px) {
  .page--home .section--services {
    padding-block: var(--space-24);
  }
}

/* ============================================================================
   SERVICE PAGES — shared across all /accounting/* and /quickbooks/* pages
   ============================================================================ */

/* --- Breadcrumb (shared across all deep pages) --- */

.breadcrumb {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border-hairline);
  background: var(--color-paper);
  font-size: var(--fs-12);
  margin-top: 1em;
  padding: 0em;
}

.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
}

.breadcrumb__item {
  display: inline-flex;
  align-items: center;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  margin-inline-end: var(--space-2);
  color: var(--text-eyebrow);
  opacity: 0.6;
}

.breadcrumb__item a {
  color: var(--text-secondary);
  transition: color var(--motion-base) var(--ease-out);
}

.breadcrumb__item a:hover {
  color: var(--color-accent);
}

.breadcrumb__item--current {
  color: var(--text-primary);
  font-weight: var(--fw-medium);
}

/* --- Service hero (shared pattern across service pages) --- */

.page--service .section--service-hero {
  padding-block: var(--space-12) var(--space-16);
}

@media (min-width: 960px) {
  .page--service .section--service-hero {
    padding-block: var(--space-16) var(--space-24);
  }
}

.service-hero {
  max-width: 880px;
}

.service-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  margin-block-end: var(--space-6);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--color-paper-warm);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
}

.service-hero__heading {
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  margin-block-end: var(--space-6);
  font-weight: var(--fw-regular);
  max-width: 18ch;
}

.service-hero__subheading {
  font-size: var(--fs-18);
  line-height: 1.55;
  color: var(--text-secondary);
  margin-block-end: var(--space-8);
  max-width: 60ch;
}

@media (min-width: 720px) {
  .service-hero__subheading {
    font-size: var(--fs-20);
  }
}

.service-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-end: var(--space-10);
}

.service-hero__assurance {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--border-hairline);
  font-size: var(--fs-13);
  align-items: baseline;
  max-width: 60ch;
}

.service-hero__assurance-label {
  color: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
  flex-shrink: 0;
}

.service-hero__assurance-body {
  color: var(--text-body);
}

/* ============================================================================
   CLEANUP-BOOKKEEPING PAGE
   ============================================================================ */

/* Section background alternation for this page */

.page--cleanup-bookkeeping .section--cleanup-signals, .page--cleanup-bookkeeping .section--cleanup-outcomes, .page--cleanup-bookkeeping .section--cleanup-operator {
  background: var(--bg-section-alt);
}

/* --- Includes grid (What cleanup delivers) --- */

.includes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 720px) {
  .includes-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
}

@media (min-width: 1024px) {
  .includes-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.include-item {
  padding-block-start: var(--space-4);
  border-block-start: 2px solid var(--color-ink);
}

.include-item__number {
  font-family: var(--font-serif);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  display: block;
  margin-block-end: var(--space-3);
  font-variant-numeric: tabular-nums;
}

.include-item__heading {
  font-size: var(--fs-18);
  line-height: 1.3;
  margin-block-end: var(--space-2);
}

.include-item__body {
  font-size: var(--fs-14);
  line-height: 1.55;
  color: var(--text-secondary);
}

/* --- Process step meta (timing badge, used on cleanup-bookkeeping process) --- */

.process-step__meta {
  margin-block-start: var(--space-3);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* --- Outcomes table (Before / After) --- */

.outcomes-table {
  border-block-start: 1px solid var(--border-hairline);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.outcomes-table__row {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1.5fr;
  min-width: 640px;
  border-block-end: 1px solid var(--border-hairline);
}

.outcomes-table__row--head {
  background: var(--color-paper-deep);
  font-weight: var(--fw-semibold);
}

.outcomes-table__cell {
  padding: var(--space-4);
  font-size: var(--fs-14);
  color: var(--text-body);
  display: flex;
  align-items: center;
  line-height: 1.45;
}

.outcomes-table__cell--label {
  font-family: var(--font-serif);
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.outcomes-table__cell--before {
  color: var(--text-secondary);
  font-style: italic;
}

.outcomes-table__cell--after {
  color: var(--text-primary);
  font-weight: var(--fw-medium);
  border-inline-start: 2px solid var(--color-accent);
  background: rgba(132, 30, 30, 0.04);
}

.outcomes-table__row--head .outcomes-table__cell--after {
  background: var(--color-accent);
  color: var(--color-ink-inverted);
}

.outcomes-table__row--head .outcomes-table__cell--before {
  font-style: normal;
  color: var(--text-primary);
}

/* --- Pricing tiers --- */

.pricing-tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 720px) {
  .pricing-tiers {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pricing-tier {
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-6);
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  transition: border-color var(--motion-slow) var(--ease-out), box-shadow var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}

.pricing-tier:hover {
  border-color: var(--text-primary);
  transform: translateY(-2px);
}

.pricing-tier--featured {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}

.pricing-tier--featured:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-lg);
}

.pricing-tier__header {
  padding-block-end: var(--space-5);
  margin-block-end: var(--space-5);
  border-block-end: 1px solid var(--border-hairline);
}

.pricing-tier__eyebrow {
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-block-end: var(--space-3);
}

.pricing-tier--featured .pricing-tier__eyebrow {
  color: var(--color-accent);
}

.pricing-tier__heading {
  font-size: var(--fs-22);
  line-height: 1.2;
  margin-block-end: var(--space-3);
}

.pricing-tier__range {
  font-family: var(--font-serif);
  font-size: var(--fs-28);
  font-weight: var(--fw-regular);
  color: var(--text-primary);
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
}

.pricing-tier__fit {
  font-size: var(--fs-14);
  font-style: italic;
  color: var(--text-secondary);
  margin-block-end: var(--space-5);
  line-height: 1.5;
}

.pricing-tier__includes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-end: auto;
  padding-block-end: var(--space-5);
}

.pricing-tier__includes li {
  font-size: var(--fs-14);
  color: var(--text-body);
  padding-inline-start: var(--space-4);
  position: relative;
  line-height: 1.5;
}

.pricing-tier__includes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 1.5px;
  background: var(--color-accent);
}

.pricing-tier__cta {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--border-hairline);
  transition: color var(--motion-base) var(--ease-out);
}

.pricing-tier__cta:hover {
  color: var(--color-accent);
}

.pricing-tiers__note {
  margin-block-start: var(--space-8);
  font-size: var(--fs-14);
  color: var(--text-secondary);
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
}

/* --- Operator block (split layout, mirrors network section) --- */

.operator-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: start;
}

@media (min-width: 1024px) {
  .operator-block {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-16);
  }
}

.operator-block__copy {
  max-width: 56ch;
}

.operator-block__lede {
  font-size: var(--fs-18);
  line-height: 1.55;
  color: var(--text-secondary);
  margin-block: var(--space-4);
}

.operator-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

.credential-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.credential-item {
  padding-inline-start: var(--space-4);
  border-inline-start: 2px solid var(--color-accent);
}

.credential-item__label {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-block-end: var(--space-2);
}

.credential-item__detail {
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  line-height: 1.45;
}

/* --- Related services grid --- */

.related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 720px) {
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .related-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.related-card {
  padding: var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  transition: border-color var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}

.related-card:hover {
  border-color: var(--text-primary);
  transform: translateY(-2px);
}

.related-card__heading {
  font-size: var(--fs-18);
  line-height: 1.25;
  margin-block-end: var(--space-3);
}

.related-card__heading a {
  color: var(--text-primary);
  transition: color var(--motion-base) var(--ease-out);
}

.related-card__heading a:hover {
  color: var(--color-accent);
}

.related-card__body {
  font-size: var(--fs-14);
  line-height: 1.55;
  color: var(--text-secondary);
  margin-block-end: var(--space-4);
}

.related-card__cta {
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  transition: color var(--motion-base) var(--ease-out);
}

.related-card__cta:hover {
  color: var(--color-accent);
}

/* ============================================================================
   FUTURE PAGE PATTERNS — placeholders for the design system to extend.
   ============================================================================ */

/* .page--location { ... }
.page--industry { ... }
.page--guide { ... }
.page--blog-post { ... }
.page--legal { ... }
.page--partner { ... } */

/* ============================================================================
   CATCH-UP-BOOKKEEPING PAGE
   ============================================================================ */

.page--catch-up-bookkeeping .section--cleanup-signals, .page--catch-up-bookkeeping .section--cleanup-outcomes, .page--catch-up-bookkeeping .section--cleanup-operator {
  background: var(--bg-section-alt);
}

/* --- Split hero (text left, visual right) — reusable across service pages --- */

.service-hero-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
  align-items: center;
}

@media (min-width: 1024px) {
  .service-hero-split {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-16);
  }
}

.service-hero-split__visual {
  position: relative;
  order: -1;
}

@media (min-width: 1024px) {
  .service-hero-split__visual {
    order: initial;
  }
}

.service-hero-split__visual img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  object-fit: cover;
  aspect-ratio: 9 / 8;
}

@media (min-width: 1024px) {
  .service-hero-split__visual img {
    aspect-ratio: 4 / 3;
  }
}

/* ============================================================================
   HUB PAGES — shared across all silo hubs (/accounting/bookkeeping/,
   /accounting/, /quickbooks/, /find-an-accountant/, /resources/, etc.)
   These components live in 04-pages.css now; promote to 03-components.css
   when used by a 3rd hub page.
   ============================================================================ */

.page--hub .section--bookkeeping-services, .page--hub .section--bookkeeping-routing, .page--hub .section--bookkeeping-why, .page--hub .section--bookkeeping-industries, .page--hub .section--cleanup-operator {
  background: var(--bg-section-alt);
}

.page--hub .section--bookkeeping-services, .page--hub .section--bookkeeping-why {
  background: var(--bg-page);
}

/* --- Hub Hero (NEW global pattern) ---
   Naming: .hub-hero / .hub-hero__eyebrow / .hub-hero__heading / .hub-hero__subheading
           / .hub-hero__actions / .hub-hero__stats / .hub-hero__stat / .hub-hero__stat-number / .hub-hero__stat-label
   Used by: all silo hub pages. */

.section--hub-hero {
  padding-block: var(--space-16) var(--space-20);
}

@media (min-width: 960px) {
  .section--hub-hero {
    padding-block: var(--space-20) var(--space-24);
  }
}

.hub-hero {
  max-width: 880px;
}

.hub-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  margin-block-end: var(--space-6);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--color-paper-warm);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
}

.hub-hero__heading {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  margin-block-end: var(--space-6);
  font-weight: var(--fw-regular);
  max-width: 18ch;
}

.hub-hero__subheading {
  font-size: var(--fs-18);
  line-height: 1.55;
  color: var(--text-secondary);
  margin-block-end: var(--space-8);
  max-width: 60ch;
}

@media (min-width: 720px) {
  .hub-hero__subheading {
    font-size: var(--fs-20);
  }
}

.hub-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-end: var(--space-12);
}

.hub-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  padding-block-start: var(--space-8);
  border-block-start: 1px solid var(--border-hairline);
}

@media (min-width: 720px) {
  .hub-hero__stats {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
  }
}

.hub-hero__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.hub-hero__stat-number {
  font-family: var(--font-serif);
  font-size: var(--fs-32);
  line-height: 1;
  color: var(--text-primary);
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
}

.hub-hero__stat-label {
  font-size: var(--fs-13);
  color: var(--text-secondary);
  line-height: 1.4;
}

/* --- Hub Service Grid (NEW global pattern, 4-tile router) ---
   Naming: .hub-service-grid / .hub-service-tile / .hub-service-tile__eyebrow /
           .hub-service-tile__heading / .hub-service-tile__lede / .hub-service-tile__meta /
           .hub-service-tile__cta / .hub-service-tile--featured */

.hub-service-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 720px) {
  .hub-service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .hub-service-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.hub-service-tile {
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-6);
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  transition: border-color var(--motion-slow) var(--ease-out), box-shadow var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}

.hub-service-tile:hover {
  border-color: var(--text-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.hub-service-tile--featured {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.hub-service-tile--featured:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-lg);
}

.hub-service-tile__eyebrow {
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-block-end: var(--space-3);
}

.hub-service-tile--featured .hub-service-tile__eyebrow {
  color: var(--color-accent);
}

.hub-service-tile__heading {
  font-size: var(--fs-22);
  line-height: 1.2;
  margin-block-end: var(--space-3);
}

.hub-service-tile__heading a {
  color: var(--text-primary);
  transition: color var(--motion-base) var(--ease-out);
}

.hub-service-tile__heading a:hover {
  color: var(--color-accent);
}

.hub-service-tile__lede {
  font-size: var(--fs-15);
  line-height: 1.55;
  color: var(--text-secondary);
  margin-block-end: var(--space-5);
}

.hub-service-tile__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-end: auto;
  padding-block: var(--space-4) var(--space-5);
  border-block-start: 1px solid var(--border-hairline);
  border-block-end: 1px solid var(--border-hairline);
}

.hub-service-tile__meta > div {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--space-3);
  font-size: var(--fs-13);
  line-height: 1.45;
}

.hub-service-tile__meta dt {
  color: var(--text-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-size: var(--fs-12);
}

.hub-service-tile__meta dd {
  color: var(--text-primary);
  font-weight: var(--fw-medium);
}

.hub-service-tile__cta {
  display: inline-flex;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  margin-block-start: var(--space-5);
  transition: color var(--motion-base) var(--ease-out);
}

.hub-service-tile__cta:hover {
  color: var(--color-accent);
}

/* --- Routing Matrix (NEW global pattern, decision table) ---
   Naming: .routing-matrix / .routing-matrix__row / .routing-matrix__cell
   Used by: any decision table — engagement selection, plan selection, vs comparisons. */

.routing-matrix {
  border-block-start: 1px solid var(--border-hairline);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.routing-matrix__row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1.5fr;
  min-width: 720px;
  border-block-end: 1px solid var(--border-hairline);
}

.routing-matrix__row--head {
  background: var(--color-paper-deep);
  font-weight: var(--fw-semibold);
}

.routing-matrix__cell {
  padding: var(--space-4);
  font-size: var(--fs-14);
  color: var(--text-body);
  display: flex;
  align-items: center;
  line-height: 1.45;
}

.routing-matrix__cell--label {
  font-family: var(--font-serif);
  font-size: var(--fs-15);
  color: var(--text-primary);
}

.routing-matrix__cell--action {
  font-weight: var(--fw-medium);
}

.routing-matrix__cell--action a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--motion-base) var(--ease-out);
}

.routing-matrix__cell--action a:hover {
  text-decoration-color: var(--color-accent);
}

.routing-matrix__cell--then {
  color: var(--text-secondary);
  font-style: italic;
}

/* --- Why Grid (NEW global pattern, value-prop grid) ---
   Naming: .why-grid / .why-card / .why-card__number / .why-card__heading / .why-card__body
   Used by: hub pages, comparison pages, landing pages. */

.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 720px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .why-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.why-card {
  padding: var(--space-6);
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  transition: border-color var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}

.why-card:hover {
  border-color: var(--text-primary);
  transform: translateY(-2px);
}

.why-card__number {
  font-family: var(--font-serif);
  font-size: var(--fs-18);
  color: var(--color-accent);
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
  margin-block-end: var(--space-3);
}

.why-card__heading {
  font-size: var(--fs-20);
  line-height: 1.2;
  margin-block-end: var(--space-3);
}

.why-card__body {
  font-size: var(--fs-14);
  line-height: 1.55;
  color: var(--text-secondary);
}

/* --- FAQ Nested (NEW — children inside parent answers) ---
   Naming: .faq__list--nested / .faq__children / .faq__child / .faq__child-question
   Used by: hub pages, deep FAQ pages, glossary entries with related terms. */

.faq__list--nested .faq__answer > p + .faq__children {
  margin-block-start: var(--space-5);
}

.faq__children {
  margin-block: var(--space-4) var(--space-6);
  padding-inline-start: var(--space-5);
  border-inline-start: 2px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.faq__child {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.faq__child-question {
  font-family: var(--font-serif);
  font-size: var(--fs-17);
  line-height: 1.3;
  color: var(--text-primary);
  margin: 0;
  font-weight: var(--fw-regular);
}

.faq__child p {
  font-size: var(--fs-15);
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
}

.faq__child p a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-hairline);
  transition: text-decoration-color var(--motion-base) var(--ease-out);
}

.faq__child p a:hover {
  text-decoration-color: var(--color-accent);
  color: var(--color-accent);
}

/* ============================================================================
   ProAdvisor Credential Strip — GLOBAL component
   Used on all /quickbooks/* pages to assert Certified ProAdvisor status
   and provide AI engines + visitors with verifiable trust signal.
   Naming: .proadvisor-credentials / __lede / __eyebrow / __statement /
           __badges / __badge / __badge-label
   ============================================================================ */

.section--proadvisor-credentials {
  padding-block: var(--space-10);
  border-block-start: 1px solid var(--border-hairline);
  border-block-end: 1px solid var(--border-hairline);
  background: var(--bg-page);
}

.proadvisor-credentials {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 960px) {
  .proadvisor-credentials {
    grid-template-columns: 1fr 1.4fr;
    gap: var(--space-12);
  }
}

.proadvisor-credentials__lede {
  max-width: 36ch;
}

.proadvisor-credentials__eyebrow {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-block-end: var(--space-2);
}

.proadvisor-credentials__statement {
  font-size: var(--fs-15);
  line-height: 1.55;
  color: var(--text-body);
}

.proadvisor-credentials__badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}

@media (min-width: 720px) {
  .proadvisor-credentials__badges {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }
}

.proadvisor-credentials__badge {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  transition: border-color var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out);
}

.proadvisor-credentials__badge:hover {
  border-color: var(--text-primary);
  transform: translateY(-1px);
}

.proadvisor-credentials__badge img {
  height: 32px;
  width: auto;
  max-width: 100%;
  display: block;
}

.proadvisor-credentials__badge-label {
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* ============================================================================
   MONTHLY-BOOKKEEPING PAGE
   ============================================================================ */

.page--monthly-bookkeeping .section--engagement-cadence, .page--monthly-bookkeeping .section--deliverables, .page--monthly-bookkeeping .section--cleanup-operator {
  background: var(--bg-section-alt);
}

/* ============================================================================
   QUICKBOOKS HUB PAGE
   ============================================================================ */

.page--quickbooks .section--bookkeeping-services, .page--quickbooks .section--bookkeeping-why, .page--quickbooks .section--cleanup-operator {
  background: var(--bg-section-alt);
}

/* --- 6-tile hub service grid modifier ---
   Existing hub-service-grid maxes at 4 columns; this modifier allows 3×2 layout for 6 items. */

.hub-service-grid--six {
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .hub-service-grid--six {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .hub-service-grid--six {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Plan Comparison Router (NEW component) ---
   Used by: /quickbooks/ hub now. Will reuse on /quickbooks/online/, /quickbooks/desktop/,
   /quickbooks/which-plan-is-right/, and any future product comparison page (e.g. payroll plans).
   Naming: .plan-comparison / .plan-comparison__product / __header / __eyebrow /
           __heading / __positioning / __fit / __cta / __footer / __footer-lede
   CSS location: 04-pages.css now; promote to 03-components.css after /quickbooks/online/ uses it.
   ============================================================================ */

.plan-comparison {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 720px) {
  .plan-comparison {
    grid-template-columns: repeat(2, 1fr);
  }
}

.plan-comparison__product {
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  transition: border-color var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out), box-shadow var(--motion-slow) var(--ease-out);
}

.plan-comparison__product:hover {
  border-color: var(--text-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.plan-comparison__header {
  padding-block-end: var(--space-4);
  margin-block-end: var(--space-5);
  border-block-end: 1px solid var(--border-hairline);
}

.plan-comparison__eyebrow {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-block-end: var(--space-3);
}

.plan-comparison__heading {
  font-size: var(--fs-24);
  line-height: 1.2;
}

.plan-comparison__heading a {
  color: var(--text-primary);
  transition: color var(--motion-base) var(--ease-out);
}

.plan-comparison__heading a:hover {
  color: var(--color-accent);
}

.plan-comparison__positioning {
  font-size: var(--fs-15);
  line-height: 1.55;
  color: var(--text-secondary);
  margin-block-end: var(--space-4);
}

.plan-comparison__fit {
  font-size: var(--fs-14);
  line-height: 1.55;
  color: var(--text-body);
  padding-block: var(--space-4);
  border-block-start: 1px solid var(--border-hairline);
  border-block-end: 1px solid var(--border-hairline);
  margin-block-end: var(--space-5);
}

.plan-comparison__fit a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-hairline);
  transition: text-decoration-color var(--motion-base) var(--ease-out);
}

.plan-comparison__fit a:hover {
  text-decoration-color: var(--color-accent);
  color: var(--color-accent);
}

.plan-comparison__cta {
  display: inline-flex;
  margin-block-start: auto;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  transition: color var(--motion-base) var(--ease-out);
}

.plan-comparison__cta:hover {
  color: var(--color-accent);
}

.plan-comparison__footer {
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--border-hairline);
  text-align: center;
}

.plan-comparison__footer-lede {
  font-size: var(--fs-15);
  color: var(--text-secondary);
}

.plan-comparison__footer-lede a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-hairline);
  transition: text-decoration-color var(--motion-base) var(--ease-out);
}

.plan-comparison__footer-lede a:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

/* ============================================================================
   ABOUT PAGE V3 — editorial authority, firm-positioned
   Reuses: about-hero, mission-block, principles-list (already promoted)
           proadvisor-credentials, hub-hero, why-grid, faq__list--nested (already promoted)
           editorial-break (already in 04-pages.css from /vs/ hub)
   NEW components introduced: timeline-graph, delivery-modes, scope-grid
   ============================================================================ */

/* --- Page-scoped section backgrounds --- */

.page--about .section--about-thesis, .page--about .section--principles, .page--about .section--standard, .page--about .section--scope-honesty, .page--about .section--about-services {
  background: var(--bg-section-alt);
}

.page--about .section--mission, .page--about .section--timeline-graph, .page--about .section--about-delivery, .page--about .section--infrastructure, .page--about .section--about-nav {
  background: var(--bg-page);
}

/* --- About Hero (about-hero variant, prose-led) ---
   Naming: .about-hero / __eyebrow / __heading / __subheading / __meta */

.section--about-hero {
  padding-block: var(--space-16) var(--space-20);
}

@media (min-width: 960px) {
  .section--about-hero {
    padding-block: var(--space-20) var(--space-24);
  }
}

.about-hero {
  max-width: 920px;
}

.about-hero__eyebrow {
  display: inline-flex;
  padding: var(--space-1) var(--space-3);
  margin-block-end: var(--space-6);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--color-paper-warm);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
}

.about-hero__heading {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  margin-block-end: var(--space-6);
  font-weight: var(--fw-regular);
  max-width: 22ch;
}

.about-hero__subheading {
  font-size: var(--fs-18);
  line-height: 1.55;
  color: var(--text-secondary);
  margin-block-end: var(--space-10);
  max-width: 68ch;
}

@media (min-width: 720px) {
  .about-hero__subheading {
    font-size: var(--fs-20);
  }
}

.about-hero__meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
  padding-block-start: var(--space-8);
  border-block-start: 1px solid var(--border-hairline);
}

@media (min-width: 720px) {
  .about-hero__meta {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
  }
}

.about-hero__meta li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.about-hero__meta-label {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.about-hero__meta-value {
  font-size: var(--fs-15);
  color: var(--text-primary);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

/* --- Timeline Graph (page-defining SVG progression illustration) ---
   Page-specific component. Stays in 04-pages.css.
   Naming: .timeline-graph / __svg / __milestones / __milestone / __year / __heading / __body
   Modifiers: --accent (for incorporation and current milestones) */

.section--timeline-graph {
  padding-block: var(--space-20);
}

.timeline-graph {
  max-width: 1080px;
  margin-inline: auto;
}

.timeline-graph__svg {
  width: 100%;
  height: auto;
  color: var(--text-primary);
  display: block;
  margin-block-end: var(--space-12);
}

.timeline-graph__milestones {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  padding-block-start: var(--space-8);
  border-block-start: 1px solid var(--border-hairline);
}

@media (min-width: 720px) {
  .timeline-graph__milestones {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
}

@media (min-width: 1024px) {
  .timeline-graph__milestones {
    grid-template-columns: repeat(3, 1fr);
  }
}

.timeline-graph__milestone {
  padding-block-start: var(--space-4);
  border-block-start: 2px solid var(--color-ink);
}

.timeline-graph__milestone--accent {
  border-block-start-color: var(--color-accent);
}

.timeline-graph__year {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-block-end: var(--space-3);
  font-variant-numeric: tabular-nums;
}

.timeline-graph__milestone--accent .timeline-graph__year {
  color: var(--color-accent);
}

.timeline-graph__heading {
  font-family: var(--font-serif);
  font-size: var(--fs-20);
  line-height: 1.25;
  color: var(--text-primary);
  margin-block-end: var(--space-3);
  font-weight: var(--fw-regular);
  max-width: 32ch;
}

.timeline-graph__body {
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ============================================================================
   PARTNERS PAGE — operator recruitment
   Reuses about-hero, mission-block, principles-list (from /about/).
   Introduces: exchange-grid, benefits-stack, requirements-grid, application-cta.
   ============================================================================ */

.page--partners .section--partners-model, .page--partners .section--partners-requirements, .page--partners .section--principles, .page--partners .section--about-services {
  background: var(--bg-section-alt);
}

.page--partners .section--mission, .page--partners .section--partners-benefits, .page--partners .section--partners-process, .page--partners .section--infrastructure, .page--partners .section--faq {
  background: var(--bg-page);
}

.page--partners .section--application-cta {
  background: var(--color-ink);
}

/* --- Exchange Grid (NEW — two-column "we bring / you bring") ---
   Naming: .exchange-grid / .exchange-column / __header / __eyebrow / __heading
           .exchange-list / --operator (modifier on operator side) / __note
   Reusable on: any page comparing two sides of a relationship — /careers/, /vs/,
   future B2B2B pages. */

.exchange-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 960px) {
  .exchange-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

.exchange-column {
  padding: var(--space-8);
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  transition: border-color var(--motion-slow) var(--ease-out);
}

.exchange-column--operator {
  border-color: var(--color-accent);
  background: var(--bg-page);
}

.exchange-column__header {
  padding-block-end: var(--space-5);
  margin-block-end: var(--space-5);
  border-block-end: 1px solid var(--border-hairline);
}

.exchange-column__eyebrow {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-block-end: var(--space-3);
}

.exchange-column--operator .exchange-column__eyebrow {
  color: var(--color-accent);
}

.exchange-column__heading {
  font-family: var(--font-serif);
  font-size: var(--fs-24);
  line-height: 1.2;
  color: var(--text-primary);
  font-weight: var(--fw-regular);
}

.exchange-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.exchange-list li {
  font-size: var(--fs-15);
  color: var(--text-body);
  padding-inline-start: var(--space-5);
  position: relative;
  line-height: 1.5;
  padding-block: var(--space-2);
  border-block-end: 1px solid var(--border-hairline);
}

.exchange-list li:last-child {
  border-block-end: none;
}

.exchange-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(var(--space-2) + 0.55em);
  width: 10px;
  height: 1.5px;
  background: var(--color-accent);
}

.exchange-grid__note {
  margin-block-start: var(--space-8);
  padding: var(--space-5) var(--space-6);
  background: var(--bg-page);
  border-inline-start: 3px solid var(--color-accent);
  font-size: var(--fs-15);
  line-height: 1.6;
  color: var(--text-body);
  max-width: 76ch;
}

/* --- Benefits Stack (NEW — large numbered horizontal benefit blocks) ---
   Naming: .benefits-stack / .benefit / .benefit__index / __number / __category /
           .benefit__body / __heading / __lede / __detail
   Reusable on: /careers/, /partners/benefits/, /trust/, /vs/ pages where you need
   a stack of weighty value props rather than a card grid. */

.benefits-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.benefit {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  padding-block: var(--space-8);
  border-block-end: 1px solid var(--border-hairline);
}

.benefit:first-child {
  border-block-start: 1px solid var(--border-hairline);
}

@media (min-width: 720px) {
  .benefit {
    grid-template-columns: 200px 1fr;
    gap: var(--space-10);
    padding-block: var(--space-10);
  }
}

@media (min-width: 1024px) {
  .benefit {
    grid-template-columns: 240px 1fr;
    gap: var(--space-16);
  }
}

.benefit__index {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.benefit__number {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  line-height: 1;
  color: var(--color-accent);
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
}

.benefit__category {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.benefit__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 64ch;
}

.benefit__heading {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.2;
  color: var(--text-primary);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-tight);
}

.benefit__lede {
  font-size: var(--fs-17);
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
}

.benefit__detail {
  font-size: var(--fs-15);
  line-height: 1.65;
  color: var(--text-secondary);
  font-style: italic;
  margin: 0;
}

/* --- Requirements Grid (NEW — three-column with semantic modifiers) ---
   Naming: .requirements-grid / .requirements-column / __heading /
           .requirements-list / __item / __label / __detail
           Modifiers: --required, --disqualifying (semantic accent colors)
   Reusable on: /partners/requirements/, /trust/, /careers/, /vs/ pages. */

.requirements-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 960px) {
  .requirements-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

.requirements-column {
  display: flex;
  flex-direction: column;
}

.requirements-column__heading {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding-block-end: var(--space-4);
  margin-block-end: var(--space-6);
  border-block-end: 2px solid var(--color-ink);
}

.requirements-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.requirements-list__item {
  padding-inline-start: var(--space-5);
  border-inline-start: 2px solid var(--border-hairline);
}

.requirements-list__item--required {
  border-inline-start-color: var(--color-accent);
}

.requirements-list__item--disqualifying {
  border-inline-start-color: var(--text-secondary);
  opacity: 0.85;
}

.requirements-list__label {
  font-family: var(--font-serif);
  font-size: var(--fs-16);
  line-height: 1.3;
  color: var(--text-primary);
  font-weight: var(--fw-regular);
  margin-block-end: var(--space-2);
}

.requirements-list__detail {
  font-size: var(--fs-14);
  line-height: 1.55;
  color: var(--text-secondary);
}

/* --- Application CTA Strip (NEW — high-contrast inverted CTA panel) ---
   Naming: .application-cta / __copy / __eyebrow / __heading / __lede /
           __action / __meta
   Reusable on: /partners/apply/, /careers/apply/, /contact/ specialized variants. */

.section--application-cta {
  padding-block: var(--space-16);
  color: var(--color-ink-inverted);
}

@media (min-width: 960px) {
  .section--application-cta {
    padding-block: var(--space-20);
  }
}

.application-cta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
  max-width: 1080px;
  margin-inline: auto;
}

@media (min-width: 960px) {
  .application-cta {
    grid-template-columns: 1.4fr 1fr;
    gap: var(--space-12);
  }
}

.application-cta__eyebrow {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-block-end: var(--space-4);
}

.application-cta__heading {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.15;
  color: var(--color-ink-inverted);
  margin-block-end: var(--space-5);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-tight);
  max-width: 22ch;
}

.application-cta__lede {
  font-size: var(--fs-17);
  line-height: 1.6;
  color: var(--color-ink-inverted);
  opacity: 0.8;
  max-width: 56ch;
}

.application-cta__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

@media (min-width: 960px) {
  .application-cta__action {
    align-items: flex-end;
    text-align: end;
  }
}

.application-cta__meta {
  font-size: var(--fs-13);
  color: var(--color-ink-inverted);
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   VS COMPARISON PAGES — page-scoped backgrounds only
   Components live in 03-components.css
   ============================================================================ */

.page--vs .section--vs-status, .page--vs .section--vs-comparison, .page--vs .section--vs-migration, .page--vs .section--vs-related {
  background: var(--bg-section-alt);
}

.page--vs .section--tldr, .page--vs .section--ai-summary, .page--vs .section--vs-verdict, .page--vs .section--faq {
  background: var(--bg-page);
}

/* ============================================================================
   VS ROLES PAGE — page-scoped layout only
   All vs-* components live in 03-components.css; this is just page-level rules.
   ============================================================================ */

.page--vs-roles .section--vs-definitions, .page--vs-roles .section--vs-comparison, .page--vs-roles .section--vs-credentials, .page--vs-roles .section--vs-related {
  background: var(--bg-section-alt);
}

.page--vs-roles .section--tldr, .page--vs-roles .section--ai-summary, .page--vs-roles .section--vs-together, .page--vs-roles .section--vs-verdict, .page--vs-roles .section--vs-techbrot-fit, .page--vs-roles .section--faq {
  background: var(--bg-page);
}

/* --- vs-verdict additions used on this page ---
   Naming: .vs-verdict__intro (new utility inside existing component)
   The "intro paragraph" inside a verdict column. */

.vs-verdict__intro {
  font-size: var(--fs-15);
  line-height: 1.6;
  color: var(--text-body);
  margin-block-end: var(--space-5);
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--border-hairline);
}

/* --- vs-table definitional variant ---
   Removes winner accents — neither role "wins" on a definitional comparison.
   Naming: .vs-table--definitional (modifier on .vs-table)
   Reusable on: any future definitional /vs/ page like
   in-house vs outsourced, monthly vs hourly billing, etc. */

.vs-table--definitional .vs-table__row[data-winner="us"]:not(.vs-table__row--head) .vs-table__cell--us, .vs-table--definitional .vs-table__row[data-winner="them"]:not(.vs-table__row--head) .vs-table__cell--them {
  border-inline-start: none;
  background: transparent;
  font-weight: var(--fw-regular);
  color: var(--text-body);
}

.vs-table--definitional .vs-table__row--head .vs-table__cell--us .vs-table__brand {
  color: var(--text-primary);
}

.vs-table--definitional .vs-table__legend {
  font-style: italic;
}

/* ============================================================================
   VS HUB PAGE — page-scoped layout + one new component (comparison-card)
   Components: comparison-card, editorial-break
   ============================================================================ */

.page--vs-hub .section--bookkeeping-services, .page--vs-hub .section--vs-howto, .page--vs-hub .section--faq {
  background: var(--bg-section-alt);
}

.page--vs-hub .section--tldr, .page--vs-hub .section--ai-summary, .page--vs-hub .section--vs-framework {
  background: var(--bg-page);
}

/* --- Comparison Card (NEW) ---
   Naming: .comparison-card-grid / .comparison-card / __header / __brands /
           __brand-mark / __brand-mark--us / __brand-divider / __status /
           __heading / __lede / __meta / __cta / __placeholder
           Modifiers: --published, --coming-soon
   Reusable on: hub pages with multiple comparison entries. Will graduate to
   03-components.css when a second hub uses it. */

.comparison-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 720px) {
  .comparison-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .comparison-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.comparison-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-7);
  transition: border-color var(--motion-slow) var(--ease-out), box-shadow var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}

.comparison-card--published:hover {
  border-color: var(--text-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.comparison-card--coming-soon {
  opacity: 0.65;
  background: var(--bg-page);
}

.comparison-card--coming-soon:hover {
  opacity: 0.85;
}

.comparison-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block-end: var(--space-4);
  margin-block-end: var(--space-4);
  border-block-end: 1px solid var(--border-hairline);
  flex-wrap: wrap;
}

.comparison-card__brands {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.comparison-card__brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  background: var(--color-paper-deep);
  color: var(--text-primary);
  border-radius: 50px;
  letter-spacing: 0;
}

.comparison-card__brand-mark--us {
  background: var(--color-accent);
  color: var(--color-ink-inverted);
}

.comparison-card__brand-divider {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-12);
  color: var(--text-eyebrow);
}

.comparison-card__status {
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  color: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.comparison-card--published .comparison-card__status {
  color: var(--color-accent);
}

.comparison-card__heading {
  font-family: var(--font-serif);
  font-size: var(--fs-22);
  line-height: 1.2;
  color: var(--text-primary);
  margin-block-end: var(--space-3);
  font-weight: var(--fw-regular);
}

.comparison-card__heading a {
  color: var(--text-primary);
  transition: color var(--motion-base) var(--ease-out);
}

.comparison-card__heading a:hover {
  color: var(--color-accent);
}

.comparison-card__lede {
  font-size: var(--fs-14);
  line-height: 1.55;
  color: var(--text-secondary);
  margin-block-end: var(--space-5);
}

.comparison-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-end: auto;
  padding-block: var(--space-4);
  border-block-start: 1px solid var(--border-hairline);
  border-block-end: 1px solid var(--border-hairline);
}

.comparison-card__meta > div {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: var(--space-3);
  font-size: var(--fs-12);
  line-height: 1.45;
}

.comparison-card__meta dt {
  color: var(--text-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-size: var(--fs-11);
}

.comparison-card__meta dd {
  color: var(--text-primary);
}

.comparison-card__cta {
  display: inline-flex;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  margin-block-start: var(--space-5);
  transition: color var(--motion-base) var(--ease-out);
}

.comparison-card__cta:hover {
  color: var(--color-accent);
}

.comparison-card__placeholder {
  margin-block-start: var(--space-5);
  font-size: var(--fs-13);
  font-style: italic;
  color: var(--text-secondary);
}

/* ============================================================================
   PAYROLL MANAGEMENT PAGE
   Reuses: service-hero-split, cadence, deliverables-grid, pricing-tier--recurring,
           signal-grid, why-grid, operator-block, related-grid, faq
   No new components — fully reuses existing system.
   ============================================================================ */

.page--payroll-management .section--engagement-cadence, .page--payroll-management .section--cleanup-signals, .page--payroll-management .section--cleanup-pricing, .page--payroll-management .section--cleanup-operator, .page--payroll-management .section--cleanup-related {
  background: var(--bg-section-alt);
}

.page--payroll-management .section--tldr, .page--payroll-management .section--ai-summary, .page--payroll-management .section--deliverables, .page--payroll-management .section--process, .page--payroll-management .section--payroll-software, .page--payroll-management .section--payroll-integration, .page--payroll-management .section--faq {
  background: var(--bg-page);
}

/* ============================================================================
   QUICKBOOKS SETUP PAGE — page-scoped backgrounds only
   Zero new components. Fully reuses existing system.
   ============================================================================ */

.page--qb-setup .section--cleanup-signals, .page--qb-setup .section--engagement-cadence, .page--qb-setup .section--cleanup-pricing, .page--qb-setup .section--cleanup-operator, .page--qb-setup .section--cleanup-related {
  background: var(--bg-section-alt);
}

.page--qb-setup .section--tldr, .page--qb-setup .section--ai-summary, .page--qb-setup .section--deliverables, .page--qb-setup .section--qb-setup-products, .page--qb-setup .section--qb-setup-advisory, .page--qb-setup .section--faq {
  background: var(--bg-page);
}

/* ============================================================================
   QUICKBOOKS MIGRATION PAGE
   Reuses: service-hero-split, cadence, deliverables-grid, pricing-tier,
           signal-grid, operator-block, mission-block, related-grid, faq
   New component: migration-risk-grid (Desktop sunset urgency framing)
   ============================================================================ */

.page--qb-migration .section--migration-risk, .page--qb-migration .section--cleanup-signals, .page--qb-migration .section--cleanup-pricing, .page--qb-migration .section--cleanup-operator, .page--qb-migration .section--cleanup-related {
  background: var(--bg-section-alt);
}

.page--qb-migration .section--tldr, .page--qb-migration .section--ai-summary, .page--qb-migration .section--engagement-cadence, .page--qb-migration .section--deliverables, .page--qb-migration .section--qb-migration-tool, .page--qb-migration .section--qb-migration-advisory, .page--qb-migration .section--faq {
  background: var(--bg-page);
}

/* --- Migration Risk Grid (NEW — sunset timeline urgency component) ---
   Naming: .migration-risk-grid / .migration-risk-card / __date / __heading / __body / __note
   Modifiers: --past, --current, --future
   Reusable on: any page where a vendor sunset, regulatory deadline, or
   compliance window creates structured urgency. */

.migration-risk-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 720px) {
  .migration-risk-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .migration-risk-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.migration-risk-card {
  padding: var(--space-6);
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  transition: border-color var(--motion-slow) var(--ease-out);
}

.migration-risk-card--past {
  opacity: 0.7;
  border-block-start: 2px solid var(--text-secondary);
}

.migration-risk-card--current {
  border-block-start: 2px solid var(--color-accent);
  box-shadow: var(--shadow-sm);
}

.migration-risk-card--future {
  border-block-start: 2px solid var(--text-eyebrow);
}

.migration-risk-card__date {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-eyebrow);
  margin-block-end: var(--space-3);
  font-variant-numeric: tabular-nums;
}

.migration-risk-card--current .migration-risk-card__date {
  color: var(--color-accent);
}

.migration-risk-card__heading {
  font-family: var(--font-serif);
  font-size: var(--fs-17);
  line-height: 1.25;
  color: var(--text-primary);
  margin-block-end: var(--space-3);
  font-weight: var(--fw-regular);
}

.migration-risk-card__body {
  font-size: var(--fs-13);
  line-height: 1.55;
  color: var(--text-secondary);
}

.migration-risk-grid__note {
  margin-block-start: var(--space-8);
  padding: var(--space-5) var(--space-6);
  background: var(--bg-page);
  border-inline-start: 3px solid var(--color-accent);
  font-size: var(--fs-14);
  font-style: italic;
  line-height: 1.6;
  color: var(--text-body);
  max-width: 76ch;
}

/* ============================================================================
   FRACTIONAL CFO PAGE
   Reuses: service-hero (modified --authority variant), tldr, ai-summary,
           signal-grid, cadence, pricing-tier--recurring, why-grid,
           process, operator-block, mission-block, related-grid, faq, editorial-break
   New components: service-hero--authority (modifier), authority-strip,
                   engagement-areas (six-card grid + exclusions panel)
   ============================================================================ */

.page--fractional-cfo .section--cleanup-signals, .page--fractional-cfo .section--engagement-areas, .page--fractional-cfo .section--cleanup-pricing, .page--fractional-cfo .section--cfo-fit, .page--fractional-cfo .section--cleanup-operator, .page--fractional-cfo .section--cleanup-related {
  background: var(--bg-section-alt);
}

.page--fractional-cfo .section--tldr, .page--fractional-cfo .section--ai-summary, .page--fractional-cfo .section--engagement-cadence, .page--fractional-cfo .section--cfo-positioning, .page--fractional-cfo .section--process, .page--fractional-cfo .section--cfo-stack, .page--fractional-cfo .section--faq {
  background: var(--bg-page);
}

/* --- service-hero --authority (modifier — text-only senior buyer hero) ---
   Removes the split-image layout. Adds the authority-strip parameter list.
   Reusable on: any high-ticket / senior-buyer service page where photographic
   imagery would undermine the offer. */

.service-hero--authority {
  max-width: 920px;
}

.service-hero--authority .service-hero__heading {
  max-width: 22ch;
}

.service-hero--authority .service-hero__subheading {
  max-width: 68ch;
}

/* --- Authority Strip (NEW — parameter list for high-ticket service heroes) ---
   Naming: .service-hero__authority-strip / .authority-strip__label / __value
   Reuses dl/li structure of about-hero__meta but visually richer.
   Reusable on: any senior-buyer service or product page (CFO, advisory, M&A,
   enterprise consulting). */

.service-hero__authority-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-block-start: var(--space-10);
  padding-block-start: var(--space-8);
  border-block-start: 1px solid var(--border-hairline);
}

@media (min-width: 720px) {
  .service-hero__authority-strip {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
  }
}

.service-hero__authority-strip li {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.authority-strip__label {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.authority-strip__value {
  font-size: var(--fs-15);
  color: var(--text-primary);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

/* --- Engagement Areas (NEW — six-card scope grid + exclusions panel) ---
   Naming: .engagement-areas / .engagement-area / __header / __number / __heading /
           __lede / __list / .engagement-areas__exclusions / __exclusions-heading / __exclusions-body
   Reusable on: any service page with multi-area scope (advisory retainer,
   consulting engagement, complex service offering). */

.engagement-areas {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 720px) {
  .engagement-areas {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .engagement-areas {
    grid-template-columns: repeat(3, 1fr);
  }
}

.engagement-area {
  display: flex;
  flex-direction: column;
  padding: var(--space-7);
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  transition: border-color var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}

.engagement-area:hover {
  border-color: var(--text-primary);
  transform: translateY(-2px);
}

.engagement-area__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-block-end: var(--space-4);
  margin-block-end: var(--space-4);
  border-block-end: 1px solid var(--border-hairline);
}

.engagement-area__number {
  font-family: var(--font-serif);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--color-accent);
  letter-spacing: var(--ls-wide);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.engagement-area__heading {
  font-family: var(--font-serif);
  font-size: var(--fs-20);
  line-height: 1.2;
  color: var(--text-primary);
  font-weight: var(--fw-regular);
}

.engagement-area__lede {
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--text-body);
  margin-block-end: var(--space-4);
}

.engagement-area__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: auto;
}

.engagement-area__list li {
  font-size: var(--fs-13);
  color: var(--text-secondary);
  padding-inline-start: var(--space-4);
  position: relative;
  line-height: 1.5;
}

.engagement-area__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 1.5px;
  background: var(--color-accent);
}

.engagement-areas__exclusions {
  margin-block-start: var(--space-10);
  padding: var(--space-7) var(--space-8);
  background: var(--bg-page);
  border-inline-start: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  max-width: 76ch;
}

.engagement-areas__exclusions-heading {
  font-family: var(--font-serif);
  font-size: var(--fs-18);
  line-height: 1.25;
  color: var(--text-primary);
  margin-block-end: var(--space-3);
  font-weight: var(--fw-regular);
}

.engagement-areas__exclusions-body {
  font-size: var(--fs-15);
  line-height: 1.65;
  color: var(--text-body);
}

.engagement-areas__exclusions-body strong {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

/* ============================================================================
   SALES TAX COMPLIANCE PAGE
   Reuses: service-hero-split, tldr, ai-summary, signal-grid, cadence,
           deliverables-grid, pricing-tier--recurring, mission-block,
           operator-block, related-grid, faq
   New component: taxability-grid (business-type × compliance treatment matrix)
   ============================================================================ */

.page--sales-tax .section--cleanup-signals, .page--sales-tax .section--taxability, .page--sales-tax .section--cleanup-pricing, .page--sales-tax .section--cleanup-operator, .page--sales-tax .section--cleanup-related {
  background: var(--bg-section-alt);
}

.page--sales-tax .section--tldr, .page--sales-tax .section--ai-summary, .page--sales-tax .section--engagement-cadence, .page--sales-tax .section--deliverables, .page--sales-tax .section--sales-tax-wayfair, .page--sales-tax .section--sales-tax-integration, .page--sales-tax .section--faq {
  background: var(--bg-page);
}

/* --- Taxability Grid (NEW — business-type × compliance treatment matrix) ---
   Naming: .taxability-grid / .taxability-card / __header / __category / __heading /
           __body / __note
   Reusable on: future compliance pages (1099 prep by business type, BOI reporting
   by entity type, state-specific compliance pages, industry-specific service pages
   that need scope-by-buyer-type matrices). Promote to 03-components.css on 2nd use. */

.taxability-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 720px) {
  .taxability-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .taxability-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.taxability-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-7);
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  transition: border-color var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}

.taxability-card:hover {
  border-color: var(--text-primary);
  transform: translateY(-2px);
}

.taxability-card__header {
  padding-block-end: var(--space-4);
  margin-block-end: var(--space-5);
  border-block-end: 1px solid var(--border-hairline);
}

.taxability-card__category {
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-block-end: var(--space-2);
}

.taxability-card__heading {
  font-family: var(--font-serif);
  font-size: var(--fs-20);
  line-height: 1.2;
  color: var(--text-primary);
  font-weight: var(--fw-regular);
}

.taxability-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.taxability-card__body p {
  font-size: var(--fs-13);
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
}

.taxability-card__body strong {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

.taxability-grid__note {
  margin-block-start: var(--space-8);
  padding: var(--space-5) var(--space-6);
  background: var(--bg-page);
  border-inline-start: 3px solid var(--color-accent);
  font-size: var(--fs-14);
  font-style: italic;
  line-height: 1.6;
  color: var(--text-body);
  max-width: 80ch;
}

/* ============================================================================
   CONTACT PAGE
   Reuses: breadcrumb, btn, container, section__header
   New components: contact-hero, contact-layout, contact-trust, contact-methods,
                   contact-expectations, contact-signals, contact-address,
                   intake-form (full form system), contact-alt-grid
   ============================================================================ */

.page--contact .section--contact-main {
  background: var(--bg-page);
  padding-block: var(--space-12) var(--space-20);
}

@media (min-width: 960px) {
  .page--contact .section--contact-main {
    padding-block: var(--space-16) var(--space-24);
  }
}

.page--contact .section--contact-alt {
  background: var(--bg-section-alt);
  padding-block: var(--space-16);
}

/* --- Contact Hero (above the form) ---
   Naming: .contact-hero / __eyebrow / __heading / __lede */

.contact-hero {
  max-width: 760px;
  margin-block-end: var(--space-12);
}

@media (min-width: 960px) {
  .contact-hero {
    margin-block-end: var(--space-16);
  }
}

.contact-hero__eyebrow {
  display: inline-flex;
  padding: var(--space-1) var(--space-3);
  margin-block-end: var(--space-6);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--color-paper-warm);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
}

.contact-hero__heading {
  font-size: clamp(2.25rem, 5.5vw, 4rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  margin-block-end: var(--space-6);
  font-weight: var(--fw-regular);
  max-width: 18ch;
}

.contact-hero__lede {
  font-size: var(--fs-18);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 60ch;
}

@media (min-width: 720px) {
  .contact-hero__lede {
    font-size: var(--fs-19);
  }
}

/* --- Address --- */

.contact-address {
  font-size: var(--fs-13);
  line-height: 1.6;
  color: var(--text-secondary);
  font-style: normal;
}

/* INTAKE FORM system + .btn--submit PROMOTED to 03-components.css (Session 5 patch) */

/* --- Contact Alt Paths (Calendar / Phone / Partner / Press) --- */

.contact-alt-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  max-width: 1080px;
  margin-inline: auto;
}

@media (min-width: 720px) {
  .contact-alt-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .contact-alt-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.contact-alt-card {
  display: flex;
}

.contact-alt-card article {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--space-6);
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  transition: border-color var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}

.contact-alt-card article:hover {
  border-color: var(--text-primary);
  transform: translateY(-2px);
}

.contact-alt-card__heading {
  font-family: var(--font-serif);
  font-size: var(--fs-18);
  line-height: 1.25;
  color: var(--text-primary);
  margin-block-end: var(--space-3);
  font-weight: var(--fw-regular);
}

.contact-alt-card__body {
  font-size: var(--fs-14);
  line-height: 1.55;
  color: var(--text-secondary);
  margin-block-end: var(--space-5);
  flex: 1;
}

.contact-alt-card__cta {
  display: inline-flex;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border-hairline);
  transition: color var(--motion-base) var(--ease-out);
  margin-block-start: auto;
}

.contact-alt-card__cta:hover {
  color: var(--color-accent);
}

/* ============================================================================
   QUICKBOOKS PROADVISOR TEAM PAGE
   Reuses: service-hero-split, tldr, ai-summary, mission-block, why-grid,
           hub-service-grid--six, faq, related-grid, final-cta, expert-review,
           editorial-break
   New components: certification-grid + certification-card (4-cert credential display),
                   vs-comparison-list + vs-comparison-item (alternatives section),
                   proadvisor-protection (ordered list with serif numerals),
                   final-cta__disclaimer
   ============================================================================ */

.page--proadvisor-team .section--proadvisor-certifications, .page--proadvisor-team .section--proadvisor-services, .page--proadvisor-team .section--proadvisor-review, .page--proadvisor-team .section--cleanup-related {
  background: var(--bg-section-alt);
}

.page--proadvisor-team .section--tldr, .page--proadvisor-team .section--ai-summary, .page--proadvisor-team .section--proadvisor-definition, .page--proadvisor-team .section--proadvisor-operation, .page--proadvisor-team .section--proadvisor-vs, .page--proadvisor-team .section--proadvisor-why, .page--proadvisor-team .section--faq {
  background: var(--bg-page);
}

/* --- Certification Grid (NEW — 4-cert credential display) ---
   Naming: .certification-grid / .certification-card / __header / __platform /
           __tier / __heading / __body / __cta / __note
   Reusable on: /about/team/, /trust/credentials/, future state pages with
   credential displays, partner detail pages. Promote to 03-components.css
   on 2nd use. */

.certification-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 720px) {
  .certification-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1280px) {
  .certification-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

.certification-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  position: relative;
  transition: border-color var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}

.certification-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--color-accent);
}

.certification-card:hover {
  border-color: var(--text-primary);
  transform: translateY(-2px);
}

.certification-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block-end: var(--space-5);
  margin-block-end: var(--space-5);
  border-block-end: 1px solid var(--border-hairline);
}

.certification-card__platform {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.certification-card__tier {
  font-size: var(--fs-11);
  color: var(--text-secondary);
  font-style: italic;
}

.certification-card__heading {
  font-family: var(--font-serif);
  font-size: var(--fs-22);
  line-height: 1.2;
  color: var(--text-primary);
  font-weight: var(--fw-regular);
  margin-block-start: var(--space-1);
}

.certification-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-end: var(--space-6);
  flex: 1;
}

.certification-card__body p {
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
}

.certification-card__body strong {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

.certification-card__body a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-hairline);
  transition: text-decoration-color var(--motion-base) var(--ease-out);
}

.certification-card__body a:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

.certification-card__cta {
  margin-block-start: auto;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border-hairline);
  transition: color var(--motion-base) var(--ease-out);
}

.certification-card__cta:hover {
  color: var(--color-accent);
}

.certification-grid__note {
  margin-block-start: var(--space-8);
  padding: var(--space-5) var(--space-6);
  background: var(--bg-page);
  border-inline-start: 3px solid var(--color-accent);
  font-size: var(--fs-14);
  font-style: italic;
  line-height: 1.6;
  color: var(--text-body);
  max-width: 80ch;
}

.certification-grid__note a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-style: normal;
}

.certification-grid__note a:hover {
  color: var(--color-accent);
}

/* --- VS Comparison List (NEW — ProAdvisor vs alternatives section) ---
   Naming: .vs-comparison-list / .vs-comparison-item / __header / __heading /
           __verdict / __body
   Reusable on: any page comparing one entity against multiple alternatives.
   Future use: /vs/ hub for at-a-glance comparison summaries, /about/methodology/
   for "how we work vs how others work". Promote to 03-components.css on 2nd use. */

.vs-comparison-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.vs-comparison-item {
  padding: var(--space-7);
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  transition: border-color var(--motion-slow) var(--ease-out);
}

.vs-comparison-item:hover {
  border-color: var(--text-primary);
}

.vs-comparison-item__header {
  padding-block-end: var(--space-4);
  margin-block-end: var(--space-4);
  border-block-end: 1px solid var(--border-hairline);
}

.vs-comparison-item__heading {
  font-family: var(--font-serif);
  font-size: var(--fs-20);
  line-height: 1.25;
  color: var(--text-primary);
  font-weight: var(--fw-regular);
  margin-block-end: var(--space-2);
}

.vs-comparison-item__verdict {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--color-accent);
  letter-spacing: var(--ls-base);
  font-style: italic;
}

.vs-comparison-item__body p {
  font-size: var(--fs-15);
  line-height: 1.65;
  color: var(--text-body);
}

.vs-comparison-item__body strong {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

.vs-comparison-item__body a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-hairline);
}

.vs-comparison-item__body a:hover {
  color: var(--color-accent);
}

/* --- ProAdvisor Protection List (NEW — editorial ordered list) ---
   Naming: .proadvisor-protection
   Page-scoped editorial component. Serif numbers, hanging indent.
   Reusable pattern on future editorial pages — but stays page-scoped for now. */

.proadvisor-protection {
  list-style: none;
  counter-reset: protection;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-block: var(--space-6);
  padding: 0;
}

.proadvisor-protection li {
  counter-increment: protection;
  position: relative;
  padding-inline-start: var(--space-12);
  font-size: var(--fs-15);
  line-height: 1.65;
  color: var(--text-body);
}

.proadvisor-protection li::before {
  content: counter(protection);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-32);
  font-weight: var(--fw-regular);
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: var(--ls-tight);
}

.proadvisor-protection li strong {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

/* ============================================================================
   SPEAK TO A QUICKBOOKS EXPERT PAGE
   Reuses: breadcrumb, tldr, ai-summary, mission-block, cadence,
           hub-service-grid--six, faq, related-grid, final-cta, expert-review,
           contact-trust, contact-methods, contact-expectations, contact-signals,
           contact-layout, intake-form (full system), editorial-break
   New components:
     - speak-hero (phone + form dual-CTA hero layout)
     - speak-form (form section header pattern)
     - urgency-tier-grid + urgency-tier (3-tier urgency selector)
   ============================================================================ */

.page--speak-expert .section--urgency-tiers, .page--speak-expert .section--call-topics, .page--speak-expert .section--speak-review, .page--speak-expert .section--cleanup-related {
  background: var(--bg-section-alt);
}

.page--speak-expert .section--tldr, .page--speak-expert .section--ai-summary, .page--speak-expert .section--speak-form, .page--speak-expert .section--call-process, .page--speak-expert .section--credential-strip, .page--speak-expert .section--faq {
  background: var(--bg-page);
}

/* --- Speak Hero (phone + form dual-CTA) ---
   Naming: .speak-hero / __copy / __eyebrow / __heading / __subheading /
           __dual / __channel / __channel-label / __channel-value / __channel-code /
           __channel-number / __channel-detail / __channel-promise / __channel-cta /
           __divider / __divider-line / __divider-text / __assurance / __assurance-label /
           __assurance-body
   Variant modifiers: --phone, --form
   First use here. Reusable on future high-conversion landing pages where dual-channel
   (phone vs form) makes sense — emergency support pages, partner application, etc.
   Promote to 03-components.css on 2nd use. */

.section--speak-hero {
  padding-block: var(--space-16) var(--space-20);
}

@media (min-width: 960px) {
  .section--speak-hero {
    padding-block: var(--space-20) var(--space-24);
  }
}

.speak-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  align-items: start;
  margin-block-end: var(--space-10);
}

@media (min-width: 1024px) {
  .speak-hero {
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-16);
    margin-block-end: var(--space-12);
  }
}

.speak-hero__copy {
  display: flex;
  flex-direction: column;
}

.speak-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  margin-block-end: var(--space-6);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--color-paper-warm);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
  align-self: flex-start;
}

.speak-hero__heading {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  margin-block-end: var(--space-6);
  font-weight: var(--fw-regular);
  max-width: 20ch;
}

.speak-hero__subheading {
  font-size: var(--fs-18);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 56ch;
}

@media (min-width: 720px) {
  .speak-hero__subheading {
    font-size: var(--fs-19);
  }
}

.speak-hero__subheading strong {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

/* Dual-CTA card */

.speak-hero__dual {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
}

@media (min-width: 1024px) {
  .speak-hero__dual {
    padding: var(--space-10);
    position: sticky;
    top: calc(var(--header-height) + var(--space-6));
  }
}

.speak-hero__channel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.speak-hero__channel-label {
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  color: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.speak-hero__channel-value {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-serif);
  color: var(--text-primary);
  letter-spacing: var(--ls-tight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color var(--motion-base) var(--ease-out);
  margin-block: var(--space-1);
}

.speak-hero__channel-value:hover {
  color: var(--color-accent);
}

.speak-hero__channel-code {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: var(--fw-regular);
  color: var(--text-secondary);
}

.speak-hero__channel-number {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--fw-regular);
}

.speak-hero__channel-detail {
  font-size: var(--fs-13);
  color: var(--text-secondary);
  line-height: 1.5;
}

.speak-hero__channel-promise {
  font-size: var(--fs-12);
  font-style: italic;
  color: var(--text-body);
  line-height: 1.55;
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--border-hairline);
}

.speak-hero__channel-cta {
  align-self: flex-start;
  width: 100%;
  justify-content: center;
  margin-block: var(--space-2);
}

/* "or" divider between phone and form */

.speak-hero__divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-block: var(--space-3);
}

.speak-hero__divider-line {
  flex: 1;
  height: 1px;
  background: var(--border-hairline);
}

.speak-hero__divider-text {
  font-size: var(--fs-11);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

/* Independence assurance band */

.speak-hero__assurance {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  padding-block: var(--space-5);
  border-block-start: 1px solid var(--border-hairline);
  border-block-end: 1px solid var(--border-hairline);
}

@media (min-width: 720px) {
  .speak-hero__assurance {
    grid-template-columns: 160px 1fr;
    gap: var(--space-6);
    align-items: center;
  }
}

.speak-hero__assurance-label {
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  color: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.speak-hero__assurance-body {
  font-size: var(--fs-13);
  color: var(--text-secondary);
  line-height: 1.55;
}

/* --- Speak Form Section Header (form intro outside the form itself) ---
   Naming: .speak-form__header / __eyebrow / __heading / __lede
   Reusable. Stay page-scoped for now. */

.speak-form__header {
  max-width: 760px;
  margin-block-end: var(--space-12);
}

.speak-form__eyebrow {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-block-end: var(--space-3);
}

.speak-form__heading {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  font-weight: var(--fw-regular);
  margin-block-end: var(--space-4);
}

.speak-form__lede {
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 64ch;
}

/* ============================================================================
   QUICKBOOKS HELP PAGE
   Reuses: service-hero-split, tldr, ai-summary, mission-block, signal-grid,
           urgency-tier-grid, hub-service-grid--six, pricing-tiers (recurring),
           faq, related-grid, final-cta + final-cta__disclaimer, expert-review,
           editorial-break
   New components:
     - diagnostic-grid + diagnostic-card (8-scenario routing matrix with
       symptom → diagnosis → path → fee pattern)
   ============================================================================ */

.page--quickbooks-help .section--help-diagnostic, .page--quickbooks-help .section--help-common, .page--quickbooks-help .section--help-services, .page--quickbooks-help .section--help-review, .page--quickbooks-help .section--cleanup-related {
  background: var(--bg-section-alt);
}

.page--quickbooks-help .section--tldr, .page--quickbooks-help .section--ai-summary, .page--quickbooks-help .section--help-urgency, .page--quickbooks-help .section--help-deliverable, .page--quickbooks-help .section--help-credential, .page--quickbooks-help .section--help-pricing, .page--quickbooks-help .section--faq {
  background: var(--bg-page);
}

/* ============================================================================
   ACCOUNTING SERVICES HUB PAGE
   Reuses: service-hero-split, tldr, ai-summary, hub-service-grid--six,
           diagnostic-grid (2nd use — promote to 03 in next patch),
           delivery-modes, faq, expert-review, final-cta + disclaimer,
           editorial-break
   New components:
     - services-track-featured (full-width featured 7th-track tile)
     - pricing-summary-table (premium pricing comparison table)
     - engagement-standards-grid + engagement-standard (universal engagement standards)
   ============================================================================ */

.page--accounting-services .section--services-tracks, .page--accounting-services .section--services-diagnostic, .page--accounting-services .section--services-standards, .page--accounting-services .section--services-review {
  background: var(--bg-section-alt);
}

.page--accounting-services .section--tldr, .page--accounting-services .section--ai-summary, .page--accounting-services .section--services-pricing, .page--accounting-services .section--services-delivery, .page--accounting-services .section--faq {
  background: var(--bg-page);
}

/* --- Services Track Featured (full-width 7th track — Fractional CFO) ---
   Naming: .services-track-featured / __header / __eyebrow / __heading /
           __body / __lede / __meta / __cta
   Reusable on any hub page where one track deserves elevated treatment.
   Promote to 03-components.css on 2nd use. */

.services-track-featured {
  margin-block-start: var(--space-8);
  padding: var(--space-10) var(--space-8);
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-inline-start: 4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  transition: border-color var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}

@media (min-width: 1024px) {
  .services-track-featured {
    padding: var(--space-12) var(--space-12);
    display: grid;
    grid-template-columns: 1.4fr 1fr auto;
    gap: var(--space-10);
    align-items: start;
  }
}

.services-track-featured:hover {
  border-color: var(--text-primary);
  transform: translateY(-2px);
}

.services-track-featured__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.services-track-featured__eyebrow {
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.services-track-featured__heading {
  font-family: var(--font-serif);
  font-size: var(--fs-28);
  line-height: 1.2;
  color: var(--text-primary);
  font-weight: var(--fw-regular);
}

.services-track-featured__heading a {
  color: var(--text-primary);
  transition: color var(--motion-base) var(--ease-out);
}

.services-track-featured__heading a:hover {
  color: var(--color-accent);
}

.services-track-featured__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.services-track-featured__lede {
  font-size: var(--fs-15);
  line-height: 1.6;
  color: var(--text-body);
}

.services-track-featured__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-5);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border-hairline);
}

.services-track-featured__meta div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.services-track-featured__meta dt {
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  color: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.services-track-featured__meta dd {
  font-size: var(--fs-13);
  color: var(--text-primary);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.services-track-featured__cta {
  align-self: flex-start;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--text-primary);
  border-radius: var(--radius-pill);
  transition: background var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out);
}

.services-track-featured__cta:hover {
  background: var(--text-primary);
  color: var(--bg-page);
}

/* --- Pricing Summary Table (NEW — premium pricing comparison table) ---
   Naming: .pricing-summary-table-wrap / .pricing-summary-table /
           __col-service / __col-type / __col-fee / __col-cadence / __col-action /
           __service / __fee / __unit / __action / __featured / __note
   Reusable on /find-an-accountant/ summary, future comparison hub pages.
   Promote to 03-components.css on 2nd use. */

.pricing-summary-table-wrap {
  overflow-x: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  -webkit-overflow-scrolling: touch;
}

.pricing-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-14);
  min-width: 720px;
}

.pricing-summary-table thead {
  background: var(--color-paper-warm);
  border-block-end: 2px solid var(--text-primary);
}

.pricing-summary-table th {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  color: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  padding: var(--space-5) var(--space-5);
  text-align: left;
  white-space: nowrap;
}

.pricing-summary-table__col-fee {
  font-variant-numeric: tabular-nums;
}

.pricing-summary-table__col-action {
  text-align: right !important;
  width: 100px;
}

.pricing-summary-table tbody tr {
  border-block-end: 1px solid var(--border-hairline);
  transition: background var(--motion-base) var(--ease-out);
}

.pricing-summary-table tbody tr:hover {
  background: var(--color-paper-warm);
}

.pricing-summary-table tbody tr:last-child {
  border-block-end: none;
}

.pricing-summary-table td {
  padding: var(--space-5) var(--space-5);
  color: var(--text-body);
  vertical-align: middle;
  line-height: 1.5;
}

.pricing-summary-table__service {
  font-weight: var(--fw-medium);
}

.pricing-summary-table__service a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--motion-base) var(--ease-out);
}

.pricing-summary-table__service a:hover {
  color: var(--color-accent);
}

.pricing-summary-table__fee {
  font-family: var(--font-serif);
  font-size: var(--fs-16);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pricing-summary-table__unit {
  font-size: var(--fs-12);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  margin-inline-start: var(--space-1);
}

.pricing-summary-table__action {
  text-align: right;
}

.pricing-summary-table__action a {
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--motion-base) var(--ease-out);
  white-space: nowrap;
}

.pricing-summary-table__action a:hover {
  color: var(--color-accent);
}

.pricing-summary-table__featured {
  background: var(--color-paper-warm);
}

.pricing-summary-table__featured .pricing-summary-table__service a {
  color: var(--color-accent);
}

.pricing-summary-table__note {
  margin-block-start: var(--space-6);
  font-size: var(--fs-13);
  line-height: 1.6;
  color: var(--text-secondary);
  font-style: italic;
  max-width: 80ch;
}

.pricing-summary-table__note strong {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
  font-style: normal;
}

/* --- Engagement Standards Grid (NEW — universal engagement standards) ---
   Naming: .engagement-standards-grid / .engagement-standard /
           __number / __heading / __body
   Reusable on /trust/, /partners/, /about/methodology/.
   Promote to 03-components.css on 2nd use. */

.engagement-standards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 720px) {
  .engagement-standards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .engagement-standards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.engagement-standard {
  display: flex;
  flex-direction: column;
  padding: var(--space-7);
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  position: relative;
  transition: border-color var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}

.engagement-standard:hover {
  border-color: var(--text-primary);
  transform: translateY(-2px);
}

.engagement-standard__number {
  font-family: var(--font-serif);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--color-accent);
  letter-spacing: var(--ls-tight);
  margin-block-end: var(--space-4);
  font-variant-numeric: tabular-nums;
}

.engagement-standard__heading {
  font-family: var(--font-serif);
  font-size: var(--fs-20);
  line-height: 1.25;
  color: var(--text-primary);
  font-weight: var(--fw-regular);
  margin-block-end: var(--space-3);
}

.engagement-standard__body {
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--text-body);
}

.engagement-standard__body strong {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

/* ============================================================================
   ACCOUNTING SILO HUB PAGE
   Reuses: service-hero-split, tldr, ai-summary, hub-service-grid--six,
           mission-block, delivery-modes, why-grid, scope-grid, faq,
           final-cta + disclaimer, editorial-break. No new components.
   ============================================================================ */

.page--accounting-hub .section--accounting-tracks, .page--accounting-hub .section--accounting-delivery, .page--accounting-hub .section--accounting-scope {
  background: var(--bg-section-alt);
}

.page--accounting-hub .section--tldr, .page--accounting-hub .section--ai-summary, .page--accounting-hub .section--accounting-definition, .page--accounting-hub .section--accounting-why, .page--accounting-hub .section--faq {
  background: var(--bg-page);
}

/* ============================================================================
   TRUST PAGE
   Reuses: service-hero-split, tldr, ai-summary, certification-grid,
           engagement-standards-grid, mission-block, scope-grid, faq,
           expert-review, related-grid, final-cta + disclaimer, editorial-break
   New components: trust-pillar-grid + trust-pillar, trust-facts-list
   ============================================================================ */

.page--trust .section--trust-certifications, .page--trust .section--trust-standards, .page--trust .section--trust-scope, .page--trust .section--trust-review-panel, .page--trust .section--cleanup-related {
  background: var(--bg-section-alt);
}

.page--trust .section--tldr, .page--trust .section--ai-summary, .page--trust .section--trust-pillars, .page--trust .section--trust-security, .page--trust .section--trust-reviews, .page--trust .section--faq {
  background: var(--bg-page);
}

/* --- Trust Pillar Grid (NEW — 4 trust pillars) ---
   Naming: .trust-pillar-grid / .trust-pillar / __header / __number / __heading /
           __body / __verify / __cta
   Reusable on /about/, /partners/, future trust-anchor pages.
   Promote to 03-components.css on 2nd use. */

.trust-pillar-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 720px) {
  .trust-pillar-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

.trust-pillar {
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  position: relative;
  transition: border-color var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}

.trust-pillar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--color-accent);
}

.trust-pillar:hover {
  border-color: var(--text-primary);
  transform: translateY(-2px);
}

.trust-pillar__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-block-end: var(--space-4);
  margin-block-end: var(--space-5);
  border-block-end: 1px solid var(--border-hairline);
}

.trust-pillar__number {
  font-family: var(--font-serif);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--color-accent);
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
}

.trust-pillar__heading {
  font-family: var(--font-serif);
  font-size: var(--fs-26);
  line-height: 1.2;
  color: var(--text-primary);
  font-weight: var(--fw-regular);
}

.trust-pillar__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-block-end: var(--space-6);
  flex: 1;
}

.trust-pillar__body p {
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
}

.trust-pillar__body strong {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

.trust-pillar__body a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-hairline);
  transition: text-decoration-color var(--motion-base) var(--ease-out);
}

.trust-pillar__body a:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

.trust-pillar__verify {
  padding: var(--space-4) var(--space-5);
  background: var(--color-paper-warm);
  border-inline-start: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  font-size: var(--fs-13) !important;
}

.trust-pillar__cta {
  margin-block-start: auto;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border-hairline);
  transition: color var(--motion-base) var(--ease-out);
}

.trust-pillar__cta:hover {
  color: var(--color-accent);
}

/* --- Trust Facts List (within reviews-posture section) ---
   Naming: .trust-facts-list
   Page-scoped editorial list. */

.trust-facts-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block: var(--space-5);
  padding: 0;
}

.trust-facts-list li {
  position: relative;
  padding-inline-start: var(--space-6);
  font-size: var(--fs-15);
  line-height: 1.6;
  color: var(--text-body);
}

.trust-facts-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 1.5px;
  background: var(--color-accent);
}

.trust-facts-list li strong {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

/* ============================================================================
   ABOUT TEAM PAGE  (v2 — 2-card layout, refined UX, reviews + founder note)
   Reuses: service-hero (+ --centered), tldr, mission-block, why-grid, faq,
           related-grid, final-cta + disclaimer
   New components:
     - team-grid (+ --two) + team-card  (photo-ready, name-ready, footer-pinned)
     - review-verified  (Clutch third-party review panel)
     - founder-note  (founder pull-quote / signature block)
   ============================================================================ */

.page--about-team .section--team-people, .page--about-team .section--team-why, .page--about-team .section--cleanup-related {
  background: var(--bg-section-alt);
}

/* Session 6: .section--tldr now carries the global warm-accent bookend, and
   .section--team-structure now uses .section--dark — removed from this
   light-background override. (section--team-founder-note retired.) */

.page--about-team .section--team-reviews, .page--about-team .section--faq {
  background: var(--bg-page);
}

/* Centered hero variant (no split image) */

.service-hero--centered {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

.service-hero--centered .service-hero__actions {
  justify-content: center;
}

.service-hero--centered .service-hero__assurance {
  justify-content: center;
  margin: 0 auto;
}

/* --- Team Grid + Team Card ---
   Photo activation: in the portrait div, replace the <span class="team-card__initials">
   with the commented <img>, then remove the --placeholder modifier class.
   Promote to 03-components.css on 2nd use (e.g. /about/network/, /partners/). */

.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 720px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Two-card variant — centered, constrained so cards don't stretch wide */

.team-grid--two {
  max-width: 760px;
  margin-inline: auto;
}

@media (min-width: 720px) {
  .team-grid--two {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
}

.team-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--motion-slow) var(--ease-out), box-shadow var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}

.team-card:hover {
  border-color: var(--text-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-3px);
}

/* Portrait — 4:5, refined placeholder */

.team-card__portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  background: var(--color-paper-warm);
  overflow: hidden;
}

.team-card__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-card__portrait--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 38%, rgba(132,30,30,0.06) 0%, transparent 60%), linear-gradient(160deg, var(--color-paper-warm) 0%, var(--bg-section-alt) 100%);
  border-block-end: 1px solid var(--border-hairline);
}

.team-card__portrait--placeholder::after {
  content: "";
  position: absolute;
  inset: var(--space-4);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

.team-card__initials {
  font-family: var(--font-serif);
  font-size: clamp(2.75rem, 6vw, 3.75rem);
  font-weight: var(--fw-regular);
  color: var(--color-accent);
  letter-spacing: var(--ls-tight);
  line-height: 1;
}

/* Body — generous, even padding; flex column so footer pins to bottom */

.team-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8);
  flex: 1;
}

@media (min-width: 720px) {
  .team-card__body {
    padding: var(--space-9) var(--space-8);
  }
}

.team-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.team-card__name {
  font-family: var(--font-serif);
  font-size: var(--fs-26);
  line-height: 1.15;
  color: var(--text-primary);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-tight);
}

.team-card__role {
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  color: var(--color-accent);
  letter-spacing: var(--ls-base);
  line-height: 1.45;
}

.team-card__bio {
  font-size: var(--fs-15);
  line-height: 1.7;
  color: var(--text-body);
}

.team-card__bio strong {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

.team-card__bio em {
  font-style: italic;
}

/* Footer — pinned to bottom, holds meta + links with a clean divider */

.team-card__footer {
  margin-block-start: auto;
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.team-card__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.team-card__meta li {
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: baseline;
  gap: var(--space-4);
}

.team-card__meta-label {
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  color: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  line-height: 1.4;
}

.team-card__meta-value {
  font-size: var(--fs-13);
  color: var(--text-primary);
  line-height: 1.5;
}

/* Links row (LinkedIn etc.) */

.team-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.team-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  background: var(--color-paper-warm);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: color var(--motion-base) var(--ease-out), border-color var(--motion-base) var(--ease-out), background var(--motion-base) var(--ease-out);
}

.team-card__link svg {
  flex-shrink: 0;
}

.team-card__link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: var(--bg-card);
}

.team-grid__note {
  margin-block-start: var(--space-8);
  padding: var(--space-5) var(--space-6);
  background: var(--bg-page);
  border-inline-start: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--text-body);
  max-width: 80ch;
  margin-inline: auto;
}

.team-grid__note a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.team-grid__note a:hover {
  color: var(--color-accent);
}

/* --- Review Verified (Clutch third-party panel) ---
   Reusable on /trust/, /reviews/, /about/. Promote on 2nd use. */

.review-verified {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-9) var(--space-8);
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
}

@media (min-width: 880px) {
  .review-verified {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-12);
    padding: var(--space-10) var(--space-12);
  }
}

.review-verified__head {
  flex: 1;
}

.review-verified__eyebrow {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-block-end: var(--space-3);
}

.review-verified__heading {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 3.5vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  font-weight: var(--fw-regular);
  margin-block-end: var(--space-4);
}

.review-verified__lede {
  font-size: var(--fs-15);
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 60ch;
}

.review-verified__lede strong {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

.review-verified__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  flex-shrink: 0;
}

@media (min-width: 880px) {
  .review-verified__panel {
    align-items: center;
    text-align: center;
    padding-inline-start: var(--space-12);
    border-inline-start: 1px solid var(--border-hairline);
  }
}

.review-verified__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

@media (min-width: 880px) {
  .review-verified__stat {
    align-items: center;
  }
}

.review-verified__count {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 7vw, 4rem);
  line-height: 1;
  color: var(--text-primary);
  font-weight: var(--fw-regular);
  font-variant-numeric: tabular-nums;
}

.review-verified__label {
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  letter-spacing: var(--ls-base);
  text-transform: uppercase;
}

.review-verified__cta {
  white-space: nowrap;
}

/* --- Founder Note (pull-quote / signature) --- */

.founder-note {
  margin: 0;
  padding: var(--space-9) var(--space-8);
  border-block: 1px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
}

.founder-note__quote {
  margin: 0;
  position: relative;
}

.founder-note__quote::before {
  content: "\201C";
  display: block;
  font-family: var(--font-serif);
  font-size: 4rem;
  line-height: 0.6;
  color: var(--color-accent);
  opacity: 0.4;
  margin-block-end: var(--space-3);
}

.founder-note__quote p {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.5;
  color: var(--text-primary);
  font-weight: var(--fw-regular);
  font-style: italic;
}

.founder-note__attribution {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.founder-note__name {
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.founder-note__title {
  font-size: var(--fs-13);
  color: var(--text-secondary);
  letter-spacing: var(--ls-base);
}

/* ============================================================================
   PRICING HUB PAGE
   Reuses: service-hero--centered, tldr, ai-summary, pricing-summary-table,
           mission-block, engagement-standards-grid, faq, expert-review,
           related-grid, final-cta + disclaimer, editorial-break
   New component: pricing-model-grid + pricing-model (3 engagement shapes)
   ============================================================================ */

.page--pricing .section--pricing-models, .page--pricing .section--pricing-includes, .page--pricing .section--pricing-review, .page--pricing .section--cleanup-related {
  background: var(--bg-section-alt);
}

.page--pricing .section--tldr, .page--pricing .section--ai-summary, .page--pricing .section--pricing-table, .page--pricing .section--pricing-model-explained, .page--pricing .section--faq {
  background: var(--bg-page);
}

/* --- Pricing Model Grid (NEW — 3 engagement shapes) ---
   Naming: .pricing-model-grid / .pricing-model / __tag / __heading / __body / __examples
   Reusable on /accounting/services/, /partners/. Promote on 2nd use. */

.pricing-model-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 880px) {
  .pricing-model-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

.pricing-model {
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  position: relative;
  transition: border-color var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}

.pricing-model::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--color-accent);
}

.pricing-model:hover {
  border-color: var(--text-primary);
  transform: translateY(-2px);
}

.pricing-model__tag {
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-block-end: var(--space-3);
}

.pricing-model__heading {
  font-family: var(--font-serif);
  font-size: var(--fs-22);
  line-height: 1.2;
  color: var(--text-primary);
  font-weight: var(--fw-regular);
  margin-block-end: var(--space-4);
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--border-hairline);
}

.pricing-model__body {
  font-size: var(--fs-14);
  line-height: 1.65;
  color: var(--text-body);
  margin-block-end: var(--space-4);
  flex: 1;
}

.pricing-model__examples {
  font-size: var(--fs-13);
  line-height: 1.55;
  color: var(--text-secondary);
  padding-block-start: var(--space-4);
  border-block-start: 1px dashed var(--border-hairline);
}

.pricing-model__examples strong {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

/* ============================================================================
   QUICKBOOKS PAYROLL PAGE
   Reuses: service-hero-split, tldr, ai-summary, plan-comparison (existing),
           hub-service-grid--six, mission-block, signal-grid, faq, expert-review,
           related-grid, final-cta + disclaimer, editorial-break
   New: plan-comparison__desktop-note (small addendum block under plan cards)
   ============================================================================ */

.page--quickbooks-payroll .section--qbpr-plans, .page--quickbooks-payroll .section--qbpr-services, .page--quickbooks-payroll .section--qbpr-issues, .page--quickbooks-payroll .section--qbpr-review, .page--quickbooks-payroll .section--cleanup-related {
  background: var(--bg-section-alt);
}

.page--quickbooks-payroll .section--tldr, .page--quickbooks-payroll .section--ai-summary, .page--quickbooks-payroll .section--qbpr-multistate, .page--quickbooks-payroll .section--qbpr-issues, .page--quickbooks-payroll .section--faq {
  background: var(--bg-page);
}

/* Desktop Payroll addendum note under the plan cards */

.plan-comparison__desktop-note {
  margin-block-start: var(--space-7);
  padding: var(--space-6) var(--space-7);
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-inline-start: 3px solid var(--color-accent);
  border-radius: var(--radius-sm);
  max-width: 900px;
}

.plan-comparison__desktop-note p {
  font-size: var(--fs-14);
  line-height: 1.65;
  color: var(--text-body);
  margin: 0;
}

.plan-comparison__desktop-note strong {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

.plan-comparison__desktop-note a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-hairline);
}

.plan-comparison__desktop-note a:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

/* ============================================================================
   ABOUT METHODOLOGY PAGE
   Reuses: service-hero-split, tldr, ai-summary, mission-block,
           engagement-standards-grid, scope-grid, faq, expert-review,
           related-grid, final-cta + disclaimer, editorial-break
   New component: methodology-phases / methodology-phase (vertical numbered
   process with connector spine + per-phase output)
   ============================================================================ */

.page--about-methodology .section--meth-phases, .page--about-methodology .section--meth-standards, .page--about-methodology .section--meth-scope, .page--about-methodology .section--meth-review, .page--about-methodology .section--cleanup-related {
  background: var(--bg-section-alt);
}

.page--about-methodology .section--tldr, .page--about-methodology .section--ai-summary, .page--about-methodology .section--meth-why, .page--about-methodology .section--meth-standards, .page--about-methodology .section--faq {
  background: var(--bg-page);
}

/* --- Methodology Phases (NEW — vertical numbered process with spine) ---
   Naming: .methodology-phases / .methodology-phase / __marker / __content /
           __header / __heading / __timing / __body / __output
   Reusable on /about/network/ (operator onboarding), /quickbooks/migration/
   (migration phases). Promote to 03-components.css on 2nd use. */

.methodology-phases {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 860px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.methodology-phase {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-5);
  position: relative;
}

/* prevent the 1fr content track from refusing to shrink below intrinsic
   width on narrow mobile (CSS Grid min-width:auto overflow trap) */

.methodology-phase__content {
  min-width: 0;
}

@media (min-width: 720px) {
  .methodology-phase {
    grid-template-columns: 72px 1fr;
    gap: var(--space-7);
  }
}

/* Connector spine between markers */

.methodology-phase:not(:last-child) .methodology-phase__marker::after {
  content: "";
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: calc(100% + var(--space-6) - 56px);
  background: var(--border-hairline);
}

@media (min-width: 720px) {
  .methodology-phase:not(:last-child) .methodology-phase__marker::after {
    top: 72px;
    height: calc(100% + var(--space-6) - 72px);
  }
}

.methodology-phase__marker {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

@media (min-width: 720px) {
  .methodology-phase__marker {
    width: 72px;
    height: 72px;
  }
}

.methodology-phase__marker span {
  font-family: var(--font-serif);
  font-size: var(--fs-20);
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-tight);
}

@media (min-width: 720px) {
  .methodology-phase__marker span {
    font-size: var(--fs-24);
  }
}

.methodology-phase__content {
  padding: var(--space-7) var(--space-8);
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  transition: border-color var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}

.methodology-phase:hover .methodology-phase__content {
  border-color: var(--text-primary);
  transform: translateY(-2px);
}

.methodology-phase__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-block-end: var(--space-4);
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--border-hairline);
}

.methodology-phase__heading {
  font-family: var(--font-serif);
  font-size: var(--fs-24);
  line-height: 1.2;
  color: var(--text-primary);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-tight);
}

.methodology-phase__timing {
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--color-accent);
  letter-spacing: var(--ls-base);
}

.methodology-phase__body {
  font-size: var(--fs-15);
  line-height: 1.7;
  color: var(--text-body);
  margin-block-end: var(--space-5);
}

.methodology-phase__body strong {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

.methodology-phase__body a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-hairline);
}

.methodology-phase__body a:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

.methodology-phase__output {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-4) var(--space-5);
  background: var(--color-paper-warm);
  border-radius: var(--radius-sm);
  margin: 0;
  min-width: 0;
}

.methodology-phase__output dt {
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  color: var(--text-eyebrow);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

.methodology-phase__output dd {
  min-width: 0;
  font-size: var(--fs-14);
  line-height: 1.55;
  color: var(--text-primary);
  margin: 0;
}

/* ============================================================================
   REVIEWS PAGE
   Reuses: service-hero--centered, tldr, review-verified (2nd use → promote),
           mission-block, faq, related-grid, final-cta + disclaimer
   New components: review-grid / review-card (scalable verified-review cards),
                   review-cta-panel (leave-a-review band)
   ============================================================================ */

.page--reviews .section--reviews-list, .page--reviews .section--reviews-leave, .page--reviews .section--cleanup-related {
  background: var(--bg-section-alt);
}

/* Session 6: .section--tldr now carries the global warm-accent bookend, and
   .section--reviews-why now uses .section--dark — both removed from this
   light-background override so the upgraded treatments win. */

.page--reviews .section--reviews-clutch, .page--reviews .section--faq {
  background: var(--bg-page);
}

/* --- Review Grid + Card (NEW — scalable verified-review cards) ---
   Naming: .review-grid / .review-card / __source / __badge / __quote /
           __attribution / __role / __detail / .review-grid__note
   Built to scale: add <li class="review-card"> items as reviews grow.
   Promote to 03-components.css on 2nd use. */

.review-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 720px) {
  .review-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .review-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-8);
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  transition: border-color var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}

.review-card:hover {
  border-color: var(--text-primary);
  transform: translateY(-2px);
}

.review-card__source {
  display: flex;
  align-items: center;
}

.review-card__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--color-paper-warm);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-pill);
}

.review-card__badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

.review-card__quote {
  margin: 0;
  flex: 1;
}

.review-card__quote p {
  font-family: var(--font-serif);
  font-size: var(--fs-17);
  line-height: 1.6;
  color: var(--text-primary);
  font-weight: var(--fw-regular);
  font-style: italic;
}

.review-card__attribution {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border-hairline);
}

.review-card__role {
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.review-card__detail {
  font-size: var(--fs-13);
  color: var(--text-secondary);
  line-height: 1.45;
}

.review-grid__note {
  margin-block-start: var(--space-8);
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--text-secondary);
  text-align: center;
}

.review-grid__note a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: var(--fw-medium);
}

.review-grid__note a:hover {
  color: var(--color-accent);
}

/* --- Review CTA Panel (NEW — leave-a-review band) ---
   Naming: .review-cta-panel / __body / __eyebrow / __heading / __text / __cta */

.review-cta-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-9) var(--space-8);
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-inline-start: 4px solid var(--color-accent);
  border-radius: var(--radius-md);
}

@media (min-width: 880px) {
  .review-cta-panel {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-10);
    padding: var(--space-10) var(--space-12);
  }
}

.review-cta-panel__eyebrow {
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  margin-block-end: var(--space-3);
}

.review-cta-panel__heading {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  font-weight: var(--fw-regular);
  margin-block-end: var(--space-3);
}

.review-cta-panel__text {
  font-size: var(--fs-15);
  line-height: 1.65;
  color: var(--text-secondary);
  max-width: 62ch;
}

.review-cta-panel__cta {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================================================
   VS PILOT & VS QUICKBOOKS LIVE — no page-specific CSS needed.
   Both pages use class="page page--vs page--vs-pilot" / "page--vs-qblive" and
   rely entirely on the shared .page--vs section backgrounds (defined above near
   the vs-bench / vs-roles blocks) plus the global vs-* components in
   03-components.css. Earlier page-scoped blocks here referenced class names that
   never existed in the component CSS and were removed.
   ============================================================================ */

/* ============================================================================
   ABOUT / NETWORK PAGE
   Reuses: hero(centered), tldr, ai-summary, delivery-modes, engagement-
   standards-grid, network table, faq, related-grid, final-cta.
   NEW: network-flow (the "how an engagement routes through the platform" visual).
   ============================================================================ */

/* section background rhythm */

.page--network .section--tldr, .page--network .section--engagement-standards, .page--network .section--why-network {
  background: var(--bg-section-alt);
}

.page--network .section--network-flow {
  background: var(--color-surface-dark);
  color: var(--color-ink-inverted);
}

.page--network .section--network-flow .section__heading, .page--network .section--network-flow .section__lede {
  color: var(--color-ink-inverted);
}

.page--network .section--network-flow .section__eyebrow {
  color: var(--color-ink-inverted-mute);
}

/* NETWORK FLOW — 4-node platform routing visual */

.network-flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  counter-reset: flow;
  position: relative;
}

@media (min-width: 720px) {
  .network-flow {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
}

@media (min-width: 1024px) {
  .network-flow {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
  }
}

.network-flow__node {
  position: relative;
  padding: var(--space-6);
  background: rgba(250, 250, 247, 0.04);
  border: 1px solid rgba(250, 250, 247, 0.14);
  border-radius: var(--radius-md, 10px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* connector arrows between nodes (desktop only) */

@media (min-width: 1024px) {
  .network-flow__node:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(var(--space-4) * -1);
    width: var(--space-4);
    height: 1px;
    background: rgba(250, 250, 247, 0.3);
    transform: translateY(-50%);
  }
}

@media (min-width: 1024px) {
  .network-flow__node:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(var(--space-4) * -1 - 1px);
    width: 6px;
    height: 6px;
    border-top: 1px solid rgba(250, 250, 247, 0.4);
    border-right: 1px solid rgba(250, 250, 247, 0.4);
    transform: translateY(-50%) rotate(45deg);
    z-index: 1;
  }
}

/* the platform node is the emphasized one */

.network-flow__node--platform {
  background: rgba(132, 30, 30, 0.18);
  border-color: var(--color-accent);
}

.network-flow__node--outcome {
  background: rgba(250, 250, 247, 0.08);
  border-color: rgba(250, 250, 247, 0.28);
}

.network-flow__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  font-family: var(--font-serif);
  font-size: var(--fs-15);
  color: var(--color-ink-inverted);
  border: 1px solid rgba(250, 250, 247, 0.3);
  border-radius: 50%;
}

.network-flow__node--platform .network-flow__icon {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

.network-flow__heading {
  font-size: var(--fs-18);
  color: var(--color-ink-inverted);
}

.network-flow__body {
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--color-ink-inverted-mute);
}

@media (prefers-reduced-motion: reduce) {
  .network-flow__node::before, .network-flow__node::after {
    transition: none;
  }
}

/* ============================================================================
   INDUSTRY · E-COMMERCE (and industry-page pattern)
   Reuses: hero, tldr, ai-summary, scope-grid, process, faq, expert-review,
   related-grid, final-cta. NEW: integration-grid (promote to 03 on 2nd industry).
   ============================================================================ */

/* section background rhythm */

.page--industry .section--tldr, .page--industry .section--ecom-included, .page--industry .section--process {
  background: var(--bg-section-alt);
}

.page--industry .section--ecom-integrations {
  background: var(--color-surface-dark);
  color: var(--color-ink-inverted);
}

.page--industry .section--ecom-integrations .section__heading {
  color: var(--color-ink-inverted);
}

.page--industry .section--ecom-integrations .section__eyebrow {
  color: var(--color-ink-inverted-mute);
}

/* INTEGRATION GRID — platform pills */

.integration-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  max-width: 760px;
  margin-inline: auto;
}

.integration-pill {
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  color: var(--color-ink-inverted);
  padding: 10px 20px;
  border: 1px solid rgba(250, 250, 247, 0.24);
  border-radius: var(--radius-pill, 999px);
  background: rgba(250, 250, 247, 0.05);
}

.integration-grid__note {
  margin-block-start: var(--space-6);
  text-align: center;
  font-size: var(--fs-14);
  color: var(--color-ink-inverted-mute);
}

.integration-grid__note a {
  color: var(--color-ink-inverted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.integration-grid__note a:hover {
  color: var(--color-accent);
}

/* ============================================================================
   INDUSTRY · E-COMMERCE — reuses urgency-tier-grid, hub-service-grid--six,
   cadence, mission-block, editorial-break, expert-review, related-grid.
   NEW: integration-grid (promote to 03 on 2nd industry use).
   ============================================================================ */

.page--industry .section--tldr, .page--industry .section--call-topics, .page--industry .section--call-process {
  background: var(--bg-section-alt);
}

.page--industry .section--ecom-integrations {
  background: var(--color-surface-dark);
  color: var(--color-ink-inverted);
}

.page--industry .section--ecom-integrations .section__heading {
  color: var(--color-ink-inverted);
}

.page--industry .section--ecom-integrations .section__eyebrow {
  color: var(--color-ink-inverted-mute);
}

.integration-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  max-width: 760px;
  margin-inline: auto;
}

.integration-pill {
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  font-weight: var(--fw-medium);
  color: var(--color-ink-inverted);
  padding: 10px 20px;
  border: 1px solid rgba(250,250,247,0.24);
  border-radius: var(--radius-pill, 999px);
  background: rgba(250,250,247,0.05);
}

.integration-grid__note {
  margin-block-start: var(--space-6);
  text-align: center;
  font-size: var(--fs-14);
  color: var(--color-ink-inverted-mute);
}

.integration-grid__note a {
  color: var(--color-ink-inverted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.integration-grid__note a:hover {
  color: var(--color-accent);
}

/* ============================================================================
   ENGAGEMENT AREAS  (used on /accounting/advisory/fractional-cfo/)
   ----------------------------------------------------------------------------
   Editorial card grid + contrasting exclusions panel.
   Reuses tokens only — no new variables.
   ============================================================================ */

.section--engagement-areas {
  background: var(--bg-page);
}

.engagement-areas {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  margin-block-start: var(--space-10);
}

@media (min-width: 720px) {
  .engagement-areas {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .engagement-areas {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
  }
}

/* --- Card ------------------------------------------------------------------ */

.engagement-area {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-6) var(--space-6);
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  transition: border-color var(--motion-base) var(--ease-out), box-shadow var(--motion-base) var(--ease-out), transform var(--motion-base) var(--ease-out);
}

@media (min-width: 720px) {
  .engagement-area {
    padding: var(--space-10) var(--space-8) var(--space-8);
  }
}

/* Top accent rule — visual rhythm marker for editorial card */

.engagement-area::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--space-6);
  width: var(--space-8);
  height: 2px;
  background: var(--color-accent);
  transition: width var(--motion-slow) var(--ease-out);
}

@media (min-width: 720px) {
  .engagement-area::before {
    left: var(--space-8);
  }
}

.engagement-area:hover {
  border-color: var(--color-ink-mute);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.engagement-area:hover::before {
  width: var(--space-12);
}

/* --- Numeral --------------------------------------------------------------- */

.engagement-area__number {
  font-family: var(--font-serif);
  font-size: var(--fs-44);
  font-weight: var(--fw-regular);
  line-height: 1;
  color: var(--color-accent);
  letter-spacing: var(--ls-tight);
  margin-block-end: var(--space-4);
  font-feature-settings: "lnum", "tnum";
}

@media (min-width: 960px) {
  .engagement-area__number {
    font-size: var(--fs-52);
  }
}

/* --- Heading + lede -------------------------------------------------------- */

.engagement-area__heading {
  font-family: var(--font-serif);
  font-size: var(--fs-22);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--text-primary);
  margin-block-end: var(--space-3);
}

@media (min-width: 960px) {
  .engagement-area__heading {
    font-size: var(--fs-24);
  }
}

.engagement-area__lede {
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: 1.55;
  color: var(--text-secondary);
  margin-block-end: var(--space-6);
}

/* --- Deliverable list ------------------------------------------------------ */

.engagement-area__list {
  list-style: none;
  margin: 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--border-hairline);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.engagement-area__list li {
  position: relative;
  padding-inline-start: var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--text-body);
}

.engagement-area__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 1px;
  background: var(--color-accent);
}

/* ============================================================================
   EXCLUSIONS PANEL
   ----------------------------------------------------------------------------
   Sits below the grid; visually distinct (deeper paper, no border) to
   communicate "what's outside the box."
   ============================================================================ */

.engagement-areas__exclusions {
  margin-block-start: var(--space-12);
  padding: var(--space-8) var(--space-6);
  background: var(--color-paper-deep);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-accent);
}

@media (min-width: 720px) {
  .engagement-areas__exclusions {
    margin-block-start: var(--space-16);
    padding: var(--space-10) var(--space-12);
  }
}

@media (min-width: 1024px) {
  .engagement-areas__exclusions {
    max-width: 920px;
    margin-inline: auto;
  }
}

.engagement-areas__exclusions-heading {
  font-family: var(--font-serif);
  font-size: var(--fs-22);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--text-primary);
  margin-block-end: var(--space-4);
}

@media (min-width: 960px) {
  .engagement-areas__exclusions-heading {
    font-size: var(--fs-24);
  }
}

.engagement-areas__exclusions-body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--text-body);
  max-width: 70ch;
}

.engagement-areas__exclusions-body a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-hairline);
  transition: text-decoration-color var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out);
}

.engagement-areas__exclusions-body a:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
  .engagement-area, .engagement-area::before {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .engagement-area:hover {
    transform: none;
  }
}

.process-step__body code, .faq__answer code {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.92em;
  background: var(--color-paper-deep);
  padding: 0.1em 0.4em;
  border-radius: 2px;
}

/* ============================================================================
   SESSION 6 — HOMEPAGE & SHARED PREMIUM POLISH
   ----------------------------------------------------------------------------
   Additive refinements only. No structural/layout changes, no markup changes.
   Elevates perceived quality: accent-dot eyebrows, balanced heading wrap,
   proof-strip dividers, smoother card/hover finish. Safe to remove wholesale.
   ============================================================================ */

/* ── Homepage hero eyebrow — accent dot lead (matches location pillar eyebrows) */

.page--home .hero__eyebrow, .section--hero .hero__eyebrow {
  position: relative;
}

/* balanced wrap on the big editorial headings so line breaks read intentionally */

.hero__heading, .section__heading, .final-cta__heading, .stance__heading, .tldr__heading {
  text-wrap: balance;
}

.hero__subheading, .section__lede, .final-cta__lede {
  text-wrap: pretty;
}

/* ── Proof-strip — quiet vertical dividers between metrics (desktop only) */

@media (min-width: 720px) {
  .proof-strip__item:not(:last-child) {
    padding-inline-end: var(--space-8);
    border-inline-end: 1px solid var(--border-hairline);
  }
}

/* ── Service / buyer / guide cards — slightly richer hover finish */

.service-card, .buyer-card > article, .guide-card > article {
  will-change: transform;
}

/* accent hairline that draws in on hover for the homepage service cards */

.service-card {
  position: relative;
  overflow: hidden;
}

.service-card::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-slow) var(--ease-out);
}

.service-card:hover::after, .service-card:focus-within::after {
  transform: scaleX(1);
}

/* ── AI-summary block — subtle left accent rule on each Q (premium, scannable) */

.ai-summary__item {
  position: relative;
}

/* ── Stance points — gentle hover lift on the dark cards */

.stance__point {
  transition: border-color var(--motion-base) var(--ease-out), background var(--motion-base) var(--ease-out);
}

.stance__point:hover {
  border-color: rgba(250, 250, 247, 0.28);
  background: rgba(250, 250, 247, 0.07);
}

@media (prefers-reduced-motion: reduce) {
  .service-card::after {
    transition: none;
  }
}

/* ============================================================================
   MERGED FROM home_v2.css (Session 6 consolidation)
   Homepage-scoped: .page--home / .hero--home / .stance / .network-flow--home
   Loads after 04-pages base; was previously a separate file in the same slot.
   ============================================================================ */

/* ============================================================================
   HOMEPAGE v2 — append to 04-pages.css
   Homepage-scoped (.page--home / .hero--home / .stance / .network-flow--home)
   so shared components are untouched.
   ============================================================================ */

/* ---- HERO: two-column with CSS brand visual ---- */

.hero--home {
  max-width: var(--container-max);
}

@media (min-width: 960px) {
  .hero--home {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: var(--space-12);
  }
}

@media (min-width: 960px) {
  .hero--home .hero__copy {
    max-width: 40ch;
  }
}

/* ----------------------------------------------------------------------------
   HERO — CENTERED, TYPOGRAPHIC (no image). Full-width single column.
   Overrides the .hero--home two-column grid when .hero--centered is present.
   ---------------------------------------------------------------------------- */

.hero--centered {
  display: block;
  max-width: 100%;
  text-align: center;
}

@media (min-width: 960px) {
  .hero--centered {
    display: block;
    grid-template-columns: none;
  }
}

.hero--centered .hero__copy {
  max-width: 60rem;
  margin-inline: auto;
}

@media (min-width: 960px) {
  .hero--centered .hero__copy {
    max-width: 60rem;
  }
}

.hero--centered .hero__eyebrow {
  margin-inline: auto;
}

.hero--centered .hero__heading {
  margin-inline: auto;
  max-width: 22ch;
  font-size: clamp(2.75rem, 6vw, 4.75rem);
}

.hero--centered .hero__subheading {
  margin-inline: auto;
  max-width: 60ch;
}

.hero--centered .hero__actions {
  justify-content: center;
}

/* proof bar: centered, with a divider above it for rhythm */

.hero--centered .hero__proof {
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  margin-inline: auto;
  max-width: 52ch;
}

/* a touch more breathing room top/bottom on the home hero specifically */

.section--hero-home {
  padding-block: var(--space-20) var(--space-16);
}

@media (min-width: 960px) {
  .section--hero-home {
    padding-block: var(--space-32) var(--space-24);
  }
}

.hero__visual {
  display: none;
}

@media (min-width: 960px) {
  .hero__visual {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.hero-mark {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  color: var(--color-ink);
}

.hero-mark__svg {
  width: min(360px, 30vw);
  height: auto;
  animation: hero-mark-in var(--motion-slow, 600ms) var(--ease-out) both;
}

.hero-mark__caption {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-eyebrow);
}

@keyframes hero-mark-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- STANCE: advisory-trend POV section (dark, authority) ---- */

.section--stance {
  background: var(--color-surface-dark);
  color: var(--color-ink-inverted);
}

.stance {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

@media (min-width: 960px) {
  .stance {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-16);
    align-items: center;
  }
}

.stance__heading {
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  color: var(--color-ink-inverted);
  margin-block-end: var(--space-5);
  max-width: 20ch;
}

@media (min-width: 720px) {
  .stance__heading {
    font-size: var(--fs-38);
  }
}

.stance__lede {
  font-size: var(--fs-18);
  line-height: 1.6;
  color: var(--color-ink-inverted-mute);
  margin-block-end: var(--space-6);
  max-width: 52ch;
}

.stance__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
}

.stance__points {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.stance__point {
  padding: var(--space-5);
  background: rgba(250, 250, 247, 0.05);
  border: 1px solid rgba(250, 250, 247, 0.14);
  border-radius: var(--radius-md, 10px);
}

.stance__point-heading {
  font-size: var(--fs-18);
  color: var(--color-ink-inverted);
  margin-block-end: var(--space-2);
}

.stance__point-body {
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--color-ink-inverted-mute);
}

/* inverted text button variant (if not already defined globally) */

.btn--text.btn--inverted {
  color: var(--color-ink-inverted);
}

.btn--text.btn--inverted:hover {
  color: var(--color-accent);
}

/* ---- NETWORK-FLOW: light variant for homepage #network (warm-paper bg) ---- */

.network-flow--home {
  margin-block-start: var(--space-12);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
}

@media (min-width: 720px) {
  .network-flow--home {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .network-flow--home {
    grid-template-columns: repeat(4, 1fr);
  }
}

.network-flow--home .network-flow__node {
  position: relative;
  padding: var(--space-5);
  background: var(--bg-page);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md, 10px);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.network-flow--home .network-flow__node--platform {
  border-color: var(--color-accent);
  background: var(--color-paper-warm, #F0EEE9);
}

.network-flow--home .network-flow__node--outcome {
  border-color: var(--text-primary);
}

@media (min-width: 1024px) {
  .network-flow--home .network-flow__node:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(var(--space-4) * -1);
    width: var(--space-4);
    height: 1px;
    background: var(--border-hairline);
    transform: translateY(-50%);
  }
}

.network-flow--home .network-flow__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-family: var(--font-serif);
  font-size: var(--fs-15);
  color: var(--text-primary);
  border: 1px solid var(--border-hairline);
  border-radius: 50%;
}

.network-flow--home .network-flow__node--platform .network-flow__icon {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-ink-inverted);
}

.network-flow--home .network-flow__heading {
  font-size: var(--fs-18);
  color: var(--text-primary);
}

.network-flow--home .network-flow__body {
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--text-body);
}

@media (prefers-reduced-motion: reduce) {
  .hero-mark__svg {
    animation: none;
  }
}

/* ============================================================================
   SESSION 6 — HOMEPAGE TRUST MODULES (reviews strip / client work / team)
   ----------------------------------------------------------------------------
   Reviews + team strips reuse the globalized review-layout/team-strip
   components. This adds: section backgrounds for rhythm, the case-card
   (client-work) pattern, and the team-strip CTA. Content is real/verified only.
   ============================================================================ */

/* section rhythm: reviews on warm, client-work on paper, team on warm */

.page--home .section--review-grid {
  background: var(--bg-section-alt);
}

.page--home .section--home-team {
  background: var(--bg-section-alt);
}

/* ── CLIENT WORK — case-card grid ─────────────────────────────────────────── */

.case-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

@media (min-width: 760px) {
  .case-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

.case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8) var(--space-7);
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--motion-slow) var(--ease-out), box-shadow var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}

/* accent rule that draws in on hover — matches the home service-card finish */

.case-card::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-slow) var(--ease-out);
}

.case-card:hover {
  border-color: var(--text-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.case-card:hover::after, .case-card:focus-within::after {
  transform: scaleX(1);
}

.case-card__tag {
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-eyebrow);
}

.case-card__heading {
  font-family: var(--font-serif);
  font-size: var(--fs-24);
  font-weight: var(--fw-regular);
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  margin: 0;
}

.case-card__challenge, .case-card__result {
  font-size: var(--fs-15);
  line-height: 1.6;
  color: var(--text-body);
  margin: 0;
}

.case-card__challenge strong, .case-card__result strong {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

.case-card__cta {
  margin-block-start: auto;
  padding-block-start: var(--space-3);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-hairline);
  transition: text-decoration-color var(--motion-base) var(--ease-out), color var(--motion-base) var(--ease-out);
  align-self: flex-start;
}

.case-card__cta:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

/* ── TEAM STRIP CTA (centered button under the home team cards) ───────────── */

.team-strip__cta {
  margin-block-start: var(--space-8);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .case-card, .case-card::after {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-card:hover {
    transform: none;
  }
}

/* ============================================================================
   ABOUT — OPERATING-MODEL DIAGRAM (.opmodel)
   ----------------------------------------------------------------------------
   Interactive CSS/SVG diagram replacing the (removed) dated timeline. Shows
   the engagement flow: You -> The Standard -> Lead / Partner practice.
   Progressive enhancement: without JS, all panels render stacked & readable;
   with JS (.opmodel--enhanced), nodes become buttons that swap the active panel.
   Scoped to .page--about.
   ============================================================================ */

.page--about .opmodel {
  margin-block-start: var(--space-10);
}

.page--about .opmodel__stage {
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  padding: clamp(var(--space-5), 4vw, var(--space-10));
  overflow: hidden;
}

.page--about .opmodel__svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--text-primary);
}

/* connectors */

.page--about .opmodel__link {
  opacity: 0.32;
  transition: opacity var(--motion-base) var(--ease-out), stroke var(--motion-base) var(--ease-out);
}

/* node groups */

.page--about .opmodel__node > circle {
  fill: var(--color-paper);
  stroke: currentColor;
  stroke-width: 1.5;
  opacity: 0.6;
  transition: fill var(--motion-base) var(--ease-out), opacity var(--motion-base) var(--ease-out), stroke-width var(--motion-base) var(--ease-out);
}

.page--about .opmodel__node-num {
  fill: currentColor;
  opacity: 0.5;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-anchor: middle;
}

.page--about .opmodel__node-label {
  fill: currentColor;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: var(--fw-regular);
  text-anchor: middle;
}

.page--about .opmodel__node-sub {
  fill: currentColor;
  opacity: 0.62;
  font-family: var(--font-sans);
  font-size: 11.5px;
  text-anchor: middle;
}

/* accent (center) node */

.page--about .opmodel__node--accent > circle {
  fill: color-mix(in srgb, var(--color-accent) 7%, var(--color-paper));
  stroke: var(--color-accent);
  opacity: 1;
}

.page--about .opmodel__node--accent .opmodel__node-num, .page--about .opmodel__node--accent .opmodel__node-label, .page--about .opmodel__node--accent .opmodel__node-sub {
  fill: var(--color-accent);
  opacity: 1;
}

/* enhanced: nodes are interactive */

.page--about .opmodel--enhanced .opmodel__node {
  cursor: pointer;
}

.page--about .opmodel--enhanced .opmodel__node:focus {
  outline: none;
}

.page--about .opmodel--enhanced .opmodel__node:focus-visible > circle {
  stroke-width: 2.5;
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.page--about .opmodel--enhanced .opmodel__node:hover > circle {
  opacity: 1;
  stroke-width: 2;
}

/* active node */

.page--about .opmodel--enhanced .opmodel__node.is-active > circle {
  fill: var(--color-ink);
  stroke: var(--color-ink);
  opacity: 1;
}

.page--about .opmodel--enhanced .opmodel__node.is-active:not(.opmodel__node--accent) .opmodel__node-num, .page--about .opmodel--enhanced .opmodel__node.is-active:not(.opmodel__node--accent) .opmodel__node-label, .page--about .opmodel--enhanced .opmodel__node.is-active:not(.opmodel__node--accent) .opmodel__node-sub {
  fill: var(--color-paper);
  opacity: 1;
}

.page--about .opmodel--enhanced .opmodel__node--accent.is-active > circle {
  fill: var(--color-accent);
  stroke: var(--color-accent);
}

.page--about .opmodel--enhanced .opmodel__node--accent.is-active .opmodel__node-num, .page--about .opmodel--enhanced .opmodel__node--accent.is-active .opmodel__node-label, .page--about .opmodel--enhanced .opmodel__node--accent.is-active .opmodel__node-sub {
  fill: var(--color-paper);
}

/* panels */

.page--about .opmodel__panels {
  margin-block-start: var(--space-6);
}

/* without JS: show all panels stacked (each labelled) */

.page--about .opmodel__panel {
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}

.page--about .opmodel__panel + .opmodel__panel {
  margin-block-start: var(--space-3);
}

/* with JS: only the active panel shows, in a single framed slot */

.page--about .opmodel--enhanced .opmodel__panels {
  position: relative;
  min-height: 7.5rem;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  padding: var(--space-6) var(--space-7);
}

.page--about .opmodel--enhanced .opmodel__panel {
  display: none;
  padding: 0;
  border: 0;
  background: none;
}

.page--about .opmodel--enhanced .opmodel__panel + .opmodel__panel {
  margin-block-start: 0;
}

.page--about .opmodel--enhanced .opmodel__panel.is-active {
  display: block;
  animation: opmodel-fade var(--motion-base) var(--ease-out) both;
}

@keyframes opmodel-fade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page--about .opmodel__panel-heading {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 var(--space-2);
}

.page--about .opmodel__panel-body {
  font-size: var(--fs-16);
  line-height: 1.65;
  color: var(--text-body);
  margin: 0;
}

.page--about .opmodel__note {
  margin-block-start: var(--space-6);
  text-align: center;
  font-size: var(--fs-15);
  line-height: 1.6;
  color: var(--text-muted);
}

.page--about .opmodel__note strong {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

@media (prefers-reduced-motion: reduce) {
  .page--about .opmodel--enhanced .opmodel__panel.is-active {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page--about .opmodel__link, .page--about .opmodel__node > circle, .page--about .opmodel__node-num, .page--about .opmodel__node-label, .page--about .opmodel__node-sub {
    transition: none;
  }
}

/* methodology output: stack dt/dd on very narrow screens so the nested
   two-column dl never forces horizontal overflow at 320px */

@media (max-width: 359px) {
  .methodology-phase__output {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
}

@media (max-width: 359px) {
  .methodology-phase__output dt {
    white-space: normal;
  }
}

/* ============================================================================
   OPERATING PRINCIPLES — .principles-list / .principle
   ----------------------------------------------------------------------------
   Was referenced but never defined (rendered as a bare <ol>). Premium 2x3
   card grid: large outlined index numeral, accent top-rule on hover, hairline
   frame. Used on /about/ and /partners/. Token-driven, scoped by section.
   ============================================================================ */

.principles-list {
  list-style: none;
  margin: var(--space-12) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .principles-list {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }
}

@media (min-width: 1024px) {
  .principles-list {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }
}

.principle {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-7) var(--space-7);
  background: var(--bg-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  overflow: hidden;
  isolation: isolate;
  transition: border-color var(--motion-slow) var(--ease-out), box-shadow var(--motion-slow) var(--ease-out), transform var(--motion-slow) var(--ease-out);
}

/* accent rule that draws in from the left on hover/focus */

.principle::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--motion-slow) var(--ease-out);
  z-index: 2;
}

.principle:hover, .principle:focus-within {
  border-color: var(--text-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.principle:hover::before, .principle:focus-within::before {
  transform: scaleX(1);
}

/* large outlined index numeral, top-right, decorative */

.principle__number {
  position: absolute;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-5);
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.75rem, 5vw, 3.5rem);
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--text-primary) 22%, transparent);
  text-stroke: 1px color-mix(in srgb, var(--text-primary) 22%, transparent);
  z-index: 0;
  pointer-events: none;
  transition: -webkit-text-stroke-color var(--motion-slow) var(--ease-out);
}

.principle:hover .principle__number, .principle:focus-within .principle__number {
  -webkit-text-stroke-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
}

.principle__heading {
  position: relative;
  z-index: 1;
  margin: 0 0 var(--space-3);
  max-width: 14ch;
  font-family: var(--font-serif);
  font-size: var(--fs-22);
  font-weight: var(--fw-regular);
  line-height: 1.18;
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
  text-wrap: balance;
}

.principle__body {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: var(--fs-15);
  line-height: 1.62;
  color: var(--text-body);
}

@media (prefers-reduced-motion: reduce) {
  .principle, .principle::before, .principle__number {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .principle:hover, .principle:focus-within {
    transform: none;
  }
}

/* ============================================================================
   METHODOLOGY — SVG hero visual + SVG editorial divider (replace raster .webp)
   Weightless, crisp at any DPR, zero server dependency. Token-driven colors.
   ============================================================================ */

/* hero SVG sits in the same slot the image used; match its proportion */

.service-hero-split__visual--svg {
  color: var(--text-primary);
}

.service-hero-split__visual--svg .meth-hero-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* SVG editorial divider band (replaces the raster editorial-break) */

.section--meth-divider {
  padding-block: var(--space-10);
}

@media (min-width: 768px) {
  .section--meth-divider {
    padding-block: var(--space-14);
  }
}

.meth-divider {
  color: var(--text-primary);
}

.meth-divider__svg {
  display: block;
  width: 100%;
  height: auto;
}