:host{--paper:#f3ead8;--ink:#36281e;--accent:#55483d}*{box-sizing:border-box}:host{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}body{overflow-x:hidden}
.journey{height:500svh;position:relative}.screen{height:100svh;min-height:560px;position:sticky;top:0;isolation:isolate;overflow:hidden;background:var(--paper)}
.top{position:absolute;inset:0 0 auto;z-index:8;display:flex;align-items:center;justify-content:space-between;padding:28px 5vw}.brand{font-size:24px;letter-spacing:-1.5px;font-weight:900}.edition{font-size:10px;text-transform:uppercase;letter-spacing:3px}
.backdrops{position:absolute;inset:0;z-index:0;pointer-events:none;mask-image:radial-gradient(ellipse 74% 85% at 50% 50%,#000 45%,transparent 98%)}.food{position:absolute;width:min(100vw,115vh);height:min(100vw,115vh);object-fit:contain;left:50%;top:50%;opacity:0;will-change:transform,opacity;transform:translate(-50%,-50%);transition:opacity 1s cubic-bezier(.22,1,.36,1);mix-blend-mode:multiply}.food.on{opacity:1}
.hero-title{position:absolute;inset:28% 3vw auto;text-align:center;z-index:1;pointer-events:none;line-height:.87;font-size:clamp(72px,13vw,210px);font-weight:900;letter-spacing:-.075em;color:var(--accent);opacity:.82;transition:color 1s}.hero-title span{display:block}.hero-title.small{font-size:clamp(65px,11vw,170px)}
#stage{position:absolute;inset:4% 17%;z-index:3;touch-action:pan-y;cursor:grab}#stage.dragging{cursor:grabbing}canvas{width:100%;height:100%;display:block;outline:none}.loading{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);font-size:12px;letter-spacing:1px}.ready .loading{display:none}
.caption{position:absolute;right:5vw;bottom:21%;max-width:200px;z-index:5}.eyebrow{font-size:10px;letter-spacing:2px;text-transform:uppercase;margin:0 0 12px}.name{font-size:25px;line-height:1.05;font-weight:700;letter-spacing:-1px;margin:0 0 13px}.description{font-size:13px;line-height:1.6;opacity:.7;margin:0}.caption button{border:0;background:none;padding:12px 0 3px;border-bottom:1px solid currentColor;font:inherit;font-size:12px;cursor:pointer;color:inherit}
.bottom{position:absolute;z-index:8;bottom:28px;left:5vw;right:5vw;display:flex;align-items:end;justify-content:space-between;gap:18px}.scroll-note{font-size:10px;letter-spacing:2px;text-transform:uppercase;line-height:1.8}.scroll-note span{display:block;font-size:20px}.nav{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.nav button{border:1px solid #36281e22;border-radius:100px;padding:11px 14px;background:#fff7;color:var(--ink);font:inherit;font-size:11px;cursor:pointer;backdrop-filter:blur(8px)}.nav button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}button:focus-visible,canvas:focus-visible{outline:2px solid #215baf;outline-offset:4px}
.rail{position:absolute;right:24px;top:40%;z-index:6;width:2px;height:100px;background:#36281e22}.rail b{display:block;width:2px;height:25%;background:var(--ink);transform:translateY(0);transition:transform .8s}.count{position:absolute;left:5vw;top:48%;font-size:11px;letter-spacing:2px;z-index:5;writing-mode:vertical-rl}.error{font-size:14px;line-height:1.5;max-width:250px;text-align:center}
body.embedded,.embedded .journey{height:100svh}.embedded .screen{position:relative}
@media(max-width:760px){.top{padding:22px 6vw}.edition{font-size:8px;letter-spacing:1.5px}.hero-title{top:32%;font-size:21vw}.hero-title.small{font-size:18vw}#stage{inset:10% 0 20%}.backdrops{inset:4% -26% 15%;mask-image:radial-gradient(ellipse,#000 30%,transparent 72%)}.food{width:145vw;height:145vw}.caption{bottom:19%;right:7vw;max-width:155px}.name{font-size:20px}.description{font-size:11px;line-height:1.4}.eyebrow{font-size:8px;margin-bottom:7px}.bottom{bottom:24px;left:6vw;right:6vw;display:block}.nav{justify-content:center;margin-top:18px;gap:5px}.nav button{font-size:10px;padding:10px}.scroll-note{font-size:8px;letter-spacing:1.5px}.scroll-note span{display:inline;font-size:13px;padding-right:9px}.count{left:6vw;top:25%}.rail{right:14px}.screen{min-height:600px}}
@media(prefers-reduced-motion:reduce){.food,.hero-title,.rail b{transition:none}}

/* Independent transparent cutouts; common mask dissolves the outside into the page. */
.backdrops{inset:0;mask-image:radial-gradient(ellipse 66% 72% at 50% 50%,#000 42%,rgba(0,0,0,.85) 65%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 66% 72% at 50% 50%,#000 42%,rgba(0,0,0,.85) 65%,transparent 100%)}
.flavor-layer{position:absolute;inset:0;opacity:0;transition:opacity 1.05s cubic-bezier(.22,1,.36,1);pointer-events:none}.flavor-layer.on{opacity:1}
.ingredient{position:absolute;width:clamp(80px,var(--size),320px);height:auto;object-fit:contain;will-change:transform;filter:drop-shadow(0 12px 14px #5b37151a);transform-origin:center}
.caption{padding:15px;border-radius:16px;background:none}
@media(max-width:760px){.backdrops{inset:3% -6% 15%;mask-image:radial-gradient(ellipse 68% 74% at 50% 50%,#000 35%,rgba(0,0,0,.8) 65%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 68% 74% at 50% 50%,#000 35%,rgba(0,0,0,.8) 65%,transparent 100%)}.ingredient{width:clamp(85px,calc(var(--size)*1.55),220px)}.caption{padding:10px}}
@media(prefers-reduced-motion:reduce){.flavor-layer{transition:none}}

.caption{right:4vw;bottom:20%;width:320px;max-width:32vw;padding:25px;border-radius:26px;background:rgba(255,255,255,.60);border:1px solid rgba(255,255,255,.72);box-shadow:0 18px 48px #4a352516,inset 0 1px 0 #ffffffc4;backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%)}
.caption .eyebrow{font-size:9px;letter-spacing:1.7px;line-height:1.7;color:#746658}.caption .name{font-size:30px;letter-spacing:-1.1px;margin-bottom:10px}.caption .description{font-size:13px;opacity:1;color:#65594f}
.indicators{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0 15px}.indicator{margin:0;padding-right:10px}.indicator+ .indicator{border-left:1px solid #36281e1c;padding-left:16px}.indicator dt{font-size:10px;color:#72665c;margin-top:7px}.indicator dd{font-size:30px;font-weight:700;letter-spacing:-1px;margin:0}.indicator dd small{font-size:14px;letter-spacing:0;margin-left:3px;font-weight:500}
.features{list-style:none;display:flex;gap:6px;flex-wrap:wrap;padding:0;margin:0 0 7px}.features li{border:1px solid #47322312;background:#fff9;border-radius:100px;padding:7px 10px;font-size:10px;color:#55483d}
.edition{margin:0;font-weight:500}.count{background:#ffffffb8;border:1px solid #fff;border-radius:100px;padding:14px 10px;backdrop-filter:blur(10px)}.nav{padding:5px;border-radius:100px;background:#ffffffb8;border:1px solid #ffffffcf;box-shadow:0 6px 24px #4a35250a;backdrop-filter:blur(12px)}.nav button{background:#ffffff80;border-color:transparent}
.product-guide{padding:75px 6vw 85px;background:#faf8f4}.product-guide>h2{font-size:clamp(25px,4vw,45px);letter-spacing:-1.5px;margin:0 0 16px}.product-guide>p{max-width:700px;line-height:1.7;font-size:15px;color:#66594e}.guide-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}.guide-grid article{padding:24px;background:#ffffffc9;border:1px solid #fff;border-radius:22px;box-shadow:0 8px 30px #513d2606}.guide-grid h3{font-size:20px;letter-spacing:-.5px;margin:0 0 12px}.guide-grid p{font-size:13px;line-height:1.8;margin:0;color:#65594f}.guide-grid dl{display:flex;gap:25px;margin:20px 0 0}.guide-grid dt{font-size:10px;color:#75685c}.guide-grid dd{font-size:20px;font-weight:700;margin:5px 0 0}
.embedded .product-guide{display:none}
@media(max-width:1000px){.caption{width:285px;max-width:34vw;padding:20px}.caption .name{font-size:25px}.guide-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.caption{left:5vw;right:5vw;bottom:120px;width:auto;max-width:none;padding:15px 18px;border-radius:22px;display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:center}.caption .eyebrow{grid-column:1/-1;margin:0 0 5px;font-size:8px;letter-spacing:1px}.caption .name{font-size:23px;margin:0 0 7px}.caption .description{grid-column:1;font-size:11px;line-height:1.45;max-width:210px}.indicators{grid-column:2;grid-row:2/4;margin:0;gap:9px}.indicator dd{font-size:24px}.indicator dd small{font-size:11px}.indicator dt{font-size:8px;max-width:55px;line-height:1.5;margin-top:3px}.indicator+.indicator{padding-left:10px}.features{grid-column:1/-1;margin:10px 0 0}.features li{font-size:9px;padding:5px 8px}.caption button{grid-column:1/-1;justify-self:start;font-size:10px;padding-top:8px}#stage{inset:6% 0 42%}.hero-title{top:22%}.count{top:18%;padding:11px 7px;font-size:9px}.nav{border-radius:24px;gap:3px;justify-content:center}.bottom{bottom:18px}.nav button{font-size:9px;padding:8px}.guide-grid{grid-template-columns:1fr}.product-guide{padding:45px 6vw}.edition{font-size:8px;max-width:145px;text-align:right}}
@media(prefers-reduced-transparency:reduce){.caption,.nav,.count{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Removed controls remain hidden in every responsive layout. */
#count,.count,#spin,.scroll-note{display:none!important;visibility:hidden!important;pointer-events:none!important}
.bottom{justify-content:center}

/* Bold condensed typography with a left-to-right horizontal product orientation. */
.hero-title{font-family:'Anton',Impact,'Arial Narrow',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:-.025em;line-height:.95;font-size:clamp(85px,15vw,220px);top:23%;opacity:.65}
.hero-title.small{font-size:clamp(75px,12vw,180px)}
.caption .name{font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-weight:800;text-transform:uppercase;font-size:36px;line-height:1;letter-spacing:-.4px}
.indicator dd{font-family:'Barlow Condensed','Arial Narrow',Arial,sans-serif;font-weight:700;font-size:36px;letter-spacing:-.5px}
#stage{inset:5% 29% 7% 5%}
@media(max-width:1000px) and (min-width:761px){#stage{inset:7% 34% 8% 3%}.caption .name{font-size:30px}}
@media(max-width:760px){#stage{inset:7% 3% 43%}.hero-title{top:15%;font-size:23vw;line-height:1}.hero-title.small{font-size:20vw}.caption .name{font-size:28px}.indicator dd{font-size:28px}}

/* Center the 3D viewport on the section rather than on the old left column. */
#stage{inset:5% 17% 7% 17%;min-width:0}
#stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
@media(max-width:1000px) and (min-width:761px){#stage{inset:7% 14% 8% 14%}}
@media(max-width:760px){#stage{inset:7% 3% 43% 3%}}

@font-face{font-family:'Frutotos Helvetica Now';src:url('frutotos-helvetica-bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
.hero-title{font-family:'Frutotos Helvetica Now','Helvetica Neue',Arial,sans-serif;font-weight:700;font-synthesis:none;text-transform:uppercase;letter-spacing:-.055em;line-height:.95;font-size:clamp(68px,12vw,180px)}
.hero-title.small{font-size:clamp(60px,10vw,150px)}
.caption .name{font-family:'Frutotos Helvetica Now','Helvetica Neue',Arial,sans-serif;font-weight:700;font-synthesis:none;text-transform:uppercase;letter-spacing:-.045em;font-size:32px;line-height:1.05;overflow-wrap:normal}
@media(max-width:1000px) and (min-width:761px){.caption .name{font-size:28px}}
@media(max-width:760px){.hero-title{font-size:16vw;letter-spacing:-.055em}.hero-title.small{font-size:15vw}.caption .name{font-size:25px}}

:host{display:block;position:relative;--sticky-offset:0px;--glass-opacity:.6} .screen{top:var(--sticky-offset);height:calc(100svh - var(--sticky-offset))}.caption{background:rgb(255 255 255 / var(--glass-opacity))}.product-link{display:inline-flex;margin-top:13px;color:var(--ink);font-size:12px;text-decoration:underline;text-underline-offset:5px}.product-link[hidden]{display:none} .loading{max-width:250px;text-align:center} @media(prefers-reduced-transparency:reduce){.caption{background:#fff}}

/* Conversion revision: shorter desktop story; compact, direct selection on mobile. */
:host{background:#fff}.journey{height:300svh}.screen{background:linear-gradient(180deg,#fff 0%,#f6efdf 13%,#f3ead8 35%,#f3ead8 72%,#fff 100%)}
.pack-badge{display:inline-block;background:#34472d;color:#fff;border-radius:100px;padding:5px 9px;font-size:10px;letter-spacing:.4px;margin-right:5px}.pack-offer{margin-top:17px;padding-top:15px;border-top:1px solid #38261b18}.offer-label{font-size:11px;color:#65594f;display:block}.offer-prices{display:flex;gap:10px;align-items:baseline;margin:5px 0}.offer-prices strong{font-family:'Frutotos Helvetica Now',Arial,sans-serif;font-weight:700;font-size:27px;letter-spacing:-.8px}.offer-prices s{font-size:12px;color:#796e63}.offer-unit{display:block;font-size:11px;color:#65594f;min-height:1.3em}.product-status{font-size:11px;line-height:1.4;margin:6px 0 0}.product-link{display:flex;align-items:center;justify-content:center;min-height:46px;width:100%;padding:12px 14px;border-radius:12px;background:#34472d;color:#fff;font-family:'Frutotos Helvetica Now',Arial,sans-serif;font-size:13px;line-height:1.4;text-align:center;text-decoration:none;transition:background .2s,transform .2s}.product-link:hover{background:#25351f;transform:translateY(-1px)}.product-link[aria-disabled=true]{background:#e9e7e2;color:#71695f;pointer-events:none}.caption{bottom:15%;padding:22px;max-height:calc(100svh - var(--sticky-offset) - 110px);overflow-y:auto;scrollbar-width:thin}.features{margin-bottom:0}.indicators{margin:14px 0}.description{max-width:100%}
@media(max-width:760px),(prefers-reduced-motion:reduce){.journey{height:auto}.screen{position:relative;top:auto;height:auto;min-height:0;display:flex;flex-direction:column;padding:35px 0 48px}.hero-title{top:10%;font-size:16vw}.hero-title.small{font-size:15vw}#stage{position:relative;inset:auto;order:1;width:100%;height:clamp(310px,48svh,460px)}.caption{position:relative;inset:auto;order:2;width:calc(100% - 32px);max-width:480px;max-height:none;overflow:visible;margin:8px auto 0;padding:20px;display:block}.caption .name{font-size:27px}.caption .description{font-size:13px;max-width:none}.caption .eyebrow{font-size:9px}.indicators{display:grid;grid-template-columns:1fr 1fr;margin:17px 0 12px}.indicator dt{font-size:10px;max-width:none}.indicator dd{font-size:28px}.features{margin-top:0}.features li{font-size:10px;padding:6px 9px}.bottom{position:relative;inset:auto;order:3;margin:18px 16px 0}.nav{margin-top:0}.nav button{min-height:40px;font-size:10px}.rail{display:none}.pack-offer{margin-top:15px}.product-link{margin-top:12px}.backdrops{inset:0 0 32%}}
@media(min-width:761px) and (max-height:760px) and (prefers-reduced-motion:no-preference){.caption{bottom:12%;padding:17px;width:295px}.caption .name{font-size:26px}.caption .description{font-size:12px}.indicators{margin:10px 0}.pack-offer{margin-top:10px;padding-top:10px}.offer-prices strong{font-size:24px}}

.caption{left:50%;right:auto;bottom:14%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible;max-height:none}
.caption>:not(.product-link){display:none}
.caption .product-link{margin:0;min-height:52px;width:auto;min-width:260px;max-width:100%;padding:15px 26px;border-radius:100px;background:#84a048;color:#152407;box-shadow:0 8px 24px #34472d22;font-size:15px}
.caption .product-link:hover{background:#93af57;transform:translateY(-2px)}
.caption .product-link[aria-disabled=true]{background:#e9e7e2;color:#71695f}
@media(max-width:760px),(prefers-reduced-motion:reduce){.caption{left:auto;right:auto;bottom:auto;transform:none;width:calc(100% - 40px);max-width:380px;padding:0;margin:8px auto 0}.caption .product-link{width:100%;min-width:0}.screen{padding-bottom:28px}.bottom{margin-top:16px}.backdrops{inset:0 0 18%}}

.caption .product-link{color:#fff;border:2px solid transparent;transition:background .2s,transform .2s,border-color .2s}
.caption .product-link:hover,.caption .product-link:focus-visible{border-color:#fff}

.caption{left:auto;right:5vw;bottom:14%;transform:none}
.caption .product-link{font-family:'Frutotos Helvetica Now','Helvetica Neue',Arial,sans-serif;font-weight:700;text-transform:uppercase;min-width:200px;letter-spacing:.02em}
@media(max-width:760px),(prefers-reduced-motion:reduce){.caption{left:auto;right:auto;bottom:auto;width:max-content;max-width:calc(100% - 40px);margin:8px 20px 0 auto;align-self:flex-end}.caption .product-link{width:auto;min-width:200px}}

.caption{top:50%;bottom:auto;transform:translateY(-50%)}
@media(max-width:760px),(prefers-reduced-motion:reduce){.caption{top:50%;bottom:auto;position:absolute;right:20px;left:auto;transform:translateY(-50%);margin:0;z-index:5}.caption .product-link{min-width:0;padding:13px 18px;font-size:13px}}

@media(min-width:761px) and (prefers-reduced-motion:no-preference){.screen{top:max(var(--sticky-offset),var(--frutotos-header,0px));height:calc(100svh - max(var(--sticky-offset),var(--frutotos-header,0px)) - var(--frutotos-footer,0px));min-height:0}#stage{inset:5% 17% 18%}.bottom{bottom:18px;z-index:12}.nav{margin:0}.hero-title{top:23%}}
@media(max-width:760px),(prefers-reduced-motion:reduce){.bottom{padding-bottom:env(safe-area-inset-bottom,0px);z-index:12}}

#canvas{position:absolute;inset:0;outline-offset:-5px}.pack-photo{position:absolute;left:50%;top:50%;width:auto;height:90%;max-width:78%;object-fit:contain;pointer-events:none;user-select:none;will-change:transform,opacity;filter:drop-shadow(5px 14px 12px rgba(73,45,14,.15));transform-origin:center}.pack-photo[aria-hidden="true"]{pointer-events:none}