/* Benefitra global THEME layer - SINGLE SOURCE OF TRUTH for light/dark
   correctness on shared content components.
   Every page links this one file, after site-header.css.
   SOURCE OF TRUTH: scripts/_site-theme.css. build-global-header.py copies it
   here. Edit the script copy, never this one and never a page.

   WHY THIS FILE EXISTS
   --------------------
   This site is a static export. Each page carries its own inline <style>, so
   a component's colours were re-declared per page and drifted. Several of
   those inline rules hardcode one theme's colours with !important and no
   counterpart for the other theme. In light mode that produced literally
   invisible text (measured contrast ratio 1.00, white on white).

   The rule this layer enforces, from the design-system method: the SEMANTIC
   layer performs the light/dark switch. A component may not hardcode a
   colour for one theme without the other. Anything below is here because a
   page broke that rule and the fault was measured, not guessed.

   Every block cites the measured failure it closes. Numbers come from
   scripts/diag-nav.js, which reports contrast against the real painted
   background including gradients. */

/* =====================================================================
   1. CASE STUDY CARD HEADLINES                    (Abid, 2026-08-14)
   Measured: /case-studies/ in LIGHT mode, 169 low-contrast text nodes.
   Worst offenders were every card headline at ratio 1.00 - white text on a
   white card, i.e. invisible, not merely faint.

   Cause: out/case-studies/index.html declares

     body.cs-page .eb-cases-2026 .eb-cs-headline,
     :root[data-theme="light"] body.cs-page .eb-cases-2026 .eb-cs-title
       {color:#ffffff !important}

   The first selector carries no theme qualifier so it applies in BOTH
   themes, and the second forces white specifically in light mode, while
   light mode repaints the card white. Fixed by making the headline follow
   the theme. Specificity is raised above the page rule deliberately: the
   page rule is !important, so this has to outrank it, not merely follow it.
   ===================================================================== */
/* SCOPING NOTE, learned the hard way on 2026-08-14. My first attempt targeted
   .eb-cs-headline and .eb-cs-title anywhere inside .eb-cases-2026. Those
   classes are ALSO used on dark navy bands elsewhere on the page, where white
   text is correct and passing. Recolouring them navy turned 25 white-on-white
   failures into ~144 navy-on-navy ones. Measured, caught, corrected.
   Only text that actually sits inside a card may follow the card's theme. */
:root[data-theme="light"] body.cs-page .eb-cases-2026 .eb-cs-card .eb-cs-headline,
:root[data-theme="light"] body.cs-page .eb-cases-2026 .eb-cs-card .eb-cs-title,
:root[data-theme="light"] body.cs-page .eb-cases-2026 .eb-cs-card .eb-cs-subhead{
  color:#0a1628 !important;
}
:root[data-theme="light"] body.cs-page .eb-cases-2026 .eb-cs-card{
  background:linear-gradient(180deg,#ffffff,#f7faf9) !important;
  border:1px solid rgba(10,22,40,0.10) !important;
}
:root[data-theme="light"] body.cs-page .eb-cases-2026 .eb-cs-card p,
:root[data-theme="light"] body.cs-page .eb-cases-2026 .eb-cs-card li{
  color:rgba(10,22,40,0.72) !important;
}
/* The exported page also carries a high-specificity blanket rule that paints
   every span, div and strong inside a card #e8ecf3. Once the card is light,
   those descendants need an explicit light-card palette too. Keep the
   semantic accents below separate so tags, provenance and links retain
   their hierarchy instead of becoming one undifferentiated navy block. */
:root[data-theme="light"] body.cs-page .eb-cases-2026 .eb-cs-card .eb-cs-trigger,
:root[data-theme="light"] body.cs-page .eb-cases-2026 .eb-cs-card .eb-cs-subhead,
:root[data-theme="light"] body.cs-page .eb-cases-2026 .eb-cs-card .eb-cs-support-list,
:root[data-theme="light"] body.cs-page .eb-cases-2026 .eb-cs-card .eb-cs-support-list li,
:root[data-theme="light"] body.cs-page .eb-cases-2026 .eb-cs-card p strong{
  color:rgba(10,22,40,0.72) !important;
}
:root[data-theme="light"] body.cs-page .eb-cases-2026 .eb-cs-card .eb-cs-tag{
  color:#334155 !important;
  background:rgba(10,22,40,0.05) !important;
  border-color:rgba(10,22,40,0.12) !important;
}
:root[data-theme="light"] body.cs-page .eb-cases-2026 .eb-cs-card .eb-cs-tag.from{
  color:#1d4ed8 !important;
  background:rgba(37,99,235,0.08) !important;
  border-color:rgba(37,99,235,0.18) !important;
}
html:root[data-theme="light"] body.cs-page .eb-cases-2026 .eb-cs-card a.eb-cs-cta,
html:root[data-theme="light"] body.cs-page .eb-cases-2026 .eb-cs-card span.eb-cs-cta{
  color:#047857 !important;
  background:transparent !important;
}
/* The amber statistic stays an amber accent, but #fbbf24 on a white card is
   about 1.7:1 and fails outright. In light mode it drops to #b45309, which
   reads as the same accent and measures about 5.9:1 on #ffffff. Dark mode
   keeps the bright amber, which passes on the navy card. */
:root[data-theme="light"] body.cs-page .eb-cases-2026 .eb-cs-card .eb-cs-headline .pct,
:root[data-theme="light"] body.cs-page .eb-cases-2026 .eb-cs-card .pct{
  color:#b45309 !important;
}
/* Dark mode keeps the original intent explicitly, so neither theme is
   left depending on a page's inline rule. */
:root[data-theme="dark"] body.cs-page .eb-cases-2026 .eb-cs-card .eb-cs-headline,
:root[data-theme="dark"] body.cs-page .eb-cases-2026 .eb-cs-card .eb-cs-title{
  color:#ffffff !important;
}

/* The page intentionally keeps its explainer and final CTA panels dark in
   both themes. A site-wide light-mode rule forces every h2/h3 and em navy,
   producing navy-on-navy text here. These container rules preserve the dark
   panel design without changing headings elsewhere on the page. */
:root[data-theme="light"] body.cs-page .eb-cases-2026 .eb-cs-howto h3{
  color:#fbbf24 !important;
}
:root[data-theme="light"] body.cs-page .eb-cases-2026 .eb-cs-howto p,
:root[data-theme="light"] body.cs-page .eb-cases-2026 .eb-cs-howto em{
  color:#e8ecf3 !important;
}
:root[data-theme="light"] body.cs-page .eb-cases-2026 .eb-cs-howto .nda,
:root[data-theme="light"] body.cs-page .eb-cases-2026 .eb-cs-howto .nda a{
  color:#93c5fd !important;
}
:root[data-theme="light"] body.cs-page .eb-cases-2026 .eb-cs-bottom h2{
  color:#ffffff !important;
}
:root[data-theme="light"] body.cs-page .eb-cases-2026 .eb-cs-bottom h2 .accent{
  color:#34d399 !important;
}
:root[data-theme="light"] body.cs-page .eb-cases-2026 .eb-cs-bottom p{
  color:#e8ecf3 !important;
}

/* =====================================================================
   2. CASE STUDY TESTIMONIAL CARD                   (Abid, 2026-08-14)
   Measured: /case-study/full-grip-games-40-percent-health-savings/ in DARK
   mode. .cs-testimonial computes background-color rgba(0,0,0,0) with
   background-image linear-gradient(135deg,#f8fafc,#ecfdf5) - a LIGHT card -
   while inherited text stays rgb(219,226,236), the dark theme's light grey.
   Light card, light text: the quote, "Jameson Reeves" and his title were all
   unreadable. Nine pages declare this card and NOT ONE has a dark-mode
   counterpart, so every case study quote was affected.

   Note this is exactly the fault my first contrast sweep missed, because it
   only inspected background-color, which is transparent here. The gradient
   is the background. diag-nav.js now resolves gradients.
   ===================================================================== */
:root[data-theme="dark"] .cs-testimonial,
:root:not([data-theme="light"]) .cs-testimonial{
  background-image:linear-gradient(135deg,#0f1f38,#12253f) !important;
  border:1px solid rgba(255,255,255,0.10) !important;
}
:root[data-theme="dark"] .cs-testimonial,
:root[data-theme="dark"] .cs-testimonial blockquote,
:root[data-theme="dark"] .cs-testimonial p,
:root:not([data-theme="light"]) .cs-testimonial blockquote,
:root:not([data-theme="light"]) .cs-testimonial p{
  color:rgba(255,255,255,0.90) !important;
}
:root[data-theme="dark"] .cs-testimonial cite,
:root[data-theme="dark"] .cs-testimonial .cs-attrib,
:root[data-theme="dark"] .cs-testimonial .cs-attrib *,
:root:not([data-theme="light"]) .cs-testimonial cite,
:root:not([data-theme="light"]) .cs-testimonial .cs-attrib,
:root:not([data-theme="light"]) .cs-testimonial .cs-attrib *{
  color:rgba(255,255,255,0.72) !important;
}
/* Light mode: the light gradient is correct, but the text must be dark. */
:root[data-theme="light"] .cs-testimonial,
:root[data-theme="light"] .cs-testimonial blockquote,
:root[data-theme="light"] .cs-testimonial p{
  color:#0a1628 !important;
}
:root[data-theme="light"] .cs-testimonial cite,
:root[data-theme="light"] .cs-testimonial .cs-attrib,
:root[data-theme="light"] .cs-testimonial .cs-attrib *{
  color:rgba(10,22,40,0.72) !important;
}

/* =====================================================================
   3. PRIMARY BUTTON CONTRAST                       (site-wide)
   Measured: white label on #059669 = 3.77:1. Normal-size body text needs
   4.5:1. This affected "Schedule a Consultation" and "Book a discovery
   call" in BOTH themes on every page carrying them, so it was never a
   theme bug, just a wrong shade.

   #047857 is already in the brand emerald ramp (emerald-700, and the same
   value the nav mega panel's featured CTA uses), and white on it measures
   5.55:1. So this passes without introducing a new colour.
   ===================================================================== */
:root[data-theme] body a.btn-primary,:root[data-theme] body button.btn-primary,
:root[data-theme] body .btn-emerald,:root[data-theme] body a.cs-cta,
:root[data-theme] body .cs-cta-btn,:root[data-theme] body a.btn-gold,
:root[data-theme] body button.btn-gold,:root[data-theme] body .eb-cta-primary,
:root[data-theme] body a.eb-cta-primary,
:root[data-theme] body.cs-page .eb-cases-2026 a.eb-cs-bottombtn,
:root[data-theme] body a[href="/contact/"][class*="btn"],
:root[data-theme] body a[href="/contact/"][style*="background:#059669"]{
  background-color:#047857 !important;
  background-image:none !important;
  color:#ffffff !important;
}
:root[data-theme] body a.btn-primary:hover,:root[data-theme] body button.btn-primary:hover,
:root[data-theme] body .btn-emerald:hover,:root[data-theme] body a.cs-cta:hover,
:root[data-theme] body .cs-cta-btn:hover,:root[data-theme] body a.btn-gold:hover,
:root[data-theme] body button.btn-gold:hover,:root[data-theme] body .eb-cta-primary:hover,
:root[data-theme] body a.eb-cta-primary:hover,
:root[data-theme] body.cs-page .eb-cases-2026 a.eb-cs-bottombtn:hover,
:root[data-theme] body a[href="/contact/"][class*="btn"]:hover,
:root[data-theme] body a[href="/contact/"][style*="background:#059669"]:hover{
  background-color:#036048 !important;
  background-image:none !important;
  color:#ffffff !important;
}
/* The nav's own consultation pill is owned by site-header.css part 3; match
   its shade here so the two never diverge. */
:root[data-theme] body nav#mainNav .nav-links > a.nav-cta{
  background-color:#047857 !important;
  background-image:none !important;
  color:#ffffff !important;
}
:root[data-theme] body nav#mainNav .nav-links > a.nav-cta:hover{
  background-color:#036048 !important;
  background-image:none !important;
}

/* ---------------------------------------------------------------------
   Select dropdown caret in dark mode.

   The tool pages draw their own caret, because appearance:none removes the
   native one. It is a background-image data URI with the colour baked in at
   #556078, and .card select repeats it at #64748b. Both are dark slate,
   chosen against a white field. On the dark theme the field is deep navy and
   that caret is effectively invisible, so a select reads as a dead box with
   no affordance at all. Reported by Abid 2026-08-15 on the Benefits Savings
   Strategy Builder, "Primary state".

   The colour cannot be inherited, because it lives inside the encoded SVG,
   so the dark theme has to restate the image. Same glyph, same geometry and
   the same right 12px centre placement, only the fill changes to the light
   slate used for body text on dark. !important is required: the page rules
   it overrides include the more specific .card select.
   --------------------------------------------------------------------- */
:root[data-theme="dark"] select,
:root[data-theme="dark"] .card select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23cbd5e1'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 12px center !important;
}

/* ---------------------------------------------------------------------
   Light mode on pages that hardcode a dark page background.

   Found by the site audit 2026-08-15 on the workers' comp state calculators.
   In LIGHT mode the H1 computed to #0a1628 while the body background stayed
   #0f1520, a contrast ratio of 1.01: the heading was invisible. The theme
   switches text colour but those templates set their own dark body
   background, which nothing in the light theme ever overrode.

   Only background-color is forced, never background-image, so pages whose
   light design is a gradient or an image keep it: a colour underneath an
   opaque image is not visible. This is the light surface used by the rest of
   the light theme.
   --------------------------------------------------------------------- */
:root[data-theme="light"] body:not([data-bf-dark-only]){
  background-color:#f8f7f4 !important;
}

/* ---------------------------------------------------------------------
   Lead-capture modal: never trap the visitor.

   Reported by Abid 2026-08-16 on /osha-safety-toolkit/. The overlay is
   position:fixed with display:flex and align-items:center, and it has no
   overflow handling. When the dialog is taller than the viewport a centred
   flex child overflows in BOTH directions and neither end can be scrolled
   to. On that page the result is that the "OSHA Safety Compliance Toolkit"
   heading is sliced off the top and the "Skip for now" dismiss link is cut
   off the bottom, so the page is locked behind a form with no reachable way
   out.

   The fix is the standard safe-centring pattern: let the overlay scroll,
   align its child to flex-start, and give the child auto margins. A dialog
   that fits is still perfectly centred, because auto margins distribute the
   free space; a dialog that does not fit starts at the top and scrolls, so
   every end remains reachable. Applies to every .modal-overlay on the site,
   which is the same defect wherever the pattern is used.
   --------------------------------------------------------------------- */
.modal-overlay{
  overflow-y:auto !important;
  align-items:flex-start !important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  /* The shared header carries z-index 2147483000 so its mega panels clear
     every page's own stacking. A blocking modal declared only 9999, so the
     header painted OVER the top of the dialog and hid its heading even once
     the dialog could scroll. A modal that blocks the page has to sit above
     the chrome it blocks, so it is raised past the header here. */
  z-index:2147483003 !important;
}
.modal-overlay > *{
  margin-top:auto !important;
  margin-bottom:auto !important;
  flex:0 0 auto;
}

/* ---------------------------------------------------------------------
   Dark-only pages must not be given a light page background.

   Reported by Abid 2026-08-16 on /osha-safety-toolkit/. The light body rule
   above was written for templates that hardcode a dark background but whose
   CONTENT is otherwise theme-neutral. A few pages are different: they are
   dark by design all the way down. Their cards, hero, tab strip and footer
   use literal dark colours that no token flip reaches, and their text is
   #ffffff / #cbd5e1 / #94a3b8 to suit.

   On those pages forcing #f8f7f4 underneath produces a broken hybrid: the
   dark panels stay dark and read correctly, while every heading and every
   line of copy that sits directly on the page surface turns white-on-white.
   Measured on that page before this change at 1.07 to 1 across headings,
   list items and the whole footer.

   Recolouring the text instead was tried and is wrong: it fixes the copy on
   the light surface and simultaneously breaks the copy on the dark panels,
   which measured dark-on-dark at 1.00 to 1. The only coherent answer is to
   leave a dark-by-design page dark. Marked with data-bf-dark-only on <body>,
   which the :not() in the rule above honours, so the page keeps its own
   background in both toggle positions and stays readable in both.
   --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
   Dark-only pages: the lead-capture submit button.

   Independent of the toggle. In dark mode the button computed to cream text
   #fdebc1 on amber #f7b623, a ratio of 1.52 to 1, because a dark-theme rule
   lightens button surfaces that were designed as deep orange. In light mode
   it was white on #e65b0d at 3.58, still short of 4.5. Both are restated to
   the brand's deep orange with white text, which measures 6.4 to 1 and is
   identical in both toggle positions.
   --------------------------------------------------------------------- */
body[data-bf-dark-only] .modal-form .btn-submit,
body[data-bf-dark-only] button.btn-submit{
  background:#c2410c !important;
  background-image:none !important;
  color:#ffffff !important;
}

/* ---------------------------------------------------------------------
   Dark-only pages: light mode uses the DARK ink, because the surface under
   it is dark in both toggle positions.

   Measured on /osha-safety-toolkit/ 2026-08-16 with the modal dismissed and
   occluded elements excluded. Each colour below is the value this same
   element already computes to in dark mode, so the two toggle positions
   become identical rather than one of them being a compromise:

     .hero-inner p        #94a3b8 -> #c7d0dd   was 4.04 to 1
     .hero-stat .lbl      #94a3b8 -> #9aa6b8   was 4.10
     .hero-stat .num      #ea580c -> #fbbf24   was 2.95
     .talk-meta span      #64748b -> #aeb8c7   was 2.87
     .section-header      #ea580c -> #fbbf24   was 3.58
     section h3           #059669 -> #f1f5f9   was 3.54
     .modal-form label    #94a3b8 -> #cbd5e1   was 3.79
     .tab-btn             #ea580c -> #fbbf24   was 3.93

   None of these were invisible; they sat between 2.87 and 4.4 to 1, which
   is legible but under the 4.5 the rest of the site holds to.
   --------------------------------------------------------------------- */
:root[data-theme="light"] body[data-bf-dark-only] .hero-inner p{color:#c7d0dd !important}
:root[data-theme="light"] body[data-bf-dark-only] .lbl{color:#c7d0dd !important}
:root[data-theme="light"] body[data-bf-dark-only] .hero-stat .num{color:#fbbf24 !important}
:root[data-theme="light"] body[data-bf-dark-only] .talk-meta span{color:#aeb8c7 !important}
:root[data-theme="light"] body[data-bf-dark-only] .section-header .counter{color:#fbbf24 !important}
:root[data-theme="light"] body[data-bf-dark-only] h3{color:#f1f5f9 !important}
:root[data-theme="light"] body[data-bf-dark-only] .modal-form label{color:#cbd5e1 !important}
:root[data-theme="light"] body[data-bf-dark-only] .tab-btn,
:root[data-theme="light"] body[data-bf-dark-only] .tab-btn .icon{color:#fbbf24 !important}

/* bf-blog-listing-theme-2026-08-20 (Abid): /blog/ and /blog/page/N are dark-built pages, but
   _brand-light.css is linked unconditionally and forces .blog-card{background:#fff} and white
   inputs with !important, so dark mode showed white cards and a white search field on the navy
   page. This file loads after it, so a dark-scoped rule wins without touching light mode.
   The static /blog/page/N controls have the mirror bug: their colour is inline #cbd5e1, correct on
   navy and near-invisible on white, so light mode gets an override here too. */
:root[data-theme="dark"] .blog-card{background:rgba(255,255,255,0.03)!important;border:1px solid rgba(255,255,255,0.08)!important;color:#e6eaf0!important}
:root[data-theme="dark"] .blog-card:hover{border-color:rgba(5,150,105,0.35)!important;box-shadow:0 16px 48px rgba(0,0,0,0.32)!important}
:root[data-theme="dark"] .blog-card .card-content h3,:root[data-theme="dark"] .blog-card .card-content h3 a{color:#f8fafc!important}
:root[data-theme="dark"] .blog-card .card-excerpt{color:rgba(255,255,255,0.66)!important}
:root[data-theme="dark"] .blog-card .card-meta,:root[data-theme="dark"] .blog-card .card-meta span{color:rgba(255,255,255,0.52)!important}
:root[data-theme="dark"] .search-box input{background:rgba(255,255,255,0.06)!important;border:1px solid rgba(255,255,255,0.12)!important;color:#ffffff!important}
:root[data-theme="dark"] .search-box input::placeholder{color:rgba(255,255,255,0.45)!important}
:root[data-theme="dark"] .search-box svg{color:rgba(255,255,255,0.45)!important}
:root[data-theme="light"] .blog-pagination .page-num,:root[data-theme="light"] .blog-pagination .page-nav{background:#ffffff!important;border-color:rgba(10,22,40,0.16)!important;color:#0a1628!important}
:root[data-theme="light"] .blog-pagination .page-num:hover,:root[data-theme="light"] .blog-pagination .page-nav:hover{border-color:#059669!important;color:#047857!important}
:root[data-theme="light"] .blog-pagination span:not([class]){color:rgba(10,22,40,0.55)!important}
/* .page-current is a <span>, so the light-theme span catch-all repainted its inline white ink navy on the green pill */
:root[data-theme="light"] .blog-pagination .page-current{background:#059669!important;color:#ffffff!important}
:root[data-theme="dark"] .blog-pagination span:not([class]){color:rgba(255,255,255,0.62)!important}

/* ============================================================
   bf-article-dark-readability-2026-08-20
   Reported by Abid on /what-are-non-marketplace-health-insurance-premiums/
   and /qualifying-events-for-employer-sponsored-health-insurance/.
   Measured, not guessed: every one of the 427 article pages ships
   .article-body p{color:rgba(255,255,255,0.65)} plus hero meta at 0.4
   and .related-date at 0.3. On the rgb(10,22,40) body that is 8.08,
   3.80 and 2.70 to 1, so the secondary text FAILS WCAG AA and the body
   copy reads as washed out grey. Fixed once here because this file is
   linked on all 1,320 pages and !important beats the pages' own
   unprefixed inline-block rules regardless of link order.
   Everything is scoped to :root[data-theme="dark"], so light mode is
   untouched apart from the explicitly light-scoped callout rules below.
   ============================================================ */

/* BODY COPY: 0.65 white (8.08) -> #cbd5e1 (12.21) */
:root[data-theme="dark"] .article-body p,
:root[data-theme="dark"] .article-body ul,
:root[data-theme="dark"] .article-body ol,
:root[data-theme="dark"] .article-body li,
:root[data-theme="dark"] .article-body td{color:#cbd5e1!important}
:root[data-theme="dark"] .article-body strong{color:#f1f5f9!important}

/* HERO META: 0.4 white (3.80, fails AA) -> #94a3b8 (7.07) */
:root[data-theme="dark"] .article-hero .breadcrumb,
:root[data-theme="dark"] .article-meta{color:#94a3b8!important}
:root[data-theme="dark"] .article-meta .author{color:#cbd5e1!important}

/* RELATED CARDS: date 0.3 white (2.70, fails badly) -> #94a3b8 (6.61 on
   the rgb(17,29,46) card). Category pill #059669 was 4.49, a hair under
   AA at 11px, so it moves to #34d399 (8.82). */
:root[data-theme="dark"] .related-date{color:#94a3b8!important}
:root[data-theme="dark"] .related-cat{color:#34d399!important}

/* KEY INSIGHTS / EDITORIAL NOTE callout.
   These use class="key-takeaways"/"editorial-note", but the existing
   light-theme callout rule is pinned to the OTHER authoring style,
   div[style*="rgba(5,150,105"], so class-built boxes got no light rule
   at all and their 8% emerald tint vanished on the cream background.
   Both themes are given an explicit surface here. 9 pages carry these. */
:root[data-theme="light"] .article-body .key-takeaways,
:root[data-theme="light"] .article-body .editorial-note{
  background:#ecfdf5!important;
  border:1px solid rgba(5,150,105,0.25)!important;
  border-left:4px solid #047857!important}
:root[data-theme="light"] .article-body .key-takeaways h2,
:root[data-theme="light"] .article-body .key-takeaways h3{color:#0a1628!important}
:root[data-theme="dark"] .article-body .key-takeaways,
:root[data-theme="dark"] .article-body .editorial-note{
  background:rgba(5,150,105,0.14)!important;
  border:1px solid rgba(5,150,105,0.38)!important;
  border-left:4px solid #34d399!important}

/* Same pass, the three remaining sub-AA items, all site wide:
   light breadcrumb #64748b was 4.44 -> #475569 (7.07);
   header CTA label white@0.82 on #047857 was 4.23 -> solid white (5.48);
   dark category pill #059669 on the hero gradient was 4.41 -> #34d399 (8.69). */
:root[data-theme="light"] .article-hero .breadcrumb{color:#475569!important}
:root[data-theme="light"] nav#mainNav a.nav-cta span.cta-label,
:root[data-theme="light"] nav#mainNav .nav-cta span.cta-label,
:root[data-theme="dark"] nav#mainNav a.nav-cta span.cta-label{color:#ffffff!important}
:root[data-theme="dark"] .article-cat{color:#34d399!important}

/* ============================================================
   bf-post-content-typography-2026-08-20
   Reported by Abid: /open-enrollment-mistakes-small-business/ and
   /july-31-benefits-compliance-deadline/.

   MEASURED CAUSE. The blog ships TWO article templates and they were
   never equivalent. 226 pages wrap their body in class="article-body",
   209 pages wrap it in class="post-content", and 0 pages use both.
   Every page of BOTH kinds ships the same .article-body CSS in its
   head, so on the 209 post-content pages that CSS matches nothing:
   no max-width, no side padding, no paragraph or heading margins and
   no theme colours. That is the "unstyled wall of text" fault.

   Second fault, on the article-body pages: the body copy is authored
   with INLINE colours (color:#1b2a4a on 2,303 headings across 101
   pages) and INLINE pale panel backgrounds (#e8f4f8, #f8f9fa and 12
   more across 118 pages). Inline styles beat stylesheet rules, so
   dark mode kept dark navy headings on the navy page and pale panels
   holding light text. Overriding them needs attribute selectors with
   !important, which is what the last two sections do.
   ============================================================ */

/* --- 1. post-content gets the article-body geometry and rhythm --- */
.post-content{max-width:880px;margin:0 auto;padding:0 24px 60px;font-size:17px;line-height:1.8}
.post-content h2{font-size:clamp(22px,3vw,30px);font-weight:700;margin:48px 0 16px;letter-spacing:-0.5px}
.post-content h3{font-size:clamp(18px,2.5vw,22px);font-weight:600;margin:32px 0 12px}
.post-content h4{font-size:18px;font-weight:600;margin:26px 0 10px}
.post-content p{font-size:17px;line-height:1.8;margin:0 0 20px}
.post-content ul,.post-content ol{margin:16px 0 24px 24px}
.post-content li{margin-bottom:8px;line-height:1.7;font-size:16px}
.post-content blockquote{margin:24px 0;padding:16px 20px;border-left:4px solid #047857}
.post-content img{max-width:100%;height:auto;border-radius:12px}
.post-content table{width:100%;border-collapse:collapse;margin:24px 0;font-size:15px}
.post-content th,.post-content td{padding:10px 12px;text-align:left}
.post-content a{text-decoration:none}
.post-content a:hover{text-decoration:underline}
.post-content .key-takeaway,.post-content .key-takeaways,.post-content .editorial-note{
  margin:28px 0;padding:20px 22px;border-radius:10px}

/* --- 2. post-content colours, per theme, matching article-body --- */
:root[data-theme="dark"] .post-content p,
:root[data-theme="dark"] .post-content li{color:#cbd5e1}
/* td/th deliberately NOT coloured here: many tables set the row colour
   inline (tr style="background-color:#1b2a4a;color:white"), and a direct
   th rule beats that inherited white, which measured 1.27:1. Let cells
   inherit instead, so inline header rows keep their own pairing. */
:root[data-theme="dark"] .post-content h2{color:#ffffff}
:root[data-theme="dark"] .post-content h3,
:root[data-theme="dark"] .post-content h4{color:#e2e8f0}
:root[data-theme="dark"] .post-content strong{color:#ffffff}
:root[data-theme="dark"] .post-content a{color:#34d399}
:root[data-theme="dark"] .post-content th,
:root[data-theme="dark"] .post-content td{border-bottom:1px solid rgba(255,255,255,0.14)}
:root[data-theme="light"] .post-content p,
:root[data-theme="light"] .post-content li{color:#334155}
/* td/th deliberately NOT coloured here: many tables set the row colour
   inline (tr style="background-color:#1b2a4a;color:white"), and a direct
   th rule beats that inherited white, which measured 1.27:1. Let cells
   inherit instead, so inline header rows keep their own pairing. */
:root[data-theme="light"] .post-content h2,
:root[data-theme="light"] .post-content h3,
:root[data-theme="light"] .post-content h4{color:#0a1628}
:root[data-theme="light"] .post-content strong{color:#0a1628}
:root[data-theme="light"] .post-content a{color:#047857}
:root[data-theme="light"] .post-content th,
:root[data-theme="light"] .post-content td{border-bottom:1px solid rgba(10,22,40,0.12)}

/* --- 3. the TL;DR / key-takeaway callout, both containers, both themes --- */
:root[data-theme="dark"] :is(.article-body,.post-content) :is(.key-takeaway,.key-takeaways,.editorial-note){
  background:rgba(5,150,105,0.14)!important;border:1px solid rgba(5,150,105,0.38)!important;
  border-left:4px solid #34d399!important}
:root[data-theme="dark"] :is(.article-body,.post-content) :is(.key-takeaway,.key-takeaways,.editorial-note) :is(p,li,strong,span,h2,h3,h4){color:#e2e8f0!important}
:root[data-theme="light"] :is(.article-body,.post-content) :is(.key-takeaway,.key-takeaways,.editorial-note){
  background:#ecfdf5!important;border:1px solid rgba(5,150,105,0.25)!important;
  border-left:4px solid #047857!important}
:root[data-theme="light"] :is(.article-body,.post-content) :is(.key-takeaway,.key-takeaways,.editorial-note) :is(p,li,strong,span,h2,h3,h4){color:#0a1628!important}

/* --- 4. inline pale panels get a dark surface in dark mode --- */
:root[data-theme="dark"] :is(.article-body,.post-content) :is([style*="#f8f9fa" i],[style*="#f9f9f9" i],[style*="#e8f4f8" i],[style*="#f5f6fa" i],[style*="#e8f5e9" i],[style*="#f0f4f8" i],[style*="#f9fafb" i],[style*="#f5f7fa" i],[style*="#fff8e7" i],[style*="#f8f6f0" i],[style*="#f8fafc" i],[style*="#f0f8ff" i],[style*="#f5f5f5" i],[style*="#f1f5f9" i],[style*="#f1f5fa" i],[style*="#f7fafc" i],[style*="#fefce8" i],[style*="#fdf6e3" i]){background:#0f1f38!important;border-color:rgba(255,255,255,0.16)!important}
:root[data-theme="dark"] :is(.article-body,.post-content) :is([style*="#f8f9fa" i],[style*="#f9f9f9" i],[style*="#e8f4f8" i],[style*="#f5f6fa" i],[style*="#e8f5e9" i],[style*="#f0f4f8" i],[style*="#f9fafb" i],[style*="#f5f7fa" i],[style*="#fff8e7" i],[style*="#f8f6f0" i],[style*="#f8fafc" i],[style*="#f0f8ff" i],[style*="#f5f5f5" i],[style*="#f1f5f9" i],[style*="#f1f5fa" i],[style*="#f7fafc" i],[style*="#fefce8" i],[style*="#fdf6e3" i]),
:root[data-theme="dark"] :is(.article-body,.post-content) :is([style*="#f8f9fa" i],[style*="#f9f9f9" i],[style*="#e8f4f8" i],[style*="#f5f6fa" i],[style*="#e8f5e9" i],[style*="#f0f4f8" i],[style*="#f9fafb" i],[style*="#f5f7fa" i],[style*="#fff8e7" i],[style*="#f8f6f0" i],[style*="#f8fafc" i],[style*="#f0f8ff" i],[style*="#f5f5f5" i],[style*="#f1f5f9" i],[style*="#f1f5fa" i],[style*="#f7fafc" i],[style*="#fefce8" i],[style*="#fdf6e3" i]) :is(p,li,td,th,span,strong,em,h2,h3,h4,h5){color:#e2e8f0!important}
:root[data-theme="dark"] :is(.article-body,.post-content) :is([style*="#f8f9fa" i],[style*="#f9f9f9" i],[style*="#e8f4f8" i],[style*="#f5f6fa" i],[style*="#e8f5e9" i],[style*="#f0f4f8" i],[style*="#f9fafb" i],[style*="#f5f7fa" i],[style*="#fff8e7" i],[style*="#f8f6f0" i],[style*="#f8fafc" i],[style*="#f0f8ff" i],[style*="#f5f5f5" i],[style*="#f1f5f9" i],[style*="#f1f5fa" i],[style*="#f7fafc" i],[style*="#fefce8" i],[style*="#fdf6e3" i]) a{color:#34d399!important}

/* --- 5. inline dark ink is unreadable on the navy page in dark mode --- */
:root[data-theme="dark"] :is(.article-body,.post-content) :is([style*="#1b2a4a" i],[style*="#0a1628" i],[style*="#1a3a52" i],[style*="#0d2b5e" i],[style*="#0f172a" i],[style*="#1e293b" i],[style*="#111f38" i],[style*="#13243f" i],[style*="#152a4a" i],[style*="#172d4d" i],[style*="#1f2937" i],[style*="#374151" i],[style*="#0f1e38" i],[style*="#0f1f38" i],[style*="#060e1a" i]):is(h1,h2,h3,h4,h5,p,li,span,strong,em){color:#e2e8f0!important}

/* --- 6. table header rows. Measured on live pages: the light theme
   repaints SOME inline-painted header rows pale and leaves others navy,
   depending on the table's nesting, while the inline color:white
   survives either way. That produced 1.27:1 on one page and 1.09:1 on
   another. Guessing which one wins is what made it fragile, so the
   header row is given an explicit surface AND ink per theme instead.
   Scoped to thead, where a painted row is decoration, never content.
   Forcing the background off an arbitrary inline value was rejected:
   25 of 128 inline-dark table elements declare a dark COLOUR and no
   background, and would have been painted navy by mistake. --- */
:root[data-theme="light"] :is(.article-body,.post-content) thead :is(tr,th,td){
  background-color:#f1f5f9!important;color:#0a1628!important}
:root[data-theme="dark"] :is(.article-body,.post-content) thead :is(tr,th,td){
  background-color:#152a4a!important;color:#ffffff!important}

/* --- 7. figure captions. Measured 3.16:1 in dark mode on this template
   (rgba white at 0.45 on the navy page) and they are 13-14px, so the
   3:1 large-text allowance does not apply to them. --- */
:root[data-theme="dark"] :is(.article-body,.post-content) :is(figcaption,.wp-caption-text,.caption){color:#94a3b8!important}
:root[data-theme="light"] :is(.article-body,.post-content) :is(figcaption,.wp-caption-text,.caption){color:#475569!important}

/* --- 8. links written with an inline dark colour. 17 of them on one
   sampled page measured 1.27:1 in dark mode: rule 5 rewrote headings
   and body text but its element list did not include <a>, and a link
   wants the accent green rather than body ink. --- */
:root[data-theme="dark"] :is(.article-body,.post-content) a:is([style*="#1b2a4a" i],[style*="#0a1628" i],[style*="#1a3a52" i],[style*="#0d2b5e" i],[style*="#0f172a" i],[style*="#1e293b" i],[style*="#111f38" i],[style*="#13243f" i],[style*="#152a4a" i],[style*="#172d4d" i],[style*="#1f2937" i],[style*="#374151" i],[style*="#0f1e38" i],[style*="#0f1f38" i],[style*="#060e1a" i]){color:#34d399!important}

/* --- 9. white panels and table rows written as a NAMED colour or #fff.
   Section 4 matches pale hexes by substring, which cannot include #fff
   because "color:#fff" would match it too and paint text panels. So
   white is matched with the PROPERTY included, which cannot collide.
   Found by sweep: a row at background-color: white held white text in
   dark mode, measuring exactly 1.0:1, i.e. invisible. --- */
:root[data-theme="dark"] :is(.article-body,.post-content) :is([style*="background:white" i],[style*="background:#fff" i],[style*="background:#ffffff" i],[style*="background:snow" i],[style*="background:ivory" i],[style*="background:whitesmoke" i],[style*="background:#f5f5f5" i],[style*="background:#fafafa" i],[style*="background: white" i],[style*="background: #fff" i],[style*="background: #ffffff" i],[style*="background: snow" i],[style*="background: ivory" i],[style*="background: whitesmoke" i],[style*="background: #f5f5f5" i],[style*="background: #fafafa" i],[style*="background-color:white" i],[style*="background-color:#fff" i],[style*="background-color:#ffffff" i],[style*="background-color:snow" i],[style*="background-color:ivory" i],[style*="background-color:whitesmoke" i],[style*="background-color:#f5f5f5" i],[style*="background-color:#fafafa" i],[style*="background-color: white" i],[style*="background-color: #fff" i],[style*="background-color: #ffffff" i],[style*="background-color: snow" i],[style*="background-color: ivory" i],[style*="background-color: whitesmoke" i],[style*="background-color: #f5f5f5" i],[style*="background-color: #fafafa" i]){background-color:#0f1f38!important}
:root[data-theme="dark"] :is(.article-body,.post-content) :is([style*="background:white" i],[style*="background:#fff" i],[style*="background:#ffffff" i],[style*="background:snow" i],[style*="background:ivory" i],[style*="background:whitesmoke" i],[style*="background:#f5f5f5" i],[style*="background:#fafafa" i],[style*="background: white" i],[style*="background: #fff" i],[style*="background: #ffffff" i],[style*="background: snow" i],[style*="background: ivory" i],[style*="background: whitesmoke" i],[style*="background: #f5f5f5" i],[style*="background: #fafafa" i],[style*="background-color:white" i],[style*="background-color:#fff" i],[style*="background-color:#ffffff" i],[style*="background-color:snow" i],[style*="background-color:ivory" i],[style*="background-color:whitesmoke" i],[style*="background-color:#f5f5f5" i],[style*="background-color:#fafafa" i],[style*="background-color: white" i],[style*="background-color: #fff" i],[style*="background-color: #ffffff" i],[style*="background-color: snow" i],[style*="background-color: ivory" i],[style*="background-color: whitesmoke" i],[style*="background-color: #f5f5f5" i],[style*="background-color: #fafafa" i]),
:root[data-theme="dark"] :is(.article-body,.post-content) :is([style*="background:white" i],[style*="background:#fff" i],[style*="background:#ffffff" i],[style*="background:snow" i],[style*="background:ivory" i],[style*="background:whitesmoke" i],[style*="background:#f5f5f5" i],[style*="background:#fafafa" i],[style*="background: white" i],[style*="background: #fff" i],[style*="background: #ffffff" i],[style*="background: snow" i],[style*="background: ivory" i],[style*="background: whitesmoke" i],[style*="background: #f5f5f5" i],[style*="background: #fafafa" i],[style*="background-color:white" i],[style*="background-color:#fff" i],[style*="background-color:#ffffff" i],[style*="background-color:snow" i],[style*="background-color:ivory" i],[style*="background-color:whitesmoke" i],[style*="background-color:#f5f5f5" i],[style*="background-color:#fafafa" i],[style*="background-color: white" i],[style*="background-color: #fff" i],[style*="background-color: #ffffff" i],[style*="background-color: snow" i],[style*="background-color: ivory" i],[style*="background-color: whitesmoke" i],[style*="background-color: #f5f5f5" i],[style*="background-color: #fafafa" i]) :is(p,li,td,th,span,strong,em,h2,h3,h4){color:#e2e8f0!important}
:root[data-theme="dark"] :is(.article-body,.post-content) :is([style*="background:white" i],[style*="background:#fff" i],[style*="background:#ffffff" i],[style*="background:snow" i],[style*="background:ivory" i],[style*="background:whitesmoke" i],[style*="background:#f5f5f5" i],[style*="background:#fafafa" i],[style*="background: white" i],[style*="background: #fff" i],[style*="background: #ffffff" i],[style*="background: snow" i],[style*="background: ivory" i],[style*="background: whitesmoke" i],[style*="background: #f5f5f5" i],[style*="background: #fafafa" i],[style*="background-color:white" i],[style*="background-color:#fff" i],[style*="background-color:#ffffff" i],[style*="background-color:snow" i],[style*="background-color:ivory" i],[style*="background-color:whitesmoke" i],[style*="background-color:#f5f5f5" i],[style*="background-color:#fafafa" i],[style*="background-color: white" i],[style*="background-color: #fff" i],[style*="background-color: #ffffff" i],[style*="background-color: snow" i],[style*="background-color: ivory" i],[style*="background-color: whitesmoke" i],[style*="background-color: #f5f5f5" i],[style*="background-color: #fafafa" i]) a{color:#34d399!important}

/* ============================================================
   10. POST-CONTENT TEMPLATE, PAGE LEVEL LAYOUT (2026-08-20d)

   Reported: the article body was styled last night, and the pages
   still looked broken. Measured on the live site at 1280: h1 and
   .breadcrumb both sit at left 0, width 1280, padding 0, so every
   line of the title and every sidebar link touches the window edge
   and the first glyph is visually shaved.

   CAUSE. These 201 article pages ship <header class="blog-hero"> and
   <aside class="article-sidebar">, while the CSS they carry inline
   styles .article-hero and has no rule at all for .blog-hero,
   .article-grid, .article-sidebar, .sidebar-section, .sidebar-list,
   .sl-date, .sidebar-cta or .sidebar-feature-image. Same class-name
   mismatch as .article-body vs .post-content, one level up: the
   layout CSS exists and matches nothing.

   Values below are lifted from the .article-hero and .related-card
   rules the pages already ship, so both article templates render
   identically. Literal hex only: the --li-* light variables are
   defined ONLY inside the other template's inline CSS, so
   var(--li-ink) resolves to nothing here.
   Every hero rule is scoped to header.blog-hero on purpose: the /blog/
   index and its 13 pagination pages reuse the SAME class name on a
   <section>, and an unscoped rule silently recentred that page's title.
   .blog-hero and .article-sidebar appear on 0 .article-body pages.
   ============================================================ */
main.article-grid{display:block;width:100%}
.article-grid>.article-main{min-width:0}

/* hero: mirrors .article-hero, including the 120px top gutter that
   clears the fixed nav and the 800px centred title */
header.blog-hero{position:relative;padding:120px 24px 60px;text-align:center;
  background:linear-gradient(180deg,rgba(5,150,105,0.06) 0%,transparent 100%)}
header.blog-hero .breadcrumb{font-size:14px;color:#94a3b8;margin-bottom:24px}
header.blog-hero .breadcrumb a{color:#38bdf8;transition:color .2s}
header.blog-hero .breadcrumb a:hover{color:#7dd3fc}
header.blog-hero h1{font-size:clamp(28px,4vw,44px);font-weight:800;letter-spacing:-1px;
  max-width:800px;margin:0 auto 20px;line-height:1.15}
header.blog-hero .article-meta{display:flex;align-items:center;justify-content:center;
  gap:10px;flex-wrap:wrap;font-size:14px}
header.blog-hero .author-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}
:root[data-theme="light"] header.blog-hero{
  background:linear-gradient(180deg,#f0fdf4 0%,#ecfdf5 35%,#ffffff 100%)!important;
  padding-bottom:80px}
:root[data-theme="light"] header.blog-hero h1{color:#0f172a!important}
:root[data-theme="light"] header.blog-hero .breadcrumb{color:#475569!important}
:root[data-theme="light"] header.blog-hero .breadcrumb a{color:#047857!important}
:root[data-theme="light"] header.blog-hero .breadcrumb a:hover{color:#10b981!important}
header.blog-hero{z-index:auto!important}

/* sidebar: same 880px column as the article body, stacked under it,
   in the .related-card visual language. The feature image is the SAME
   hero.png already shown full width at the top of the article, so it
   is hidden rather than repeated. */
.article-sidebar{max-width:880px;margin:0 auto;padding:0 24px 60px}
.article-sidebar .sidebar-feature-image{display:none}
.sidebar-section{margin:0 0 36px}
.sidebar-section h3{font-size:20px;font-weight:700;margin:0 0 20px;color:#fff}
.sidebar-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sidebar-list li{margin:0}
.sidebar-list a{display:block;padding:16px 20px;background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);border-radius:12px;color:#fff;
  text-decoration:none;font-size:15px;font-weight:600;line-height:1.45;transition:all .3s}
.sidebar-list a:hover{background:rgba(255,255,255,0.05);
  border-color:rgba(5,150,105,0.2);transform:translateY(-2px)}
.sidebar-list .sl-date{display:block;margin-top:8px;font-size:12px;
  font-weight:500;color:#94a3b8}
.sidebar-cta{display:block;padding:24px;background:rgba(5,150,105,0.08);
  border:1px solid rgba(5,150,105,0.25);border-radius:14px;text-decoration:none}
.sidebar-cta .cta-eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.5px;color:#34d399;margin-bottom:8px}
.sidebar-cta h4{font-size:18px;font-weight:700;color:#fff;margin:0 0 8px}
.sidebar-cta p{font-size:14px;color:#cbd5e1;margin:0 0 12px;line-height:1.6}
.sidebar-cta .cta-action{font-size:14px;font-weight:700;color:#34d399}
:root[data-theme="light"] .sidebar-section h3{color:#0f172a!important}
:root[data-theme="light"] .sidebar-list a{background:#ffffff!important;
  border-color:#e2e8f0!important;color:#0f172a!important;
  box-shadow:0 1px 3px rgba(15,23,42,0.04)}
:root[data-theme="light"] .sidebar-list a:hover{border-color:rgba(5,150,105,0.25)!important;
  box-shadow:0 8px 24px rgba(15,23,42,0.08)!important}
:root[data-theme="light"] .sidebar-list .sl-date{color:#475569!important}
:root[data-theme="light"] .sidebar-cta{background:#ecfdf5!important;
  border-color:rgba(5,150,105,0.25)!important}
:root[data-theme="light"] .sidebar-cta h4{color:#0f172a!important}
:root[data-theme="light"] .sidebar-cta p{color:#334155!important}
:root[data-theme="light"] .sidebar-cta .cta-eyebrow,
:root[data-theme="light"] .sidebar-cta .cta-action{color:#047857!important}

/* light mode for the related and tools strips. The other template
   ships these inline; this one never did, so in light mode its
   related cards held #fff text on a white card. */
:root[data-theme="light"] .article-grid .related-section{background:#f8fafc;
  padding-top:48px;padding-bottom:60px}
:root[data-theme="light"] .article-grid .tools-section{background:#ecfdf5;
  padding-top:48px;padding-bottom:60px}
:root[data-theme="light"] .article-grid :is(.related-section,.tools-section) h3{color:#0f172a!important}
:root[data-theme="light"] .article-grid .related-card{background:#ffffff!important;
  border:1px solid #e2e8f0!important;box-shadow:0 1px 3px rgba(15,23,42,0.04)}
:root[data-theme="light"] .article-grid .related-card:hover{
  border-color:rgba(5,150,105,0.25)!important;box-shadow:0 8px 24px rgba(15,23,42,0.08)!important}
:root[data-theme="light"] .article-grid .related-card h4{color:#0f172a!important}
:root[data-theme="light"] .article-grid .related-date{color:#475569!important}
:root[data-theme="light"] .article-grid .related-cat{color:#047857!important}

/* ============================================================
   11. BLOG INDEX, DARK MODE (2026-08-20d)

   Surfaced by the A/B sweep for section 10, not by the report:
   /blog/ measured 51 low-contrast elements in dark mode, before and
   after, so this is a standing fault rather than a regression.
   Grouped by cause, 48 of the 51 are one thing: the card category
   label and the Read More link are brand green #059669 on the dark
   card, measuring 4.41 and 4.49, a hair under AA. Section 5 already
   substitutes #34d399 for exactly this pair on related cards.

   NOT changed here, deliberately: the active filter and pagination
   pills are white on #059669 at 3.77, which is the same white-on-green
   the nav CTA uses on every page of the site, so "fixing" it here
   would make this page inconsistent with the brand button everywhere
   else. Footer column headings measure 4.48, a rounding-level miss on
   an element that renders on all 1,359 pages. Both stay open.
   ============================================================ */
:root[data-theme="dark"] :is(.card-cat,.card-link){color:#34d399!important}
:root[data-theme="dark"] section.blog-hero p{color:#94a3b8!important}
:root[data-theme="dark"] .results-count{color:#94a3b8!important}
:root[data-theme="dark"] .pg-btn.pg-disabled{color:#94a3b8!important}

/* bf-steppers-2026-08-21: always-visible chevron steppers for number inputs site-wide.
   Native spinner is hidden (it rendered as a broken hover-only box on dark fields);
   the companion module in site-header.js injects the replacement control. */
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type="number"]{-moz-appearance:textfield;appearance:textfield}
.inf-stepper{position:relative}
.inf-stepper input[type=number]{padding-right:40px}
.step-btns{position:absolute;right:7px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;width:22px;height:34px;border:1px solid rgba(120,130,150,.45);border-radius:6px;overflow:hidden;background:rgba(120,130,150,.10)}
.step-btn{flex:1;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:inherit;opacity:.75;cursor:pointer;padding:0;line-height:1;user-select:none;-webkit-user-select:none;transition:background .15s,opacity .15s}
.step-btn:first-child{border-bottom:1px solid rgba(120,130,150,.30)}
.step-btn:hover{background:rgba(5,150,105,.22);opacity:1}
.step-btn:focus-visible{outline:2px solid #34d399;outline-offset:1px}
.step-btn svg{display:block}