/* Full, uncropped 9:16 frames preserve the original treatment photographs. */
.results-section { padding-block: 48px 64px; background: #f9fbfd; border-top: 1px solid var(--line); }
.results-heading { margin-bottom: 28px; }
.results-heading .eyebrow { margin-bottom: 14px; }
.results-heading h2 { max-width: 650px; font-size: clamp(32px, 4vw, 42px); line-height: 1.2; }
.results-heading > p:not(.eyebrow) { color: var(--muted); line-height: 1.7; margin: 12px 0 0; }
.results-heading .results-help { max-width: 550px; font-size: 13px; }
.results-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.result-card { min-width: 0; width: 100%; max-width: 480px; margin-inline: auto; }
.result-card h3 { margin: 14px 0 0; color: var(--muted); font-size: 14px; font-weight: 500; }
.comparison { --position: 50%; position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: var(--pink); isolation: isolate; }
.comparison-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.comparison-before { clip-path: inset(0 calc(100% - var(--position)) 0 0); }
.comparison-label { position: absolute; top: 16px; padding: 7px 13px; border-radius: 20px; background: #fff; color: var(--blue-dark); font-size: 12px; font-weight: 600; pointer-events: none; }
.comparison-label-before { left: 14px; }
.comparison-label-after { right: 14px; background: var(--pink); }
.comparison-divider { position: absolute; top: 0; bottom: 0; left: var(--position); width: 2px; transform: translateX(-50%); background: white; pointer-events: none; }
.comparison-divider > span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 46px; height: 46px; border: 2px solid white; border-radius: 50%; background: var(--blue-dark); color: white; font-size: 24px; box-shadow: 0 2px 10px #16344930; }
.comparison-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.comparison:focus-within { outline: 3px solid var(--blue-dark); outline-offset: 4px; }
@media (min-width: 760px) {
  .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .results-section { padding-block: 64px 80px; }
  .results-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}