.comparison-section{background:var(--surface);overflow:clip}
.comparison-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,7vw,100px);align-items:center}
.comparison-copy h2{margin:24px 0;font-size:clamp(44px,4.4vw,66px)}
.comparison-copy h2 em{color:var(--gold)}
.comparison-copy>p:not(.eyebrow){max-width:40ch;color:var(--muted)}
.comparison-copy .button{margin-top:26px;font-size:13px;padding-inline:24px}
.comparison-figure{margin:0;min-width:0}
.comparison-stage{--comparison-position:50%;position:relative;aspect-ratio:1.08;background:#0c0c0c;border-radius:24px;overflow:hidden;isolation:isolate;touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;contain:layout paint}
.comparison-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.comparison-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--comparison-position)) 0 0)}
.comparison-stage:focus-within{outline:2px solid var(--gold);outline-offset:5px}
.comparison-label{position:absolute;top:18px;padding:7px 12px;background:#0b0b0bd9;color:var(--cream);font-size:12px;border-radius:999px;pointer-events:none}
.comparison-label-before{left:18px}.comparison-label-after{right:18px}
.comparison-divider{position:absolute;inset-block:0;left:var(--comparison-position);width:1px;background:var(--gold);pointer-events:none}
.comparison-knob{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--gold);color:var(--ink);box-shadow:0 2px 16px #0005}
.comparison-knob .icon{width:25px;height:25px}
.comparison-range{position:absolute;width:1px;height:1px;margin:0;padding:0;opacity:0;clip-path:inset(50%)}
.comparison-presets{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:16px;min-height:46px}
.comparison-presets .button{min-height:46px;padding:12px 18px;font-size:12px}
.comparison-presets [hidden]{display:none}
.comparison-figure figcaption{font-size:12px;line-height:1.65;color:var(--muted);margin-top:17px;text-align:center}
.comparison-help{display:block;color:var(--cream);margin-bottom:6px}
@media(min-width:701px) and (max-width:860px){.comparison-grid{gap:32px}.comparison-copy h2{font-size:44px}}
@media(max-width:700px){
  .comparison-section{padding-block:65px}.comparison-grid{grid-template-columns:1fr;gap:29px}
  .comparison-copy h2{font-size:clamp(38px,10vw,50px);margin:20px 0}
  .comparison-copy .button{margin-top:21px;padding-inline:20px}
  .comparison-stage{aspect-ratio:1;border-radius:20px}
  .comparison-label{top:14px;font-size:11px;padding:6px 9px}.comparison-label-before{left:12px}.comparison-label-after{right:12px}
  .comparison-presets{gap:8px}.comparison-presets .button{font-size:12px;padding-inline:14px}
}
/* Real client cases: one pair visible at a time, switched by comparison.js. */
.comparison-cases,.comparison-case{position:absolute;inset:0}
.comparison-cases-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px}
.comparison-cases-nav[hidden]{display:none}
.comparison-step{width:46px;min-height:46px;padding:12px}
.comparison-step .icon{width:20px;height:20px}
.comparison-dots{display:flex;align-items:center;gap:2px}
.comparison-dot{width:28px;height:28px;padding:0;border:0;background:none;display:grid;place-items:center;border-radius:50%}
.comparison-dot::before{content:"";width:9px;height:9px;border-radius:50%;border:1px solid var(--gold);transition:background-color 180ms,transform 180ms var(--ease)}
.comparison-dot[aria-current="true"]::before{background:var(--gold);transform:scale(1.15)}
.comparison-dot:focus-visible{outline:2px solid var(--gold);outline-offset:0}
@media(hover:hover) and (pointer:fine){.comparison-dot:hover::before{background:#ddbd7d66}.comparison-dot[aria-current="true"]:hover::before{background:var(--gold)}}
@media(max-width:700px){.comparison-cases-nav{gap:8px}.comparison-dots{gap:0}}