.lens-hero { --lens-reveal: 64%; --lens-shift-x: 0px; --lens-shift-y: 0px; position: relative; padding: clamp(4rem, 7vw, 7rem) 0; overflow: hidden; border-bottom: 1px solid var(--ink-950); background-color: var(--lime-soft); background-image: linear-gradient(90deg, rgba(17, 22, 56, 0.035) 1px, transparent 1px), linear-gradient(rgba(17, 22, 56, 0.035) 1px, transparent 1px); background-size: 48px 48px; }
.lens-hero::before { content: ""; position: absolute; left: -12vw; bottom: -24vw; width: 54vw; height: 54vw; border: 1px solid rgba(17, 22, 56, 0.14); border-radius: 50%; box-shadow: 0 0 0 5vw rgba(17, 22, 56, 0.025), 0 0 0 10vw rgba(17, 22, 56, 0.02); pointer-events: none; }
.lens-hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(560px, 1.18fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.lens-hero-copy { display: grid; gap: 1.35rem; }
.lens-hero-copy .display-tight { max-width: 760px; }
.lens-hero-copy .display-tight em { color: var(--coral); }
.lens-hero-kicker { color: var(--ink-950); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.lens-hero-copy > * { animation: lensCopyIn 520ms ease both; }
.lens-hero-copy > *:nth-child(2) { animation-delay: 60ms; }
.lens-hero-copy > *:nth-child(3) { animation-delay: 120ms; }
.lens-hero-copy > *:nth-child(4) { animation-delay: 180ms; }
.lens-hero-copy > *:nth-child(5) { animation-delay: 240ms; }
.lens-proof-ledger { display: grid; grid-template-columns: 0.55fr 1fr 1.15fr; gap: 0; margin: 1rem 0 0; border-block: 1px solid var(--ink-950); }
.lens-proof-ledger div { display: grid; gap: 0.35rem; padding: 1rem; border-right: 1px solid var(--ink-950); }
.lens-proof-ledger div:first-child { padding-left: 0; }
.lens-proof-ledger div:last-child { border-right: 0; }
.lens-proof-ledger dt { color: var(--coral); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.lens-proof-ledger dd { margin: 0; color: var(--ink-950); font-size: 0.88rem; font-weight: 700; line-height: 1.35; }
.lens-proof-ledger div:first-child dd { font-family: "Instrument Serif", Georgia, serif; font-size: 1.8rem; font-weight: 400; }
.lens-lab { border: 1px solid var(--ink-950); color: var(--ink-950); background: #fff; }
.lens-lab-head { display: flex; justify-content: space-between; gap: 1rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--ink-950); background: #f8f7f2; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.lens-lab-head span:last-child { color: var(--ink-700); font-weight: 650; }
.lens-demo { position: relative; min-height: 510px; overflow: hidden; touch-action: none; cursor: ew-resize; background: #8ea5b2; }
.lens-demo-layer { position: absolute; inset: -10px; overflow: hidden; }
.lens-demo-layer img { width: calc(100% + 20px); height: calc(100% + 20px); object-fit: cover; object-position: center 50%; transform: translate(var(--lens-shift-x), var(--lens-shift-y)) scale(1.045); transition: transform 180ms ease, filter 320ms ease; }
.lens-demo-layer--soft img { filter: blur(10px) saturate(0.72) contrast(0.84); }
.lens-demo-layer--soft::after { content: ""; position: absolute; inset: 0; background: rgba(225, 232, 235, 0.14); }
.lens-demo-layer--new { z-index: 2; clip-path: inset(0 calc(100% - var(--lens-reveal)) 0 0); transition: clip-path 620ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.lens-demo-layer--new img { filter: contrast(1.04) saturate(1.02); }
.lens-treatment-overlay { position: absolute; z-index: 2; top: 0; left: 0; width: calc(100% + 20px); height: calc(100% + 20px); pointer-events: none; transform: translate(var(--lens-shift-x), var(--lens-shift-y)) scale(1.045); transition: transform 180ms ease; }
.lens-treatment-overlay .lens-fill { fill: rgba(214, 240, 250, 0.08); transition: fill 320ms ease; }
.lens-treatment-overlay .lens-edge { fill: none; stroke: rgba(255, 255, 255, 0.26); stroke-width: 2; vector-effect: non-scaling-stroke; }
.lens-lab[data-finish="blueLight"] .lens-treatment-overlay .lens-fill { fill: rgba(92, 183, 225, 0.2); }
.lens-lab[data-finish="transitions"] .lens-treatment-overlay .lens-fill { fill: rgba(28, 35, 51, 0.67); }
.lens-lab[data-finish="sun"] .lens-treatment-overlay .lens-fill { fill: rgba(89, 60, 34, 0.68); }
.lens-demo-label { position: absolute; z-index: 5; top: 1rem; padding: 0.42rem 0.55rem; border: 1px solid rgba(17, 22, 56, 0.28); color: var(--ink-950); background: rgba(255, 255, 255, 0.9); font-size: 0.63rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; backdrop-filter: blur(6px); }
.lens-demo-label--soft { right: 1rem; }
.lens-demo-label--new { left: 1rem; }
.lens-divider { position: absolute; z-index: 5; top: 0; bottom: 0; left: var(--lens-reveal); width: 1px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 1px rgba(17, 22, 56, 0.2); transform: translateX(-1px); transition: left 620ms cubic-bezier(0.2, 0.8, 0.2, 1); pointer-events: none; }
.lens-divider span { position: absolute; top: 50%; left: 50%; width: 18px; height: 42px; border: 1px solid var(--ink-950); border-radius: 10px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 2px 8px rgba(17, 22, 56, 0.16); transform: translate(-50%, -50%); }
.lens-divider span::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 8px; width: 1px; background: rgba(17, 22, 56, 0.55); }
.lens-lab.is-dragging .lens-demo-layer--new, .lens-lab.is-dragging .lens-divider { transition: none; }
.lens-range-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.lens-range { position: absolute; z-index: 7; left: 8%; right: 8%; bottom: 0.4rem; width: 84%; min-height: 36px; padding: 0; border: 0; opacity: 0.001; cursor: ew-resize; }
.lens-demo:has(.lens-range:focus-visible) .lens-divider span { outline: 3px solid var(--lime); outline-offset: 3px; }
.lens-finish-picker { border-top: 1px solid var(--ink-950); background: #fff; }
.lens-finish-summary { display: grid; grid-template-columns: minmax(165px, 0.7fr) minmax(260px, 1.3fr); gap: 0.35rem 1.5rem; align-items: end; padding: 1.2rem; }
.lens-finish-summary > span { grid-row: 1 / span 2; align-self: start; color: var(--ink-700); font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.lens-finish-summary > div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.lens-finish-summary strong { font-family: "Instrument Serif", Georgia, serif; font-size: 1.65rem; font-weight: 400; }
.lens-finish-summary b { font-size: 0.78rem; }
.lens-finish-summary p { color: var(--ink-700); font-size: 0.76rem; line-height: 1.45; }
.lens-finish-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.lens-finish-options button { position: relative; display: grid; gap: 0.15rem; min-height: 64px; padding: 0.8rem 1rem; border: 0; border-right: 1px solid var(--line); color: var(--ink-950); background: #f8f7f2; cursor: pointer; text-align: left; }
.lens-finish-options button:last-child { border-right: 0; }
.lens-finish-options button::after { content: ""; position: absolute; right: 0.8rem; bottom: -1px; left: 0.8rem; height: 3px; background: transparent; }
.lens-finish-options button span { font-size: 0.78rem; font-weight: 800; }
.lens-finish-options button small { color: var(--ink-700); font-size: 0.66rem; }
.lens-finish-options button:hover, .lens-finish-options button:focus-visible { background: #fff; outline: 0; }
.lens-finish-options button:focus-visible { box-shadow: inset 0 0 0 2px var(--ink-950); }
.lens-finish-options button.is-active { background: #fff; }
.lens-finish-options button.is-active::after { background: var(--ink-950); }
.lens-finish-action { display: flex; gap: 1rem; align-items: center; justify-content: space-between; min-height: 54px; padding: 0.75rem 1.2rem; }
.lens-finish-action > span:first-child { color: var(--ink-700); font-size: 0.68rem; }
.lens-use-finish { flex: 0 0 auto; padding: 0.2rem 0; border: 0; border-bottom: 1px solid var(--ink-950); color: var(--ink-950); background: transparent; cursor: pointer; font-size: 0.72rem; font-weight: 800; text-align: left; }
.lens-use-finish:hover, .lens-use-finish:focus-visible { border-color: var(--coral); color: var(--coral); outline: 0; }
.lens-finish-confirmation { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.lens-demo-disclaimer { padding: 0.55rem 1.2rem; border-top: 1px solid var(--line); color: var(--ink-700); background: #f8f7f2; font-size: 0.63rem; line-height: 1.4; }
@keyframes lensCopyIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (max-width: 1120px) {
  .lens-hero-grid { grid-template-columns: 1fr; }
  .lens-lab { width: min(820px, 100%); }
  .lens-hero-copy { max-width: 820px; }
}

@media (max-width: 720px) {
  .lens-hero { padding-top: 3.5rem; }
  .lens-hero::before { display: none; }
  .lens-hero-copy .display-tight { font-size: clamp(3.2rem, 15vw, 4.6rem); }
  .lens-proof-ledger { grid-template-columns: 1fr; }
  .lens-proof-ledger div, .lens-proof-ledger div:first-child { padding: 0.85rem 0; border-right: 0; border-bottom: 1px solid var(--line); }
  .lens-proof-ledger div:last-child { border-bottom: 0; }
  .lens-lab-head { align-items: flex-start; flex-direction: column; }
  .lens-demo { min-height: 430px; }
  .lens-finish-summary { grid-template-columns: 1fr; }
  .lens-finish-summary > span { grid-row: auto; }
  .lens-finish-options { grid-template-columns: repeat(4, minmax(118px, 1fr)); overflow-x: auto; }
  .lens-finish-action { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 460px) {
  .lens-demo { min-height: 390px; }
  .lens-demo-label { top: 0.65rem; }
  .lens-demo-label--soft { right: 0.65rem; }
  .lens-demo-label--new { left: 0.65rem; }
  .lens-finish-summary > div { align-items: flex-start; flex-direction: column; gap: 0.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lens-hero-copy > * { animation: none; }
  .lens-demo-layer img, .lens-demo-layer--new, .lens-treatment-overlay, .lens-divider { transition: none; }
}