/* ==========================================================================
   SOLVELR DESIGN SYSTEM v2
   Successor to solvelr-global.css. Built for the DESIGN PASS (task D2).

   DIRECTION — "rate sheet, not landing page."
   Solve Lending & Realty is a decision practice, not a loan catalogue. The site's
   own IA says so: /decisions/sell-or-refinance, /seller-situations/probate-sale,
   "We do not sell loans. We solve them." The people reading it are mid-decision —
   divorce, probate, foreclosure, downsizing — and they need to think clearly, not
   be sold to. So the system borrows the vernacular of the subject's real artifact,
   the loan comparison sheet: hairline rules, small-caps labels, figures set in
   tabular numerals so columns of dollars line up, and generous quiet space.
   The mint accent is a RULE or a MARKER, almost never a fill. That is the whole
   idea: authority comes from restraint and precision, not from contrast shouting.

   SIGNATURE — "the ledger rule."
   Every section label (.eyebrow / .solve-kicker /  / …) is
   followed by a hairline that runs to the end of the measure, the way a financial
   statement rules off a column heading. It costs one pseudo-element, it attaches to
   class names that ALREADY exist on ~480 pages, and it encodes something true —
   this page is a document you can check, not a pitch.

   PALETTE IS LOCKED by the design brief and is deliberately near-black + green.
   That is the Solve brand, not a default.

   ── GREEN TEXT RULING (approved by Kiyoshi, 2026-07-25) ──────────────────────
   The two brand greens fail WCAG AA as small text on light grounds:
       #00FF7F  mint       1.3:1 on white
       #00CC66  mint-deep  2.1:1 on white
       #6B7C93  muted      4.3:1 on white  (just under the 4.5:1 threshold)

   They are NOT retired. The ruling splits usage by role:

     USE #00FF7F / #00CC66 for
       · anything on a DARK ground (they pass comfortably there)
       · large display text
       · buttons and button fills
       · accents — rules, markers, borders, dividers, icons, focus rings

     USE the darker text-only siblings for SMALL TEXT ON LIGHT GROUNDS
       --sl-accent-text  #067A45   5.4:1 on white
       --sl-muted-text   #5A6B82   5.3:1 on white

   The locked brand values themselves are unchanged. The siblings exist ONLY to
   carry body-size text on light surfaces; never use them as fills or accents.
   Enforced and verified by scripts/contrast_audit.mjs (0 failures at 4.5:1).
   ─────────────────────────────────────────────────────────────────────────────

   TYPOGRAPHY — Playfair Display (display, used with restraint) + Inter (everything
   else). ONE enqueue, in the child theme's functions.php. Never an in-content
   <link>. Figures use Inter with tabular-nums rather than a third family.

   LAYOUT — carries the DESIGN-D1 fixes natively: ONE gutter token, full-bleed
   derived from that same token so the two can never drift, and tables that scroll
   instead of being clipped by Kadence's overflow.
   ========================================================================== */

/* ── TOKENS ───────────────────────────────────────────────────────────── */
:root {
  /* brand — locked */
  --sl-ink:          #0D1B2E;  /* deep navy, primary dark surface + body text */
  --sl-slate:        #1A2B3C;  /* mid navy, secondary dark surface */
  --sl-mint:         #00FF7F;  /* accent — rules, markers, primary button */
  --sl-mint-deep:    #00CC66;  /* accent on light surfaces (contrast-safe) */
  --sl-muted:        #6B7C93;  /* secondary text */

  /* surfaces */
  --sl-white:        #ffffff;
  --sl-whisper:      #F7FFFB;  /* mint whisper — alternate light band */
  --sl-tint:         #F0FEF7;  /* mint tint — callouts */
  --sl-tint-2:       #DEFCEE;  /* mint tint, stronger — table headers, chips */
  --sl-border:       #e5e7eb;  /* hairline on light */
  --sl-border-ink:   rgba(255,255,255,.14); /* hairline on dark */

  /* derived text colours */
  --sl-body:         #22364B;  /* body copy — softer than ink, still AA on white */
  --sl-body-dark:    rgba(255,255,255,.80);
  --sl-muted-dark:   rgba(255,255,255,.56);

  /* ACCESSIBLE TEXT VARIANTS — see "contrast contract" below.
     The locked brand values are unchanged; these are darker siblings used ONLY
     where the brand colour would sit behind small text on a light ground.
       --sl-mint      #00FF7F on white =  1.3:1   (decor only, never text)
       --sl-mint-deep #00CC66 on white =  2.1:1   (rules/markers/borders only)
       --sl-accent-text #067A45 on white = 5.4:1  AA for body-size text
       --sl-muted     #6B7C93 on white =  4.3:1   (just under AA at body size)
       --sl-muted-text #5A6B82 on white = 5.3:1   AA for body-size text */
  --sl-accent-text:  #067A45;
  --sl-muted-text:   #5A6B82;

  /* SEMANTIC WARNING — a documented design-system exemption (CONTENT-CLOSE F3).
     #ef4444 is not a brand colour; it carries meaning (a limit, a cap, a caution)
     and Kiyoshi's ruling is that the signal is kept. Its contrast on the light
     grounds it is used on:
       #ef4444 on #ffffff (white)      = 3.76:1
       #ef4444 on #F0FEF7 (--sl-tint)  = 3.62:1
     WCAG AA is 3:1 for LARGE text (>=18.66px bold or >=24px regular) and 4.5:1 for
     normal text. Every current use is large bold display type (28.8px/700 and
     20.31px/700), so both PASS AA at the size they are actually rendered.
     If this colour is ever needed at body size on a light ground, use
     --color-warning-text (#b91c1c, 6.47:1 on white) — same hue family, AA at any
     size. Never use --color-warning for normal-size text. */
  --color-warning:      #ef4444;
  --color-warning-text: #b91c1c;

  /* type */
  --sl-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sl-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --sl-t-xs:   0.75rem;
  --sl-t-sm:   0.8125rem;
  --sl-t-cap:  0.875rem;
  --sl-t-base: 1.0625rem;                       /* 17px */
  --sl-t-md:   1.0625rem;
  --sl-t-lg:   1.1875rem;
  --sl-t-xl:   clamp(1.25rem, 1.05rem + 0.9vw, 1.5rem);
  --sl-t-2xl:  clamp(1.5rem,  1.24rem + 1.2vw, 2rem);
  --sl-t-3xl:  clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem);
  --sl-t-4xl:  clamp(2.25rem, 1.6rem + 3vw,   3.5rem);

  --sl-lh-tight: 1.15;
  --sl-lh-head:  1.22;
  --sl-lh-body:  1.68;

  /* spacing — 8px base */
  --sl-1: 4px;   --sl-2: 8px;   --sl-3: 12px;  --sl-4: 16px;
  --sl-5: 24px;  --sl-6: 32px;  --sl-7: 48px;  --sl-8: 64px;  --sl-9: 96px;

  /* layout */
  --sl-gutter:  16px;
  --sl-measure: 68ch;          /* comfortable reading measure */
  --sl-max:     1140px;
  --sl-max-narrow: 800px;
  --sl-max-wide:   1320px;
  --sl-section-y: var(--sl-7);

  /* radii + shadow — restrained; this is a document, not a dashboard */
  --sl-r-sm: 4px;
  --sl-r:    8px;
  --sl-r-lg: 14px;
  --sl-r-pill: 999px;
  --sl-shadow-sm: 0 1px 2px rgba(13,27,46,.06);
  --sl-shadow:    0 2px 10px rgba(13,27,46,.07);
  --sl-shadow-lg: 0 12px 40px rgba(13,27,46,.14);

  --sl-ease: cubic-bezier(.2,.6,.2,1);
}
@media (min-width: 769px) {
  :root { --sl-gutter: 24px; --sl-section-y: var(--sl-9); }
}

/* ── RESET & BASE ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: var(--sl-font-body);
  font-size: var(--sl-t-base);
  line-height: var(--sl-lh-body);
  color: var(--sl-body);
  background: var(--sl-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

/* Figures line up like a rate sheet wherever numbers cluster. This is the
   quiet half of the signature — it costs nothing and it is why tables,
   stat strips and loan limits read as data rather than as copy. */
table, .stat-number, .stat-item__number, .kpi, .value,
.spec-value, .solve-table, .limits-table, .comparison-table, .matrix-table,
.specs-table, .payout-card, .path-table {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

a { color: var(--sl-mint-deep); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Visible keyboard focus everywhere — quality floor, not decoration. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--sl-mint-deep);
  outline-offset: 2px;
  border-radius: var(--sl-r-sm);
}
.dark-zone a:focus-visible, .solve-hero a:focus-visible,
 a:focus-visible,  a:focus-visible { outline-color: var(--sl-mint); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── LAYOUT MODEL (carries the DESIGN-D1 fixes) ───────────────────────── */
/* ONE gutter, on ONE wrapper. The previous system set it on .content-area AND
   .site-main AND .entry-content, which nest — 96px of padding on a 390px phone.
   .entry-content-wrap is the wrapper present on every Kadence template checked,
   so the gutter and the full-bleed offset below always cancel exactly. */
.content-area,
.site-main,
.entry-content-wrap,
.entry-content,
.wp-block-post-content {
  overflow: visible !important;
  margin: 0 !important;
  max-width: 100% !important;
}body .content-area,
body .site-main,
body .entry-content,
body .wp-block-post-content { padding-left: 0; padding-right: 0; }
/* ── DESIGN-D6: the gutter has to actually win ──────────────────────────────
   `body .entry-content-wrap` is (0,2,0). Kadence's own
   `.content-style-unboxed .entry:not(.loop-entry) > .entry-content-wrap { padding: 0 }`
   is (0,4,0) and loads later, so once D5's defuse removed the `!important` that had
   been carrying this declaration, the gutter lost on 545 of 552 pages. The full-bleed
   offset below is derived from the SAME token and kept applying, so the pair stopped
   cancelling — gutter 0, offset −16px. Visible as bands hanging one gutter past the
   content box (the 409-page clip metric) and body copy running edge-to-edge on 518.
   The class is repeated to reach (0,5,0) instead of naming Kadence's selector: no
   `!important` is needed, and a theme update cannot quietly win it back. Keep this
   value and the full-bleed offset on the one `--sl-gutter` token — they only cancel
   because they are the same number. */
.entry-content-wrap.entry-content-wrap.entry-content-wrap.entry-content-wrap.entry-content-wrap {
  padding-left: var(--sl-gutter);
  padding-right: var(--sl-gutter);
}
body .kadence-inner-column-inner,
body .wp-site-blocks,
body .entry-content > *,
body .wp-block-post-content > *,
body .wp-block-group,
body .wp-block-group__inner-container { max-width: 100%; }

.container {
  width: 100%;
  max-width: var(--sl-max);
  margin-inline: auto;
  padding-inline: var(--sl-gutter);
}
.container--narrow { max-width: var(--sl-max-narrow); }
.container--wide   { max-width: var(--sl-max-wide); }

.section     { padding-block: var(--sl-section-y); }
.section--sm { padding-block: var(--sl-6); }
.section--lg { padding-block: var(--sl-9); }
.text-center { text-align: center; }
.text-left   { text-align: left; }

/* Full-bleed: offset derived from the SAME token as the gutter. */
/* NOTE: the Advisor's Desk lanes (.hv-* / .sd-*) are deliberately NOT in this
   list. Those pages are keep-and-reskin: they already manage their own full-bleed
   inside .hv-page, and applying this offset on top of theirs overhung the viewport
   by one gutter on each side (measured: 406px of content in a 390px viewport). */
/* Scoped to .entry-content-wrap: that is the only element carrying the gutter, so
   it is the only place a negative offset has something to cancel. Unscoped, a block
   rendered outside it (an agent card emitted straight into .content-container, as on
   /riverside-county/seller-situations/conservatorship) hung one gutter off each edge. */
/* NOTE: scoping this rule to `.entry-content-wrap` was tried in D5 and reverted.
   Raising it from (0,1,0) to (0,2,0) changed how it resolved against the
   neutraliser rules below: it fixed the one page whose agent card renders outside
   that wrapper and broke nine others. The out-of-gutter case is handled surgically
   at the end of this file instead ("FULL-BLEED OUTSIDE THE GUTTER"). */
.hero-section, .trust-bar, .dark-zone, .mid-zone, .light-zone,
.soft-zone, .section-nav, .cta-box:not(.cta-box--alt):not(.cta-box--inline),
.cta-box--dark, .cta-box--gold, .cta-band,
.solve-hero, .solve-section, .solve-sticky-nav, .solve-final-cta, .solve-spanish {
  margin-left: calc(var(--sl-gutter) * -1);
  margin-right: calc(var(--sl-gutter) * -1);
  width: calc(100% + var(--sl-gutter) * 2);
  max-width: none;
}
/* The Advisor's Desk lanes carry their own reset — `.hv-page * { margin: 0 }` —
   which silently deletes the negative margin above while the widened `width`
   survives, leaving the block one gutter too wide and hanging off the right edge.
   Shared blocks (trust bar, agent card, byline) therefore stay in-flow in
   these lanes rather than trying to bleed. */
.hv-page :is(.trust-bar, .agent-card, .author-byline, .dark-zone, .mid-zone,
             .light-zone, .soft-zone, .cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-box--dark, .cta-box--gold),
.sd-page :is(.trust-bar, .agent-card, .author-byline, .dark-zone, .mid-zone,
             .light-zone, .soft-zone, .cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-box--dark, .cta-box--gold) {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

/* …and never inside a padded box. A .cta-box nested in a .tool-card has no gutter
   around it to cancel, so the widened width just overhangs the card and clips. */
:is(.card, .tool-card, .hero-box, .path-card, .option-card, .snippet-box,
    .scenario-block, .loan-card, .pivot-card, .program-card, .spec-card,
    .info-card, .authority-card, td, th, li, figure, blockquote)
:is(.hero-section, .trust-bar, .dark-zone, .mid-zone, .light-zone, .soft-zone,
    .section-nav, .cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-box--dark, .cta-box--gold, .cta-band) {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

/* …but never twice. A full-bleed section inside another one would compound the
   offset exactly the way the gutters used to. */
:is(.hero-section,.trust-bar,.dark-zone,.mid-zone,.light-zone,.soft-zone,.section-nav,
   .cta-box:not(.cta-box--alt):not(.cta-box--inline),.cta-band,.solve-section,.solve-hero)
:is(.hero-section,.trust-bar,.dark-zone,.mid-zone,.light-zone,.soft-zone,.section-nav,
   .cta-box:not(.cta-box--alt):not(.cta-box--inline),.cta-box--dark,.cta-box--gold,.cta-band,.solve-section) {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

/* Full-bleed sections provide their own inner gutter. Many county templates have
   NO .container child, so without this their text ran flush to the viewport edge.
   Where a .container IS present it must not add a second gutter on top. */
.hero-section, .trust-bar, .dark-zone, .mid-zone, .light-zone, .soft-zone,
.cta-box, .cta-box--dark, .cta-box--gold, .cta-band,
.solve-hero, .solve-section, .solve-final-cta, .solve-spanish {
  padding-inline: var(--sl-gutter);
}
:is(.hero-section,.trust-bar,.dark-zone,.mid-zone,.light-zone,.soft-zone,.cta-box:not(.cta-box--alt):not(.cta-box--inline),
    .cta-box--dark,.cta-box--gold,.cta-band,.solve-hero,.solve-section,
    .solve-final-cta,.solve-spanish) > .container,
:is(.hero-section,.trust-bar,.dark-zone,.mid-zone,.light-zone,.soft-zone,.cta-box:not(.cta-box--alt):not(.cta-box--inline),
    .cta-box--dark,.cta-box--gold,.cta-band,.solve-hero,.solve-section,
    .solve-final-cta,.solve-spanish) > * > .container {
  padding-inline: 0;
}

/* --- Carried forward from solvelr-global.css (the P5 test-import fixes) ------
   These are not cosmetic: without the first rule a 600x600 headshot renders at
   full size and swallows the hero on 376 county pages. Kept here because v2
   replaces global.css wholesale on the pages it is loaded for. */
.hero-eyebrow-container, .eyebrow-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sl-2);
  margin-bottom: var(--sl-4);
}
.eyebrow-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* ── ZONES ────────────────────────────────────────────────────────────── */
.dark-zone  { background: var(--sl-ink);   color: var(--sl-white); }
.mid-zone   { background: var(--sl-slate); color: var(--sl-white); }
.light-zone { background: var(--sl-white); color: var(--sl-body); }
.soft-zone  { background: var(--sl-whisper); color: var(--sl-body); }
:is(.dark-zone,.mid-zone) :is(h1,h2,h3,h4,h5,h6) { color: var(--sl-white); }
:is(.dark-zone,.mid-zone) p,
:is(.dark-zone,.mid-zone) li { color: var(--sl-body-dark); }

/* ── TYPOGRAPHY ───────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--sl-font-display);
  font-weight: 700;
  line-height: var(--sl-lh-head);
  color: var(--sl-ink);
  letter-spacing: -0.011em;
  text-wrap: balance;
}
h1 { font-size: var(--sl-t-4xl); line-height: var(--sl-lh-tight); margin-block: 0 var(--sl-5); }
h2 { font-size: var(--sl-t-3xl); margin-block: var(--sl-8) var(--sl-4); }
h3 { font-size: var(--sl-t-xl);  margin-block: var(--sl-6) var(--sl-3); }
/* h4 and below step out of the display face — at these sizes a serif reads as
   decoration, and these are almost always UI labels, not headings. */
h4, h5, h6 {
  font-family: var(--sl-font-body);
  font-weight: 650;
  letter-spacing: -0.005em;
  color: var(--sl-ink);
}
h4 { font-size: var(--sl-t-lg); margin-block: var(--sl-5) var(--sl-2); }
h5, h6 { font-size: var(--sl-t-base); margin-block: var(--sl-4) var(--sl-2); }
:is(h1,h2,h3,h4):first-child { margin-top: 0; }

p { margin-block: 0 var(--sl-4); max-width: var(--sl-measure); }
.text-center p, [style*="text-align:center"] p { margin-inline: auto; }
ul, ol { margin: 0 0 var(--sl-4) 1.15rem; max-width: var(--sl-measure); }
li { margin-bottom: var(--sl-2); }
strong, b { font-weight: 650; color: var(--sl-ink); }
:is(.dark-zone,.mid-zone) strong { color: var(--sl-white); }
small, .small, .micro, .fine-print, .mini-note, .disclaimer, .compliance-text {
  font-size: var(--sl-t-sm);
  color: var(--sl-muted);
  line-height: 1.55;
}
.lede, .lead-text, .solve-lead, .hero-copy, .desc {
  font-size: var(--sl-t-lg);
  line-height: 1.6;
  color: var(--sl-muted);
  max-width: 62ch;
  margin-bottom: var(--sl-5);
}
:is(.dark-zone,.mid-zone,.solve-hero) :is(.lede,.lead-text,.solve-lead) {
  color: var(--sl-body-dark);
}
.muted, .slr-muted, .sub, .specialist-note, .product-meta, .resource-desc,
.link-tile-desc, .related-link-desc, .spec-note, .form-sub, .role, .slr-small {
  color: var(--sl-muted);
  font-size: var(--sl-t-cap);
}
.accent-text, .green, .cell-green { color: var(--sl-mint-deep); font-style: normal; }
:is(.dark-zone,.mid-zone) :is(.accent-text,.green) { color: var(--sl-mint); }

/* ── SIGNATURE: THE LEDGER RULE ───────────────────────────────────────── */
/* A section label, then a hairline running out to the end of the measure — the
   way a statement rules off a column heading. Applied to the label classes that
   already exist across the site so ~480 pages inherit it without a markup edit. */
.eyebrow, .eyebrow-text, .solve-kicker,
.scenario-label, .use-case-label, .spec-label, .authority-label, .tool-label,
.solve-entity-label, .cat-title, .hero-eyebrow-label, .solve-answer-badge, .trust-title {
  display: flex;
  align-items: center;
  gap: var(--sl-3);
  font-family: var(--sl-font-body);
  font-size: var(--sl-t-xs);
  font-weight: 650;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sl-mint-deep);
  margin-bottom: var(--sl-4);
}
.eyebrow::after, .eyebrow-text::after, .solve-kicker::after, .scenario-label::after, .use-case-label::after, .authority-label::after, .solve-entity-label::after, .cat-title::after, .trust-title::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: currentColor;
  opacity: .28;
}
/* centred contexts get the rule on both sides so the label stays optically centred */
.text-center :is(.eyebrow,.eyebrow-text,.solve-kicker) {
  justify-content: center;
}
.text-center :is(.eyebrow,.eyebrow-text,.solve-kicker)::before {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: currentColor;
  opacity: .28;
}
:is(.dark-zone,.mid-zone,.solve-hero) :is(.eyebrow,.eyebrow-text,.solve-kicker,.solve-answer-badge) {
  color: var(--sl-mint);
}
/* Inline label chips keep the old inline-block behaviour — no rule. */
.label, .tag, .badge, .pill, .program-tag,
.solve-trust-chip,
.decision-tile-label, .tool-gold-pulse-label, .badge-row > * {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-2);
  font-family: var(--sl-font-body);
  font-size: var(--sl-t-xs);
  font-weight: 600;
  letter-spacing: .06em;
  padding: 4px 10px;
  border-radius: var(--sl-r-pill);
  background: var(--sl-tint-2);
  color: #04603A;
  border: 1px solid rgba(0,204,102,.28);
  text-transform: none;
}
:is(.dark-zone,.mid-zone,.solve-hero) :is(.label,.tag,.badge,.pill,.solve-trust-chip) {
  background: rgba(0,255,127,.10);
  color: var(--sl-mint);
  border-color: rgba(0,255,127,.30);
}

/* Off-palette legacy label colours are remapped onto the locked palette.
   gold/amber -> mint family, blue/navy -> ink family. */
.label-gold, .badge-gold, .tool-gold-label, .gold, .tag-price, .badge-slate {
  background: var(--sl-tint-2); color: #04603A; border-color: rgba(0,204,102,.28);
}
.label-blue, .badge-blue, .blue, .navy, .info-card-blue, .info-card-slate {
  background: #EEF2F7; color: var(--sl-ink); border-color: #D5DEE8;
}
.label-green, .badge-green, .tool-green, .info-card-green {
  background: var(--sl-tint); color: #04603A; border-color: rgba(0,204,102,.28);
}
.label-teal, .badge-purple { background: #EEF2F7; color: var(--sl-slate); border-color: #D5DEE8; }
.red, .tag-high { background: #FEF2F2; color: #9B1C1C; border-color: #FBD5D5; }
.tag-med { background: #FFFBEB; color: #7A4A05; border-color: #F5E3B3; }
.tag-low, .tag-speed { background: var(--sl-tint); color: #04603A; border-color: rgba(0,204,102,.28); }

/* ── BUTTONS ──────────────────────────────────────────────────────────── */
.btn, .btn-primary, .btn-secondary, .btn-outline, .btn-outline-dark, .btn-main,
.btn-dark, .btn-gold, .footer-btn, .fbtn-navy, .fbtn-gold, .solve-btn,
.solve-btn-gold, .solve-btn-outline, .nav-cta, .cta, .decision-link,
.decision-link-dark, .silo-main-link, .solve-county-primary-link, .card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sl-2);
  font-family: var(--sl-font-body);
  font-size: var(--sl-t-cap);
  font-weight: 650;
  letter-spacing: .01em;
  line-height: 1.2;
  padding: 14px 26px;
  border-radius: var(--sl-r);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s var(--sl-ease), border-color .18s var(--sl-ease),
              color .18s var(--sl-ease), transform .18s var(--sl-ease);
}
.btn:hover, .btn-primary:hover, .solve-btn:hover { text-decoration: none; }

/* Primary — the one place mint is allowed to be a fill. */
.btn-primary, .btn-main, .btn-gold, .solve-btn-gold, .fbtn-gold,
.nav-cta, .cta, .silo-main-link, .solve-county-primary-link {
  background: var(--sl-mint);
  color: var(--sl-ink);
  border-color: var(--sl-mint);
}
.btn-primary:hover, .btn-main:hover, .btn-gold:hover, .solve-btn-gold:hover,
.fbtn-gold:hover, .nav-cta:hover,
.cta:hover, .silo-main-link:hover, .solve-county-primary-link:hover {
  background: var(--sl-mint-deep);
  border-color: var(--sl-mint-deep);
  color: var(--sl-ink);
  transform: translateY(-1px);
}
/* Secondary — ink fill. */
.btn-secondary, .btn-dark, .fbtn-navy, .footer-btn, .solve-btn,
.decision-link-dark, .card-cta {
  background: var(--sl-ink);
  color: var(--sl-white);
  border-color: var(--sl-ink);
}
.btn-secondary:hover, .btn-dark:hover, .fbtn-navy:hover, .footer-btn:hover,
.solve-btn:hover, .decision-link-dark:hover, .card-cta:hover {
  background: var(--sl-slate);
  border-color: var(--sl-slate);
  color: var(--sl-white);
  transform: translateY(-1px);
}
/* Outline — on light and on dark. */
.btn-outline-dark, .decision-link  {
  background: transparent; color: var(--sl-ink); border-color: #C9D4E0;
}
.btn-outline-dark:hover, .decision-link:hover {
  background: var(--sl-ink); color: var(--sl-white); border-color: var(--sl-ink);
}
.btn-outline, .solve-btn-outline  {
  background: transparent; color: var(--sl-mint); border-color: rgba(0,255,127,.5);
}
.btn-outline:hover, .solve-btn-outline:hover {
  background: var(--sl-mint); color: var(--sl-ink); border-color: var(--sl-mint);
}
:is(.light-zone,.soft-zone) :is(.btn-outline,.solve-btn-outline) {
  color: var(--sl-mint-deep); border-color: rgba(0,204,102,.5);
}
.btn-group, .btn-row, .cta-row, .hero-actions, .solve-hero-actions,
.solve-final-actions, .badge-row, .tag-flex, .pill-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sl-3);
  align-items: center;
  margin-bottom: var(--sl-4);
}
/* Chips are labels, not controls — they wrap, they never stretch. Kept separate
   from .btn-group so the mobile stacking rule below cannot catch them. */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sl-2); margin-bottom: var(--sl-4); }

@media (max-width: 520px) {
  .btn-group, .btn-row, .cta-row, .hero-actions, .solve-hero-actions, .solve-final-actions {
    flex-direction: column;
    align-items: stretch;
  }
  /* only actual controls go full-width — a .tag or .badge sharing the row stays inline */
  :is(.btn-group,.btn-row,.cta-row,.hero-actions,.solve-hero-actions,.solve-final-actions)
    > :is(.btn, [class*="btn-"], button) { width: 100%; }
}

/* ── GRIDS ────────────────────────────────────────────────────────────── */
/* auto-fit with a small floor so nothing can force horizontal overflow at 390px */
.grid-2, .grid-3, .grid-4, .card-grid, .path-grid, .tool-grid, .use-case-grid,
.use-grid, .program-grid, .spec-grid, .factor-grid, .feature-grid, .benefits-grid,
.decision-grid, .decisions-grid, .resource-grid, .silo-grid, .link-grid, .hub-grid,
.related-grid, .product-grid, .asset-grid, .payout-grid, .scenario-grid, .who-grid,
.sit-grid, .situation-grid, .doc-grid, .service-grid, .pivot-grid, .market-stats,
.stats-bar, .team-grid, .solve-intent-grid, .solve-path-grid, .solve-entity-grid,
.solve-definition-grid, .solve-service-grid, .solve-county-hub-grid,
.solve-authority-grid,
.dual-authority,
.dual-auth, .checks, .authority-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));   /* V3.3 M2a: explicit tracks */
  gap: var(--sl-5);
  margin-block: var(--sl-6);
  align-items: start;
}
.grid-2, .pivot-grid, .dual-authority, .dual-auth {
  grid-template-columns: repeat(12, minmax(0, 1fr));   /* V3.3 M2a: explicit tracks */
}
.grid-4, .market-stats, .stats-bar, .checks, .pill-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));   /* V3.3 M2a: explicit tracks */
  gap: var(--sl-4);
}

/* ── CARDS ────────────────────────────────────────────────────────────── */
/* One card body, many legacy names. Hairline border, near-flat, no lift-on-hover
   theatre — the emphasis lives in the type. */
.card, .tool-card, .path-card, .hero-box, .loan-card, .option-card, .pivot-card,
.use-case-card, .use-card, .program-card, .spec-card, .factor-card, .feature-card,
.benefit-card, .link-card, .link-tile, .silo-card, .resource-card, .product-card,
.asset-card, .payout-card, .scenario-card, .scenario-box, .who-card, .sit-card,
.doc-card, .method-card, .service-card, .info-card, .info-box, .form-card,
.decision-card, .decision-tile, .intent-card, .team-member, .category-card,
.solve-intent-card, .solve-path-card, .solve-mini-card, .solve-entity-card,
.solve-definition-card, .solve-service-card, .solve-county-hub-card,
.solve-authority-card, .solve-proof-box,
.authority-card,
.snippet-box, .trust-box, .check-box, .video-box, .quote-box, .warning-box, .alert {
  background: var(--sl-white);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-r);
  padding: var(--sl-5);
  box-shadow: var(--sl-shadow-sm);
  transition: border-color .18s var(--sl-ease), box-shadow .18s var(--sl-ease);
}
a.card:hover, a.tool-card:hover, a.path-card:hover, a.link-card:hover,
a.link-tile:hover, a.silo-card:hover, a.resource-card:hover, a.sit-card:hover,
a.solve-path-card:hover, a.solve-county-hub-card:hover, a.decision-tile:hover {
  border-color: var(--sl-mint-deep);
  box-shadow: var(--sl-shadow);
  text-decoration: none;
}
:is(.card,.tool-card,.path-card,.hero-box,.solve-intent-card) :is(h3,h4) {
  margin-top: 0;
}

/* A card sitting in a dark zone is still a LIGHT surface. Without this the zone's
   white text rule wins on specificity and the card renders white-on-white — the
   empty-looking boxes in the county hero. Specificity is deliberately raised
   above `:is(.dark-zone,.mid-zone) p`. */
:is(.dark-zone,.mid-zone,.hero-section,.solve-hero,.cta-box:not(.cta-box--alt):not(.cta-box--inline),.cta-band)
:is(.card,.tool-card,.path-card,.hero-box,.loan-card,.option-card,.pivot-card,
    .use-case-card,.program-card,.spec-card,.factor-card,.feature-card,.info-card,
    .solve-intent-card,.solve-path-card,.snippet-box,.trust-box) {
  color: var(--sl-body);
}
:is(.dark-zone,.mid-zone,.hero-section,.solve-hero,.cta-box:not(.cta-box--alt):not(.cta-box--inline),.cta-band)
:is(.card,.tool-card,.path-card,.hero-box,.loan-card,.option-card,.pivot-card,
    .use-case-card,.program-card,.spec-card,.factor-card,.feature-card,.info-card,
    .solve-intent-card,.solve-path-card,.snippet-box,.trust-box)
:is(p, li, span, td, dd) {
  color: var(--sl-body);
}
:is(.dark-zone,.mid-zone,.hero-section,.solve-hero,.cta-box:not(.cta-box--alt):not(.cta-box--inline),.cta-band)
:is(.card,.tool-card,.path-card,.hero-box,.loan-card,.option-card,.pivot-card,
    .use-case-card,.program-card,.spec-card,.factor-card,.feature-card,.info-card,
    .solve-intent-card,.solve-path-card,.snippet-box,.trust-box)
:is(h1, h2, h3, h4, h5, h6, strong) {
  color: var(--sl-ink);
}
:is(.card,.tool-card,.path-card,.hero-box,.option-card,.solve-intent-card) p:last-child,
:is(.card,.tool-card,.path-card,.hero-box,.option-card,.solve-intent-card) ul:last-child {
  margin-bottom: 0;
}

/* Accent variants — a 2px top marker, the ledger idea again. */
.card--accent, .featured, .resource-card-featured,
.tool-check, .tool-green, .pivot-sell, .option-sell, .card--dark.featured,
.spec-callout, .solve-proof-box, .snippet-box {
  border-top: 2px solid var(--sl-mint-deep);
}
.tool-gold, .tool-amber, .tool-gold-pulse, .resource-card-secondary, .option-hei {
  border-top: 2px solid var(--sl-mint-deep);
}
.tool-blue, .tool-teal, .pivot-keep, .option-buy, .option-refi, .option-second,
.pivot-buy, .pivot-rent, .pivot-wait, .option-wait, .option-rent {
  border-top: 2px solid var(--sl-slate);
}
.tool-red, .warning-box, .alert {
  border-top: 2px solid #C81E1E;
  background: #FEF7F7;
}
.tool-gray, .resource-card-plain { border-top: 2px solid #C9D4E0; }

/* Tinted callouts */
.scenario-block, .cta-box--alt, .cta-box--inline, .guide-toc, .solve-answer-box, .pull-quote, .solve-quote, .quote-box,
.equity-audit, .compliance, .info-box, .spec-callout,
.limits-banner, .trust-strip, .card-trust {
  background: var(--sl-tint);
  border: 1px solid rgba(0,204,102,.22);
  border-left: 2px solid var(--sl-mint-deep);
  border-radius: 0 var(--sl-r) var(--sl-r) 0;
  padding: var(--sl-5);
  margin-block: var(--sl-6);
}
.pull-quote, .solve-quote, .quote-box, .blockquote {
  font-family: var(--sl-font-display);
  font-size: var(--sl-t-xl);
  font-style: italic;
  line-height: 1.45;
  color: var(--sl-ink);
  max-width: 58ch;
}

/* ── HERO ─────────────────────────────────────────────────────────────── */
.hero-section, .hero, .hero-wrap, .solve-hero, .book-hero {
  background: var(--sl-ink);
  color: var(--sl-white);
  padding-block: var(--sl-8) var(--sl-7);
  position: relative;
  overflow: hidden;
}
/* One hairline of mint along the top edge — the rule motif at page scale. */
.hero-section::before, .solve-hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--sl-mint), rgba(0,255,127,0) 65%);
}
:is(.hero-section,.hero,.solve-hero) :is(h1,h2,h3) { color: var(--sl-white); }
:is(.hero-section,.hero,.solve-hero) p { color: var(--sl-body-dark); }
.hero-section--with-form, .solve-hero-grid   {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));   /* V3.3 M2a: explicit tracks */
  gap: var(--sl-7);
  align-items: center;
  text-align: left;
}
.hero-badge, .solve-answer-badge  {
  display: inline-flex; align-items: center; gap: var(--sl-2);
  background: rgba(0,255,127,.10);
  border: 1px solid rgba(0,255,127,.30);
  color: var(--sl-mint);
  font-size: var(--sl-t-xs); font-weight: 650;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 14px; border-radius: var(--sl-r-pill);
  margin-bottom: var(--sl-4);
}
.hero-bullets, .checklist, .situation-list, .mistake-list,
.observation-list, .step-list, .list-tight, .silo-links, .solve-county-link-list {
  list-style: none;
  margin-left: 0;
  padding-left: 0;
}
.hero-bullets li,  li, .checklist li, .checklist-item, .check-item,
.situation-list li, .mistake-list li, .observation-list li, .list-tight li {
  position: relative;
  padding-left: var(--sl-5);
  margin-bottom: var(--sl-2);
}
.hero-bullets li::before,  li::before, .checklist li::before,
.checklist-item::before, .check-item::before, .situation-list li::before,
.mistake-list li::before, .observation-list li::before, .list-tight li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 10px; height: 2px;
  background: var(--sl-mint-deep);
}
:is(.dark-zone,.mid-zone,.solve-hero) :is(.hero-bullets,.checklist) li::before {
  background: var(--sl-mint);
}

/* ── TRUST BAR ────────────────────────────────────────────────────────── */
.trust-bar {
  background: var(--sl-slate);
  padding-block: var(--sl-4);
  border-top: 1px solid var(--sl-border-ink);
  border-bottom: 1px solid var(--sl-border-ink);
}
.trust-bar__items, .trust-bar .container, .solve-trust-row, .trust-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sl-3) var(--sl-6);
}
.trust-bar__item, .trust-bar .trust-item, .trust-sub {
  font-size: var(--sl-t-sm);
  color: var(--sl-muted-dark);
  letter-spacing: .03em;
}
.trust-bar__item strong, .trust-bar .trust-item strong { color: var(--sl-white); font-weight: 600; }

/* ── AGENT CARD + BYLINE ──────────────────────────────────────────────── */
.agent-card.dark-zone, .agent-row, .specialist-wrap {
  background: var(--sl-ink);
  border: 0;
  border-top: 1px solid var(--sl-border-ink);
  border-radius: 0;
  padding-block: var(--sl-7);
  box-shadow: none;
}
.agent-card__inner, .specialist, .card-trust, .slr-trust {
  display: flex;
  align-items: center;
  gap: var(--sl-5);
  flex-wrap: wrap;
}
.agent-card__avatar, .agent-avatar, .team-avatar, .specialist-avatar, .slr-avatar,
.authority-img, .card-trust-avatar, .auth-avatar {
  width: 88px; height: 88px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--sl-mint);
}
.agent-card__info, .specialist-info, .card-trust-name, .authority-info {
  color: var(--sl-white);
  font-size: var(--sl-t-cap);
  line-height: 1.6;
}
.agent-card__info strong, .auth-name, .authority-name, .solve-auth-name,
.card-trust-name, .team-name, .specialist-name, .slr-name {
  display: block;
  font-family: var(--sl-font-body);
  font-weight: 650;
  font-size: var(--sl-t-lg);
  color: inherit;
  margin-bottom: 2px;
}
.agent-card__meta, .auth-creds, .authority-nmls, .solve-auth-creds,
.card-trust-role, .team-role, .auth-title, .authority-meta, .solve-auth-title,
.team-member-info, .authority-body, .auth-role {
  display: block;
  font-size: var(--sl-t-sm);
  color: var(--sl-muted-dark);
  margin-top: var(--sl-2);
}
:is(.light-zone,.soft-zone,.card) :is(.auth-name,.authority-name,.team-name,.specialist-name) { color: var(--sl-ink); }
:is(.light-zone,.soft-zone,.card) :is(.auth-creds,.auth-title,.team-role,.authority-meta) { color: var(--sl-muted); }

.author-byline {
  border-top: 1px solid var(--sl-border);
  margin-top: var(--sl-8);
  padding-block: var(--sl-5);
  font-size: var(--sl-t-cap);
  color: var(--sl-muted);
}
.author-byline .container {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sl-3); text-align: left;
}
.author-byline__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.author-byline strong { color: var(--sl-ink); }

/* ── TABLES ───────────────────────────────────────────────────────────── */
/* DESIGN-D1: Kadence clips overflow on .site, so an over-wide table lost its
   right-hand columns outright. Every table is its own scroll container. */
.entry-content-wrap table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  font-size: var(--sl-t-cap);
  margin-block: var(--sl-6);
}
.table-overflow, .solve-table-scroll, .solve-table-wrap, .comparison-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: var(--sl-6);
}
.table-overflow table, .solve-table-scroll table,
.solve-table-wrap table, .comparison-table-wrap table {
  display: table; width: 100%; overflow-x: visible; margin-block: 0;
}
/* A table cannot compress below its own min-content width, so a few legacy boxes
   still hold one wider than a phone column. They must SCROLL, never clip — a
   clipped table silently loses its right-hand columns (DESIGN-D1). */
.snippet-box, .hero-wrap, .hero, .solve-answer-box, .scenario-block {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
th {
  background: var(--sl-ink);
  color: var(--sl-white);
  font-family: var(--sl-font-body);
  font-size: var(--sl-t-xs);
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-align: left;
  padding: var(--sl-3) var(--sl-4);
  white-space: nowrap;
}
td {
  padding: var(--sl-3) var(--sl-4);
  border-bottom: 1px solid var(--sl-border);
  vertical-align: top;
  color: var(--sl-body);
}
tbody tr:nth-child(even) td { background: var(--sl-whisper); }
tbody tr:last-child td { border-bottom: 0; }
.check, .cell-green { color: var(--sl-mint-deep); font-weight: 700; }
.cross { color: #C81E1E; }
:is(.dark-zone,.mid-zone) th { background: var(--sl-slate); }
:is(.dark-zone,.mid-zone) td { color: var(--sl-body-dark); border-bottom-color: var(--sl-border-ink); }
:is(.dark-zone,.mid-zone) tbody tr:nth-child(even) td { background: rgba(255,255,255,.04); }

/* ── STATS ────────────────────────────────────────────────────────────── */
.stat-item, .kpi { text-align: center; padding: var(--sl-4); }
.stat-item__number, .stat-number, .logic-number, .step-num, .value {
  font-family: var(--sl-font-display);
  font-size: var(--sl-t-3xl);
  font-weight: 700;
  line-height: 1;
  color: var(--sl-ink);
  margin-bottom: var(--sl-2);
}
:is(.dark-zone,.mid-zone) :is(.stat-item__number,.stat-number) { color: var(--sl-mint); }
.stat-item__label, .stat-label  {
  font-size: var(--sl-t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sl-muted);
}
:is(.dark-zone,.mid-zone) :is(.stat-item__label,.stat-label) { color: var(--sl-muted-dark); }

/* ── PROCESS / STEPS ──────────────────────────────────────────────────── */
.process-step, .step-item, .solve-step, .logic-step, .step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sl-4);
  align-items: start;
  margin-bottom: var(--sl-5);
  padding-bottom: var(--sl-5);
  border-bottom: 1px solid var(--sl-border);
}
.process-step:last-child, .step-item:last-child, .solve-step:last-child { border-bottom: 0; }
.process-step__number, .step-num, .logic-number, .solve-mini-icon, .silo-icon, .solve-dot  {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--sl-tint);
  border: 1px solid rgba(0,204,102,.3);
  color: var(--sl-mint-deep);
  font-family: var(--sl-font-body);
  font-size: var(--sl-t-cap);
  font-weight: 700;
  margin-bottom: 0;
}
:is(.dark-zone,.mid-zone) :is(.process-step__number,.step-num,.solve-dot) {
  background: rgba(0,255,127,.10); border-color: rgba(0,255,127,.3); color: var(--sl-mint);
}
.process-step__content h4, .step-body h4 { margin-top: 0; }

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq-section, .solve-faq-wrap, .faq-content, .solve-faq-content { padding-block: var(--sl-7); }
.faq-item, .solve-faq-list > * { border-bottom: 1px solid var(--sl-border); }
.faq-item:last-child { border-bottom: 0; }
.faq-btn, .faq-item__question {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--sl-4); width: 100%;
  background: none; border: 0; box-shadow: none;
  padding: var(--sl-4) 0; margin: 0;
  font-family: var(--sl-font-body);
  font-size: var(--sl-t-base); font-weight: 650; line-height: 1.4;
  color: var(--sl-ink); text-align: left; cursor: pointer;
  appearance: none;
}
.faq-btn:hover, .faq-item__question:hover { color: var(--sl-mint-deep); }
.faq-answer, .faq-item__answer {
  display: none; padding-bottom: var(--sl-4);
  color: var(--sl-body); max-width: var(--sl-measure);
}
.faq-answer.open, .faq-item__answer.open { display: block; }
.faq-icon { position: relative; width: 14px; height: 14px; flex-shrink: 0; }
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute; background: var(--sl-mint-deep);
  transition: transform .25s var(--sl-ease), opacity .25s var(--sl-ease);
}
.faq-icon::before { top: 50%; left: 0; width: 14px; height: 2px; margin-top: -1px; }
.faq-icon::after  { left: 50%; top: 0; width: 2px; height: 14px; margin-left: -1px; }
[aria-expanded="true"] .faq-icon::after { transform: rotate(90deg); opacity: 0; }
/* Rank Math's own FAQ block inherits the same treatment. */
.wp-block-rank-math-faq-block .rank-math-list-item { border-bottom: 1px solid var(--sl-border); padding-block: var(--sl-4); }
:is(.rank-math-list,.wp-block-rank-math-faq-block) .rank-math-question {
  font-family: var(--sl-font-body); font-size: var(--sl-t-base);
  font-weight: 650; color: var(--sl-ink); margin-bottom: var(--sl-2);
}
:is(.rank-math-list,.wp-block-rank-math-faq-block) .rank-math-answer { color: var(--sl-body); max-width: var(--sl-measure); }

/* ── NAVIGATION (in-page) ─────────────────────────────────────────────── */
/* .hv-nav / .sd-nav are excluded: those lanes set their own padding, and adding
   a second gutter pushed the bar one gutter past the viewport. */
.section-nav, .nav-pills, .pill-nav, .nav-sticky, .sticky-nav, .solve-sticky-nav {
  padding-inline: var(--sl-gutter);
}
.section-nav, .nav-pills, .pill-nav, .nav-sticky, .sticky-nav,
.solve-sticky-nav, .hv-nav, .sd-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sl-border);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  max-width: 100%;
}
.section-nav::-webkit-scrollbar, .solve-sticky-nav::-webkit-scrollbar,
.hv-nav::-webkit-scrollbar, .sd-nav::-webkit-scrollbar { display: none; }
/* `.section-nav a` is included as a catch-all: several county templates emit bare
   anchors with no .pill/.nav-link class, which otherwise rendered as plain text. */
.section-nav a, .section-nav .pill, .section-nav .nav-link, .nav-pills a, .pill-nav a,
.nav-sticky a, .sticky-nav a, .solve-sticky-nav a {
  display: inline-block;
  margin: var(--sl-3) var(--sl-1);
  padding: 6px 14px;
  border-radius: var(--sl-r-pill);
  border: 1px solid var(--sl-border);
  font-size: var(--sl-t-sm);
  font-weight: 600;
  color: var(--sl-slate);
  background: transparent;
  transition: background .18s var(--sl-ease), color .18s var(--sl-ease), border-color .18s var(--sl-ease);
}
.section-nav a:hover, .section-nav .pill:hover, .section-nav .pill.active,
.nav-pills a:hover, .nav-sticky a:hover, .sticky-nav a:hover,
.solve-sticky-nav a:hover,
.section-nav .nav-link:hover, .section-nav .nav-link.active {
  background: var(--sl-ink); color: var(--sl-white); border-color: var(--sl-ink);
  text-decoration: none;
}
.solve-sticky-nav-inner  {
  display: flex; align-items: center; gap: var(--sl-2);
  max-width: var(--sl-max); margin-inline: auto;
}

/* ── BREADCRUMB ───────────────────────────────────────────────────────── */
.breadcrumb {
  display: flex; flex-wrap: wrap; gap: var(--sl-2); align-items: center;
  font-size: var(--sl-t-sm); color: var(--sl-muted); margin-bottom: var(--sl-6);
}
.breadcrumb a { color: var(--sl-muted); }
.breadcrumb a:hover { color: var(--sl-mint-deep); }

/* ── CTA BLOCKS ───────────────────────────────────────────────────────── */
.cta-box, .cta-box--dark, .cta-box--gold, .cta-band, .solve-final-cta, .footer-box, .footer-inner, .solve-spanish {
  background: var(--sl-ink);
  color: var(--sl-white);
  padding-block: var(--sl-8);
  text-align: center;
}
:is(.cta-box,.cta-band,.solve-final-cta) :is(h2,h3) { color: var(--sl-white); margin-top: 0; }
:is(.cta-box,.cta-band,.solve-final-cta) p {
  color: var(--sl-body-dark); margin-inline: auto;
}
.cta-box--gold { border-top: 2px solid var(--sl-mint); }
/* A card inside a dark CTA is a LIGHT surface — the old system painted its text
   white and made it invisible. */
:is(.cta-box,.cta-band,.solve-final-cta) .card :is(p,li) { color: var(--sl-body); }
:is(.cta-box,.cta-band,.solve-final-cta) .card :is(h2,h3,h4) { color: var(--sl-ink); }

/* ── COMPLIANCE FOOTER + MOBILE BAR ───────────────────────────────────── */
.compliance-footer {
  background: var(--sl-ink);
  color: var(--sl-muted-dark);
  padding-block: var(--sl-6);
  border-top: 1px solid var(--sl-border-ink);
}
.compliance-footer h4 {
  color: var(--sl-white); font-size: var(--sl-t-xs);
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: var(--sl-3);
}
.compliance-footer p { font-size: var(--sl-t-sm); color: var(--sl-muted-dark); max-width: none; }

.mobile-sticky-footer, .footer-sticky  {
  display: none;
  position: fixed; inset: auto 0 0 0; z-index: 200;
  background: rgba(13,27,46,.97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--sl-border-ink);
  padding: var(--sl-2) var(--sl-3);
  padding-bottom: calc(var(--sl-2) + env(safe-area-inset-bottom, 0px));
}
.mobile-sticky-footer .btn-group, .footer-sticky > div  {
  display: flex; flex-direction: row; gap: var(--sl-2);
}
.mobile-sticky-footer .btn, .footer-sticky a {
  flex: 1; text-align: center; padding: 12px 10px; font-size: var(--sl-t-sm);
}
@media (max-width: 768px) {
  .mobile-sticky-footer, .footer-sticky  { display: flex; }
  body { padding-bottom: 76px; }
}

/* ── EMBEDS (third-party — containers only, never internals) ──────────── */
.video-wrap, .solve-video, .video-box,
.form-wrapper   {
  border-radius: var(--sl-r);
  overflow: hidden;
  background: var(--sl-white);
  box-shadow: var(--sl-shadow);
}
iframe { max-width: 100%; border: 0; }

/* ── DIVIDERS & MISC ──────────────────────────────────────────────────── */
.divider, .team-divider, .hr {
  width: 40px; height: 2px; background: var(--sl-mint-deep);
  border: 0; border-radius: 1px; margin: 0 auto var(--sl-5);
}
.divider--left { margin-inline: 0; }
hr { border: 0; border-top: 1px solid var(--sl-border); margin-block: var(--sl-7); }
.arrow, .link-arrow, .solve-link-arrow, .logic-arrow {
  color: var(--sl-mint-deep); font-weight: 700;
  transition: transform .18s var(--sl-ease); display: inline-block;
}
a:hover .solve-link-arrow, a:hover .link-arrow { transform: translateX(3px); }

/* ── UTILITY ──────────────────────────────────────────────────────────── */
.mt-0 { margin-top: 0; }  .mb-0 { margin-bottom: 0; }
.mt-sm { margin-top: var(--sl-4); }  .mb-sm { margin-bottom: var(--sl-4); }
.mt-md { margin-top: var(--sl-6); }  .mb-md { margin-bottom: var(--sl-6); }
.mt-lg { margin-top: var(--sl-8); }  .mb-lg { margin-bottom: var(--sl-8); }
.hidden { display: none; }
.wrap, .hero-wrap, .solve-about-wrap, .hv-page, .solve-home, .solve-landing {
  max-width: 100%;
}

/* Scroll reveal — REMOVED (DESIGN-V3.3 P1, 2026-07-31).
   431 elements in the corpus carry .sd-fade / .hv-fade. The rule below used to
   hide every one of them (`html.sd-js … {opacity:0}`) and hand the job of making
   them visible again to a scroll observer. Nothing in the theme has set `sd-js`
   since the GHL port, so the hidden state never fired — but it is exactly the
   pattern P1 bans: content hidden by CSS until JS runs ships blank to anyone
   whose JS is slow, blocked or broken, and it is invisible in a code read
   because the class that arms it lives somewhere else.
   Content is visible by default; JS may only ADD animation after it runs. The
   fade classes are now inert markers — harmless, and safe to leave in content. */
.sd-fade, .hv-fade { opacity: 1; transform: none; }

/* ── LANE: ADVISOR'S DESK (hv-* / sd-*) ───────────────────────────────── */
/* Keep-and-reskin. These pages have a genuine editorial character worth
   preserving — long-form chapters, a stated point of view, big pull quotes.
   Only the tokens change: the amber accents become the mint family and the type
   joins the site scale. Structure is untouched. */
.hv-section, .sd-section, .hv-chapter, .sd-chapter { padding-block: var(--sl-8); }
.hv-section-wide, .sd-section-wide { max-width: var(--sl-max-wide); margin-inline: auto; }
.hv-hero-inner, .hv-section > .container, .hv-interrupt-inner, .hv-equity-inner,
.hv-guides-inner, .hv-form-inner, .hv-changed-inner, .hv-final-cta-inner,
.sd-hero-inner, .sd-interrupt-inner, .sd-form-inner {
  max-width: var(--sl-max); margin-inline: auto; padding-inline: var(--sl-gutter);
}
.hv-interrupt, .sd-interrupt, .hv-changed-section {
  background: var(--sl-whisper);
  border-block: 1px solid var(--sl-border);
  padding-block: var(--sl-8);
}
.hv-equity-band {
  background: var(--sl-ink); color: var(--sl-white); padding-block: var(--sl-8);
}
.hv-equity-headline, .hv-video-headline, .sd-video-headline {
  font-family: var(--sl-font-display); font-size: var(--sl-t-2xl); color: inherit;
}
.hv-guide-links, .hv-county-grid, .silo-links, .solve-county-link-list {
  display: flex; flex-wrap: wrap; gap: var(--sl-2); list-style: none; padding-left: 0;
}
.hv-county-link, .silo-link, .solve-county-link-list a, .sit-link, .program-link,
.decision-link, .resource-link, .related-link, .hv-guide-link {
  font-size: var(--sl-t-cap);
}
.hv-video-badge-dot, .sd-video-badge-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--sl-mint); flex-shrink: 0;
}

/* ── REBUILT FRONT PAGE COMPONENTS ────────────────────────────────────── */
/* Introduced by the D2 front-page rebuild. Generic on purpose — these are the
   components the county templates should migrate onto during D3, which is why
   none of them are named after the home page. */

/* The method list. Numbering is used here because the content genuinely IS a
   sequence (clarify -> map -> build); it is not decoration. */
.method-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.method-list__step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sl-4);
  align-items: start;
  padding-block: var(--sl-4);
  border-top: 1px solid var(--sl-border);
  margin: 0;
}
.method-list__step:first-child { border-top: 0; padding-top: 0; }
.method-list__num {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--sl-mint-deep);
  color: var(--sl-mint-deep);
  background: transparent;
  font-size: var(--sl-t-sm); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.method-list__step strong { display: block; margin-bottom: 2px; }
.method-list__step p { margin: 0; font-size: var(--sl-t-cap); color: var(--sl-muted); }
.method-list--wide { max-width: 78ch; margin-top: var(--sl-6); }

/* Hero side panel — a light card against the dark hero. */
.hero-panel {
  background: rgba(255,255,255,.055);
  border: 1px solid var(--sl-border-ink);
  border-radius: var(--sl-r-lg);
  padding: var(--sl-5);
}
.hero-panel__lead { color: var(--sl-body-dark); margin-bottom: var(--sl-4); }
.hero-panel__lead strong { display: block; color: var(--sl-white); margin-bottom: var(--sl-2); }
.hero-panel .method-list__step { border-top-color: var(--sl-border-ink); }
.hero-panel .method-list__num { border-color: var(--sl-mint); color: var(--sl-mint); }
.hero-panel .method-list__step strong { color: var(--sl-white); }
.hero-panel .method-list__step p { color: var(--sl-muted-dark); }

/* The "quick summary" answer box — the one block on the page that states, flatly,
   what the company is. Given the ledger treatment so it reads as a record. */
.answer-box {
  background: var(--sl-tint);
  border: 1px solid rgba(0,204,102,.22);
  border-left: 2px solid var(--sl-mint-deep);
  border-radius: 0 var(--sl-r) var(--sl-r) 0;
  padding: var(--sl-5);
}
.answer-box p:last-child { margin-bottom: 0; }

.split-2 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));   /* V3.3 M2a: explicit tracks */
  gap: var(--sl-7);
  align-items: start;
}
.video-wrap--16x9 { aspect-ratio: 16 / 9; }
.video-wrap--16x9 iframe { width: 100%; height: 100%; display: block; }

.link-list { list-style: none; margin: 0; padding: 0; }
.link-list li {
  padding-block: var(--sl-3);
  border-top: 1px solid var(--sl-border);
  font-size: var(--sl-t-cap);
  margin: 0;
}
.link-list li:first-child { border-top: 0; }
.link-list--tight li { padding-block: var(--sl-2); }
.link-list a { font-weight: 600; color: var(--sl-ink); }
.link-list a:hover { color: var(--sl-mint-deep); }

.person-card { display: grid; grid-template-columns: auto 1fr; gap: var(--sl-4); align-items: start; }
.person-card img { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; }
.person-card__name { font-weight: 650; font-size: var(--sl-t-lg); color: var(--sl-ink); }
.person-card__role { font-size: var(--sl-t-cap); color: var(--sl-muted); }
.person-card__creds {
  font-size: var(--sl-t-sm); color: var(--sl-mint-deep);
  font-variant-numeric: tabular-nums; margin-bottom: var(--sl-3);
}
.person-card p { font-size: var(--sl-t-cap); margin-bottom: 0; }

.faq-list { border-top: 1px solid var(--sl-border); }
.faq-item { border-bottom: 1px solid var(--sl-border); }
.faq-item > summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sl-4);
  padding-block: var(--sl-4);
  font-weight: 650; color: var(--sl-ink);
  cursor: pointer; list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: ''; flex-shrink: 0;
  width: 12px; height: 12px;
  border-right: 2px solid var(--sl-mint-deep);
  border-bottom: 2px solid var(--sl-mint-deep);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s var(--sl-ease);
}
.faq-item[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq-item > summary:hover { color: var(--sl-mint-deep); }
.faq-body { padding-bottom: var(--sl-4); }
.faq-body p:last-child { margin-bottom: 0; }

.section-nav__inner {
  display: flex; align-items: center; gap: var(--sl-1);
  max-width: var(--sl-max); margin-inline: auto;
}
.btn-group--center { justify-content: center; }
.cta-box .btn-outline { color: var(--sl-mint); border-color: rgba(0,255,127,.5); }

/* ── LANE: FRONT PAGE / LANDING (solve-*) ─────────────────────────────── */
.solve-section { padding-block: var(--sl-8); }
.solve-section > .container, .solve-hero-grid, .solve-sticky-nav-inner {
  max-width: var(--sl-max); margin-inline: auto; padding-inline: var(--sl-gutter);
}
.solve-story, .solve-service-shell { background: var(--sl-whisper); border-block: 1px solid var(--sl-border); }
.solve-hero-panel, .solve-mini-stack {
  background: rgba(255,255,255,.05);
  border: 1px solid var(--sl-border-ink);
  border-radius: var(--sl-r-lg);
  padding: var(--sl-5);
}
.solve-panel-top { margin-bottom: var(--sl-4); }
.solve-county-coming-soon { color: var(--sl-muted); font-size: var(--sl-t-sm); }

/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .agent-card__inner, .specialist, .author-byline .container {
    flex-direction: column; text-align: center; align-items: center;
  }
  .hero-section, .hero, .solve-hero  { padding-block: var(--sl-7) var(--sl-6); }
  .trust-bar__items, .trust-bar .container { gap: var(--sl-2) var(--sl-4); }
  th, td { padding: var(--sl-2) var(--sl-3); }
}
@media (max-width: 480px) {
  :root { --sl-t-base: 1rem; }body /* A 32-34px inset costs ~18% of a 390px viewport per side. Legacy page <style>
     blocks set exactly that,
body so it is overridden rather than merely re-declared. */
  .card,
body .tool-card,
body .path-card,
body .hero-box,
body .solve-intent-card,
body .snippet-box,
body .hero,
body .hero-wrap,
body .scenario-block,
body .cta-box--alt,
body .cta-box--inline,
body .option-card,
body .loan-card,
body .pivot-card,
body .solve-answer-box,
body .pull-quote {
    padding-left: var(--sl-4);
    padding-right: var(--sl-4);
  }
}

/* ── PRINT ────────────────────────────────────────────────────────────── */
@media print {body .mobile-sticky-footer,
body .footer-sticky,
body .section-nav,
body .solve-sticky-nav { display: none; }body :is(.dark-zone,
body .mid-zone,
body .hero-section,
body .solve-hero,
body .cta-box:not(.cta-box--alt):not(.cta-box--inline)) {
    background: none; color: #000;
  }
}

/* ══ CONTRAST CONTRACT ═══════════════════════════════════════════════════════
   Two rules, applied systemically rather than per page:

   1. A SURFACE SETS BOTH. Anything that paints a background also sets a text
      colour, and vice versa. Half a pair is what produced white-on-mint, ink-on-ink
      and washed-out table rows.
   2. GENERIC ELEMENTS INHERIT. td/th/p/li do not hard-set `color`, so they follow
      whatever surface they land on — including surfaces defined by a page's own
      <style> block, which the design system cannot see.
   ═════════════════════════════════════════════════════════════════════════ */

/* --- 1. Light variants that also carry a dark base class --------------------
   `.cta-box--alt` / `--inline` are LIGHT callouts that also carry `.cta-box`.
   The base painted a dark ground with white text; the variant repainted only the
   ground, leaving white text on a mint tint — and where the variant won on colour
   but not background, ink text on an ink ground ("Direct Answer:" = 1:1). */
.cta-box.cta-box--alt, .cta-box.cta-box--inline,
.cta-box--alt, .cta-box--inline {
  background: var(--sl-tint);
  color: var(--sl-body);
  border: 1px solid rgba(0,204,102,.22);
  border-left: 2px solid var(--sl-mint-deep);
  border-radius: 0 var(--sl-r) var(--sl-r) 0;
  padding: var(--sl-5);
  text-align: left;
}
:is(.cta-box--alt, .cta-box--inline) :is(p, li, td, dd, span, div) { color: var(--sl-body); }
:is(.cta-box--alt, .cta-box--inline) :is(h1,h2,h3,h4,h5,h6,strong,b) { color: var(--sl-ink); }
:is(.cta-box--alt, .cta-box--inline) a { color: var(--sl-accent-text); }

/* --- 2. Tables follow their surface ----------------------------------------
   `td { color: var(--sl-body) }` broke wherever a page's own CSS gave the table a
   dark ground: dark text on a dark row (1.4:1). Inheriting means one rule is
   correct on both light and dark grounds. */
.entry-content-wrap td { color: inherit; }
/* the light zebra only applies on a light ground, so it cannot wash out dark rows */
.entry-content-wrap tbody tr:nth-child(even) > td { background: transparent; }
.light-zone tbody tr:nth-child(even) > td,
.soft-zone  tbody tr:nth-child(even) > td,
.card       tbody tr:nth-child(even) > td,
.entry-content-wrap > table tbody tr:nth-child(even) > td,
.table-overflow tbody tr:nth-child(even) > td { background: var(--sl-whisper); }
/* th always pairs its own ground with its own text */
.entry-content-wrap th { background: var(--sl-ink); color: #fff; }

/* --- 3. Brand greens are not text colours on light grounds -----------------
   #00FF7F (1.3:1) and #00CC66 (2.1:1) stay as rules, markers and borders. Text
   uses the accessible sibling. */
a { color: var(--sl-accent-text); }
.eyebrow, .eyebrow-text, .solve-kicker, .scenario-label, .use-case-label,
.spec-label, .authority-label, .tool-label, .solve-entity-label, .cat-title,
.trust-title, .hero-eyebrow-label { color: var(--sl-accent-text); }
.link-arrow, .arrow, .solve-link-arrow, .logic-arrow,
.person-card__creds, .auth-creds, .authority-nmls, .solve-auth-creds,
.check, .cell-green, .accent-text, .green { color: var(--sl-accent-text); }
.link-list a:hover, .faq-item > summary:hover, .faq-btn:hover,
.breadcrumb a:hover, .card a:hover { color: var(--sl-accent-text); }
.answer-box .eyebrow, .scenario-block .eyebrow { color: var(--sl-accent-text); }
/* on dark grounds the bright mint is correct and passes comfortably */
:is(.dark-zone, .mid-zone, .hero-section, .hero, .solve-hero, .cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band,
    .agent-card, .compliance-footer, .trust-bar)
:is(a, .eyebrow, .eyebrow-text, .solve-kicker, .link-arrow, .arrow, .accent-text,
    .green, .check, .auth-creds, .solve-auth-creds, .person-card__creds) {
  color: var(--sl-mint);
}
/* …but not inside a light card that merely sits on a dark section */
:is(.dark-zone, .mid-zone, .hero-section, .solve-hero, .cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band)
:is(.card, .tool-card, .path-card, .hero-box, .pivot-card, .snippet-box, .info-card)
:is(a, .eyebrow, .link-arrow, .arrow, .accent-text, .green, .check) {
  color: var(--sl-accent-text);
}

/* --- 3b. A button carries its own ground, so it owns its label -------------
   CONTENT-RUN C6. The rule above re-colours every `a` inside a dark container to
   --sl-mint. A button IS an `a`, so a .btn-primary sitting in a .dark-zone /
   .hero-section / .cta-box took mint text onto its own mint fill — 1.00:1, the
   label literally invisible. That single inheritance is the whole button family
   of the D5 residual: D5-C02 / D5-C04 / D5-C05 (the 12 San Diego CTAs),
   D5-C03 (.footer-btn.gold, white on mint) and D5-C08 / D5-C09.
   A button paints its own background, so it must set its own colour alongside
   it. Values are the same tokens the base button rules use — nothing new is
   introduced. Specificity is (0,2,0)+ which clears the ambient link rule
   without an !important. */
:is(.dark-zone, .mid-zone, .hero-section, .hero, .solve-hero, .cta-box,
    .cta-box--dark, .cta-box--gold, .cta-band, .solve-final-cta, .footer-box,
    .agent-card, .compliance-footer, .trust-bar, .specialist-wrap,
    .mobile-sticky-footer)
:is(.btn-primary, .btn-main, .btn-gold, .solve-btn-gold, .fbtn-gold,
    .nav-cta, .cta, .silo-main-link, .solve-county-primary-link) {
  background: var(--sl-mint);
  color: var(--sl-ink);
  border-color: var(--sl-mint);
}
:is(.dark-zone, .mid-zone, .hero-section, .hero, .solve-hero, .cta-box,
    .cta-box--dark, .cta-box--gold, .cta-band, .solve-final-cta, .footer-box,
    .agent-card, .compliance-footer, .trust-bar, .specialist-wrap,
    .mobile-sticky-footer)
:is(.btn-secondary, .btn-dark, .fbtn-navy, .footer-btn, .solve-btn,
    .decision-link-dark, .card-cta) {
  background: var(--sl-ink);
  color: var(--sl-white);
  border-color: var(--sl-ink);
}
/* The `gold` modifier flips a footer button to the accent fill. This existed only
   inside three page-id-scoped lane blocks (page-id 1887/1888/1889); the same
   markup on five other pages was left white-on-mint. Promoted to a real rule. */
.footer-btn.gold, .btn.gold, .solve-btn.gold, .fbtn-gold.gold {
  background: var(--sl-mint);
  color: var(--sl-ink);
  border-color: var(--sl-mint);
}
/* A bare `.btn` with no variant class has no fill of its own, so inside a dark
   container it rendered ink-on-ink (D5-C09). Give it the primary treatment. */
:is(.dark-zone, .mid-zone, .hero-section, .solve-hero, .cta-box, .cta-box--dark,
    .cta-box--gold, .cta-band, .footer-box, .solve-final-cta)
a.btn:not([class*="btn-"]):not(.gold) {
  background: var(--sl-mint);
  color: var(--sl-ink);
  border-color: var(--sl-mint);
}

/* --- 4. Secondary text at body size ---------------------------------------
   The locked --sl-muted (#6B7C93) is 4.3:1 on white — just under AA. It stays the
   brand token; body-size secondary text uses the darker sibling. */
.muted, .slr-muted, .sub, .specialist-note, .product-meta, .resource-desc,
.link-tile-desc, .related-link-desc, .spec-note, .form-sub, .role, .slr-small,
.lede, .lead-text, .solve-lead, .hero-copy, .desc, .breadcrumb,
.person-card__role, .author-byline, .stat-item__label, .stat-label,
small, .small, .micro, .fine-print, .mini-note, .disclaimer, .compliance-text,
.method-list__step p, .card__body, .loan-card__body {
  color: var(--sl-muted-text);
}
:is(.dark-zone, .mid-zone, .hero-section, .hero, .solve-hero, .cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band,
    .agent-card, .compliance-footer)
:is(.muted, .lede, .lead-text, .solve-lead, .hero-copy, .desc, .author-byline,
    .stat-item__label, .stat-label, small, .small, .micro, .fine-print,
    .disclaimer, .person-card__role, .method-list__step p) {
  color: var(--sl-muted-dark);
}

/* --- 5. Last-resort pairing guard ------------------------------------------
   Any card-like surface always restates BOTH halves, so it can never inherit a
   dark zone's white text onto its own white ground. */
.card, .tool-card, .path-card, .hero-box, .loan-card, .option-card, .pivot-card,
.use-case-card, .use-card, .program-card, .spec-card, .factor-card, .feature-card,
.benefit-card, .link-card, .link-tile, .silo-card, .resource-card, .product-card,
.asset-card, .payout-card, .scenario-card, .scenario-box, .who-card, .sit-card,
.doc-card, .method-card, .service-card, .info-card, .info-box, .form-card,
.decision-card, .decision-tile, .intent-card, .team-member, .category-card,
.person-card, .snippet-box, .trust-box, .check-box, .answer-box {
  background-color: var(--sl-white);
  color: var(--sl-body);
}
.answer-box, .scenario-block { background-color: var(--sl-tint); }

/* ══ CONTRAST CONTRACT — round 2 ═════════════════════════════════════════════
   Anchored on .entry-content-wrap so these win against per-page <style> blocks,
   which are emitted after the stylesheet and would otherwise take the cascade. */

/* (a) Controls own their own colours — never repaint a button's label with the
   surrounding surface's accent. */
.entry-content-wrap :is(.dark-zone,.mid-zone,.hero-section,.hero,.solve-hero,
  .cta-box:not(.cta-box--alt):not(.cta-box--inline),.cta-band,.agent-card,.compliance-footer,.trust-bar)
:is(.btn, .btn-primary, .btn-secondary, .btn-main, .btn-gold, .btn-dark,
    .solve-btn, .solve-btn-gold, .fbtn-gold, .fbtn-navy, .footer-btn, .nav-cta,
    .cta, .card-cta, .silo-main-link, .solve-county-primary-link) {
  color: var(--sl-ink);
}
.entry-content-wrap :is(.btn-outline, .solve-btn-outline, .btn-outline-dark) { color: inherit; }
.entry-content-wrap :is(.dark-zone,.mid-zone,.hero-section,.solve-hero,.cta-box:not(.cta-box--alt):not(.cta-box--inline),.cta-band)
:is(.btn-outline, .solve-btn-outline) { color: var(--sl-mint); }

/* (b) Emphasis inherits. It is inline, it has no ground of its own, and it must
   follow whatever surface it lands on — including one a page's CSS painted. */
.entry-content-wrap strong,
.entry-content-wrap b { color: inherit; font-weight: 650; }

/* Headings on the dark CTA surfaces follow the surface too. */
.entry-content-wrap :is(.cta-box, .cta-band, .solve-final-cta) > :is(h1,h2,h3,h4,h5,h6),
.entry-content-wrap :is(.cta-box, .cta-band, .solve-final-cta) > * > :is(h1,h2,h3,h4,h5,h6) {
  color: #fff;
}
.entry-content-wrap :is(.cta-box--alt, .cta-box--inline) :is(h1,h2,h3,h4,h5,h6) {
  color: var(--sl-ink);
}
.entry-content-wrap :is(.cta-box--alt, .cta-box--inline) :is(p, li, td, dd, span, div) {
  color: var(--sl-body);
}

/* Cards keep their light contract even inside a dark section. */
.entry-content-wrap :is(.dark-zone,.mid-zone,.hero-section,.solve-hero,.cta-box:not(.cta-box--alt):not(.cta-box--inline),.cta-band)
:is(.card,.tool-card,.path-card,.hero-box,.pivot-card,.snippet-box,.info-card,.person-card)
:is(h1,h2,h3,h4,h5,h6) { color: var(--sl-ink); }
.entry-content-wrap :is(.dark-zone,.mid-zone,.hero-section,.solve-hero,.cta-box:not(.cta-box--alt):not(.cta-box--inline),.cta-band)
:is(.card,.tool-card,.path-card,.hero-box,.pivot-card,.snippet-box,.info-card,.person-card)
:is(p,li,span,td,dd) { color: var(--sl-body); }

/* (c) Secondary text inside light callouts — page CSS used #94a3b8 (2.5:1). */
.entry-content-wrap :is(.cta-box--alt,.cta-box--inline,.scenario-block,.answer-box)
:is(p,li,small,.disclaimer,.fine-print,.mini-note) { color: var(--sl-body); }

/* (d) Legacy inline brand-green text on light grounds. #00CC66 is 2.1:1 and
   #00FF7F is 1.3:1 as text on white — both are decoration colours. Only
   !important can outrank a style attribute. */
.entry-content-wrap :is(.card,.tool-card,.path-card,.hero-box,.light-zone,.soft-zone)
[style*="#00CC66"]:not([style*="background"]),
.entry-content-wrap :is(.card,.tool-card,.path-card,.hero-box,.light-zone,.soft-zone)
[style*="#00cc66"]:not([style*="background"]),
.entry-content-wrap :is(.card,.tool-card,.path-card,.hero-box,.light-zone,.soft-zone)
[style*="#00FF7F"]:not([style*="background"]),
.entry-content-wrap :is(.card,.tool-card,.path-card,.hero-box,.light-zone,.soft-zone)
[style*="#00ff7f"]:not([style*="background"]) { color: var(--sl-accent-text) !important; }

/* Muted greys that page CSS sets below AA at body size. */
.entry-content-wrap [style*="#94a3b8"]:not([style*="background"]),
.entry-content-wrap [style*="#94A3B8"]:not([style*="background"]) { color: var(--sl-muted-text) !important; }

/* ══ CONTRAST CONTRACT — round 3 ═════════════════════════════════════════════ */

/* (a) Round-2 regression: dark-ground buttons keep a light label. Primary/gold
   buttons are mint-on-ink; secondary/dark buttons are white-on-ink. */
.entry-content-wrap :is(.btn-secondary, .btn-dark, .fbtn-navy, .footer-btn,
  .solve-btn, .decision-link-dark, .card-cta, .hv-mbtn-book) { color: #fff; }
.entry-content-wrap :is(.dark-zone,.mid-zone,.hero-section,.hero,.solve-hero,
  .cta-box:not(.cta-box--alt):not(.cta-box--inline),.cta-band,.agent-card,.compliance-footer,.trust-bar)
:is(.btn-secondary, .btn-dark, .fbtn-navy, .footer-btn, .solve-btn,
    .decision-link-dark, .card-cta) { color: #fff; }

/* (b) Inline text colours authored for a light card, living on a dark CTA.
   Restricted to h*/p/a — elements that essentially never set a background
   inline — so a legitimate inline `background` is never mistaken for text.
   .cta-box--alt / --inline are LIGHT variants and are excluded. */
.entry-content-wrap :is(.cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .solve-final-cta, .dark-zone, .mid-zone):not(.cta-box--alt):not(.cta-box--inline)
:is(h1,h2,h3,h4,h5,h6)[style*="color:"]:not([style*="background"]) { color: #fff !important; }

.entry-content-wrap :is(.cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .solve-final-cta, .dark-zone, .mid-zone):not(.cta-box--alt):not(.cta-box--inline)
:is(p, span, div, li)[style*="color:"]:not([style*="background"]) { color: rgba(255,255,255,.85) !important; }

.entry-content-wrap :is(.cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .solve-final-cta, .dark-zone, .mid-zone):not(.cta-box--alt):not(.cta-box--inline)
a[style*="color:"]:not([style*="background"]) { color: var(--sl-mint) !important; }

/* …but a light card sitting inside one of those keeps light-surface colours.
   CONTENT-CLOSE F3: the list was class-only, so a box that declares its light
   ground with an INLINE style and carries no class was still painted white — the
   white-on-white copy on /orange-county/home-evaluation and
   /los-angeles-county/home-evaluation (D5-C06, D5-C07, D5-C10, 1.00:1). Inline
   light backgrounds are added as alternatives here rather than in a competing
   rule, so specificity stays identical to the rule they are excepting. */
.entry-content-wrap :is(.cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .dark-zone, .mid-zone):not(.cta-box--alt):not(.cta-box--inline)
:is(.card,.tool-card,.path-card,.hero-box,.pivot-card,.snippet-box,.person-card,
    [style*="background:#fff"],[style*="background:#FFF"],[style*="background:#ffffff"])
:is(h1,h2,h3,h4,h5,h6)[style*="color:"]:not([style*="background"]) { color: var(--sl-ink) !important; }
.entry-content-wrap :is(.cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .dark-zone, .mid-zone):not(.cta-box--alt):not(.cta-box--inline)
:is(.card,.tool-card,.path-card,.hero-box,.pivot-card,.snippet-box,.person-card,
    [style*="background:#fff"],[style*="background:#FFF"],[style*="background:#ffffff"])
:is(p, span, div, li)[style*="color:"]:not([style*="background"]) { color: var(--sl-body) !important; }
.entry-content-wrap :is(.cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .dark-zone, .mid-zone):not(.cta-box--alt):not(.cta-box--inline)
:is(.card,.tool-card,.path-card,.hero-box,.pivot-card,.snippet-box,.person-card,
    [style*="background:#fff"],[style*="background:#FFF"],[style*="background:#ffffff"])
a[style*="color:"]:not([style*="background"]) { color: var(--sl-accent-text) !important; }

/* (c) The brand greens as inline TEXT on any light ground — #00FF7F is 1.3:1 and
   #00CC66 is 2.1:1. Applied broadly, then re-allowed on dark grounds where the
   bright mint is correct and passes comfortably. */
.entry-content-wrap :is(a, span, div, p, strong, li)[style*="#00CC66"]:not([style*="background"]),
.entry-content-wrap :is(a, span, div, p, strong, li)[style*="#00cc66"]:not([style*="background"]),
.entry-content-wrap :is(a, span, div, p, strong, li)[style*="#00FF7F"]:not([style*="background"]),
.entry-content-wrap :is(a, span, div, p, strong, li)[style*="#00ff7f"]:not([style*="background"]) {
  color: var(--sl-accent-text) !important;
}
.entry-content-wrap :is(.dark-zone,.mid-zone,.hero-section,.hero,.solve-hero,
  .cta-box:not(.cta-box--alt):not(.cta-box--inline),.cta-band,.agent-card,.compliance-footer,.trust-bar)
:is(a, span, div, p, strong, li)[style*="#00FF7F"]:not([style*="background"]),
.entry-content-wrap :is(.dark-zone,.mid-zone,.hero-section,.hero,.solve-hero,
  .cta-box:not(.cta-box--alt):not(.cta-box--inline),.cta-band,.agent-card,.compliance-footer,.trust-bar)
:is(a, span, div, p, strong, li)[style*="#00CC66"]:not([style*="background"]) {
  color: var(--sl-mint) !important;
}

/* (d) Inline muted greys below AA at body size, on light grounds. */
.entry-content-wrap :is(p, span, div, li, small)[style*="#6B7C93"]:not([style*="background"]),
.entry-content-wrap :is(p, span, div, li, small)[style*="#6b7c93"]:not([style*="background"]) {
  color: var(--sl-muted-text) !important;
}
.entry-content-wrap :is(.dark-zone,.mid-zone,.hero-section,.solve-hero,.cta-box:not(.cta-box--alt):not(.cta-box--inline),.cta-band)
:is(p, span, div, li, small)[style*="#6B7C93"]:not([style*="background"]) { color: var(--sl-muted-dark) !important; }

/* (e) Body-size secondary text that inherits the brand muted on a light ground. */
.entry-content-wrap .service-page > p,
.entry-content-wrap .county-page > p { color: var(--sl-muted-text); }

/* ══ CONTRAST CONTRACT — round 5 ═════════════════════════════════════════════
   Inline dark text colours authored for a light card, landing on a dark CTA.
   Matched on the exact `color:#HEX` so nothing else is caught, and still
   guarded against elements that paint their own background. */
.entry-content-wrap :is(.cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .solve-final-cta, .dark-zone, .mid-zone):not(.cta-box--alt):not(.cta-box--inline)
[style*="color:#0D1B2E"]:not([style*="background"]),
.entry-content-wrap :is(.cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .solve-final-cta, .dark-zone, .mid-zone):not(.cta-box--alt):not(.cta-box--inline)
[style*="color:#0d1b2e"]:not([style*="background"]),
.entry-content-wrap :is(.cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .solve-final-cta, .dark-zone, .mid-zone):not(.cta-box--alt):not(.cta-box--inline)
[style*="color:#1A2B3C"]:not([style*="background"]),
.entry-content-wrap :is(.cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .solve-final-cta, .dark-zone, .mid-zone):not(.cta-box--alt):not(.cta-box--inline)
[style*="color:#1a2b3c"]:not([style*="background"]),
.entry-content-wrap :is(.cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .solve-final-cta, .dark-zone, .mid-zone):not(.cta-box--alt):not(.cta-box--inline)
[style*="color:#22364B"]:not([style*="background"]),
.entry-content-wrap :is(.cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .solve-final-cta, .dark-zone, .mid-zone):not(.cta-box--alt):not(.cta-box--inline)
[style*="color:#22364b"]:not([style*="background"]),
.entry-content-wrap :is(.cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .solve-final-cta, .dark-zone, .mid-zone):not(.cta-box--alt):not(.cta-box--inline)
[style*="color:#374151"]:not([style*="background"]),
.entry-content-wrap :is(.cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .solve-final-cta, .dark-zone, .mid-zone):not(.cta-box--alt):not(.cta-box--inline)
[style*="color:#1e293b"]:not([style*="background"]),
.entry-content-wrap :is(.cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .solve-final-cta, .dark-zone, .mid-zone):not(.cta-box--alt):not(.cta-box--inline)
[style*="color:#0f172a"]:not([style*="background"]),
.entry-content-wrap :is(.cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .solve-final-cta, .dark-zone, .mid-zone):not(.cta-box--alt):not(.cta-box--inline)
[style*="color:#334155"]:not([style*="background"]) {
  color: #fff !important;
}

.entry-content-wrap :is(.cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .solve-final-cta, .dark-zone, .mid-zone):not(.cta-box--alt):not(.cta-box--inline)
[style*="color:#6B7C93"]:not([style*="background"]),
.entry-content-wrap :is(.cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .solve-final-cta, .dark-zone, .mid-zone):not(.cta-box--alt):not(.cta-box--inline)
[style*="color:#6b7c93"]:not([style*="background"]),
.entry-content-wrap :is(.cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .solve-final-cta, .dark-zone, .mid-zone):not(.cta-box--alt):not(.cta-box--inline)
[style*="color:#94a3b8"]:not([style*="background"]),
.entry-content-wrap :is(.cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .solve-final-cta, .dark-zone, .mid-zone):not(.cta-box--alt):not(.cta-box--inline)
[style*="color:#94A3B8"]:not([style*="background"]),
.entry-content-wrap :is(.cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .solve-final-cta, .dark-zone, .mid-zone):not(.cta-box--alt):not(.cta-box--inline)
[style*="color:#64748b"]:not([style*="background"]),
.entry-content-wrap :is(.cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .solve-final-cta, .dark-zone, .mid-zone):not(.cta-box--alt):not(.cta-box--inline)
[style*="color:#475569"]:not([style*="background"]) {
  color: rgba(255,255,255,.78) !important;
}

/* Page-CSS classes that set the brand greens / muted as text on a light ground.
   These live in per-page <style> blocks that D3 removes; until then they are
   lifted to the accessible siblings. */
.entry-content-wrap :is(.tm-card-lic, .tm-card-role, .tm-eyebrow, .tm-role,
  .specialist-note, .auth-creds, .authority-nmls) {
  color: var(--sl-accent-text);
}
.entry-content-wrap :is(.tm-card-role, .specialist-note) { color: var(--sl-muted-text); }
.entry-content-wrap :is(.light-zone, .soft-zone, .card, .service-page, .county-page)
:is(strong, div, p, span) { }

/* ══ REVIEW ROUND — items 4 & 6 ══════════════════════════════════════════════ */

/* --- 4. Card grids ---------------------------------------------------------
   A card is a left-aligned block that fills its grid row. Centred body copy in a
   card reads as unstyled, and `align-items:start` left every row ragged. The
   trailing "View all →" link is pushed to the card's baseline so a row of cards
   shares one action line. */
.grid-2, .grid-3, .grid-4, .card-grid, .path-grid, .tool-grid, .use-case-grid,
.use-grid, .program-grid, .spec-grid, .factor-grid, .feature-grid, .benefits-grid,
.decision-grid, .decisions-grid, .resource-grid, .silo-grid, .link-grid, .hub-grid,
.related-grid, .product-grid, .asset-grid, .payout-grid, .scenario-grid, .who-grid,
.sit-grid, .situation-grid, .doc-grid, .service-grid, .pivot-grid,
.solve-intent-grid, .solve-path-grid, .solve-entity-grid, .solve-definition-grid,
.solve-service-grid, .solve-county-hub-grid, .solve-authority-grid, .split-2 {
  align-items: stretch;
}
/* an empty trailing grid cell should not paint a rule or a border */
:is(.card-grid, .grid-2, .grid-3, .grid-4, .related-grid, .link-grid) > :empty {
  display: none;
}

.entry-content-wrap :is(.card, .tool-card, .path-card, .hero-box, .loan-card,
  .option-card, .pivot-card, .use-case-card, .use-card, .program-card, .spec-card,
  .factor-card, .feature-card, .benefit-card, .link-card, .link-tile, .silo-card,
  .resource-card, .product-card, .asset-card, .payout-card, .scenario-card,
  .who-card, .sit-card, .doc-card, .method-card, .service-card, .info-card,
  .decision-card, .decision-tile, .intent-card, .category-card,
  .solve-intent-card, .solve-path-card, .solve-county-hub-card, .solve-service-card) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  height: 100%;
}
/* the card's last link/button drops to the baseline of the card */
.entry-content-wrap :is(.card, .tool-card, .path-card, .solve-county-hub-card,
  .service-card, .solve-service-card, .sit-card, .silo-card, .resource-card)
> :is(a, .link-arrow, .btn, .card-cta):last-child {
  margin-top: auto;
  padding-top: var(--sl-3);
}
.entry-content-wrap :is(.card, .tool-card, .path-card) > :is(p, ul, ol) { width: 100%; }
/* a card that is itself a link keeps the flex column but stays a block link */
a.card, a.tool-card, a.path-card, a.sit-card, a.silo-card { text-decoration: none; }

/* --- 6. Header: one row at desktop ----------------------------------------
   Kadence ships ul.menu as flex-wrap:wrap. With 7 top-level items in a 623px
   container that wrapped to two rows at 1440px. The MENUS run specified a single
   row; this restores it without touching the menu structure. */
@media (min-width: 1100px) {
  .primary-menu-container > ul.menu,
  .header-navigation ul.menu,
  .main-navigation ul.menu {
    flex-wrap: nowrap;
  }
  .header-navigation ul.menu > li > a,
  .primary-menu-container > ul.menu > li > a {
    white-space: nowrap;
    padding-left: 10px;
    padding-right: 10px;
  }
  .site-header-main-section-center,
  .primary-menu-container,
  .header-menu-container { min-width: 0; flex: 1 1 auto; }
}
@media (min-width: 1100px) and (max-width: 1319px) {
  .header-navigation ul.menu > li > a,
  .primary-menu-container > ul.menu > li > a {
    font-size: 0.9375rem;
    padding-left: 7px;
    padding-right: 7px;
  }
}

/* --- last enumerated page-CSS colour classes -------------------------------
   These live in per-page <style> blocks (team, Advisor's Desk) that D3 removes.
   Until then they are lifted to the accessible siblings; !important is required
   because the page block loads after this stylesheet. */
/* The Advisor's Desk eyebrows are NOT force-coloured here: those lanes place them
   on dark chapter grounds where the bright mint is correct and passes comfortably.
   Forcing the light-ground sibling on them made contrast worse (3.2:1).
   Instead the lane's OWN tokens are swapped — which is what "keep-and-reskin:
   swap its tokens to the locked palette" asks for. Doubled class for specificity:
   the page declares these on :root (0,1,0) in a <style> block that loads after
   this file, so .hv-page.hv-page (0,2,0) is what wins. */
.hv-page.hv-page, .sd-page.sd-page {
  --muted: #5A6B82;   /* was #6B7C93 — 4.3:1, under AA at body size */
  --slate: #1A2B3C;
}body /* eyebrows on the lane's LIGHT grounds get the accessible green; on its dark
   chapter grounds the rule above leaves the lane's own mint in place */
.entry-content-wrap :is(.light-zone,
body .soft-zone,
body .hv-changed-header,
body .hv-mini-card,
body .hv-see-item,
body .hv-int-card,
body .sd-mini-card)
:is(.hv-changed-eyebrow,
body .hv-chapter-eyebrow,
body .sd-chapter-eyebrow) {
  color: var(--sl-accent-text);
}body .entry-content-wrap :is(.tm-card-lic,
body .tm-eyebrow) { color: var(--sl-accent-text); }body .entry-content-wrap :is(.tm-card-role,
body .tm-role,
body .hv-changed-text,
body .hv-changed-text span) { color: var(--sl-muted-text); }body /* …but on a dark ground the bright mint is correct. */
.entry-content-wrap :is(.dark-zone,
body .mid-zone,
body .hero-section,
body .hero,
body .solve-hero,
body .cta-box:not(.cta-box--alt):not(.cta-box--inline),
body .cta-band,
body .tm-hero,
body .hv-hero,
body .sd-hero)
:is(body .hv-changed-eyebrow) {
  color: var(--sl-mint);
}
/* DESIGN-V3.2: .tm-card-lic / .tm-eyebrow / .tm-role removed from this list.
   They are a licence number, a section eyebrow and a job role -- none of them
   clickable, so under the link-language ruling they can never be mint. Removed
   at source rather than fought with a higher-specificity override: this rule's
   :not() chain lifts it to (0,5,3) and any winning selector would be unreadable. */

/* ══ REVIEW ROUND — final contrast cases ═════════════════════════════════════ */

/* 1. `background:transparent` is not a surface. An outline button carrying
   light-ground colours must still follow the dark section it sits on. */
.entry-content-wrap :is(.cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .solve-final-cta, .dark-zone,
  .mid-zone):not(.cta-box--alt):not(.cta-box--inline)
:is(a, span, div, p, li, h1, h2, h3, h4, h5, h6)[style*="background:transparent"] {
  color: #fff !important;
  border-color: rgba(255,255,255,.6) !important;
}
.entry-content-wrap :is(.cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .solve-final-cta, .dark-zone,
  .mid-zone):not(.cta-box--alt):not(.cta-box--inline)
a[style*="background:transparent"]:hover {
  background: rgba(255,255,255,.12) !important;
  border-color: #fff !important;
}

/* 2. The brand muted grey is never a background, so lifting it to the accessible
   sibling is safe even where the element paints its own light ground (4.08:1). */
.entry-content-wrap [style*="color:#6B7C93"],
.entry-content-wrap [style*="color:#6b7c93"],
.entry-content-wrap [style*="color: #6B7C93"],
.entry-content-wrap [style*="color: #6b7c93"] {
  color: var(--sl-muted-text) !important;
}
/* nested inline links inherit that lifted colour rather than the raw token */
.entry-content-wrap [style*="color:#6B7C93"] a:not([style*="color"]),
.entry-content-wrap [style*="color:#6b7c93"] a:not([style*="color"]) {
  color: var(--sl-accent-text) !important;
}

/* ══ SITE CHROME — header & footer (DESIGN-D3 step 5) ════════════════════════
   The design system styles CONTENT. Kadence's header and footer are chrome, and
   several unscoped content rules were leaking into them. Everything below first
   neutralises that leak, then styles the chrome on the same tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* --- 1. Leak guard --------------------------------------------------------- */
/* the ledger rule is a content device — it must never decorate chrome */
:is(.site-header, .site-footer) :is(.eyebrow, .eyebrow-text, .solve-kicker,
  .scenario-label, .use-case-label, .spec-label, .authority-label, .tool-label,
  .solve-entity-label, .cat-title, .trust-title, .hero-eyebrow-label,
  .widget-title, h1, h2, h3, h4, h5, h6) {
  display: block;
  gap: 0;
}
:is(.site-header, .site-footer) :is(.eyebrow, .eyebrow-text, .solve-kicker,
  .scenario-label, .spec-label, .trust-title, .cat-title, .widget-title,
  h1, h2, h3, h4, h5, h6)::after,
:is(.site-header, .site-footer) :is(.eyebrow, .eyebrow-text, .solve-kicker,
  .widget-title, h1, h2, h3, h4, h5, h6)::before {
  content: none;
}
/* content list markers must not appear on nav/menu items */
:is(.site-header, .site-footer) li::before,
:is(.site-header, .site-footer) li::after { content: none; }
:is(.site-header, .site-footer) ul,
:is(.site-header, .site-footer) ol { list-style: none; margin: 0; padding: 0; }
:is(.site-header, .site-footer) li { margin: 0; padding-left: 0; }
/* chrome owns its own widths and alignment */
:is(.site-header, .site-footer) .container {
  max-width: none;
  padding-inline: 0;
  margin-inline: 0;
  width: auto;
}
:is(.site-header, .site-footer) :is(.card, .grid-2, .grid-3, .grid-4, .card-grid) {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  display: block;
}

/* --- 2. Header ------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 300;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--sl-border);
  transition: box-shadow .2s var(--sl-ease);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.site-header:hover,
.site-header:focus-within { box-shadow: 0 2px 14px rgba(13,27,46,.08); }

.site-header .header-navigation ul.menu > li > a,
.site-header .primary-menu-container > ul.menu > li > a {
  font-family: var(--sl-font-body);
  font-size: 0.9375rem;
  font-weight: 550;
  color: var(--sl-ink);
  position: relative;
  transition: color .18s var(--sl-ease);
}
.site-header .header-navigation ul.menu > li > a:hover,
.site-header .header-navigation ul.menu > li.current-menu-item > a,
.site-header .header-navigation ul.menu > li.current-menu-ancestor > a {
  color: var(--sl-accent-text);
  text-decoration: none;
}
/* a hairline under the active/hovered item — the ledger motif, at chrome scale */
.site-header .header-navigation ul.menu > li > a::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: 4px;
  height: 2px;
  background: var(--sl-mint);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s var(--sl-ease);
}
.site-header .header-navigation ul.menu > li > a:hover::after,
.site-header .header-navigation ul.menu > li.current-menu-item > a::after {
  transform: scaleX(1);
}
/* dropdowns */
.site-header .header-navigation ul.sub-menu {
  background: var(--sl-white);
  border: 1px solid var(--sl-border);
  border-radius: var(--sl-r);
  box-shadow: var(--sl-shadow-lg);
  padding: var(--sl-2) 0;
}
.site-header .header-navigation ul.sub-menu li a {
  font-size: 0.9rem;
  color: var(--sl-body);
  padding: 8px 16px;
}
.site-header .header-navigation ul.sub-menu li a:hover {
  background: var(--sl-tint);
  color: var(--sl-accent-text);
}
.site-header .header-navigation ul.sub-menu li a::after { content: none; }

/* --- 3. Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--sl-ink);
  color: var(--sl-muted-dark);
  font-family: var(--sl-font-body);
}
.site-footer a { color: rgba(255,255,255,.82); text-decoration: none; }
.site-footer a:hover { color: var(--sl-mint); text-decoration: none; }
.site-footer .widget-title,
.site-footer h2, .site-footer h3, .site-footer h4 {
  font-family: var(--sl-font-body);
  font-size: var(--sl-t-xs);
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 var(--sl-4);
  padding-bottom: var(--sl-2);
  border-bottom: 1px solid rgba(0,255,127,.35);
}
.site-footer .site-top-footer-wrap { padding-block: var(--sl-8) var(--sl-6); }
.site-footer .site-top-footer-inner-wrap { gap: var(--sl-6); }
.site-footer ul.menu li,
.site-footer .widget ul li { margin-bottom: var(--sl-2); }
.site-footer ul.menu li a,
.site-footer .widget ul li a { font-size: var(--sl-t-cap); line-height: 1.5; }body /* RULING 4 — the NAP bar spans the whole bottom row.
   Kadence renders the bottom footer as a 2-column grid,
body which left the address,
body licences and legal links stacked in a narrow column. */
.site-footer .site-bottom-footer-inner-wrap {
  display: block;
  grid-template-columns: none;
  text-align: center;
  padding-block: var(--sl-5);
  border-top: 1px solid var(--sl-border-ink);
}
.site-footer .site-bottom-footer-inner-wrap > * {
  width: 100%;
  max-width: none;
  flex: 1 1 100%;
  text-align: center;
}
.site-footer .site-bottom-footer-inner-wrap :is(p, div) {
  max-width: none;
  margin-inline: auto;
  font-size: var(--sl-t-sm);
  line-height: 1.7;
  color: var(--sl-muted-dark);
}
.site-footer .site-bottom-footer-inner-wrap a { color: rgba(255,255,255,.82); }
.site-footer .site-bottom-footer-inner-wrap a:hover { color: var(--sl-mint); }
@media (max-width: 768px) {
  .site-footer .site-top-footer-inner-wrap { gap: var(--sl-5); }
  .site-footer .site-bottom-footer-inner-wrap { padding-inline: var(--sl-4); }
}

/* ══ FOOTER — round 2 ════════════════════════════════════════════════════════ */

/* The content system's pseudo decoration (ledger rules, list markers, arrows) has
   no business in the footer. A blanket reset is more reliable than chasing the
   class that is matching, and the footer needs no pseudo content of its own.
   Declared AFTER the header rules above so the header's hover underline survives. */
.site-footer *::before,
.site-footer *::after { content: none !important; }

/* Left-align the link columns — centred labels were wrapping mid-phrase
   ("San Diego / County"). */
.site-footer .site-top-footer-inner-wrap,
.site-footer .site-top-footer-inner-wrap * { text-align: left; }
.site-footer .site-footer-section { align-items: flex-start; }
.site-footer ul.menu,
.site-footer .widget ul { display: block; }
.site-footer ul.menu li a,
.site-footer .widget ul li a {
  display: inline-block;
  padding: 3px 0;
  border: 0;
  white-space: normal;
}

/* NAP bar: force full width all the way down, not just on the row's children. */
.site-footer .site-bottom-footer-inner-wrap,
.site-footer .site-bottom-footer-inner-wrap * { text-align: center; }
.site-footer .site-bottom-footer-inner-wrap,
.site-footer .site-bottom-footer-inner-wrap > *,
.site-footer .site-bottom-footer-inner-wrap .site-footer-section,
.site-footer .site-bottom-footer-inner-wrap .footer-html,
.site-footer .site-bottom-footer-inner-wrap .footer-html-inner,
.site-footer .site-bottom-footer-inner-wrap :is(p, div, span) {
  width: 100%;
  max-width: none;
  flex-basis: 100%;
  margin-inline: auto;
}
.site-footer .site-bottom-footer-inner-wrap :is(p, div) {
  font-size: var(--sl-t-sm);
  line-height: 1.8;
  color: var(--sl-muted-dark);
}
/* keep the legal links from crowding the licence numbers */
.site-footer .site-bottom-footer-inner-wrap a { white-space: nowrap; }

/* ══ ICONS (DESIGN-D3 step 3) ════════════════════════════════════════════════
   The 1,409 emoji across the content are now inline SVG drawn in the brand style:
   24x24 viewBox, 1.6px stroke, round caps, sized at 1em so they scale with their
   context exactly as the emoji did.

   They paint in currentColor, which is what makes them safe: an icon inherits the
   contrast-correct text colour of whatever surface it lands on, so it can never
   repeat the "colour set without background" bug the emoji-era markup had.
   ═══════════════════════════════════════════════════════════════════════════ */
.sl-icon {
  display: inline-block;
  vertical-align: -0.14em;
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  color: var(--sl-accent-text);
}
/* an icon immediately followed by text gets optical separation */
:is(a, h1, h2, h3, h4, h5, h6, strong, li, span, p, summary, button) > .sl-icon:first-child {
  margin-right: .45em;
}
/* a standalone icon block (the old `<div style="font-size:1.5rem">EMOJI</div>`) */
div > .sl-icon:only-child { margin: 0 0 var(--sl-2); color: var(--sl-accent-text); }
/* on dark grounds the bright mint is correct and passes comfortably */
:is(.dark-zone, .mid-zone, .hero-section, .hero, .solve-hero, .cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band,
    .agent-card, .compliance-footer, .trust-bar, .site-footer) .sl-icon {
  color: var(--sl-mint);
}
/* …but a light card inside one of those keeps the light-ground colour */
:is(.dark-zone, .mid-zone, .hero-section, .solve-hero, .cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band)
:is(.card, .tool-card, .path-card, .hero-box, .pivot-card, .snippet-box) .sl-icon {
  color: var(--sl-accent-text);
}
/* nav pills: the icon is decorative, keep it quiet next to the label */
:is(.section-nav, .nav-pills, .pill-nav, .solve-sticky-nav) .sl-icon { opacity: .8; }

/* ==========================================================================
   CONSOLIDATED PAGE LANES (DESIGN-D3 step 1)

   Moved here from per-page <style> blocks in post_content.

   EVERY selector is prefixed with the WordPress body class of the exact
   pages the lane came from. That scoping is not cosmetic: these lanes
   redefine generic class names (.card, .cta-box, .btn-primary, .eyebrow),
   and unscoped they would override the design system site-wide.

   Inline before: 72,958 bytes across 21 page copies
   ======================================================================== */

/* --- lane af529cdc — 1 page: /california-home-value-estimate */
:is(body.page-id-2260) {
  --navy:    #0D1B2E;
  --navy2:   #1A2B3C;
  --navy3:   #1A2B3C;
  --accent:   #00FF7F;
  --accent-deep:  #00CC66;
  --accent-tint:  #DEFCEE;
  --cream:   #F7FFFB;
  --white:   #ffffff;
  --slate:   #1A2B3C;
  --muted:   #5A6B82;
  --border:  #e5e7eb;
  --warm:    #F7FFFB;
  --warm2:   #F0FEF7;
  --serif:   'Playfair Display', Georgia, serif;
  --sans:    'Inter', system-ui, sans-serif;
}
:is(body.page-id-2260) .hv-page *,
:is(body.page-id-2260) .hv-page *::before,
:is(body.page-id-2260) .hv-page *::after { box-sizing: border-box; margin: 0; padding: 0; }
:is(body.page-id-2260) .hv-page {
  font-family: var(--sans);
  background: var(--cream);
  color: var(--slate);
  line-height: 1.72;
  font-size: 1.0625rem;
}
:is(body.page-id-2260) .hv-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 8px rgba(13,27,46,0.07);
  padding: 0 1rem;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
:is(body.page-id-2260) .hv-nav::-webkit-scrollbar { display: none; }
:is(body.page-id-2260) .hv-nav-inner {
  display: inline-flex;
  gap: 0.3rem;
  padding: 0.65rem 0;
  max-width: 900px;
  margin: 0 auto;
}
:is(body.page-id-2260) .hv-nav-pill {
  display: inline-block;
  padding: 0.32rem 0.9rem;
  border-radius: 999px;
  font-size: 0.77rem;
  font-weight: 600;
  color: var(--slate);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--border);
  transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
}
:is(body.page-id-2260) .hv-nav-pill:hover,
:is(body.page-id-2260) .hv-nav-pill.active {
  background: var(--accent);
  color: var(--navy);
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0,255,127,0.25);
}
:is(body.page-id-2260) .hv-hero {
  background: var(--navy);
  color: var(--white);
  padding: 80px 1.5rem 72px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
:is(body.page-id-2260) .hv-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(0,255,127,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 80% 100%, rgba(30,58,95,0.6) 0%, transparent 60%);
  pointer-events: none;
}
:is(body.page-id-2260) .hv-hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, #00ff7f, transparent);
}
:is(body.page-id-2260) .hv-hero-inner {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
:is(body.page-id-2260) .hv-hero-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #00ff7f;
  margin-bottom: 1.4rem;
  border: 1px solid rgba(0,255,127,0.35);
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
}
:is(body.page-id-2260) .hv-hero h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  font-weight: 700;
  line-height: 1.16;
  color: var(--white);
  margin-bottom: 1.35rem;
}
:is(body.page-id-2260) .hv-hero h1 em {
  font-style: italic;
  color: #00ff7f;
}
:is(body.page-id-2260) .hv-hero-sub {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.82);
  max-width: 660px;
  margin: 0 auto 1.4rem;
  line-height: 1.65;
}
:is(body.page-id-2260) .hv-hero-body {
  font-size: 0.96rem;
  color: rgba(255,255,255,0.62);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.72;
}
:is(body.page-id-2260) .hv-form-section {
  background: var(--navy);
  padding: 0;
  border-bottom: none;
  position: relative;
  overflow: hidden;
}
:is(body.page-id-2260) .hv-form-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 0% 50%, rgba(0,255,127,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 100% 20%, rgba(0,255,127,0.07) 0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
}
:is(body.page-id-2260) .hv-form-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 680px;
  position: relative;
  z-index: 1;
}
:is(body.page-id-2260) .hv-form-left {
  padding: 52px 44px 44px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,0.08);
}
:is(body.page-id-2260) .hv-form-crown-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #00ff7f;
  margin-bottom: 1.2rem;
}
:is(body.page-id-2260) .hv-form-crown-label svg { flex-shrink: 0; }
:is(body.page-id-2260) .hv-form-left h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}
:is(body.page-id-2260) .hv-form-left h2 em {
  font-style: italic;
  color: #00ff7f;
}
:is(body.page-id-2260) .hv-form-left p {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.65;
  margin-bottom: 1.5rem;
}
:is(body.page-id-2260) .hv-form-wrap {
  flex: 1;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  min-height: 480px;
}
:is(body.page-id-2260) .hv-form-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.2rem;
}
:is(body.page-id-2260) .hv-trust-pill {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
}
:is(body.page-id-2260) .hv-form-right {
  padding: 52px 44px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
}
:is(body.page-id-2260) .hv-video-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
:is(body.page-id-2260) .hv-video-headline {
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.25;
  margin-bottom: 0.75rem;
}
:is(body.page-id-2260) .hv-video-headline em { font-style: italic; color: var(--accent); }
:is(body.page-id-2260) .hv-video-sub {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}
:is(body.page-id-2260) .hv-video-wrap {
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.08);
  background: #000;
}
:is(body.page-id-2260) .hv-video-wrap::before {
  content: '';
  display: block;
  padding-top: 56.25%;
}
:is(body.page-id-2260) .hv-video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
:is(body.page-id-2260) .hv-video-badge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
  margin-top: 0.9rem;
}
:is(body.page-id-2260) .hv-video-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00ff7f;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(0,255,127,0.6);
}
:is(body.page-id-2260) .hv-royal-stat {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 16px 20px;
  margin-top: 0.5rem;
}
:is(body.page-id-2260) .hv-royal-stat-icon {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}
:is(body.page-id-2260) .hv-royal-stat-text strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.2rem;
}
:is(body.page-id-2260) .hv-royal-stat-text span {
  font-size: 0.83rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.5;
}
@media (max-width: 900px) {
:is(body.page-id-2260) .hv-form-inner {
    grid-template-columns: 1fr;
    min-height: auto;
  }:is(body.page-id-2260) .hv-form-left { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); padding: 40px 28px 36px; }:is(body.page-id-2260) .hv-form-right { padding: 36px 28px 44px; }

}
:is(body.page-id-2260) .hv-chapter {
  background: var(--navy);
  color: var(--white);
  padding: 30px 36px;
  border-radius: 12px;
  margin: 28px auto 0;
  max-width: 900px;
  position: relative;
  overflow: hidden;
}
:is(body.page-id-2260) .hv-chapter::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  border-radius: 4px 0 0 4px;
}
:is(body.page-id-2260) .hv-chapter-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.55rem;
}
:is(body.page-id-2260) .hv-chapter h2 {
  font-family: var(--serif);
  font-size: clamp(1.45rem, 3vw, 1.95rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.22;
  margin-bottom: 0.6rem;
}
:is(body.page-id-2260) .hv-chapter p {
  font-size: 0.96rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.65;
}
:is(body.page-id-2260) .hv-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 1.5rem 8px;
}
:is(body.page-id-2260) .hv-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 30px 34px;
  margin-bottom: 1.2rem;
  box-shadow: 0 1px 4px rgba(13,27,46,0.04);
}
:is(body.page-id-2260) .hv-card-accent {
  width: 3px;
  height: 26px;
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  border-radius: 2px;
  margin-bottom: 1rem;
}
:is(body.page-id-2260) .hv-card h3 {
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.75rem;
}
:is(body.page-id-2260) .hv-card p {
  font-size: 0.97rem;
  color: var(--slate);
  line-height: 1.72;
  margin-bottom: 0.8rem;
}
:is(body.page-id-2260) .hv-card p:last-child { margin-bottom: 0; }
:is(body.page-id-2260) .hv-pull-quote {
  background: var(--warm2);
  border-left: 4px solid var(--accent);
  border-radius: 0 10px 10px 0;
  padding: 22px 28px;
  margin: 1.2rem 0;
}
:is(body.page-id-2260) .hv-pull-quote p {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--navy);
  line-height: 1.5;
  margin: 0;
}
:is(body.page-id-2260) .hv-list {
  list-style: none;
  padding: 0;
  margin: 0.85rem 0 0;
}
:is(body.page-id-2260) .hv-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.95rem;
  color: var(--slate);
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.58;
}
:is(body.page-id-2260) .hv-list li:last-child { border-bottom: none; }
:is(body.page-id-2260) .hv-list-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 0.46rem;
}
:is(body.page-id-2260) .hv-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.2rem;
}
:is(body.page-id-2260) .hv-mini-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(13,27,46,0.04);
}
:is(body.page-id-2260) .hv-mini-card h4 {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.5rem;
}
:is(body.page-id-2260) .hv-mini-card p { font-size: 0.9rem; color: var(--muted); line-height: 1.6; }
:is(body.page-id-2260) .hv-interrupt {
  background: var(--navy);
  padding: 56px 1.5rem;
  margin: 32px 0;
}
:is(body.page-id-2260) .hv-interrupt-inner {
  max-width: 900px;
  margin: 0 auto;
}
:is(body.page-id-2260) .hv-interrupt-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.2rem;
}
:is(body.page-id-2260) .hv-interrupt-quote {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.25;
  margin-bottom: 1rem;
  max-width: 780px;
}
:is(body.page-id-2260) .hv-interrupt-quote em { color: var(--accent); font-style: italic; }
:is(body.page-id-2260) .hv-interrupt-sub {
  font-size: 0.97rem;
  color: rgba(255,255,255,0.68);
  max-width: 680px;
  line-height: 1.65;
  margin-bottom: 2rem;
}
:is(body.page-id-2260) .hv-interrupt-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
:is(body.page-id-2260) .hv-int-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 20px 22px;
}
:is(body.page-id-2260) .hv-int-card-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
:is(body.page-id-2260) .hv-int-card p {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.8);
  line-height: 1.58;
}
:is(body.page-id-2260) .hv-equity-band {
  background: linear-gradient(135deg, var(--warm) 0%, var(--accent-tint) 100%);
  border-top: 1px solid rgba(0,255,127,0.25);
  border-bottom: 1px solid rgba(0,255,127,0.25);
  padding: 48px 1.5rem;
  margin: 0;
}
:is(body.page-id-2260) .hv-equity-inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
}
:is(body.page-id-2260) .hv-equity-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 0.75rem;
}
:is(body.page-id-2260) .hv-equity-headline {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.22;
  margin-bottom: 1rem;
}
:is(body.page-id-2260) .hv-equity-body {
  font-size: 0.97rem;
  color: var(--slate);
  line-height: 1.7;
  margin-bottom: 0.85rem;
}
:is(body.page-id-2260) .hv-equity-body:last-child { margin-bottom: 0; }
:is(body.page-id-2260) .hv-equity-stat-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
:is(body.page-id-2260) .hv-equity-stat {
  background: var(--white);
  border: 1px solid rgba(0,255,127,0.3);
  border-radius: 10px;
  padding: 18px 22px;
  box-shadow: 0 2px 8px rgba(0,255,127,0.1);
}
:is(body.page-id-2260) .hv-equity-stat-num {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 0.3rem;
}
:is(body.page-id-2260) .hv-equity-stat-desc {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.5;
}
:is(body.page-id-2260) .hv-changed-section {
  background: var(--white);
  padding: 48px 1.5rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
:is(body.page-id-2260) .hv-changed-inner { max-width: 900px; margin: 0 auto; }
:is(body.page-id-2260) .hv-changed-header { margin-bottom: 1.75rem; }
:is(body.page-id-2260) .hv-changed-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 0.5rem;
}
:is(body.page-id-2260) .hv-changed-header h2 {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.22;
  margin-bottom: 0.5rem;
}
:is(body.page-id-2260) .hv-changed-header p { font-size: 0.96rem; color: var(--muted); }
:is(body.page-id-2260) .hv-changed-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));   /* V3.3 M2a: explicit tracks */
  gap: 1rem;
}
:is(body.page-id-2260) .hv-changed-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
}
:is(body.page-id-2260) .hv-changed-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}
:is(body.page-id-2260) .hv-changed-text strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.25rem;
}
:is(body.page-id-2260) .hv-changed-text span { font-size: 0.88rem; color: var(--muted); line-height: 1.55; }
:is(body.page-id-2260) .hv-see-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));   /* V3.3 M2a: explicit tracks */
  gap: 0.85rem;
  margin-top: 1rem;
}
:is(body.page-id-2260) .hv-see-item {
  background: var(--cream);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 13px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
}
:is(body.page-id-2260) .hv-mistake-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
:is(body.page-id-2260) .hv-mistake-row:last-child { border-bottom: none; }
:is(body.page-id-2260) .hv-mistake-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-deep);
}
:is(body.page-id-2260) .hv-mistake-text strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.2rem;
}
:is(body.page-id-2260) .hv-mistake-text span { font-size: 0.9rem; color: var(--muted); line-height: 1.55; }
:is(body.page-id-2260) .hv-county-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));   /* V3.3 M2a: explicit tracks */
  gap: 0.65rem;
  margin-top: 1rem;
}
:is(body.page-id-2260) .hv-county-link {
  display: block;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  transition: border-color 0.18s, background 0.18s;
}
:is(body.page-id-2260) .hv-county-link:hover { border-color: var(--accent); background: var(--warm); }
:is(body.page-id-2260) .hv-faq-item { border-bottom: 1px solid var(--border); }
:is(body.page-id-2260) .hv-faq-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 1.1rem 0;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  line-height: 1.4;
}
:is(body.page-id-2260) .hv-faq-btn .hv-faq-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--navy);
  transition: transform 0.22s;
}
:is(body.page-id-2260) .hv-faq-btn[aria-expanded="true"] .hv-faq-icon { transform: rotate(45deg); }
:is(body.page-id-2260) .hv-faq-answer {
  display: none;
  padding: 0 0 1.1rem;
  font-size: 0.97rem;
  color: var(--slate);
  line-height: 1.72;
}
:is(body.page-id-2260) .hv-faq-answer.open { display: block; }
:is(body.page-id-2260) .hv-final-cta {
  background: var(--navy);
  color: var(--white);
  padding: 64px 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
:is(body.page-id-2260) .hv-final-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
:is(body.page-id-2260) .hv-final-cta-inner { max-width: 640px; margin: 0 auto; position: relative; z-index: 1; }
:is(body.page-id-2260) .hv-final-cta h2 {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.75rem;
}
:is(body.page-id-2260) .hv-final-cta p {
  font-size: 1rem;
  color: rgba(255,255,255,0.72);
  margin-bottom: 2rem;
  line-height: 1.65;
}
:is(body.page-id-2260) .hv-btn-amber {
  display: inline-block;
  background: var(--accent);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.97rem;
  padding: 0.88rem 2rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
  margin: 0.4rem;
}
:is(body.page-id-2260) .hv-btn-amber:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,255,127,0.35); }
:is(body.page-id-2260) .hv-btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--white);
  font-weight: 600;
  font-size: 0.97rem;
  padding: 0.88rem 2rem;
  border-radius: 6px;
  border: 1.5px solid rgba(255,255,255,0.35);
  text-decoration: none;
  transition: border-color 0.18s, background 0.18s;
  margin: 0.4rem;
}
:is(body.page-id-2260) .hv-btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }
:is(body.page-id-2260) .hv-guides {
  background: var(--white);
  border-top: 1px solid var(--border);
  padding: 40px 1.5rem;
}
:is(body.page-id-2260) .hv-guides-inner { max-width: 900px; margin: 0 auto; }
:is(body.page-id-2260) .hv-guides h3 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 1rem;
}
:is(body.page-id-2260) .hv-guide-links { display: flex; flex-wrap: wrap; gap: 0.65rem; }
:is(body.page-id-2260) .hv-guide-link {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.45rem 0.9rem;
  transition: border-color 0.18s, background 0.18s;
}
:is(body.page-id-2260) .hv-guide-link:hover { border-color: var(--accent); background: var(--warm); }
:is(body.page-id-2260) .hv-mobile-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  background: var(--navy);
  border-top: 2px solid var(--accent);
  padding: 0.65rem 1rem;
  gap: 0.6rem;
}
:is(body.page-id-2260) .hv-mbtn-call,
:is(body.page-id-2260) .hv-mbtn-book {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.72rem 0.5rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.18s;
}
:is(body.page-id-2260) .hv-mbtn-call { background: var(--accent); color: var(--navy); }
:is(body.page-id-2260) .hv-mbtn-book { background: transparent; color: var(--white); border: 1.5px solid rgba(255,255,255,0.35); }
:is(body.page-id-2260) .hv-mbtn-call:hover,
:is(body.page-id-2260) .hv-mbtn-book:hover { opacity: 0.88; }
:is(body.page-id-2260) .hv-fade { opacity: 1; }
:is(body.page-id-2260) .hv-fade.visible { opacity: 1; transform: none; }
@media (max-width: 768px) {
:is(body.page-id-2260) .hv-interrupt-cards { grid-template-columns: 1fr; }:is(body.page-id-2260) .hv-equity-inner { grid-template-columns: 1fr; gap: 1.5rem; }

}
@media (max-width: 640px) {
:is(body.page-id-2260) .hv-mobile-bar { display: flex; }:is(body.page-id-2260) .hv-page { padding-bottom: 72px; }:is(body.page-id-2260) .hv-hero { padding: 52px 1.25rem 44px; }:is(body.page-id-2260) .hv-chapter { padding: 22px 20px; margin: 18px 1rem 0; }:is(body.page-id-2260) .hv-section { padding: 16px 1rem 6px; }:is(body.page-id-2260) .hv-card { padding: 20px 18px; }:is(body.page-id-2260) .hv-grid-2 { grid-template-columns: 1fr; }:is(body.page-id-2260) .hv-see-grid { grid-template-columns: 1fr 1fr; }:is(body.page-id-2260) .hv-county-grid { grid-template-columns: 1fr 1fr; }:is(body.page-id-2260) .hv-interrupt { padding: 40px 1.25rem; }:is(body.page-id-2260) .hv-equity-band { padding: 36px 1.25rem; }:is(body.page-id-2260) .hv-changed-section { padding: 36px 1.25rem; }:is(body.page-id-2260) .hv-final-cta { padding: 48px 1.25rem; }:is(body.page-id-2260) .hv-changed-grid { grid-template-columns: 1fr; }

}
@media (max-width: 400px) {
:is(body.page-id-2260) .hv-see-grid { grid-template-columns: 1fr; }

}

/* --- lane e36c6872 — 2 pages: /bank-vs-mortgage-broker-california, /no-best-bank-page */
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .solve-landing {
  max-width:1200px;
  margin:40px auto 90px;
  padding:0 20px 70px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:#1A2B3C;
  line-height:1.7;
  background:#fff;
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .solve-landing * {box-sizing:border-box;}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .solve-landing h1,
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .solve-landing h2,
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .solve-landing h3 {
  color:#0D1B2E;
  font-weight:850;
  letter-spacing:-.02em;
  margin-top:0;
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .solve-landing h1 {font-size:3rem;line-height:1.05;margin-bottom:18px;}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .solve-landing h2 {font-size:1.9rem;line-height:1.15;margin-bottom:16px;}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .solve-landing h3 {font-size:1.12rem;margin-bottom:8px;}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .solve-landing p {margin:0 0 16px;font-size:1.04rem;}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .solve-landing a {color:#067A45;font-weight:800;text-decoration:none;}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .solve-landing a:hover {text-decoration:underline;}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .sticky-nav {
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(10px);
  border:1px solid #e5e7eb;
  border-radius:999px;
  margin:0 auto 22px;
  padding:10px;
  box-shadow:0 8px 24px rgba(15,23,42,.08);
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .sticky-nav a {
  color:#0D1B2E;
  background:#f8fafc;
  border:1px solid #e5e7eb;
  padding:9px 14px;
  border-radius:999px;
  font-size:.9rem;
  font-weight:850;
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .sticky-nav a.nav-cta {
  background:#00FF7F;
  color:#0D1B2E;
  border-color:#00FF7F;
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .hero-wrap {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:28px;
  align-items:start;
  background:linear-gradient(145deg,#0D1B2E,#1A2B3C);
  border-radius:22px;
  padding:42px;
  color:#fff;
  overflow:hidden;
  position:relative;
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .hero-wrap:before {
  content:"";
  position:absolute;
  right:-90px;
  top:-90px;
  width:280px;
  height:280px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,255,127,.25),rgba(0,255,127,0));
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .hero-copy,
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .form-card {position:relative;z-index:2;}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .eyebrow {
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  padding:9px 14px;
  border-radius:999px;
  font-size:.92rem;
  font-weight:850;
  color:#f8fafc;
  margin-bottom:22px;
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .eyebrow img {width:24px;height:24px;border-radius:50%;background:#fff;}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .hero-copy h1 {color:#fff;}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .hero-copy p {color:#dbeafe;font-size:1.15rem;max-width:680px;}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .hero-bullets {display:grid;grid-template-columns:1fr;gap:12px;margin:24px 0;}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .hero-bullet {
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#f8fafc;
  border-radius:13px;
  padding:13px 15px;
  font-weight:800;
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .video-box {
  margin-top:22px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 16px 38px rgba(0,0,0,.28);
  background:#000;
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .video-box iframe {width:100%;aspect-ratio:16/9;border:0;display:block;}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .form-card {
  background:#fff;
  border-radius:20px;
  padding:24px;
  box-shadow:0 18px 45px rgba(0,0,0,.22);
  color:#1A2B3C;
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .form-card h2 {font-size:1.55rem;margin-bottom:8px;}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .form-card .form-sub {color:#5A6B82;margin-bottom:18px;font-size:.98rem;}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .form-promise {
  background:#F0FEF7;
  border:1px solid #A5F0CD;
  border-radius:12px;
  padding:13px;
  font-weight:800;
  color:#0D1B2E;
  margin-bottom:16px;
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .fine-print {font-size:.86rem;color:#5A6B82;margin-top:18px;}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .trust-strip {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:24px 0 8px;
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .trust-box {
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:15px;
  padding:18px;
  box-shadow:0 8px 24px rgba(15,23,42,.04);
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .trust-box strong {display:block;color:#0D1B2E;margin-bottom:5px;}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .section {
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:32px;
  margin-top:26px;
  box-shadow:0 8px 24px rgba(15,23,42,.04);
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .section.gold {background:linear-gradient(180deg,#F0FEF7,#fff);border-color:#A5F0CD;}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .section.blue {background:linear-gradient(180deg,#f8fafc,#fff);border-left:5px solid #0D1B2E;}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .section.red {background:linear-gradient(180deg,#fff7ed,#fff);border-left:5px solid #dc2626;}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .path-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:18px;
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .path-card {
  border:1px solid #e5e7eb;
  border-radius:16px;
  padding:22px;
  background:#fff;
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .path-card.featured {
  border:2px solid #00FF7F;
  background:linear-gradient(180deg,#F7FFFB,#fff);
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .tag {
  display:inline-block;
  background:#f1f5f9;
  color:#0D1B2E;
  border-radius:999px;
  padding:6px 11px;
  font-size:.78rem;
  font-weight:850;
  margin-bottom:12px;
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .quote-box {
  font-size:1.22rem;
  font-weight:850;
  color:#0D1B2E;
  background:#f8fafc;
  border-left:5px solid #00FF7F;
  padding:22px;
  border-radius:14px;
  margin:18px 0;
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .compare-table {
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:16px;
  border:1px solid #e5e7eb;
  margin-top:18px;
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .compare-table th,
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .compare-table td {
  padding:16px;
  border-bottom:1px solid #e5e7eb;
  vertical-align:top;
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .compare-table th {background:#0D1B2E;color:#fff;text-align:left;}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .compare-table tr:last-child td {border-bottom:none;}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .specialist {
  display:flex;
  gap:22px;
  align-items:center;
  flex-wrap:wrap;
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .specialist img {
  width:100px;
  height:100px;
  border-radius:50%;
  background:#f8fafc;
  border:1px solid #e5e7eb;
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .specialist div {flex:1;min-width:260px;}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .cta-band {
  background:linear-gradient(135deg,#F0FEF7,#DEFCEE);
  border:2px solid #00FF7F;
  border-radius:18px;
  padding:34px 28px;
  text-align:center;
  margin-top:28px;
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .cta-band p {max-width:760px;margin:0 auto 18px;}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .btn-main {
  display:inline-block;
  background:#00FF7F;
  color:#0D1B2E !important;
  padding:15px 26px;
  border-radius:10px;
  font-weight:900;
  text-decoration:none !important;
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .btn-dark {
  display:inline-block;
  background:#0D1B2E;
  color:#fff !important;
  padding:15px 26px;
  border-radius:10px;
  font-weight:900;
  text-decoration:none !important;
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .faq-item {border-top:1px solid #e5e7eb;padding:16px 0;}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .faq-item:first-child {border-top:none;padding-top:0;}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .mobile-sticky-footer {
  display:none;
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:999;
  background:#fff;
  border-top:1px solid #e5e7eb;
  padding:9px 14px calc(9px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -4px 16px rgba(0,0,0,.18);
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .footer-inner {display:flex;gap:10px;max-width:520px;margin:0 auto;}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .footer-btn {
  flex:1;
  text-align:center;
  padding:12px 10px;
  border-radius:9px;
  font-weight:900;
  font-size:.9rem;
  text-decoration:none !important;
}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .footer-btn.gold {background:#00FF7F;color:#0D1B2E;}
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .footer-btn.navy {background:#0D1B2E;color:#fff;}
@media(max-width:960px) {
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .hero-wrap,
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .trust-strip,
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .path-grid {grid-template-columns:1fr;}:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .solve-landing h1 {font-size:2.35rem;}:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .hero-wrap {padding:30px 22px;}

}
@media(max-width:720px) {
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .solve-landing {padding:0 14px 115px;margin-top:24px;}:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .solve-landing h1 {font-size:2.05rem;}:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .solve-landing h2 {font-size:1.45rem;}:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .form-card,
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .section {padding:22px;}:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .sticky-nav {
    border-radius:14px;
    overflow-x:auto;
    justify-content:flex-start;
    flex-wrap:nowrap;
  }:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .sticky-nav a {white-space:nowrap;}:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .mobile-sticky-footer {display:block;}:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .compare-table,
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .compare-table thead,
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .compare-table tbody,
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .compare-table th,
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .compare-table td,
:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .compare-table tr {display:block;width:100%;}:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .compare-table th {display:none;}:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .compare-table td:before {display:block;font-weight:900;color:#0D1B2E;margin-bottom:4px;}:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .compare-table td:nth-child(1):before {content:"What people think";}:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .compare-table td:nth-child(2):before {content:"What really happens";}:is(body.page-id-1887, body.page-id-1888, body.solve-adlander--landing) .compare-table td:nth-child(3):before {content:"Why it matters";}

}

/* --- lane 3ad05eec — 5 pages: /team, /team/kiyoshi-inui, /team/kenji-inui … (+2) */
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-page {max-width:900px;margin:36px auto 80px;padding:0 20px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#1A2B3C;line-height:1.7}
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-hero {background:linear-gradient(145deg,#0D1B2E,#1A2B3C);border-radius:18px;padding:42px 34px;color:#fff;margin-bottom:16px;position:relative;overflow:hidden;display:flex;gap:28px;align-items:center;flex-wrap:wrap}
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-hero:after {content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#00FF7F,transparent)}
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-hero img {width:132px;height:132px;border-radius:50%;object-fit:cover;border:3px solid rgba(0,255,127,.5);flex-shrink:0}
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-hero-info {flex:1;min-width:240px}
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-eyebrow {display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:#00FF7F;border:1px solid rgba(0,255,127,.35);padding:.28rem .85rem;border-radius:999px;margin-bottom:12px}
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-hero h1 {font-size:2.1rem;line-height:1.12;margin:0 0 6px;color:#fff}
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-role {color:rgba(255,255,255,.85);font-size:1.05rem;margin:0 0 4px}
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-lic {color:#00FF7F;font-weight:700;font-size:.92rem;margin:0 0 14px}
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-cta {display:inline-block;background:#00FF7F;color:#0D1B2E;font-weight:700;padding:.7rem 1.5rem;border-radius:8px;text-decoration:none;margin:0 10px 8px 0}
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-cta--ghost {background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-section {background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:26px 30px;margin:14px 0;box-shadow:0 1px 4px rgba(13,27,46,.05)}
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-section h2 {color:#0D1B2E;font-size:1.35rem;margin:0 0 10px}
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-section p {margin:0 0 12px}
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-list {list-style:none;padding:0;margin:8px 0 0}
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-list li {padding:.45rem 0;border-bottom:1px solid #eef1f4;display:flex;gap:.6rem;align-items:flex-start}
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-list li:last-child {border-bottom:none}
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-dot {width:7px;height:7px;border-radius:50%;background:#00CC66;flex-shrink:0;margin-top:.55rem}
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-links {display:flex;flex-wrap:wrap;gap:.6rem;margin-top:8px}
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-links a {font-size:.9rem;font-weight:600;color:#0D1B2E;text-decoration:none;background:#F0FEF7;border:1px solid #DEFCEE;border-radius:6px;padding:.45rem .9rem}
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-grid {display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:14px 0}
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-card {background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:24px;text-align:center;box-shadow:0 1px 4px rgba(13,27,46,.05)}
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-card img {width:110px;height:110px;border-radius:50%;object-fit:cover;border:3px solid #DEFCEE;margin-bottom:12px}
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-card h2 {font-size:1.15rem;color:#0D1B2E;margin:0 0 4px}
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-card .tm-card-role {color:#5A6B82;font-size:.92rem;margin:0 0 4px}
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-card .tm-card-lic {color:#067A45;font-weight:700;font-size:.85rem;margin:0 0 12px}
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-card a.tm-card-btn {display:inline-block;background:#0D1B2E;color:#fff;font-weight:600;font-size:.9rem;padding:.55rem 1.2rem;border-radius:7px;text-decoration:none}
@media(max-width:680px) {
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-grid {grid-template-columns:1fr}:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-hero {padding:30px 22px}:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295, body.page-id-2296) .tm-hero h1 {font-size:1.7rem}
}

/* --- lane 08d29d6c — 1 page: /ca-equity-options-no-refinance-page */
:is(body.page-id-1889, body.solve-adlander--adpage) .solve-ad-page {
    max-width:1180px;
    margin:40px auto 80px;
    padding:0 20px;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    color:#1A2B3C;
    line-height:1.65;
    background:#fff;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .solve-ad-page * {box-sizing:border-box;}
:is(body.page-id-1889, body.solve-adlander--adpage) .solve-ad-page h1,
:is(body.page-id-1889, body.solve-adlander--adpage) .solve-ad-page h2,
:is(body.page-id-1889, body.solve-adlander--adpage) .solve-ad-page h3 {
    color:#0D1B2E;
    font-weight:850;
    letter-spacing:-.02em;
    margin-top:0;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .solve-ad-page h1 {
    font-size:3.05rem;
    line-height:1.05;
    margin-bottom:18px;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .solve-ad-page h2 {
    font-size:1.9rem;
    line-height:1.15;
    margin-bottom:16px;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .solve-ad-page h3 {
    font-size:1.12rem;
    margin-bottom:8px;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .solve-ad-page p {margin:0 0 16px;}
:is(body.page-id-1889, body.solve-adlander--adpage) .solve-ad-page a {
    color:#067A45;
    font-weight:800;
    text-decoration:none;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .solve-ad-page a:hover {text-decoration:underline;}
:is(body.page-id-1889, body.solve-adlander--adpage) .hero-wrap {
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:28px;
    align-items:start;
    background:linear-gradient(145deg,#0D1B2E,#1A2B3C);
    border-radius:22px;
    padding:42px;
    color:#fff;
    overflow:hidden;
    position:relative;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .hero-wrap:before {
    content:"";
    position:absolute;
    right:-90px;
    top:-90px;
    width:280px;
    height:280px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(0,255,127,.22),rgba(0,255,127,0));
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .hero-copy,
:is(body.page-id-1889, body.solve-adlander--adpage) .form-card {position:relative;z-index:2;}
:is(body.page-id-1889, body.solve-adlander--adpage) .eyebrow {
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14);
    padding:9px 14px;
    border-radius:999px;
    font-size:.92rem;
    font-weight:800;
    color:#f8fafc;
    margin-bottom:22px;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .eyebrow img {
    width:24px;
    height:24px;
    border-radius:50%;
    background:#fff;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .hero-copy h1 {color:#fff;}
:is(body.page-id-1889, body.solve-adlander--adpage) .hero-copy p {
    color:#dbeafe;
    font-size:1.15rem;
    max-width:680px;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .hero-bullets {
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    margin:24px 0;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .hero-bullet {
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    color:#f8fafc;
    border-radius:13px;
    padding:13px 15px;
    font-weight:750;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .mini-note {
    color:#cbd5e1;
    font-size:.92rem;
    max-width:650px;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .form-card {
    background:#fff;
    border-radius:20px;
    padding:24px;
    box-shadow:0 18px 45px rgba(0,0,0,.22);
    color:#1A2B3C;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .form-card h2 {
    font-size:1.55rem;
    margin-bottom:8px;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .form-card .form-sub {
    color:#5A6B82;
    margin-bottom:18px;
    font-size:.98rem;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .pill-nav {
    position:sticky;
    top:12px;
    z-index:50;
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(10px);
    border:1px solid #e5e7eb;
    border-radius:999px;
    padding:10px;
    margin:18px auto 22px;
    max-width:830px;
    box-shadow:0 8px 22px rgba(15,23,42,.08);
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .pill-nav a {
    display:inline-block;
    padding:9px 14px;
    border-radius:999px;
    background:#f8fafc;
    color:#0D1B2E;
    font-size:.9rem;
    font-weight:850;
    text-decoration:none !important;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .pill-nav a:hover {
    background:#00FF7F;
    color:#0D1B2E;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .trust-strip {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
    margin:24px 0 8px;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .trust-box {
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:15px;
    padding:18px;
    box-shadow:0 8px 24px rgba(15,23,42,.04);
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .trust-box strong {
    display:block;
    color:#0D1B2E;
    margin-bottom:5px;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .section {
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:32px;
    margin-top:26px;
    box-shadow:0 8px 24px rgba(15,23,42,.04);
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .section.gold {
    background:linear-gradient(180deg,#F0FEF7,#fff);
    border-color:#A5F0CD;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .section.blue {
    background:linear-gradient(180deg,#f8fafc,#fff);
    border-left:5px solid #0D1B2E;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .path-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-top:18px;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .path-card {
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:22px;
    background:#fff;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .path-card.featured {
    border:2px solid #00FF7F;
    background:linear-gradient(180deg,#F7FFFB,#fff);
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .tag {
    display:inline-block;
    background:#f1f5f9;
    color:#0D1B2E;
    border-radius:999px;
    padding:6px 11px;
    font-size:.78rem;
    font-weight:850;
    margin-bottom:12px;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .path-card ul {
    padding-left:18px;
    margin:12px 0 0;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .path-card li {margin-bottom:7px;}
:is(body.page-id-1889, body.solve-adlander--adpage) .video-wrap {
    position:relative;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
    border-radius:16px;
    box-shadow:0 12px 30px rgba(15,23,42,.12);
    margin-top:18px;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .video-wrap iframe {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:0;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .specialist {
    display:flex;
    gap:22px;
    align-items:center;
    flex-wrap:wrap;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .specialist img {
    width:100px;
    height:100px;
    border-radius:50%;
    background:#f8fafc;
    border:1px solid #e5e7eb;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .specialist div {
    flex:1;
    min-width:260px;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .cta-band {
    background:linear-gradient(135deg,#F0FEF7,#DEFCEE);
    border:2px solid #00FF7F;
    border-radius:18px;
    padding:34px 28px;
    text-align:center;
    margin-top:28px;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .cta-band p {
    max-width:740px;
    margin:0 auto 18px;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .btn-main {
    display:inline-block;
    background:#00FF7F;
    color:#0D1B2E !important;
    padding:15px 26px;
    border-radius:10px;
    font-weight:900;
    text-decoration:none !important;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .btn-main:hover {
    background:#33FF99;
    text-decoration:none !important;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .faq-item {
    border-top:1px solid #e5e7eb;
    padding:16px 0;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .faq-item:first-child {
    border-top:none;
    padding-top:0;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .fine-print {
    font-size:.86rem;
    color:#5A6B82;
    margin-top:22px;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .mobile-sticky-footer {
    display:none;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:999;
    background:#0D1B2E;
    padding:9px 14px calc(9px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -4px 16px rgba(0,0,0,.28);
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .footer-inner {
    display:flex;
    gap:10px;
    max-width:520px;
    margin:0 auto;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .footer-btn {
    flex:1;
    text-align:center;
    padding:12px 10px;
    border-radius:9px;
    font-weight:900;
    font-size:.9rem;
    text-decoration:none !important;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .footer-btn.gold {
    background:#00FF7F;
    color:#0D1B2E;
  }
:is(body.page-id-1889, body.solve-adlander--adpage) .footer-btn.outline {
    border:2px solid #fff;
    color:#fff;
  }
@media(max-width:1100px) {
:is(body.page-id-1889, body.solve-adlander--adpage) .path-grid {
      grid-template-columns:repeat(2,1fr);
    }
  
}
@media(max-width:960px) {
:is(body.page-id-1889, body.solve-adlander--adpage) .hero-wrap,
:is(body.page-id-1889, body.solve-adlander--adpage) .trust-strip {
      grid-template-columns:1fr;
    }:is(body.page-id-1889, body.solve-adlander--adpage) .solve-ad-page h1 {
      font-size:2.35rem;
    }:is(body.page-id-1889, body.solve-adlander--adpage) .hero-wrap {
      padding:30px 22px;
    }
  
}
@media(max-width:720px) {
:is(body.page-id-1889, body.solve-adlander--adpage) .solve-ad-page {
      padding:0 14px 100px;
      margin-top:24px;
    }:is(body.page-id-1889, body.solve-adlander--adpage) .solve-ad-page h1 {
      font-size:2.05rem;
    }:is(body.page-id-1889, body.solve-adlander--adpage) .solve-ad-page h2 {
      font-size:1.45rem;
    }:is(body.page-id-1889, body.solve-adlander--adpage) .form-card,
:is(body.page-id-1889, body.solve-adlander--adpage) .section {
      padding:22px;
    }:is(body.page-id-1889, body.solve-adlander--adpage) .path-grid {
      grid-template-columns:1fr;
    }:is(body.page-id-1889, body.solve-adlander--adpage) .pill-nav {
      top:8px;
      border-radius:18px;
      justify-content:flex-start;
      overflow-x:auto;
      flex-wrap:nowrap;
      -webkit-overflow-scrolling:touch;
    }:is(body.page-id-1889, body.solve-adlander--adpage) .pill-nav a {
      white-space:nowrap;
      font-size:.84rem;
    }:is(body.page-id-1889, body.solve-adlander--adpage) .mobile-sticky-footer {
      display:block;
    }
  
}

/* --- lane 4a6f4546 — 1 page: /about */
:is(body.page-id-1890) .solve-about-wrap {font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:#fff;color:#0D1B2E}
:is(body.page-id-1890) .solve-about {max-width:1100px;margin:40px auto;padding:0 20px 70px;line-height:1.75}
:is(body.page-id-1890) .solve-about h1,
:is(body.page-id-1890) .solve-about h2,
:is(body.page-id-1890) .solve-about h3 {letter-spacing:-.01em;line-height:1.15;margin:0 0 14px;font-weight:900}
:is(body.page-id-1890) .solve-about h1 {font-size:2.45rem}
:is(body.page-id-1890) .solve-about h2 {font-size:1.75rem;margin-top:46px}
:is(body.page-id-1890) .solve-about h3 {font-size:1.18rem;margin-top:22px}
:is(body.page-id-1890) .solve-about p {margin:0 0 14px;color:#1A2B3C}
:is(body.page-id-1890) .solve-about a {color:#067A45;text-decoration:none;font-weight:800}
:is(body.page-id-1890) .solve-about a:hover {text-decoration:underline}
:is(body.page-id-1890) /* Hero */
    .hero {background:linear-gradient(145deg,#0D1B2E,#1A2B3C);border-radius:18px;padding:44px 34px;color:#fff;position:relative;overflow:hidden}
:is(body.page-id-1890) .hero:before {content:"";position:absolute;inset:-40px;opacity:.14;background:radial-gradient(circle at 15% 20%,#00FF7F,transparent 42%),radial-gradient(circle at 85% 65%,#00FF7F,transparent 45%)}
:is(body.page-id-1890) .hero > * {position:relative}
:is(body.page-id-1890) .eyebrow {display:inline-block;background:rgba(0,255,127,.18);border:1px solid rgba(0,255,127,.42);color:#D7FFE9;padding:7px 10px;border-radius:999px;font-size:.92rem;font-weight:900;margin-bottom:14px}
:is(body.page-id-1890) .sub {
      max-width:860px;
      color:#ffffff;            /* FIX: stronger contrast */
      font-size:1.12rem;
      font-weight:600;
      line-height:1.6;
      text-shadow:0 1px 2px rgba(0,0,0,.35); /* FIX: readability on gradient */
    }
:is(body.page-id-1890) .btn-row {display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
:is(body.page-id-1890) .btn {display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 16px;border-radius:12px;font-weight:900;border:1px solid rgba(255,255,255,.22);text-decoration:none}
:is(body.page-id-1890) .btn-gold {background:#00FF7F;color:#0D1B2E;border-color:#00FF7F}
:is(body.page-id-1890) .btn-gold:hover {filter:brightness(.97);text-decoration:none}
:is(body.page-id-1890) .btn-outline {background:transparent;color:#fff}
:is(body.page-id-1890) .btn-outline:hover {background:rgba(255,255,255,.09);text-decoration:none}
:is(body.page-id-1890) .micro {margin-top:14px;font-size:.95rem;color:rgba(255,255,255,.9);text-shadow:0 1px 2px rgba(0,0,0,.3)}
:is(body.page-id-1890) /* Layout */
    .grid {display:grid;grid-template-columns:1fr;gap:16px;margin-top:18px}
@media(min-width:900px) {
:is(body.page-id-1890) .grid {grid-template-columns:1.1fr .9fr}
}
/* riverside .card override removed — the v2 card system owns surface + padding */
:is(body.page-id-1890) .card p {color:#0D1B2E}
:is(body.page-id-1890) .divider {height:1px;background:#e5e7eb;margin:24px 0}
:is(body.page-id-1890) /* Trust */
    .trust-title {font-size:1.7rem;font-weight:950;letter-spacing:-.02em;margin:0 0 10px}
:is(body.page-id-1890) .trust-sub {font-weight:700;color:#1A2B3C;margin:0 0 14px}
:is(body.page-id-1890) .badge-row {display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
:is(body.page-id-1890) .badge {background:#0D1B2E;color:#fff;border:1px solid #0D1B2E;border-radius:999px;padding:8px 11px;font-weight:900;font-size:.92rem}
:is(body.page-id-1890) .addr {font-weight:950;color:#0D1B2E}
:is(body.page-id-1890) .muted {color:#5A6B82}
:is(body.page-id-1890) /* Differentiators */
    .pill-grid {display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px}
@media(min-width:760px) {
:is(body.page-id-1890) .pill-grid {grid-template-columns:repeat(2,1fr)}
}
:is(body.page-id-1890) .pill {border:1px solid #e5e7eb;border-radius:16px;padding:16px;background:#f8fafc}
:is(body.page-id-1890) .pill h3 {margin:0 0 6px}
:is(body.page-id-1890) .pill p {margin:0;color:#0D1B2E}
:is(body.page-id-1890) /* Lists */
    .list {margin:10px 0 0;padding:0 0 0 18px}
:is(body.page-id-1890) .list li {margin:7px 0;color:#0D1B2E}
:is(body.page-id-1890) /* FAQ */
    .faq {margin-top:16px}
:is(body.page-id-1890) details {border:1px solid #e5e7eb;border-radius:14px;background:#fff;margin:10px 0;overflow:hidden}
:is(body.page-id-1890) summary {cursor:pointer;padding:14px 14px;font-weight:950;color:#0D1B2E;list-style:none}
:is(body.page-id-1890) summary::-webkit-details-marker {display:none}
:is(body.page-id-1890) .faq-content {padding:0 14px 14px;color:#1A2B3C}
:is(body.page-id-1890) /* CTA */
    .cta {margin-top:46px;background:linear-gradient(145deg,#fff7ed,#F0FEF7);border:1px solid #e5e7eb;border-radius:18px;padding:22px}
:is(body.page-id-1890) .cta h2 {margin-top:0}
:is(body.page-id-1890) .compliance {margin-top:14px;font-size:.92rem;color:#1A2B3C}

/* --- lane 1246ca19 — 5 pages: /san-diego-county/seller-situations/adu, /san-diego-county/seller-situations/auction, /san-diego-county/seller-situations/bad-tenants … (+2) */
:is(body.page-id-1422, body.page-id-1423, body.page-id-1424, body.page-id-1425, body.page-id-1426) .pivot-grid {display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:40px;}
:is(body.page-id-1422, body.page-id-1423, body.page-id-1424, body.page-id-1425, body.page-id-1426) .pivot-card {padding:30px;border-radius:12px;text-align:center;text-decoration:none !important;border:2px solid transparent;transition:transform .2s;}
:is(body.page-id-1422, body.page-id-1423, body.page-id-1424, body.page-id-1425, body.page-id-1426) .pivot-card:hover {transform:translateY(-3px);}
:is(body.page-id-1422, body.page-id-1423, body.page-id-1424, body.page-id-1425, body.page-id-1426) .pivot-sell {background:#eff6ff;border-color:#00CC66;}
:is(body.page-id-1422, body.page-id-1423, body.page-id-1424, body.page-id-1425, body.page-id-1426) .pivot-keep {background:#fffbeb;border-color:#00FF7F;}
:is(body.page-id-1422, body.page-id-1423, body.page-id-1424, body.page-id-1425, body.page-id-1426) .grid-2 {display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:30px;}
:is(body.page-id-1422, body.page-id-1423, body.page-id-1424, body.page-id-1425, body.page-id-1426) .agent-row {display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:15px;border-top:1px solid #E2E8EF;}
:is(body.page-id-1422, body.page-id-1423, body.page-id-1424, body.page-id-1425, body.page-id-1426) .agent-avatar {width:50px;height:50px;border-radius:50%;object-fit:cover;}
@media(max-width:768px) {
:is(body.page-id-1422, body.page-id-1423, body.page-id-1424, body.page-id-1425, body.page-id-1426) .pivot-grid,
:is(body.page-id-1422, body.page-id-1423, body.page-id-1424, body.page-id-1425, body.page-id-1426) .grid-2 {grid-template-columns:1fr;}
}

/* --- lane e655dfc8 — 2 pages: /schedule-mortgage-appointment, /real-estate-appointment */
:is(body.page-id-1894, body.page-id-1895) .book-page {max-width:860px;margin:40px auto 80px;padding:0 20px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#1A2B3C;line-height:1.65}
:is(body.page-id-1894, body.page-id-1895) .book-hero {background:linear-gradient(145deg,#0D1B2E,#1A2B3C);border-radius:18px;padding:38px 32px;color:#fff;text-align:center;margin-bottom:14px;position:relative;overflow:hidden}
:is(body.page-id-1894, body.page-id-1895) .book-hero:after {content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#00FF7F,transparent)}
:is(body.page-id-1894, body.page-id-1895) .book-hero h1 {font-size:2rem;line-height:1.15;margin:0 0 10px;color:#fff}
:is(body.page-id-1894, body.page-id-1895) .book-hero p {color:rgba(255,255,255,.82);max-width:600px;margin:0 auto;font-size:1.05rem}
:is(body.page-id-1894, body.page-id-1895) .book-expect {display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
:is(body.page-id-1894, body.page-id-1895) .book-expect div {background:#F7FFFB;border:1px solid #DEFCEE;border-radius:12px;padding:14px 16px;font-size:.92rem}
:is(body.page-id-1894, body.page-id-1895) .book-expect strong {display:block;color:#0D1B2E;margin-bottom:4px}
:is(body.page-id-1894, body.page-id-1895) .book-cal {background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:10px;box-shadow:0 8px 24px rgba(13,27,46,.06);margin:8px 0 18px}
:is(body.page-id-1894, body.page-id-1895) .book-cross {text-align:center;font-size:.95rem;color:#5A6B82;margin:0 0 8px}
:is(body.page-id-1894, body.page-id-1895) .book-cross a {color:#067A45;font-weight:700;text-decoration:none}
@media(max-width:720px) {
:is(body.page-id-1894, body.page-id-1895) .book-expect {grid-template-columns:1fr}:is(body.page-id-1894, body.page-id-1895) .book-hero h1 {font-size:1.6rem}
}

/* --- lane b4ccd8e4 — 1 page: /insights/q3-2025-southern-california-housing-mortgage-update */
:is(body.postid-1902) { --brand:#00FF7F; --ink:#0D1B2E; --muted:#5A6B82; --bg:#ffffff; --card:#f8fafc; }
:is(body.postid-1902) .wrap { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.65; }
:is(body.postid-1902) .wrap { max-width: 960px; padding: 24px; margin: 0 auto; }
:is(body.postid-1902) h1,
:is(body.postid-1902) h2 { line-height: 1.25; }
:is(body.postid-1902) h1 { text-align: center; margin: 24px 0 12px; }
:is(body.postid-1902) .lede { color: var(--muted); text-align: center; margin-bottom: 28px; }
:is(body.postid-1902) .grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media(min-width: 900px) {
:is(body.postid-1902) .grid { grid-template-columns: 1fr 1fr; } 
}
:is(body.postid-1902) .card { background: var(--card); border: 1px solid #e2e8f0; border-radius: 14px; padding: 18px; }
:is(body.postid-1902) .pill { display: inline-block; background: #DEFCEE; color: #0D1B2E; font-weight: 600; padding: 4px 10px; border-radius: 999px; font-size: 12px; letter-spacing: .3px; }
:is(body.postid-1902) a { color: #067A45; text-decoration: none; }
:is(body.postid-1902) a:hover { text-decoration: underline; }
:is(body.postid-1902) .cta-row { display:flex; flex-wrap:wrap; gap:12px; margin: 22px 0; }
:is(body.postid-1902) .btn { background: var(--brand); color: #0D1B2E; padding: 12px 16px; border-radius: 12px; font-weight: 700; display:inline-flex; align-items:center; justify-content:center; }
:is(body.postid-1902) .btn:hover { filter: brightness(.95); text-decoration:none; }
:is(body.postid-1902) .small { font-size: 14px; color: var(--muted); }
:is(body.postid-1902) ul.checks { list-style: none; padding-left: 0; }
:is(body.postid-1902) ul.checks li::before { content: "\2713  "; }
:is(body.postid-1902) .blockquote { border-left: 4px solid var(--brand); padding-left: 12px; color: var(--muted); }
:is(body.postid-1902) .hr { height:1px; background:#e2e8f0; margin:28px 0; }
:is(body.postid-1902) .kpi { display:flex; gap:18px; flex-wrap:wrap; }
:is(body.postid-1902) .kpi .tag { background:#ecfeff; border:1px solid #bae6fd; padding:10px 12px; border-radius:12px; }

/* --- lane 8e8e4d6b — 1 page: /application */
:is(body.page-id-1896) .apply-page {max-width:960px;margin:40px auto 80px;padding:0 20px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#1A2B3C;line-height:1.65}
:is(body.page-id-1896) .apply-hero {background:linear-gradient(145deg,#0D1B2E,#1A2B3C);border-radius:18px;padding:34px 30px;color:#fff;text-align:center;margin-bottom:14px;position:relative;overflow:hidden}
:is(body.page-id-1896) .apply-hero:after {content:"";position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#00FF7F,transparent)}
:is(body.page-id-1896) .apply-hero h1 {font-size:1.9rem;line-height:1.15;margin:0 0 10px;color:#fff}
:is(body.page-id-1896) .apply-hero p {color:rgba(255,255,255,.82);max-width:620px;margin:0 auto;font-size:1rem}
:is(body.page-id-1896) .apply-note {text-align:center;font-size:.92rem;color:#5A6B82;margin:14px 0 8px}
:is(body.page-id-1896) .apply-note a {color:#067A45;font-weight:700;text-decoration:none}
:is(body.page-id-1896) .arive-iframe-container {position:relative;overflow:hidden;width:100%;height:850px;border:1px solid #DEFCEE;border-radius:12px;box-shadow:0 4px 12px rgba(13,27,46,.06);background:#fff;margin-top:14px}
:is(body.page-id-1896) #arive-application {width:100%;height:100%;border:none}
@media (max-width:767px) {
:is(body.page-id-1896) .arive-iframe-container {height:90vh;border:none;box-shadow:none}:is(body.page-id-1896) .apply-hero h1 {font-size:1.5rem}
}

/* --- lane d1049d83 — 1 page: /san-diego-county/seller-situations/behind-on-payments */
:is(body.page-id-1427) .pivot-grid {display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin:2rem 0;}
:is(body.page-id-1427) .pivot-card {background:#fff;border:1px solid #e0e0e0;border-radius:8px;padding:1.5rem;}
:is(body.page-id-1427) .pivot-sell {border-top:4px solid #c8a84b;}
:is(body.page-id-1427) .pivot-keep {border-top:4px solid #1a3a5c;}
:is(body.page-id-1427) .grid-2 {display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin:1.5rem 0;}
:is(body.page-id-1427) .agent-row {display:flex;align-items:center;gap:1.5rem;background:#1a3a5c;color:#fff;padding:1.5rem;border-radius:8px;margin:2rem 0;}
:is(body.page-id-1427) .agent-avatar {width:80px;height:80px;border-radius:50%;object-fit:cover;flex-shrink:0;}
:is(body.page-id-1427) .stat-item {text-align:center;padding:1rem;}
:is(body.page-id-1427) .stat-number {font-size:2rem;font-weight:700;color:#00FF7F;}
:is(body.page-id-1427) .stat-label {font-size:0.85rem;color:#555;margin-top:0.25rem;}
@media(max-width:768px) {
:is(body.page-id-1427) .pivot-grid,
:is(body.page-id-1427) .grid-2 {grid-template-columns:1fr;}
}

/* --- lane 537afa2d — 1 page: /san-diego-county/seller-situations */
:is(body.page-id-1414) .stat-item {text-align:center;}
:is(body.page-id-1414) .stat-number {font-size:2.5rem;font-weight:900;color:#ffffff;line-height:1;}
:is(body.page-id-1414) .stat-label {font-size:0.9rem;color:rgba(255,255,255,.75);margin-top:5px;}
:is(body.page-id-1414) .category-card {background:#fff;border:2px solid #E2E8EF;border-radius:12px;padding:30px;transition:all .3s ease;}
:is(body.page-id-1414) .category-card:hover {border-color:#00FF7F;box-shadow:0 10px 20px rgba(0,0,0,0.08);transform:translateY(-2px);}
:is(body.page-id-1414) .situation-list {list-style:none;padding:0;margin:0;}
:is(body.page-id-1414) .situation-list li {margin-bottom:8px;}
:is(body.page-id-1414) .situation-list a {display:block;padding:10px 12px;background:#F4F6F9;border-radius:6px;color:#1A2B3C;font-weight:600;font-size:0.92rem;transition:all .2s ease;}
:is(body.page-id-1414) .situation-list a:hover {background:#00FF7F;color:#0D1B2E;text-decoration:none;transform:translateX(4px);}


/* ══ CHROME CONTRAST ═════════════════════════════════════════════════════════
   The contrast contract is scoped to .entry-content-wrap — the design system is a
   CONTENT system. The header's own links were therefore never covered, and the
   "Apply" link ran at 2.1:1 on every page. Chrome gets the same ruling applied
   explicitly. */
.site-header a,
.site-header .header-apply-link,
.site-header .header-navigation a { color: var(--sl-ink); }
.site-header .header-apply-link { color: var(--sl-accent-text); font-weight: 600; }
.site-header .header-apply-link:hover { color: var(--sl-ink); }
/* the CTA button keeps its mint fill with ink text */
.site-header :is(.button, .kb-button, .header-cta a, .wp-block-button__link) {
  background: var(--sl-mint);
  color: var(--sl-ink);
  border-color: var(--sl-mint);
}
.site-header :is(.button, .kb-button, .header-cta a, .wp-block-button__link):hover {
  background: var(--sl-mint-deep);
  color: var(--sl-ink);
}

/* ══ LANE PAIRING REPAIRS ════════════════════════════════════════════════════
   Appended after the consolidated lanes so it wins. Where a lane replaces a
   component's BACKGROUND without also replacing its text colour, the pair is
   restored here. */

/* .agent-row: dark surface in the design system, transparent inline row in the
   SD seller-situations lane. Whichever ground it ends up on, the text follows. */
.entry-content-wrap .agent-row:not(.dark-zone) {
  background: transparent;
  color: var(--sl-body);
  border-radius: 0;
  padding: 0;
}
.entry-content-wrap .agent-row:not(.dark-zone) :is(p, div, span, li) { color: var(--sl-body); }
.entry-content-wrap .agent-row:not(.dark-zone) :is(strong, b, h3, h4) { color: var(--sl-ink); }
.entry-content-wrap .agent-row:not(.dark-zone) a { color: var(--sl-accent-text); }

/* Any element painting one of the lane dark navies must carry light text —
   these grounds are set by lane CSS the contract cannot otherwise see. */
.entry-content-wrap [style*="background:#1A3A5C"],
.entry-content-wrap [style*="background:#1a3a5c"],
.entry-content-wrap [style*="background-color:#1A3A5C"],
.entry-content-wrap [style*="background:#0D1B2E"],
.entry-content-wrap [style*="background:#1A2B3C"] {
  color: rgba(255,255,255,.86);
}
.entry-content-wrap :is([style*="background:#1A3A5C"], [style*="background:#1a3a5c"],
  [style*="background:#0D1B2E"], [style*="background:#1A2B3C"]) :is(div, p, span, li) {
  color: rgba(255,255,255,.86);
}
.entry-content-wrap :is([style*="background:#1A3A5C"], [style*="background:#1a3a5c"],
  [style*="background:#0D1B2E"], [style*="background:#1A2B3C"]) :is(strong, b, h1, h2, h3, h4) {
  color: #fff;
}

/* ══ FINAL PAIRING ═══════════════════════════════════════════════════════════
   Appended last. Everything here restores a foreground/background pair that a
   consolidated lane broke by replacing only one half. */

/* 1. A mint fill always takes ink text — the accessible green is a colour for
      text on WHITE, and on a mint button it reads at 4.0:1. */
.entry-content-wrap :is(.btn-primary, .btn-main, .btn-gold, .solve-btn-gold,
  .fbtn-gold, .hv-btn-amber, .hv-mbtn-call, .nav-cta, .cta, .silo-main-link,
  .solve-county-primary-link),
.site-header :is(.button, .kb-button, .wp-block-button__link) {
  color: var(--sl-ink);
}

/* 2. Chrome is not a content lane. Re-asserted after the lanes so a lane's bare
      `a { … }` cannot repaint the header or footer. */
.site-footer a { color: rgba(255,255,255,.82); }
.site-footer a:hover { color: var(--sl-mint); }
.site-footer .widget-title, .site-footer h2, .site-footer h3, .site-footer h4 { color: #fff; }
.site-header a { color: var(--sl-ink); }
.site-header .header-apply-link { color: var(--sl-accent-text); }
.site-header .header-navigation ul.menu > li > a { color: var(--sl-ink); }
.site-header .header-navigation ul.menu > li > a:hover { color: var(--sl-accent-text); }

/* 3. Stat strips.
   `color: inherit` was tried here first and made things worse: .stat-item has no
   ground of its own, so inherit resolved to whatever the nearest ancestor happened
   to set rather than to the strip's real background. The two lanes that paint a
   stat strip dark are corrected at source in their own consolidated blocks
   instead — see the SD seller-situations and Advisor's Desk lanes. */
.entry-content-wrap :is(.light-zone, .soft-zone, .card)
:is(.stat-number, .stat-item__number) { color: var(--sl-ink); }
.entry-content-wrap :is(.dark-zone, .mid-zone, .hero-section, .solve-hero, .cta-box:not(.cta-box--alt):not(.cta-box--inline))
:is(.stat-number, .stat-item__number) { color: var(--sl-mint); }
/* the SD seller-situations lane paints .stats-bar / .stat-item on deep navy */
.entry-content-wrap :is(.stats-bar, .stat-item)[style*="background"] :is(.stat-number, .stat-label),
.entry-content-wrap [style*="background:#1A2B3C"] :is(.stat-number, .stat-label),
.entry-content-wrap [style*="background:#0D1B2E"] :is(.stat-number, .stat-label) {
  color: #fff;
}
.entry-content-wrap [style*="background:#1A2B3C"] .stat-label,
.entry-content-wrap [style*="background:#0D1B2E"] .stat-label { color: rgba(255,255,255,.72); }


/* ══ SPECIFICITY BACKSTOP ════════════════════════════════════════════════════
   Lane rules are prefixed with a body class, which makes them (0,2,1) — enough to
   beat a plain (0,2,0) component rule. Two things must never lose that race:
   a mint-filled button's label, and the site footer's link colour. */
body .entry-content-wrap :is(.btn-primary, .btn-main, .btn-gold, .solve-btn-gold,
  .fbtn-gold, .hv-btn-amber, .hv-mbtn-call, .nav-cta, .cta, .silo-main-link,
  .solve-county-primary-link) { color: var(--sl-ink) !important; }
body .entry-content-wrap :is(.btn-outline, .solve-btn-outline) { color: inherit; }

body .site-footer a,
body .site-footer .site-footer-wrap a { color: rgba(255,255,255,.82); }
body .site-footer a:hover { color: var(--sl-mint); }
body .site-header .header-navigation ul.menu > li > a { color: var(--sl-ink); }
body .site-header .header-apply-link { color: var(--sl-accent-text); }

/* A stat strip painted dark by a lane keeps light figures. */
body .entry-content-wrap .stat-item .stat-number { }

/* ══ D1 OVERFLOW HARDENING (re-asserted last) ════════════════════════════════
   Every table scrolls rather than clipping, and the boxes that hold an over-wide
   table scroll too. !important because the consolidated lane rules carry a body
   class and would otherwise win. Verified by scripts/d1_audit_clip.mjs: zero
   pages losing content at 390px. */
.entry-content-wrap table {
  display: block !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
.entry-content-wrap :is(.table-overflow, .solve-table-scroll, .solve-table-wrap,
  .comparison-table-wrap) table {
  display: table !important;
  width: 100% !important;
  overflow-x: visible !important;
}
.entry-content-wrap :is(.snippet-box, .hero-wrap, .hero, .solve-answer-box,
  .scenario-block, .cta-box--alt, .cta-box--inline) {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
/* NOTE: putting `overflow-x:auto` on .card / .tool-card as well was tried and
   reverted — it made cards clip their own content and introduced 13 new contrast
   failures without fixing the two Riverside pages. Those two are documented as a
   residual in the D4 report instead !important; the cause is a .compare-table inside a
   .tool-card whose min-content width exceeds the card, which needs a markup
   wrapper rather than a CSS override. */
/* full-bleed never applies where there is no gutter to cancel */
.entry-content-wrap :is(.card, .tool-card, .hero-box, .path-card, .option-card,
  .snippet-box, .scenario-block, .loan-card, .pivot-card, .program-card,
  .spec-card, .info-card, .authority-card, td, th, li, figure, blockquote)
:is(.hero-section, .trust-bar, .dark-zone, .mid-zone, .light-zone, .soft-zone,
    .section-nav, .cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-box--dark, .cta-box--gold, .cta-band) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}
@media (max-width: 480px) {
  .entry-content-wrap :is(.snippet-box, .hero, .hero-wrap, .scenario-block,
    .cta-box--alt, .cta-box--inline, .option-card, .card, .loan-card, .pivot-card,
    .solve-answer-box, .tool-card, .path-card, .hero-box) {
    padding-left: var(--sl-4) !important;
    padding-right: var(--sl-4) !important;
  }
}

/* ══ AUTHORITY / AGENT METADATA — surface-correct defaults ═══════════════════
   These classes previously defaulted to dark-surface colours because the design
   system's agent card is a dark band. On the county template they live inside a
   light .authority-card, where that default rendered white-on-white. The default
   is now the LIGHT surface; dark grounds opt in below. */
.entry-content-wrap :is(.auth-name, .authority-name, .solve-auth-name, .team-name,
  .specialist-name, .slr-name, .card-trust-name) { color: var(--sl-ink); }
.entry-content-wrap :is(.auth-title, .auth-role, .auth-creds, .authority-meta,
  .authority-nmls, .authority-label, .authority-body, .solve-auth-title,
  .solve-auth-creds, .agent-card__meta, .team-role, .card-trust-role,
  .team-member-info, .specialist-note) { color: var(--sl-muted-text); }
.entry-content-wrap :is(.auth-creds, .authority-nmls, .solve-auth-creds) {
  color: var(--sl-accent-text);
}
.entry-content-wrap :is(.authority-card, .auth-card, .dual-authority, .dual-auth,
  .authority-info, .auth-info) { color: var(--sl-body); }
.entry-content-wrap :is(.authority-card, .auth-card, .dual-authority, .dual-auth)
:is(p, li, span, div) { color: var(--sl-body); }
.entry-content-wrap :is(.authority-card, .auth-card, .dual-authority, .dual-auth)
:is(h1, h2, h3, h4, strong) { color: var(--sl-ink); }
.entry-content-wrap :is(.authority-card, .auth-card, .dual-authority, .dual-auth)
a:not([class*="btn"]) { color: var(--sl-accent-text); }
/* a bare CTA link inside an authority card is a button without a class */
.entry-content-wrap :is(.authority-card, .auth-card, .dual-authority, .dual-auth,
  .authority-link, .auth-cta) > a,
.entry-content-wrap :is(.authority-info, .auth-info) > a { color: var(--sl-accent-text); }

/* dark grounds opt back in */
.entry-content-wrap :is(.dark-zone, .mid-zone, .hero-section, .hero, .solve-hero,
  .cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .agent-card.dark-zone, .agent-row.dark-zone, .compliance-footer)
:is(.auth-name, .authority-name, .solve-auth-name, .team-name, .specialist-name,
    .slr-name, .card-trust-name) { color: #fff; }
.entry-content-wrap :is(.dark-zone, .mid-zone, .hero-section, .hero, .solve-hero,
  .cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .agent-card.dark-zone, .agent-row.dark-zone, .compliance-footer)
:is(.auth-title, .auth-role, .authority-meta, .authority-body, .solve-auth-title,
    .agent-card__meta, .team-role, .card-trust-role, .team-member-info) {
  color: var(--sl-muted-dark);
}
.entry-content-wrap :is(.dark-zone, .mid-zone, .hero-section, .solve-hero, .cta-box:not(.cta-box--alt):not(.cta-box--inline),
  .agent-card.dark-zone)
:is(.auth-creds, .authority-nmls, .solve-auth-creds) { color: var(--sl-mint); }

/* ══ INLINE LIGHT TEXT ON A LIGHT GROUND ═════════════════════════════════════
   Bare links carrying an inline colour meant for a dark band, rendered on a light
   card. Guarded with :not([style*="background"]) so a filled button — where the
   light label is correct — is never touched. */
.entry-content-wrap :is(a, span, div, p, strong, li)[style*="color:#fff"]:not([style*="background"]),
.entry-content-wrap :is(a, span, div, p, strong, li)[style*="color:#ffffff"]:not([style*="background"]),
.entry-content-wrap :is(a, span, div, p, strong, li)[style*="color:#FFF"]:not([style*="background"]),
.entry-content-wrap :is(a, span, div, p, strong, li)[style*="color:#FFFFFF"]:not([style*="background"]),
.entry-content-wrap :is(a, span, div, p, strong, li)[style*="color:white"]:not([style*="background"]) {
  color: var(--sl-accent-text);
}
.entry-content-wrap :is(a, span, div, p, strong, li)[style*="color:#00FF7F"]:not([style*="background"]),
.entry-content-wrap :is(a, span, div, p, strong, li)[style*="color:#00ff7f"]:not([style*="background"]) {
  color: var(--sl-accent-text);
}
/* …but on a genuinely dark ground the light colour was right all along */
.entry-content-wrap :is(.dark-zone, .mid-zone, .hero-section, .hero, .solve-hero,
  .cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .agent-card, .compliance-footer, .trust-bar)
:is(a, span, div, p, strong, li)[style*="color:#fff"]:not([style*="background"]),
.entry-content-wrap :is(.dark-zone, .mid-zone, .hero-section, .hero, .solve-hero,
  .cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .agent-card, .compliance-footer, .trust-bar)
:is(a, span, div, p, strong, li)[style*="color:#ffffff"]:not([style*="background"]) {
  color: #fff;
}
.entry-content-wrap :is(.dark-zone, .mid-zone, .hero-section, .hero, .solve-hero,
  .cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .agent-card, .compliance-footer, .trust-bar)
:is(a, span, div, p, strong, li)[style*="color:#00FF7F"]:not([style*="background"]) {
  color: var(--sl-mint);
}

/* ══ GHOST BUTTONS ON LIGHT GROUNDS ══════════════════════════════════════════
   `background:rgba(255,255,255,0.x)` is a dark-band affordance, not a surface:
   over a light card the fill is invisible and the white label disappears. Given a
   real outline treatment on light, left alone on dark. */
.entry-content-wrap :is(a, span, div)[style*="background:rgba(255,255,255"],
.entry-content-wrap :is(a, span, div)[style*="background: rgba(255,255,255"],
.entry-content-wrap :is(a, span, div)[style*="background:rgba(255, 255, 255"] {
  background: transparent !important;
  color: var(--sl-ink) !important;
  border-color: #C9D4E0 !important;
}
.entry-content-wrap :is(a)[style*="background:rgba(255,255,255"]:hover,
.entry-content-wrap :is(a)[style*="background: rgba(255,255,255"]:hover,
.entry-content-wrap :is(a)[style*="background:rgba(255, 255, 255"]:hover {
  background: var(--sl-ink) !important;
  color: #fff !important;
  border-color: var(--sl-ink) !important;
}
/* on a genuinely dark ground the ghost treatment was correct */
.entry-content-wrap :is(.dark-zone, .mid-zone, .hero-section, .hero, .solve-hero,
  .cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .agent-card, .compliance-footer)
:is(a, span, div)[style*="background:rgba(255,255,255"],
.entry-content-wrap :is(.dark-zone, .mid-zone, .hero-section, .hero, .solve-hero,
  .cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .agent-card, .compliance-footer)
:is(a, span, div)[style*="background: rgba(255,255,255"] {
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.35) !important;
}

/* ══ D5 — GRID / FLEX MIN-WIDTH ══════════════════════════════════════════════
   A grid or flex item is min-width:auto by default, so it will not shrink below
   its content's min-content width. One over-wide table inside a card therefore
   widened the card, the track, and the page — and the table's scroll wrapper could
   never engage, because its parent had already grown to fit it.
   This is the fix that lets every scroll wrapper in the system actually work. */
.entry-content-wrap :is(.grid-2, .grid-3, .grid-4, .card-grid, .path-grid, .tool-grid,
  .use-case-grid, .use-grid, .program-grid, .spec-grid, .factor-grid, .feature-grid,
  .benefits-grid, .decision-grid, .decisions-grid, .resource-grid, .silo-grid,
  .link-grid, .hub-grid, .related-grid, .product-grid, .asset-grid, .payout-grid,
  .scenario-grid, .who-grid, .sit-grid, .situation-grid, .doc-grid, .service-grid,
  .pivot-grid, .market-stats, .stats-bar, .team-grid, .split-2, .dual-authority,
  .dual-auth, .checks, .authority-grid, .solve-intent-grid, .solve-path-grid,
  .solve-entity-grid, .solve-definition-grid, .solve-service-grid,
  .solve-county-hub-grid, .solve-authority-grid, .btn-group, .chip-row,
  .agent-card__inner, .hero-section--with-form) > * {
  min-width: 0 !important;
}
/* the scroll wrappers themselves must be free to be narrower than their content */
.entry-content-wrap :is(.table-overflow, .solve-table-scroll, .solve-table-wrap,
  .comparison-table-wrap) {
  min-width: 0 !important;
  max-width: 100% !important;
}
/* cards hold the scroll wrapper, so they must be shrinkable too */
.entry-content-wrap :is(.card, .tool-card, .path-card, .hero-box, .loan-card,
  .option-card, .pivot-card, .program-card, .spec-card, .info-card, .snippet-box) {
  min-width: 0 !important;
}
/* a keyboard-reachable scroll region needs a visible focus state */
.entry-content-wrap .table-overflow:focus-visible {
  outline: 2px solid var(--sl-mint-deep);
  outline-offset: 2px;
}

/* ══ D5 — SURFACE FIXES ══════════════════════════════════════════════════════
   From the full 552-page sweep (scripts/contrast_sweep.mjs). Grouped by cause;
   all scoped by specificity rather than !important. */

/* A. The light callout variants own their descendants' colours outright. They
      carry the base .cta-box class, so without this the dark-surface rules for
      .cta-box reached inside them. */
.entry-content-wrap :is(.cta-box--alt, .cta-box--inline) a,
.entry-content-wrap .cta-box:is(.cta-box--alt, .cta-box--inline) a {
  color: var(--sl-accent-text);
}
.entry-content-wrap :is(.cta-box--alt, .cta-box--inline) :is(p, li, span, div, td, dd),
.entry-content-wrap .cta-box:is(.cta-box--alt, .cta-box--inline) :is(p, li, span, div, td, dd) {
  color: var(--sl-body);
}
.entry-content-wrap :is(.cta-box--alt, .cta-box--inline) :is(h1,h2,h3,h4,h5,h6,strong,b),
.entry-content-wrap .cta-box:is(.cta-box--alt, .cta-box--inline) :is(h1,h2,h3,h4,h5,h6,strong,b) {
  color: var(--sl-ink);
}
/* a .cta-box whose ground a page has overridden inline is treated as light */
.entry-content-wrap .cta-box[style*="background"] :is(p, li, span, div, strong, b) {
  color: var(--sl-body);
}
.entry-content-wrap .cta-box[style*="background"] :is(h1,h2,h3,h4,h5,h6) { color: var(--sl-ink); }
.entry-content-wrap .cta-box[style*="background"] a { color: var(--sl-accent-text); }

/* B. The mobile sticky bar is a dark surface; its buttons state both halves. */
.mobile-sticky-footer .footer-btn,
.mobile-sticky-footer .btn,
.footer-sticky .footer-btn,
.hv-mobile-bar a {
  background: var(--sl-mint);
  color: var(--sl-ink);
  border-color: var(--sl-mint);
}
.mobile-sticky-footer :is(.btn-secondary, .btn-outline, .btn-outline-dark, .fbtn-navy),
.footer-sticky :is(.btn-secondary, .btn-outline, .btn-outline-dark, .fbtn-navy),
.hv-mobile-bar .hv-mbtn-book {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.55);
}

/* C. The zebra stripe is an overlay, not a colour. A solid light stripe rendered
      light-on-light wherever a page gave its table a dark ground. */
.entry-content-wrap tbody tr:nth-child(even) > td { background: rgba(13,27,46,.035); }
.entry-content-wrap :is(.dark-zone, .mid-zone) tbody tr:nth-child(even) > td {
  background: rgba(255,255,255,.05);
}

/* D. Plain containers carrying an inline dark ground keep light text. */
.entry-content-wrap [style*="background:#162435"],
.entry-content-wrap [style*="background:#1A3A5C"],
.entry-content-wrap [style*="background:#0D1B2E"],
.entry-content-wrap [style*="background:#1A2B3C"],
.entry-content-wrap [style*="background:#24282B"],
.entry-content-wrap [style*="background:#1e293b"] {
  color: rgba(255,255,255,.86);
}
.entry-content-wrap :is([style*="background:#162435"], [style*="background:#1A3A5C"],
  [style*="background:#0D1B2E"], [style*="background:#1A2B3C"], [style*="background:#24282B"])
:is(p, span, div, li, td) { color: rgba(255,255,255,.86); }
.entry-content-wrap :is([style*="background:#162435"], [style*="background:#1A3A5C"],
  [style*="background:#0D1B2E"], [style*="background:#1A2B3C"], [style*="background:#24282B"])
:is(strong, b, h1, h2, h3, h4) { color: #fff; }
.entry-content-wrap :is([style*="background:#162435"], [style*="background:#1A3A5C"],
  [style*="background:#0D1B2E"], [style*="background:#1A2B3C"], [style*="background:#24282B"])
a { color: var(--sl-mint); }
/* an element that sets its OWN dark ground keeps its own light label */
.entry-content-wrap a[style*="background:#0D1B2E"],
.entry-content-wrap a[style*="background: #0D1B2E"] { color: #fff; }

/* E. Inline light greys on a light ground. */
.entry-content-wrap [style*="color:#cbd5e1"],
.entry-content-wrap [style*="color:#CBD5E1"],
.entry-content-wrap [style*="color:#e2e8f0"],
.entry-content-wrap [style*="color:#94a3b8"],
.entry-content-wrap [style*="color:#cbd5e0"] { color: var(--sl-muted-text); }
.entry-content-wrap :is(.dark-zone, .mid-zone, .hero-section, .solve-hero)
:is([style*="color:#cbd5e1"], [style*="color:#94a3b8"]) { color: rgba(255,255,255,.72); }

/* ══ D5 — FULL-BLEED OUTSIDE THE GUTTER ══════════════════════════════════════
   The negative-margin full-bleed assumes its parent carries the gutter. Kadence
   emits the agent card and byline into `.content-container` / `main.wrap` on some
   templates — wrappers with no gutter — where the offset has nothing to cancel and
   the block hangs one gutter off each edge.

   Scoping the whole full-bleed rule to `.entry-content-wrap` was tried and reverted:
   it fixed that one page and broke nine. Neutralising the specific out-of-gutter
   parents is the surgical version. */
.content-container > :is(.agent-card, .author-byline, .trust-bar, .dark-zone,
  .mid-zone, .light-zone, .soft-zone, .cta-box, .cta-band, .hero-section),
main.wrap > :is(.agent-card, .author-byline, .trust-bar, .dark-zone, .mid-zone,
  .light-zone, .soft-zone, .cta-box, .cta-band, .hero-section),
.content-wrap > :is(.agent-card, .author-byline, .trust-bar, .dark-zone, .mid-zone,
  .light-zone, .soft-zone, .cta-box, .cta-band, .hero-section),
.site-main > :is(.agent-card, .author-byline, .trust-bar, .dark-zone, .mid-zone,
  .light-zone, .soft-zone, .cta-box, .cta-band, .hero-section) {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

/* ══ D5 — NEVER FULL-BLEED TWICE ═════════════════════════════════════════════
   A full-bleed block inside another full-bleed block must stay in flow: the outer
   one has already cancelled the gutter, so the inner one's offset has nothing left
   to cancel and simply overhangs. Stated broadly and last, so no later narrowing of
   the component lists can reopen it. */
:is(.hero-section, .trust-bar, .dark-zone, .mid-zone, .light-zone, .soft-zone,
  .section-nav, .cta-box, .cta-box--alt, .cta-box--inline, .cta-box--dark,
  .cta-box--gold, .cta-band, .solve-hero, .solve-section, .solve-sticky-nav,
  .solve-final-cta, .solve-spanish, .agent-card, .author-byline)
:is(.hero-section, .trust-bar, .dark-zone, .mid-zone, .light-zone, .soft-zone,
  .section-nav, .cta-box, .cta-box--alt, .cta-box--inline, .cta-box--dark,
  .cta-box--gold, .cta-band, .solve-hero, .solve-section, .solve-sticky-nav,
  .solve-final-cta, .solve-spanish, .agent-card, .author-byline) {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  max-width: 100%;
}

/* ══ D5 — INLINE COLOURS, FINAL ══════════════════════════════════════════════
   These carry !important deliberately. Every selector below targets an element
   whose own style ATTRIBUTE sets the failing colour, and an inline style outranks
   any author selector however specific — !important is the only mechanism that
   reaches it. This is the documented survivor category in the D5 report. */

/* 1. A dark ground declared inline on a container: its descendants' light-ground
      inline colours must flip. */
.entry-content-wrap :is([style*="background:#162435"], [style*="background:#1A3A5C"], [style*="background:#0D1B2E"], [style*="background:#1A2B3C"], [style*="background:#24282B"], [style*="background:#1e293b"], [style*="background:#22364B"]) :is(p, span, div, li, td, small)[style*="color:"] {
  color: rgba(255,255,255,.86) !important;
}
.entry-content-wrap :is([style*="background:#162435"], [style*="background:#1A3A5C"], [style*="background:#0D1B2E"], [style*="background:#1A2B3C"], [style*="background:#24282B"], [style*="background:#1e293b"], [style*="background:#22364B"]) :is(strong, b, h1, h2, h3, h4, h5, h6)[style*="color:"] {
  color: #fff !important;
}
/* CONTENT-RUN C6: `a` here means a TEXT link. A button inside one of these
   containers paints its own mint fill, so flipping its label to mint made it
   invisible — 1.00:1. That is D5-C02 / D5-C04 / D5-C05, the 12 San Diego CTAs
   whose labels could not be read at all. Buttons are excluded and keep the
   dark-on-accent label the base button rules already give them. */
.entry-content-wrap :is([style*="background:#162435"], [style*="background:#1A3A5C"], [style*="background:#0D1B2E"], [style*="background:#1A2B3C"], [style*="background:#24282B"], [style*="background:#1e293b"], [style*="background:#22364B"]) a:not([class*="btn"]):not(.cta):not(.nav-cta):not(.silo-main-link):not(.card-cta) { color: var(--sl-mint) !important; }
.entry-content-wrap :is([style*="background:#162435"], [style*="background:#1A3A5C"], [style*="background:#0D1B2E"], [style*="background:#1A2B3C"], [style*="background:#24282B"], [style*="background:#1e293b"], [style*="background:#22364B"]) :is(p, span, div, li, strong, b) { color: rgba(255,255,255,.86); }
.entry-content-wrap :is([style*="background:#162435"], [style*="background:#1A3A5C"], [style*="background:#0D1B2E"], [style*="background:#1A2B3C"], [style*="background:#24282B"], [style*="background:#1e293b"], [style*="background:#22364B"]) :is(h1,h2,h3,h4,h5,h6) { color: #fff; }

/* 2. An element that sets BOTH a dark ground and a light label inline is already a
      correct pair — restore its own label, which rule 1 above would otherwise flip. */
.entry-content-wrap :is(a, span, div, p)[style*="background:#0D1B2E"],
.entry-content-wrap :is(a, span, div, p)[style*="background: #0D1B2E"],
.entry-content-wrap :is(a, span, div, p)[style*="background:#1A2B3C"],
.entry-content-wrap :is(a, span, div, p)[style*="background:#162435"] {
  color: #fff !important;
}

/* 3. Inline light greys / slates on a LIGHT ground. */
.entry-content-wrap :is(p, span, div, li, small, strong)[style*="color:#cbd5e1"],
.entry-content-wrap :is(p, span, div, li, small, strong)[style*="color:#CBD5E1"],
.entry-content-wrap :is(p, span, div, li, small, strong)[style*="color:#e2e8f0"],
.entry-content-wrap :is(p, span, div, li, small, strong)[style*="color:#cbd5e0"] {
  color: var(--sl-muted-text) !important;
}
.entry-content-wrap :is([style*="background:#162435"], [style*="background:#1A3A5C"], [style*="background:#0D1B2E"], [style*="background:#1A2B3C"], [style*="background:#24282B"], [style*="background:#1e293b"], [style*="background:#22364B"])
:is(p, span, div, li, small, strong)[style*="color:#cbd5e1"] {
  color: rgba(255,255,255,.75) !important;
}

/* 4. A light .cta-box whose ground a page set inline: its descendants' inline
      light-ground colours are already right; the system's dark-surface colours
      are what must yield. */
.entry-content-wrap .cta-box[style*="background:#fff"] :is(p, span, div, li, strong, b),
.entry-content-wrap .cta-box[style*="background:#FFF"] :is(p, span, div, li, strong, b),
.entry-content-wrap .cta-box[style*="background:#f"] :is(p, span, div, li, strong, b) {
  color: var(--sl-body) !important;
}
.entry-content-wrap .cta-box[style*="background:#f"] :is(h1,h2,h3,h4,h5,h6) {
  color: var(--sl-ink) !important;
}
.entry-content-wrap .cta-box[style*="background:#f"] a { color: var(--sl-accent-text) !important; }

/* ══ CONTENT-CLOSE F3 — the 16 held D5 contrast signatures ═══════════════════
   Every one is the same class of bug in one of two directions: a colour meant for
   a LIGHT ground rendered on a dark surface, or a colour meant for a DARK ground
   rendered on a light one. Each is mapped to the nearest AA-passing token — text
   colours only, no background is changed. The two #ef4444 signatures (D5-C22,
   D5-C23) are NOT here: both are large bold display type at 3.76:1, which passes
   AA-large, and are closed as documented exemptions (see --color-warning).

   F3-a is handled where it belongs — the "light card inside a dark box" exception
   further up now also recognises an inline light background, so it cannot lose a
   specificity race against the rule it is excepting. (D5-C06, D5-C07, D5-C10.)
   That exception keys on an inline `color:` though, and a box's copy is not always
   individually coloured — the standfirst on both home-evaluation pages is a plain
   <p style="margin-bottom:0;"> that simply inherits the zone's white. Cover the
   uncoloured descendants of an inline light box too. No !important needed: this is
   more specific than `:is(.cta-box, .cta-band, .solve-final-cta) p`. */
.entry-content-wrap :is(.cta-box, .cta-band, .solve-final-cta, .dark-zone, .mid-zone)
:is([style*="background:#fff"], [style*="background:#FFF"], [style*="background:#ffffff"])
:is(p, li, span, div, td, dd, strong, b) {
  color: var(--sl-body);
}
.entry-content-wrap :is(.cta-box, .cta-band, .solve-final-cta, .dark-zone, .mid-zone)
:is([style*="background:#fff"], [style*="background:#FFF"], [style*="background:#ffffff"])
:is(h1, h2, h3, h4, h5, h6) {
  color: var(--sl-ink);
}
.entry-content-wrap :is(.cta-box, .cta-band, .solve-final-cta, .dark-zone, .mid-zone)
:is([style*="background:#fff"], [style*="background:#FFF"], [style*="background:#ffffff"])
a:not([class*="btn"]) {
  color: var(--sl-accent-text);
}

/* F3-b. Register the remaining DARK surfaces. `.footer-box`, `.cta-box--gold`,
   `.cta-box--dark` and `.specialist-wrap` all paint an ink ground but were never
   added to the dark-surface text lists, so headings resolved to --sl-ink on ink
   (1.00:1 — the heading was invisible) and links likewise.
   Fixes D5-C11, D5-C12, D5-C13. */
:is(.footer-box, .cta-box--gold, .cta-box--dark, .specialist-wrap)
  :is(h1, h2, h3, h4, h5, h6) {
  color: var(--sl-white);
}
:is(.footer-box, .cta-box--gold, .cta-box--dark, .specialist-wrap) :is(p, li, td, dd) {
  color: var(--sl-body-dark);
}
/* No blanket `a` colour here. A first draft used
   `:is(.footer-box, .cta-box--gold, …) a:not([class*="btn"]) { color: var(--sl-mint) }`
   and painted an unclassed CTA anchor on /san-diego-county/ mint-on-mint (1.00:1) —
   the anchor carries its OWN accent fill, and an element that paints its own
   background owns its label (the same lesson as the C6 button family). CSS cannot
   test an element's computed background, so the safe move is to target only the
   inline colours that are actually wrong, immediately below. */
/* inline ink/underline link colours inside those dark surfaces must yield too */
/* `:not([style*="background"])` is load-bearing — the same principle as rule 2
   above: an element that declares BOTH a ground and a label inline is already a
   correct pair. Without it, the ink-on-mint CTA anchor on /san-diego-county/
   (`style="background:#00FF7F;color:#0D1B2E"`) was flipped to mint-on-mint, 1.00:1. */
.entry-content-wrap :is(.footer-box, .cta-box--gold, .cta-box--dark, .specialist-wrap)
  :is(a, h1, h2, h3, h4, h5, h6)[style*="color:#0D1B2E"]:not([style*="background"]),
.entry-content-wrap :is(.footer-box, .cta-box--gold, .cta-box--dark, .specialist-wrap)
  :is(a, h1, h2, h3, h4, h5, h6)[style*="color:#0d1b2e"]:not([style*="background"]) {
  color: var(--sl-mint) !important;
}

/* F3-c. `--sl-muted-text` (#5A6B82) is the LIGHT-ground muted sibling; on an ink
   ground it lands at 3.18:1. The inline #cbd5e1 mapping in rule 3 above assumed a
   light ground and dragged these onto it. On a registered dark surface the correct
   token is --sl-muted-dark. Fixes D5-C18, D5-C19, D5-C20, D5-C21. */
:is(.footer-box, .cta-box--gold, .cta-box--dark, .specialist-wrap, .agent-card,
    .compliance-footer, .dark-zone, .mid-zone)
  :is(.slr-muted, .compliance-text, .compliance) :is(p, span, strong, b),
:is(.footer-box, .cta-box--gold, .cta-box--dark, .specialist-wrap, .agent-card,
    .compliance-footer, .dark-zone, .mid-zone)
  :is(p, span, strong, b).slr-muted {
  color: var(--sl-muted-dark);
}
.entry-content-wrap :is(.footer-box, .cta-box--gold, .cta-box--dark, .specialist-wrap,
    .agent-card, .compliance-footer)
  :is(p, span, div, li, small, strong)[style*="color:#cbd5e1"],
.entry-content-wrap :is(.footer-box, .cta-box--gold, .cta-box--dark, .specialist-wrap,
    .agent-card, .compliance-footer)
  :is(p, span, div, li, small, strong)[style*="color:#CBD5E1"] {
  color: var(--sl-body-dark) !important;
}

/* F3-d. Brand mint set inline as a TEXT colour on a LIGHT callout. The existing
   mapping covered .card/.tool-card/.hero-box/.light-zone/.soft-zone but not the
   inline callout classes. Fixes D5-C16.
   The :not() chain matters: an earlier draft of this rule caught spans that sit on
   an inline DARK ground (#24282B), where bright mint was already correct, and
   dropped them to --sl-accent-text at 2.74:1 — turning a pass into a fail on six
   pages. Elements inside an inline dark container are excluded. */
.entry-content-wrap :is(.cta-box--alt, .cta-box--inline, .scenario-block, .info-box,
    .spec-callout)
  :not([style*="background:#162435"]):not([style*="background:#0D1B2E"])
  :not([style*="background:#1A2B3C"]):not([style*="background:#24282B"])
  [style*="#00FF7F"]:not([style*="background"]),
.entry-content-wrap :is(.cta-box--alt, .cta-box--inline, .scenario-block, .info-box,
    .spec-callout)
  > [style*="#00FF7F"]:not([style*="background"]),
.entry-content-wrap :is(.cta-box--alt, .cta-box--inline, .scenario-block, .info-box,
    .spec-callout)
  > :is(h1,h2,h3,h4,h5,h6)[style*="#00FF7F"]:not([style*="background"]) {
  color: var(--sl-accent-text) !important;
}

/* F3-e. Inline color:#fff on an element that sits on a LIGHT card — white on white.
   Fixes D5-C14. */
.entry-content-wrap :is(.card, .tool-card, .path-card, .hero-box, .pivot-card,
    .snippet-box, .info-card, .option-card, .loan-card)
  :is(div, p, span, strong, b)[style*="color:#fff"],
.entry-content-wrap :is(.card, .tool-card, .path-card, .hero-box, .pivot-card,
    .snippet-box, .info-card, .option-card, .loan-card)
  :is(div, p, span, strong, b)[style*="color:#FFF"] {
  color: var(--sl-ink) !important;
}

/* F3-g. A stats strip inside a dark band: the label kept a light-ground grey
   against --sl-slate, 1.94:1. The competing declaration is a page-scoped lane rule
   (`:is(body.page-id-1427) .stat-label { color:#555 }`) left by the D3 style
   consolidation, so the `body` prefix here is deliberate — it matches that rule's
   specificity and wins on order. Fixes D5-C17. */
body :is(.trust-bar, .dark-zone, .mid-zone)
  :is(.stat-label, .stat-caption, .stat-sub) {
  color: var(--sl-body-dark);
}
.entry-content-wrap :is(.trust-bar, .dark-zone, .mid-zone)
  :is(.stat-label, .stat-caption)[style*="color:"] {
  color: var(--sl-body-dark) !important;
}
/* NOTE: `.stats-bar` and `.cta-band` are deliberately NOT in that list. A first
   draft included them and painted the stat labels on
   /los-angeles-county/seller-situations/ white-on-white (1.00:1) — `.stats-bar`
   is transparent there, i.e. a LIGHT ground. Only surfaces the design system
   actually fills dark belong here. */

/* F3-f. A td given a white label by page CSS while its row keeps a light zebra
   ground. Tables already inherit their surface (rule 2); this catches the inline
   case. Fixes D5-C15. */
.entry-content-wrap tr[style*="background:#f"] > td,
.entry-content-wrap tr[style*="background:#F"] > td,
.entry-content-wrap td[style*="background:#f"],
.entry-content-wrap td[style*="background:#F"] {
  color: var(--sl-body) !important;
}

/* ══ D5 — CONTENT OUTSIDE .entry-content-wrap ════════════════════════════════
   Kadence emits the agent card, byline, compliance footer and some trailing notes
   directly into main.wrap / .site-main rather than into .entry-content-wrap, so the
   contract — which is anchored on that wrapper — never reached them. Anchored again
   on .site-main here. */

/* mint-filled buttons take ink labels wherever they are emitted */
body .site-main :is(.btn-primary, .btn-main, .btn-gold, .solve-btn-gold, .fbtn-gold,
  .nav-cta, .cta, .silo-main-link, .solve-county-primary-link) {
  color: var(--sl-ink);
}
body .site-main :is(.btn-secondary, .btn-dark, .fbtn-navy, .footer-btn) { color: #fff; }

/* the compliance footer is a dark surface: everything in it follows */
.compliance-footer :is(p, li, span, div) { color: var(--sl-muted-dark); }
.compliance-footer :is(strong, b, h1, h2, h3, h4) { color: #fff; }
.compliance-footer a { color: var(--sl-mint); }

/* the dark agent card, wherever it lands */
.agent-card.dark-zone :is(p, li, span, div) { color: var(--sl-body-dark); }
.agent-card.dark-zone :is(strong, b, h1, h2, h3, h4) { color: #fff; }
.agent-card.dark-zone .agent-card__meta { color: var(--sl-muted-dark); }

/* inline light-ground greys on trailing notes emitted outside the wrapper */
.site-main :is(p, span, div, li, small)[style*="color:#6B7C93"],
.site-main :is(p, span, div, li, small)[style*="color:#6b7c93"],
.site-main :is(p, span, div, li, small)[style*="color: #6B7C93"],
.site-main [style*="color:#6B7C93"],
.site-main [style*="color:#94a3b8"] {
  color: var(--sl-muted-text) !important;
}
.site-main :is(.dark-zone, .mid-zone, .cta-box, .compliance-footer, .agent-card)
:is(p, span, div, li, small)[style*="color:#6B7C93"] {
  color: var(--sl-muted-dark) !important;
}

/* ══ D5 — FINAL TWO ══════════════════════════════════════════════════════════
   Anchored on `.site` — an ancestor of everything the theme renders, including the
   blocks emitted outside both .entry-content-wrap and .site-main. */

/* 1. A mint-filled button always takes an ink label, including inside the dark
      agent card where the dark-surface link rule would otherwise repaint it. */
.site :is(.agent-card, .agent-row, .compliance-footer, .author-byline)
:is(.btn-primary, .btn-main, .btn-gold, .solve-btn-gold, .fbtn-gold),
/* !important here is deliberate and documented: an earlier dark-surface rule paints
   every <a> inside .agent-card mint, and on a mint-filled button that is mint-on-mint
   (1:1). A button's label must never be repainted by the surface it sits on. */
.site .agent-card__info .btn-primary,
.site .agent-card__info a.btn-primary {
  color: var(--sl-ink) !important;
  background: var(--sl-mint);
  border-color: var(--sl-mint);
}
.site .agent-card__info a.btn-primary:hover {
  color: var(--sl-ink);
  background: var(--sl-mint-deep);
  border-color: var(--sl-mint-deep);
}

/* 2. Inline greys below AA, wherever in the document they are emitted. */
.site [style*="color:#6B7C93"],
.site [style*="color:#6b7c93"],
.site [style*="color: #6B7C93"],
.site [style*="color:#94a3b8"],
.site [style*="color:#cbd5e1"] {
  color: var(--sl-muted-text) !important;
}
.site :is(.dark-zone, .mid-zone, .cta-box:not(.cta-box--alt):not(.cta-box--inline),
  .compliance-footer, .agent-card, .hero-section, .solve-hero)
:is([style*="color:#6B7C93"], [style*="color:#94a3b8"], [style*="color:#cbd5e1"]) {
  color: var(--sl-muted-dark) !important;
}

/* ══ D5 — BUTTON LABELS ARE NOT NEGOTIABLE ═══════════════════════════════════
   A button's label belongs to the button, never to the surface it sits on.
   Several dark-surface rules paint every descendant <a> mint; a primary button is
   an <a>, so on its own mint fill that produced an invisible label (1:1) on ~12
   pages. Stated once, last, unconditionally.
   !important is deliberate and documented in the D5 report. */
.site :is(.btn-primary, .btn-main, .btn-gold, .solve-btn-gold, .fbtn-gold,
  .hv-btn-amber, .hv-mbtn-call, .nav-cta, .silo-main-link,
  .solve-county-primary-link) {
  color: var(--sl-ink) !important;
}
/* CONTENT-RUN C6: `.gold` flips an otherwise ink-filled button to the accent
   fill, so it must not be forced to a white label — that produced white-on-mint
   at 1.35:1 (D5-C03) on the five pages the page-id-scoped `.footer-btn.gold`
   blocks did not cover. Accent-filled buttons take the ink label above. */
.site :is(.btn-secondary, .btn-dark, .fbtn-navy, .footer-btn, .solve-btn,
  .decision-link-dark, .card-cta, .hv-mbtn-book):not(.gold):not(.fbtn-gold):not(.outline) {
  color: #fff !important;
}
.site :is(.btn-secondary, .btn-dark, .fbtn-navy, .footer-btn, .solve-btn,
  .decision-link-dark, .card-cta, .hv-mbtn-book):is(.gold, .fbtn-gold, .outline) {
  color: var(--sl-ink) !important;
}
/* outline buttons follow their surface, which is the point of an outline button */
.site :is(.btn-outline, .solve-btn-outline) { color: var(--sl-mint); }
.site :is(.light-zone, .soft-zone, .card, .tool-card)
:is(.btn-outline, .solve-btn-outline) { color: var(--sl-accent-text); }
.site .btn-outline-dark { color: var(--sl-ink); }


/* ══ D6 — THE FAQ BLOCK IS EMITTED OUTSIDE THE WRAPPER ═══════════════════════
   Rank Math renders its FAQ block into `main.wrap`, not into
   `.entry-content-wrap`, so restoring the gutter on that wrapper left the FAQ
   questions and answers still running edge-to-edge. Only two pages carry an FAQ
   block today (the Riverside inherited-house and conservatorship pages), but the
   gated content run adds them site-wide — fixing it here means those pages arrive
   with a gutter instead of inheriting this defect 500 times.

   Scoped to a DIRECT child of the un-guttered parents: when the block does render
   inside `.entry-content-wrap` it is not a direct child of `main.wrap`, so this
   cannot stack a second gutter on top of the wrapper's. Same token as the wrapper
   gutter and the full-bleed offset — one number, three places. */
main.wrap > .rank-math-block,
.site-main > .rank-math-block,
.content-container > .rank-math-block {
  padding-left: var(--sl-gutter);
  padding-right: var(--sl-gutter);
}


/* ── DESIGN-V3.1 item 5 — name chip must wrap at word boundaries ────────────
   The hero eyebrow chip is a flex row (avatar + text). Its text child was
   shrinking below content width and breaking the Realtor's name mid-word — at
   390px "Antoinette Nichols" rendered as one letter per line, 20 lines tall,
   pushing the H1 ~400px down the page. Longest name in the system is
   "Antoinette Nichols"; this must hold at every width >= 320px. */
.hero-eyebrow-container, .eyebrow-container { flex-wrap: wrap; }
.hero-eyebrow-container .eyebrow-text,
.eyebrow-container .eyebrow-text {
  flex: 1 1 auto;
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}
.hero-eyebrow-container .eyebrow-text a,
.eyebrow-container .eyebrow-text a {
  white-space: nowrap;   /* a person's name never breaks */
}
@media (max-width: 480px) {
  /* stack the chip so the name gets the full measure instead of a 32px column */
  .hero-eyebrow-container, .eyebrow-container {
    flex-direction: row;
    align-items: flex-start;
  }
  .hero-eyebrow-container .eyebrow-text,
  .eyebrow-container .eyebrow-text { flex-basis: calc(100% - 60px); }
}

/* ── DESIGN-V3.1 item 6 — sticky mobile CTA bar must never occlude content ──
   The fixed bar sat over the hero's own CTA row, leaving "Book Real Estate
   Appointment" and "Mortgage Appointment" half visible. body already had
   padding-bottom:76px but the bar renders taller than that once its buttons
   wrap, so the compensation was short. Reduce bar height, stop the labels
   wrapping, and set the body padding from the same custom property so the two
   can never drift apart again. */
:root { --sl-mobile-bar-h: 64px; }
.mobile-sticky-footer, .footer-sticky {
  padding: 8px var(--sl-3);
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}
.mobile-sticky-footer .btn, .footer-sticky a {
  padding: 10px 8px;
  font-size: var(--sl-t-xs);
  white-space: nowrap;
  line-height: 1.2;
}
/* .footer-inner is also a CTA-block selector (padding-block: var(--sl-8)), which
   inflated the sticky bar to 192px against a 64px body compensation — 128px of
   page content sat under it. Inside the bar it is just a button row. */
.mobile-sticky-footer .footer-inner, .footer-sticky .footer-inner {
  padding-block: 0;
  padding-inline: 0;
  background: transparent;
  display: flex;
  gap: var(--sl-2);
  width: 100%;
}
.mobile-sticky-footer .footer-btn, .footer-sticky .footer-btn {
  flex: 1 1 0;
  padding: 12px 8px;
  font-size: var(--sl-t-xs);
  white-space: nowrap;
  line-height: 1.2;
  text-align: center;
}
@media (max-width: 768px) {
  body { padding-bottom: calc(var(--sl-mobile-bar-h) + env(safe-area-inset-bottom, 0px)); }
}


/* ── DESIGN-V3.1 item 7 — dropdown right-edge collision ─────────────────────
   The Counties submenu opens left-aligned to its parent and is wider than its
   parent, so at 1440 it spanned x=981..1183 while the Apply CTA starts at 1096
   — an 87px overlap that covered the button. The last two top-level items are
   the only ones close enough to the edge to collide, so they open RIGHT-aligned
   to their parent instead. Pure CSS: no JS measurement needed. */
.site-header .header-navigation ul.menu > li:nth-last-child(-n+2) > ul.sub-menu {
  left: auto;
  right: 0;
}
.site-header .header-navigation ul.menu > li { position: relative; }
/* keep the panel inside the viewport on narrower desktops too */
.site-header .header-navigation ul.sub-menu {
  max-width: min(320px, calc(100vw - 32px));
}


/* ── DESIGN-V3.1 item 7b — top-level nav must fit its own slot ──────────────
   The 7 top-level items needed 849px inside a 729px nav slot, so the last item
   ("Counties") overflowed 60px and rendered on top of the Apply link — the
   Counties/Apply collision. (DESIGN-TRIAGE-2 measured the nav against "Book a
   Call" and reported a 17px gap; the collision is nav-vs-Apply, one element
   further left.) Tighten the top-level items so the row fits, and stop the row
   overflowing its container if it ever doesn't. */
.site-header .header-navigation ul.menu > li > a {
  padding-inline: 4px;
  font-size: 14.5px;
}
.site-header .header-navigation ul.menu {
  flex-wrap: nowrap;
  max-width: 100%;
}
.site-header .header-navigation ul.menu > li { flex: 0 0 auto; }


/* ── DESIGN-V3.1 item 3 — logo treatment ────────────────────────────────────
   Masters in assets/brand/ are Canva raster-in-SVG (an RGB PNG plus a grayscale
   luminance mask faking transparency), so they were composited into real RGBA
   PNGs rather than shipped as SVG — see reports/DESIGN-V3.1-REPORT.md.
     header  solve-logo-header.png   88x88  (44px @2x)  5.5 KB
     footer  solve-logo-white.png    240x198 (120px @2x) 12.8 KB
   Replaces solve-logo.png: 1200x1200, 73 KB, NO alpha (white baked in).
   A true vector SVG is on the post-launch list. */
.site-header .custom-logo {
  height: 60px;          /* DESIGN-V3.2 item 7 — was 44px */
  width: auto;
  object-fit: contain;
  display: block;
}
/* Dark surfaces take the white lockup. Kadence renders the same custom-logo in
   the footer, so swap the source there rather than duplicating the element. */
.site-footer .custom-logo,
.dark-zone .custom-logo {
  content: url('/wp-content/uploads/solve-logo-white.png');
  width: 120px;
  height: auto;
  object-fit: contain;
}


/* ══════════════════════════════════════════════════════════════════════════
   DESIGN-V3.2 — KIYOSHI'S SAMPLE FEEDBACK (2026-07-30)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── (1) NAV — text links, stronger hover/active underline ─────────────────
   Nav stays text (no pills, no chips). The underline is the state signal, so
   make it read: thicker, full-width, and present on hover, focus and current. */
.site-header .header-navigation ul.menu > li > a::after {
  height: 3px;
  bottom: 2px;
  left: 4px; right: 4px;
  background: var(--sl-mint);
  border-radius: 2px;
}
.site-header .header-navigation ul.menu > li > a:hover,
.site-header .header-navigation ul.menu > li > a:focus-visible {
  color: var(--sl-ink);
}
.site-header .header-navigation ul.menu > li > a:hover::after,
.site-header .header-navigation ul.menu > li > a:focus-visible::after,
.site-header .header-navigation ul.menu > li.current-menu-item > a::after,
.site-header .header-navigation ul.menu > li.current-menu-ancestor > a::after {
  transform: scaleX(1);
}
.site-header .header-navigation ul.menu > li.current-menu-item > a { font-weight: 700; }

/* ── (2) LINK LANGUAGE — green is INTERACTIVE ONLY ────────────────────────
   RULING: every body hyperlink is green AND underlined. Solid mint = primary
   button, green outline = secondary. Green never appears on text you cannot
   click. Buttons, nav, breadcrumbs and skip-links are excluded — they carry
   their own affordance. */
.entry-content a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta):not(.pill),
.entry-content a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta):not(.pill):visited {
  color: var(--sl-mint-deep);           /* #00CC66 on light surfaces */
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.entry-content a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta):not(.pill):hover {
  text-decoration-thickness: 2px;
}
/* On dark surfaces the accent brightens for contrast. */
:is(.dark-zone, .mid-zone, .hero-section, .solve-hero, .cta-box, .cta-band, .hv-hero,
    .hv-interrupt, .hv-chapter, .agent-card)
  a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta):not(.pill) {
  color: var(--sl-mint);                /* #00FF7F on dark surfaces */
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* GREEN NEVER ON NON-CLICKABLE TEXT.
   Eyebrows, spec labels, badges, team roles and licence lines were all mint,
   which made non-interactive text look clickable and diluted the link signal.
   The decorative hairline after a section eyebrow STAYS mint — a rule is not
   text — per the S4 accent policy (one section underline, one menu underline). */
.eyebrow, .eyebrow-text, .solve-kicker, .scenario-label, .use-case-label,
.spec-label, .authority-label, .tool-label, .solve-entity-label, .cat-title,
.hero-eyebrow-label, .solve-answer-badge, .trust-title, .tm-eyebrow, .hero-badge,
.tm-role, .tm-card-lic, .hv-int-card-label, .hv-equity-label {
  color: var(--sl-muted);
}
:is(.dark-zone, .mid-zone, .hero-section, .solve-hero, .hv-hero, .hv-interrupt)
  :is(.eyebrow, .eyebrow-text, .solve-kicker, .spec-label, .tm-eyebrow, .hero-badge,
      .tm-role, .tm-card-lic, .solve-answer-badge, .hv-int-card-label) {
  color: rgba(255,255,255,.72);
}
/* ...but the eyebrow's trailing rule keeps the accent. */
.eyebrow::after, .eyebrow-text::after, .solve-kicker::after,
.scenario-label::after, .use-case-label::after, .authority-label::after,
.solve-entity-label::after, .cat-title::after, .trust-title::after {
  background: var(--sl-mint-deep);
  opacity: .55;
}
:is(.dark-zone,.mid-zone,.hero-section,.solve-hero) :is(.eyebrow,.eyebrow-text,.solve-kicker)::after {
  background: var(--sl-mint);
  opacity: .45;
}
/* A green-outline secondary button is the ONLY other green-on-light treatment. */
.btn-outline, .solve-btn-outline, .btn-secondary-outline {
  color: var(--sl-mint-deep);
  border: 1.5px solid var(--sl-mint-deep);
  background: transparent;
}
:is(.dark-zone,.mid-zone,.hero-section,.solve-hero) :is(.btn-outline,.solve-btn-outline) {
  color: var(--sl-mint);
  border-color: rgba(0,255,127,.55);
}


/* ── (2, cont.) higher-specificity holdouts ────────────────────────────────
   The team-page and person-card credential lines are set mint by rules carrying
   a `body`-prefixed specificity, so the ruling has to match it to win. These are
   names, roles and licence numbers — never clickable, so never green. */
body .entry-content-wrap :is(.tm-card-lic, .tm-card-role, .tm-eyebrow, .tm-role,
  .person-card__creds, .auth-creds, .authority-nmls, .solve-auth-creds),
body :is(.tm-eyebrow, .tm-role, .tm-card-lic, .tm-card-role, .person-card__creds) {
  color: var(--sl-muted);
}
body :is(.dark-zone, .mid-zone, .hero-section, .solve-hero, .tm-hero, .agent-card)
  :is(.tm-eyebrow, .tm-role, .tm-card-lic, .tm-card-role, .person-card__creds,
      .auth-creds, .solve-auth-creds) {
  color: rgba(255,255,255,.72);
}


/* ── (2, cont.) matching-specificity override for the team/person creds ────
   The earlier rules nest `body .tm-eyebrow` INSIDE :is(), which lifts :is()'s
   specificity to that of its most specific argument — so a flat
   `body .entry-content-wrap :is(.tm-eyebrow, …)` loses. Mirror the shape so
   these win on source order instead of resorting to !important. */
body .entry-content-wrap :is(body .tm-card-lic, body .tm-eyebrow, body .tm-role,
  body .tm-card-role, body .person-card__creds, body .auth-creds,
  body .solve-auth-creds, body .authority-nmls) {
  color: var(--sl-muted);
}
/* On dark grounds the previous system painted these mint — that is green on
   non-clickable text, which the ruling forbids. Light neutral instead. */
body .entry-content-wrap :is(body .dark-zone, body .mid-zone, body .hero-section,
  body .hero, body .solve-hero, body .cta-box, body .cta-band, body .tm-hero,
  body .hv-hero, body .sd-hero)
:is(body .tm-card-lic, body .tm-eyebrow, body .tm-role, body .tm-card-role,
  body .person-card__creds, body .auth-creds, body .solve-auth-creds) {
  color: rgba(255,255,255,.72);
}


/* ── (2, final) page-id-scoped team card licences ──────────────────────────
   The team cards carry a page-id-scoped rule (0,6,0) painting the licence line
   mint. Same ruling: a licence number is not clickable. Matched scope so this
   wins on order. */
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295,
    body.page-id-2296) .tm-card .tm-card-lic {
  color: var(--sl-muted);
}
:is(body.page-id-2292, body.page-id-2293, body.page-id-2294, body.page-id-2295,
    body.page-id-2296) :is(.dark-zone, .tm-hero) .tm-card .tm-card-lic {
  color: rgba(255,255,255,.72);
}


/* ── (4) FAQ ACCORDION ─────────────────────────────────────────────────────
   Collapse is gated behind html.faq-js, which solvelr-faq.js adds only after it
   has successfully wired the controls. Without JS every answer stays visible —
   the page degrades to a plain Q&A list rather than a column of dead headings.
   All answer copy remains in the DOM either way, so the FAQPage schema Rank Math
   emits keeps matching what a crawler can read. */
:is(.rank-math-list,.wp-block-rank-math-faq-block) :is(.rank-math-list-item,.rank-math-faq-item) {
  border-bottom: 1px solid var(--sl-border);
}
:is(.rank-math-list,.wp-block-rank-math-faq-block) .rank-math-question {
  margin: 0;
  padding: 18px 40px 18px 0;
  position: relative;
  font-size: var(--sl-t-md);
  line-height: 1.4;
}
html.faq-js :is(.rank-math-list,.wp-block-rank-math-faq-block) .rank-math-question {
  cursor: pointer;
  user-select: none;
}
html.faq-js :is(.rank-math-list,.wp-block-rank-math-faq-block) .rank-math-question:hover,
html.faq-js :is(.rank-math-list,.wp-block-rank-math-faq-block) .rank-math-question:focus-visible {
  color: var(--sl-mint-deep);
}
/* chevron — the only affordance; the question text itself stays ink-coloured so
   it is not confused with a body hyperlink under the link-language ruling. */
html.faq-js :is(.rank-math-list,.wp-block-rank-math-faq-block) .rank-math-question::after {
  content: '';
  position: absolute;
  right: 8px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--sl-mint-deep);
  border-bottom: 2px solid var(--sl-mint-deep);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s var(--sl-ease);
}
html.faq-js :is(.rank-math-list-item,.rank-math-faq-item)[data-faq-open="true"] .rank-math-question::after {
  transform: translateY(-30%) rotate(-135deg);
}
html.faq-js :is(.rank-math-list,.wp-block-rank-math-faq-block) .rank-math-answer {
  display: none;
  padding: 0 0 20px;
  color: var(--sl-body);
}
html.faq-js :is(.rank-math-list-item,.rank-math-faq-item)[data-faq-open="true"] .rank-math-answer {
  display: block;
}
/* dark surfaces */
:is(.dark-zone,.mid-zone) .wp-block-rank-math-faq-block .rank-math-item,
:is(.dark-zone,.mid-zone) :is(.rank-math-list,.wp-block-rank-math-faq-block) :is(.rank-math-list-item,.rank-math-faq-item) {
  border-bottom-color: rgba(255,255,255,.14);
}
:is(.dark-zone,.mid-zone) :is(.rank-math-list,.wp-block-rank-math-faq-block) .rank-math-question::after {
  border-color: var(--sl-mint);
}


/* ── (5) FOOTER BRAND + COMPLIANCE BLOCK ───────────────────────────────────
   Adds the white lockup, social row, Equal Housing Opportunity badge and the
   compliance disclaimer above Kadence's existing bottom bar (which already
   carries NAP, licences and Privacy/Terms). TCPA consent is NOT here — it sits
   next to the forms. */
.slr-footer-brand {
  background: var(--sl-ink);
  color: rgba(255,255,255,.78);
  padding: var(--sl-6) 0 var(--sl-5);
  border-top: 1px solid rgba(255,255,255,.10);
}
.slr-footer-brand__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sl-5);
}
.slr-footer-brand__mark img { width: 120px; height: auto; display: block; }
.slr-footer-social { display: flex; flex-wrap: wrap; gap: var(--sl-4); }
/* Social links ARE clickable, so under the link-language ruling they are mint —
   on this dark ground that is #00FF7F — and underlined. */
.slr-footer-social a {
  color: var(--sl-mint);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: var(--sl-t-sm);
  font-weight: 600;
}
.slr-footer-social a:hover { text-decoration-thickness: 2px; }
.slr-footer-eho {
  display: flex; align-items: center; gap: 10px;
  color: rgba(255,255,255,.82);
  font-size: var(--sl-t-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 650;
}
.slr-eho-badge { width: 34px; height: 34px; flex: 0 0 34px; color: rgba(255,255,255,.9); }
.slr-footer-disclaimer {
  margin: var(--sl-5) 0 0;
  padding-top: var(--sl-4);
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(255,255,255,.62);
  max-width: 100%;
}
@media (max-width: 768px) {
  .slr-footer-brand__inner { flex-direction: column; align-items: flex-start; gap: var(--sl-4); }
}


/* ── (5, cont.) footer block corrections ───────────────────────────────────
   1. Kadence resets .container inside the footer to max-width:none, so the
      brand block ran edge-to-edge. Restore the 1140px measure locally.
   2. The footer link colour (rgba white .82) was beating the link-language
      ruling. Social links are clickable, so on this dark ground they are mint. */
.slr-footer-brand .container {
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: var(--sl-4);
}
.site-footer .slr-footer-social a,
.slr-footer-brand .slr-footer-social a {
  color: var(--sl-mint);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer .slr-footer-social a:hover,
.slr-footer-brand .slr-footer-social a:hover {
  color: var(--sl-mint);
  text-decoration-thickness: 2px;
}

/* `body .site-footer .site-footer-wrap a` (0,3,2) was still winning. Match it. */
body .site-footer .site-footer-wrap .slr-footer-social a,
body .site-footer .slr-footer-brand .slr-footer-social a {
  color: var(--sl-mint);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ── (3) CTA DISCIPLINE — the signature mid-page offer ─────────────────────
   Exactly ONE mid-page offer card per page. It reads as the signature offer:
   dark card, mint primary button, trust line beneath. The pre-footer CTA band
   and the agent card are unchanged by ruling and keep their own treatment. */
.offer-card, .cta-box--offer {
  background: var(--sl-ink);
  color: var(--sl-white);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--sl-r-lg, 14px);
  padding: var(--sl-7) var(--sl-6);
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
.offer-card :is(h2,h3) { color: var(--sl-white); margin-top: 0; }
.offer-card p { color: rgba(255,255,255,.80); margin-inline: auto; }
.offer-card .btn-primary,
.offer-card a[class*="btn-primary"] {
  background: var(--sl-mint);
  border-color: var(--sl-mint);
  color: var(--sl-ink);
  font-weight: 700;
}
.offer-card__trust {
  display: block;
  margin-top: var(--sl-3);
  font-size: var(--sl-t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
/* Hero holds at most two actions: one primary and the phone as an outline. */
:is(.hero-section,.hero-box,.solve-hero) .btn-group > a:nth-of-type(n+3) { display: none; }


/* ── (2, sweep) remaining non-clickable green on the sample pages ──────────
   The home-value page carries its own hv-* label vocabulary and the reverse
   page uses .accent-text / .eyebrow; both painted non-clickable labels mint.
   Same ruling: green is interactive-only. Scoped with page-id + body to clear
   the hv- rules' specificity, and an <em> inside a dark hv- block is emphasis,
   not a link. */
body :is(.hv-hero-eyebrow, .hv-form-crown-label, .hv-video-eyebrow,
  .hv-chapter-eyebrow, .hv-interrupt-label, .hv-int-card-label, .hv-equity-label,
  .hv-changed-eyebrow, .sd-chapter-eyebrow, .accent-text, .eyebrow) {
  color: var(--sl-muted);
}
body :is(.dark-zone, .mid-zone, .hero-section, .solve-hero, .hv-hero, .hv-interrupt,
  .hv-chapter, .hv-video, .hv-form-crown, .cta-box, .cta-band)
:is(.hv-hero-eyebrow, .hv-form-crown-label, .hv-video-eyebrow, .hv-chapter-eyebrow,
  .hv-interrupt-label, .hv-int-card-label, .hv-equity-label, .hv-changed-eyebrow,
  .accent-text, .eyebrow, em) {
  color: rgba(255,255,255,.72);
}
:is(body.page-id-2260) :is(.hv-hero-eyebrow, .hv-form-crown-label, .hv-video-eyebrow,
  .hv-chapter-eyebrow, .hv-interrupt-label, .hv-int-card-label, .hv-equity-label,
  .hv-changed-eyebrow) {
  color: var(--sl-muted);
}
:is(body.page-id-2260) :is(.hv-hero, .hv-interrupt, .hv-chapter, .dark-zone)
:is(.hv-hero-eyebrow, .hv-form-crown-label, .hv-video-eyebrow, .hv-chapter-eyebrow,
  .hv-interrupt-label, .hv-int-card-label, .hv-equity-label, .hv-changed-eyebrow, em) {
  color: rgba(255,255,255,.72);
}


/* ── (2, FINAL) "green is interactive-only" as a design law ────────────────
   The label vocabulary is painted mint by ~a dozen legacy rules at varying
   specificity (page-id scopes, :is() lists carrying `body`-prefixed arguments,
   :not() chains). Chasing each one produced selectors nobody could maintain.
   This is a single semantic law with no exceptions -- a non-clickable label is
   never green -- which is what !important is actually for. It is deliberately
   the ONLY !important added by V3.2, and it is scoped to a closed class list.
   Clickable elements are untouched: <a> and <button> never match. */
:where(.eyebrow, .eyebrow-text, .solve-kicker, .scenario-label, .use-case-label,
  .spec-label, .authority-label, .tool-label, .solve-entity-label, .cat-title,
  .hero-eyebrow-label, .solve-answer-badge, .trust-title, .tm-eyebrow, .tm-role,
  .tm-card-lic, .tm-card-role, .hero-badge, .accent-text, .person-card__creds,
  .auth-creds, .authority-nmls, .solve-auth-creds, .hv-hero-eyebrow,
  .hv-form-crown-label, .hv-video-eyebrow, .hv-chapter-eyebrow, .hv-interrupt-label,
  .hv-int-card-label, .hv-equity-label, .hv-changed-eyebrow, .sd-chapter-eyebrow
  ):not(a):not(button) {
  color: var(--sl-muted) !important;
}
:where(.dark-zone, .mid-zone, .hero-section, .hero, .solve-hero, .hv-hero,
  .hv-interrupt, .hv-chapter, .hv-video, .hv-form-crown, .cta-box, .cta-band,
  .tm-hero, .sd-hero, .agent-card)
:where(.eyebrow, .eyebrow-text, .solve-kicker, .spec-label, .tm-eyebrow, .tm-role,
  .tm-card-lic, .tm-card-role, .hero-badge, .accent-text, .person-card__creds,
  .auth-creds, .solve-auth-creds, .solve-answer-badge, .hv-hero-eyebrow,
  .hv-form-crown-label, .hv-video-eyebrow, .hv-chapter-eyebrow, .hv-interrupt-label,
  .hv-int-card-label, .hv-equity-label, .hv-changed-eyebrow
  ):not(a):not(button) {
  color: rgba(255,255,255,.72) !important;
}

/* Emphasis inside the home-value chapters was mint. <em> is non-clickable text,
   so the same law applies — narrowly scoped to those blocks, not to all <em>. */
:where(.hv-hero, .hv-interrupt, .hv-chapter, .hv-video, .hv-changed, .hv-equity)
  em:not(a):not(button) {
  color: inherit !important;
}


/* ── (7) HEADER LOGO 60px + balanced bar ───────────────────────────────────
   The logo is now the home affordance (item 6 removed "Home" from the menu), so
   it carries more weight: 60px display height from a 145x120 @2x composite at
   the artwork's natural 1.21:1 aspect — no transparent padding, so 60px of box
   is 60px of logo.

   The header pad is reduced so a 16px-taller mark does not simply inflate the
   bar; target is a visually similar overall height with a larger mark. */
.site-header .site-header-row-container-inner > .site-container,
.site-header .site-main-header-inner-wrap {
  padding-block: 6px;
}
/* Kadence sets a min-height on the main header row from the customizer; the
   larger mark otherwise just adds to it instead of filling it. */
.site-header .site-main-header-inner-wrap { min-height: 0; }
.site-header .site-header-row-container-inner { padding-block: 0; }
.site-header .site-branding a.brand { display: inline-flex; align-items: center; }

/* Mobile: the mark scales down but the TAP TARGET must stay >= 44px in both
   directions (WCAG 2.5.8 / Apple HIG). The link is padded to guarantee it even
   though the 44px-tall logo is only ~53px wide. */
@media (max-width: 1024px) {
  .site-header .custom-logo { height: 44px; }
  .site-header .site-branding a.brand {
    min-height: 44px;
    min-width: 44px;
    padding: 2px 4px;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   (8) SECTION PILL NAV — DESIGN-V3.2 addendum
   The link-language ruling applies HERE (not the header, which stands as-is).
   Rest: navy text + visible border. Hover: mint fill + dark text. Active (the
   section currently in view): persistent mint. Prefixed with a quiet
   "On this page:" so the row's purpose is instant.
   ══════════════════════════════════════════════════════════════════════════ */

.section-nav, .nav-pills, .pill-nav, .nav-sticky, .sticky-nav,
.solve-sticky-nav, .hv-nav, .sd-nav {
  display: flex;
  align-items: center;
  gap: var(--sl-2);
  padding: 10px var(--sl-4);
  /* Sticky is SAFE here: .site-header is position:relative, so it scrolls away
     rather than being overlapped, and a sticky element cannot cover content in
     its own flow. Verified at 1440/390 — see the report. */
  position: sticky;
  top: 0;
  z-index: 100;
}

/* the quiet label */
.section-nav::before, .nav-pills::before, .pill-nav::before,
.solve-sticky-nav::before, .hv-nav::before, .sd-nav::before {
  content: 'On this page:';
  flex: 0 0 auto;
  font-size: var(--sl-t-xs);
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sl-muted);
  white-space: nowrap;
  margin-right: var(--sl-2);
}

/* ── the pills ─────────────────────────────────────────────────────────── */
.section-nav a, .section-nav .pill, .section-nav .nav-link,
.nav-pills a, .pill-nav a, .nav-sticky a, .sticky-nav a,
.solve-sticky-nav a, .hv-nav a, .sd-nav a {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;                /* tap target, mobile and desktop alike */
  padding: 8px 16px;
  margin: 0;
  border-radius: var(--sl-r-pill, 999px);
  border: 1.5px solid #C9D4E0;
  background: transparent;
  color: var(--sl-ink);            /* navy at rest — NOT green */
  font-size: var(--sl-t-sm);
  font-weight: 600;
  text-decoration: none;           /* pills are buttons, not prose links */
  white-space: nowrap;
  transition: background .18s var(--sl-ease), color .18s var(--sl-ease),
              border-color .18s var(--sl-ease);
}
.section-nav a:hover, .section-nav .pill:hover, .section-nav .nav-link:hover,
.nav-pills a:hover, .pill-nav a:hover, .nav-sticky a:hover, .sticky-nav a:hover,
.solve-sticky-nav a:hover, .hv-nav a:hover, .sd-nav a:hover,
.section-nav a:focus-visible, .nav-pills a:focus-visible, .hv-nav a:focus-visible {
  background: var(--sl-mint);      /* mint fill */
  border-color: var(--sl-mint);
  color: var(--sl-ink);            /* dark text */
  text-decoration: none;
}
/* persistent active state — set by the scrollspy */
.section-nav a.is-active, .section-nav .pill.is-active, .section-nav .nav-link.is-active,
.nav-pills a.is-active, .pill-nav a.is-active, .nav-sticky a.is-active,
.sticky-nav a.is-active, .solve-sticky-nav a.is-active, .hv-nav a.is-active,
.sd-nav a.is-active {
  background: var(--sl-mint);
  border-color: var(--sl-mint);
  color: var(--sl-ink);
  font-weight: 700;
}

/* ── mobile: scrollable, faded edge, nothing clipped ──────────────────── */
@media (max-width: 900px) {
  .section-nav, .nav-pills, .pill-nav, .nav-sticky, .sticky-nav,
  .solve-sticky-nav, .hv-nav, .sd-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* the fade IS the affordance — it must not clip the last pill, so the mask
       only softens the final 28px and the row keeps trailing padding. */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
    padding-right: 32px;
  }
  .section-nav a, .nav-pills a, .pill-nav a, .hv-nav a, .sd-nav a,
  .solve-sticky-nav a { scroll-snap-align: start; }
  .section-nav::-webkit-scrollbar, .nav-pills::-webkit-scrollbar,
  .hv-nav::-webkit-scrollbar, .sd-nav::-webkit-scrollbar { display: none; }
}
/* dark grounds */
:is(.dark-zone,.mid-zone) :is(.section-nav,.nav-pills,.hv-nav,.sd-nav) a {
  color: var(--sl-white);
  border-color: rgba(255,255,255,.34);
}
:is(.dark-zone,.mid-zone) :is(.section-nav,.nav-pills,.hv-nav,.sd-nav)::before {
  color: rgba(255,255,255,.62);
}


/* ── (8, cont.) pills must outrank the body-link rule ─────────────────────
   The item-2 rule `.entry-content a:not([class*="btn"])…:not(.pill)` carries a
   :not() chain worth (0,5,1) and was repainting the pills mint. Pills are
   navigation controls, not prose links, so they are excluded by mirroring the
   same chain — equal specificity, later in source, no !important. */
.entry-content :is(.section-nav, .nav-pills, .pill-nav, .nav-sticky, .sticky-nav,
  .solve-sticky-nav, .hv-nav, .sd-nav)
  a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta) {
  color: var(--sl-ink);
  text-decoration: none;
  border: 1.5px solid #C9D4E0;
  background: transparent;
}
.entry-content :is(.section-nav, .nav-pills, .pill-nav, .nav-sticky, .sticky-nav,
  .solve-sticky-nav, .hv-nav, .sd-nav)
  a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta):hover,
.entry-content :is(.section-nav, .nav-pills, .pill-nav, .nav-sticky, .sticky-nav,
  .solve-sticky-nav, .hv-nav, .sd-nav)
  a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta).is-active {
  background: var(--sl-mint);
  border-color: var(--sl-mint);
  color: var(--sl-ink);
  text-decoration: none;
}


/* ══════════════════════════════════════════════════════════════════════════
   (S3) ONE CARD SYSTEM — three variants, confirmed 2026-07-30
     1. default light   white surface, #e5e7eb border
     2. accent-left     mint tint surface / 3px #00CC66 left border — quick
                        answers and callouts
     3. dark            #1A2B3C — agent and CTA zones
   The five legacy classes consolidate INTO these by mapping the class names in
   CSS rather than rewriting 7,600 class attributes across 552 pages: the markup
   keeps its names, the system gives them one of three appearances.
     card, tool-card, tool-gray  -> default light
     snippet-box                 -> accent-left  (they are quick answers)
     tool-blue, auth-card        -> dark
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. DEFAULT LIGHT ──────────────────────────────────────────────────── */
.card, .tool-card, .tool-card.tool-gray, .loan-card, .option-card, .path-card,
.scenario-block, .category-card, .card--default {
  background: #FFFFFF;
  border: 1px solid #e5e7eb;
  border-radius: var(--sl-r, 12px);
  padding: var(--sl-5);
  color: var(--sl-body);
  box-shadow: none;
}
.card :is(h2,h3,h4), .tool-card :is(h2,h3,h4) { color: var(--sl-ink); margin-top: 0; }

/* ── 2. ACCENT-LEFT — quick answers / callouts ─────────────────────────── */
.snippet-box, .quick-answer, .callout, .card--accent {
  background: #F7FFFB;                     /* mint tint surface */
  border: 1px solid #DEFCEE;
  border-left: 3px solid var(--sl-mint-deep);   /* #00CC66 */
  border-radius: var(--sl-r, 12px);
  padding: var(--sl-5);
  color: var(--sl-body);
}
.snippet-box :is(h2,h3,h4), .callout :is(h2,h3,h4) { color: var(--sl-ink); margin-top: 0; }

/* ── 3. DARK — agent and CTA zones ─────────────────────────────────────── */
.tool-card.tool-blue, .auth-card, .card--dark {
  background: var(--sl-slate);               /* #1A2B3C */
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--sl-r, 12px);
  padding: var(--sl-5);
  color: rgba(255,255,255,.86);
}
.tool-card.tool-blue :is(h2,h3,h4), .auth-card :is(h2,h3,h4), .card--dark :is(h2,h3,h4) {
  color: var(--sl-white); margin-top: 0;
}
/* the old #22364B / #C9D4E0 borders are retired by the rules above */

/* ── medpro scenario chips — tint variants, not four alien colours ────────
   label-blue / teal / gold / green were four unrelated hues. They become one
   chip with tint differentiation inside the system: same shape, same ink, a
   graded mint tint so they still read as four distinct scenarios. */
.label-blue, .label-teal, .label-gold, .label-green,
[class*="label-"].scenario-label, .chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--sl-r-pill, 999px);
  font-size: var(--sl-t-xs);
  font-weight: 650;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sl-ink) !important;   /* overrides the legacy per-colour text rules */
  border: 1px solid #DEFCEE;
}
.label-blue  { background: #F7FFFB; }
.label-teal  { background: #F0FEF7; }
.label-green { background: #DEFCEE; }
.label-gold  { background: #E8FBF1; }
:is(.dark-zone,.mid-zone) :is(.label-blue,.label-teal,.label-gold,.label-green) {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.88) !important;
}

/* ── (S4) EFFECTS POLICY ───────────────────────────────────────────────────
   Transitions and hover states ONLY on links, buttons and whole-link cards.
   Static content never reacts to the pointer. */
.card:not(a):not(:has(> a:only-child)):hover,
.tool-card:not(a):hover, .loan-card:not(a):hover, .option-card:not(a):hover,
.snippet-box:hover, .auth-card:not(a):hover {
  transform: none;
  box-shadow: none;
}
a.card:hover, a.tool-card:hover, a.loan-card:hover, a.option-card:hover,
a.pivot-card:hover, a.category-card:hover, .card > a:only-child:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(13,27,46,.10);
  transition: transform .18s var(--sl-ease), box-shadow .18s var(--sl-ease);
}

/* ── (S2) CONTAINER + MEASURE ──────────────────────────────────────────────
   The injected wp:html body sat outside the theme's .site-container, so text ran
   to 1392px (~190 characters). Constrain the content root and cap prose measure. */
.entry-content > *:not(.dark-zone):not(.hero-section):not(.solve-hero):not(.cta-band):not(.cta-box):not(.solve-final-cta):not(.footer-box):not(.trust-bar):not(.agent-card):not(.mid-zone):not(.section-nav) {
  max-width: 1140px;
  margin-inline: auto;
}
.entry-content :is(p, li):not([class*="hero"]):not([class*="lead"]) {
  max-width: 72ch;
}
.entry-content :is(.card, .tool-card, .snippet-box, .auth-card, .loan-card,
  .option-card, .pivot-card, .agent-card, .trust-bar, .section-nav) :is(p, li) {
  max-width: none;   /* inside a card the card is already the measure */
}
/* .container was in this exclusion, which defeated the cap — nearly all body
   copy lives inside a .container, so prose was still running to 1242px (~165
   characters). The cap has to reach inside containers; only cards are exempt. */
.entry-content .container > :is(p, li),
.entry-content .container > * > :is(p, li) { max-width: 72ch; }


/* ── (9) LIGHT SURFACES INSIDE DARK ZONES ─────────────────────────────────
   `.form-wrapper` is a white form card (background:#fff, 36px padding). All 28
   instances in the corpus wrapped a BARE BUTTON — not one contained a form,
   iframe or input — and inside a dark hero that painted a full-width white bar
   across the band. The wrappers were removed from content; this is the backstop
   so the same misuse can never paint a bar again. */
.form-wrapper:not(:has(form)):not(:has(iframe)):not(:has(input)) {
  background: transparent;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}
/* A form card genuinely inside a dark band keeps its light surface — that is a
   deliberate pattern (CLAUDE.md: "a card inside a dark CTA is a LIGHT surface").
   What is never right is a light surface with no content of its own. */
:is(.dark-zone, .hero-section, .solve-hero, .cta-band) > .form-wrapper:empty,
:is(.dark-zone, .hero-section, .solve-hero, .cta-band) > div:empty {
  display: none;
}


/* ══════════════════════════════════════════════════════════════════════════
   SOLVE BRAND ICON LIBRARY — DESIGN-V3.2 item 10
   16 concepts, one visual language: 24x24 box, 1.5px stroke, round caps and
   joins, no fills. Delivered as inline SVG data URIs used through mask-image,
   so every icon inherits currentColor — mint on dark surfaces, navy with a
   mint accent on light. No emoji, no icon font, no external request.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --icon-payment: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%2212%22%20r%3D%225%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M15.5%208.5h4M17.5%206.5l2%202-2%202%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9%209.8v4.4M7.6%2010.6h2.2a1.2%201.2%200%20010%202.4H8.2a1.2%201.2%200%20000%202.4h2.2%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --icon-reserves: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%226.5%22%20rx%3D%226.5%22%20ry%3D%222.5%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M5.5%206.5v5c0%201.4%202.9%202.5%206.5%202.5s6.5-1.1%206.5-2.5v-5%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M5.5%2011.5v5c0%201.4%202.9%202.5%206.5%202.5s6.5-1.1%206.5-2.5v-5%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --icon-loan-fit: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%223.5%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M10.6%2010.6%2019%2019M16.5%2016.5l-2%202M14%2014l-1.6%201.6%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --icon-timing: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%228%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M12%207.5V12l3%202%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --icon-equity: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%2011%2012%204l8%207%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%2010.5V20h12v-9.5%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9.5%2017v-3.2h5V17%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --icon-credit: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Crect%20x%3D%223%22%20y%3D%226%22%20width%3D%2218%22%20height%3D%2212%22%20rx%3D%222%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M3%2010h18M6.5%2014.5h3%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --icon-documentation: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6%203h7l5%205v13H6z%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M13%203v5h5%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9%2013h6M9%2016.5h6%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --icon-home: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%2011%2012%204l8%207%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%2010.5V20h12v-9.5%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M10%2020v-5h4v5%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --icon-selling: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3.5%2010.5%2010%205l6.5%205.5%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M5.5%2010v9h6%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22m14%2014%205.5%205.5M14%2014v5.5h5.5%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2215.6%22%20cy%3D%2215.6%22%20r%3D%22.9%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --icon-comparison: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%2020V9M10%2020V5M16%2020v-7M22%2020H2%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --icon-protection: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%203.5%205%206.2v5.3c0%204.3%202.9%207.6%207%209%204.1-1.4%207-4.7%207-9V6.2z%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22m9%2012%202.2%202.2L15.5%2010%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --icon-checklist: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M9%206.5h10M9%2012h10M9%2017.5h10%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22m4%206%201.2%201.2L7.4%205M4%2011.5l1.2%201.2%202.2-2.2M4%2017l1.2%201.2%202.2-2.2%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --icon-location: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2021c4-4.4%206-7.7%206-10.3A6%206%200%200%200%206%2010.7C6%2013.3%208%2016.6%2012%2021Z%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210.5%22%20r%3D%222.3%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --icon-growth: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%2017.5%209%2011l4%204%208-8%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M15.5%207H21v5.5%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --icon-warning: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%204.5%2021%2019.5H3z%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M12%2010v4.2M12%2017.2v.1%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --icon-phone: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M7.5%203.5h9a1.5%201.5%200%200%201%201.5%201.5v14a1.5%201.5%200%200%201-1.5%201.5h-9A1.5%201.5%200%200%201%206%2019V5a1.5%201.5%200%200%201%201.5-1.5Z%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M10.5%2017.2h3%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}


/* ══════════════════════════════════════════════════════════════════════════
   (10) CARD ENRICHMENT STANDARD — bare text-only cards are banned
   Every card carries: (a) a brand line icon matched to its theme, (b) a title
   a clear step above body, (c) one accent element appropriate to its variant.
   The icon is drawn from --icon-<name> through mask-image, so it inherits
   currentColor: navy on light surfaces, mint on dark.
   ══════════════════════════════════════════════════════════════════════════ */

/* (a) THE ICON — a chip on light surfaces, bare mint glyph on dark */
/* accent-left and dark variants take the bare glyph in the accent colour */

/* the concepts */
[data-icon="payment"]::after       { -webkit-mask-image: var(--icon-payment);       mask-image: var(--icon-payment); }
[data-icon="reserves"]::after      { -webkit-mask-image: var(--icon-reserves);      mask-image: var(--icon-reserves); }
[data-icon="loan-fit"]::after      { -webkit-mask-image: var(--icon-loan-fit);      mask-image: var(--icon-loan-fit); }
[data-icon="timing"]::after        { -webkit-mask-image: var(--icon-timing);        mask-image: var(--icon-timing); }
[data-icon="equity"]::after        { -webkit-mask-image: var(--icon-equity);        mask-image: var(--icon-equity); }
[data-icon="credit"]::after        { -webkit-mask-image: var(--icon-credit);        mask-image: var(--icon-credit); }
[data-icon="documentation"]::after { -webkit-mask-image: var(--icon-documentation); mask-image: var(--icon-documentation); }
[data-icon="home"]::after          { -webkit-mask-image: var(--icon-home);          mask-image: var(--icon-home); }
[data-icon="selling"]::after       { -webkit-mask-image: var(--icon-selling);       mask-image: var(--icon-selling); }
[data-icon="comparison"]::after    { -webkit-mask-image: var(--icon-comparison);    mask-image: var(--icon-comparison); }
[data-icon="protection"]::after    { -webkit-mask-image: var(--icon-protection);    mask-image: var(--icon-protection); }
[data-icon="checklist"]::after     { -webkit-mask-image: var(--icon-checklist);     mask-image: var(--icon-checklist); }
[data-icon="location"]::after      { -webkit-mask-image: var(--icon-location);      mask-image: var(--icon-location); }
[data-icon="growth"]::after        { -webkit-mask-image: var(--icon-growth);        mask-image: var(--icon-growth); }
[data-icon="warning"]::after       { -webkit-mask-image: var(--icon-warning);       mask-image: var(--icon-warning); }
[data-icon="phone"]::after         { -webkit-mask-image: var(--icon-phone);         mask-image: var(--icon-phone); }

/* (b) TITLE TREATMENT — a clear step above body, not just bold */
:is(.card, .tool-card, .snippet-box, .auth-card, .loan-card, .option-card,
    .path-card, .scenario-block, .category-card) :is(h2, h3, h4) {
  font-size: 1.15rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 var(--sl-2);
}
:is(.card, .tool-card, .snippet-box, .loan-card, .option-card) p {
  font-size: var(--sl-t-sm);
  line-height: 1.6;
}

/* (c) ONE ACCENT PER VARIANT — and the never-bare fallback */
.card--accent-fallback {
  background: #F7FFFB;
  border: 1px solid #DEFCEE;
  border-left: 3px solid var(--sl-mint-deep);
}
/* a card with neither an icon nor the accent variant would be bare — this is the
   backstop the QA check asserts against. */
html.cards-enriched :is(.card, .tool-card, .loan-card, .option-card, .path-card,
  .category-card):not([data-icon]):not([data-noicon]):not(.card--accent-fallback) {
  border-left: 3px solid var(--sl-mint-deep);
}


/* ── (10, cont.) a whole-card link is not prose ────────────────────────────
   These loan-product cards are wrapped in <a>, so the link-language rule was
   painting the card's title AND body copy green and underlined. A card that is
   entirely a link still reads as a card: normal ink, no underline, and only the
   title carries the accent on hover. */
.entry-content a:is(.card, .tool-card, .loan-card, .option-card, .path-card,
  .category-card, .scenario-block),
.entry-content a:is(.card, .tool-card, .loan-card, .option-card, .path-card,
  .category-card, .scenario-block):visited,
.entry-content :is(.card, .tool-card, .loan-card, .option-card, .path-card,
  .category-card, .scenario-block) > a:only-child {
  color: var(--sl-body);
  text-decoration: none;
}
.entry-content a:is(.card, .tool-card, .loan-card, .option-card, .path-card,
  .category-card) :is(h2, h3, h4) {
  color: var(--sl-ink);
  text-decoration: none;
}
.entry-content a:is(.card, .tool-card, .loan-card, .option-card, .path-card,
  .category-card) :is(p, li, span) {
  color: var(--sl-body);
  text-decoration: none;
}
.entry-content a:is(.card, .tool-card, .loan-card, .option-card,
  .category-card):hover :is(h2, h3, h4) {
  color: var(--sl-mint-deep);
}
:is(.dark-zone, .mid-zone) .entry-content a:is(.card, .tool-card) :is(h2,h3,h4,p,li) {
  color: rgba(255,255,255,.88);
}


/* text-decoration propagates from the ancestor <a> and CANNOT be removed by a
   descendant rule — so the underline has to be killed on the anchor itself, at a
   specificity that beats the body-link rule's :not() chain (0,5,1). Mirrored, so
   equal specificity + later source wins. No !important. */
.entry-content a:is(.card, .tool-card, .loan-card, .option-card, .path-card,
  .category-card, .scenario-block, .pivot-card)
  :not([class*="zzz"]):not([class*="yyy"]):not([class*="xxx"]),
.entry-content a:is(.card, .tool-card, .loan-card, .option-card, .path-card,
  .category-card, .scenario-block, .pivot-card):not([class*="zzz"]):not([class*="yyy"]):not([class*="xxx"]):not(.cta) {
  text-decoration: none;
}


/* ══════════════════════════════════════════════════════════════════════════
   (11) ONE MARKER PER BULLET — the green dash is the brand list marker
   RULING: the dash stays, the native browser disc goes, everywhere.

   Why the double marker existed: the dash rule's selector list carries a BARE
   ` li::before` token (same eaten-prefix defect as the :hover and ::after ones),
   so EVERY list item gets a dash — but `list-style:none` was only applied to the
   named list classes (.hero-bullets, .checklist, .situation-list, …). An
   unstyled <ul> therefore rendered the disc AND the dash.

   Scoped to UL only. Ordered lists keep their numbering: a number carries
   sequence, and replacing it with an identical dash would destroy that. The
   .method-list steps are unaffected — their ::before is the numbered badge, not
   a dash, so they were never double-marked.
   ══════════════════════════════════════════════════════════════════════════ */
.entry-content ul,
.entry-content ul ul,
.card ul, .tool-card ul, .snippet-box ul, .auth-card ul,
.loan-card ul, .option-card ul, .path-card ul, .scenario-block ul {
  list-style: none;
}
/* the dash sits at left:0 and the li already carries padding-left: var(--sl-5),
   so the text edge is unchanged — only the disc and its indent are removed. */
.entry-content ul {
  padding-left: 0;
  margin-left: 0;
}
.entry-content ul > li {
  padding-left: var(--sl-5);
}
/* Ordered lists are explicitly out of scope: numbering is semantic. */
.entry-content ol { list-style: decimal; }
.entry-content ol.method-list, .entry-content ol.link-list { list-style: none; }


/* ══════════════════════════════════════════════════════════════════════════
   (12) PAGE-CLOSING SEQUENCE + SECTION RHYTHM
   Two dark surfaces were stacking at DIFFERENT widths: .cta-box rendered
   contained (150 / 1140) while .agent-card.dark-zone rendered full-bleed
   (0 / 1392), so the closing sequence read as two mismatched slabs.

   RULE: two dark bands never touch with different widths. Enforced by making
   EVERY band a full-bleed surface whose CONTENT sits in the standard 1140px
   container — so widths can no longer disagree — and by merging adjacent dark
   bands into one surface with internal spacing rather than a seam.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --sl-band-space: 72px;   /* vertical rhythm between ALL bands */
  --sl-band-space-sm: 44px;
  --sl-band-inner: 48px;   /* spacing BETWEEN parts inside one merged band */
}

/* ── every band: full-bleed surface, contained content ─────────────────── */
.entry-content > :is(.cta-box, .cta-band, .solve-final-cta, .footer-box,
  .agent-card, .dark-zone, .mid-zone, .hero-section, .solve-hero, .trust-bar) {
  max-width: none;
  /* Standard full-bleed break-out. `width:100%` was not enough: .entry-content is
     itself inset, so a band sized to it landed at 1392 while another rule pushed
     .cta-box to 1440 — the exact width mismatch this ruling forbids. Breaking out
     to the viewport makes every band the same surface by construction. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  /* the content edge lands on the same 1140px measure as everything else */
  padding-inline: max(var(--sl-4), calc((100vw - 1140px) / 2));
  box-sizing: border-box;
}

/* ── consistent vertical rhythm between bands ──────────────────────────── */
.entry-content > :is(.cta-box, .cta-band, .solve-final-cta, .agent-card,
  .dark-zone, .mid-zone) {
  margin-block: var(--sl-band-space) 0;
}
@media (max-width: 768px) {
  .entry-content > :is(.cta-box, .cta-band, .solve-final-cta, .agent-card,
    .dark-zone, .mid-zone) { margin-block: var(--sl-band-space-sm) 0; }
}

/* ── ONE closing dark section ──────────────────────────────────────────────
   When a dark CTA band is followed by the agent card, they become a single
   surface: no gap, no seam, and the two parts separated by internal spacing
   plus a hairline rather than by a change of background. */
.entry-content > :is(.cta-box, .cta-band, .solve-final-cta)
  + .agent-card.dark-zone,
.entry-content > .agent-card.dark-zone
  + :is(.cta-box, .cta-band, .solve-final-cta) {
  margin-top: 0;
  padding-top: var(--sl-band-inner);
  border-top: 1px solid rgba(255,255,255,.10);
}
/* and the first of the pair loses its bottom rounding/shadow so the seam closes */
.entry-content > :is(.cta-box, .cta-band, .solve-final-cta):has(+ .agent-card.dark-zone) {
  padding-bottom: var(--sl-band-inner);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0;
}

/* ── the byline closes on light, with clear separation ─────────────────── */
.entry-content > .author-byline {
  margin-top: var(--sl-band-space);
  padding-top: var(--sl-5);
  border-top: 1px solid var(--sl-border);
  background: transparent;
}
/* directly after a dark band it needs the most separation — it is the light
   band that ends the page. */
.entry-content > :is(.agent-card, .dark-zone, .cta-box, .cta-band) + .author-byline {
  margin-top: var(--sl-band-space);
  border-top: none;
}


/* ══════════════════════════════════════════════════════════════════════════
   (13) MEDIA RESPECTS THE COLUMN — never the band's full-bleed width
   The Family-run video rendered 1160px wide inside a ~560px column, running past
   the viewport edge. Cause: `.split-2` is set to `align-items: stretch` (line
   ~1700, overriding its own `align-items: start`), so the media cell was
   stretched to the TEXT column's height — 653px — and `aspect-ratio: 16/9` then
   derived WIDTH FROM HEIGHT (653 x 16/9 = 1160). Nothing capped it.

   The fix inverts the dependency: width comes from the column, height from the
   aspect ratio. `align-self: start` stops the stretch that started it.
   ══════════════════════════════════════════════════════════════════════════ */
.split-2 > :is(.video-wrap, .solve-video, .video-box, .media-col, figure),
.solve-hero-grid > :is(.video-wrap, .solve-video, .video-box),
:is(.split-2, .hero-section--with-form) > :is(.video-wrap, .solve-video, .video-box) {
  align-self: start;      /* do NOT stretch to the text column's height */
  width: 100%;
  max-width: 100%;
  height: auto;           /* height derives from the ratio, not the row */
  border-radius: var(--sl-r);
  overflow: hidden;
}
/* the 16:9 box, sized from its own width */
.video-wrap--16x9, .video-wrap, .solve-video, .video-box {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--sl-r);
  overflow: hidden;
}
.video-wrap--16x9 > iframe, .video-wrap > iframe, .solve-video > iframe,
.video-box > iframe, .video-wrap > video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  display: block;
  border: 0;
}
/* Belt and braces: any media inside a band must obey the container measure, not
   the band's full-bleed surface. The break-out utility is `>`-scoped to direct
   children of .entry-content and cannot cascade — this guards the case where an
   inner wrapper is given a band class by hand. */
:is(.cta-box, .cta-band, .solve-final-cta, .dark-zone, .mid-zone, .hero-section,
    .solve-hero, .agent-card) :is(iframe, video, .video-wrap, .solve-video, .video-box) {
  max-width: 100%;
  width: 100%;
  margin-inline: 0;
}


/* ══════════════════════════════════════════════════════════════════════════
   (S5) HERO — a true two-column composition
   The hero grid resolved to `546px 546px 0px`: `repeat(auto-fit, minmax(...))`
   created a THIRD, empty track. That is the "third column / empty space" the
   ruling removes. Two explicit tracks instead, filling the container measure.

   RULING: the hero gets NO video slot — the video stays in the Family-run
   section, sized per addendum 13.
   ══════════════════════════════════════════════════════════════════════════ */
.hero-section--with-form, .solve-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sl-7);
  align-items: center;          /* the panel balances the copy, not top-hangs */
}
/* the 3-step panel is the right column and sizes to the track */
.hero-section--with-form > .hero-panel,
.solve-hero-grid > .hero-panel {
  width: 100%;
  max-width: 100%;
  align-self: center;
  margin: 0;
}
.hero-section--with-form > *:first-child,
.solve-hero-grid > *:first-child { min-width: 0; }

/* CTA row on ONE line, buttons sized to their labels */
.hero-section .btn-group, .hero-section--with-form .btn-group,
.solve-hero .btn-group {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--sl-3);
  align-items: center;
}
.hero-section .btn-group > a, .hero-section--with-form .btn-group > a {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .hero-section--with-form, .solve-hero-grid {
    grid-template-columns: 1fr;   /* stack cleanly */
    gap: var(--sl-6);
  }
  .hero-section .btn-group, .hero-section--with-form .btn-group {
    flex-wrap: wrap;              /* below 900 the row may wrap rather than clip */
  }
  .hero-section .btn-group > a { flex: 1 1 auto; text-align: center; }
}


/* ══════════════════════════════════════════════════════════════════════════
   (S5) AUTHORITY CARD — a specialist chip, not a portrait wall
   The Riverside FHA page rendered the headshot at 600x600 (the file's intrinsic
   size, unconstrained), dominating the upper page with dead space beside it.
   An agent photo is an identity chip: fixed, round, aligned with the copy.
   ══════════════════════════════════════════════════════════════════════════ */
.authority-card, .dual-authority > .authority-card {
  display: flex;
  align-items: center;
  gap: var(--sl-4);
  text-align: left;
}
.authority-card img,
.dual-authority img,
:is(.authority-card, .dual-authority, .specialist-card, .expert-card) img:not(.custom-logo) {
  width: 84px;
  height: 84px;
  min-width: 84px;
  flex: 0 0 84px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--sl-mint);
  margin: 0;
}
.dual-authority {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));   /* V3.3 M2a: explicit tracks */
  gap: var(--sl-5);
  align-items: start;
}
@media (max-width: 560px) {
  .authority-card { align-items: flex-start; }
  :is(.authority-card, .dual-authority) img:not(.custom-logo) {
    width: 64px; height: 64px; min-width: 64px; flex-basis: 64px;
  }
}

/* ── (S5) Lane B contrast — no navy-on-navy actions ────────────────────────
   Secondary buttons and link-cards inside a dark band were navy on navy and
   effectively invisible. On a dark ground a secondary action is a mint outline. */
:is(.dark-zone, .mid-zone, .hero-section, .solve-hero, .cta-box, .cta-band,
    .agent-card, .hv-hero)
  :is(.btn-secondary, .btn-dark, .solve-btn, .decision-link-dark, .card-cta) {
  background: transparent;
  color: var(--sl-mint);
  border: 1.5px solid rgba(0,255,127,.55);
}
:is(.dark-zone, .mid-zone, .hero-section, .solve-hero, .cta-box, .cta-band,
    .agent-card, .hv-hero)
  :is(.btn-secondary, .btn-dark, .solve-btn, .decision-link-dark, .card-cta):hover {
  background: var(--sl-mint);
  color: var(--sl-ink);
  border-color: var(--sl-mint);
}

/* ── (S5) county / service card grids: equal height ───────────────────────── */
.solve-county-hub-grid, .solve-service-grid, .county-grid, .grid-2, .grid-3 {
  align-items: stretch;
}
:is(.solve-county-hub-grid, .solve-service-grid, .county-grid, .grid-2, .grid-3)
  > :is(.card, .tool-card, .category-card, a.card, a.tool-card) {
  display: flex;
  flex-direction: column;
  height: 100%;
}


/* The home-value page carries its OWN mobile bar (.hv-mobile-bar), not
   .mobile-sticky-footer — give it the same height variable so any offset that
   reads --sl-mobile-bar-h is correct on that page too. */
.hv-mobile-bar { --sl-mobile-bar-h: 64px; }

/* ── GHL CHAT BUBBLE — positioned from JS, not from here ───────────────────
   The widget renders as <chat-widget> whose host is position:static, 0x0; the
   fixed positioning lives on .lc_text-widget INSIDE an open shadow root. Page
   CSS cannot cross a shadow boundary, so selectors here are inert by design —
   the mobile offset is injected into the shadow root by
   assets/js/solvelr-ghl-chat.js. Kept as a note so nobody re-adds dead rules. */
:root { --sl-chat-gap: 16px; }

/* ══════════════════════════════════════════════════════════════════════════
   DE-DUPLICATED 2026-07-30 (REVIEW MARKUP 2+3 cycle).
   Lines 5822-11629 of the previous file were a byte-exact second copy of lines
   1-5809 — the whole design system was being served twice (270 KB of dead
   payload). Harmless to render, because every duplicated rule was identical to
   its twin, but a landmine for editing: a change made in the first copy was
   silently overridden by the untouched twin ~5,800 lines below, with no error
   and no visual clue. Removed after proving the computed styles of every
   element on all 11 samples at 1440 and 390 are unchanged.
   THE FILE MUST HAVE EXACTLY ONE COPY OF EACH RULE. If you append to it, append
   at the end — never re-emit the whole file.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   GHL CHAT BUBBLE — clear of the sticky mobile CTA bar
   The bar is --sl-mobile-bar-h (64px) plus the safe-area inset. The bubble must
   sit ABOVE it on mobile and stay bottom-right on desktop. The widget renders
   into a container the vendor controls, so several likely hooks are covered
   rather than relying on one class name surviving a vendor update.
   ══════════════════════════════════════════════════════════════════════════ */
:root { --sl-chat-gap: 16px; }

@media (max-width: 768px) {
  #lc_text-widget, .lc_text-widget, #chat-widget-container, .chat-widget-container,
  [id^="lc_"] iframe, [class*="leadconnector"], [id*="leadconnector"],
  iframe[src*="leadconnectorhq"] {
    bottom: calc(var(--sl-mobile-bar-h, 64px) + var(--sl-chat-gap)
                 + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 190 !important;   /* under the sticky bar (200), above page content */
  }
}
@media (min-width: 769px) {
  #lc_text-widget, .lc_text-widget, #chat-widget-container, .chat-widget-container,
  [class*="leadconnector"], iframe[src*="leadconnectorhq"] {
    bottom: var(--sl-chat-gap) !important;
    right: var(--sl-chat-gap) !important;
  }
}


/* ── (S5) Lane B money-page pattern — stat band ────────────────────────────
   The signature figures get card weight instead of being buried in body copy. */
.stat-band { background: #F7FFFB; border-block: 1px solid #DEFCEE; }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));   /* V3.3 M2a: explicit tracks */
  gap: var(--sl-4);
  padding-block: var(--sl-5);
}
.stat-card {
  background: #FFFFFF;
  border: 1px solid #e5e7eb;
  border-radius: var(--sl-r);
  padding: var(--sl-4) var(--sl-4);
  text-align: center;
}
.stat-card__figure {
  font-family: var(--sl-font-display, inherit);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--sl-ink);
}
.stat-card__label {
  margin-top: 6px;
  font-size: var(--sl-t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sl-muted);
}
:is(.dark-zone, .mid-zone) .stat-band { background: rgba(255,255,255,.04); border-block-color: rgba(255,255,255,.12); }


/* ── (S5) Family-run founders ──────────────────────────────────────────────
   Fills the dead space under the video in the Family-run right column (measured
   653px of copy against a 307px video). Portraits are the ENTITY-NAP masters
   BAKED onto #1A2B3C as JPGs — the RGBA PNG masters are never served. */
.founders-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sl-4);
  margin-top: var(--sl-4);
}
.founders-duo .founder { margin: 0; }
.founders-duo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--sl-r);
  display: block;
  background: var(--sl-slate);
}
.founders-duo figcaption {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.founders-duo figcaption strong { font-size: var(--sl-t-sm); color: var(--sl-ink); font-weight: 700; }
.founders-duo figcaption span {
  font-size: var(--sl-t-xs); color: var(--sl-muted);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 650;
}
:is(.dark-zone,.mid-zone) .founders-duo figcaption strong { color: var(--sl-white); }
:is(.dark-zone,.mid-zone) .founders-duo figcaption span { color: rgba(255,255,255,.66); }
@media (max-width: 480px) { .founders-duo { gap: var(--sl-3); } }


/* .split-2 resolved to "546px 546px 0px" — auto-fit leaves an empty trailing
   track (and its gap) whenever there are exactly two children. Two explicit
   tracks, same as the hero fix. */
.split-2 {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 900px) { .split-2 { grid-template-columns: 1fr; } }


/* ── (S5) home-value: hero alignment unified ───────────────────────────────
   The eyebrow, H1 and subhead were centred while the body directly below is a
   left-aligned two-column layout — the page changed axis mid-scroll. Unified
   LEFT, matching the body and the rest of the site. */
.hv-hero, .hv-hero * { text-align: left; }
.hv-hero .hv-hero-eyebrow, .hv-hero-badge { margin-inline: 0; }
.hv-hero :is(h1, .hv-hero-sub, .hv-hero-body) { margin-inline: 0; max-width: 72ch; }
@media (max-width: 768px) { .hv-hero, .hv-hero * { text-align: left; } }

/* ── (S5) home-value: "Why People Check Value Now" rebuilt clean ───────────
   Was a 10-row list where every row carried a full-width divider AND a ragged
   line stub. The stubs were the *::after defect (fixed in item 1); this gives the
   rows a clean two-column rhythm with one marker and no per-row rules. */
.hv-list {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));   /* V3.3 M2a: explicit tracks */
  gap: var(--sl-3) var(--sl-6);
  list-style: none;
  margin: 0;
  padding: 0;
}
.hv-list > li, .hv-list > div {
  position: relative;
  padding: 10px 0 10px var(--sl-5);
  border: 0;                 /* no per-row dividers */
  margin: 0;
}
.hv-list > li::after, .hv-list > div::after { content: none; }   /* no line stubs */
.hv-list > li::before, .hv-list > div::before {
  content: '';
  position: absolute;
  left: 0; top: 1.05em;
  width: 10px; height: 2px;
  background: var(--sl-mint-deep);
}
.hv-list-dot { display: none; }   /* the second marker */

/* the hero's inner wrappers each carried their own auto margins, so "left"
   still produced three different left edges (320 / 390 / 410). One edge. */
.hv-hero > *, .hv-hero .container, .hv-hero .hv-hero-inner, .hv-hero > div > * {
  margin-inline: 0;
  padding-inline: 0;
}
.hv-hero .container { max-width: 1140px; margin-inline: auto; padding-inline: var(--sl-4); }


/* ══════════════════════════════════════════════════════════════════════════
   CARD TREATMENT v2 — REVIEW MARKUP 1
   The enrichment standard executed properly: an icon CHIP (not a bare glyph),
   a title that leads the hierarchy, a real accent surface per variant, balanced
   density, and padding from the spacing tokens.

   Why the chip needs two pseudo-elements: mask-image CLIPS the element it is on,
   so a background painted on the same element is masked away with the glyph —
   that is why the first attempt showed a floating glyph and no chip. ::before is
   the chip (background, radius); ::after is the glyph (mask), centred on it.
   ══════════════════════════════════════════════════════════════════════════ */

:is(.card, .tool-card, .snippet-box, .auth-card, .loan-card, .option-card,
    .path-card, .scenario-block, .category-card)[data-icon] {
  position: relative;
}

/* (a) THE CHIP — 42px rounded square, mint-tint fill */
:is(.card, .tool-card, .snippet-box, .auth-card, .loan-card, .option-card,
    .path-card, .scenario-block, .category-card)[data-icon]::before {
  content: '';
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #DEFCEE;                 /* mint tint */
  border: 1px solid #C7F5E1;
  margin: 0 0 var(--sl-3);
  /* the chip is a plain box — no mask on this layer */
  -webkit-mask-image: none; mask-image: none;
}
/* the glyph, centred on the chip */
:is(.card, .tool-card, .snippet-box, .auth-card, .loan-card, .option-card,
    .path-card, .scenario-block, .category-card)[data-icon]::after {
  content: '';
  position: absolute;
  top: var(--sl-5); left: var(--sl-5);
  width: 42px; height: 42px;
  background-color: var(--sl-mint-deep);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: 22px 22px;   mask-size: 22px 22px;
  pointer-events: none;
}
/* dark variants: deeper chip, brighter glyph */
:is(.tool-card.tool-blue, .auth-card, .card--dark)[data-icon]::before,
:is(.dark-zone, .mid-zone) :is(.card, .tool-card)[data-icon]::before {
  background: rgba(0,255,127,.12);
  border-color: rgba(0,255,127,.28);
}
:is(.tool-card.tool-blue, .auth-card, .card--dark)[data-icon]::after,
:is(.dark-zone, .mid-zone) :is(.card, .tool-card)[data-icon]::after {
  background-color: var(--sl-mint);
}

/* (b) TITLE LEADS — 19px semibold navy, tight to the chip */
:is(.card, .tool-card, .snippet-box, .auth-card, .loan-card, .option-card,
    .path-card, .scenario-block, .category-card) :is(h2, h3, h4) {
  font-size: 1.19rem;          /* ~19px */
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -.012em;
  color: var(--sl-ink);
  margin: 0 0 var(--sl-2);
}
:is(.dark-zone, .mid-zone) :is(.card, .tool-card) :is(h2,h3,h4),
:is(.tool-card.tool-blue, .auth-card, .card--dark) :is(h2,h3,h4) { color: var(--sl-white); }
/* tighten the chip-to-title relationship */
:is(.card, .tool-card, .loan-card, .option-card, .category-card)[data-icon] :is(h2,h3,h4) {
  margin-top: 0;
}

/* (c) EVERY VARIANT GETS A REAL ACCENT SURFACE — a gray outline is not a design */
.card, .tool-card, .tool-card.tool-gray, .loan-card, .option-card, .path-card,
.scenario-block, .category-card, .card--default {
  background: #F7FFFB;                       /* mint-tint panel */
  border: 1px solid #DEFCEE;
  border-radius: var(--sl-r, 12px);
}
.snippet-box, .quick-answer, .callout, .card--accent, .card--accent-fallback {
  background: #F0FEF7;
  border: 1px solid #DEFCEE;
  border-left: 3px solid var(--sl-mint-deep);   /* the 3px mint rule */
}
.tool-card.tool-blue, .auth-card, .card--dark {
  background: var(--sl-slate);
  border: 1px solid rgba(255,255,255,.14);
}

/* (e) PADDING RHYTHM FROM THE TOKENS — one scale, not ad hoc */
:is(.card, .tool-card, .snippet-box, .auth-card, .loan-card, .option-card,
    .path-card, .scenario-block, .category-card) {
  padding: var(--sl-5);
}
@media (max-width: 560px) {
  :is(.card, .tool-card, .snippet-box, .auth-card, .loan-card, .option-card,
      .path-card, .scenario-block, .category-card) { padding: var(--sl-4); }
  :is(.card, .tool-card, .loan-card, .option-card, .category-card)[data-icon]::after {
    top: var(--sl-4); left: var(--sl-4);
  }
}

/* (d) DENSITY BALANCE — SUPERSEDED BY REVIEW MARKUP 2(c), 2026-07-30.
   Markup 1(d) made a card shrink to its content "rather than standing as a tall
   empty box beside a fuller sibling", and said so explicitly. Markup 2(c) then
   asked for the opposite as a system rule: "Same-row cards equal height, footer
   links/CTAs baseline-aligned — as a system rule for ALL card grids." The two
   cannot both hold. The later ruling wins, and it also answers what 1(d) was
   actually worried about: with the trailing CTA pinned by `margin-top:auto`
   (see M2c), a short card no longer reads as an empty box — its action sits on
   the row's baseline instead of floating in the middle of dead space.
   `align-self:start` is kept ONLY for the copy+media pairs, which are not card
   grids and are deliberately top-aligned. */
:is(.split-2, .dual-authority)
  > :is(.card, .tool-card, .category-card, .loan-card, .option-card, a.card, a.tool-card) {
  align-self: start;
  height: auto;
}
/* …but a card that IS a link keeps a comfortable minimum so the target stays big */
:is(.grid-2, .grid-3, .solve-county-hub-grid, .solve-service-grid)
  > a:is(.card, .tool-card, .category-card) { min-height: 132px; }


/* The dark card variants were rendering transparent — a later legacy rule beat
   the v2 surface, so they read as an undesigned outline. Restated at higher
   specificity so every variant keeps a real accent surface (REVIEW MARKUP 1c). */
body :is(.tool-card.tool-blue, .auth-card, .card--dark),
body .entry-content :is(.tool-card.tool-blue, .auth-card, .card--dark) {
  background: var(--sl-slate);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.88);
}
body :is(.tool-card.tool-blue, .auth-card, .card--dark) :is(h2,h3,h4) { color: var(--sl-white); }
body :is(.tool-card.tool-blue, .auth-card, .card--dark) :is(p,li) { color: rgba(255,255,255,.82); }


/* .snippet-box ships inline `padding:20px` from the Lane A source content — 410
   instances across the CSVs. 20px is off the 4/8/12/16/24/32 spacing scale, and an
   inline declaration can only be beaten by !important. Asserted here so the card
   padding rhythm comes from the tokens (REVIEW MARKUP 1e) without rewriting 410
   content rows. The inline mint surface (#F7FFFB / #DEFCEE) is already on-palette
   and is deliberately left alone. */
.snippet-box { padding: var(--sl-5) !important; }


/* ══════════════════════════════════════════════════════════════════════════
   DESIGN-V3.3 — REVIEW MARKUP 2 + 3  (2026-07-30)
   Kiyoshi's combined markup: desktop density & row uniformity (M2) and
   bugs + composition (M3). Everything below is a LAW — expressed once, over a
   closed selector list — not a per-page patch.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── M3b: ONE stacking scale for the whole site ──────────────────────────
     The bug: the header is position:relative z-index:11, which makes it a
     stacking CONTEXT. Its dropdowns declare z-index:1000, but 1000 only means
     anything INSIDE that context — against the page the whole header competes
     at 11. The sticky sub-navs sit in the ROOT context at 100. 100 > 11, so the
     pill bar painted over the header and swallowed every dropdown. Raising the
     header above the sub-nav fixes it at the root; the dropdown's own 1000
     never needed to change. */
  --sl-z-content:   1;
  --sl-z-subnav:    100;   /* sticky section pill bars */
  --sl-z-chat:      190;   /* GHL bubble — under the mobile bar */
  --sl-z-mobilebar: 200;   /* fixed mobile CTA bar */
  --sl-z-header:    800;   /* site header — MUST beat --sl-z-subnav */
  --sl-z-dropdown:  1000;  /* inside the header context */
  --sl-z-drawer:    99999; /* Kadence mobile drawer (platform value) */

  /* ── M3a: the brand list marker owns a column of its own ─────────────────
     10px dash + 14px gap = 24px, the same --sl-5 the lists already used. */
  --sl-marker-w:   10px;
  --sl-marker-gap: 14px;
  --sl-marker-col: 24px;
}

/* ── M3b (1) header + its dropdowns outrank every sticky sub-nav ─────────── */
.site-header, header#masthead, #masthead {
  z-index: var(--sl-z-header);
}
:is(.site-header, #masthead) :is(.sub-menu, ul ul, .dropdown-menu) {
  z-index: var(--sl-z-dropdown);
}
/* ── M3b (2) sticky sub-navs: one layer, below the header, with a real edge.
   They stick to --sl-header-offset so that if the header ever becomes sticky
   the bar lands under it instead of on it. */
:is(.section-nav, .nav-pills, .hv-nav) {
  z-index: var(--sl-z-subnav);
  top: var(--sl-header-offset, 0px);
  border-top: 1px solid var(--sl-border, #e5e7eb);
  box-shadow: 0 1px 0 rgba(13,27,46,.06), 0 6px 16px -12px rgba(13,27,46,.28);
}
:is(.dark-zone, .mid-zone) :is(.section-nav, .nav-pills, .hv-nav) {
  border-top-color: rgba(255,255,255,.12);
}
/* never two pinned sub-navs in the same place */
:is(.section-nav, .nav-pills, .hv-nav) + :is(.section-nav, .nav-pills, .hv-nav) {
  display: none;
}
.mobile-sticky-footer, .hv-mobile-bar { z-index: var(--sl-z-mobilebar); }


/* ══════════════════════════════════════════════════════════════════════════
   M2a + M2b — EXPLICIT TRACKS, AND EVERY ROW FILLS

   repeat(auto-fit, minmax(…, 1fr)) sizes the track count from the CONTAINER,
   not from the content. When it fits more tracks than there are children the
   extras collapse to 0px — but they still take their GAP, so a 2-card row was
   laid out as "558px 558px 0px" plus a trailing gutter of dead space. That is
   the hero bug, and it was in 11 rules.

   Replaced by a 12-track base with per-breakpoint SPANS. 12 divides by 2, 3, 4
   and 6, and — this is why it is safe — a span-S item on 12 tracks at gap g is
   EXACTLY as wide as one of C = 12/S equal columns at the same gap:
       S/12 * (W - 11g) + (S-1)g  ==  (W - (C-1)g) / C
   so no card changes size. Only the phantom tracks disappear, and the last row
   can now be told to fill.
   ══════════════════════════════════════════════════════════════════════════ */

:is(.grid-2, .pivot-grid, .split-2, .dual-authority, .dual-auth, .hv-list,
    .hero-section--with-form, .solve-hero-grid,
    .card-grid, .team-grid, .checks, .hv-changed-grid, .hv-see-grid,
    .solve-intent-grid, .solve-path-grid, .solve-entity-grid,
    .solve-definition-grid, .solve-service-grid, .solve-county-hub-grid,
    .grid-4, .market-stats, .stats-bar, .stat-grid, .pill-grid, .hv-county-grid) {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
/* The three bands below are MUTUALLY EXCLUSIVE, and that is load-bearing.
   A fill rule like `> :last-child:nth-child(2n+1)` is (0,2,0)-specific, so an
   open-ended `min-width:560px` band would keep WINNING over the desktop band's
   (0,1,0) `> *` span — a 3-up grid at 1440 was being handed the 2-up fill rule
   and dropping its third card onto a row of its own. Specificity beats source
   order, so the bands must not overlap. */
@media (max-width: 559.98px) {
  :is(.grid-2, .pivot-grid, .split-2, .dual-authority, .dual-auth, .hv-list,
      .hero-section--with-form, .solve-hero-grid,
      .card-grid, .team-grid, .checks, .hv-changed-grid, .hv-see-grid,
      .solve-intent-grid, .solve-path-grid, .solve-entity-grid,
      .solve-definition-grid, .solve-service-grid, .solve-county-hub-grid) > * {
    grid-column: span 12;
  }
  :is(.grid-4, .market-stats, .stats-bar, .stat-grid, .pill-grid, .hv-county-grid) > * {
    grid-column: span 6;
  }
  :is(.grid-4, .market-stats, .stats-bar, .stat-grid, .pill-grid, .hv-county-grid)
    > :last-child:nth-child(2n+1) { grid-column: span 12; }
}

@media (min-width: 560px) and (max-width: 899.98px) {
  :is(.card-grid, .team-grid, .checks, .hv-changed-grid, .hv-see-grid,
      .solve-intent-grid, .solve-path-grid, .solve-entity-grid,
      .solve-definition-grid, .solve-service-grid, .solve-county-hub-grid,
      .grid-2, .pivot-grid, .split-2, .dual-authority, .dual-auth, .hv-list,
      .hero-section--with-form, .solve-hero-grid,
      .grid-4, .market-stats, .stats-bar, .stat-grid, .pill-grid, .hv-county-grid) > * {
    grid-column: span 6;
  }
  :is(.card-grid, .team-grid, .checks, .hv-changed-grid, .hv-see-grid,
      .solve-intent-grid, .solve-path-grid, .solve-entity-grid,
      .solve-definition-grid, .solve-service-grid, .solve-county-hub-grid,
      .grid-2, .pivot-grid, .split-2, .dual-authority, .dual-auth, .hv-list,
      .hero-section--with-form, .solve-hero-grid,
      .grid-4, .market-stats, .stats-bar, .stat-grid, .pill-grid, .hv-county-grid)
    > :last-child:nth-child(2n+1) { grid-column: span 12; }
}

@media (min-width: 900px) {
  /* ── C = 2 ─────────────────────────────────────────────────────────────── */
  :is(.grid-2, .pivot-grid, .split-2, .dual-authority, .dual-auth, .hv-list,
      .hero-section--with-form, .solve-hero-grid) > * { grid-column: span 6; }
  :is(.grid-2, .pivot-grid, .split-2, .dual-authority, .dual-auth, .hv-list,
      .hero-section--with-form, .solve-hero-grid)
    > :last-child:nth-child(2n+1) { grid-column: span 12; }

  /* ── C = 3 ─────────────────────────────────────────────────────────────── */
  :is(.card-grid, .team-grid, .checks, .hv-changed-grid, .hv-see-grid,
      .solve-intent-grid, .solve-path-grid, .solve-entity-grid,
      .solve-definition-grid, .solve-service-grid, .solve-county-hub-grid) > * {
    grid-column: span 4;
  }
  /* one left over → it takes the whole row */
  :is(.card-grid, .team-grid, .checks, .hv-changed-grid, .hv-see-grid,
      .solve-intent-grid, .solve-path-grid, .solve-entity-grid,
      .solve-definition-grid, .solve-service-grid, .solve-county-hub-grid)
    > :last-child:nth-child(3n+1) { grid-column: span 12; }
  /* two left over → half each */
  :is(.card-grid, .team-grid, .checks, .hv-changed-grid, .hv-see-grid,
      .solve-intent-grid, .solve-path-grid, .solve-entity-grid,
      .solve-definition-grid, .solve-service-grid, .solve-county-hub-grid)
    > :nth-last-child(2):nth-child(3n+1),
  :is(.card-grid, .team-grid, .checks, .hv-changed-grid, .hv-see-grid,
      .solve-intent-grid, .solve-path-grid, .solve-entity-grid,
      .solve-definition-grid, .solve-service-grid, .solve-county-hub-grid)
    > :nth-last-child(2):nth-child(3n+1) ~ * { grid-column: span 6; }
  /* exactly two, or exactly four, read better as halves / a 2x2 */
  :is(.card-grid, .team-grid, .solve-path-grid, .solve-service-grid):has(> :last-child:nth-child(2)) > *,
  :is(.card-grid, .team-grid, .solve-path-grid, .solve-service-grid):has(> :last-child:nth-child(4)) > * {
    grid-column: span 6;
  }

  /* ── C = 4 ─────────────────────────────────────────────────────────────── */
  :is(.grid-4, .market-stats, .stats-bar, .stat-grid, .pill-grid, .hv-county-grid) > * {
    grid-column: span 3;
  }
  :is(.grid-4, .market-stats, .stats-bar, .stat-grid, .pill-grid, .hv-county-grid)
    > :last-child:nth-child(4n+1) { grid-column: span 12; }
  :is(.grid-4, .market-stats, .stats-bar, .stat-grid, .pill-grid, .hv-county-grid)
    > :nth-last-child(2):nth-child(4n+1),
  :is(.grid-4, .market-stats, .stats-bar, .stat-grid, .pill-grid, .hv-county-grid)
    > :nth-last-child(2):nth-child(4n+1) ~ * { grid-column: span 6; }
  :is(.grid-4, .market-stats, .stats-bar, .stat-grid, .pill-grid, .hv-county-grid)
    > :nth-last-child(3):nth-child(4n+1),
  :is(.grid-4, .market-stats, .stats-bar, .stat-grid, .pill-grid, .hv-county-grid)
    > :nth-last-child(3):nth-child(4n+1) ~ * { grid-column: span 4; }
}

/* ── TEXT LISTS ARE COLUMNS, NOT CARD ROWS ────────────────────────────────
   .hv-list and .checks are bulleted prose, not cards. Flowing them row-wise
   through a grid leaves the last row ragged on any odd count, and the obvious
   "fix" — stretching the lone last item across both columns — gives one bullet
   a 1058px measure while its neighbours read at 349px. Multi-column balances
   the items across the columns instead, so both columns run full depth and
   there is no ragged row to fill. */
:is(.hv-list, .checks) {
  display: block;
  columns: 1;
  column-gap: var(--sl-6);
}
@media (min-width: 700px) { :is(.hv-list, .checks) { columns: 2; } }
:is(.hv-list, .checks) > li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  max-width: none;
}

/* a one-item grid is not a grid — it is a block, and it fills */
:is(.card-grid, .grid-2, .grid-4, .pivot-grid, .team-grid,
    .stats-bar, .stat-grid) > :only-child { grid-column: span 12; }

/* M2a-FIX (3): .nav-links REMOVED from the 12-track system — we do not own it.
   `.nav-links` appears 0 times in page content; the only element carrying it is
   Kadence's post navigation, and Kadence styles it at (0,2,0):
       .nav-links, .post-navigation .nav-links { display:grid; grid-template-columns:repeat(2,1fr) }
   Our (0,1,0) 12-track template lost that cascade — but the span rules underneath
   it still applied, and `grid-column: span 6` against a TWO-track grid does not
   clamp: it generates four implicit zero-width tracks and stretches the first item
   across two of them. Measured on the insights posts: `397px 397px 0 0 0 0`, prev
   link 794px beside a 397px next link. Spanning rules are only safe on a grid whose
   template we define. */


/* ══════════════════════════════════════════════════════════════════════════
   M2c — SAME-ROW CARDS ARE EQUAL HEIGHT, FOOTERS SIT ON ONE BASELINE
   Grid already stretches items; what broke the line was cards whose inner
   content was not a column, so a trailing CTA floated wherever the copy ended.
   Making the card a flex column and pushing its last action to margin-top:auto
   puts every footer on the row's baseline by construction.
   .split-2 and the hero grids are excluded: those pair copy with media and are
   deliberately top-aligned.
   ══════════════════════════════════════════════════════════════════════════ */
:is(.card-grid, .team-grid, .grid-2, .grid-4, .pivot-grid, .checks,
    .stats-bar, .stat-grid, .market-stats, .hv-changed-grid, .hv-see-grid,
    .hv-county-grid, .solve-intent-grid, .solve-path-grid, .solve-entity-grid,
    .solve-definition-grid, .solve-service-grid, .solve-county-hub-grid) {
  align-items: stretch;
}
:is(.card-grid, .team-grid, .grid-2, .grid-4, .pivot-grid,
    .solve-intent-grid, .solve-path-grid, .solve-entity-grid,
    .solve-definition-grid, .solve-service-grid, .solve-county-hub-grid)
  > :is(.card, .tool-card, .loan-card, .option-card, .path-card, .category-card,
        .scenario-block, .pivot-card, .auth-card, .team-card) {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* align-self on the ITEM beats align-items on the container, and the cards
     carry `align-self:start` from the older card rules — so stretching the
     container alone left rows ragged. Assert it on the item. */
  align-self: stretch;
}
/* the footer action of a card drops to the bottom → one baseline across the row */
:is(.card-grid, .team-grid, .grid-2, .grid-4, .pivot-grid,
    .solve-path-grid, .solve-service-grid, .solve-county-hub-grid)
  > * > :is(a, .btn, .btn-primary, .btn-outline, .card__cta):last-child {
  margin-top: auto;
}
:is(.card, .tool-card, .loan-card, .option-card, .path-card, .category-card)
  > :is(p, ul, ol):last-of-type { margin-bottom: 0; }


/* ══════════════════════════════════════════════════════════════════════════
   M2d — WIDE PROSE CARDS HUG THEIR CONTENT
   A full-width border around a half-width text column reads as a mistake. Text
   inside a card flows the CARD's width; where a card holds nothing but a stack
   of paragraphs and is wider than a comfortable measure, the paragraphs run in
   two columns so the card is filled rather than half-used.
   ══════════════════════════════════════════════════════════════════════════ */
/* The site-wide reading measure — `.entry-content :is(p,li):not([class*="hero"])
   :not([class*="lead"]) { max-width: 72ch }`, specificity (0,3,1) — is right for
   prose in the content flow and wrong inside a card: it capped the text at 590px
   while the card's border ran to 1092px, which is precisely the "full-width
   border around a half-width text column" this markup forbids. A card is
   already a measure. Matched at (0,3,1) so it lands, and placed later so it
   wins the tie. */
.entry-content :is(.card, .tool-card, .cta-box, .snippet-box, .auth-card,
    .answer-box, .loan-card, .option-card, .path-card, .scenario-block,
    .subject-card, .distinction-callout, .premise-band, .eyebrow, .quick-answer)
  :is(p, ul, ol, li):not([class*="hero"]) {
  max-width: none;
}
:is(.card, .tool-card, .cta-box, .snippet-box, .auth-card, .answer-box,
    .loan-card, .option-card, .path-card, .scenario-block) > :is(p, ul, ol) {
  max-width: none;
}
/* a tint band that IS a paragraph must not be capped by the prose measure */
.entry-content :is(p, div, span):is(.snippet-box, .eyebrow, .quick-answer,
    .intro-box, .intro-card, .hv-chapter-eyebrow):not([class*="hero"]) {
  max-width: none;
  width: 100%;
}
/* opt-in: a card that should narrow to the measure instead of stretching */
.card--measure { max-width: calc(var(--sl-measure) + 2 * var(--sl-5)); }
/* opt-in: a paragraph stack that earns two columns on a wide card */
@media (min-width: 900px) {
  .prose-2col { columns: 2; column-gap: var(--sl-7); }
  .prose-2col > * { break-inside: avoid; }
  .prose-2col > :first-child { margin-top: 0; }
}


/* ══════════════════════════════════════════════════════════════════════════
   M2e — INTRO / EYEBROW TINT CARDS SPAN THE FULL CONTAINER
   Several tint surfaces were sized by their inline content (an eyebrow at
   583px inside a 1140px container), so the tint read as a floating chip rather
   than the section's opening band.
   ══════════════════════════════════════════════════════════════════════════ */
:is(.container, .answer-box, .card, .tool-card, .section, section)
  > :is(.eyebrow, .snippet-box, .quick-answer, .intro-box, .intro-card,
        .hv-chapter-eyebrow) {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
/* the eyebrow avatar row is a lockup, not a band — it keeps its intrinsic size */
.hero-eyebrow-container { width: 100%; }
.hero-eyebrow-container img.eyebrow-avatar { width: 24px; flex: 0 0 24px; }


/* ══════════════════════════════════════════════════════════════════════════
   M3a — THE LIST MARKER OWNS ITS COLUMN (bug: dash overlapped the first word)
   The dash is position:absolute; left:0, so text is only clear of it because
   the <li> carries padding. On the home-value page a page-scoped rule —
   :is(body.page-id-2260) .hv-list li { padding: .5rem 0 }, specificity (0,2,2)
   — outranked the design system's .hv-list > li (0,1,1) and zeroed that
   padding, dropping the dash straight onto the first characters on 41 rows.
   Chasing page-scoped overrides one at a time is how that rule got there in the
   first place, so the reservation is asserted once, as a law, over the closed
   set of selectors that actually carry a marker.
   ══════════════════════════════════════════════════════════════════════════ */
:is(.hero-bullets, .checklist, .situation-list, .mistake-list, .observation-list,
    .list-tight, .hv-list, .entry-content ul) > li,
.checklist-item, .check-item {
  padding-inline-start: var(--sl-marker-col) !important;
  text-indent: 0;
}
:is(.hero-bullets, .checklist, .situation-list, .mistake-list, .observation-list,
    .list-tight, .hv-list, .entry-content ul) > li::before,
.checklist-item::before, .check-item::before {
  inset-inline-start: 0;
  width: var(--sl-marker-w);
}
/* lists that are navigation, not prose, carry no marker and reserve nothing */
:is(.site-header, .site-footer, .section-nav, .nav-pills, .hv-nav, .pill-grid,
    .breadcrumbs, .splide__list, .menu, .sub-menu) li {
  padding-inline-start: 0 !important;
}
:is(.site-header, .site-footer, .section-nav, .nav-pills, .hv-nav, .pill-grid,
    .breadcrumbs, .splide__list, .menu, .sub-menu) li::before { content: none; }


/* ══════════════════════════════════════════════════════════════════════════
   M3d — ONE TEXT ALIGNMENT PER SECTION
   A section that contains a list is a reading section: its lists and body copy
   align left, wrapped lines included. Centring is reserved for short standalone
   lines, which must opt in with .text-center.
   ══════════════════════════════════════════════════════════════════════════ */
:is(section, .section, .dark-zone, .mid-zone, .soft-zone, .stat-band):has(li)
  :is(p, li, ul, ol, dl, dd) {
  text-align: left;
}
/* PL-18 (V3.3 R2) — `.eyebrow` REMOVED from this centring list.
   It contradicted the rule directly above it: "Centring is reserved for short
   standalone lines, which must opt in with .text-center." An eyebrow does not opt
   in, yet this rule centred every eyebrow whose section merely happened to contain
   an <li> — which is why home mixed both alignments (3 eyebrows centred, 10 left,
   measured delta 452-489px from their own left-aligned headings). Alignment must
   not depend on whether a sibling list exists. Eyebrows now inherit their section's
   alignment; one that genuinely wants centring still opts in via .text-center,
   which also gets the balancing ::before rule (see ".text-center :is(.eyebrow…)"). */
:is(section, .section, .dark-zone, .mid-zone, .soft-zone):has(li)
  :is(.text-center, .stat-card, .stat-card__figure, .stat-card__label) {
  text-align: center;
}
.text-center { text-align: center; }
.stat-band :is(.stat-card, .stat-card__figure, .stat-card__label) { text-align: center; }


/* ══════════════════════════════════════════════════════════════════════════
   M3c — STRUCTURED COMPOSITIONS INSTEAD OF PROSE-DUMP CARDS
   One subject per card; two parallel subjects sit side by side; the sentence
   that distinguishes them spans the full width underneath, where it reads as a
   conclusion rather than a fifth bullet.
   ══════════════════════════════════════════════════════════════════════════ */
.compare-duo {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sl-4);
  align-items: stretch;
}
.compare-duo > * { grid-column: span 12; }
@media (min-width: 900px) { .compare-duo > * { grid-column: span 6; } }

.subject-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--sl-white, #ffffff);
  border: 1px solid var(--sl-border, #e5e7eb);
  border-top: 3px solid var(--sl-mint-deep, #00CC66);
  border-radius: var(--sl-r);
  padding: var(--sl-5);
}
.subject-card__title {
  font-size: var(--sl-t-lg);
  font-weight: 650;
  line-height: var(--sl-lh-head);
  color: var(--sl-ink, #0D1B2E);
  margin: 0 0 var(--sl-3);
}
.subject-card > :last-child { margin-bottom: 0; }
.subject-card ul { margin: 0; }

/* the full-width line that distinguishes the two subjects */
.distinction-callout {
  margin-top: var(--sl-4);
  padding: var(--sl-5);
  background: var(--sl-tint, #F0FEF7);
  border: 1px solid var(--sl-tint-line, #DEFCEE);
  border-inline-start: 3px solid var(--sl-mint-deep, #00CC66);
  border-radius: var(--sl-r);
}
.distinction-callout > :last-child { margin-bottom: 0; }
.distinction-callout__label {
  display: block;
  font-size: var(--sl-t-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sl-accent-text, #067A45);
  margin-bottom: var(--sl-2);
}
/* the shared premise that sets up two scenarios */
.premise-band {
  padding: var(--sl-4) var(--sl-5);
  background: var(--sl-surface, #f8fafc);
  border-radius: var(--sl-r);
  margin-bottom: var(--sl-4);
}
.premise-band > :last-child { margin-bottom: 0; }

:is(.dark-zone, .mid-zone) .subject-card {
  background: var(--sl-slate, #1A2B3C);
  border-color: rgba(255,255,255,.12);
}
:is(.dark-zone, .mid-zone) .subject-card__title { color: var(--sl-white, #ffffff); }
:is(.dark-zone, .mid-zone) .distinction-callout {
  background: rgba(0,255,127,.06);
  border-color: rgba(0,255,127,.22);
}
:is(.dark-zone, .mid-zone) .distinction-callout__label { color: var(--sl-mint, #00FF7F); }


/* ══════════════════════════════════════════════════════════════════════════
   M3e — DUAL-PERSON CLOSING ZONE (county pages)
   The mortgage strategist and the county Realtor are two people, so they get
   two cards. Text and licences are carried over verbatim from the agent card
   that was already on the page — nothing new is claimed here.
   AVATAR RULE (CLAUDE.md): the img in each card is THAT person's file.
   ══════════════════════════════════════════════════════════════════════════ */
.closing-duo {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--sl-4);
  align-items: stretch;
}
.closing-duo > * { grid-column: span 12; }
@media (min-width: 700px) { .closing-duo > * { grid-column: span 6; } }

.closing-person {
  display: flex;
  flex-direction: column;
  gap: var(--sl-3);
  height: 100%;
  padding: var(--sl-5);
  background: var(--sl-slate, #1A2B3C);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--sl-r-lg);
  text-align: left;
}
.closing-person__head { display: flex; align-items: center; gap: var(--sl-3); }
.closing-person__avatar {
  width: 72px; height: 72px; flex: 0 0 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--sl-mint, #00FF7F);
  margin: 0;
}
.closing-person__name {
  font-size: var(--sl-t-lg);
  font-weight: 700;
  line-height: 1.2;
}
.closing-person__role {
  display: block;
  font-size: var(--sl-t-cap);
  margin-top: 2px;
}
.closing-person__lic {
  font-size: var(--sl-t-sm);
  letter-spacing: .02em;
}
/* Colour is scoped to the band, deliberately. The inherited
   `.agent-card.dark-zone :is(p,li,span,div)` rule is (0,2,1); an unscoped
   `.closing-person__name` is (0,1,0) and loses, which rendered every name and role in
   navy body text ON the navy card — legible only as a smudge. Scoping to the band the
   component always lives in takes these to (0,3,0) and wins honestly, without
   !important. */
.agent-card.dark-zone .closing-person__name,
.agent-card.dark-zone .closing-person__name a { color: var(--sl-white, #ffffff); }
.agent-card.dark-zone .closing-person__role { color: var(--sl-body-dark, #C7D3E1); }
.agent-card.dark-zone .closing-person__lic { color: var(--sl-muted-dark, #9FB0C3); }
.agent-card.dark-zone .closing-person__lic strong { color: var(--sl-white, #ffffff); font-weight: 600; }
.closing-person .btn-primary { margin-top: auto; align-self: flex-start; }

/* ══════════════════════════════════════════════════════════════════════════
   V3.3 M2a-FIX — THE 12-TRACK BASE AND THE SPAN BANDS MUST COVER THE SAME
   SELECTORS.  Found on /california-reverse-mortgages/homesafe.

   M2a converted the base rule at the top of the GRIDS section from
   `repeat(auto-fit, minmax(min(260px,100%),1fr))` to `repeat(12, minmax(0,1fr))`
   for a 44-selector list, but the three span bands that follow were written for
   a 25-selector subset. Any class in the base list and NOT in a band therefore
   kept 12 tracks while its children never got a span — so each child occupied
   ONE track: 69px at 1440, 5px at 390. Body copy inside wrapped to one character
   per line. `.grid-3` alone is 107 grids on 67 pages.

   This is worse than the phantom-track bug it replaced, and it is invisible to a
   code read of either rule on its own: each is correct, the defect is that their
   selector lists disagree. The gate is `scripts/v33_grid_probe.mjs`, which fails
   any grid whose children span 1 of 12 tracks.

   Column count is C=3, matching the .card-grid family these aliases have always
   been styled with — and matching the pre-M2a 260px auto-fit floor, which
   resolved to 3 filled tracks (plus the phantom 4th) in a 1140px container.
   The bands are the SAME mutually-exclusive bands used above; overlapping them
   would re-open the specificity trap documented there.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 559.98px) {
  :is(.grid-3, .path-grid, .tool-grid, .use-case-grid, .use-grid, .program-grid,
      .spec-grid, .factor-grid, .feature-grid, .benefits-grid, .decision-grid,
      .decisions-grid, .resource-grid, .silo-grid, .link-grid, .hub-grid,
      .related-grid, .product-grid, .asset-grid, .payout-grid, .scenario-grid,
      .who-grid, .sit-grid, .situation-grid, .doc-grid, .service-grid,
      .solve-authority-grid, .authority-grid) > * {
    grid-column: span 12;
  }
}

@media (min-width: 560px) and (max-width: 899.98px) {
  :is(.grid-3, .path-grid, .tool-grid, .use-case-grid, .use-grid, .program-grid,
      .spec-grid, .factor-grid, .feature-grid, .benefits-grid, .decision-grid,
      .decisions-grid, .resource-grid, .silo-grid, .link-grid, .hub-grid,
      .related-grid, .product-grid, .asset-grid, .payout-grid, .scenario-grid,
      .who-grid, .sit-grid, .situation-grid, .doc-grid, .service-grid,
      .solve-authority-grid, .authority-grid) > * {
    grid-column: span 6;
  }
  :is(.grid-3, .path-grid, .tool-grid, .use-case-grid, .use-grid, .program-grid,
      .spec-grid, .factor-grid, .feature-grid, .benefits-grid, .decision-grid,
      .decisions-grid, .resource-grid, .silo-grid, .link-grid, .hub-grid,
      .related-grid, .product-grid, .asset-grid, .payout-grid, .scenario-grid,
      .who-grid, .sit-grid, .situation-grid, .doc-grid, .service-grid,
      .solve-authority-grid, .authority-grid)
    > :last-child:nth-child(2n+1) { grid-column: span 12; }
}

@media (min-width: 900px) {
  :is(.grid-3, .path-grid, .tool-grid, .use-case-grid, .use-grid, .program-grid,
      .spec-grid, .factor-grid, .feature-grid, .benefits-grid, .decision-grid,
      .decisions-grid, .resource-grid, .silo-grid, .link-grid, .hub-grid,
      .related-grid, .product-grid, .asset-grid, .payout-grid, .scenario-grid,
      .who-grid, .sit-grid, .situation-grid, .doc-grid, .service-grid,
      .solve-authority-grid, .authority-grid) > * {
    grid-column: span 4;
  }
  /* one left over → it takes the whole row */
  :is(.grid-3, .path-grid, .tool-grid, .use-case-grid, .use-grid, .program-grid,
      .spec-grid, .factor-grid, .feature-grid, .benefits-grid, .decision-grid,
      .decisions-grid, .resource-grid, .silo-grid, .link-grid, .hub-grid,
      .related-grid, .product-grid, .asset-grid, .payout-grid, .scenario-grid,
      .who-grid, .sit-grid, .situation-grid, .doc-grid, .service-grid,
      .solve-authority-grid, .authority-grid)
    > :last-child:nth-child(3n+1) { grid-column: span 12; }
  /* two left over → half each (this also covers a grid of exactly two) */
  :is(.grid-3, .path-grid, .tool-grid, .use-case-grid, .use-grid, .program-grid,
      .spec-grid, .factor-grid, .feature-grid, .benefits-grid, .decision-grid,
      .decisions-grid, .resource-grid, .silo-grid, .link-grid, .hub-grid,
      .related-grid, .product-grid, .asset-grid, .payout-grid, .scenario-grid,
      .who-grid, .sit-grid, .situation-grid, .doc-grid, .service-grid,
      .solve-authority-grid, .authority-grid)
    > :nth-last-child(2):nth-child(3n+1),
  :is(.grid-3, .path-grid, .tool-grid, .use-case-grid, .use-grid, .program-grid,
      .spec-grid, .factor-grid, .feature-grid, .benefits-grid, .decision-grid,
      .decisions-grid, .resource-grid, .silo-grid, .link-grid, .hub-grid,
      .related-grid, .product-grid, .asset-grid, .payout-grid, .scenario-grid,
      .who-grid, .sit-grid, .situation-grid, .doc-grid, .service-grid,
      .solve-authority-grid, .authority-grid)
    > :nth-last-child(2):nth-child(3n+1) ~ * { grid-column: span 6; }
  /* exactly four reads better as a 2x2 than 3 + 1 */
  :is(.grid-3, .path-grid, .use-case-grid, .program-grid, .spec-grid,
      .feature-grid, .benefits-grid, .decision-grid, .resource-grid,
      .scenario-grid, .who-grid, .service-grid):has(> :last-child:nth-child(4)) > * {
    grid-column: span 6;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   V3.3 M2a-FIX (2) — THE 26 INLINE GRIDS REWRITTEN BY M2a HAVE NO SPAN RULE.

   M2a rewrote 26 inline `repeat(auto-fit, minmax(Npx,1fr))` declarations in page
   content to `repeat(12,minmax(0,1fr))` — the container only. A class-based grid
   picks its spans up from the bands above; these carry no class, so every child
   took ONE track and collapsed exactly like .grid-3 did (1 character per line).
   26 grids on 17 pages: the San Diego reverse / second-mortgage / decisions
   pages and 5 insights posts.

   Fixed here rather than in the CSVs because it is a layout defect, not a content
   defect: no page copy needs to change, and an attribute selector reaches inline
   markup that no class-based rule can. Scoped with :not([class]) — one of the 26
   (san-diego-county/ways-to-sell-your-home) also carries .grid-2, and without the
   guard these rules and .grid-2's own bands both matched it at (0,2,0), so source
   order handed it spans of 4/4/12: two narrow cards and a full-width third. A grid
   with a class is governed by its class; this is the fallback for the ones without.
   Columns follow the same C=3 card default
   as the rest of the system, with the child count choosing 2-up where that reads
   better — the original inline floors (250px, 260px, 340px) all resolved to 3
   columns in a 1140px container, so this preserves the intended shape.
   ══════════════════════════════════════════════════════════════════════════ */

[style*="repeat(12,minmax(0,1fr))"]:not([class]) > *,
[style*="repeat(12, minmax(0, 1fr))"]:not([class]) > * { grid-column: span 12; }

@media (min-width: 560px) and (max-width: 899.98px) {
  :is([style*="repeat(12,minmax(0,1fr))"]:not([class]), [style*="repeat(12, minmax(0, 1fr))"]:not([class])) > * {
    grid-column: span 6;
  }
  :is([style*="repeat(12,minmax(0,1fr))"]:not([class]), [style*="repeat(12, minmax(0, 1fr))"]:not([class]))
    > :last-child:nth-child(2n+1) { grid-column: span 12; }
}

@media (min-width: 900px) {
  :is([style*="repeat(12,minmax(0,1fr))"]:not([class]), [style*="repeat(12, minmax(0, 1fr))"]:not([class])) > * {
    grid-column: span 4;
  }
  :is([style*="repeat(12,minmax(0,1fr))"]:not([class]), [style*="repeat(12, minmax(0, 1fr))"]:not([class]))
    > :last-child:nth-child(3n+1) { grid-column: span 12; }
  :is([style*="repeat(12,minmax(0,1fr))"]:not([class]), [style*="repeat(12, minmax(0, 1fr))"]:not([class]))
    > :nth-last-child(2):nth-child(3n+1),
  :is([style*="repeat(12,minmax(0,1fr))"]:not([class]), [style*="repeat(12, minmax(0, 1fr))"]:not([class]))
    > :nth-last-child(2):nth-child(3n+1) ~ * { grid-column: span 6; }
  /* exactly two, or exactly four, read as halves / a 2x2 */
  :is([style*="repeat(12,minmax(0,1fr))"]:not([class]), [style*="repeat(12, minmax(0, 1fr))"]:not([class])):has(> :last-child:nth-child(2)) > *,
  :is([style*="repeat(12,minmax(0,1fr))"]:not([class]), [style*="repeat(12, minmax(0, 1fr))"]:not([class])):has(> :last-child:nth-child(4)) > * {
    grid-column: span 6;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   V3.3 M4 — --icon-equity REDRAWN. It was the same house as --icon-home.

   Both tokens were roof `M4 11 12 4l8 7` + body `M6 10.5V20h12v-9.5`; the only
   difference was a 3.2-unit floating box against a 5-unit door. At the 20px the
   chip renders them at, that is not a difference — which is why the home page
   definitions grid read as four repeats of one house glyph even after each card
   was given its own concept. A library of 16 concepts holding two identical
   drawings cannot express "distinct icon per card", so the drawing is fixed
   rather than the assignment worked around.

   Equity keeps the house — it IS about the home — and gains the value rising
   inside it. Same language as the rest of the set: 24x24, 1.5 stroke, round
   caps and joins, no fill, currentColor through mask-image.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --icon-equity: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%2011%2012%204l8%207%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M6%2010.5V20h12v-9.5%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M12%2018.2v-5.6%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9.8%2014.8%2012%2012.6l2.2%202.2%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}


/* ══════════════════════════════════════════════════════════════════════════
   V3.3 PUNCH — P2 MUST-FIX (2026-07-31)
   Appended, never re-emitted: an edit made in place above can be silently
   overridden by a twin further down (CLAUDE.md, editing rule 1).
   Every fix below was measured on the rendered page first; the measurement is
   quoted with it so a later reader can re-run it.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── PL-61 — ONE MARKER PER CHECK ITEM ─────────────────────────────────────
   Measured on ul.checks li::before: content "✓ " AND background #00CC66 on a
   10x2 box. Two rules were writing the SAME pseudo-element — the brand dash
   rule paints the box, the per-post rule fills it with a glyph — and a 17px
   check cannot sit inside a 2px-high box, so it hangs below it and the item
   reads as two stacked markers.
   The ruling: keep ONE theme-matched check, drop the dash for these lists. */
.entry-content ul.checks > li::before,
.entry-content .checks > li::before,
ul.checks > li::before {
  content: "\2713";
  background: none;
  width: auto;
  height: auto;
  top: 0;
  line-height: inherit;
  color: var(--sl-mint-deep);
  font-weight: 700;
}
:is(.dark-zone, .mid-zone) ul.checks > li::before { color: var(--sl-mint); }

/* ── PL-06 — THE 12-TRACK BASE MUST NOT PAY 11 DESKTOP GAPS AT 390 ─────────
   Measured at 390 on the home page: .split-2 kept `repeat(12, minmax(0,1fr))`
   with a 48px gap, so 11 gaps = 528px alone against a 358px container. Every
   track resolved to 0px and each child rendered 528px wide — THE SOLVE WAY
   heading, blockquote, body copy and the founder photos all cut off at the
   right edge. .card-grid escaped only because its gap is 24px (11 x 24 = 264,
   which still fits). That is luck, not a system.
   Below 560px every one of these grids is a single column by ruling, so it
   gets a single track: no internal gaps, nothing to overflow, and the row-gap
   between stacked children is unchanged. */
@media (max-width: 559.98px) {
  :is(.grid-2, .pivot-grid, .split-2, .dual-authority, .dual-auth, .hv-list,
      .hero-section--with-form, .solve-hero-grid,
      .card-grid, .team-grid, .checks, .hv-changed-grid, .hv-see-grid,
      .solve-intent-grid, .solve-path-grid, .solve-entity-grid,
      .solve-definition-grid, .solve-service-grid, .solve-county-hub-grid) {
    grid-template-columns: minmax(0, 1fr);
  }
  :is(.grid-2, .pivot-grid, .split-2, .dual-authority, .dual-auth, .hv-list,
      .hero-section--with-form, .solve-hero-grid,
      .card-grid, .team-grid, .checks, .hv-changed-grid, .hv-see-grid,
      .solve-intent-grid, .solve-path-grid, .solve-entity-grid,
      .solve-definition-grid, .solve-service-grid, .solve-county-hub-grid) > * {
    grid-column: auto;
  }
  /* the two-up group keeps two tracks — again explicit, so its span rules can
     never generate implicit tracks and inherit their gaps */
  :is(.grid-4, .market-stats, .stats-bar, .stat-grid, .pill-grid, .hv-county-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  :is(.grid-4, .market-stats, .stats-bar, .stat-grid, .pill-grid, .hv-county-grid) > * {
    grid-column: auto;
  }
  :is(.grid-4, .market-stats, .stats-bar, .stat-grid, .pill-grid, .hv-county-grid)
    > :last-child:nth-child(2n+1) { grid-column: 1 / -1; }
}

/* ── PL-21 — A DARK CARD IS A DARK GROUND ─────────────────────────────────
   .auth-card is painted var(--sl-slate) by the card-surface rules, but the
   authority-text tokens treated it as a LIGHT card: the role line resolved to
   --sl-body #22364B on #1A2B3C — measured contrast 1.17:1, i.e. invisible.
   Same defect, different route, for headings on any dark band that happens to
   sit inside a card wrapper: `:is(.card,.tool-card,…) :is(h2,h3,h4)` painted
   the compliance footer's H4 --sl-ink on --sl-ink, measured 1.00:1.
   The surface decides the text colour — not the ancestor that wraps it. */
.entry-content-wrap :is(.auth-card, .card--dark, .tool-card.tool-blue),
.entry-content-wrap :is(.auth-card, .card--dark, .tool-card.tool-blue) :is(p, li, span, div) {
  color: var(--sl-body-dark);
}
.entry-content-wrap :is(.auth-card, .card--dark, .tool-card.tool-blue)
  :is(.auth-role, .auth-title, .authority-meta, .authority-body, .team-role,
      .card-trust-role, .agent-card__meta, .team-member-info, .specialist-note) {
  color: var(--sl-muted-dark);
}
.entry-content-wrap :is(.auth-card, .card--dark, .tool-card.tool-blue)
  :is(.auth-creds, .authority-nmls, .solve-auth-creds) { color: var(--sl-mint); }
.entry-content-wrap :is(.auth-card, .card--dark, .tool-card.tool-blue)
  a:not([class*="btn"]) { color: var(--sl-mint); }
:is(.dark-zone, .mid-zone, .compliance-footer, .cta-box:not(.cta-box--alt):not(.cta-box--inline),
    .cta-band, .agent-card.dark-zone, .auth-card, .card--dark, .tool-card.tool-blue)
  :is(h1, h2, h3, h4) { color: var(--sl-white); }

/* ── PL-20 — STACKED DARK SLABS SHARE ONE WIDTH ───────────────────────────
   Measured at 1440 on all three Riverside samples: .cta-box 1342 @x49,
   .tool-card.tool-blue 909 @x49 (a dead right third), .compliance-footer
   1275 @x49 — three widths touching, with the correctly contained .auth-card
   at 1140 @x150 above them.
   Cause: those three are NOT direct children of .entry-content — the ported
   markup leaves the tail of the page inside a stray `div.tool-card.tool-gray`
   wrapper — so the band rule in section (12), which is scoped
   `.entry-content > …`, never reached them and each fell back to whatever the
   flex wrapper gave it. Contain them on the same 1140 measure as everything
   else in the stack; scoped to that wrapper so the real full-bleed bands
   elsewhere are untouched. */
.tool-card.tool-gray > :is(.cta-box, .cta-band, .solve-final-cta,
                           .compliance-footer, .tool-card.tool-blue) {
  width: auto;
  max-width: 1140px;
  margin-inline: auto;
  align-self: stretch;
  box-sizing: border-box;
}

/* ── PL-34 — OFF-PALETTE INLINE SURFACE — STOPGAP REMOVED (V3.3 R1) ───────
   Was: `.entry-content-wrap [style*="fff7ed"] { background: var(--sl-tint)
   !important }`, a punch-cycle hack that repainted the amber/cream GHL tint
   from the stylesheet because the content still carried it inline.
   The V3.3 R1 colour remap applied #fff7ed -> #F0FEF7 to the CONTENT (117
   occurrences, all San Diego), so the selector matched nothing and the
   !important could only ever hide a future regression. Verified 0 `fff7ed`
   in the DB dump before removal. Do not reinstate: if the amber tint comes
   back, that is a content regression and the audit must be allowed to fail. */

/* ── PL-22 — THE OPENING HERO IS A DARK BAND ──────────────────────────────
   The Riverside divorce hero measured #ffffff while its sibling county pages
   open on #0D1B2E. It is not a one-page miss: `.hero-box` IS the opening
   element on 283 pages of the corpus, and every one of them opens light.
   Converted at the hero POSITION only — first child of the entry content —
   so the same class used further down a page as an ordinary light card is
   untouched. SCOPE NOTE: this lands on ~283 pages; see PUNCH-REPORT.md. */
.entry-content > .hero-box:first-child,
.entry-content-wrap > .hero-box:first-child,
.entry-content > *:first-child > .hero-box:first-child {
  background: var(--sl-ink);
  border-color: var(--sl-border-ink);
  color: var(--sl-body-dark);
}
.entry-content > .hero-box:first-child :is(h1, h2, h3, h4, strong),
.entry-content-wrap > .hero-box:first-child :is(h1, h2, h3, h4, strong),
.entry-content > *:first-child > .hero-box:first-child :is(h1, h2, h3, h4, strong) {
  color: var(--sl-white);
}
.entry-content > .hero-box:first-child :is(p, li, span, div),
.entry-content-wrap > .hero-box:first-child :is(p, li, span, div),
.entry-content > *:first-child > .hero-box:first-child :is(p, li, span, div) {
  color: var(--sl-body-dark);
}
.entry-content > .hero-box:first-child a:not([class*="btn"]),
.entry-content-wrap > .hero-box:first-child a:not([class*="btn"]),
.entry-content > *:first-child > .hero-box:first-child a:not([class*="btn"]) {
  color: var(--sl-mint);
}

/* ── PL-22 (cont.) — the hero was AUTHORED dark; give its parts their colours ─
   The stored markup proves the intent: the secondary CTA carries
   `background:rgba(255,255,255,0.1); color:#fff; border:1px solid rgba(255,255,255,0.2)`
   — a translucent-white outline button, which only reads on a dark ground. Two
   rules had adapted it to the light box it was wrongly rendering on:
     • `:is(a,span,div)[style*="background:rgba(255,255,255"] {color:--sl-ink!}`
       treated a translucent white surface as a LIGHT one — measured 1.00:1 once
       the hero went dark again;
     • .eyebrow-text kept --sl-muted #6B7C93, measured 4.06:1 on #0D1B2E.
   Both are re-excepted inside the opening hero only. */
.entry-content > .hero-box:first-child :is(a, span, div)[style*="background:rgba(255,255,255"],
.entry-content-wrap > .hero-box:first-child :is(a, span, div)[style*="background:rgba(255,255,255"],
.entry-content > .hero-box:first-child :is(a, span, div)[style*="background: rgba(255,255,255"],
.entry-content-wrap > .hero-box:first-child :is(a, span, div)[style*="background: rgba(255,255,255"] {
  color: #fff !important;
  border-color: rgba(255,255,255,.28) !important;
}
.entry-content > .hero-box:first-child .eyebrow-text,
.entry-content-wrap > .hero-box:first-child .eyebrow-text,
.entry-content > .hero-box:first-child :is(.hero-eyebrow, .hero-eyebrow-container),
.entry-content-wrap > .hero-box:first-child :is(.hero-eyebrow, .hero-eyebrow-container) {
  color: rgba(255,255,255,.72);
}

/* ── PL-20 (cont.) — a flex item does not grow into its max-width ────────────
   `width:auto` left .tool-card.tool-blue at its content width (909px, centred at
   x266) and .cta-box at the wrapper edge. In a column flex container the item
   needs to be told to fill before the max-width can cap it. */
.tool-card.tool-gray > :is(.cta-box, .cta-band, .solve-final-cta,
                           .compliance-footer, .tool-card.tool-blue) {
  width: 100%;
  align-self: center;
}

/* ── PL-22 (cont. 2) — the eyebrow token is set with !important from a :where() ─
   `:where(.eyebrow, .eyebrow-text, …) { color: var(--sl-muted) !important }` —
   zero specificity, but !important still beats a normal declaration, so the
   hero eyebrow stayed #6B7C93 (measured 4.06:1 on the dark hero). Matched with
   !important, scoped to the opening hero. */
.entry-content > .hero-box:first-child :is(.eyebrow, .eyebrow-text, .hero-eyebrow),
.entry-content-wrap > .hero-box:first-child :is(.eyebrow, .eyebrow-text, .hero-eyebrow) {
  color: rgba(255,255,255,.72) !important;
}
.entry-content > .hero-box:first-child .eyebrow-text a,
.entry-content-wrap > .hero-box:first-child .eyebrow-text a {
  color: var(--sl-mint) !important;
}

/* ── PL-21 (site-wide sweep) — the current-page state on the dark footer ──────
   Same token misuse the punch row describes, found by re-running the dark-ground
   contrast sweep after the fix: Kadence paints .current-menu-item with the link
   palette blue #2B6CB0, measured 3.62:1 on the #0D1B2E footer. */
.site-footer :is(.current-menu-item, .current_page_item) > a,
:is(.site-footer, .footer-widget-area) :is(.current-menu-item, .current_page_item) > a {
  color: var(--sl-mint);
}


/* ══════════════════════════════════════════════════════════════════════════
   V3.3 PUNCH — P3 SHOULD-FIX (2026-07-31)
   Same discipline as the P2 block: measured first, measurement quoted.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── PL-65 — a filled button is not a body link ───────────────────────────
   /team hero: .tm-cta measured #00CC66 underlined on the #00FF7F fill — 1.59:1,
   and it reads as a link inside a button. The nav "Book a Call" beside it is
   already navy-on-mint at 12.87:1; this brings the primary CTA to the same. */
.tm-cta,
.entry-content-wrap :is(a, button)[class*="cta"][style*="background:#00FF7F"],
.entry-content-wrap :is(a, button)[class*="cta"][style*="background:#00ff7f"] {
  color: var(--sl-ink);
  text-decoration: none;
}

/* ── PL-69 (same treatment, taste-call adjacent) is NOT applied — the pill
   labels there are a listed taste-call. Only the filled primary is corrected. */

/* ── PL-62 — the avatar sits above its own column ─────────────────────────
   /team at 1440: .tm-card is text-align:center but its 110px headshot measured
   x=195 in a card at x=170 — hard against the padding edge, because a block
   image ignores text-align. At 390 the same card centres, which is what made it
   read as a desktop-only bug. */
.tm-card > img,
.tm-card :is(.tm-avatar, .tm-photo, img[class*="headshot"]) {
  margin-inline: auto;
  display: block;
}

/* ── PL-63 / PL-64 — the KPI strip is a grid of equals, not a wrapped flex ──
   Measured at 1440: .kpi is display:flex, so the five tiles take their content
   widths and wrap 2 + 2 + 1, leaving the last tile alone with a dead right two
   thirds. At 390 the same flex gives five different widths and two different
   internal layouts. One grid, equal tracks, one internal layout at both ends. */
.kpi {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sl-3);
  align-items: stretch;
}
@media (min-width: 700px) {
  .kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .kpi { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.kpi > .tag {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  width: auto;
  text-align: left;
}
@media (max-width: 699.98px) {
  /* on one column a label-above-value stack wastes the width — put the value
     on the right of its label, the same shape for every pill */
  .kpi > .tag { flex-direction: row; align-items: baseline; justify-content: space-between; gap: var(--sl-2); }
}

/* ── PL-41 — a list inside a band is prose, and prose is left-aligned ──────
   /orange-county/loan-programs/fha at 1440: the two Down Payment bullets are
   text-align:center with padding-left:24px, so the mint marker sits at the far
   left margin of a 1140px line while its text is centred in the middle of it.
   M3d already rules that a section containing a list is a reading section. */
:is(.cta-box, .cta-band, .solve-final-cta, .dark-zone, .mid-zone) :is(ul, ol),
:is(.cta-box, .cta-band, .solve-final-cta, .dark-zone, .mid-zone) :is(ul, ol) > li {
  text-align: left;
}
:is(.cta-box, .cta-band, .solve-final-cta, .dark-zone, .mid-zone) :is(ul, ol) {
  max-width: 62ch;
  margin-inline: auto;
}

/* ── PL-28 — sub-nav pills size to content and wrap ───────────────────────
   /riverside-county/loan-programs/fha at 1440: the five pills measured
   235/232/224/228/222 with the last one ending at x=1480 — 40px past the
   viewport. They no longer truncate mid-word, but the row still runs off the
   right edge because the strip cannot wrap. */
.section-nav, .nav-pills, .section-nav__inner {
  flex-wrap: wrap;
}
.section-nav .pill, .nav-pills .pill, .section-nav__inner .pill {
  flex: 0 1 auto;
  white-space: normal;
  max-width: 100%;
}

/* ── PL-14 — seven chips, no orphan row ───────────────────────────────────
   /california-home-value-estimate: .hv-see-grid holds 7 chips on the 12-track
   base at 3-up, so the seventh landed alone and the fill rule stretched it to
   782px beside a dead two thirds. Seven divides cleanly as 4 + 3 on 12 tracks:
   four span-3 chips, then three span-4 chips — both rows full, no chip left
   standing alone. */
.hv-see-grid:has(> :last-child:nth-child(7)) > :nth-child(-n+4) { grid-column: span 3; }
.hv-see-grid:has(> :last-child:nth-child(7)) > :nth-child(n+5)  { grid-column: span 4; }

/* ── PL-16 — the agent card needs a floor ─────────────────────────────────
   Measured: the tel: button's bottom edge sits 2px above the card's own bottom
   edge (padding-bottom: 0), with the light byline band starting immediately
   below it. */
.entry-content-wrap .agent-card:is(.dark-zone, [class*="dark"]),
.entry-content > .agent-card {
  padding-bottom: var(--sl-6);
}

/* ── PL-65 (cont.) — the link-language rule outranks a bare class ──────────
   `.tm-cta` already declares navy-on-mint at (0,2,1); what paints it #00CC66 and
   underlines it is the site link rule, whose :not() chain lifts it to (0,6,1):
   `.entry-content a:not([class*="btn"]):not([class*="button"]):not(.cta)…`.
   `.tm-cta` contains "cta" but is not `.cta`, so it never matched the exception.
   Matched at the same shape plus the class, and the ghost variant is excluded —
   it is white-on-transparent on a dark hero and must stay that way. */
.entry-content a.tm-cta:not(.tm-cta--ghost):not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta):not(.pill),
.entry-content-wrap a.tm-cta:not(.tm-cta--ghost):not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta):not(.pill) {
  color: var(--sl-ink);
  text-decoration: none;
}

/* ── PL-63 / PL-64 (cont.) — the per-post rule owns .kpi at (0,2,1) ────────
   `:is(body.postid-1902) .kpi {display:flex}` beat the plain `.kpi` grid, so the
   tiles kept their content widths and still wrapped 2+2+1. Re-stated above that
   weight; the tile rule likewise (`:is(body.postid-1902) .kpi .tag` is (0,3,1)). */
.entry-content-wrap .entry-content .kpi {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sl-3);
  align-items: stretch;
  text-align: left;
}
@media (min-width: 700px) {
  .entry-content-wrap .entry-content .kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .entry-content-wrap .entry-content .kpi { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.entry-content-wrap .entry-content .kpi > .tag {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  width: auto;
  margin: 0;
  text-align: left;
}
@media (max-width: 1099.98px) {
  .entry-content-wrap .entry-content .kpi > .tag {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sl-2);
  }
}

/* ── PL-54 — the guide comparison pairs join the card system ──────────────
   `/mortgage-guides/heloc-vs-hei` builds its three comparison pairs from
   `.compare-duo > .subject-card`, a class the design system never knew about:
   plain white, a hairline top border, a serif title and body copy — no chip, no
   accent surface, no title hierarchy, while every other card on the site has
   all three. The icon sweep could not have reached them either; its CARDS
   selector did not list the class (now added, so the mapper themes them from
   their own headings like every other card).
   Same surface, same chip geometry, same title treatment as (c)/(a)/(b) above —
   restated here rather than by editing six selector lists in place. */
.subject-card {
  position: relative;
  background: #F7FFFB;
  border: 1px solid #DEFCEE;
  border-radius: var(--sl-r, 12px);
  padding: var(--sl-5);
}
.subject-card[data-icon]::before {
  content: '';
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #DEFCEE;
  border: 1px solid #C7F5E1;
  margin: 0 0 var(--sl-3);
  -webkit-mask-image: none; mask-image: none;
}
.subject-card[data-icon]::after {
  content: '';
  position: absolute;
  top: var(--sl-5); left: var(--sl-5);
  width: 42px; height: 42px;
  background-color: var(--sl-mint-deep);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: 22px 22px;   mask-size: 22px 22px;
  pointer-events: none;
}
.subject-card :is(h2, h3, h4, .subject-card__title) {
  font-family: var(--sl-font-body);
  font-size: 1.19rem;
  line-height: 1.25;
  font-weight: 650;
  letter-spacing: -.012em;
  color: var(--sl-ink);
  margin: 0 0 var(--sl-2);
}
.subject-card[data-icon] :is(h2, h3, h4, .subject-card__title) { margin-top: 0; }
.subject-card p { font-size: var(--sl-t-sm); line-height: 1.6; }
.subject-card.card--accent-fallback {
  background: #F0FEF7;
  border-left: 3px solid var(--sl-mint-deep);
}
@media (max-width: 560px) {
  .subject-card { padding: var(--sl-4); }
  .subject-card[data-icon]::after { top: var(--sl-4); left: var(--sl-4); }
}

/* ── PL-22 (cont. 3) — every eyebrow variant in the opening hero ───────────
   Sweeping the conversion across non-sample pages found a second eyebrow shape:
   `.hero-eyebrow > .hero-eyebrow-label` on the decisions template, still
   --sl-muted #6B7C93 and measured 4.06:1 on the dark hero. Matched by class
   prefix so a third variant cannot slip through the same gap. */
.entry-content > .hero-box:first-child [class*="eyebrow"],
.entry-content-wrap > .hero-box:first-child [class*="eyebrow"] {
  color: rgba(255,255,255,.72) !important;
}
.entry-content > .hero-box:first-child [class*="eyebrow"] a,
.entry-content-wrap > .hero-box:first-child [class*="eyebrow"] a {
  color: var(--sl-mint) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   REVIEWS BAND — the GHL / reputationhub widget's closing dark zone
   (REVIEWS, 2026-07-31)

   APPENDED, never re-emitted (CLAUDE.md editing rule 1).

   The band is `.reviews-band.dark-zone`, so the `--sl-ink` ground and the on-dark
   text colours come from the existing `.dark-zone` rules. Three things ARE
   band-specific, and each one is here because the first build measured wrong:

   1. THE BLEED CANNOT BE INHERITED. `.dark-zone`'s full-bleed is
      `margin-inline: -gutter; width: 100% + 2*gutter`, which is correct only when
      the parent is the gutter-inset `.entry-content` (1392px inside 1440). The
      band is appended by a the_content filter, and on pages whose ported markup
      has unbalanced divs WordPress puts the tail OUTSIDE `.entry-content`, as a
      child of the already-full-width `.entry-content-wrap`. Measured on
      /riverside-county before this rule: band x=-24 w=1488 on a 1440 viewport —
      bleeding a second time, 48px wider than the screen. The offset is therefore
      declared per parent, not inherited.

   2. NO NEGATIVE BOTTOM MARGIN. The site footer is itself rgb(13,27,46) —
      measured, the same value `--sl-ink` resolves to and the same value the widget
      paints its own ground with — so band -> footer is already one continuous dark
      zone with no seam to close. The first build pulled the band 24px INTO the
      footer trying to close a gap that was not there. Measured seam is 0px.

   3. THE RESERVE IS DECLARED, NOT ANIMATED, AND NEVER RELEASED. The vendor loader
      sets the iframe's height from a postMessage after its content lays out, so
      the box grows late. Measured content heights: 896px in a 1140px slot, 2849px
      in a 358px slot — mobile is 3x taller, so one min-height cannot serve both.
      The first build reserved a rough value, raised it in JS and released it after
      the frame reported — which shrank the box and scored CLS 0.028-0.082. The
      per-breakpoint reserve below is the MEASURED height, so the box is the right
      size from first paint and nothing moves. `transition: min-height` was also
      removed: animating a layout property is a shift generator by definition.
      Trade-off, stated: with JavaScript disabled the reserved band is empty. That
      is the cost of CLS 0 and it is what the handoff asked for.

   The iframe is a cross-origin document — page CSS cannot reach inside it. Every
   rule below targets the frame BOX only. If the widget's own look ever clashes
   with the band, the fix is Kiyoshi's GHL restyle, not a selector here (there is
   no selector here that could work).
   ═══════════════════════════════════════════════════════════════════════════ */

.reviews-band { padding-block: var(--sl-7); }

/* (1) THE BLEED, DECLARED PER PARENT — and there are three parents, measured.
   The band is appended by a the_content filter, and where it lands in the DOM
   depends on the page's own markup: pages whose ported HTML has unbalanced divs
   push the tail out of .entry-content. Measured at 1440px, 2026-07-31:

     parent                       content box   pages
     .entry-content               1392 @ x24    home, team, about, home-value
     .entry-content-wrap          1392 @ x24    orange / san-diego / los-angeles hubs
                                  (1440 box, 24px padding)
     article.entry                1440 @ x0     riverside hub

   The first two are inset by exactly one gutter and must bleed by one gutter.
   The third is already the full width and must NOT bleed — inheriting
   `.dark-zone`'s offset there produced a band at x=-24 w=1488 on a 1440 viewport,
   48px wider than the screen. Grouping the wrapper with the article instead (the
   first attempt at this fix) left the three county hubs at 1392 @ x24 against a
   1440 footer — two touching slabs of different widths, which is the PL-20 defect
   this band is explicitly not allowed to reintroduce. */
.entry-content > .reviews-band,
.entry-content-wrap > .reviews-band {
  margin-inline: calc(var(--sl-gutter) * -1);
  width: calc(100% + var(--sl-gutter) * 2);
  max-width: none;
}
article > .reviews-band {
  margin-inline: 0;
  width: 100%;
  max-width: none;
}

/* (2) when the band DOES follow another dark band, the join must be invisible */
:is(.dark-zone, .agent-card, .cta-box--dark, .cta-band,
    .cta-box:not(.cta-box--alt):not(.cta-box--inline)) + .reviews-band {
  margin-top: 0;
  border-top: 0;
}

.reviews-band__eyebrow { margin-bottom: var(--sl-5); }

/* Only used if Kiyoshi turns the widget's own header off in GHL — the module
   emits the eyebrow alone by default, because the widget carries its own header
   and a page-side H2 would stack a duplicate. */
.reviews-band__title { margin: 0 0 var(--sl-2); }
.reviews-band__sub   { margin: 0 0 var(--sl-5); color: rgba(255,255,255,.72); }

/* (3) THE MEASURED RESERVE — a ladder, not one number.
   The widget's height is a function of its SLOT width (it reflows 4-up -> 3-up ->
   2-up -> 1-up), and the slot is the container: viewport minus 2x --sl-gutter
   (16px below 769px, 24px above), capped at 1140px. Measured inside the real
   widget at eleven slot widths, 2026-07-31:

     slot  288  328  343  366  382  398  480  620  720  976 1092 1140
     px   3383 3085 2946 2808 2647 2647 2424 2218 2171 1245 1227  895

   Each band below reserves the MAX height in that band plus ~40px of cushion (the
   AI-summary block gains a line when a new theme is added; the card count is fixed
   at 8 by the widget's own pagination). Reserving the max is what keeps CLS at 0 —
   the box can never need to grow. The cost is up to ~100px of empty navy under the
   widget at some widths, which reads as extra band padding above the footer
   because the footer is the same colour. */
.reviews-band__slot { min-height: 3430px; }                                   /* < 360 */
@media (min-width:  360px) { .reviews-band__slot { min-height: 3130px; } }
@media (min-width:  375px) { .reviews-band__slot { min-height: 2990px; } }
@media (min-width:  398px) { .reviews-band__slot { min-height: 2850px; } }
@media (min-width:  414px) { .reviews-band__slot { min-height: 2690px; } }
@media (min-width:  512px) { .reviews-band__slot { min-height: 2470px; } }
@media (min-width:  652px) { .reviews-band__slot { min-height: 2265px; } }
@media (min-width:  752px) { .reviews-band__slot { min-height: 2220px; } }
@media (min-width:  900px) { .reviews-band__slot { min-height: 1320px; }
                             .reviews-band { padding-block: var(--sl-8); } }
@media (min-width: 1188px) { .reviews-band__slot { min-height:  945px; } }
.reviews-band__slot > iframe {
  display: block;
  width: 100%;
  min-width: 100%;
  border: 0;
  /* the vendor animates `height` on the element; nothing here may fight it */
}


/* ══════════════════════════════════════════════════════════════════════════
   V3.3 STEP R2 — ADJUDICATED TASTE-CALLS (Kiyoshi ruled 2026-07-31)
   Appended, never re-emitted (CSS editing rule 1). Each block states the
   measured before-value it corrects, so a regression is recognisable.
   PL-18 is NOT here: it was a wrong entry in the M3d centring list and is
   fixed at that rule. PL-46 needed no change (see the R2 report).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── PL-56 — CALLOUT MICRO-LABELS ARE NOT INTERACTIVE ──────────────────────
   CRITICAL DISTINCTION / CALIFORNIA AVAILABILITY / COST COMPARISON /
   BOTTOM LINE measured #067A45 (--sl-accent-text) — the same green the system
   uses for links. Green is interactive-only; these are non-clickable micro
   labels and must read like the muted section eyebrows on reverse-compare.
   --sl-muted-text is the AA-safe muted (5.3:1 on white, 5.0:1 on --sl-tint). */
.distinction-callout__label {
  color: var(--sl-muted-text, #5A6B82);
}

/* ── PL-69 — A PILL LABEL IS NOT A BODY LINK ───────────────────────────────
   The four /team pills measured `text-decoration: underline` + #00CC66. The
   scoped rule that dresses them (`…page-id-2292… .tm-links a`, (0,2,2)) was
   losing to the ambient body-link rule
   `.entry-content a:not([class*="btn"])…:not(.pill)` at (0,6,1) — the pills are
   bare <a> with no class, so none of its five :not() escapes caught them.
   Specificity beats source order, so this restates the same five :not()s plus a
   container class = (0,7,1), which clears it without !important. */
.entry-content :is(.tm-links, .pill-row, .pill-group, .link-pills, .btn-group) a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta):not(.pill),
.entry-content-wrap :is(.tm-links, .pill-row, .pill-group, .link-pills, .btn-group) a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta):not(.pill) {
  text-decoration: none;
  color: var(--sl-ink);
}

/* ── PL-45 — HERO NAV CARDS GET A CHIP, AND STOP OVER-RESERVING HEIGHT ─────
   The two OC-FHA pivot cards measured 558x159 with a bare 24px glyph in an
   untreated <div> (background transparent, radius 0) while every other card set
   carries a mint chip. Content measured 92px inside 48px of padding, so ~19px
   was dead space at the bottom.
   The chip reuses the .process-step__number voice exactly (40x40, --sl-tint,
   50% radius) so nothing new enters the system. Scoped to the icon holder:
   a childless div whose only content is the svg. */
.pivot-card > div:has(> svg:only-child) {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--sl-tint, #F0FEF7);
  border-radius: 50%;
  margin-bottom: var(--sl-3);
  flex: 0 0 auto;
}
.pivot-card > div:has(> svg:only-child) > svg {
  width: 20px;
  height: 20px;
  display: block;
}
/* content-hugging: the card is as tall as what is in it, not a fixed block */
.pivot-card {
  align-self: start;
}
.pivot-card > :last-child {
  margin-bottom: 0;
}

/* ── PL-17 — FIVE CARDS, FIVE EQUAL WIDTHS ────────────────────────────────
   .hv-changed-grid measured 289/289/289/442/442: the C=3 family's "two left
   over -> half each" rule (span 6) made row 2 visibly wider than row 1, which
   read as assembled. Kiyoshi ruled equal widths.
   Same 12-track base, same span-4 as row 1, and the pair is centred (tracks
   3-6 and 7-10) so the short row reads deliberate instead of left-hanging.
   Specificity is (0,3,0) — equal to the C=3 rule it corrects — and it sits
   later in source, so it wins inside the SAME (min-width:900px) band. Reusing
   the identical band matters: an open-ended band with different specificity is
   what caused the earlier fill-rule bug (CSS editing rule 3). */
@media (min-width: 900px) {
  .hv-changed-grid > :nth-last-child(2):nth-child(3n+1) {
    grid-column: 3 / span 4;
  }
  .hv-changed-grid > :nth-last-child(2):nth-child(3n+1) ~ * {
    grid-column: span 4;
  }
}

/* ── PL-57 — THE GUIDE COMPARISON TABLE STACKS 2-UP ON PHONES ──────────────
   At 390 the 3-column table measured 326px wide with cells wrapping to 5-6
   lines (rows 134/111/158/111px tall). Below 560 each row becomes its own
   2-column block: the Factor label spans the full width as the row title, and
   the two option values sit side by side beneath it, each captioned.
   Scoped to the HELOC-vs-HEI guide (page-id-1288) because the captions name
   that table's two columns; a generic rule would caption other tables wrongly.
   `display: table !important` is asserted on this table by the table-overflow
   rule at (0,2,1), so these must also be !important AND at least as specific —
   .entry-content-wrap .table-overflow table.comparison-table is (0,3,1). */
@media (max-width: 559.98px) {
  body.page-id-1288 .entry-content-wrap .table-overflow table.comparison-table,
  body.page-id-1288 .entry-content .table-overflow table.comparison-table {
    display: block !important;
    width: 100% !important;
  }
  body.page-id-1288 .table-overflow table.comparison-table thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  body.page-id-1288 .table-overflow table.comparison-table tbody,
  body.page-id-1288 .table-overflow table.comparison-table tr {
    display: block;
    width: 100%;
  }
  body.page-id-1288 .table-overflow table.comparison-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--sl-3);
    padding: var(--sl-3) 0;
    border-bottom: 1px solid var(--sl-border, #e5e7eb);
  }
  body.page-id-1288 .table-overflow table.comparison-table tr:last-child {
    border-bottom: 0;
  }
  body.page-id-1288 .table-overflow table.comparison-table td {
    display: block;
    border: 0;
    padding: 0;
  }
  /* the Factor cell is the row's title, full width */
  body.page-id-1288 .table-overflow table.comparison-table td:first-child {
    grid-column: 1 / -1;
    font-weight: 700;
    color: var(--sl-ink);
    margin-bottom: var(--sl-2);
  }
  /* the two option cells carry their column name, since thead is hidden */
  body.page-id-1288 .table-overflow table.comparison-table td:nth-child(2)::before,
  body.page-id-1288 .table-overflow table.comparison-table td:nth-child(3)::before {
    display: block;
    font-size: var(--sl-t-sm);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sl-muted-text, #5A6B82);
    margin-bottom: 2px;
  }
  body.page-id-1288 .table-overflow table.comparison-table td:nth-child(2)::before {
    content: 'HELOC';
  }
  body.page-id-1288 .table-overflow table.comparison-table td:nth-child(3)::before {
    content: 'HEI';
  }
}

/* PL-57 (cont.) — the zebra stripe belongs to the ROW once the row is a grid.
   `tbody tr:nth-child(even) > td` paints each CELL. Stacked, that left the
   full-width Factor title and the two value cells as separate bands with white
   gutters between them, so one logical row read as two. Move the stripe to the
   <tr> and clear it on the cells. Specificity (0,5,5) clears the (0,3,1) and
   (0,2,1) cell rules without !important. */
@media (max-width: 559.98px) {
  body.page-id-1288 .table-overflow table.comparison-table tbody tr:nth-child(even) {
    background: var(--sl-whisper, #F7FFFB);
  }
  body.page-id-1288 .table-overflow table.comparison-table tbody tr:nth-child(even) > td,
  body.page-id-1288 .table-overflow table.comparison-table tbody tr > td {
    background: transparent;
  }
  body.page-id-1288 .table-overflow table.comparison-table tr {
    padding-inline: var(--sl-3);
    border-radius: var(--sl-r-sm, 8px);
  }
}

/* ── R2 CONTRAST REPAIRS — two ground-assumption bugs the reshapes exposed ──
   Both are the same class of defect: a rule that assumes what colour the ground
   under an element is, and is wrong when a card of the opposite polarity sits in
   between. Both were caught by measuring the rendered page, not by reading the
   edit — the markup was correct in each case. */

/* (a) PL-40 — body copy in a LIGHT card that sits on a DARK band.
   `:is(.footer-box,.cta-box--gold,.cta-box--dark,.specialist-wrap) :is(p,li,td,dd)`
   paints --sl-body-dark (rgba(255,255,255,.80)) for the dark band. The five
   "Why Choose" subject-cards are white cards INSIDE that band, so their
   paragraphs measured 1.02:1 — invisible. The file already makes exactly this
   exception for links (":is(.dark-zone,…) :is(.card,…) :is(a,.eyebrow,…)") and
   for .sl-icon; it simply never covered body text. Same idea, (0,2,1) over the
   (0,1,1) it corrects. */
:is(.footer-box, .cta-box--gold, .cta-box--dark, .specialist-wrap, .dark-zone, .mid-zone)
:is(.card, .subject-card, .tool-card, .snippet-box, .info-card, .path-card, .hero-box, .option-card)
:is(p, li, td, dd) {
  color: var(--sl-body);
}
/* …unless that inner card is itself one of the DARK card variants */
:is(.footer-box, .cta-box--gold, .cta-box--dark, .specialist-wrap, .dark-zone, .mid-zone)
:is(.tool-card.tool-blue, .auth-card, .card--dark)
:is(p, li, td, dd) {
  color: var(--sl-body-dark);
}

/* (b) PL-26 — .btn-outline on a DARK card.
   `.site :is(.light-zone,.soft-zone,.card,.tool-card) :is(.btn-outline,…)` treats
   every .tool-card as a light ground and paints a dark label. `.tool-card.tool-blue`
   is the DARK variant (see the card-polarity table above), so folding the two
   appointment CTAs into that band produced 2.67:1. Restated for the dark-card
   family at (0,4,0), which clears the (0,3,0) rule that assumed light. */
.site :is(.tool-card.tool-blue, .auth-card, .card--dark) :is(.btn-outline, .solve-btn-outline),
:is(.tool-card.tool-blue, .auth-card, .card--dark) :is(.btn-outline, .solve-btn-outline) {
  color: var(--sl-white);
  border-color: rgba(255, 255, 255, .45);
  background: transparent;
}
.site :is(.tool-card.tool-blue, .auth-card, .card--dark) :is(.btn-outline, .solve-btn-outline):hover,
:is(.tool-card.tool-blue, .auth-card, .card--dark) :is(.btn-outline, .solve-btn-outline):hover {
  border-color: var(--sl-mint);
  color: var(--sl-mint);
}

/* ── PL-66 — THE RELATED-POSTS ROW MUST FILL ITS TRACK ─────────────────────
   Measured on the insights post: the carousel track is 1054px but
   `ul.splide__list.kadence-posts-list` measured **623px** holding two 181px
   cards — a dead right third, and titles wrapping to 5-6 lines inside cards a
   third of the width they could have.
   Kadence sizes the list for the column count configured in the theme, not for
   how many related posts actually exist. Two posts therefore sit in a grid built
   for more. Branch on the real child count with :has() and give the row exactly
   as many equal tracks as it has cards — the same technique the 12-track base
   uses, and explicitly NOT repeat(auto-fit, minmax()), which sizes from the
   container and leaves phantom tracks that still take their gap. */
.entry-related-carousel .splide__track { width: 100%; }
.entry-related-carousel ul.kadence-posts-list {
  width: 100%;
  max-width: 100%;
  gap: var(--sl-4);
}
.entry-related-carousel ul.kadence-posts-list:has(> :last-child:nth-child(1)) { grid-template-columns: 1fr; }
.entry-related-carousel ul.kadence-posts-list:has(> :last-child:nth-child(2)) { grid-template-columns: repeat(2, 1fr); }
.entry-related-carousel ul.kadence-posts-list:has(> :last-child:nth-child(3)) { grid-template-columns: repeat(3, 1fr); }
.entry-related-carousel ul.kadence-posts-list:has(> :last-child:nth-child(4)) { grid-template-columns: repeat(4, 1fr); }
/* splide writes an inline width on each slide; the row is static here (two
   cards, no pagination), so the cards take their track instead. */
.entry-related-carousel ul.kadence-posts-list > .entry-list-item {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   STAGE-PUNCH-1 (2026-08-05) — two colour-only corrections.
   Appended, never merged into the blocks above: an edit made in place is
   silently reverted by any identical twin further down the file, with no error
   and no visual clue (CLAUDE.md, global-CSS rule 1).
   Neither rule changes a single layout property — no size, spacing, position
   or display is touched. Colour and affordance only.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── SP1-1 — .sr-crosslinks LINKS WERE INVISIBLE ON THE DARK HERO ──────────
   Measured on /ways-to-sell-your-home: the <a> computed rgb(13,27,46) on a
   rgb(13,27,46) ground — navy on navy, 1:1 contrast, entirely gone. The
   <p class="sr-crosslinks"> sits inside .btn-group inside
   section.hero-section.dark-zone, and PL-69
   (`.entry-content :is(…,.btn-group) a:not()×5`, (0,7,1)) paints every
   non-button link inside a .btn-group with --sl-ink. PL-69 was written for
   pill labels on light grounds and carries no dark-surface guard, so on a dark
   hero it paints the text the same colour as the background.

   Two grounds, two answers — the same class appears in both:
     dark  (4 statewide seller heroes) --sl-mint        #00FF7F on #0D1B2E = 12.9:1
     light (10 OC pages, .cta-box--inline) --sl-accent-text #067A45 on #F0FEF7 = 5.2:1

   The light case was not in the brief and was measured at #00CC66 on #F0FEF7 =
   2.1:1 — below AA for body text. It is the same selector on the same class, so
   it is corrected here rather than left as a known failure. */

/* light grounds — restates PL-69's five :not()s + .sr-crosslinks = (0,7,1) */
.entry-content .sr-crosslinks a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta):not(.pill),
.entry-content-wrap .sr-crosslinks a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta):not(.pill) {
  color: var(--sl-accent-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* dark grounds — adds a dark-surface class on top = (0,8,1), clears PL-69 */
.entry-content :is(.dark-zone,.mid-zone,.hero-section) .sr-crosslinks a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta):not(.pill),
.entry-content-wrap :is(.dark-zone,.mid-zone,.hero-section) .sr-crosslinks a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta):not(.pill) {
  color: var(--sl-mint);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.entry-content :is(.dark-zone,.mid-zone,.hero-section) .sr-crosslinks a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta):not(.pill):hover,
.entry-content :is(.dark-zone,.mid-zone,.hero-section) .sr-crosslinks a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta):not(.pill):focus-visible {
  color: var(--sl-white);
  text-decoration-thickness: 2px;
}

/* ── SP1-2 — "ON THIS PAGE" PILLS READ AS INERT LABELS ─────────────────────
   The pills computed --sl-ink text on a #C9D4E0 hairline: the same navy as body
   copy, with a grey border carrying no brand signal, so a row of controls read
   as a row of labels. Green is the interactive colour in this system, so the
   rest state now states it, and the hover gains a subtle tinted fill instead of
   the full mint slab.

   Mirrors the governing rule at (0,6,1)
   (`.entry-content :is(.section-nav,…) a:not()×4`) exactly and is appended
   after it — equal specificity, later in source, no !important. That is the
   same technique the rule it overrides used on the one before it.

   --sl-accent-text #067A45 on white     = 5.4:1  (AA)
   --sl-accent-text #067A45 on --sl-tint-2 #DEFCEE = 5.0:1  (AA, hover state)
   --sl-mint-deep   #00CC66 is border-only here, per the token contract. */
.entry-content :is(.section-nav, .nav-pills, .pill-nav, .nav-sticky, .sticky-nav,
  .solve-sticky-nav, .hv-nav, .sd-nav)
  a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta) {
  color: var(--sl-accent-text);
  border-color: var(--sl-mint-deep);
}
.entry-content :is(.section-nav, .nav-pills, .pill-nav, .nav-sticky, .sticky-nav,
  .solve-sticky-nav, .hv-nav, .sd-nav)
  a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta):hover,
.entry-content :is(.section-nav, .nav-pills, .pill-nav, .nav-sticky, .sticky-nav,
  .solve-sticky-nav, .hv-nav, .sd-nav)
  a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta):focus-visible,
.entry-content :is(.section-nav, .nav-pills, .pill-nav, .nav-sticky, .sticky-nav,
  .solve-sticky-nav, .hv-nav, .sd-nav)
  a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta).is-active {
  background: var(--sl-tint-2);
  border-color: var(--sl-mint-deep);
  color: var(--sl-accent-text);
}

/* Dark grounds keep the white-on-navy pill they already had. #067A45 on
   #0D1B2E measures 3.2:1 — below AA — so the recolour above must not reach a
   dark band. Adding the dark-surface class = (0,7,1) rest / (0,8,1) hover,
   which outranks the light rules above regardless of source order. */
.entry-content :is(.dark-zone,.mid-zone) :is(.section-nav, .nav-pills, .pill-nav,
  .nav-sticky, .sticky-nav, .solve-sticky-nav, .hv-nav, .sd-nav)
  a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta) {
  color: var(--sl-white);
  border-color: rgba(255,255,255,.34);
}
.entry-content :is(.dark-zone,.mid-zone) :is(.section-nav, .nav-pills, .pill-nav,
  .nav-sticky, .sticky-nav, .solve-sticky-nav, .hv-nav, .sd-nav)
  a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta):hover,
.entry-content :is(.dark-zone,.mid-zone) :is(.section-nav, .nav-pills, .pill-nav,
  .nav-sticky, .sticky-nav, .solve-sticky-nav, .hv-nav, .sd-nav)
  a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta).is-active {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.48);
  color: var(--sl-white);
}


/* ── STATEWIDE-TRIM-1 (2026-08-05) — THE NARRATIVE MEASURE WAS TOO NARROW ──
   Appended, never merged into the blocks above (CLAUDE.md, global-CSS rule 1).

   STAGE-PARITY measured the narrative column on the statewide/reverse pages as
   772px inside a 1092px content box, leaving 344px collecting on the right while
   the heading and the card grids above and below it ran the full 1092. The gap is
   real; centring the column is NOT the fix, and that was measured too:

     - `--sl-measure` is 68ch, and `ch` is FONT-RELATIVE. On an <h2> it resolves to
       1929px, so a cap written against it never bites on a heading. Centring the
       paragraphs alone therefore moved them to x=334 while their own headings
       stayed at x=174 — a ragged left edge, worse than the problem.
     - Capping the heading too (so the pair centres as one column) aligned them at
       x=334, but forced the heading to wrap onto two lines AND left the snippet
       boxes and card grids at x=174, so the prose sat 160px inside the cards that
       belong to the same section.

   The layout is deliberately left-aligned: heading, prose and cards share x=174.
   The right gap is the readability cap, not a bug. So this widens the measure
   rather than moving the column, which shortens the gap and keeps the shared edge.
   Measured on /california-reverse-mortgages/homesafe/: 772 -> 837px, right gap
   344 -> 279px, heading unchanged, cards unchanged.

   Scope, both parts of which are load-bearing:
     `section:not(.hero-section)` — hero paragraphs are already centred with auto
       margins; widening them would change the hero.
     `:not([class])` — .eyebrow carries `max-width: none` (1140px) and .lead-text
       its own 863px cap. Both are deliberate. Without this the rule CAPPED them
       instead of widening: .eyebrow measured 1140 -> 631px, a clear regression.
       A widening rule must never narrow anything; verified across 5 pages x 2
       viewports that nothing narrows.

   Desktop-only by construction — at 390px the container is narrower than either
   measure, so the cap does not apply and nothing moves. Verified: 0 changes. */
:root { --sl-measure-wide: 78ch; }
.entry-content section:not(.hero-section) > .container > :is(p, ul, ol):not([class]),
.entry-content-wrap section:not(.hero-section) > .container > :is(p, ul, ol):not([class]) {
  max-width: var(--sl-measure-wide);
}


/* ══════════════════════════════════════════════════════════════════════════
   MOBILE-POLISH-1 (2026-08-05) — appended, never merged above (global-CSS rule 1)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── MP1-1 — the "On this page" rail is ONE swipeable row at ≤768px ────────
   The @media (max-width:900px) block earlier in this file already said
   `flex-wrap: nowrap; overflow-x: auto` — and it had been dead since the day it
   was written. `.section-nav, .nav-pills, .section-nav__inner { flex-wrap: wrap }`
   sits UNCONDITIONALLY further down the file. Both selectors are (0,1,0), a media
   query contributes NO specificity, so the later unconditional rule won at every
   width. The `overflow-x:auto` could never engage either: wrapped content never
   overflows, so scrollWidth always equalled clientWidth.

   Measured on the local copy before this fix (Playwright, mobile UA):
     San Diego county hub   390px → 4 rows, 222px      360px → 5 rows, 302px
                                                        (35.8% of an 844px viewport)
     statewide seller       390px → 3 rows, 170px      360px → 3 rows, 170px
     SD money page (FHA)    1 row but 144px tall — the pills were wrapping their
                            own text instead of the row overflowing
     horizontally scrollable: false on all six runs

   Fixed by restating the mobile behaviour at the END of the file: later in source
   at equal specificity, which is the technique stage-punch-1 used, and no
   !important. Desktop wrap behaviour is deliberately untouched. */
@media (max-width: 768px) {
  .section-nav, .nav-pills, .pill-nav, .nav-sticky, .sticky-nav,
  .solve-sticky-nav, .hv-nav, .sd-nav, .section-nav__inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;      /* momentum scrolling on iOS */
    scroll-snap-type: x proximity;
    scroll-padding-inline-start: var(--sl-4, 16px);
    /* the fade IS the swipe affordance. It must soften, never clip, so the row
       keeps trailing padding wider than the fade. */
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent 100%);
            mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 36px), transparent 100%);
    padding-right: 40px;
  }
  .section-nav::-webkit-scrollbar, .nav-pills::-webkit-scrollbar,
  .pill-nav::-webkit-scrollbar, .nav-sticky::-webkit-scrollbar,
  .sticky-nav::-webkit-scrollbar, .solve-sticky-nav::-webkit-scrollbar,
  .hv-nav::-webkit-scrollbar, .sd-nav::-webkit-scrollbar,
  .section-nav__inner::-webkit-scrollbar { display: none; }

  /* A pill must not shrink, and must not wrap its own text — otherwise the row
     grows TALL instead of WIDE and nothing ever overflows to scroll. This beats
     `.section-nav .pill { flex:0 1 auto; white-space:normal; max-width:100% }`
     (0,2,0) at equal specificity, later in source. */
  .section-nav .pill, .nav-pills .pill, .pill-nav .pill, .section-nav__inner .pill,
  .section-nav a, .nav-pills a, .pill-nav a, .nav-sticky a, .sticky-nav a,
  .solve-sticky-nav a, .hv-nav a, .sd-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
    max-width: none;
    scroll-snap-align: start;
  }
}

/* ── MP1-2 — sticky mobile CTA bar ────────────────────────────────────────
   The hero and footer CTAs were measured and are NOT broken: every tel: link and
   Schedule button painted, in-viewport, at both 390 and 360. What did not exist
   was any PERSISTENT mobile CTA — `.mobile-sticky-footer` was absent from the DOM
   on all three sample pages, while `body` already reserved
   `padding-bottom: var(--sl-mobile-bar-h)` (64px) for it. So the bar fills space
   the layout was already holding open: no reflow, no CLS.

   The bar is injected by assets/js/solvelr-mobile-cta.js and carries BOTH classes,
   so it inherits the existing component styling and the existing z-index token
   (--sl-z-mobilebar 200, with the GHL bubble pinned under it at 190 and already
   offset by --sl-mobile-bar-h). Only the reveal behaviour is new. */
@media (max-width: 768px) {
  .mobile-sticky-footer.solvelr-mcta {
    display: flex;
    transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px)));
    transition: transform .22s var(--sl-ease, ease);
    will-change: transform;
    pointer-events: none;
  }
  .mobile-sticky-footer.solvelr-mcta.is-visible {
    transform: none;
    pointer-events: auto;
  }
  /* The bar is itself display:flex, so its .btn-group is a flex ITEM and defaults
     to flex:0 1 auto — measured at 123px of a 390px bar, leaving two small buttons
     huddled on the left. The buttons already carry flex:1 1 0 from the base
     component rule; they were splitting the wrong width, not failing to grow. */
  .mobile-sticky-footer.solvelr-mcta .btn-group {
    flex: 1 1 auto;
    width: 100%;
  }
  /* Both actions are primary on a bar whose only job is conversion. */
  .mobile-sticky-footer.solvelr-mcta .btn {
    background: #00FF7F;
    color: #0D1B2E;
    border: 1px solid #00FF7F;
    font-weight: 700;
    min-height: 44px;                      /* tap target */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--sl-r-pill, 999px);
    text-decoration: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-sticky-footer.solvelr-mcta { transition: none; }
}
/* Desktop: the base component rule already sets display:none outside the mobile
   band; restated so a future edit to that rule cannot leak the bar onto desktop. */
@media (min-width: 769px) {
  .mobile-sticky-footer.solvelr-mcta { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   MOBILE-POLISH-1 ADDENDUM (2026-08-05) — FIX 3 + the INVISIBLE-CLASS sweep
   Colour only. No layout property is touched by anything below.

   Measured, not inferred. `scripts/mp1_contrast_sweep.mjs` walked 54 pages across
   every template lane at 1440 and 390 (108 page-renders) and computed effective
   contrast for every visible text node against its composited ground. It returned
   8 signatures below 2:1. These are those 8.

   THE SPECIFICITY TRAP THAT PRODUCED MOST OF THEM — worth recording, because two
   earlier passes wrote corrections that silently lost to it:

     .entry-content-wrap
     :is(.dark-zone, .mid-zone, .hero-section, .solve-hero,
         .cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band)
     :is(.card, .tool-card, .path-card, …) :is(p, li)      →  color: var(--sl-body)

   `:is()` takes the specificity of its MOST SPECIFIC argument, and
   `.cta-box:not(.cta-box--alt):not(.cta-box--inline)` is (0,3,0) — so that middle
   `:is()` is not (0,1,0) as it reads, and the whole selector is **(0,5,1)**.
   PL-40's corrections were written at (0,3,1) and (0,2,1) and never applied. A
   `:not()` chain buried inside an `:is()` silently inflates every rule it appears in.
   Everything below is therefore written at (0,6,1) or higher and was re-measured.
   ══════════════════════════════════════════════════════════════════════════ */

/* the two ground lists, restated once so the four rules below stay in step */

/* ── MP1-3 (FIX 3) — a LIGHT card inside a DARK band keeps INK headings ───
   San Diego county hub, "Why Choose Solve Lending & Realty": the four
   `.subject-card` headings measured **1.02:1** — rgb(255,255,255) on rgb(247,255,251),
   i.e. white on a mint-tinted white card, completely invisible. Same defect on the
   `.use-case-card` headings in the medical-professional lane at **1.00:1**, white on
   white.
   Cause: `:is(.footer-box,.cta-box--gold,.cta-box--dark,.specialist-wrap) :is(h1…h6)`
   (line ~4358) correctly paints headings white for those DARK bands, but the
   "Why Choose" cards are LIGHT cards sitting inside one. PL-40 had already made
   exactly this exception for `p, li, td, dd` — it simply never covered headings.
   This is that same exception, for headings, with the card list widened to the
   families the sweep found. */
.entry-content-wrap
:is(.footer-box, .cta-box--gold, .cta-box--dark, .specialist-wrap, .dark-zone, .mid-zone,
    .hero-section, .solve-hero, .cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band,
    .tool-card.tool-blue, .auth-card, .card--dark)
:is(.card, .subject-card, .tool-card, .snippet-box, .info-card, .path-card, .hero-box,
    .option-card, .use-case-card, .use-card, .program-card, .spec-card, .factor-card,
    .feature-card, .pivot-card)
:is(h1, h2, h3, h4, h5, h6, .subject-card__title) {
  color: var(--sl-ink);
}

/* ── MP1-4 — the same light cards keep INK body copy ──────────────────────
   `.use-case-card p` measured 1.00:1 — rgba(255,255,255,.8) on white. PL-40 covered
   this for its own card list; the `.use-case-card` family was never in it. */
.entry-content-wrap
:is(.footer-box, .cta-box--gold, .cta-box--dark, .specialist-wrap, .dark-zone, .mid-zone,
    .hero-section, .solve-hero, .cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band,
    .tool-card.tool-blue, .auth-card, .card--dark)
:is(.use-case-card, .use-card, .program-card, .spec-card, .factor-card, .feature-card,
    .subject-card, .pivot-card)
:is(p, li, td, dd, span) {
  color: var(--sl-body);
}

/* ── MP1-5 — …unless the inner card is itself a DARK variant ──────────────
   Restated LAST and at higher specificity than both rules above, because
   `.card--dark` also matches `.card` and `.tool-card.tool-blue` also matches
   `.tool-card`, so the light-card rules would otherwise paint ink on ink.
   Measured on /purchase-home-loans/: `.card--dark li` was **1.17:1** (#22364B on
   #1A2B3C) and its `strong` **1.20:1** (#0D1B2E on #1A2B3C) — the second because
   the base rule `strong, b { color: var(--sl-ink) }` re-asserts ink on every
   nested strong regardless of ground, so `strong`/`b` must be named explicitly
   rather than left to inherit. */
.entry-content-wrap
:is(.dark-zone, .mid-zone, .hero-section, .solve-hero,
    .cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .footer-box,
    .cta-box--gold, .cta-box--dark, .specialist-wrap)
:is(.tool-card.tool-blue, .auth-card, .card--dark)
:is(p, li, td, dd, strong, b, span) {
  color: var(--sl-body-dark);
}
.entry-content-wrap
:is(.dark-zone, .mid-zone, .hero-section, .solve-hero,
    .cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band, .footer-box,
    .cta-box--gold, .cta-box--dark, .specialist-wrap)
:is(.tool-card.tool-blue, .auth-card, .card--dark)
:is(h1, h2, h3, h4, h5, h6) {
  color: var(--sl-white);
}
/* a dark card standing on its own, not inside a dark band */
.entry-content-wrap :is(.tool-card.tool-blue, .auth-card, .card--dark)
:is(p, li, td, dd, strong, b) {
  color: var(--sl-body-dark);
}

/* ── MP1-6 — accent links on LIGHT grounds take the light-ground accent ───
   The GREEN TEXT RULING: #00FF7F / #00CC66 are for dark grounds, large display type
   and buttons; small text on a light ground takes --sl-accent-text (#067A45).
   Two survivors of that ruling, both found at < 2:1:
     `.cta-box--inline p a`   #00FF7F on #F0FEF7 = **1.30:1**  (2 pages, 6 nodes)
     `table td a`             #00CC66 on #EFF7F4 = **1.96:1**  (12 nodes)
   Same family as stage-punch-1 SP1-1 — a link colour written for a dark surface
   landing on a light one — but reached through different selectors, which is why
   that fix did not close them. Dark grounds are explicitly preserved below. */
.entry-content-wrap :is(.cta-box--inline, .cta-box--alt, .light-zone, .soft-zone)
:is(p, li, td, div) a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta):not(.pill),
.entry-content-wrap :is(table, .table-overflow) :is(td, th)
a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta):not(.pill),
.entry-content-wrap :is(table, .table-overflow) :is(td, th) :is(strong, b)
a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta):not(.pill) {
  color: var(--sl-accent-text);
}
/* dark grounds keep the mint — restated after, at higher specificity */
.entry-content-wrap
:is(.dark-zone, .mid-zone, .hero-section, .solve-hero, .cta-box--gold, .cta-box--dark,
    .cta-band, .footer-box, .specialist-wrap, .tool-card.tool-blue, .auth-card, .card--dark)
:is(p, li, td, th, div, table, .table-overflow)
a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta):not(.pill) {
  color: var(--sl-mint);
}

/* ── MP1-7 — links inside a LIGHT card nested in a DARK band ──────────────
   Found only by widening the sweep from 54 to 90 pages, which is the point of
   sampling by COMPONENT rather than by page: `.subject-card` is on 67 pages and
   the first sample happened to miss the one instance that carries a link.
     `.subject-card p a`  #00FF7F on #F7FFFB = **1.32:1**
     e.g. /orange-county/reverse-mortgages/homesafe/
   MP1-6 above restates mint for dark grounds, and a light card sitting INSIDE a
   dark ground matched it — so this is the same light-card exception as MP1-3/4,
   applied to links, and it has to outrank MP1-6's (0,9,1). */
.entry-content-wrap
:is(.footer-box, .cta-box--gold, .cta-box--dark, .specialist-wrap, .dark-zone, .mid-zone,
    .hero-section, .solve-hero, .cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band,
    .tool-card.tool-blue, .auth-card, .card--dark)
:is(.card, .subject-card, .tool-card, .snippet-box, .info-card, .path-card, .hero-box,
    .option-card, .use-case-card, .use-card, .program-card, .spec-card, .factor-card,
    .feature-card, .pivot-card)
:is(p, li, td, dd, div, span)
a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta):not(.pill) {
  color: var(--sl-accent-text);
}
/* the dark card variants are NOT light cards — restated last, higher still */
.entry-content-wrap
:is(.footer-box, .cta-box--gold, .cta-box--dark, .specialist-wrap, .dark-zone, .mid-zone,
    .hero-section, .solve-hero, .cta-box:not(.cta-box--alt):not(.cta-box--inline), .cta-band)
:is(.tool-card.tool-blue, .auth-card, .card--dark)
:is(p, li, td, dd, div, span)
a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta):not(.pill) {
  color: var(--sl-mint);
}


/* ══════════════════════════════════════════════════════════════════════════
   PRE-FLIP-FINAL — LINK-GREEN (2026-08-05)
   Appended, never merged above (global-CSS rule 1).

   The MOBILE-POLISH-1 sweep measured `--sl-mint-deep #00CC66` as body-link text on
   light grounds at **2.05–2.14:1** across 43 signatures and 862 nodes — 71% of the
   whole LOW list, and the single largest contrast item on the site.

   `--sl-accent-text #067A45` is the token the GREEN TEXT RULING already designates
   for small text on light grounds (5.42:1 on white, 5.22:1 on the mint tint), and it
   is what stage-punch-1 and MOBILE-POLISH-1 used for exactly this correction.

   This mirrors the governing rule at (0,6,1) — equal specificity, later in source,
   no !important — which is the technique used throughout this file. The dark-ground
   overrides that brighten the accent back to --sl-mint are all higher specificity
   and are unaffected; verified by re-running the sweep after this change. */
.entry-content a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta):not(.pill),
.entry-content a:not([class*="btn"]):not([class*="button"]):not(.cta):not(.nav-cta):not(.pill):visited {
  color: var(--sl-accent-text);
}


/* ══════════════════════════════════════════════════════════════════════════
   INSIGHTS-CARDS-1 (2026-08-06) — the /insights/ index and every category
   archive rendered post titles at hero display size inside quarter-width
   cards: one word per line, and long words broken mid-word.
   Appended, never merged into the blocks above — an edit made in place is
   silently reverted by any identical twin further down the file, with no
   error and no visual clue (CLAUDE.md, global-CSS rule 1).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── IC1-1 — THE ARCHIVE CARD GRID WAS CAPPED AT THE PROSE READING MEASURE ──
   Measured on /insights/ at 1440: `ul#archive-container.kadence-posts-list`
   computed **729px inside a 1242px .site-main** — three 216px tracks whose
   inner text box is only **144px**, and ~500px of dead space to their right.
   The cap is OURS, not Kadence's. This file carries, for body copy:

       ul, ol { margin: 0 0 var(--sl-4) 1.15rem; max-width: var(--sl-measure); }

   `--sl-measure` is 68ch — a reading measure for prose. The archive list is a
   LAYOUT grid that merely happens to be a <ul>, so it inherited a prose width
   cap *and* a 1.15rem text indent. Narrow tracks are the reason the titles had
   nowhere to wrap; the type scale in IC1-2 was only the visible half of it.

   PL-66 fixed exactly this defect for `.entry-related-carousel`. The archive
   list has the same cause and was never covered — same remedy, scoped to the
   archive container so no prose list is affected.
   Specificity (0,2,1) beats the `ul, ol` rule's (0,0,1); no !important. */
ul.kadence-posts-list.post-archive {
  max-width: 100%;
  margin-left: 0;
}

/* ── IC1-2 — CARD TITLES TOOK THE PAGE-HEADING STEP ────────────────────────
   Card titles are <h2>, and the ONLY rule sizing them was the global
   `h2 { font-size: var(--sl-t-3xl) }` — the section-heading step, which is
   fluid 44px @1440 / 31px @390. Measured inside the 144px box above, the word
   "California" alone rendered **205px** and "Mortgages" 213px: wider than the
   whole column, so Chrome broke them mid-word ("Califor / nia") and titles ran
   10-13 lines.

   `--sl-t-xl` is the defined step below headings — clamp(1.25rem, 1.05rem +
   0.9vw, 1.5rem) = 24px @1440 / 20px @390 — and is what a card title should
   take. It is DEFINED at :root line 116; a var() pointing at an undefined
   token fails silently with no console error (CLAUDE.md, global-CSS rule 2),
   so only already-defined tokens are referenced here.

   `overflow-wrap: break-word` is a guard, not the fix: with IC1-1 applied
   nothing overflows, but it means no future long word can ever breach a card
   if the grid narrows again.
   Applies to both card lists — the archive grid and the related-posts row,
   which is the same component in a different context. Specificity (0,2,0)
   beats the bare `h2` (0,0,1). */
.kadence-posts-list .loop-entry .entry-title,
.kadence-posts-list .entry-list-item .entry-title {
  font-size: var(--sl-t-xl);
  line-height: 1.3;
  overflow-wrap: break-word;
}


/* ══════════════════════════════════════════════════════════════════════════
   NEWPAGE-ADLANDERS-1 (2026-08-06) — the lander component rules were pinned to
   POST IDs, so two new landers built from the same template rendered unstyled.

   The whole ad-lander component set (hero-wrap, form-card, path-card, cta-band,
   quote-box, compare-table + its mobile stacked layout, trust-strip, specialist,
   sticky footer …) lives above under two hard-pinned selector groups:

       :is(body.page-id-1887, body.page-id-1888)   -> .solve-landing  family, 86 rules
       :is(body.page-id-1889)                      -> .solve-ad-page  family, 71 rules

   1887/1888/1889 are `bank-vs-mortgage-broker-california`, `no-best-bank-page`
   and `ca-equity-options-no-refinance-page`. A previous run absorbed those pages'
   inline <style> into this file but kept the page-id scoping, so the rules could
   never reach another page. NEWPAGE-ADLANDERS-1's pages are 7563/7564 and got
   only the GLOBAL rules — which is why their CTAs were correctly mint and the nav
   rail was right, while the comparison table never stacked on mobile.

   Fixed by widening each group with a STABLE BODY CLASS instead of adding more
   post IDs. Post IDs differ between Local and WP Engine, so an id-based fix works
   in one environment and silently fails in the other. `body_class` in the child
   theme adds:
       solve-adlander--landing  -> /no-best-bank                (.solve-landing markup)
       solve-adlander--adpage   -> /ca-equity-options-no-refinance (.solve-ad-page markup)

   Two classes, not one: each new lander inherits ONLY the block its own twin uses,
   so the two families cannot cross-contaminate where their values differ.
   Edited in place rather than re-emitted — verified single-copy first, because a
   duplicated block would silently override the edit (global-CSS rule 1).
   Any future lander needs the matching body class and nothing else.
   ══════════════════════════════════════════════════════════════════════════ */