/* An editorial account of the clinical context, separate from product specifications. */
.jc-page { --jc-ink: #2e4e6a; --jc-muted: #4b6077; --jc-rule: #cad8e3; color: var(--jc-ink); background: #fff; }
.jc-page .eyebrow { color: #466b8c; font-size: .72rem; font-weight: 600; letter-spacing: .15em; }
main .jc-page h1, main .jc-page h2, main .jc-page h3 { color: var(--jc-ink); font-family: var(--font-display); }
main .jc-page h1 { max-width: 12ch; margin: 1.25rem 0 1.75rem; font-size: clamp(3.6rem, 7vw, 6.8rem); line-height: 1.04; font-weight: 600; letter-spacing: -.055em; }
main .jc-page h1 > span { color: #ffc000; }
main .jc-page h2 { margin: .8rem 0 0; font-size: clamp(1.9rem, 3.25vw, 3rem); line-height: 1.18; font-weight: 500; letter-spacing: -.035em; }
main .jc-page h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.jc-page p { color: var(--jc-muted); font-size: 1rem; line-height: 1.8; }
.jc-hero { padding-block: clamp(3rem, 6vw, 5.5rem); }
.jc-hero__layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: 5rem; align-items: center; }
.jc-page .jc-hero__headline { margin-bottom: 1.5rem; color: var(--jc-ink); font-family: var(--font-display); font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.45; letter-spacing: -.02em; }
.jc-hero__intro { max-width: 39rem; margin: 0; }
.jc-guide { padding-left: 2rem; border-left: 1px solid var(--jc-rule); }
.jc-guide > span { color: #7b90a3; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.jc-guide ol { margin: 1rem 0 0; padding: 0; list-style: none; }
.jc-guide a { display: flex; align-items: baseline; gap: .85rem; padding-block: .85rem; border-bottom: 1px solid #e1e8ee; color: var(--jc-ink); font-size: .85rem; text-decoration: none; }
.jc-guide b { color: #8194a7; font-size: .65rem; font-weight: 400; }
.jc-guide i { margin-left: auto; color: #2676bb; font-style: normal; }
.jc-guide a:hover { color: #1678d7; }
.jc-page a:focus-visible { outline: 2px solid #1678d7; outline-offset: 4px; }
.jc-numbers { padding-block: 3rem; background: #ffe080; }
.jc-numbers__heading { display: flex; justify-content: space-between; gap: 2rem; align-items: baseline; }
main .jc-numbers h2 { margin: 0; font-size: 1.2rem; font-weight: 500; letter-spacing: -.01em; }
.jc-numbers dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 2rem 0 1.5rem; }
.jc-numbers dl > div { display: flex; align-items: center; gap: 2rem; padding-right: 2rem; }
.jc-numbers dl > div + div { padding-left: 2.5rem; padding-right: 0; border-left: 1px solid #d9c999; }
.jc-numbers dt { color: #2e4e6a; font-family: var(--font-display); font-size: clamp(4.5rem, 9vw, 8.5rem); font-weight: 400; line-height: 1; letter-spacing: -.07em; white-space: nowrap; }
.jc-numbers dt > span { margin-left: .1em; font-size: .4em; letter-spacing: -.04em; }
.jc-numbers dd { max-width: 15rem; margin: 0; }
.jc-numbers dd strong { display: block; font-size: .95rem; font-weight: 600; line-height: 1.5; }
.jc-numbers dd > span { display: block; margin-top: .5rem; color: #556374; font-size: .85rem; line-height: 1.65; }
.jc-page .jc-source-note { max-width: 50rem; margin: 0; color: #6a6d66; font-size: .75rem; }
.jc-cite { display: inline-block; margin-left: .2em; color: #286ba1; font-size: .7rem; font-weight: 500; line-height: 1; text-decoration: none; vertical-align: .15em; }
.jc-cite:hover { text-decoration: underline; }
.jc-chapter { padding-block: clamp(3.5rem, 6vw, 6rem); scroll-margin-top: 6rem; }
.jc-chapter__layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; gap: clamp(2rem, 6vw, 6rem); }
.jc-page .jc-lead { margin: 0 0 1.5rem; color: var(--jc-ink); font-family: var(--font-display); font-size: clamp(1.15rem, 1.5vw, 1.4rem); line-height: 1.6; letter-spacing: -.015em; }
.jc-prose > p:last-of-type { margin-bottom: .5rem; }
.jc-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; margin: 3.5rem 0 0; padding: 0; list-style: none; }
.jc-flow li { position: relative; padding-top: 1.5rem; border-top: 1px solid var(--jc-rule); }
.jc-flow li::before { position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; content: ''; background: #ffc000; }
.jc-flow li > span { display: block; margin-bottom: .8rem; color: #7a8fa3; font-size: .65rem; }
.jc-flow h3 { margin-bottom: .6rem; }
.jc-flow p { max-width: 23rem; margin: 0; font-size: .9rem; }
.jc-risk { background: #2e4e6a; }
.jc-risk .eyebrow { color: #b1c9dd; }
main .jc-risk h2 { max-width: 26ch; margin-bottom: 2.5rem; color: #fff; font-size: clamp(2.2rem, 4.5vw, 4.25rem); line-height: 1.12; }
.jc-risk__layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 5rem; align-items: start; }
.jc-risk .jc-lead { color: #fff; }
.jc-risk p { color: #bacee0; }
.jc-risk .jc-cite { color: #e8c963; }
.jc-risk aside { padding-left: 2rem; border-left: 1px solid #55708d; }
.jc-risk aside > span { display: block; margin: -.15em 0 .8rem; color: #ffc000; font-family: var(--font-display); font-size: 5rem; line-height: 1; letter-spacing: -.05em; }
.jc-risk aside > span > span { margin-left: .15em; font-size: 2rem; }
main .jc-risk aside h3 { color: #fff; font-size: 1rem; }
.jc-risk aside p { margin-bottom: 0; font-size: .85rem; }
.jc-section-intro { max-width: 45rem; margin: 1.5rem 0 0; }
.jc-methods { margin: 3rem 0 0; padding: 0; list-style: none; }
.jc-methods li { display: grid; grid-template-columns: 2rem minmax(0, .7fr) minmax(0, 1.3fr); gap: 1.5rem; padding-block: 2rem; border-top: 1px solid var(--jc-rule); }
.jc-methods__number { padding-top: .3rem; color: #8194a7; font-size: .7rem; }
.jc-methods h3 { max-width: 20ch; }
.jc-methods p { margin-bottom: .6rem; font-size: .94rem; }
.jc-methods .jc-methods__limit { margin: 0; color: #2e4e6a; font-size: .85rem; }
.jc-page .jc-takeaway { max-width: 44rem; margin: 2rem 0 0 3.5rem; padding-left: 1.5rem; border-left: 3px solid #ffc000; color: #2e4e6a; font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.65rem); line-height: 1.5; letter-spacing: -.015em; }
.jc-care { background: #f5f9fd; }
.jc-bridge { padding-block: clamp(3.5rem, 6vw, 5.5rem); border-bottom: 1px solid var(--jc-rule); }
.jc-bridge p { margin-bottom: 1.5rem; }
.jc-bridge a { display: inline-flex; gap: 1.25rem; align-items: center; padding-bottom: .6rem; border-bottom: 1px solid #88a6bf; color: #5b9bd5; font-size: .95rem; font-weight: 500; text-decoration: none; }
.jc-bridge a:hover { color: #2e4e6a; }
.jc-sources { padding-block: 2.5rem; }
main .jc-sources h2 { margin: 0 0 1rem; font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.jc-sources ol { columns: 2; column-gap: 3rem; margin: 0; padding-left: 1.25rem; }
.jc-sources li { break-inside: avoid; padding: .35rem 0; color: #8293a3; font-size: .75rem; line-height: 1.7; scroll-margin-top: 6rem; }
.jc-sources a { color: #55758f; text-decoration: none; }
.jc-sources a:hover { text-decoration: underline; }
@media (max-width: 991.98px) {
  .jc-hero__layout { gap: 2rem; }
  .jc-guide { padding-left: 1.5rem; }
  .jc-numbers dl > div { gap: 1.25rem; padding-right: 1.5rem; }
  .jc-numbers dl > div + div { padding-left: 1.5rem; }
  .jc-risk__layout { gap: 2.5rem; }
  .jc-methods li { grid-template-columns: 1.5rem minmax(0, .7fr) minmax(0, 1.3fr); gap: 1rem; }
}
@media (max-width: 767.98px) {
  .jc-hero__layout { grid-template-columns: 1fr; gap: 2.5rem; }
  main .jc-page h1 { font-size: clamp(3.2rem, 12vw, 4.8rem); }
  .jc-guide { padding-left: 0; border-left: 0; }
  .jc-guide ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
  .jc-guide a { gap: .5rem; font-size: .75rem; }
  .jc-numbers__heading { display: block; }
  main .jc-numbers h2 { margin-top: .8rem; }
  .jc-numbers dl { grid-template-columns: 1fr; gap: 1.5rem; }
  .jc-numbers dl > div { gap: 1.75rem; padding-right: 0; }
  .jc-numbers dl > div + div { padding: 1.5rem 0 0; border-left: 0; border-top: 1px solid #d9c999; }
  .jc-numbers dt { min-width: 8rem; font-size: 5.5rem; }
  .jc-numbers dd strong { font-size: .9rem; }
  .jc-chapter__layout, .jc-risk__layout { grid-template-columns: 1fr; gap: 1.75rem; }
  .jc-flow { grid-template-columns: 1fr; gap: 1.75rem; margin-top: 2rem; }
  .jc-flow li { padding-top: 1.25rem; }
  .jc-flow p { max-width: none; }
  .jc-risk aside { margin-top: 1rem; }
  .jc-methods li { grid-template-columns: 1.25rem minmax(0, 1fr); gap: .75rem; padding-block: 1.5rem; }
  .jc-methods li > div { grid-column: 2; }
  .jc-methods h3 { max-width: none; }
  .jc-page .jc-takeaway { margin-left: 0; }
  .jc-sources ol { columns: 1; }
}

/* Diagnostic approaches are illustrated on an open plate, without card containers. */
.jc-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
.jc-methods li { display: block; padding: 0; border: 0; min-width: 0; }
.jc-methods__graphic { margin: 0 0 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--jc-rule); }
.jc-method-drawing { display: block; width: 100%; height: 175px; fill: none; stroke: #214e75; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jc-method-drawing__body { fill: #f7fafc; }
.jc-method-drawing .jc-method-drawing__fill { fill: #214e75; }
.jc-method-drawing .jc-method-drawing__guide { stroke: #a8bdcf; stroke-dasharray: 3 5; stroke-width: 1; }
.jc-method-drawing .jc-method-drawing__accent { stroke: #ffc000; stroke-width: 3; }
.jc-method-drawing .jc-method-drawing__sample { fill: #bc8478; stroke: none; }
.jc-methods__graphic figcaption { color: #6c8297; font-size: .7rem; }
.jc-methods__graphic figcaption > span { margin-right: 1rem; color: #1f639b; }
.jc-methods h3 { max-width: none; min-height: 3.1rem; margin-bottom: .8rem; }
.jc-methods li > div > p:first-child { min-height: 8rem; }
.jc-methods .jc-methods__limit { border-left: 2px solid #edbb31; padding-left: 1rem; font-size: .85rem; }
.jc-methods__limit > strong { display: block; margin-bottom: .6rem; color: #55718b; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.jc-page .jc-takeaway { margin-left: 0; }
.jc-pathways { margin-top: 3.5rem; padding: 2rem; border: 1px solid var(--jc-rule); border-radius: 1rem; background: #f8fbfd; }
.jc-pathways > h3 { margin-bottom: 2rem; }
.jc-pathway { position: relative; padding: 1.5rem 1.5rem 1.75rem; border: 1px solid #dce7ef; border-radius: .75rem; background: #fff; }
.jc-pathway + .jc-pathway { margin-top: 2rem; }
.jc-pathway__label { display: block; margin-bottom: 1.75rem; color: #536f87; font-size: 1rem; font-weight: 600; text-align: center; }
.jc-pathway__duration { position: absolute; top: 1.25rem; right: 1.5rem; display: inline-flex; align-items: center; gap: .45rem; color: #536f87; font-size: 1rem; font-weight: 600; white-space: nowrap; }
.jc-pathway__duration > span { font-size: 1.2rem; line-height: 1; }
.jc-pathway ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; margin: 0; padding: 0; list-style: none; }
.jc-pathway--poc ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.jc-pathway li { position: relative; min-height: 3.5rem; padding: 2rem .75rem 0; color: #536f87; font-size: .8rem; line-height: 1.5; text-align: center; }
.jc-pathway li:not(:last-child)::before { position: absolute; z-index: 0; top: .65rem; left: 50%; width: 100%; height: 4px; content: ''; background: #9fb5c7; }
.jc-pathway li:not(:last-child)::after { position: absolute; z-index: 1; top: calc(.65rem + 2px); right: -.25rem; width: .65rem; height: .65rem; content: ''; border-top: 4px solid #9fb5c7; border-right: 4px solid #9fb5c7; transform: translateY(-50%) rotate(45deg); }
.jc-pathway--poc .jc-pathway__label { color: #2e4e6a; }
.jc-pathway--poc li { color: #2e4e6a; }
.jc-pathway--poc .jc-pathway__duration { color: #ffc000; }
.jc-pathway--poc li:not(:last-child)::before { background: #ffc000; }
.jc-pathway--poc li:not(:last-child)::after { top: calc(.65rem + 2px); border-color: #ffc000; }
.jc-page .jc-pathways__note { margin: 1.5rem 0 0; color: #6e8295; font-size: .73rem; }
.jc-response { margin-top: 4rem; scroll-margin-top: 6rem; }
.jc-response__layout { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); margin-top: 2.5rem; }
.jc-response__layout > figure { margin: 0; }
.jc-response__layout img { display: block; width: 100%; height: 28rem; object-fit: contain; }
.jc-response__layout figcaption { margin-top: .75rem; text-align: center; color: #7790a6; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }
.jc-response__items { margin: 0; padding: 0; list-style: none; }
.jc-response__items li { padding-block: 1.4rem; border-top: 1px solid var(--jc-rule); }
.jc-response__items li:first-child { padding-top: 0; border-top: 0; }
.jc-response__need { display: block; margin-bottom: .6rem; color: #6a8094; font-size: .7rem; letter-spacing: .02em; }
.jc-response__items h3 { margin-bottom: .75rem; font-size: 1.35rem; }
.jc-response__items p { margin: 0; font-size: .93rem; }
.jc-response__footer { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--jc-rule); }
.jc-response__footer p { max-width: 45rem; margin-bottom: 1.25rem; color: #6b8194; font-size: .75rem; }
.jc-response__footer > a { display: inline-flex; gap: 1.25rem; align-items: center; color: #5b9bd5; padding-bottom: .5rem; border-bottom: 1px solid #a2bbcf; font-size: .9rem; font-weight: 500; text-decoration: none; }
.jc-response__footer > a:hover { color: #2e4e6a; }
@media (max-width: 991.98px) {
  .jc-methods { gap: 1.5rem; }
  .jc-methods li > div > p:first-child { min-height: 11rem; }
  .jc-pathway { padding-inline: 1rem; }
}
@media (max-width: 767.98px) {
  .jc-methods { grid-template-columns: 1fr; gap: 2.5rem; }
  .jc-methods li > div > p:first-child { min-height: 0; margin-bottom: 1rem; }
  .jc-methods h3 { min-height: 0; }
  .jc-method-drawing { height: 155px; }
  .jc-pathways { padding: 1rem; }
  .jc-pathway { padding: 1.25rem .75rem 1.5rem; }
  .jc-pathway + .jc-pathway { margin-top: 1.25rem; }
  .jc-pathway__duration { position: static; justify-content: center; margin: -.75rem 0 1.25rem; }
  .jc-pathway ol, .jc-pathway--poc ol { grid-template-columns: 1fr; }
  .jc-pathway li, .jc-pathway li:last-child { min-height: 0; padding: 1.75rem 1rem .75rem; }
  .jc-pathway li:not(:last-child)::before { top: 0; left: 50%; width: 4px; height: 100%; background: #9fb5c7; }
  .jc-pathway li:not(:last-child)::after { top: auto; right: auto; bottom: -.2rem; left: calc(50% - .3rem); border-top: 0; border-right: 4px solid #9fb5c7; border-bottom: 4px solid #9fb5c7; transform: rotate(45deg); }
  .jc-pathway--poc li:not(:last-child)::before { background: #ffc000; }
  .jc-pathway--poc li:not(:last-child)::after { border-color: #ffc000; }
  .jc-response__layout { grid-template-columns: 1fr; gap: 2rem; }
  .jc-response__layout img { height: 20rem; }
  .jc-response { margin-top: 3rem; }
}
