/* Real, paired source frames. Both states stay visible, including on phones. */
.transformations{background:#edf3e8;border-block:1px solid #d9e4d2}
.transformations .section-head{align-items:center}
.transformations .section-head>p{max-width:380px}
.comparison-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;max-width:1180px;margin-inline:auto}
.comparison-card{min-width:0;background:#fbfcf8;border:1px solid #d4e0cb;border-radius:22px;padding:20px;box-shadow:0 8px 24px #264d3510}
.comparison-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}
.comparison-heading h3{font-size:21px;line-height:1.4;font-weight:500;margin:0;color:#214f3c}
.comparison-heading>span{font-size:11px;letter-spacing:1px;color:#64775e}
.comparison-open{display:block;width:100%;padding:0;border:0;background:none;color:inherit;text-align:inherit;cursor:zoom-in;border-radius:12px}
.comparison-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;direction:rtl}
.comparison-panel{display:flex;min-width:0;flex-direction:column;border-radius:12px;overflow:hidden;background:#e5e8e0}
.comparison-label{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:44px;padding:10px 13px;background:#e6e6dd;color:#39483b;line-height:1.4}
.comparison-label b{font-size:17px;font-weight:600}
.comparison-label small{font-size:10px}
.comparison-panel:last-child .comparison-label{background:#285a44;color:#fff}
.comparison-panel img{display:block;width:100%;height:auto;aspect-ratio:480/854;object-fit:contain;background:#e5e8e0}
.comparison-expand{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;font-size:11px;color:#4b6550}
.comparison-expand .ui-icon{width:12px;height:12px}
.comparison-videos{display:flex;justify-content:center;gap:8px;border-top:1px solid #e0e7d9;padding-top:12px}
.comparison-videos button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:9px 17px;border:1px solid #ccd9c3;border-radius:30px;background:#f5f8ef;color:#30583f;font:inherit;font-size:12px;cursor:pointer}
.comparison-videos .ui-icon{width:12px;height:12px}
.comparison-note{max-width:650px;margin:26px auto 0;text-align:center;font-size:12px;line-height:1.9;color:#52664d}
.comparison-open:focus-visible,.comparison-videos button:focus-visible{outline:3px solid #477e59;outline-offset:4px}
#viewer.comparison-mode{width:min(900px,95vw);max-width:95vw;padding-top:54px}
#player .comparison-view{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;direction:rtl}
#player .comparison-view figure{margin:0;min-width:0}
#player .comparison-view figcaption{padding:9px 12px;background:#e6e6dd;color:#39483b;font-size:17px;font-weight:600;border-radius:10px 10px 0 0;text-align:center}
#player .comparison-view figure:last-child figcaption{background:#285a44;color:white}
#player .comparison-view img{width:100%;height:auto;max-height:66dvh;object-fit:contain;aspect-ratio:480/854;background:#f1f3ec}
@media(hover:hover) and (pointer:fine){.comparison-open:hover .comparison-expand{text-decoration:underline}.comparison-videos button:hover{background:#e6efd9}}
@media(max-width:760px){.comparison-grid{grid-template-columns:1fr;gap:20px}.comparison-card{padding:12px;border-radius:18px}.comparison-heading{margin:5px 4px 14px}.comparison-heading h3{font-size:18px}.comparison-heading>span{font-size:10px}.comparison-pair{gap:6px}.comparison-label{padding:9px;min-height:44px;flex-wrap:wrap;column-gap:8px}.comparison-label b{font-size:16px}.comparison-label small{font-size:9px}.comparison-panel{border-radius:9px}.comparison-videos{gap:7px;padding-top:10px}.comparison-videos button{font-size:11px;padding:9px 13px}.comparison-note{font-size:11px;margin-top:21px}#viewer.comparison-mode{padding-inline:10px}#player .comparison-view{gap:6px}#player .comparison-view figcaption{font-size:16px}}
@media(max-width:370px){.comparison-label small{display:none}.comparison-heading h3{font-size:17px}}