/* Shared readability and accessibility contract; loaded after page styles. */
:root {
    --jc-text-body: 1rem;
    --jc-text-detail: .875rem;
    --jc-text-label: .75rem;
    --jc-brand-blue: #00b5ff;
    --jc-brand-green: #00ffc0;
    --jc-light-accent: #006b88;
}

main { overflow-wrap: break-word; }
main h3 { line-height: 1.35; }
main li, main small, main figcaption { line-height: 1.5; }
main article, main article > div { min-width: 0; }
.jc-brand-jera { color: var(--jc-brand-blue); }
.jc-brand-code { color: var(--jc-brand-green); }
.jc-ta-assessment .jc-brand-jera, .jc-oe-engine .jc-brand-jera { color: var(--jc-brand-blue); }
.jc-ta-assessment .jc-brand-code, .jc-oe-engine .jc-brand-code { color: var(--jc-brand-green); }

.jc-skip-link {
    background: #00ffc0;
    color: #002b22;
    font-size: var(--jc-text-body);
    font-weight: 800;
    left: 16px;
    padding: 12px 20px;
    position: fixed;
    top: 12px;
    transform: translateY(-180%);
    transition: none;
    z-index: 2000;
}
.jc-skip-link:focus { color: #002b22; transform: translateY(0); }
body :is(a, button, input, textarea, select, summary):focus-visible {
    box-shadow: 0 0 0 2px #fff;
    outline: 3px solid #00796c;
    outline-offset: 3px;
}
#main-content { scroll-margin-top: 100px; }
#main-content:focus, #body:focus { outline: none; }

/* Bright mint is reserved for dark surfaces. */
.jc-how-section .jc-eyebrow,
.jc-feature-finish .jc-eyebrow,
.jc-feature-ai .jc-eyebrow,
.jc-fit-section .jc-eyebrow { color: var(--jc-light-accent); }
.jc-how-grid a, .jc-how-grid a:hover, .jc-how-grid a:focus { color: #00465c; }
:is(.jc-auto-light, .jc-ai-light, .jc-cs-light, .jc-cs-tinted, .jc-si-light,
    .jc-tp-light, .jc-ta-light, .jc-oe-light, .jc-ab-light, .jc-ct-light,
    .jc-ex-light, .jc-ex-tinted) .jc-eyebrow { color: var(--jc-light-accent); }
.jc-cases-page .jc-cs-section.jc-cs-light .jc-eyebrow { color: var(--jc-light-accent); }
.jc-auto-target-panels .jc-scope-good h3,
.jc-decision-keep h3, .jc-cs-building-blocks .jc-cs-step-label,
.jc-cs-releases span, .jc-cs-text-link,
.jc-ta-good h3, .jc-ta-depth h3,
.jc-oe-good h3, .jc-oe-project h3, .jc-oe-team-jera h3,
.jc-ongoing-page .jc-oe-team-message, .jc-oe-step-number,
.jc-ab-good h3, .jc-ab-flow-comparison .jc-ab-good h3,
.jc-ab-equation strong, .jc-ab-equation > span,
.jc-ab-spectrum-step strong, .jc-ab-spectrum-plus,
.jc-ab-nebraska .jc-ab-note, .jc-ex-equation > span,
.jc-ex-teal h3, .jc-ex-avoided h3,
.jc-cs-details summary, .jc-cs-callout strong { color: var(--jc-light-accent); }
.jc-decision-fix h3, .jc-ex-blue h3 { color: #006580; }
.jc-decision-replace h3, .jc-ta-caution h3, .jc-ex-red h3,
.jc-ta-matrix tbody tr:last-child .jc-ta-critical strong,
.jc-ta-critical span { color: #a92d45; }
.jc-ta-matrix tbody tr:first-child td strong { color: var(--jc-light-accent); }

/* Use Automate It's compact badge treatment everywhere, without growing it with body copy. */
main :is(.jc-familiar-ai > span, .jc-finish-ai-card > span, .jc-auto-badge,
    .jc-ai-badge, .jc-cs-badge, .jc-si-badge, .jc-tp-badge, .jc-ta-badge, .jc-oe-badge) {
    border-radius: 2px;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: normal;
    line-height: 1.2;
    padding: 4px 6px;
    right: 6px;
    top: 6px;
    white-space: nowrap;
}

/* Light surfaces use blue accents; mint stays on dark panels and filled brand CTAs. */
main :is(.jc-feature-finish, .jc-feature-ai, .jc-fit-section, .jc-how-section,
    .jc-fix-light, .jc-finish-light, .jc-auto-light, .jc-ai-light, .jc-cs-light,
    .jc-cs-tinted, .jc-si-light, .jc-tp-light, .jc-ta-light, .jc-oe-light,
    .jc-ab-light, .jc-ct-light, .jc-ex-light, .jc-ex-tinted)
    :is(.jc-eyebrow, .jc-service-number) { color: var(--jc-light-accent) !important; }
main :is(.jc-feature-finish, .jc-feature-ai, .jc-fit-section, .jc-how-section,
    .jc-fix-light, .jc-finish-light, .jc-auto-light, .jc-ai-light, .jc-cs-light,
    .jc-cs-tinted, .jc-si-light, .jc-tp-light, .jc-ta-light, .jc-oe-light,
    .jc-ab-light, .jc-ct-light, .jc-ex-light, .jc-ex-tinted) .jc-eyebrow::before {
    background: var(--jc-light-accent);
}
main :is(.jc-feature-finish, .jc-feature-ai, .jc-fit-section, .jc-how-section,
    .jc-fix-light, .jc-finish-light, .jc-auto-light, .jc-ai-light, .jc-cs-light,
    .jc-cs-tinted, .jc-si-light, .jc-tp-light, .jc-ta-light, .jc-oe-light,
    .jc-ab-light, .jc-ct-light, .jc-ex-light, .jc-ex-tinted)
    i:not(:where(.jc-feature-image i, .jc-production-card i, .jc-si-monitor i, .jc-button i,
        .jc-scope-bad i, .jc-compare-bad i, .jc-outcome-no i, .jc-decision-replace i,
        .jc-ab-bad i, .jc-ta-caution i, .jc-oe-caution i, .jc-ai-bad i)) {
    color: var(--jc-light-accent) !important;
}
main :is(.jc-feature-finish, .jc-feature-ai, .jc-fit-section, .jc-how-section,
    .jc-fix-light, .jc-finish-light, .jc-auto-light, .jc-ai-light, .jc-cs-light,
    .jc-cs-tinted, .jc-si-light, .jc-tp-light, .jc-ta-light, .jc-oe-light,
    .jc-ab-light, .jc-ct-light, .jc-ex-light, .jc-ex-tinted)
    li:not(:where(.jc-scope-bad li, .jc-compare-bad li, .jc-outcome-no li,
        .jc-fit-not li, .jc-ab-bad li, .jc-ta-caution li, .jc-oe-caution li,
        .jc-ai-crosses li, .jc-cs-crosses li, .jc-tp-crosses li, .jc-ex-crosses li,
        .jc-production-card li))::before { color: var(--jc-light-accent) !important; }
.jc-checklist-light strong, .jc-feature-finish h3, .jc-feature-ai h3,
.jc-compare-good h3, .jc-outcome-yes h3,
main :is(.jc-finish-light, .jc-auto-light, .jc-ai-light, .jc-cs-light,
    .jc-si-light, .jc-tp-light) .jc-scope-good h3,
.jc-si-light .jc-scope-good h3 a, .jc-ai-good h3, .jc-si-neutral h3,
.jc-si-ownership strong, .jc-si-owner-nodes strong, .jc-si-patterns h3,
.jc-cases-page .jc-cs-metric strong, .jc-cases-page .jc-cs-category,
.jc-cases-page .jc-cs-study-takeaway, .jc-cases-page .jc-cs-callout span {
    color: var(--jc-light-accent);
}
main :is(.jc-compare-good, .jc-outcome-yes, .jc-scope-panel.jc-scope-good,
    .jc-finish-before-after .jc-scope-good) li::before {
    background: var(--jc-light-accent);
    color: #fff !important;
    font-size: 10px;
    height: 16px;
    top: 3px;
    width: 16px;
}
.jc-ai-permission-lane > *::after, .jc-ai-workflow ol > li::before,
.jc-cs-releases > li::after, .jc-tp-scope-flow > *::after,
.jc-tp-decisions > li::after, .jc-oe-months > li::after,
.jc-oe-modernization > li::after, .jc-ab-flow li::after,
.jc-ex-spectrum > li::after, .jc-cs-process > li::after,
.jc-oe-team > span, .jc-cs-equation-symbol, .jc-si-flow > span,
.jc-si-result-arrow, .jc-ta-evidence-row > span,
.jc-ta-before-after > span, .jc-oe-before-after > span, .jc-tp-result-arrow {
    color: var(--jc-light-accent) !important;
}
main :is(.jc-feature-finish, .jc-feature-ai, .jc-fit-section, .jc-how-section,
    .jc-fix-light, .jc-finish-light, .jc-auto-light, .jc-ai-light, .jc-cs-light,
    .jc-cs-tinted, .jc-si-light, .jc-tp-light, .jc-ta-light, .jc-oe-light,
    .jc-ab-light, .jc-ct-light, .jc-ex-light, .jc-ex-tinted)
    a:not(.jc-button):is(:hover, :focus-visible) { color: #00465c !important; }

.jc-integration-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Half-width hero diagrams need room for readable labels, not six squeezed columns. */
.jc-ta-system-inputs, .jc-oe-diagram-nodes, .jc-tp-problem-nodes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 18px;
}
.jc-ta-system-inputs > span, .jc-oe-diagram-nodes > span, .jc-tp-problem-nodes > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Native lazy-loaded art preserves the composition without eager CSS image requests. */
.jc-lazy-art { height: 100%; inset: 0; object-fit: cover; object-position: center; position: absolute; width: 100%; }
.jc-services-page :is(.jc-diagnostics-image, .jc-finish-image, .jc-ai-image, .jc-automation-visual, .jc-integration-visual, .jc-fit-section, .jc-services-final) { background-image: none; }
.jc-automation-visual::after { background: linear-gradient(180deg, rgba(1, 15, 24, .02) 38%, rgba(1, 15, 24, .9)); content: ''; inset: 0; position: absolute; }
.jc-fit-section, .jc-services-final { isolation: isolate; overflow: hidden; position: relative; }
.jc-fit-section > .container, .jc-services-final > .container { position: relative; z-index: 2; }
.jc-fit-section::after, .jc-services-final::after { content: ''; inset: 0; position: absolute; z-index: 1; }
.jc-fit-section::after { background: linear-gradient(90deg, #eff7f9 0%, #eff7f9 58%, rgba(239, 247, 249, .72) 72%, rgba(239, 247, 249, .08)); }
.jc-services-final::after { background: linear-gradient(90deg, rgba(2, 16, 27, .96) 0%, rgba(2, 16, 27, .9) 48%, rgba(2, 16, 27, .22) 85%); }
.jc-fit-section > .jc-lazy-art, .jc-services-final > .jc-lazy-art { object-position: center right; }

@media (max-width: 767px) {
    .jc-fit-section::after { background: rgba(239, 247, 249, .94); }
    .jc-integration-actions { flex-direction: column; align-items: flex-start; }
}

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