/* JCC shared legibility and content-gutter correction — 2026-07-20. */
:root {
  --jcc-content-gutter: clamp(32px, 4.5vw, 80px);
  --jcc-content-width: 1240px;
  --jcc-readable-heading: #242424;
  --jcc-readable-label: #565656;
}

/* Keep principal page copy away from viewport edges on every template. */
main .wrap,
main .jcc-section,
main .jcc-support-copy > div,
main .jcc-support-visual-wrap {
  width: min(calc(100% - (2 * var(--jcc-content-gutter))), var(--jcc-content-width)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Correct low-contrast section labels and headings on light backgrounds. */
body main .section-kicker,
body main .jcc-support-kicker,
body main .eyebrow:not(.image-hero .eyebrow):not([class*="hero"] .eyebrow),
body.page-articles main .section-kicker {
  color: var(--jcc-readable-label) !important;
  -webkit-text-fill-color: var(--jcc-readable-label) !important;
  opacity: 1 !important;
}

body main .section h1,
body main .section h2,
body main .section h3,
body main .jcc-support-copy h1,
body main .jcc-support-copy h2,
body main .jcc-support-copy h3 {
  color: var(--jcc-readable-heading) !important;
  -webkit-text-fill-color: var(--jcc-readable-heading) !important;
}

/* Preserve light text on genuinely dark panels and image heroes. */
body main .image-hero h1,
body main .image-hero h2,
body main .image-hero h3,
body main .image-hero .eyebrow,
body main .final-focus h1,
body main .final-focus h2,
body main .final-focus h3,
body main .final-focus .section-kicker,
body main [data-theme="dark"] h1,
body main [data-theme="dark"] h2,
body main [data-theme="dark"] h3 {
  color: #f5f5f5 !important;
  -webkit-text-fill-color: #f5f5f5 !important;
}

@media (max-width: 760px) {
  :root { --jcc-content-gutter: 24px; }
}

@media (max-width: 380px) {
  :root { --jcc-content-gutter: 20px; }
}

/* Follow-up coverage: support-page labels, readiness gutters and dark closing CTA. */
main .readiness-wrap {
  width: min(calc(100% - (2 * var(--jcc-content-gutter))), 1180px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.jcc-page-support main .jcc-support-kicker,
body.jcc-page-support main .eyebrow:not(.image-hero .eyebrow):not([class*="hero"] .eyebrow) {
  color: var(--jcc-readable-label) !important;
  -webkit-text-fill-color: var(--jcc-readable-label) !important;
  opacity: 1 !important;
}
body main .readiness-section.readiness-section--dark {
  color: #ffffff !important;
  background: #303030 !important;
  border-color: #424242 !important;
}
body main .readiness-section.readiness-section--dark h1,
body main .readiness-section.readiness-section--dark h2,
body main .readiness-section.readiness-section--dark h3 {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
body main .readiness-section.readiness-section--dark .readiness-eyebrow,
body main .readiness-section.readiness-section--dark p,
body main .readiness-section.readiness-section--dark li {
  color: #e7e7e7 !important;
  -webkit-text-fill-color: #e7e7e7 !important;
}