/* v607 — readability layer v2. Presentation only: no selector here changes, hides, reorders or
 * generates text, so words, headings, links, register strings and JSON-LD are byte-identical.
 * Everything is scoped under html.sk-read-v2, which default-header-sections.php sets on every
 * route except 93rd (f) window routes until 2026-10-22 (date guard, v586 precedent). */

/* 1. Contrast — light surfaces (WCAG AA 4.5:1 for body-size text) ------------------------ */
html.sk-read-v2{--sk-accent-text:#1a6aa8}                                  /* v422 token: 4.40 -> 5.30 on #f0f7ff */
html.sk-read-v2 :is(.section-light,.bg-white,.bg-gray-50,.bg-slate-50,main) :is(.text-secondary\/40,.text-secondary\/50,.text-secondary\/55,.text-secondary\/60){color:rgba(25,51,64,.74)!important}
html.sk-read-v2 :is(.bg-black,.bg-secondary,.bg-gray-900,.section-dark) :is(.text-secondary\/40,.text-secondary\/50,.text-secondary\/55,.text-secondary\/60){color:inherit!important}
/* accent as body text on light (#1f8adf = 3.38:1 on #f0f7ff) -> #1a6aa8 (5.3:1); headings keep #1f8adf (large text, 3:1 passes) */
html.sk-read-v2 :is(.section-light,.bg-white,.bg-gray-50,.bg-slate-50) :is(p,li,td,dd,figcaption,small) .accent-text,
html.sk-read-v2 :is(.section-light,.bg-white,.bg-gray-50,.bg-slate-50) :is(p,li,td).accent-text{color:#1a6aa8!important}
html.sk-read-v2 .sk-prose a,
html.sk-read-v2 :is(.section-light,.bg-white) .blog-content a{color:#1a6aa8}
html.sk-read-v2 :is(.section-light,.bg-white,.bg-gray-50) a.text-blue-500{color:#1a6aa8}
html.sk-read-v2 :is(button,a).bg-blue-500{background-color:#2563eb}          /* white text 5.2:1 (was 3.7:1) */
html.sk-read-v2 :is(button,a).bg-blue-500:hover{background-color:#1d4ed8}
html.sk-read-v2 :is(.section-light,.bg-white) .text-gray-400{color:#5b6472}    /* was #9ca3af, 2.4:1 */
html.sk-read-v2 :is(.section-light,.bg-white,.bg-gray-50,.bg-slate-50) .text-gray-500{color:#5b6472} /* was 4.48 on #f0f7ff */
html.sk-read-v2 :is(.section-light,.bg-white,.bg-gray-50,.bg-slate-50) :is(p,li,td,span) a.text-accent,
html.sk-read-v2 :is(.section-light,.bg-white,.bg-gray-50,.bg-slate-50) :is(p,li,td).text-accent{color:#1a6aa8}
/* dark surfaces: grey-500 captions on #0d0d0d are 4.0:1 at 10-12px */
html.sk-read-v2 :is(.bg-black,.bg-secondary,footer) .text-gray-500{color:#a1a8b3}

/* 2. Weight and size — font-light (300) body copy is the single biggest readability drag */
html.sk-read-v2 :is(.section-light,.bg-white) :is(p,li).font-light{font-weight:400}
html.sk-read-v2 :is(.section-light,.bg-white) p.font-light.text-secondary{color:#24404d}
@media (max-width:767px){
  html.sk-read-v2 main p.text-\[10px\],html.sk-read-v2 main p.text-\[11px\]{font-size:12px;line-height:1.5}
  html.sk-read-v2 footer.text-\[10px\],html.sk-read-v2 footer .text-\[10px\]{font-size:12px}
}

/* 3. Reading measure — cap long-form paragraphs at ~70 characters per line on desktop */
html.sk-read-v2 main :is(.max-w-5xl,.max-w-6xl,.max-w-7xl) :is(.space-y-10,.space-y-8,.space-y-6)>div>p,
html.sk-read-v2 main :is(.max-w-5xl,.max-w-6xl,.max-w-7xl)>p{max-width:70ch}

/* 4. Long-form subsections (h3 + paragraphs, the "wall" pattern on 50+ service/industry pages)
 *    become cards with a numbered accent rail. Pure CSS: counters render as ::before content,
 *    which is not in the DOM text, not indexed, and not read by crawlers. */
html.sk-read-v2 main .space-y-10:has(>div>h3+p){counter-reset:skrd}
html.sk-read-v2 main .space-y-10>div:has(>h3+p){counter-increment:skrd;position:relative;background:#fff;border:1px solid #dbe7f3;border-left:4px solid #1f8adf;border-radius:14px;padding:22px 22px 18px 22px}
html.sk-read-v2 main .space-y-10>div:has(>h3+p)>h3{display:flex;gap:12px;align-items:baseline}
html.sk-read-v2 main .space-y-10>div:has(>h3+p)>h3::before{content:counter(skrd,decimal-leading-zero);font-size:.8rem;font-weight:900;color:#1a6aa8;background:#e6f1fc;border-radius:999px;padding:3px 9px;flex:none;letter-spacing:0}
html.sk-read-v2 main .space-y-10>div:has(>h3+p)>p+p{margin-top:.9rem}
@media (min-width:768px){html.sk-read-v2 main .space-y-10>div:has(>h3+p){padding:28px 32px 24px}}

/* 5. Mobile section rhythm — py-32/py-40 sections were 128-160px top and bottom on a 390px screen */
@media (max-width:767px){
  html.sk-read-v2 main>section:not(:first-child).py-32,html.sk-read-v2 section#contact{padding-top:4.5rem!important;padding-bottom:4.5rem!important}
  html.sk-read-v2 main>section:not(:first-child).py-40{padding-top:5rem!important;padding-bottom:5rem!important}
  html.sk-read-v2 main>section:not(:first-child).pt-32{padding-top:4.5rem!important}
  html.sk-read-v2 main>section:not(:first-child).pb-40{padding-bottom:5rem!important}
}

/* 6. Paragraph runs — give consecutive plain paragraphs in light sections a visible rhythm */
html.sk-read-v2 :is(.section-light,.bg-white) :is(.blog-content,.sk-prose) p+p{margin-top:1rem}
html.sk-read-v2 :is(.blog-content,.sk-prose)>h2+p{font-size:1.08em;color:#193340}

/* 7. "On this page" box (v607 T5, built by site-v2-2.js; not in served HTML) */
html.sk-read-v2 .sk-otp{max-width:56rem;margin:24px auto;padding:0 24px}
html.sk-read-v2 .sk-otp details{background:#fff;border:1px solid #dbe7f3;border-radius:14px;padding:14px 18px}
html.sk-read-v2 .sk-otp summary{cursor:pointer;font-weight:800;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:#193340}
html.sk-read-v2 .sk-otp ol{margin:12px 0 4px;padding-left:1.2rem;columns:2;column-gap:32px}
html.sk-read-v2 .sk-otp a{color:#1a6aa8;text-decoration:none;font-weight:600;line-height:1.9}
html.sk-read-v2 .sk-otp a:hover{text-decoration:underline}
@media (max-width:767px){html.sk-read-v2 .sk-otp ol{columns:1}}