/* Interactive glass-phone viewport. The approved photo pair is shared with
   the real try-on; only the presentation moves, not the face geometry. */

#results.tryon-section{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:center;gap:clamp(2rem,5vw,6rem);padding-block:clamp(3.5rem,6vw,6.5rem);background:linear-gradient(125deg,#fff 15%,#fcf3f7 68%,#e9f8f3);overflow:hidden}
.tryon-copy{max-width:540px}
.tryon-stores{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.6rem}
.tryon-stores a{display:grid;gap:.45rem;width:min(210px,100%);padding:0;background:transparent;color:#3d2335;text-decoration:none;transition:transform .2s}
.tryon-stores a:hover{transform:translateY(-2px)}
.tryon-stores a:focus-visible{outline:3px solid #b24574;outline-offset:4px}
.tryon-stores .store-button-art{display:block;width:100%;aspect-ratio:1276/420;border-radius:12px;background-image:url('./assets/store-buttons.jpg');background-repeat:no-repeat;background-size:137.93% 341.43%}
.store-button-apple .store-button-art{background-position:51.25% 76.53%}
.store-button-google .store-button-art{background-position:51.25% 23.27%}
.tryon-stores small{font-size:.875rem;color:#84717a;text-align:center}
.tryon-store-status{font-size:.875rem;color:#84717a;line-height:1.5;max-width:48ch}
@media(min-width:761px){#results.tryon-section{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}.tryon-visual{grid-column:1;grid-row:1}.tryon-copy{grid-column:2;grid-row:1}}
.tryon-copy .tag{font-size:.875rem;letter-spacing:.15em;color:#947184}
#tryon-title{font-size:clamp(4.8rem,8.2vw,8.8rem);line-height:.9;letter-spacing:-.075em;margin:1.4rem 0 1.7rem}
#tryon-title em{color:#b24574}
.tryon-lead{font-size:clamp(1.3rem,2vw,1.85rem);font-weight:500;line-height:1.35;letter-spacing:-.035em;margin:0 0 1rem}
.tryon-description{max-width:34ch;color:#84717a;font-size:1rem;line-height:1.7}
.tryon-details{padding:0;margin:1.7rem 0 2rem;list-style:none;display:grid;gap:.8rem}
.tryon-details li{display:flex;align-items:center;gap:.85rem}
.tryon-details li>i{display:grid;place-items:center;width:42px;height:42px;flex:0 0 42px;border-radius:50%;background:transparent!important;border:1px solid #e4d7de;color:#a24c73!important}
.tryon-details svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tryon-details li>div{display:flex;align-items:baseline;flex-wrap:wrap;gap:.3rem .65rem}
.tryon-details b{font-size:1rem;font-weight:650}
.tryon-details li span{color:#84717a;font-size:.875rem}
.tryon-launch{display:inline-flex;align-items:center;justify-content:center;gap:2rem;min-height:54px;font-size:1rem;box-shadow:0 8px 26px #a44b721c}
.tryon-launch span{font-size:1.5rem;font-weight:400;line-height:1}
.tryon-privacy{max-width:42ch;margin-top:1rem;color:#84717a;font-size:.875rem;line-height:1.6}
.tryon-visual{min-width:0;width:100%;max-width:700px;justify-self:center}
.tryon-stage{--tryon-position:50%;--tryon-split:50%;--portrait-transform:scale(1.045);position:relative;isolation:isolate;width:100%;aspect-ratio:4/5;max-height:790px;border-radius:40px;overflow:hidden;background:#f4e7ed;box-shadow:0 35px 70px -30px #5c304a40;border:1px solid #ecdee5;user-select:none}
.tryon-portrait,.tryon-before-image,.tryon-photo-motion{position:absolute;inset:0}
.tryon-before-image{clip-path:inset(0 calc(100% - var(--tryon-split)) 0 0);z-index:1}
.tryon-photo-motion{transform:var(--portrait-transform);will-change:transform}
.tryon-photo-motion img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 48%;pointer-events:none}
.tryon-glass{position:absolute;z-index:3;top:4%;bottom:4%;left:20%;right:20%;border:2px solid #ffffffe6;border-radius:clamp(30px,5vw,55px);background:linear-gradient(117deg,#ffffff18 0%,#ffffff04 27%,transparent 49%,#ffffff14 78%,#ffffff35);box-shadow:0 0 0 5px #f7eaf12b,inset 0 0 0 5px #f3ffff30,inset 2px 2px 12px #ffffff66,12px 20px 40px #24131f38;pointer-events:none}
.tryon-glass:before{content:"";position:absolute;inset:7px;border:1px solid #ffffff7d;border-radius:inherit;box-shadow:inset -2px 0 4px #fff3}
.tryon-glass:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(118deg,transparent 0% 5%,#ffffff2b 6%,transparent 12% 82%,#ffffff20 87%,transparent 94%);pointer-events:none}
.tryon-island{position:absolute;top:2.5%;left:50%;transform:translateX(-50%);width:27%;height:3.4%;max-height:25px;border-radius:99px;background:#4b344244;border:1px solid #ffffffa6;box-shadow:inset 0 1px 3px #ffffff7a;backdrop-filter:blur(5px)}
.tryon-island i{position:absolute;right:10%;top:25%;height:50%;aspect-ratio:1;border-radius:50%;background:#f6e8f099;border:1px solid #63364f75}
.tryon-phone-labels{position:absolute;z-index:5;bottom:3%;left:4%;right:4%;display:flex;justify-content:space-between;gap:.25rem;pointer-events:none}
.tryon-phone-labels>span{padding:.4rem .55rem;border:1px solid #ffffffc4;border-radius:99px;background:#ffffffba;color:#643451;font-size:.8rem;font-weight:700;backdrop-filter:blur(8px)}
.tryon-divider{position:absolute;z-index:3;top:0;bottom:0;left:var(--tryon-split);width:2px;transform:translateX(-50%);background:#fff;box-shadow:0 0 15px #4b263e55;pointer-events:none}
.tryon-divider>span{position:absolute;top:50%;left:50%;display:grid;place-items:center;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:#ffffffd6;color:#9b4d6f;font-size:1.6rem;letter-spacing:-.13em;padding-right:.14em;box-shadow:0 4px 20px #512a422c;border:1px solid #fff;backdrop-filter:blur(10px)}
.tryon-range-area{position:absolute;z-index:4;inset-block:0;left:20%;right:20%;border-radius:12px}
.tryon-range{position:absolute;inset:0;margin:0;width:100%;height:100%;opacity:0;cursor:ew-resize;touch-action:pan-y}
.tryon-range-area:focus-within{outline:3px solid #eadfff;outline-offset:10px}
.tryon-toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.9rem 0 .4rem}
.tryon-toolbar p{margin:0;font-size:.875rem;color:#7d6070}
.tryon-motion-button{display:inline-flex;align-items:center;gap:.5rem;flex:0 0 auto;min-height:44px;padding:.45rem .8rem;border:1px solid #e0ced8;border-radius:99px;background:#ffffffa8;color:#8c4663;font:600 .875rem var(--sans);cursor:pointer}
.tryon-motion-button:hover{background:#f6eaf0}
.tryon-motion-button:focus-visible,.tryon-launch:focus-visible{outline:3px solid #b24574;outline-offset:4px}
.tryon-motion-icon{width:16px;text-align:center}
.tryon-note{color:#8f7c86;font-size:.875rem;line-height:1.55;margin:.3rem 0 0;max-width:65ch}
.tryon-sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(min-width:1500px){.tryon-stage{aspect-ratio:auto;height:790px}}
@media(max-width:1000px){#results.tryon-section{gap:2rem;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}#tryon-title{font-size:clamp(4rem,8vw,6.4rem)}.tryon-phone-labels>span{font-size:.75rem;padding:.3rem .45rem}}
@media(max-width:760px){#results.tryon-section{grid-template-columns:1fr;padding:3.5rem 1.2rem;gap:1.8rem}.tryon-copy{max-width:none}.tryon-copy .tag{margin-top:0}#tryon-title{font-size:clamp(4.5rem,17vw,7rem);margin:1rem 0 1.3rem}#tryon-title br{display:none}#tryon-title em:before{content:" ";white-space:pre}.tryon-lead{font-size:1.5rem}.tryon-description{max-width:50ch}.tryon-details{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;margin:1.4rem 0}.tryon-details li{display:grid;align-items:start;justify-items:start;gap:.6rem}.tryon-details li>div{display:grid;gap:.15rem}.tryon-details b{font-size:.9rem}.tryon-details li span{font-size:.875rem;line-height:1.4}.tryon-launch{width:100%;justify-content:space-between}.tryon-privacy{max-width:none}.tryon-stage{border-radius:28px}.tryon-visual{max-width:560px}.tryon-toolbar{gap:.6rem}.tryon-toolbar p{max-width:25ch}}
@media(max-width:380px){#results.tryon-section{padding-inline:.8rem}.tryon-divider>span{width:38px;height:38px}}
@media(prefers-reduced-motion:reduce){.tryon-photo-motion{will-change:auto}.hero:after{animation:none}}