/* Final hierarchy and product-led moments. */
.hero .hero-bottom .button{transform:translateY(-54px)}
.hero .hero-bottom .button:hover{transform:translateY(-58px)}
.hero .hero-pause{top:auto;bottom:18px;right:4%;background:#f6efe3;min-height:40px}
.hero .hero-timeline{right:190px}
.honest-stage{background:#302017}
.problem h2{font-size:clamp(72px,9.5vw,158px);max-width:63%}
.problem-lines{max-width:59%;gap:22px}.problem-lines p{min-width:0;flex:1}
.honest-payoff{right:39%;padding-right:0}.honest-payoff strong{font-size:clamp(75px,9.7vw,160px)}
.honest-product{position:absolute;right:4%;top:18%;width:33%;height:65%;pointer-events:none;z-index:1}
.honest-unwrapped{position:absolute;inset:0}
.honest-unwrapped>img:first-child{position:absolute;inset:5% 15%;width:70%;height:80%;object-fit:contain;filter:drop-shadow(18px 30px 20px #13090160);transform:rotate(12deg)}
.honest-chunk{position:absolute;width:30%;height:28%;object-fit:contain;bottom:9%;right:0;filter:drop-shadow(6px 12px 10px #10080055)}
.honest-unwrapped>span{position:absolute;top:8%;left:0;transform:rotate(-8deg);font:700 clamp(15px,1.5vw,24px)/1.1 var(--display);color:#ef9c68;letter-spacing:.03em}
.honest-wrapped{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;visibility:hidden;filter:drop-shadow(15px 28px 20px #6b250e50)}
.ingredient-stage{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px 4%}
.stage-heading h2{font-size:clamp(68px,7.2vw,124px)}
.ingredient-detail{max-width:480px}
.ingredient-detail>span{font-size:14px;letter-spacing:.14em}
.ingredient-detail h3{font-size:clamp(46px,4.4vw,76px);margin:12px 0 16px}
.ingredient-detail p{font-size:clamp(18px,1.5vw,25px);line-height:1.5;max-width:450px}
.film-controls{margin-top:24px}.film-controls button{font-size:14px;padding:12px 20px}
.flavor-card{position:relative;cursor:pointer;transition:box-shadow .25s,background .25s}
.flavor-card:hover{box-shadow:inset 0 0 0 2px #30201755}
.flavor-card .pack{transition:filter .3s}
.flavor-card:hover .pack{filter:drop-shadow(10px 20px 12px #30201740)}
.flavor-info button:after{content:'';position:absolute;inset:0;z-index:3;border-radius:6px}
.flavor-info button:focus-visible{outline:0}.flavor-info button:focus-visible:after{outline:3px solid #302017;outline-offset:-5px}
#flavor-dialog{margin:auto;width:min(960px,92vw);height:auto;max-height:90svh;padding:0;border-radius:12px;overflow-y:auto;background:#f6efe3}
#flavor-dialog[open]{display:grid;grid-template-columns:1fr 1fr}
.flavor-close{position:absolute;right:16px;top:14px;width:44px;height:44px;border-radius:50%;background:#f6efe3;z-index:2;font-size:30px}
.flavor-dialog-art{background:var(--flavor-color,#edba91);display:grid;place-items:center;min-height:430px;padding:30px}
.flavor-dialog-art img{width:100%;height:100%;max-height:420px;object-fit:contain;transform:rotate(-12deg);filter:drop-shadow(12px 24px 14px #30201730)}
.flavor-dialog-copy{padding:62px 32px 32px}
.flavor-dialog-copy h2{font-size:clamp(42px,5vw,68px);margin:16px 0 20px}
#flavor-summary{font-size:16px;line-height:1.6}
.flavor-facts{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:24px 0;padding:20px 0;border-block:1px solid var(--line)}
.flavor-facts span{display:block;font-size:10px;letter-spacing:.12em;margin-bottom:10px}
.flavor-facts strong{font:700 28px/1.1 var(--display)}.flavor-facts small{font:12px var(--body)}
.flavor-moment{font-size:14px;line-height:1.5;margin-bottom:24px}
.flavor-done{width:100%;justify-content:space-between}
.lifestyle{height:360svh;padding:0;background:#cf592f}
.life-stage{background:#cf592f;isolation:isolate;color:#fff5e4;min-height:550px}
.day-top{position:absolute;top:34px;left:5%;right:5%;display:flex;justify-content:space-between;z-index:5}
.day-top>span{font-size:10px;letter-spacing:.14em}
.day-word{position:absolute;top:10%;left:4%;font:900 clamp(150px,24vw,390px)/.9 var(--display);letter-spacing:-.04em;color:#fff5e430;pointer-events:none}
.day-photo{position:absolute;right:7%;top:21%;width:35%;height:58%;overflow:hidden;transform:rotate(5deg);border:8px solid #fff5e4;box-shadow:0 24px 50px #30201725}
.day-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.65) contrast(1.08)}
.day-time{position:absolute;bottom:0;left:0;right:0;padding:30px 16px 14px;background:linear-gradient(transparent,#302017b0);font-size:10px;letter-spacing:.14em}
.day-product{position:absolute;left:37%;top:25%;width:38%;height:45%;z-index:3;pointer-events:none}
.day-product img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(18px 30px 14px #30201765);transform:rotate(-24deg)}
.life-caption{left:5%;bottom:18%;max-width:37%;z-index:4}
.life-caption h3{font-size:clamp(45px,5.3vw,84px);margin-top:16px}
.life-caption p{font-size:16px;line-height:1.5;margin-top:20px;max-width:290px}
.day-footer{position:absolute;left:5%;right:5%;bottom:28px;display:flex;justify-content:space-between;gap:24px;align-items:center;z-index:5}
.day-footer>span{font-size:10px;letter-spacing:.13em}
.day-tabs{display:flex;gap:10px}
.day-tabs button{padding:12px 18px;border:1px solid #fff5e460;color:inherit;background:transparent;border-radius:30px;font-size:12px;min-height:44px}
.day-tabs button[aria-pressed=true]{background:#fff5e4;color:#302017;border-color:#fff5e4}
@media(max-width:760px){
 .hero .hero-bottom .button{transform:translateY(-20px)}.hero .hero-bottom .button:hover{transform:translateY(-22px)}
 .hero .hero-pause{top:100px;bottom:auto;right:6%;font-size:10px;min-height:34px}
 .hero .hero-timeline{right:6%}
 .problem h2{font-size:clamp(54px,14vw,100px);max-width:100%;margin-bottom:24px}
 .honest-stage{justify-content:flex-start;padding-top:110px}
 .problem-lines{max-width:58%;font-size:14px;gap:10px}
 .honest-product{width:37%;right:4%;height:36%;top:47%}
 .honest-unwrapped>span{font-size:13px;top:0;left:-4%}
 .honest-unwrapped>img:first-child{inset:12% 6%;width:88%;height:85%}
 .honest-chunk{width:38%;bottom:-3%}
 .honest-payoff{right:0;justify-content:flex-start;padding-top:140px}
 .honest-payoff strong{font-size:clamp(65px,18vw,115px)}
 .honest-wrapped{width:180%;left:-80%;max-width:none}
 .ingredient-stage{grid-template-columns:1fr;gap:14px}
 .stage-heading h2{font-size:clamp(38px,10vw,62px)}
 .ingredient-detail h3{font-size:36px;margin:8px 0 10px}
 .ingredient-detail>span{font-size:11px}.ingredient-detail p{font-size:15px;line-height:1.4}
 .film-controls{margin-top:12px}.film-controls button{font-size:12px;padding:9px 16px}
 #flavor-dialog[open]{grid-template-columns:1fr}.flavor-dialog-art{min-height:180px;height:200px;padding:24px}
 .flavor-dialog-copy{padding:24px}.flavor-dialog-copy h2{font-size:42px;margin:12px 0}
 .flavor-facts{margin:18px 0;padding:16px 0}
 .life-stage{min-height:580px}.day-top{top:26px;left:6%;right:6%;gap:20px}.day-top>span{max-width:115px;font-size:8px;text-align:right}
 .day-word{top:13%;font-size:29vw;left:5%}
 .day-photo{right:8%;top:27%;width:57%;height:35%;border-width:5px}
 .day-product{left:6%;top:31%;width:64%;height:27%}
 .life-caption{left:6%;bottom:15%;max-width:88%}.life-caption h3{font-size:clamp(38px,10vw,56px);margin-top:10px}
 .life-caption p{font-size:13px;margin-top:10px;max-width:none}.life-caption span{font-size:10px}
 .day-footer{left:6%;right:6%;bottom:22px}.day-footer>span{display:none}.day-tabs{gap:6px;width:100%;justify-content:space-between}
 .day-tabs button{padding:10px;font-size:10px}
}
@media(max-height:700px) and (min-width:761px){
 .stage-heading h2{font-size:64px}.ingredient-detail h3{font-size:42px}.ingredient-detail p{font-size:18px}.film-controls{margin-top:14px}
 .life-caption h3{font-size:48px}.life-caption p{font-size:14px}.problem h2{font-size:16vh}
}
@media(max-height:700px) and (max-width:760px){
 .honest-stage{padding-top:85px}.honest-payoff{padding-top:115px}.honest-product{top:47%;height:37%}
 .ingredient-detail h3{font-size:29px}.ingredient-detail p{font-size:13px}.stage-heading h2{font-size:36px}
 .life-caption h3{font-size:36px}.life-caption p{margin-top:8px}
}
@media(prefers-reduced-motion:reduce){
 .honest-stage{padding-top:90px}.honest-product{top:12%;height:35%}.honest-unwrapped{transform:none}
 .honest-payoff{padding-top:40px}.honest-wrapped{display:none}
 .lifestyle{height:auto}.life-stage{height:100svh;position:relative}
}
/* Keep the hero copy and action anchored to the animated heading. */
.hero .hero-primary{position:absolute;left:4%;top:65%;z-index:6;background:var(--chocolate);color:var(--cream);padding:18px 26px;gap:42px;transform:none}
.hero .hero-primary:hover{background:var(--orange);transform:translateY(-2px)}
.hero .hero-bottom{justify-content:flex-end}
.hero .hero-subcopy,.hero .film-step-copy{left:4%;max-width:38%}
.hero .film-step-copy{font-size:32px;line-height:1.05}
.hero .film-step-copy p{margin-top:10px;line-height:1.5;max-width:350px}
@media(max-width:760px){
 .hero .hero-primary{left:6%;padding:14px 20px;gap:30px;font-size:13px}
 .hero .hero-subcopy,.hero .film-step-copy{left:6%;max-width:85%}
 .hero .film-step-copy{font-size:24px}
 .hero .film-step-copy p{font-size:12px;margin-top:6px;max-width:310px}
}
@media(max-height:700px){.hero .film-step-copy{font-size:25px}.hero .film-step-copy p{display:none}}