.pp-comparison{margin:48px 0;padding:32px 0;border-block:1px solid var(--pd-line,#bda17e);display:grid;gap:24px;min-width:0;scroll-margin-top:calc(var(--header-height,94px) + var(--section-nav-height,54px) + 24px)}
.pp-comparison h2{font:400 clamp(34px,4vw,48px)/1.1 var(--serif);color:var(--pd-ink,#35251f);margin:16px 0 20px}
.pp-comparison h2 em{font-weight:400;color:var(--pd-accent,#704729)}
.ba-title{font:500 20px/1.4 var(--serif);color:var(--pd-ink,#35251f);margin:0 0 14px}
.ba-instruction,.ba-touch-hint{font:400 16px/1.6 var(--sans);color:var(--pd-muted,#594839)}
.ba-visual{min-width:0}
.ba-stage{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:8px;isolation:isolate;overflow:hidden;border-radius:16px;background:var(--pd-dark,#28211e)}
.ba-layer{position:relative;overflow:hidden;aspect-ratio:800/1224;min-width:0;grid-row:1}
.ba-before{grid-column:1}.ba-after{grid-column:2}
.ba-photo{position:absolute;inset:0;overflow:hidden}
.ba-photo img{display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;pointer-events:none;user-select:none}
.ba-layer[data-crop="left-half"] img,.ba-layer[data-crop="right-half"] img{width:200%;object-fit:fill}
.ba-layer[data-crop="right-half"] img{left:-100%}
.ba-label{position:absolute;z-index:2;top:14px;padding:7px 12px;background:#211821e8;color:#fff;font:500 16px/1.3 var(--sans);border:1px solid #ffffff55;border-radius:999px;pointer-events:none}
.ba-before-label{left:14px}.ba-after-label{right:14px}
.ba-mode{display:inline-flex;flex-wrap:wrap;gap:4px;border:1px solid var(--pd-line,#bda17e);border-radius:12px;padding:4px;margin:8px 0 20px;background:var(--pd-surface,#fffaf3)}
.ba-mode[hidden],.ba-range[hidden],.ba-divider[hidden],.ba-touch-hint[hidden]{display:none}
.ba-mode button{font:500 16px/1.4 var(--sans);padding:12px 15px;min-height:48px;border:0;border-radius:8px;background:transparent;color:var(--pd-accent,#704729);cursor:pointer}
.ba-mode button[aria-pressed="true"]{background:var(--pd-accent,#704729);color:var(--pd-light,#fff5e8)}
.ba-stage.is-slider{display:block;aspect-ratio:800/1224;max-width:400px;margin-inline:auto;touch-action:pan-y}
.ba-stage.is-slider .ba-layer{position:absolute;inset:0;aspect-ratio:auto;grid-column:auto}
.ba-stage.is-slider .ba-before{clip-path:inset(0 calc(100% - var(--ba-position)) 0 0)}
.ba-stage.is-slider .ba-after{clip-path:inset(0 0 0 var(--ba-position))}
.ba-divider{position:absolute;z-index:3;inset:0 auto 0 var(--ba-position);width:3px;transform:translateX(-50%);background:#fff;box-shadow:0 0 8px #0008;pointer-events:none}
.ba-divider>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fffaf3;color:#432238;border:1px solid #43223855;box-shadow:0 3px 15px #0004}
.ba-divider svg{width:32px;height:24px}
.ba-range{position:absolute;z-index:4;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.ba-stage:has(.ba-range:focus-visible){outline:3px solid var(--pd-accent,#704729);outline-offset:5px}
.ba-mode button:focus-visible{outline:3px solid var(--pd-accent,#704729);outline-offset:3px}
.ba-touch-hint{text-align:center;margin:12px 0 0}
.pg-compare-link{display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:auto;color:inherit;font:500 16px/1.5 var(--sans);min-height:44px;margin-top:6px;text-decoration:underline;text-underline-offset:4px}
@media(min-width:760px){.pp-comparison{grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:30px;align-items:center;padding-block:40px}.pp-comparison:has(.ba-stage:not(.is-slider)) {grid-template-columns:1fr}.pp-comparison:has(.ba-stage:not(.is-slider)) .ba-intro{max-width:580px}.ba-stage:not(.is-slider){max-width:740px;margin-inline:auto}}
@media print{.ba-stage.is-slider{display:grid;aspect-ratio:auto;max-width:none;grid-template-columns:1fr 1fr}.ba-stage.is-slider .ba-layer{position:relative;aspect-ratio:800/1224;clip-path:none}.ba-stage.is-slider .ba-before{grid-column:1}.ba-stage.is-slider .ba-after{grid-column:2}.ba-mode,.ba-range,.ba-divider,.ba-touch-hint{display:none!important}}

@media(max-width:759px){.pp-comparison{gap:14px;padding-block:24px}.pp-comparison h2{font-size:34px;margin:12px 0}.ba-title{font-size:18px;margin-bottom:12px}.ba-instruction{display:none}.ba-mode{margin:0}}