/* breakdown.css — Hidden before/after comparison section inherited from the template. */

.breakdown{ display: grid; grid-template-columns: 0.8fr 1.4fr; align-items: center; gap: 80px; padding-top: 50px; padding-bottom: 50px; background: rgb(12, 10, 10); overflow: hidden; }
.breakdown-copy > .eyebrow{ color: var(--muted); font-size: 9px; display: block; margin-bottom: 24px; }
.breakdown-copy h2{ font-size: clamp(48px, 6vw, 90px); line-height: 1.07; margin-bottom: 24px; letter-spacing: -0.02em; }
.breakdown-copy > p{ font-size: 12px; color: var(--muted); max-width: 280px; }
.breakdown-credit{ display: block; font-size: 8px; line-height: 1.8; margin-top: 25px; color: var(--muted); }
.comparison{ min-width: 0px; }
.comparison-stage{ aspect-ratio: 1.75 / 1; position: relative; background: rgb(20, 20, 20); isolation: isolate; overflow: hidden; border: 1px solid rgb(51, 38, 42); }
.comparison-stage > .media-image, .comparison-final{ position: absolute; inset: 0px; }
.comparison-final{ clip-path: inset(0 0 0 var(--cut)); z-index: 2; }
.comparison-final > .media-image{ height: 100%; }
.comparison-label{ position: absolute; top: 14px; font-size: 8px; padding: 6px 8px; background: rgba(9, 9, 9, 0.733); z-index: 3; }
.raw-label{ left: 14px; }
.final-label{ right: 14px; }
.comparison-divider{ position: absolute; left: var(--cut); top: 0px; bottom: 0px; width: 1px; background: rgb(248, 239, 237); z-index: 3; pointer-events: none; }
.comparison-divider > span{ position: absolute; left: 0px; top: 50%; transform: translate(-50%, -50%); background: var(--red); display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgb(245, 182, 187); }
.comparison-stage > input{ position: absolute; inset: 0px; width: 100%; height: 100%; opacity: 0; margin: 0px; cursor: ew-resize; z-index: 4; touch-action: pan-y; }
.comparison-stage:focus-within{ outline: 2px solid var(--red); outline-offset: 4px; }
.comparison-caption{ display: flex; justify-content: space-between; gap: 15px; margin-top: 13px; color: var(--muted); font-size: 8px; }

@media (max-width: 1100px){
.breakdown{ gap: 40px; }
.breakdown-copy h2{ font-size: 60px; }
.breakdown-copy > p{ font-size: 11px; }
}

@media (max-width: 600px){
.breakdown{ grid-template-columns: 1fr; gap: 25px; padding: 30px 20px; }
.breakdown-copy > .eyebrow{ font-size: 8px; margin-bottom: 17px; }
.breakdown-copy h2{ font-size: 45px; margin-bottom: 16px; }
.breakdown-copy h2 br{ display: none; }
.breakdown-copy h2 > .accent{ margin-left: 9px; }
.breakdown-copy > p{ font-size: 12px; max-width: 100%; }
.breakdown-credit{ font-size: 8px; margin-top: 15px; }
.comparison-stage{ aspect-ratio: 1.5 / 1; }
.comparison-label{ font-size: 7px; top: 10px; }
.raw-label{ left: 10px; }
.final-label{ right: 10px; }
.comparison-caption{ font-size: 7px; }
.comparison-divider > span{ width: 44px; height: 44px; }
}

/* cascade-pinned: overrides a rule in an earlier-loading file, so it must stay in this file */
.primary-link, .solid-button, .render-controls > div:first-child > button.selected, .comparison-divider > span{ background: var(--button-red); }

@media (max-width: 600px){
.breakdown-copy h2 br{ display: block; }
.breakdown-copy h2 > .accent{ margin-left: 0px; }
}

section.breakdown[hidden]{display:none!important}
#cmpRaw img,#cmpFinal img{width:100%;height:100%;object-fit:cover;display:block}