/*
 * Reusable SVG visuals
 * --------------------
 * Fixed illustrations and symbols live in assets/svg/visuals/.
 * This file controls placement only; the artwork geometry lives in the SVGs.
 */ .arch-icon, .model-core, .chapter-mark, .path-visual, .validation-visual, .hazard-visual, .solution-icon, .impact-story-mark {
    display: block;
    object-fit: contain;
}
.arch-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 34px;
    padding: 0;
}
.model-core {
    position: sticky;
    top: 150px;
    grid-row: 1 / 4;
    align-self: start;
    width: 238px;
    height: 238px;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 18px 45px rgba(8, 27, 48, 0.08);
}
.chapter-mark {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: transparent;
}
.approach-path .path-visual {
    position: relative;
    width: 116px;
    height: 116px;
    margin: 0 auto 28px;
    border-radius: 50%;
    background: transparent;
}
.validation-visual {
    position: relative;
    width: 100%;
    max-width: 500px;
    min-height: 0;
    height: auto;
}
.hazard-visual {
    width: 210px;
    height: auto;
    margin-top: 34px;
}
.solution-icon {
    position: relative;
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    object-position: center;
}
.solution-summary .solution-icon {
    margin-bottom: 32px;
}
.summary-impact .solution-icon {
    margin-left: 5px;
}
.summary-agents .solution-icon {
    margin-left: 2px;
}
.solution-heading .solution-icon {
    width: 68px;
    height: 68px;
    margin-top: 3px;
}
.impact-story-mark {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border: 0;
    background: transparent;
}
@media (max-width: 900px) {
    .validation-visual {
        max-width: 470px;
  }
}
@media (max-width: 760px) {
    .validation-visual {
        max-width: 420px;
        transform: none;
  }
    .approach-path .path-visual {
        grid-row: 1 / 5;
        width: 88px;
        height: 88px;
        margin: 0;
  }
}