/* Article layout only. Hero, content shell, typography and CTA use the shared
   marketing blocks, theme classes and color tokens used by About and Services. */
.exposure-guide { max-width: 860px; margin: 0 auto; }
.exposure-guide .eg-article { text-align: left; }
.exposure-guide :is(section, li[id]) { scroll-margin-top: 120px; }
.exposure-guide :is(a, summary):focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.exposure-guide a { color: var(--teal); text-decoration: underline; text-underline-offset: 4px; }
.exposure-guide .eg-toc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; margin: 40px 0 64px; padding-block: 28px; border-block: 1px solid rgba(255, 255, 255, .12); }
.exposure-guide .eg-toc > p { grid-column: 1 / -1; margin-bottom: 0; }
.exposure-guide .eg-toc a { display: flex; gap: 12px; align-items: baseline; }
.exposure-guide .eg-toc span { color: var(--grayLight); }
.exposure-guide .eg-article section { margin-bottom: 56px; padding-bottom: 40px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.exposure-guide .eg-section-number, .exposure-guide .eg-label { color: var(--teal); }
.exposure-guide .eg-source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-block: 28px; }
.exposure-guide .eg-source { padding: 28px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; background: rgba(255, 255, 255, .04); }
.exposure-guide .eg-note { padding: 24px 28px; border-left: 3px solid var(--teal); background: rgba(255, 255, 255, .04); margin-block: 28px; }
.exposure-guide :is(.eg-note, .eg-source) > p:last-child { margin-bottom: 0; }
.exposure-guide .eg-dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; padding: 0; margin: 28px 0; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; overflow: hidden; }
.exposure-guide .eg-dates li { padding: 24px; margin: 0; border-right: 1px solid rgba(255, 255, 255, .12); }
.exposure-guide .eg-dates li:last-child { border: 0; }
.exposure-guide .eg-dates strong { display: block; margin: 12px 0; }
.exposure-guide .eg-dates p { margin-bottom: 0; }
.exposure-guide .eg-scenarios > div { margin-top: 28px; padding-left: 24px; border-left: 1px solid rgba(255, 255, 255, .2); }
.exposure-guide .eg-checks { list-style: disc outside; padding-left: 24px; }
.exposure-guide .eg-response { list-style: decimal outside; padding-left: 28px; }
.exposure-guide .eg-response li { padding-left: 10px; margin-bottom: 28px; }
.exposure-guide .eg-response li::marker { color: var(--teal); }
.exposure-guide details { border-top: 1px solid rgba(255, 255, 255, .12); padding: 22px 0; }
.exposure-guide summary { cursor: pointer; line-height: 1.6; }
.exposure-guide details p { margin: 20px 0 0; }
.exposure-guide .eg-cite { white-space: nowrap; font-size: .75em; }
.exposure-guide .eg-references ol { list-style: decimal outside; padding-left: 24px; }
@media (max-width: 767px) {
    .exposure-guide .eg-toc, .exposure-guide .eg-source-grid, .exposure-guide .eg-dates { grid-template-columns: 1fr; }
    .exposure-guide .eg-dates li { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
    .exposure-guide .eg-source, .exposure-guide .eg-note, .exposure-guide .eg-dates li { padding: 22px; }
    .exposure-guide .eg-article section { margin-bottom: 36px; padding-bottom: 28px; }
}

/* Diagrams use real text and decorative SVGs so they remain readable at zoom,
   on mobile and with assistive technology, without image downloads or scripts. */
.exposure-guide .eg-icon { display: block; width: 32px; height: 32px; flex: 0 0 auto; color: var(--teal); }
.exposure-guide .eg-visual { margin: 32px 0; padding: 28px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; background: rgba(255, 255, 255, .025); }
.exposure-guide .eg-visual > figcaption { color: var(--textLight); margin-bottom: 28px; }
.exposure-guide .eg-visual-icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 20px; border: 1px solid var(--teal); border-radius: 12px; background: var(--tealDark); position: relative; z-index: 1; }
.exposure-guide .eg-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; list-style: none; margin: 0; padding: 0; }
.exposure-guide .eg-flow li { position: relative; margin: 0; text-align: center; }
.exposure-guide .eg-flow .eg-visual-icon { margin-inline: auto; }
.exposure-guide .eg-flow li:not(:last-child)::after { content: '→'; position: absolute; top: 12px; right: -29px; color: var(--teal); font-size: 24px; }
.exposure-guide .eg-flow strong { display: block; margin-bottom: 12px; }
.exposure-guide .eg-flow p { margin-bottom: 0; }
.exposure-guide .eg-visual .eg-visual-caption { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 18px; margin: 24px 0 0; color: var(--grayLight); font-size: .875rem; }
.exposure-guide .eg-timeline .eg-dates { overflow: visible; border: 0; border-radius: 0; margin: 0; gap: 24px; }
.exposure-guide .eg-timeline .eg-dates li { border: 0; padding: 0; position: relative; }
.exposure-guide .eg-timeline .eg-dates li:not(:last-child)::after { content: ''; position: absolute; top: 29px; left: 58px; width: calc(100% - 34px); border-top: 1px dashed var(--teal); }
.exposure-guide .eg-scenarios > div { position: relative; padding-left: 68px; border: 0; }
.exposure-guide .eg-scenario-icon { position: absolute; top: 0; left: 0; padding: 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); }
.exposure-guide .eg-response { list-style: none; padding: 0; }
.exposure-guide .eg-response li { position: relative; padding: 0 0 28px 84px; margin: 0; min-height: 94px; }
.exposure-guide .eg-response li:not(:last-child)::before { content: ''; position: absolute; left: 27px; top: 56px; bottom: 0; border-left: 1px solid var(--teal); opacity: .5; }
.exposure-guide .eg-response-marker { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid var(--teal); border-radius: 12px; background: var(--tealDark); }
.exposure-guide .eg-step-number { position: absolute; right: -8px; bottom: -8px; font-size: .75rem; line-height: 1; padding: 5px; background: var(--tealDark); color: var(--teal); }
@media (max-width: 767px) {
    .exposure-guide .eg-visual { padding: 22px; }
    .exposure-guide .eg-flow { grid-template-columns: 1fr; gap: 48px; }
    .exposure-guide .eg-flow li:not(:last-child)::after { content: '↓'; top: auto; right: calc(50% - 9px); bottom: -39px; }
    .exposure-guide .eg-timeline .eg-dates { gap: 28px; }
    .exposure-guide .eg-timeline .eg-dates li { padding-left: 40px; }
    .exposure-guide .eg-timeline .eg-visual-icon { width: 48px; height: 48px; }
    .exposure-guide .eg-timeline .eg-dates li::before { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); top: 20px; left: 0; }
    .exposure-guide .eg-timeline .eg-dates li:not(:last-child)::after { top: 28px; left: 3px; width: 0; height: 100%; border-top: 0; border-left: 1px dashed var(--teal); }
    .exposure-guide .eg-scenarios > div { padding-left: 56px; }
    .exposure-guide .eg-scenario-icon { padding: 6px; }
    .exposure-guide .eg-response li { padding-left: 72px; }
}