.lca-content { width: min(947px, 100%); }
.lca-introduction-hold {
    height: calc(100svh - var(--header-height) + var(--lca-introduction-pause, 100svh));
}
.lca-introduction {
    min-height: calc(100svh - var(--header-height));
    display: grid;
    place-items: center;
    padding: clamp(72px, 10vw, 150px) 24px;
    position: sticky;
    top: var(--header-height);
}
.lca-introduction p {
    width: min(900px, 100%);
    margin: 0;
    color: #373737;
    font: 400 20px/30px var(--font-main);
    letter-spacing: 0;
}
.lca-content h2, .lca-findings h2 {
    font: 600 20px/30px var(--font-main);
    margin: 0 0 22px;
    text-wrap: initial;
}
.lca-content p, .lca-findings__copy { font: 400 20px/30px var(--font-main); color: #373737; }
.lca-content p { margin: 0 0 30px; }
.lca-content--combined > p {
    width: min(900px, 100%);
    margin: 0 auto 16px;
}
.lca-content--combined .lca-system-summary {
    margin: 18px auto 0;
}
.lca-pie-layout { display: grid; grid-template-columns: minmax(0, 402px) minmax(0, 248px); align-items: center; justify-content: center; gap: 32px 54px; margin: 40px 0 0; }
.lca-content--combined .lca-pie-layout {
    grid-template-columns: minmax(0, 320px) minmax(0, 210px);
    gap: 22px 46px;
    margin-top: 20px;
}
.lca-content--combined .lca-pie {
    width: 320px;
    max-width: 100%;
    justify-self: center;
}
.lca-content--combined .lca-legend-image {
    width: 210px;
}
.lca-pie { position: relative; width: 100%; aspect-ratio: 402 / 401; }
.chapter-motion-ready [data-lca-chart="pie"] .lca-pie {
    clip-path: inset(0 var(--pie-crop-right, 100%) 0 0);
    -webkit-clip-path: inset(0 var(--pie-crop-right, 100%) 0 0);
    will-change: clip-path;
}
.lca-pie__fill {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Reverse the conic sweep: reveal counter-clockwise instead of clockwise. */
    mask-image: conic-gradient(transparent 0deg calc(360deg - var(--pie-angle, 360deg)), #000 calc(360deg - var(--pie-angle, 360deg)) 360deg);
    -webkit-mask-image: conic-gradient(transparent 0deg calc(360deg - var(--pie-angle, 360deg)), #000 calc(360deg - var(--pie-angle, 360deg)) 360deg);
}
.lca-legend-image { width: 248px; max-width: 100%; height: auto; }
.chapter-motion-ready [data-lca-chart="pie"] .lca-legend-image {
    clip-path: inset(var(--legend-crop-top, 100%) 0 0 0);
    -webkit-clip-path: inset(var(--legend-crop-top, 100%) 0 0 0);
    will-change: clip-path;
}
.lca-pie-caption { grid-column: 1 / -1; text-align: center; }
.lca-content .lca-pie-caption h2 { margin: 0; font: 700 24px/30px var(--font-main); letter-spacing: 0; color: #2a2b5f; }
.lca-findings [data-slide-side] { transform: translateX(var(--slide-x, 0px)); will-change: transform; }
.lca-findings { width: min(947px, 100%); display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 66px; align-items: start; }
.lca-device-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 173px)); gap: 32px 34px; }
.lca-device-grid img { width: 100%; height: auto; border-radius: 20px; }
.lca-device-grid img:first-child { border-top-left-radius: 60px; }
.lca-device-grid img:last-child { border-bottom-right-radius: 60px; }
.lca-findings__copy ul { padding-left: 22px; margin: 0; }
.lca-findings__copy li { margin-bottom: 30px; }
.lca-findings .lca-findings__copy h2 {
    font-family: "IBM Plex Sans Condensed", var(--font-main);
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 0;
    color: #373737;
}
/* Begin the next section while the previous groups are almost outside the viewport.
   A transparent stage lets the outgoing content finish its horizontal exit. */
.chapter-motion-ready .lca-dashboard-scene {
    position: relative;
    z-index: 2;
    margin-top: calc(-1 * var(--dashboard-overlap, 65svh));
}
.lca-dashboard-scene .sticky-stage { background: transparent; }
.lca-dashboard__visual { position: relative; margin: 0 auto 28px; width: min(798px, 100%); }
.lca-dashboard__monitor { position: relative; display: block; width: 100%; aspect-ratio: 798 / 566; cursor: pointer; }
.lca-dashboard__monitor:focus-visible { outline: 3px solid var(--mint); outline-offset: 6px; }
.lca-dashboard__frame { position: relative; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.lca-dashboard__screen {
    position: absolute;
    z-index: 1;
    /* 17px left, 26px top, 764x384 within a 798x566 frame. */
    left: 2.1303258%;
    top: 4.5936396%;
    width: 95.7393484%;
    height: 67.844523%;
    object-fit: contain;
}
.lca-dashboard__link {
    --dashboard-pointer-x: 0px;
    position: absolute;
    top: 42%;
    right: -22%;
    z-index: 3;
    display: block;
    width: 239px;
    height: 56px;
    cursor: pointer;
    transform: translateX(var(--dashboard-pointer-x));
    will-change: transform;
    transition: opacity 180ms var(--motion-ease);
}
.lca-dashboard__link:hover,
.lca-dashboard__link:focus-visible { opacity: 0.82; }
.lca-dashboard__link img { display: block; width: 100%; height: 100%; }
@media (max-width: 1000px) {
    .lca-findings { grid-template-columns: minmax(220px, 35%) 1fr; gap: 32px; }
    .lca-device-grid { gap: 18px; }
}
@media (max-width: 700px) {
    .lca-stage { padding: 28px 20px; }
    .lca-introduction { padding: 72px 20px; }
    .lca-introduction p { font-size: 17px; line-height: 25px; }
    .lca-content p, .lca-findings__copy { font-size: 17px; line-height: 25px; }
    .lca-content h2, .lca-findings h2 { font-size: 19px; line-height: 26px; }
    .lca-pie-layout { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 20px; margin-top: 24px; }
    .lca-pie { width: min(240px, 60vw); }
    .lca-content--combined > p { margin-bottom: 14px; }
    .lca-content--combined .lca-system-summary { margin: 14px auto 0; }
    .lca-content--combined .lca-pie-layout { margin-top: 18px; gap: 16px; }
    .lca-content--combined .lca-pie { width: min(220px, 56vw); }
    .lca-content--combined .lca-legend-image { width: min(210px, 62vw); }
    .lca-findings { grid-template-columns: 1fr; gap: 28px; }
    .lca-device-grid { max-width: 380px; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: auto; }
    .lca-findings__copy li { margin-bottom: 18px; }
    .lca-dashboard__link { position: relative; inset: auto; margin: 16px auto 0; transform: none; will-change: auto; }
}
/* Keep tall content scrollable instead of trapping it in a short sticky viewport. */
@media (max-height: 740px), (max-width: 700px) {
    .chapter-motion-ready .lca-dashboard-scene { margin-top: 0; }
    .lca-scene:has(.lca-findings) { height: auto; }
    .lca-scene:has(.lca-findings) .sticky-stage { position: relative; top: auto; }
    .lca-findings [data-enter-step] { opacity: 1; transform: none; }
    .lca-findings [data-slide-side] { transform: none; will-change: auto; }
}
html:not(.chapter-motion-ready) .lca-scene [data-enter-step] { opacity: 1; transform: none; }
@media (max-height: 650px), (max-width: 700px), (prefers-reduced-motion: reduce) {
    .chapter-motion-ready .lca-dashboard-scene { margin-top: 0; }
    .lca-findings [data-slide-side] { transform: none; will-change: auto; }
    .lca-scene { height: auto; }
    .lca-scene .sticky-stage { position: relative; top: auto; }
    .lca-pie__fill { mask-image: none; -webkit-mask-image: none; }
    .chapter-motion-ready [data-lca-chart="pie"] .lca-pie,
    .chapter-motion-ready [data-lca-chart="pie"] .lca-legend-image {
        opacity: 1;
        clip-path: inset(0);
        -webkit-clip-path: inset(0);
        will-change: auto;
    }
    .lca-scene [data-enter-step] { opacity: 1; transform: none; }
    .lca-dashboard__link { transform: none; will-change: auto; }
}
