/* AAP design tokens — the single source of colour, type, spacing and component geometry.
 *
 * 2026-09-10. The 2026-09-10 audit measured 581 distinct colour values, two primary blues on the
 * same page, six near-identical tints, five button systems, nine competing H1 rules and 101
 * container widths across 62 stylesheets. Rather than edit 62 files and 349 !important rules that
 * already fight each other, this sheet is printed LAST and states the answer once. Deleting the
 * upstream drift is a later, safer job now that the outcome no longer depends on it.
 *
 * Scoping rules used throughout:
 *   - `body:not(.home)` protects the homepage, whose hero type Ryan tuned by hand.
 *   - `.aap-page-content > X` targets bands injected at the content root, never a nested copy.
 *   - Launcher and consent-bar geometry are owned elsewhere and deliberately untouched here.
 */

/* ── 1. One blue ───────────────────────────────────────────────────────────
 * The theme token #1a56db wins because the header, nav CTA and most heroes already use it, so it
 * is the smallest visible change. Every module that minted its own blue is aliased to it. The
 * universal selector is deliberate: these custom properties are re-declared on component roots,
 * so a :root override alone would lose.                                                        */
:root,
*{
  --color-blue:#1a56db;
  --blue:#1a56db;
  --aap-blue:#1a56db;
  --aapo-blue:#1a56db;
  --aapt-blue:#1a56db;
  --proof-blue:#1a56db;
  --cpg-blue:#1a56db;
  --aap-avail-blue:#1a56db;
  --color-brand-blue:#1a56db;
  --color-muted:#52647a;
}

/* Primary buttons, whatever system they came from. */
html body[class] .aap-btn--primary,
html body[class] .btn-primary,
html body[class] .aap-outcome-btn:not(.aap-outcome-btn--secondary),
html body[class] .aap-tech-btn,
html body[class] .aap-cband__go,
html body[class] .aap-credentialing-builder__submit,
html body[class] .aap-credentialing-builder__buy,
html body[class] .aap-ff-submit,
html body[class] .aap-bridge__go,
html body[class] .aap-magnet-band button[type="submit"],
html body[class] .aap-page-content .button{
  background:#1a56db!important;
  border-color:#1a56db!important;
  color:#fff!important;
}
html body[class] .aap-btn--primary:hover,
html body[class] .btn-primary:hover,
body .aap-outcome-btn:not(.aap-outcome-btn--secondary):hover,
body .aap-tech-btn:hover,
body .aap-cband__go:hover,
body .aap-credentialing-builder__submit:hover,
body .aap-credentialing-builder__buy:hover,
body .aap-ff-submit:hover,
body .aap-bridge__go:hover,
body .aap-page-content .button:hover{background:#1547b8!important;border-color:#1547b8!important}

/* Text links read as links. */
body .aap-page-content a:not([class]),
body .aap-text-link{color:#1a56db;text-decoration:underline;text-underline-offset:3px}
body [class*="--dark"] a:not([class]),
body .aap-cta-band a:not([class]),
body .aap-bridge a:not([class]),
body .aap-standbehind a:not([class]),
body .aap-cband a:not([class]){color:#bcd4ff!important}

/* ── 2. One button geometry ────────────────────────────────────────────────
 * Radius 14, 48px tall, Poppins 14.4/750 — the theme's own .aap-btn recipe. Four other systems
 * are folded into it so a page cannot show two button shapes.                                   */
html body[class] .aap-btn,
html body[class] .btn,
body .aap-outcome-btn,
html body[class] .aap-tech-btn,
html body[class] .aap-cband__go,
html body[class] .aap-credentialing-builder__submit,
html body[class] .aap-credentialing-builder__buy,
html body[class] .aap-ff-submit,
html body[class] .aap-bridge__go,
html body[class] .aap-page-content .button{
  border-radius:14px!important;
  font-family:Poppins,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;
  font-size:14.4px!important;
  font-weight:750!important;
  line-height:1.2!important;
  min-height:48px!important;
  padding:12px 20px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-decoration:none!important;
}
/* One secondary: outlined navy on light, outlined white on navy. */
html body[class] .aap-btn--secondary,
html body[class] .aap-outcome-btn--secondary,
html body[class] .btn-outline{
  background:transparent!important;
  border:2px solid rgba(15,42,71,.22)!important;
  color:#0f2a47!important;
}
body .aap-cta-band .aap-btn--secondary,
body .aap-bridge .aap-btn--secondary,
body .aap-cband .aap-btn--secondary,
body [class*="--dark"] .aap-btn--secondary,
body [class*="--dark"] .btn,
body .aap-hero--dark .aap-btn--secondary,
body .aap-standbehind .aap-btn--secondary,
body .btn-outline-white{
  border-color:rgba(255,255,255,.55)!important;
  color:#fff!important;
}

/* ── 3. One tint ───────────────────────────────────────────────────────────
 * #eef3fa is already the dominant rendered tint (137 bands vs 74), so making it the only one is
 * the least visible change. The five near-identical strays are mapped onto it.                  */
/* Every selector carries the dark guard. A section that paints itself navy owns white text, and
 * repainting only its background is how you get white on pale. Learned the hard way 2026-09-10:
 * the homepage "$10M+" stat band went unreadable. NEVER set a background here without either
 * excluding inverted surfaces or setting the text colour in the same rule. */
html body[class] .aap-section--tint:not([class*="dark"]):not([class*="navy"]),
html body[class] .aap-section--alt:not([class*="dark"]):not([class*="navy"]),
html body[class] .aap-section:nth-of-type(even):not([class*="dark"]):not([class*="navy"]):not(.aap-hero):not(.aap-cta-band),
html body[class] .aap-faq:not([class*="dark"]),
html body[class] .aap-related:not([class*="dark"]),
html body[class] .aap-answers:not([class*="dark"]),
html body[class] .aap-organic-evidence:not([class*="dark"]),
html body[class] .aap-proof-step:not([class*="dark"]),
html body[class] .aap-work-moves:not([class*="dark"]),
html body[class] .aap-expert-proof:not([class*="dark"]),
html body[class] .aap-start-commitment:not([class*="dark"]),
html body[class] .aap-payer-trust:not([class*="dark"]){background-color:#eef3fa!important}

/* Two adjacent tinted blocks read as one long band. The second one goes white. */
body .aap-page-content > .aap-related + .aap-related,
body .aap-page-content > .aap-section--tint + .aap-section--tint{background-color:#fff!important}

/* ── 4. One column ─────────────────────────────────────────────────────────
 * Section text sits at x=144 (1200 inner + 24 padding, centred at 1440). Injected bands each
 * brought their own width: 28, 140, 160, 180, 200, 225, 245, 250, 256, 278. Boxed asides get a
 * 1152 box so their EDGE lands on 144; full-bleed bands give their inner the same box so their
 * TEXT lands on 144.                                                                            */
body .aap-page-content > .aap-related,
body .aap-page-content > .aap-related-reading,
body .aap-page-content > .aap-outcome-next-step,
body .aap-page-content > .aap-expert-proof,
body .aap-page-content > .aap-answers,
body .aap-page-content > .aap-work-moves,
body .aap-page-content > .aap-paytrust,
body .aap-page-content > .aap-credentialing-builder,
body .aap-page-content > .aap-credentialing-builder-link,
body .aap-page-content > .aap-start-commitment,
body .aap-page-content > .aap-tech-capability,
body .aap-page-content > .aap-watch,
body .aap-page-content > .aap-outcome{
  max-width:1152px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}
/* Full-bleed bands keep their background edge-to-edge; only the content is columned. */
body .aap-bridge__inner,
body .aap-cband__inner,
body .aap-magnet-band__inner,
body .aap-standbehind__inner,
body .aap-cta-band__inner{
  max-width:1152px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}
/* Bands with no inner wrapper of their own get the column as padding. */
body .aap-page-content > .aap-cband,
body .aap-page-content > .aap-magnet-band,
body .aap-page-content > .aap-standbehind{
  padding-left:max(24px,calc((100% - 1152px) / 2))!important;
  padding-right:max(24px,calc((100% - 1152px) / 2))!important;
  box-sizing:border-box!important;
}

/* Mobile: one 24px gutter for every injected band. They were at 14, 16 and 20. */
@media(max-width:900px){
  body .aap-page-content > .aap-related,
  body .aap-page-content > .aap-related-reading,
  body .aap-page-content > .aap-outcome-next-step,
  body .aap-page-content > .aap-expert-proof,
  body .aap-page-content > .aap-answers,
  body .aap-page-content > .aap-work-moves,
  body .aap-page-content > .aap-paytrust,
  body .aap-page-content > .aap-credentialing-builder,
  body .aap-page-content > .aap-credentialing-builder-link,
  body .aap-page-content > .aap-start-commitment,
  body .aap-page-content > .aap-tech-capability,
  body .aap-page-content > .aap-watch,
  body .aap-page-content > .aap-outcome{
    margin-left:24px!important;
    margin-right:24px!important;
    max-width:calc(100% - 48px)!important;
  }
  body .aap-bridge__inner,
  body .aap-cband__inner,
  body .aap-magnet-band__inner,
  body .aap-standbehind__inner,
  body .aap-cta-band__inner,
  body .aap-page-content > .aap-cband,
  body .aap-page-content > .aap-magnet-band,
  body .aap-page-content > .aap-standbehind{
    padding-left:24px!important;
    padding-right:24px!important;
  }
}

/* ── 5. One heading scale ──────────────────────────────────────────────────
 * Nine H1 rules rendered eight sizes; injected bands each brought their own H2. The home hero is
 * excluded: Ryan set that size himself.                                                         */
body:not(.home) main h1,
body:not(.home) .aap-hero h1,
body:not(.home) .aap-page-hero h1{font-size:52px!important;line-height:1.1!important;font-weight:700!important}
@media(max-width:900px){
  body:not(.home) main h1,
  body:not(.home) .aap-hero h1,
  body:not(.home) .aap-page-hero h1{font-size:35.1px!important;line-height:1.15!important}
}
/* Section headings. */
body main .aap-section > .aap-section__inner > h2{font-size:44.8px!important;line-height:1.15!important;font-weight:700!important}
@media(max-width:900px){body main .aap-section > .aap-section__inner > h2{font-size:30px!important}}
/* Injected-band headings share one smaller size instead of eight. */
body .aap-related > h2, body .aap-related__label,
body .aap-outcome-next-step h2,
body .aap-expert-proof h2,
body .aap-answers__head h2,
body .aap-work-moves h2,
body .aap-standbehind h2,
body .aap-cband h2,
body .aap-bridge h2,
body .aap-tech-capability h2,
body .aap-credentialing-builder__intro h2,
body .aap-ehr__head h2,
body .aap-cta-band__inner h2,
body .aap-project-availability__body h2,
body .aap-funnel__intro h2,
body .aap-outcome__heading h2,
body .aap-package-buying-guide__intro h2{font-size:36px!important;line-height:1.2!important;font-weight:700!important}
@media(max-width:900px){
  body .aap-related > h2, body .aap-related__label,
  body .aap-outcome-next-step h2, body .aap-expert-proof h2, body .aap-answers__head h2,
  body .aap-work-moves h2, body .aap-standbehind h2, body .aap-cband h2,
  body .aap-bridge h2, body .aap-tech-capability h2, body .aap-credentialing-builder__intro h2,
  body .aap-ehr__head h2, body .aap-cta-band__inner h2, body .aap-project-availability__body h2,
  body .aap-funnel__intro h2, body .aap-outcome__heading h2, body .aap-package-buying-guide__intro h2{font-size:26px!important}
}
/* Card headings, one weight. */
body main h3{font-weight:700!important}

/* ── 6. One eyebrow ────────────────────────────────────────────────────────
 * Defined three ways in style.css alone plus twelve private classes. One blue pill above every
 * H1 and section heading, at every width; white pill on navy.                                   */
body:not(.home) main .eyebrow,
body.home main .aap-section .eyebrow,
body main [class*="__eyebrow"],
body main .aap-outcome__eyebrow,
body main .aap-tech-eyebrow,
body main .aap-credentialing-builder__eyebrow{
  display:inline-block!important;
  background:rgba(26,86,219,.09)!important;
  color:#1a56db!important;
  border-radius:999px!important;
  padding:.4rem .85rem!important;
  font-size:.72rem!important;
  font-weight:700!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  width:auto!important;
}
/* On a navy ground the blue pill fails contrast (measured 1.9:1 and 2.36:1). */
body .aap-hero--dark .eyebrow,
body .aap-cta-band .eyebrow,
body .aap-bridge .eyebrow,
body .aap-cband .eyebrow,
body .aap-standbehind .eyebrow,
body .aap-state .hero .eyebrow,
body .aap-state .hero .pill,
body .aap-outcome-hero .eyebrow{
  background:rgba(255,255,255,.14)!important;
  color:#fff!important;
}

/* ── 7. Contrast ───────────────────────────────────────────────────────────
 * Four recipes measured below 3:1 against their own background.                                 */
/* Pale text ONLY where the component's own background is provably dark. */
body .aap-answers__card--proof li,
body .aap-answers__card--proof p{color:#d7e3f5!important}
body .site-footer a,
body .aap-footer-logo-slogan{color:#cfe0f7!important}

/* ── 8. Grids never strand a card ──────────────────────────────────────────
 * Six grids rendered a lone last card in an otherwise full row.                                 */
@media(min-width:901px){
  body .aap-card-grid > :last-child:nth-child(3n+1),
  body .aap-cap-grid > :last-child:nth-child(4n+1),
  body .aap-proof-grid > :last-child:nth-child(3n+1){grid-column:1 / -1}
}

/* ── 9. Spacing ────────────────────────────────────────────────────────────
 * A card grid followed by a paragraph had no gap at all, on 51 state pages.                     */
body .aap-card-grid + p,
body .aap-card-grid + ul,
body .aap-cap-grid + p{margin-top:24px!important}

/* The 64px strip between the last block and the footer showed as a navy-white-navy seam on every
 * page whose last band is dark. */
body .aap-page-content{margin-bottom:0!important}
body .aap-page-content > :last-child{margin-bottom:0!important}

/* ── 10. Nothing overflows ─────────────────────────────────────────────────
 * /about/ scrolled to 1734px at a 1440 viewport because a split figure had no width cap.        */
body main img,
body main video,
body main iframe{max-width:100%!important;height:auto}
body .aap-split__media,
body .aap-split > *{min-width:0!important}
body main table{max-width:100%}

/* ── 11. The last holdouts ─────────────────────────────────────────────────
 * Measured live after the first two passes. Doubling a class name is a legitimate way to raise
 * specificity without inventing an ancestor, and it beats the `body.aap-family-x :is(...)` rules
 * that were still winning. The class-less checkout submits are matched structurally.             */
html body[class] .aap-credentialing-builder__submit.aap-credentialing-builder__submit,
html body[class] .aap-credentialing-builder__buy.aap-credentialing-builder__buy,
html body[class] .aap-outcome-btn.aap-outcome-btn:not(.aap-outcome-btn--secondary),
html body[class] .aap-page-content form button[type="submit"],
html body[class] .aap-page-content .aap-ff-actions button{
  background:#1a56db!important;
  border-color:#1a56db!important;
  color:#fff!important;
  border-radius:14px!important;
  min-height:48px!important;
}

/* Band headings the live pass still found off the scale. */
body .aap-start-commitment h2,
body .aap-revenue-buyer-details__intro h2,
body .aap-funnel h2,
body .aap-package-panel h2{font-size:36px!important;line-height:1.2!important;font-weight:700!important}
@media(max-width:900px){
  body .aap-start-commitment h2,
  body .aap-revenue-buyer-details__intro h2,
  body .aap-funnel h2,
  body .aap-package-panel h2{font-size:26px!important}
}

/* ── 12. Case studies and the local pages ──────────────────────────────────
 * The last two families measured off the scale. Case studies are an all-white article skin whose
 * section headings render 34px; the local pages carry class-less blue-bar H2s at 31.2 and 32.  */
html body[class] .aap-credentialing-builder-link{background-color:#eef3fa!important}
body .aap-proof-section > h2,
body .aap-proof-next > h2,
body .aap-proof-intro > h2,
body main .aap-page-content > section > h2{font-size:44.8px!important;line-height:1.15!important;font-weight:700!important}
body .aap-proof-card h2{font-size:36px!important}
@media(max-width:900px){
  body .aap-proof-section > h2,
  body .aap-proof-next > h2,
  body .aap-proof-intro > h2,
  body main .aap-page-content > section > h2{font-size:30px!important}
  body .aap-proof-card h2{font-size:26px!important}
}

/* ── 13. The 52 credentialing state pages ──────────────────────────────────
 * These render a legacy vocabulary (.wrap/.hero/.btn/.cta/.tint/.faq) with its own type system:
 * body copy in -apple-system at 17px/#16202e where the rest of the site is Inter 16px/#45516a,
 * H2 at 31.2-32.8 where sections are 44.8, and a 16px .cta radius. Internally consistent, and the
 * reason a visitor who lands on one from Google does not think they are on the same site. Mapped
 * here rather than by rewriting 52 pages of markup: the content and the URLs are what rank.       */
html body[class] .aap-state,
html body[class] .aap-state p,
html body[class] .aap-state li,
html body[class] .aap-state dd,
html body[class] .aap-state td,
html body[class] .aap-state summary{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;
  font-size:16px!important;
  line-height:1.65!important;
}
html body[class] .aap-state p,
html body[class] .aap-state li,
html body[class] .aap-state dd{color:#45516a!important}
html body[class] .aap-state h1,
html body[class] .aap-state h2,
html body[class] .aap-state h3,
html body[class] .aap-state summary{
  font-family:Poppins,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;
}
html body[class] .aap-state h2{font-size:44.8px!important;line-height:1.15!important;font-weight:700!important;color:#0f2a47!important}
html body[class] .aap-state h3{font-size:23.2px!important;font-weight:700!important}
html body[class] .aap-state .cta{
  border-radius:14px!important;
  font-family:Poppins,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;
  font-size:14.4px!important;
  font-weight:750!important;
  min-height:48px!important;
  padding:12px 20px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
/* The legacy .wrap sat at 113-114px; the rest of the site puts text at 144. */
html body[class] .aap-state .wrap{
  max-width:1152px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:0!important;
  padding-right:0!important;
  box-sizing:border-box!important;
}
@media(max-width:900px){
  html body[class] .aap-state .wrap{
    max-width:calc(100% - 48px)!important;
    margin-left:24px!important;
    margin-right:24px!important;
  }
  html body[class] .aap-state h2{font-size:30px!important}
  html body[class] .aap-state h3{font-size:21px!important}
}

/* ── 14. The closing band ──────────────────────────────────────────────────
 * Appended by aap-closing-band.php on pages that had no ending. It is the theme's own band, so
 * it only needs its spacing stated once.                                                         */
html body[class] .aap-cta-band--appended{margin-top:0!important}

/* ── 15. Dark surfaces win, always ─────────────────────────────────────────
 * Measured 2026-09-10 after the tint regression. Two rules in THIS file were fighting and the
 * general one won: `body:not(.home) main .eyebrow` is (0,2,2) and beat `body .aap-standbehind
 * .eyebrow` at (0,2,1), so the blue pill stayed on a navy band at 2.36:1. Same story inside
 * `.aap-state`, where the legacy `.cta` block is navy #0f2a47 and the state text rules were
 * painting navy on navy at 1.00:1.
 *
 * These are last in the file AND highest in specificity on purpose. Anything that sets a colour
 * on a dark surface belongs here, so there is one place to look when contrast breaks.           */
html body[class] .aap-standbehind .eyebrow,
html body[class] .aap-bridge .eyebrow,
html body[class] .aap-cband .eyebrow,
html body[class] .aap-cta-band .eyebrow,
html body[class] .aap-outcome-hero .eyebrow,
/* The homepage hero eyebrow is Ryan's approved responsive treatment: a pill on desktop, plain
 * text on a phone. Giving it a translucent box turned it into a full-width grey slab on mobile.
 * It is excluded here and governed by the site's own CSS. */
html body[class]:not(.home) .aap-hero--dark .eyebrow,
html body[class]:not(.home) [class*="--dark"] .eyebrow,
html body[class] .aap-state .hero .eyebrow,
html body[class] .aap-state .hero .pill{
  background:rgba(255,255,255,.16)!important;
  color:#fff!important;
}

/* Legacy state pages: the closing `.cta` block and the hero are navy. */
html body[class] .aap-state .cta h1,
html body[class] .aap-state .cta h2,
html body[class] .aap-state .cta h3,
html body[class] .aap-state .hero h1,
html body[class] .aap-state .hero h2,
html body[class] .aap-state .hero h3{color:#fff!important}
html body[class] .aap-state .cta p,
html body[class] .aap-state .cta li,
html body[class] .aap-state .hero p,
html body[class] .aap-state .hero li{color:#d7e3f5!important}
html body[class] .aap-state .cta a:not(.btn):not(.cta),
html body[class] .aap-state .hero a:not(.btn):not(.cta){color:#bcd4ff!important}

/* ── 16. The last off-column asides ────────────────────────────────────────
 * Measured 2026-09-10 by block EDGE, not by text: section content sits on a 1152 box (edge 144 at
 * 1440), and these asides were each carrying their own inset - 160, 180, 200, 250. Only width is
 * touched here; no colour, so this cannot repeat the contrast regression.                        */
html body[class] .aap-page-content .aap-ehr,
html body[class] .aap-page-content .aap-standbehind,
html body[class] .aap-page-content .aap-next-step,
html body[class] .aap-page-content .aap-cband,
html body[class] .aap-page-content .aap-payer-trust,
html body[class] .aap-page-content .aap-revenue-buyer-details,
html body[class] .aap-page-content .aap-content-reviewer,
html body[class] .aap-page-content .aap-related-reading,
html body[class] .aap-page-content .aap-credentialing-builder,
html body[class] .aap-page-content .aap-credentialing-builder-link{
  /* width:100% matters. Without it, `margin:auto` CENTRES a block that is narrower than the
     column instead of aligning it: .aap-revenue-buyer-details went from an inset of 200 to a
     centred 360. Filling the column first, then centring the column, is the correct order. */
  width:100%!important;
  max-width:1152px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}
@media(max-width:900px){
  html body[class] .aap-page-content .aap-ehr,
  html body[class] .aap-page-content .aap-standbehind,
  html body[class] .aap-page-content .aap-next-step,
  html body[class] .aap-page-content .aap-cband,
  html body[class] .aap-page-content .aap-payer-trust,
  html body[class] .aap-page-content .aap-revenue-buyer-details,
  html body[class] .aap-page-content .aap-content-reviewer,
  html body[class] .aap-page-content .aap-related-reading,
  html body[class] .aap-page-content .aap-credentialing-builder,
  html body[class] .aap-page-content .aap-credentialing-builder-link{
    max-width:calc(100% - 48px)!important;
    margin-left:24px!important;
    margin-right:24px!important;
  }
}