.cinematic-hero:has(.hero-tryon){min-height:760px}
html body .home-free-tools summary{border-color:#a2ffd280;color:#dcffed;font-weight:700;box-shadow:0 0 18px #8affcb18}
.hero-tryon { position:absolute; z-index:11; top:clamp(108px,16svh,160px); left:50%; transform:translateX(-50%); width:min(750px,calc(100% - 64px)); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; align-items:center; padding:16px; border:1px solid #ffffff24; border-radius:22px; background:#15131cc4; backdrop-filter:blur(18px); box-shadow:0 20px 50px #0003; color:#fff; }
.tryon-picture { position:relative; aspect-ratio:4/3; min-width:0; max-height:240px; overflow:hidden; border-radius:14px; background:linear-gradient(145deg,#3a2351,#101926); }
.tryon-picture :is(video,canvas) { width:100%; height:100%; object-fit:contain; display:block; }
#tryon-video { transform:scaleX(-1); }
.tryon-picture [hidden],.hero-tryon [hidden] { display:none!important; }
.tryon-demo { display:grid; place-items:center; height:100%; }
.tryon-demo svg { width:90%; max-height:180px; }
.tryon-demo span { color:#cdb3f0; font-size:11px; letter-spacing:.08em; }
.tryon-action h2 { font-size:clamp(18px,2vw,25px); margin:0 0 10px; letter-spacing:-.03em; line-height:1.2; color:#fff; }
.tryon-action p { font-size:12px; color:#d4cddd; line-height:1.5; margin:0 0 12px; }
.tryon-buttons { display:flex; gap:7px; flex-wrap:wrap; margin-top:8px; }
html body .hero-tryon .btn { min-height:38px; padding:9px 12px; font-size:11px; color:#fff; }
.home-free-strip { position:relative; z-index:2; display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin:22px clamp(18px,4vw,56px); padding:22px; background:#151b20df; border:1px solid #8cecc342; border-radius:18px; color:#fff; }
.home-free-strip>div { flex:1 1 220px; }
.home-free-strip h2 { font-size:19px; margin:0 0 5px; }
.home-free-strip p { color:#bfcac6; margin:0;font-size:13px; }
.home-free-strip>a { padding:13px 16px; border:1px solid #99ffc34d; border-radius:12px; background:linear-gradient(145deg,#73fbbb18,#ffffff06); color:#d9ffe8; font-size:13px; box-shadow:0 5px 18px #0002; text-decoration:none; }
.home-free-strip>a:hover { background:#73fbbb25; }
.home-free-strip :focus-visible,.hero-tryon :focus-visible { outline:3px solid #8effc9; outline-offset:3px; }
@media(max-width:640px){.hero-tryon{top:164px;width:calc(100% - 32px);gap:12px;padding:12px;grid-template-columns:42% 1fr}.tryon-action h2{font-size:17px}.tryon-action p{font-size:11px}.tryon-demo svg{max-height:110px}.tryon-demo span{display:none}.tryon-picture{aspect-ratio:3/4}.tryon-buttons{gap:5px}html body .hero-tryon .btn{padding:7px 9px;font-size:10px}.home-free-strip{margin:16px;padding:18px}.home-free-strip>a{flex:1 1 150px}}
@media(max-height:650px) and (min-width:641px){.hero-tryon{top:90px;width:620px;padding:12px;gap:16px}.tryon-picture{max-height:160px}.tryon-action h2{font-size:20px}.tryon-demo svg{max-height:120px}}