/* ── Nav: Deal Analyzer highlight ── */
    .nav-links a.nav-link-highlight { color: var(--orange-on-dark); font-weight:600; }
    .mobile-nav-highlight { color:var(--orange-on-dark); font-weight:700; }

    /* ── Deal Analyzer entry-point box ── */
    .deal-analyzer-box { background: linear-gradient(135deg, var(--accent-alpha-8) 0%, var(--border-subtle) 100%); border: 1.5px solid var(--accent-alpha-25); border-radius: var(--radius-lg); padding: var(--sp-5) 28px; margin-bottom: var(--sp-6); display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
    .deal-analyzer-box-inner { flex: 1; min-width: 240px; }
    .deal-analyzer-box .btn { flex-shrink: 0; }

    /* ── Micro section labels (uppercase orange) ── */
    .micro-label {
  margin-bottom: var(--sp-1half);
}

    /* ── Deal analyzer inner text ── */
    .deal-analyzer-title { color: var(--slate); font-weight: 600; font-size: var(--fs-base); margin: 0 0 var(--sp-1); line-height: 1.4; }
    .deal-analyzer-desc { color: var(--body-text); font-size: var(--fs-sm); margin: 0; line-height: 1.6; }

    /* ── "The Real Math" stat box ── */
    .stat-box { background: var(--slate); border-radius: var(--radius-lg); padding: var(--card-pad-lg) var(--sp-6); margin-bottom: 40px; display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }
    .stat-box-inner { flex: 1; min-width: 260px; }
    .stat-box-label {
  margin-bottom: var(--sp-2);
}
    .stat-box-text { color: var(--white); font-family: var(--font-heading); font-size: var(--fs-md); margin: 0; line-height: 1.45; }
    .stat-box-figure-wrap { flex-shrink: 0; text-align: center; }
    .stat-box-figure { font-size: var(--fs-3xl); font-family: var(--font-heading); color: var(--orange); line-height: 1; }
    .stat-box-caption { font-size: var(--fs-sm); color: var(--on-dark-muted); margin-top: var(--sp-1); }

    /* ── Pricing intro context paragraph ── */
    .pricing-context { font-size: var(--fs-sm); color: var(--body-text); margin-bottom: 36px; }

    /* ── Price "+HST" suffix ── */
    .price-hst { font-size: 0.35em; font-weight: 400; color: var(--body-text); }

    /* ── Pricing card secondary description ── */
    .pricing-desc-extra { margin-top: 0.5rem; }

    /* ── Pricing card "Best for" / applicability note ── */
    .pricing-note { font-size: var(--fs-sm); color: var(--body-text); margin-bottom: 1rem; }

    /* ── Pricing card urgency italic ──
       Base and --featured share identical styling (both render on white card bg).
       Consolidated to a single rule; modifier kept in markup for semantic clarity
       and future divergence without HTML edits. */
    .pricing-urgency,
    .pricing-urgency--featured {
      font-size: var(--fs-sm);
      color: var(--body-text);
      margin-bottom: var(--sp-3);
      font-style: italic;
    }

    /* ── Pricing card fine print ──
       Base and --featured share identical styling. Same consolidation rationale
       as .pricing-urgency above. */
    .pricing-fine-print,
    .pricing-fine-print--featured {
      font-size: var(--fs-xs);
      color: var(--body-text);
      text-align: center;
      margin-top: var(--sp-2);
    }

    /* ── Add-ons grid single-column ── */
    /* ── Section label variant ──
       Context-aware. On light bg ("For Business Owners" on cream)
       uses --accent-active for AA contrast. On dark bg ("New" on
       slate bootcamp section) uses --accent-on-dark for AAA contrast.
       Was uniformly --orange (3.4:1 on cream, 5.18:1 on slate — only
       half the use cases passed AA). */
    .section-label--orange { color: var(--accent-active); }
    [data-bg="slate"] .section-label--orange,
    .bootcamp-section .section-label--orange {
      color: var(--accent-on-dark);
    }

    /* ── Problem statement section ──
       Opens the page's narrative. Sits between the slate page header and the
       white Core Services section, using cream to provide warm visual break
       without overwhelming the stat box inside. */
    .problem-section {
      padding: var(--section-pad);
      background-color: var(--cream);
  background-image: var(--grad-cream-warm);
    }
    .problem-section .stat-box {
      margin-bottom: 0;
    }

    /* ── Core Services: buyer-journey phase dividers ──
       Visually separate the three phases (Research, Negotiate, Close) of the
       Core Services section. Editorial rule-and-eyebrow pattern. */
    .phase-marker {
      border-top: 2px solid var(--orange);
      padding-top: var(--sp-5);
      margin: 56px 0 28px;
      display: flex;
      align-items: baseline;
      gap: var(--sp-4);
      flex-wrap: wrap;
    }
    .phase-marker:first-of-type {
      margin-top: var(--sp-2);
    }
    .phase-marker-num {
      font-size: var(--fs-xs);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.14em;
      /* --orange = 3:1 on white (FAIL AA at 12px). --accent-active = 5.98:1. */
      color: var(--accent-active);
      white-space: nowrap;
    }
    .phase-marker-title {
      font-family: var(--font-heading);
      font-size: var(--fs-xl);
      color: var(--slate);
      line-height: 1.2;
    }
    .phase-marker-desc {
      font-size: var(--fs-sm);
      color: var(--body-text);
      margin: 0;
      flex: 1 1 220px;
      line-height: 1.5;
    }
    @media (max-width: 640px) {
      .phase-marker {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-1half);
        margin: 40px 0 20px;
      }
      .phase-marker-desc {
        flex: unset;
      }
    }

    /* ── Bootcamp section ──
       Secondary dark zone — matches .cta-section treatment so this
       full-width slate band reads as the same material as other
       secondary dark zones across the site. */
    .bootcamp-section {
      background-color: var(--slate);
      background-image: var(--grad-noise), var(--grad-slate-glow-soft);
      padding: var(--section-pad);
    }
    .bootcamp-grid { display: grid; grid-template-columns: 1fr 380px; gap: var(--sp-8); align-items: center; }
    .bootcamp-heading { color: var(--white); margin-bottom: var(--sp-4); }
    .bootcamp-text { color: var(--on-dark-muted); font-size: var(--fs-md); line-height: 1.8; margin-bottom: var(--sp-5); }
    .bootcamp-text--last { color: var(--on-dark-muted); font-size: var(--fs-md); line-height: 1.8; margin-bottom: var(--card-pad-lg); }
    .bootcamp-stats-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--card-pad-lg); }
    .bootcamp-stat-card { background: var(--surface-on-dark-2); border-radius: var(--radius-md); padding: var(--sp-4) 20px; flex: 1; min-width: 140px; }
    .bootcamp-stat-value { color: var(--white); font-family: var(--font-heading); font-size: var(--fs-xl); margin-bottom: var(--sp-1); }
    .bootcamp-stat-label { color: var(--on-dark-muted); font-size: var(--fs-sm); }
    .bootcamp-cta-row { justify-content: flex-start; gap: var(--sp-3); align-items: center; }
    .bootcamp-founding-note { font-size: var(--fs-sm); color: var(--on-dark-muted); }

    /* ── Bootcamp "What It Covers" sidebar ── */
    .bootcamp-covers { background: var(--surface-on-dark-1); border-radius: var(--radius-xl); padding: var(--sp-6); border: 1px solid var(--surface-on-dark-3); }
    .bootcamp-covers-label {
  margin-bottom: var(--sp-5);
}
    .bootcamp-covers-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
    /* Was display:flex with gap. Block + absolute icon prevents any
       future <abbr>/<strong> in covers-item text from being flex-itemized. */
    .bootcamp-covers-item { position: relative; padding-left: 22px; color: var(--on-dark-muted); font-size: var(--fs-sm); line-height: 1.5; }
    .bootcamp-covers-check { position: absolute; left: 0; top: 0; color: var(--orange); }
    .bootcamp-covers-footnote { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--surface-on-dark-3); font-size: var(--fs-sm); color: var(--on-dark-muted); }

    /* === Section backgrounds === */
    /* Padding unified to --section-pad token (80px 0 desktop). After
       the audit fix that gave specialty-coverage its own cream
       background, white-top no longer needs a 0-bottom seamless flow
       (the next section is cream now), so it gets full padding back. */
    .section-bg-white-top { padding: var(--section-pad); background-color: var(--white);
  background-image: var(--grad-white-soft); }
    .section-bg-white-full { padding: var(--section-pad); background-color: var(--white);
  background-image: var(--grad-white-soft); }
    /* Audit 2026-05-06: cream variant added for specialty-coverage so
       it contrasts with white core-services above. */
    .section-bg-cream-full { padding: var(--section-pad); background-color: var(--cream);
  background-image: var(--grad-cream-warm); }

    /* ── Services in-page sub-nav ──
       Sticky under main nav. 7 section jump-links so users can navigate
       the long services page without scrolling 13 screens. Editorial
       precedent: NYT deep feature articles; Stripe docs section jumps.
       Main nav height = 72px; sub-nav sits below at top: 72px with its
       own height of ~50px. scroll-margin-top on sections keeps headings
       from being obscured on jump. */
    .services-subnav {
      position: sticky;
      top: 72px;
      z-index: var(--z-dropdown);
      background: var(--cream);
      border-bottom: 1px solid var(--border);
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
    }
    .services-subnav-list {
      display: flex;
      gap: var(--sp-6);
      list-style: none;
      margin: 0;
      padding: 14px 0;
      overflow-x: auto;      scrollbar-width: none;
      justify-content: center;
    }
    .services-subnav-list::-webkit-scrollbar {
      display: none;
    }
    .services-subnav-list a {
      font-family: var(--font-body);
      font-size: var(--fs-sm);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--body-text);
      text-decoration: none;
      white-space: nowrap;
      /* Audit round-2 2026-05-07: prior padding (sp-1half = 6px)
         resulted in ~28px tall links — WCAG 2.5.5 fail (44×44 min)
         on every viewport. min-height + flex centering pads to 44px
         without breaking the inline horizontal scroll layout. */
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      padding: 0;
      position: relative;
      transition: color var(--duration-fast) var(--ease-out);
    }
    .services-subnav-list a:hover {
      color: var(--slate);
    }
    .services-subnav-list a.is-active {
      color: var(--accent-active);
    }
    .services-subnav-list a.is-active::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -15px;
      height: 2px;
      background: var(--orange);
    }
    @media (max-width: 768px) {
      .services-subnav-list {
        justify-content: flex-start;
        gap: var(--sp-5);
        padding: var(--sp-3) var(--sp-5);
      }
    }

    /* Scroll-margin on sections so sub-nav jump lands below the sticky
       nav + sub-nav stack (72 main + ~50 sub = ~122px). */
    #core-services, #specialty-coverage, #deliverables, #compare,
    #pricing, #bootcamp, #fleet {
      scroll-margin-top: 130px;
    }

    /* === Section intro ===
       Unified center-alignment rhythm. Previously mixed (Take-Home Package +
       What $297 Actually Gets You centered via .text-center wrapper; Your
       Buying Journey + Deals + Three Ways left-aligned). That created a
       L-L-C-C-L stagger as users scrolled.
       All section intros now center on one axis — editorial chapter
       treatment. Grid content below each intro stays left-aligned. */
    .section-intro {
      margin-bottom: 2.5rem;
      text-align: center;
    }
    .section-title-tight { margin-bottom: 0.5rem; }
    .section-intro-text {
      color: var(--body-text);
      max-width: 640px;
      margin-left: auto;
      margin-right: auto;
    }

    /* === Fleet section (cream background, light-palette internal styling) === */
    .fleet-section { padding: var(--section-pad); background-color: var(--cream);
  background-image: var(--grad-cream-warm); }
    .fleet-section h2 { margin-bottom: var(--sp-5); }

    /* === Fleet grid layout === */
    .fleet-grid-layout { display: grid; grid-template-columns: 1fr 420px; gap: 72px; align-items: start; }

    /* === Fleet body text === */
    /* Was var(--on-dark-muted) — 75% white alpha on cream bg = ~1.1:1 AA CATASTROPHIC FAIL.
       Fixed to var(--body-text) = #524E47, 7.2:1 on cream (AAA). */
    .fleet-body { color: var(--body-text); font-size: var(--fs-md); line-height: 1.8; }
    .fleet-body-mb24 { margin-bottom: var(--sp-5); }
    .fleet-body-mb32 { margin-bottom: var(--sp-6); }

    /* === Fleet pricing grid (white cards on cream) === */
    .fleet-pricing-grid-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-6); }
    .fleet-pricing-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--sp-5); }
    .fleet-pricing-label {
  margin-bottom: var(--sp-2);
}
    .fleet-pricing-value { color: var(--slate); font-family: var(--font-heading); font-size: var(--fs-lg); margin-bottom: var(--sp-1half); }
    .fleet-pricing-desc { color: var(--body-text); font-size: var(--fs-sm); margin: 0; }

    /* === Fleet who-serves panel (white card on cream) === */
    .fleet-who-panel { background: var(--white); border-radius: var(--radius-xl); padding: var(--sp-6); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
    .fleet-who-heading {
  margin-bottom: var(--sp-5);
}
    .fleet-who-list { display: flex; flex-direction: column; gap: var(--sp-4); }
    .fleet-who-item { display: flex; gap: 14px; align-items: flex-start; }
    /* Unified icon treatment: simple inline orange ✓, matching bootcamp-covers-check pattern.
       Replaces the previous 32×32 circular badge (inconsistent with other checklists on page). */
    .fleet-who-icon { color: var(--orange); font-size: var(--fs-base); flex-shrink: 0; margin-top: 2px; line-height: 1.2; font-weight: 700; }
    .fleet-who-title { color: var(--slate); font-weight: 600; font-size: var(--fs-base); margin-bottom: 3px; }
    .fleet-who-desc { color: var(--body-text); font-size: var(--fs-sm); margin: 0; }

    /* ── Comparison section ── */
    .compare-section { background: var(--cream); padding: var(--section-pad); }
    /* Audit 2026-05-06: white override variant so it contrasts with
       cream deliverables-section above. */
    .compare-section.compare-section--white { background: var(--white); }
    .compare-header { margin-bottom: 40px; }
    .compare-table-wrap { border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); overflow: hidden; }
    .compare-scroll { overflow-x: auto; }
    .compare-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); min-width: 600px; }

    /* ── Table header cells ── */
    .compare-th-empty { background: var(--slate); padding: var(--sp-4) 20px; color: var(--on-dark-default); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; width: 26%; }
    .compare-th { background: var(--slate); color: var(--white); padding: var(--sp-4) 20px; text-align: left; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }
    .compare-th--highlight { background: var(--orange); color: var(--slate); padding: var(--sp-4) 20px; text-align: left; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }

    /* ── Table body cells ── */
    .compare-td-label { padding: var(--sp-3) 20px; border-bottom: 1px solid var(--border); background: var(--cream); font-weight: 600; color: var(--slate); font-size: var(--fs-sm); }
    .compare-td-label--last { padding: var(--sp-3) 20px; background: var(--cream); font-weight: 600; color: var(--slate); font-size: var(--fs-sm); }
    .compare-td { padding: var(--sp-3) 20px; border-bottom: 1px solid var(--border); color: var(--body-text); }
    .compare-td--muted { padding: var(--sp-3) 20px; border-bottom: 1px solid var(--border); color: var(--body-text); }
    .compare-td--highlight { padding: var(--sp-3) 20px; border-bottom: 1px solid var(--border); background: var(--orange-tint); color: var(--orange-darkest); font-weight: 600; }
    .compare-td--last { padding: var(--sp-3) 20px; color: var(--body-text); }
    .compare-td--last-highlight { padding: var(--sp-3) 20px; background: var(--orange-tint); color: var(--orange-darkest); font-weight: 600; }

    /* ── Table footnotes ── */
    .table-scroll-hint { display:none; text-align:center; font-size:var(--fs-xs); color:var(--ink-2); margin-top: 10px; }
    .compare-footnote { text-align: center; font-size: var(--fs-xs); color: var(--ink-2); margin-top: var(--sp-4); opacity: 0.7; }
    /* Was --orange (var(--orange), 3.4:1 on cream — AA fail at 12px). Now uses
       --orange-text (#A83D00, 5.98:1 — AA pass). Same brand orange, just
       AA-disciplined for body-text size. */
    .compare-footnote a { color: var(--orange-text); }

    /* === Responsive overrides === */
    @media (max-width: 960px) {
      .bootcamp-grid { grid-template-columns: 1fr; }
      .fleet-grid { grid-template-columns: 1fr; }
      .fleet-grid-layout { grid-template-columns: 1fr; }
    }
    @media (max-width: 768px) {
      .fleet-grid > div:first-child > .btn {
        display: block;
        width: 100%;
        text-align: center;
      }
      .fleet-pricing-grid { grid-template-columns: 1fr; }
      .fleet-pricing-grid-layout { grid-template-columns: 1fr; }
      /* Section padding at tablet handled globally by --section-pad token
         (styles.css sets it to 64px 0 at this breakpoint). No overrides needed. */
      .section-bg-white-top { padding: 56px 0 0; }
    }