/* SELF ENTOURAGE — ACCESSIBILITY HARDENING V21
   Final accessibility authority loaded after the V20 public surface.
   Repairs measured contrast drift without reintroducing a competing visual system. */

:root{
  --se-a11y-ink:#172a31;
  --se-a11y-soft:#415860;
  --se-a11y-navy:#244653;
  --se-a11y-paper:#fffdf8;
  --se-a11y-white:#ffffff;
  --se-a11y-ivory:#f7f3ea;
  --se-a11y-line:rgba(45,77,89,.22);
}

/* premium-final-v10.css only collapses .feature-grid.four / .poster-pillar-grid /
   .number-grid to a single column at max-width:360px, keeping a 2-column grid for
   every viewport from 361-700px -- which is nearly every real phone (375-430px).
   That squeezes each card's body copy into a ~164px column and wraps it 1-3 words
   per line (verified: home page "Diagnose the gap" / "Build AI capability" /
   "Build the system" / "Move into execution" cards at 390px). Widen the
   single-column range to cover real phone widths; tablets and up still get the
   2-column layout from the unmodified 700px rule. */
@media(max-width:600px){
  html body :is(.feature-grid.four,.poster-pillar-grid,.number-grid){
    grid-template-columns:1fr!important;
  }
}

/* background-governance-v22.css conflicts with itself: its "ordinary public
   surfaces" rule (main > section:not(.signal-band):not(.movement-banner), ...)
   has higher specificity (two :not() clauses) than its own dedicated
   ".page-hero, .product-hero { background: var(--se-bg-warm-gradient) }" rule,
   so every hero on the site renders as flat solid ivory instead of the warm
   gradient the file's own comment says heroes should keep ("Heroes keep the
   exact premium warm treatment seen on the approved homepage") -- verified:
   computed background-image on .page-hero is "none", not the gradient.
   Restore it with enough specificity to actually win. */
html body[data-se-page] main :is(.page-hero,.product-hero),
html body[data-se-canonical-product="true"] main :is(.page-hero,.product-hero),
html body[data-product-slug] main :is(.page-hero,.product-hero){
  background:var(--se-bg-warm-gradient)!important;
}

/* .route-guide-section itself is meant to be a dark band (see the dark
   gradient !important rule for it in ux-reconciliation-v17.css, paired there
   with white .section-heading text) but perfect-public-site-v20.css's
   .section{background:var(--se-ivory)!important} rule ties with it on
   specificity and wins on load order, leaving the section cream while the
   heading/paragraph/eyebrow above it stay forced white (verified: solid
   cream background, no gradient, white h2 -- start-here.html "Three
   questions. One responsible next route."). Match the text to the
   background that actually renders. */
html body[data-se-page="start-here"] .route-guide-section .section-heading :is(h1,h2,h3,h4,.eyebrow){
  color:var(--se-a11y-ink)!important;
}
html body[data-se-page="start-here"] .route-guide-section .section-heading p{
  color:var(--se-a11y-soft)!important;
}

/* .hero-aside and .decision-panel's dark gradient backgrounds
   (premium-home-v8.css / premium-site-v8.css) were retired so
   background-governance-v22.css's white card treatment wins consistently
   (verified: solid white background, no gradient, on both home and
   non-home pages). premium-final-v10.css, sovereign-global-v13.css, and
   ux-reconciliation-v17.css still force their heading/paragraph text white
   from the old "dark surfaces are always readable" assumption and outrank
   background-governance-v22.css's own text-color rules on specificity,
   producing white-on-white (about.html "Self Entourage exists to:" and its
   "Pick the cleanest entry point" decision panel). Match the text to the
   background that actually renders now. */
html body[data-se-page] :is(.hero-aside,.decision-panel) :is(h1,h2,h3,h4,h5,h6,strong){
  color:var(--se-a11y-ink)!important;
}
html body[data-se-page] :is(.hero-aside,.decision-panel) :is(p,li){
  color:var(--se-a11y-soft)!important;
}

/* V20 light cards must never inherit legacy light-on-dark copy. */
html body[data-se-page] :is(.funnel-proof,.contact-panel,.notice,.route-guide-shell){
  background:var(--se-a11y-white)!important;
  color:var(--se-a11y-ink)!important;
}
html body[data-se-page] :is(.funnel-proof,.contact-panel,.notice,.route-guide-shell) :is(h1,h2,h3,h4,h5,h6,strong){
  color:var(--se-a11y-ink)!important;
}
html body[data-se-page] :is(.funnel-proof,.contact-panel,.notice,.route-guide-shell) :is(p,li,label,small){
  color:var(--se-a11y-soft)!important;
}

/* Start Here route guide follows the current light public design system. */
html body[data-se-page="start-here"] .route-guide-section .route-guide-shell{
  border-color:var(--se-a11y-line)!important;
  background:var(--se-a11y-white)!important;
  color:var(--se-a11y-ink)!important;
}
html body[data-se-page="start-here"] .route-guide-section .route-guide-meta,
html body[data-se-page="start-here"] .route-guide-section .route-guide-meta strong,
html body[data-se-page="start-here"] .route-guide-section .route-guide-question h3,
html body[data-se-page="start-here"] .route-guide-section .route-guide-result h3{
  color:var(--se-a11y-ink)!important;
}
html body[data-se-page="start-here"] .route-guide-section :is(.route-guide-question,.route-guide-result) p,
html body[data-se-page="start-here"] .route-guide-section .route-guide-privacy,
html body[data-se-page="start-here"] .route-guide-section .route-guide-privacy small{
  color:var(--se-a11y-soft)!important;
}
html body[data-se-page="start-here"] .route-guide-option{
  border-color:var(--se-a11y-line)!important;
  background:var(--se-a11y-ivory)!important;
  color:var(--se-a11y-ink)!important;
}
html body[data-se-page="start-here"] .route-guide-option:hover,
html body[data-se-page="start-here"] .route-guide-option:focus-visible,
html body[data-se-page="start-here"] .route-guide-option[aria-pressed="true"]{
  border-color:var(--se-a11y-navy)!important;
  background:var(--se-a11y-white)!important;
  color:var(--se-a11y-navy)!important;
}
html body[data-se-page="start-here"] .route-guide-progress span{
  background:rgba(36,70,83,.20)!important;
}
html body[data-se-page="start-here"] .route-guide-progress span[data-complete="true"]{
  background:linear-gradient(90deg,#b94b43,#b38a27)!important;
}
html body[data-se-page="start-here"] .route-guide-result{
  background:var(--se-a11y-ivory)!important;
  color:var(--se-a11y-ink)!important;
}

/* Canonical product sections are light under V20; keep their text and badges legible. */
html body[data-se-canonical-product="true"] main .section{
  background:var(--se-a11y-ivory)!important;
  color:var(--se-a11y-ink)!important;
}
html body[data-se-canonical-product="true"] main .section :is(h1,h2,h3,h4,h5,h6,strong){
  color:var(--se-a11y-ink)!important;
}
html body[data-se-canonical-product="true"] main .section :is(p,li,label,small){
  color:var(--se-a11y-soft)!important;
}
html body[data-se-canonical-product="true"] .turnaround-badge{
  background:var(--se-a11y-ivory)!important;
  border-color:var(--se-a11y-line)!important;
  color:var(--se-a11y-navy)!important;
}

/* ux-reconciliation-v17.css forces the home hero H1 to max-width:10ch!important
   under body[data-se-page="home"] .page-hero h1, at higher specificity than every
   other max-width rule targeting it (12/13/15/18ch). At mobile widths this clamps
   a 9-word headline to roughly 5-6 characters per line -- eight or nine ragged
   short lines instead of the 2-3 lines every other page's hero renders (verified:
   product, generic-page, and canonical-product heroes all already resolve
   max-width:none at mobile and wrap normally; only the home hero is constrained).
   Let the home hero headline use the full column width like every other page. */
@media(max-width:760px){
  html body[data-se-page="home"] .page-hero h1{
    max-width:none!important;
  }
}

/* product-visual-rescue-v16.css (and premium-product-v8.css/perfect-public-site-v20.css
   before it) force .product-hero .lede / .route-section > .wrap > .lede /
   .funnel-close > .wrap > .lede to a pale near-white (#dce6e8/#D1DEE1/#d7e2e5),
   assuming .product-hero and .route-section still carry their old dark gradient
   backgrounds. background-governance-v22.css now makes both surfaces the light
   warm-ivory hero/section treatment, but v16's three-class selector still out-
   specifies governance's own text-color rule, leaving near-invisible pale text on
   a light background (verified: cream background, #dce6e8 text -- every
   product-*.html hero subtitle and "How it works" intro paragraph). Match the
   text to the background that actually renders. */
html body[data-se-canonical-product="true"] .product-hero .lede,
html body[data-se-canonical-product="true"] .route-section > .wrap > .lede,
html body[data-se-canonical-product="true"] .funnel-close > .wrap > .lede{
  color:var(--se-a11y-soft)!important;
}

/* brand-identity.css keeps a self-consistent dark-gradient-card system gated behind
   body.se-legacy-normalized (added by site-shell.js on pages outside the premium-v8+
   template family: services.html, install-enhancements.html, site-runtime-audit.html,
   traffic-domination-engine.html, etc.). Its own heading/paragraph colors for that
   system (#FAF9F5 / #C9D7DA) are correct for a dark card, but
   background-governance-v22.css's blanket "every heading/paragraph inside a non-dark
   main section is dark ink" rule out-specifies them via a long :not() chain and wins,
   while brand-identity's dark gradient background still wins the background fight --
   producing dark ink text on a dark card (verified: services.html "Core Capabilities"
   cards, install-enhancements.html / site-runtime-audit.html feature cards). Restore
   the light text this dark card actually needs. */
html body.se-legacy-normalized.se-legacy-normalized :is(.card,.panel,.dark-panel,.command-card) :is(h1,h2,h3,h4,h5,h6){
  color:#faf9f5!important;
}
html body.se-legacy-normalized.se-legacy-normalized :is(.card,.panel,.dark-panel,.command-card) :is(p,li){
  color:#c9d7da!important;
}

/* Shared footer uses semantic h3 section headings. Match the former h4 visual role. */
.site-footer .footer-heading,
.site-footer h3.footer-heading{
  margin:0 0 .75rem!important;
  color:#e5c46d!important;
  font:800 .78rem/1.2 Inter,system-ui,sans-serif!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}