:root { color-scheme:dark; --ink:#f5f1e8; --muted:#aab5b0; --accent:#e0a84b; --accent-contrast:#07110f; --brand-text:#fff; --brand-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --bg:#07110f; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; background:var(--bg); color:var(--ink); font-family:var(--brand-font); }
button,a { font:inherit; }
.intro,.experience,.fallback,.end-card { position:fixed; inset:0; }
.intro { z-index:20; isolation:isolate; display:flex; flex-direction:column; padding:max(24px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom)); background:#050807; }
.intro__background { position:absolute; z-index:-3; inset:-32px; width:calc(100% + 64px); height:calc(100% + 64px); object-fit:cover; filter:blur(24px) saturate(.82); opacity:.62; transform:scale(1.06); }
.intro__scrim { position:absolute; z-index:-2; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(5,8,7,.28) 42%,rgba(0,0,0,.7) 100%); }
.intro::after { content:""; position:absolute; z-index:-1; inset:0; background:radial-gradient(circle at 50% 34%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 52%); pointer-events:none; }
.brand { position:relative; z-index:1; display:flex; align-items:center; gap:.38em; min-height:1.5em; font-weight:800; letter-spacing:.08em; font-size:18px; }
.brand__accent { color:var(--accent); }
.brand__live { color:inherit; }
.brand__logo { display:block; width:auto; height:1.55em; max-width:min(230px,58vw); object-fit:contain; object-position:left center; }
.brand--small { font-size:14px; }
.brand--small .brand__logo { height:1.65em; max-width:min(170px,48vw); }
.intro__brand { flex:0 0 auto; color:#fff; }
.launch-card { position:relative; z-index:1; width:min(100%,560px); min-height:116px; margin:auto auto max(1vh,8px); padding:22px 18px 22px 24px; display:flex; align-items:center; justify-content:space-between; gap:18px; border:1px solid rgba(255,255,255,.5); border-radius:30px; background:rgba(250,250,248,.94); color:#101512; box-shadow:0 28px 90px rgba(0,0,0,.48); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }
.launch-card__title { min-width:0; margin:0; font-family:var(--brand-font); font-size:clamp(23px,7vw,34px); font-weight:850; line-height:1.05; letter-spacing:-.035em; text-transform:uppercase; overflow-wrap:anywhere; }
.launch-card__live { white-space:nowrap; }
.launch-card__packaging-title { display:none; }
body[data-experience-type="packaging"] .launch-card__print-title { display:none; }
body[data-experience-type="packaging"] .launch-card__packaging-title { display:inline; }
body[data-experience-type="packaging"] .launch-card__title { max-width:260px; font-size:clamp(16px,4.7vw,20px); font-weight:700; line-height:1.3; letter-spacing:0; text-transform:none; }
.launch-card__button { flex:0 0 auto; min-width:128px; min-height:60px; padding:0 20px; display:flex; align-items:center; justify-content:center; gap:12px; border:0; border-radius:100px; background:var(--accent); color:var(--accent-contrast); box-shadow:0 10px 30px color-mix(in srgb,var(--accent) 28%,transparent); cursor:pointer; font-weight:800; font-size:17px; }
.launch-card__button span:last-child { font-size:22px; line-height:1; }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.2em; font-size:12px; font-weight:700; min-height:1em; }
.primary-button,.primary-link { width:100%; max-width:410px; min-height:58px; border:0; border-radius:100px; padding:0 22px; display:flex; align-items:center; justify-content:space-between; background:var(--ink); color:#07110f; font-weight:750; cursor:pointer; text-decoration:none; }
.text-button { border:0; background:transparent; color:var(--muted); padding:15px; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.experience { z-index:10; background:#000; }
.experience[aria-hidden="true"],.fallback[aria-hidden="true"],.end-card[aria-hidden="true"] { visibility:hidden; pointer-events:none; }
.experience a-scene { position:absolute; inset:0; width:100%; height:100%; }
.locked-player { position:absolute; z-index:4; inset:0; pointer-events:none; }
.locked-player video { position:absolute; left:50%; top:50%; display:block; max-width:100%; max-height:72vh; border-radius:10px; background:#000; box-shadow:0 18px 60px rgba(0,0,0,.42); transform:translate(-50%,-50%); object-fit:contain; pointer-events:auto; cursor:pointer; }
.video-controls { position:absolute; z-index:11; left:50%; top:43%; transform:translate(-50%,-50%); display:flex; align-items:center; gap:10px; padding:9px; border:1px solid rgba(255,255,255,.24); border-radius:100px; background:rgba(0,0,0,.7); color:#fff; box-shadow:0 16px 48px rgba(0,0,0,.38); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.video-controls button { min-width:98px; min-height:48px; padding:6px 14px; display:flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:100px; background:rgba(255,255,255,.12); color:inherit; cursor:pointer; font-weight:750; }
.video-controls button:active { transform:scale(.98); }
.video-controls__icon { min-width:16px; font-size:19px; line-height:1; }
.video-controls__label { font-size:12px; }
.topbar { position:absolute; z-index:5; inset:max(18px,env(safe-area-inset-top)) 18px auto; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.icon-button { pointer-events:auto; width:42px; height:42px; border:1px solid rgba(255,255,255,.2); border-radius:50%; background:rgba(0,0,0,.38); color:#fff; font-size:28px; line-height:1; backdrop-filter:blur(12px); }
.loading { position:absolute; z-index:6; inset:0; display:flex; gap:12px; align-items:center; justify-content:center; background:#07110f; color:var(--muted); font-size:14px; }
.spinner { width:20px; height:20px; border:2px solid rgba(255,255,255,.2); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.scanner { position:absolute; z-index:4; inset:0; pointer-events:none; }
.scanner__frame { position:absolute; width:min(86vw,360px); aspect-ratio:var(--target-aspect,.6933); left:50%; top:48%; transform:translate(-50%,-50%); transition:width .25s ease,aspect-ratio .25s ease; }
.scanner__frame i { position:absolute; width:38px; height:38px; border-color:rgba(255,255,255,.85); border-style:solid; }
.scanner__frame i:nth-child(1){left:0;top:0;border-width:2px 0 0 2px}.scanner__frame i:nth-child(2){right:0;top:0;border-width:2px 2px 0 0}.scanner__frame i:nth-child(3){right:0;bottom:0;border-width:0 2px 2px 0}.scanner__frame i:nth-child(4){left:0;bottom:0;border-width:0 0 2px 2px}
.orientation-hint { position:absolute; z-index:7; top:max(76px,calc(env(safe-area-inset-top) + 58px)); left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:11px; width:max-content; max-width:calc(100vw - 36px); padding:10px 10px 10px 15px; border:1px solid rgba(255,255,255,.2); border-radius:18px; background:rgba(3,7,6,.78); color:#fff; box-shadow:0 12px 38px rgba(0,0,0,.28); backdrop-filter:blur(14px); font-size:13px; line-height:1.3; }
.orientation-hint__device { flex:0 0 auto; display:block; width:13px; height:22px; border:1.8px solid var(--accent); border-radius:3px; transform-origin:center; }
.orientation-hint--landscape .orientation-hint__device { animation:turn-landscape 1.8s ease-in-out infinite; }
.orientation-hint--portrait .orientation-hint__device { animation:turn-portrait 1.8s ease-in-out infinite; }
.orientation-hint button { flex:0 0 auto; display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; cursor:pointer; font-size:20px; line-height:1; }
@keyframes turn-landscape { 0%,20%{transform:rotate(0)} 65%,100%{transform:rotate(90deg)} }
@keyframes turn-portrait { 0%,20%{transform:rotate(90deg)} 65%,100%{transform:rotate(0)} }
.instruction { position:absolute; left:50%; bottom:max(38px,calc(env(safe-area-inset-bottom) + 24px)); transform:translateX(-50%); display:flex; align-items:center; gap:9px; width:max-content; max-width:90vw; padding:12px 17px; border:1px solid rgba(255,255,255,.15); border-radius:100px; background:rgba(0,0,0,.55); backdrop-filter:blur(12px); font-size:13px; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent); animation:pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.35; } }
.playing { position:absolute; z-index:5; left:0; right:0; bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px)); padding:0 12px; text-align:center; pointer-events:none; }
body[data-experience-type="packaging"] .playing { bottom:0; padding:0 12px max(18px,calc(env(safe-area-inset-bottom) + 12px)); background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.66) 48%,rgba(0,0,0,1) 100%); }
body[data-experience-type="packaging"] .packaging-toolbar { margin-top:0; }
.playing__actions { display:flex; gap:8px; justify-content:center; }
.glass-button { padding:10px 18px; border:1px solid rgba(255,255,255,.25); border-radius:100px; background:rgba(0,0,0,.55); color:#fff; backdrop-filter:blur(12px); text-decoration:none; }
.fullscreen-button { flex:0 0 auto; width:44px; height:44px; padding:0; display:grid; place-items:center; }
.fullscreen-button svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.packaging-replay-button { display:inline-flex; align-items:center; gap:5px; color:var(--brand-text)!important; font-weight:750!important; }
.packaging-replay-button span:first-child { font-size:20px; line-height:.8; }
.playing button { pointer-events:auto; cursor:pointer; }
.packaging-toolbar { width:min(410px,100%); margin:10px auto 0; padding:10px; border:0; background:transparent; box-shadow:none; pointer-events:auto; }
.packaging-toolbar__actions { display:flex; flex-direction:column; gap:7px; }
.packaging-toolbar__actions .packaging-action-button { width:100%; min-height:54px; padding:7px 12px 7px 8px; display:grid; grid-template-columns:38px minmax(0,1fr) 18px; align-items:center; gap:10px; border:1px solid color-mix(in srgb,var(--brand-text) 24%,transparent); border-radius:15px; background:var(--accent); color:var(--brand-text); box-shadow:0 7px 20px color-mix(in srgb,var(--accent) 18%,transparent); text-align:left; }
.packaging-toolbar__actions .packaging-action-button:active { transform:translateY(1px); filter:brightness(.93); }
.packaging-action-button__icon { display:grid; place-items:center; width:36px; height:36px; border:1px solid color-mix(in srgb,currentColor 35%,transparent); border-radius:50%; background:color-mix(in srgb,currentColor 8%,transparent); }
.packaging-action-button__icon svg { width:20px; height:20px; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.packaging-action-button__icon .packaging-action-button__fill { fill:currentColor; stroke:none; }
.packaging-action-button__label { min-width:0; font-size:12px; line-height:1.15; font-weight:850; text-transform:uppercase; letter-spacing:.045em; }
.packaging-action-button__arrow { justify-self:end; font-size:26px; font-weight:400; line-height:1; }
.packaging-toolbar__actions .packaging-store-button { grid-template-columns:38px minmax(0,1fr) 12px 18px; }
.packaging-store-button__status { display:block; width:8px; height:8px; border-radius:50%; background:currentColor; opacity:.28; }
.packaging-store-button.is-loading .packaging-store-button__status { opacity:.8; animation:pulse 1s ease-in-out infinite; }
.packaging-store-button.is-ready .packaging-store-button__status { opacity:1; box-shadow:0 0 0 4px color-mix(in srgb,currentColor 15%,transparent); }
.packaging-toolbar__utility { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:5px 12px; padding:9px 4px 0; }
.packaging-toolbar__utility button { min-height:28px; padding:2px 3px; display:inline-flex; align-items:center; gap:5px; border:0; background:transparent; color:var(--brand-text); font-size:11px; font-weight:750; text-transform:uppercase; letter-spacing:.055em; cursor:pointer; }
.packaging-toolbar__utility button svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.packaging-direct-links { display:flex; align-items:center; justify-content:center; gap:9px; margin-top:7px; padding:8px 4px 1px; border-top:1px solid color-mix(in srgb,var(--brand-text) 22%,transparent); }
.packaging-direct-links a { display:grid; place-items:center; width:36px; height:36px; border:1px solid color-mix(in srgb,var(--brand-text) 58%,transparent); border-radius:50%; background:color-mix(in srgb,var(--brand-text) 10%,transparent); color:var(--brand-text); text-decoration:none; }
.packaging-direct-links a:active { transform:translateY(1px); background:color-mix(in srgb,var(--brand-text) 22%,transparent); }
.packaging-direct-links svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.packaging-direct-links__fill,.packaging-direct-links__dot { fill:currentColor; stroke:none; }
.packaging-hint { position:absolute; z-index:8; top:50%; left:50%; width:max-content; max-width:calc(100vw - 38px); transform:translate(-50%,-50%); padding:14px 18px; border:1px solid rgba(255,255,255,.24); border-radius:18px; background:rgba(3,9,8,.84); color:#fff; box-shadow:0 18px 55px rgba(0,0,0,.4); backdrop-filter:blur(16px); text-align:center; font-size:14px; line-height:1.4; }
.packaging-sheet { position:absolute; z-index:12; inset:0; display:flex; align-items:flex-end; }
.packaging-sheet[aria-hidden="true"] { visibility:hidden; pointer-events:none; }
.packaging-sheet__backdrop { position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:rgba(0,0,0,.48); backdrop-filter:blur(7px); }
.packaging-sheet__panel { position:relative; width:min(680px,100%); max-height:min(72vh,680px); margin:0 auto; padding:22px 20px max(28px,calc(env(safe-area-inset-bottom) + 18px)); overflow:auto; border:1px solid color-mix(in srgb,var(--brand-text) 28%,transparent); border-bottom:0; border-radius:28px 28px 0 0; background:var(--accent); color:var(--brand-text); box-shadow:0 -20px 70px rgba(0,0,0,.5); }
.packaging-sheet__panel header { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; }
.packaging-sheet__panel h2 { margin:0; font-size:clamp(25px,7vw,36px); line-height:1.1; }
.packaging-sheet__panel header button { flex:0 0 auto; display:grid; place-items:center; width:42px; height:42px; padding:0; border:1px solid color-mix(in srgb,currentColor 34%,transparent); border-radius:50%; background:color-mix(in srgb,currentColor 10%,transparent); color:inherit; font-size:26px; cursor:pointer; }
.packaging-sheet__image { display:block; width:100%; height:auto; margin:0 0 18px; border-radius:17px; background:color-mix(in srgb,var(--brand-text) 8%,transparent); }
.packaging-sheet__content>p { margin:0; color:inherit; opacity:.9; font-size:16px; line-height:1.65; white-space:pre-line; }
.packaging-sheet__content strong { font-weight:800; }
.packaging-sheet__content em { font-style:italic; }
.packaging-language-list { display:grid; gap:8px; }
.packaging-language-list button { min-height:52px; padding:0 17px; display:flex; align-items:center; justify-content:space-between; border:1px solid color-mix(in srgb,currentColor 28%,transparent); border-radius:14px; background:color-mix(in srgb,currentColor 9%,transparent); color:inherit; text-decoration:none; font-weight:700; cursor:pointer; }
.packaging-language-list button::after { content:"→"; color:inherit; font-size:20px; }
.packaging-language-list button.is-current { border-color:currentColor; background:color-mix(in srgb,currentColor 16%,transparent); }
.packaging-language-list button.is-current::after { content:"✓"; }
.store-locator-state { min-height:190px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; text-align:center; color:inherit; }
.store-locator-state p { max-width:390px; margin:0; line-height:1.55; }
.store-locator-state__button { min-height:50px; padding:0 20px; border:0; border-radius:100px; background:var(--brand-text); color:var(--accent); font-weight:800; cursor:pointer; }
.store-radar { position:relative; width:92px; height:92px; overflow:hidden; border:1px solid color-mix(in srgb,currentColor 65%,transparent); border-radius:50%; background:radial-gradient(circle,transparent 0 20%,color-mix(in srgb,currentColor 17%,transparent) 21% 22%,transparent 23% 45%,color-mix(in srgb,currentColor 17%,transparent) 46% 47%,transparent 48%); box-shadow:0 0 36px color-mix(in srgb,currentColor 17%,transparent); }
.store-radar::before,.store-radar::after { content:""; position:absolute; inset:50% auto auto 50%; transform-origin:0 0; }
.store-radar::before { width:46px; height:46px; background:conic-gradient(from -12deg,color-mix(in srgb,currentColor 72%,transparent),transparent 34%); animation:store-radar 1.25s linear infinite; }
.store-radar::after { width:8px; height:8px; margin:-4px; border-radius:50%; background:currentColor; box-shadow:18px -24px 0 -2px currentColor,-25px 14px 0 -2px currentColor; }
@keyframes store-radar { to { transform:rotate(360deg); } }
.store-results { display:grid; gap:10px; }
.store-result { padding:15px; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; border:1px solid color-mix(in srgb,currentColor 24%,transparent); border-radius:17px; background:color-mix(in srgb,currentColor 8%,transparent); text-align:left; }
.store-result:first-child { border-color:currentColor; background:color-mix(in srgb,currentColor 14%,transparent); }
.store-result h3 { margin:0 0 4px; font-size:17px; line-height:1.2; }
.store-result p { margin:0; color:inherit; opacity:.76; font-size:13px; line-height:1.4; }
.store-result__distance { display:inline-block; margin-top:7px; color:inherit; font-size:13px; font-weight:800; }
.store-result__directions { min-height:42px; padding:0 14px; display:inline-flex; align-items:center; gap:7px; border-radius:100px; background:var(--brand-text); color:var(--accent); font-size:12px; font-weight:850; text-decoration:none; white-space:nowrap; }
.store-result__directions::after { content:"↗"; font-size:15px; }
.store-attribution { margin:12px 4px 0; color:inherit; opacity:.72; font-family:Roboto,Arial,sans-serif; font-size:12px; font-style:normal; font-weight:400; letter-spacing:normal; line-height:1.4; white-space:nowrap; }
.store-attribution a { color:inherit; }
.store-attribution__providers { margin-left:5px; white-space:normal; }
.glass-button--accent { border-color:var(--accent); color:var(--accent); }
.error-panel { position:absolute; z-index:8; inset:0; padding:28px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; background:#07110f; }
.error-panel h2,.fallback h2 { font-family:Georgia,serif; font-size:32px; font-weight:400; margin:0 0 12px; }
.error-panel p { color:var(--muted); max-width:360px; line-height:1.5; margin:0 0 28px; }
.error-panel .primary-button { justify-content:center; }
.fallback { z-index:40; overflow:auto; background:linear-gradient(150deg,#091714,#030706); padding:max(86px,calc(env(safe-area-inset-top) + 70px)) 24px max(30px,env(safe-area-inset-bottom)); }
.fallback__content { width:min(720px,100%); margin:auto; }
.fallback video { display:block; width:100%; max-height:65vh; margin:22px 0; border-radius:14px; background:#000; box-shadow:0 24px 60px rgba(0,0,0,.35); }
.fallback .primary-link { justify-content:center; margin:20px auto; }
.end-card { z-index:60; display:flex; align-items:center; justify-content:center; padding:max(28px,env(safe-area-inset-top)) 24px max(28px,env(safe-area-inset-bottom)); background:rgba(3,7,6,.82); backdrop-filter:blur(18px); }
.end-card__panel { width:min(520px,100%); padding:34px 26px 26px; border:1px solid rgba(255,255,255,.14); border-radius:24px; background:linear-gradient(150deg,#10231e,#07110f); box-shadow:0 28px 80px rgba(0,0,0,.5); text-align:center; }
.end-card .brand { margin-bottom:28px; }
.end-card h2 { margin:8px 0 12px; font-family:Georgia,"Times New Roman",serif; font-size:clamp(34px,10vw,50px); line-height:1.05; font-weight:400; }
.end-card__panel>p:not(.eyebrow) { margin:0 auto 24px; max-width:390px; color:var(--muted); line-height:1.55; }
.end-card .primary-link { justify-content:center; margin:0 auto 12px; background:var(--accent); color:var(--accent-contrast); }
.end-card .glass-button { width:100%; max-width:410px; min-height:52px; cursor:pointer; }
.end-card .text-button { display:block; margin:4px auto 0; }
.is-hidden { opacity:0; visibility:hidden; pointer-events:none; transition:opacity .35s ease,visibility .35s; }
[hidden] { display:none!important; }
@media(max-width:430px){.launch-card{padding:18px 14px 18px 20px;gap:12px;border-radius:26px}.launch-card__button{min-width:112px;min-height:56px;padding:0 16px}.packaging-toolbar{padding:8px;border-radius:18px}.packaging-toolbar__actions{gap:6px}.packaging-toolbar__actions .packaging-action-button{min-height:50px;padding:6px 11px 6px 7px;grid-template-columns:36px minmax(0,1fr) 18px;gap:9px}.packaging-toolbar__actions .packaging-store-button{grid-template-columns:36px minmax(0,1fr) 10px 18px}.packaging-action-button__icon{width:34px;height:34px}.packaging-action-button__label{font-size:11px}.packaging-sheet__panel{padding-left:17px;padding-right:17px}.locked-player video{max-height:60vh}.store-result{grid-template-columns:1fr}.store-result__directions{justify-self:start}}
@media(min-width:760px){.intro{padding:42px 7vw}.launch-card{margin-bottom:5vh}.fallback{padding-left:7vw;padding-right:7vw}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}