/* Functional integration of the converted 12ui concept: original Medicanna media and responsive glass controls. */
:root{--ink:#282738;--muted:#686570;--paper:#f6f0e8;--accent:#685bc7;--selected:3}
*{box-sizing:border-box}html{background:var(--paper);scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #685bc7;outline-offset:6px}button:disabled{cursor:default}a{text-decoration:none;color:inherit}img{display:block}.medicanna-front{display:block!important}.generated-screen{min-height:100svh;background:var(--paper);overflow:hidden;position:relative;container-type:inline-size}.generated-screen::before,.generated-screen::after{display:none!important}.ly-anchor-canvas{position:relative;display:block;width:1536px;height:1024px;padding:0;margin:0 auto;zoom:calc(100cqw / 1536px);z-index:1}#page-flow{position:relative;display:block;margin:0;padding:0;width:1536px;height:1024px}.brand{position:absolute;left:64px;top:54px;width:215px;z-index:20}.brand img{width:100%;height:auto}.ambient{position:absolute;inset:0;pointer-events:none;overflow:hidden}.ghost{position:absolute;opacity:.12;filter:blur(.5px);width:105px;transform:rotate(-15deg)}.ghost-one{left:790px;top:18px;opacity:.08;width:80px}.ghost-two{left:1230px;top:42px;width:125px;filter:blur(2px);opacity:.14;transform:rotate(24deg)}.ghost-three{left:1070px;top:745px;width:120px;filter:blur(3px);opacity:.32;transform:rotate(14deg)}
.glass{isolation:isolate;background:linear-gradient(135deg,rgba(255,255,255,.52),rgba(255,255,255,.1) 40%,rgba(255,255,255,.32));border:1px solid rgba(255,255,255,.85);border-radius:99px;box-shadow:0 14px 36px rgba(76,58,113,.12),0 3px 5px rgba(91,78,98,.07),inset 0 2px 2px #fff,inset 0 -2px 2px rgba(159,132,197,.32),inset 2px 0 5px rgba(255,255,255,.9),inset -2px 0 3px rgba(255,255,255,.7);backdrop-filter:blur(20px) saturate(155%);-webkit-backdrop-filter:blur(20px) saturate(155%)}.glass:before{content:'';position:absolute;inset:3px;border-radius:inherit;pointer-events:none;border-top:1px solid rgba(255,255,255,.9);border-bottom:1px solid rgba(167,142,197,.18)}.glass-glint{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at var(--px,25%) var(--py,0%),rgba(255,255,255,.75),transparent 55%)}
#nav{position:absolute;left:1064px;top:35px;margin:0;padding:0;width:404px;height:75px;border-width:1px;z-index:25;display:flex;align-items:center;justify-content:center}#nav nav{display:flex;align-items:center;justify-content:space-evenly;width:100%;height:100%;padding:0 20px}#nav a,#nav button{border:0;background:none;font-size:17px;font-weight:500;padding:18px 10px;border-radius:40px;min-height:44px}#nav a:hover,#nav button:hover{color:#685bc7}.divider{width:1px;height:19px;background:rgba(81,66,94,.16)}
#hero{position:absolute;inset:0;display:block;margin:0;padding:0;width:1536px;height:810px}#hero-copy{position:absolute;left:64px;top:260px;margin:0;width:402px;height:auto;z-index:10;display:block}.eyebrow{font-size:11px;line-height:1.4;letter-spacing:2px;font-weight:600;color:#706a78;margin:0 0 27px}h1{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:105px;line-height:.96;letter-spacing:-6px;font-weight:650;margin:0 0 29px}p.intro{font-size:22px;line-height:1.5;letter-spacing:-.3px;color:#64606b;margin:0 0 32px}#hero-copy-button{position:relative;left:auto;top:auto;width:277px;height:61px;display:flex;justify-content:space-between;align-items:center;border:1px solid rgba(255,255,255,.7);border-radius:50px;background:linear-gradient(170deg,#ee645b,#d52b1e 64%,#c82723);color:white;box-shadow:0 11px 27px #d52b1e29,inset 0 2px 2px #ffffff8f,inset 0 -2px 3px #7e0e1733;font-size:17px;font-weight:500;padding:0 26px;transition:transform .2s,box-shadow .2s}#hero-copy-button span{font-size:24px;font-weight:300}#hero-copy-button:hover{transform:translateY(-2px);box-shadow:0 15px 30px #d52b1e3d,inset 0 2px 2px #ffffff8f}
#hero-products{position:absolute;left:448px;top:181px;width:1088px;height:612px;margin:0;padding:0;display:block;z-index:4}#box-film{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;mask-image:linear-gradient(90deg,transparent,black 5%,black 97%,transparent),linear-gradient(0deg,transparent,black 8%,black 90%,transparent);mask-composite:intersect;-webkit-mask-composite:source-in}#film-control{position:absolute;right:74px;top:29px;width:67px;height:67px;padding:21px;z-index:7;border-radius:50%;transition:transform .2s,box-shadow .2s}#film-control:hover{transform:scale(1.07)}#film-control svg{width:100%;height:100%;display:block}.film-caption{position:absolute;top:626px;right:77px;display:flex;align-items:center;gap:11px;font-size:10px;font-weight:500;letter-spacing:1.4px;color:#7a717e}.tiny-dot{width:5px;height:5px;border-radius:50%;background:#685bc7}.film-line{width:48px;height:1px;background:#b8afb9}#film-time{letter-spacing:1px;font-variant-numeric:tabular-nums;min-width:34px}
#aromas{position:absolute;top:841px;left:403px;display:flex;align-items:center;justify-content:space-between;margin:0;width:730px;height:116px;padding:8px 12px;border-width:1px;z-index:12;scroll-margin-top:20vh;background:linear-gradient(160deg,#ffffff75,#ffffff22 45%,#f5efff66);box-shadow:0 16px 34px #685bc71a,0 3px 5px #5b4e6212,inset 0 2px 3px #fff,inset 0 -2px 2px #9f84c555,inset 2px 0 5px #ffffffe6}#aromas:after{content:'';position:absolute;inset:12px 20px;z-index:-2;border-radius:60px;background:linear-gradient(90deg,#4ccede33,#ff7b0f20,#eda6c622,#685bc744,#13823122);filter:blur(26px);pointer-events:none}.aroma{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:130px;height:99px;padding:10px;margin:0;background:transparent;border:0;border-radius:60px;transition:transform .25s}.aroma img{width:36px;height:36px;object-fit:contain;transition:transform .3s}.aroma span{font-size:11px;letter-spacing:1.5px;font-weight:550}.aroma:hover img{transform:translateY(-3px)}.aroma.selected img{transform:scale(1.13)}.aroma.selected span{font-weight:700;color:#3f3569}.selection-lens{position:absolute;left:calc(12px + var(--selected) * 141.2px);top:8px;width:130px;height:98px;border-radius:70px;background:linear-gradient(155deg,#ffffffc7,#ffffff22 48%,#ffffff66);border:1px solid #fff;box-shadow:0 5px 12px #685bc722,inset 0 2px 3px white,inset 0 -3px 5px #685bc733,inset 2px 0 3px white;backdrop-filter:blur(8px) saturate(165%);transition:left .55s cubic-bezier(.2,.85,.2,1)}.collection-caption{position:absolute;top:981px;left:0;width:100%;text-align:center;font-size:11px;color:#8b828d;letter-spacing:.3px;line-height:16px}.collection-caption #chosen-aroma{font-size:10px;font-weight:600;letter-spacing:1.5px;color:#685bc7}.caption-dot{margin:0 10px}.page-note{position:absolute;left:64px;bottom:32px;font-size:9px;letter-spacing:1.5px;color:#a19aa2;font-weight:500}.page-note span{display:block;margin-top:7px;font-size:8px;letter-spacing:1px;color:#aaa2ab}.info-panel{position:absolute;right:68px;top:128px;width:354px;padding:34px;border-radius:28px;z-index:30;background:rgba(255,255,255,.78)}.info-panel[hidden]{display:none}.info-panel h2{font-size:29px;letter-spacing:-1px;margin:0 0 14px}.info-panel p:not(.eyebrow){font-size:15px;line-height:1.65;color:#645f6d}.info-panel .eyebrow{font-size:9px;margin:0 0 12px}.close-panel{position:absolute;right:15px;top:12px;background:none;border:0;font-size:26px;font-weight:300;width:32px;height:32px}.pulse{animation:collection-pulse .7s ease-out}@keyframes collection-pulse{50%{box-shadow:0 16px 60px #685bc766,inset 0 2px 3px white}}
@media(min-width:1800px){.ly-anchor-canvas{zoom:1.172;}.generated-screen{display:flex;justify-content:center}}
@media(max-width:800px){.ly-anchor-canvas{zoom:1;width:100%;height:auto;min-height:880px;padding:0}#page-flow{width:100%;height:880px}.brand{left:24px;top:32px;width:153px}#nav{left:auto;right:18px;top:22px;width:168px;height:47px}#nav nav{padding:0 7px}#nav a,#nav button{font-size:12px;padding:9px 5px;min-height:44px}#nav .divider{height:13px}#nav button[data-panel="help"],#nav .divider:last-of-type{display:none}#hero{position:relative;width:100%;height:675px}#hero-copy{left:26px;top:128px;width:calc(100% - 52px)}.eyebrow{font-size:9px;letter-spacing:1.4px;margin:0 0 20px}h1{font-size:70px;line-height:.94;letter-spacing:-3.9px;margin:0 0 18px}p.intro{font-size:16px;line-height:1.45;margin:0 0 21px}#hero-copy-button{width:230px;height:49px;font-size:14px;padding:0 21px}#hero-copy-button span{font-size:20px}#hero-products{left:0;top:416px;width:100%;height:auto;aspect-ratio:16/9}#box-film{width:100%;height:auto;aspect-ratio:16/9;mask-image:linear-gradient(0deg,transparent,black 6%,black 97%,transparent)}#film-control{width:49px;height:49px;padding:15px;right:25px;top:-29px}.film-caption{right:25px;top:auto;bottom:-25px;font-size:8px;gap:8px;letter-spacing:.9px}.film-line{width:24px}#aromas{left:16px;top:720px;width:calc(100% - 32px);height:90px;padding:5px 6px}.aroma{width:20%;height:77px;gap:9px;padding:8px 0}.aroma img{width:26px;height:26px}.aroma span{font-size:8px;letter-spacing:.8px}.selection-lens{left:calc(6px + var(--selected) * (100% - 12px) / 5);top:5px;width:calc((100% - 12px) / 5);height:77px}.collection-caption{top:829px;font-size:10px;margin:0}#chosen-aroma{font-size:9px!important}.page-note{display:none}.ghost-one{left:auto;right:42px;top:155px;width:58px}.ghost-two{left:auto;right:-25px;top:213px;width:112px;opacity:.08}.ghost-three{left:auto;right:55px;top:740px;width:92px;opacity:.35}.info-panel{position:absolute;top:86px;right:18px;width:calc(100% - 36px);max-width:354px;padding:30px}.glass{backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%)}}
@media (min-width:500px) and (max-width:800px){#hero-products{top:395px;left:12%;width:88%}#aromas{top:805px;width:calc(100% - 64px);left:32px}#page-flow{height:960px}.collection-caption{top:918px}#hero-copy{top:135px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
@media(prefers-reduced-transparency:reduce){.glass,.selection-lens{background:#f6f2f0!important;backdrop-filter:none!important}}

@media(min-width:801px){h1{font-size:96px;letter-spacing:-5px}h1 span{white-space:nowrap}#hero-copy{width:430px}}
#nav{background:linear-gradient(135deg,rgba(255,255,255,.52),rgba(255,255,255,.12) 42%,rgba(255,255,255,.35));box-shadow:0 12px 32px #685bc71f,inset 0 2px 3px white,inset 0 -2px 3px #9f84c54a,inset 2px 0 4px #ffffffdd;border-color:#ffffffdf}
/* Alignment review: retain real media and brand typography; use the target's clearer label scale. */
#nav a,#nav button{color:#24243c}.aroma{flex:1}.aroma span{font-size:13px;color:#22243b;font-weight:500}.selection-lens{left:calc(12px + var(--selected) * (100% - 26px) / 5);width:calc((100% - 26px) / 5)}
@media(max-width:800px){.aroma span{font-size:9px}.selection-lens{left:calc(6px + var(--selected) * (100% - 14px) / 5);width:calc((100% - 14px) / 5)}}
@media(max-width:360px){.brand{left:18px;width:128px;top:34px}#nav{right:14px;width:145px}#nav a,#nav button{font-size:11px}h1{font-size:61px;letter-spacing:-3.5px}#hero-copy-button{width:208px;padding:0 16px;font-size:13px}.aroma span{font-size:8px}}
/* A single moving glass lens follows navigation intent without covering labels. */
#nav nav{position:relative;isolation:isolate}
#nav nav>a,#nav nav>button{position:relative;z-index:2;transition:color .2s}
#nav .divider{position:relative;z-index:1;pointer-events:none}
#nav .nav-lens{position:absolute;left:0;top:7px;height:calc(100% - 14px);width:100px;z-index:0;pointer-events:none;border-radius:100px;opacity:0;transform:translateX(var(--lens-x,0px));background:radial-gradient(ellipse at var(--shine-x,35%) 0%,#fff 0%,#ffffff70 30%,transparent 65%),linear-gradient(155deg,#ffffffba,#e6defb66 48%,#ffffffbb);border:1px solid #fffffff2;box-shadow:0 4px 12px #66548526,inset 0 2px 3px #fff,inset 0 -3px 5px #8774b547,inset 2px 0 3px #fff;backdrop-filter:blur(10px) saturate(180%);-webkit-backdrop-filter:blur(10px) saturate(180%);transition:transform .36s cubic-bezier(.22,.8,.22,1),width .36s cubic-bezier(.22,.8,.22,1),opacity .16s}
#nav .nav-lens.is-visible{opacity:1}
#nav .nav-lens:after{content:'';position:absolute;inset:2px;border-radius:inherit;border-top:1px solid #fff;border-bottom:1px solid #ffffff90}
#nav a:hover,#nav button:hover,#nav button[aria-expanded=true]{color:#4c398a}
@media(max-width:800px){#nav .nav-lens{top:4px;height:calc(100% - 8px)}}
@media(prefers-reduced-transparency:reduce){#nav .nav-lens{background:#e9e2f3;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(forced-colors:active){#nav .nav-lens{background:Canvas;border:2px solid Highlight;box-shadow:none}}