/* ============================================================================
   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-block-end: 1px solid var(--border-hairline);
  font-size: var(--fs-13);
}

.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);
}

/* --- Signal grid (Is cleanup right for me?) --- */

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

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

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

.signal-card {
  padding: var(--space-6);
  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);
}

.signal-card::before {
  content: "";
  position: absolute;
  top: var(--space-5);
  left: var(--space-5);
  width: 4px;
  height: 4px;
  background: var(--color-accent);
  border-radius: 50%;
  opacity: 0.7;
}

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

.signal-card__heading {
  font-size: var(--fs-18);
  line-height: 1.3;
  margin-block: var(--space-4) var(--space-2);
  padding-inline-start: var(--space-4);
}

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

.cleanup-signals__cta {
  margin-block-start: var(--space-10);
  text-align: center;
}

/* --- 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);
}

/* --- Engagement cadence (NEW — reusable global pattern for any recurring service) ---
   Naming: .cadence / .cadence__phase / .cadence__day / .cadence__heading / .cadence__body
   Will be reused by: payroll-management, sales-tax-compliance, fractional-cfo,
   any recurring engagement that has a monthly/quarterly rhythm. */

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

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

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

.cadence__phase {
  padding: var(--space-6);
  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);
}

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

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

.cadence__day {
  font-family: var(--font-sans);
  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);
  font-variant-numeric: tabular-nums;
}

.cadence__heading {
  font-size: var(--fs-20);
  line-height: 1.25;
  margin-block-end: var(--space-2);
}

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

/* --- Deliverables grid (NEW — global pattern for "what's included" + "add-ons") ---
   Naming: .deliverables-grid / .deliverable-column / .deliverable-list / .deliverable-list__item
   Will be reused by: any page that has a baseline-vs-add-ons split. */

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

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

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

.deliverable-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);
}

.deliverable-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.deliverable-list__item {
  font-size: var(--fs-15);
  color: var(--text-primary);
  padding-block: var(--space-3);
  padding-inline-start: var(--space-5);
  border-block-end: 1px solid var(--border-hairline);
  position: relative;
  line-height: 1.45;
}

.deliverable-list__item:last-child {
  border-block-end: none;
}

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

/* --- Pricing tier — recurring modifier (NEW — adds /month cadence label) ---
   Naming: .pricing-tier--recurring + .pricing-tier__cadence
   Will be reused by: payroll-management, sales-tax-compliance, any recurring pricing. */

.pricing-tier__cadence {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  letter-spacing: var(--ls-base);
  margin-inline-start: var(--space-1);
}

/* ============================================================================
   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);
}

/* --- Editorial Break (NEW — full-bleed editorial image divider) ---
   Naming: .section--editorial-break / .editorial-break
   Used on: hub pages and long editorial pages where a visual rest helps pacing.
   Reusable on: /resources/guides/* long-form, /about/*, /accounting/* hub. */

.section--editorial-break {
  padding: 0;
  background: var(--bg-page);
}

.editorial-break {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

@media (min-width: 1024px) {
  .editorial-break {
    padding-inline: var(--space-10);
  }
}

.editorial-break picture, .editorial-break img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  aspect-ratio: 16 / 6;
  object-fit: cover;
}

@media (max-width: 720px) {
  .editorial-break picture, .editorial-break img {
    aspect-ratio: 4 / 3;
  }
}

/* ============================================================================
   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;
}