.tint-comparison{padding:80px 0;background:radial-gradient(ellipse at 90% 0,#46121d40,transparent 60%),#080608}.comparison-heading{margin-bottom:32px}.comparison-heading h2{font-size:clamp(32px,4vw,56px);line-height:1.12;margin:16px 0}.comparison-heading h2 span{color:#f63856}.comparison-heading>p:last-child{font-size:16px;color:#c3b7bd}.comparison-frame{position:relative;aspect-ratio:3/2;overflow:hidden;border:1px solid #5c303c;border-radius:24px;background:#100d10;isolation:isolate}.comparison-frame .comparison-image{display:block;width:100%;height:100%;object-fit:cover;max-width:none}.comparison-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--split)) 0 0)}.comparison-label{position:absolute;top:22px;padding:10px 16px;border:1px solid #ffffff33;background:#100b10bd;border-radius:30px;font-size:14px;letter-spacing:.1em;pointer-events:none;color:#fff}.comparison-label-before{left:22px}.comparison-label-after{right:22px;background:#9c1635c9}.comparison-divider{position:absolute;left:var(--split);top:0;bottom:0;width:2px;background:#ffffffd9;pointer-events:none;transform:translateX(-50%)}.comparison-divider>span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:56px;height:56px;border:1px solid #ff8b9d;border-radius:50%;background:#d82143;box-shadow:0 4px 24px #0005;color:#fff}.comparison-divider svg{width:32px;height:24px}.comparison-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;padding:0;border:0;cursor:ew-resize;touch-action:pan-y}.comparison-frame:focus-within{outline:2px solid #ff6b86;outline-offset:5px}.comparison-footer{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:22px}.comparison-footer p{max-width:690px;font-size:14px;line-height:1.65;color:#af9da7;margin:0}.comparison-footer a{display:flex;align-items:center;gap:18px;font-size:14px;min-height:48px;flex-shrink:0;color:#ff8096}@media(max-width:700px){.tint-comparison{padding:48px 0}.comparison-frame{border-radius:16px}.comparison-label{top:12px;padding:7px 11px;letter-spacing:0}.comparison-label-before{left:12px}.comparison-label-after{right:12px}.comparison-divider>span{width:44px;height:44px}.comparison-footer{align-items:flex-start;flex-direction:column;gap:12px}}

/* Keep the complete comparison compact within a typical viewport. */
.tint-comparison{padding:44px 0}
.tint-comparison>.container{max-width:1120px}
.comparison-heading{margin-bottom:20px}
.comparison-heading .eyebrow{margin:0 0 10px}
.comparison-heading h2{font-size:clamp(30px,3vw,44px);margin:10px 0}
.comparison-heading>p:last-child{margin:10px 0 0}
.comparison-frame{aspect-ratio:auto;height:clamp(220px,52svh,460px);border-radius:20px}
.comparison-frame .comparison-image{object-position:center 43%}
.comparison-footer{margin-top:14px;gap:24px}
.comparison-footer p{max-width:760px;line-height:1.5}
.comparison-divider>span{width:48px;height:48px}
@media(max-width:700px){.tint-comparison{padding:32px 0}.comparison-heading h2{font-size:30px}.comparison-frame{height:clamp(200px,36svh,300px);border-radius:16px}.comparison-footer{gap:4px}.comparison-divider>span{width:44px;height:44px}}
@media(max-height:550px) and (min-width:701px){.tint-comparison{padding:24px 0}.comparison-frame{height:240px}.comparison-heading h2{font-size:30px}}