/* Milestone 03 fidelity pass. All product visuals remain original CSS illustrations. */
:root{--cream:#fffaf0;--green:#d7ed91;--green-dark:#8cbe2c;--pink:#ffdbe3;--hotpink:#f03c7a;--brown:#4a2518;--orange:#ee9a05;--white:#fffdf7;--container:69rem}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:3rem}body{margin:0;background:var(--cream);color:var(--brown);font-family:ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;font-size:1rem;line-height:1.28}a{color:inherit}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #2554a2;outline-offset:4px}.skip-link{position:absolute;left:1rem;top:-6rem;background:#fff;padding:.6rem;z-index:100}.skip-link:focus{top:1rem}.container{width:min(100% - 2rem,var(--container));margin-inline:auto}.site-header{position:absolute;top:0;left:0;width:100%;z-index:10}.header-inner{display:flex;align-items:center;justify-content:space-between;padding-block:1.25rem}.brand{display:inline-flex;flex-direction:column;line-height:.84;text-decoration:none;font-size:1.4rem;font-weight:1000;letter-spacing:-.055em;transform:rotate(-10deg);text-shadow:1px 2px #fff}.brand small{font-size:.67em;text-align:right}.menu-toggle{display:grid;gap:5px;padding:.6rem;background:none;border:0;cursor:pointer;min-width:44px;min-height:44px;align-content:center}.menu-toggle span{display:block;width:27px;height:4px;border-radius:8px;background:var(--brown)}.site-nav{display:none;position:absolute;right:1rem;top:4.8rem;background:var(--white);border:2px solid var(--green-dark);border-radius:1rem;padding:1rem;box-shadow:0 7px 0 #a2c74b;min-width:12rem}.site-nav.open{display:grid;gap:1rem}.site-nav a{font-weight:850;text-decoration:none}
.hero{position:relative;padding:6.7rem 0 2.8rem;overflow:hidden;background:radial-gradient(ellipse at 75% 34%,#fff0d1 0%,transparent 52%),var(--cream)}.hero-content{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"text visual" "bottom bottom";align-items:center;column-gap:1rem}.hero-text{grid-area:text;z-index:2}.hero h1{font-size:clamp(1.8rem,5.8vw,4.6rem);line-height:1.04;letter-spacing:-.065em;font-weight:1000;margin:0 0 1.4rem;text-wrap:balance}.hero h1>span{position:relative;white-space:nowrap}.hero h1>span:after{content:"";position:absolute;left:0;right:0;bottom:-.12em;height:.12em;border-radius:99px;background:#f8c836}.heart-doodle{font-size:.75em;color:#e88d00}.hero-text p{max-width:29ch;font-size:clamp(.78rem,1.7vw,1.1rem);font-weight:700}.hero-text strong{font-weight:800}.hero-visual{grid-area:visual;min-height:17rem;position:relative;display:grid;place-items:center}.stacked-chocolate{position:relative;width:100%;height:13rem;filter:drop-shadow(9px 15px 6px #9d683f38)}.choc-bar{position:absolute;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:3px;padding:7px;width:80%;height:55%;border-radius:12px;background:#6d321c;border:5px solid #7d3b22;box-shadow:inset 0 3px #bc7441}.choc-bar i{display:block;background:linear-gradient(145deg,#bd794b,#884322);border:2px solid #6e341f;border-radius:5px}.choc-bar.back{top:10%;right:1%;transform:rotate(15deg)}.choc-bar.front{top:44%;left:1%;transform:rotate(-13deg)}.filling{position:absolute;bottom:-8px;left:10%;width:80%;height:13px;border-radius:30%;background:repeating-linear-gradient(90deg,#e4be1d 0 4px,#9fbe2d 4px 8px)}.nut{position:absolute;width:22px;height:34px;background:#9cbb37;border:5px solid #e5ca79;border-radius:50%;transform:rotate(50deg)}.nut-one{left:3%;bottom:7%}.nut-two{right:4%;bottom:11%}.burst{position:absolute;color:var(--orange);font-size:2.5rem;font-weight:1000}.burst-top{top:3%;left:3%}.hero-bottom{grid-area:bottom;display:flex;align-items:center;justify-content:center;gap:1rem;position:relative;min-height:6rem}.mascot{position:absolute;left:0;bottom:0;width:5.4rem;height:5rem;background:linear-gradient(#ae6d3e 70%,#c5df50 70%);border:4px solid #5b2d1b;border-radius:1rem;transform:rotate(-11deg);box-shadow:2px 4px 0 #fff}.mascot-face{position:absolute;top:1rem;left:.7rem;font-size:1.4rem;color:#502b1d}.mascot-arm{position:absolute;width:20px;height:5px;background:#5b2d1b;top:2.5rem}.mascot-arm.left{left:-18px;transform:rotate(30deg)}.mascot-arm.right{right:-18px;transform:rotate(-30deg)}.button{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;text-decoration:none;font-size:1.15rem;font-weight:1000;min-height:3.25rem;padding:.6rem 2rem;border-radius:99px}.primary,.payment-placeholder{background:linear-gradient(#ff72a3,#eb3478);color:white;border:2px solid #fff;box-shadow:0 3px 0 #d72a68}.wavy-bottom{position:absolute;bottom:-1px;left:0;width:100%;height:2.8rem;background:var(--green);clip-path:polygon(0 48%,8% 25%,16% 65%,24% 30%,32% 55%,42% 25%,53% 64%,65% 20%,78% 55%,88% 23%,100% 48%,100% 100%,0 100%)}
.section{padding:2.3rem 0}.products{padding-top:1rem}.pill-heading{font-size:clamp(1.35rem,3.2vw,2.4rem);font-weight:1000;letter-spacing:-.04em;line-height:1.12;text-align:center;width:fit-content;max-width:90%;margin:0 auto 1.2rem;padding:.25rem 1.1rem;background:var(--green);border-radius:45% 40% 43% 37%}.pill-heading span,.section-heading span{color:#db6a13}.product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.product-card{text-align:center;border:2px solid var(--green-dark);border-radius:1.5rem;padding:.65rem .5rem .9rem;box-shadow:0 3px 0 #a3cc50;background:var(--white);min-width:0}.product-picture{height:clamp(6.8rem,25vw,13rem);position:relative;display:grid;place-items:center;background:radial-gradient(ellipse,#fff2ce,transparent 65%)}.product-picture .burst{top:0;left:0;font-size:1.6rem}.mini-bar{width:80%;height:46%;display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:5px;border:5px solid #7c3c21;border-radius:9px;background:#6d351c;transform:rotate(-15deg);box-shadow:8px 10px 5px #b88c6338}.mini-bar span{background:linear-gradient(140deg,#b76c3e,#78361f);border-radius:3px}.sticks{width:85%;height:80%;position:relative;transform:rotate(-14deg)}.sticks i{position:absolute;display:block;width:95%;height:22%;left:2%;border-radius:6px;background:linear-gradient(#a85e32 55%,#5d2b1b 55%,#cfad25 75%,#69341e 75%);box-shadow:4px 4px 4px #6e3c2430}.sticks i:nth-child(1){top:18%}.sticks i:nth-child(2){top:40%;left:0}.sticks i:nth-child(3){top:62%;left:7%;width:76%}.product-card h3{font-size:clamp(1rem,2.7vw,1.55rem);font-weight:1000;line-height:1.04;margin:.3rem auto}.product-card p{font-size:clamp(.69rem,1.6vw,.9rem);line-height:1.2;margin:.4rem auto;max-width:24ch}.price{display:inline-block;background:#ffbad0;border-radius:99px;padding:.35rem .65rem;font-size:clamp(.65rem,1.8vw,.95rem);font-weight:1000}
.section-green{background:var(--green)}.section-heading{text-align:center;font-size:clamp(1.35rem,3.3vw,2.5rem);line-height:1.1;letter-spacing:-.035em;font-weight:1000;margin:0 auto 1rem;text-wrap:balance}.benefit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;text-align:center}.cloud-icon{width:min(100%,8rem);aspect-ratio:1.15;margin:auto;display:grid;place-items:center;border-radius:44% 56% 48% 52%;background:#fffdf4}.cloud-icon span{font-size:clamp(1.7rem,5vw,3.5rem);font-weight:1000}.icon-nuts{color:#93b52c;text-shadow:2px 2px #dbba70}.icon-kunafa{color:#e8a31b}.icon-chocolate{color:#874325}.benefit h3{font-size:clamp(.9rem,2.4vw,1.35rem);line-height:1.02;margin:.25rem auto;font-weight:1000}.benefit p{font-size:clamp(.69rem,1.6vw,.95rem);margin:.3rem auto;max-width:16ch}
.packaging{padding-block:1.2rem}.packaging-panel{background:var(--pink);border-radius:3.5rem;padding:1.5rem .8rem 1rem}.packaging .section-heading{max-width:25ch}.section-lead{text-align:center;font-size:.83rem;max-width:55ch;margin:-.3rem auto 1.3rem}.packaging-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem}.step{position:relative;text-align:center}.step-count{position:absolute;z-index:1;left:-.35rem;top:-.45rem;width:2.3rem;height:2.3rem;border-radius:50%;display:grid;place-items:center;background:var(--hotpink);border:2px solid white;color:white;font-weight:1000}.step-art{height:clamp(5.5rem,18vw,11rem);display:grid;place-items:center;border:3px solid #fff;border-radius:1.2rem;background:#f7e7cf;box-shadow:0 3px 4px #a66a6840}.step-art span{font-size:clamp(2.5rem,8vw,5rem);color:#8a4a2b;transform:rotate(-10deg)}.art-wrap{background:repeating-linear-gradient(45deg,#ffc4d9 0 8px,#f5a8c6 8px 16px)}.art-wrap span{color:#fff7f9}.art-box{background:#e9cda5}.step h3{font-size:clamp(.67rem,1.8vw,1rem);line-height:1.1;margin:-.4rem auto 0;position:relative;background:#fff9df;border-radius:99px;padding:.4rem .15rem;width:95%;font-weight:1000}.small-note{text-align:center;font-size:.65rem;margin:1rem auto 0;max-width:60ch}
.order{padding-top:0}.order-panel{border:2px solid #ff7eae;border-radius:2rem;background:#fffdf8;padding:1.5rem .8rem 1.3rem}.order-heading{background:linear-gradient(#ff6a9e,#ec3175);border:3px solid #ffb5cc;border-radius:99px;color:white;font-size:clamp(1.1rem,3vw,2rem);font-weight:1000;text-align:center;width:fit-content;max-width:100%;padding:.35rem 1rem;margin:-2.3rem auto 1rem}.order-intro{text-align:center;font-size:.85rem;max-width:43ch;margin:.6rem auto 1.2rem}.bcl-order-container{max-width:45rem;margin-inline:auto;min-width:0}.bcl-order-placeholder{display:grid;justify-items:center;gap:.6rem;border:2px dashed #e7b1c3;border-radius:1.5rem;padding:clamp(1.5rem,5vw,3rem) 1rem;background:#fff6f8;text-align:center}.bcl-placeholder-icon{display:grid;place-items:center;width:3.3rem;height:3.3rem;border-radius:50%;background:var(--pink);color:var(--hotpink);font-size:2rem;font-weight:900}.bcl-order-placeholder strong{font-size:clamp(1rem,3vw,1.4rem)}.bcl-order-placeholder p{font-size:.85rem;max-width:42ch;margin:0}.bcl-order-placeholder small{font-size:.75rem;color:#765449}
.faq{padding-block:1.6rem}.faq-list{max-width:52rem;margin:auto;display:grid;gap:.4rem}.faq details{background:#fffdf5;border-radius:99px;padding:.55rem 1rem}.faq details[open]{border-radius:1rem}.faq summary{cursor:pointer;font-size:.83rem;font-weight:900;min-height:1.2rem}.faq details p{font-size:.8rem;margin:.5rem 0 .2rem}.trust-strip{background:#fffdf5;padding:1rem 0}.trust-strip .container{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;text-align:center}.trust-strip span{font-size:.65rem;border-right:1px solid #aaa}.trust-strip span:last-child{border:0}.trust-strip strong{display:block}.site-footer{background:var(--green);padding:1.5rem 0}.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem}.footer-inner p{text-align:center;font-size:.8rem;font-weight:750}.social-note{font-size:.7rem;text-align:right}
@media(max-width:480px){.container{width:min(100% - 1.3rem,27rem)}.hero{padding-top:5.8rem}.hero-content{grid-template-columns:1fr;grid-template-areas:"text" "visual" "bottom"}.hero h1{font-size:clamp(1.9rem,8vw,2.8rem);margin-bottom:.8rem}.hero-text p{font-size:.9rem;max-width:29ch}.hero-visual{min-height:14rem;margin-top:-1.2rem;margin-left:28%;width:72%}.stacked-chocolate{height:11rem}.hero-bottom{min-height:5rem}.mascot{width:4.6rem;height:4.3rem}.button{font-size:1rem;padding:.55rem 1.4rem}.product-grid{gap:.55rem}.product-card{padding:.4rem .3rem .8rem}.product-picture{height:7rem}.benefit-grid{gap:.25rem}.packaging-panel{border-radius:2.7rem}.step-count{width:1.8rem;height:1.8rem;font-size:.8rem}.step-art{height:5.8rem}.order-panel{padding-inline:.5rem}.order-item{grid-template-columns:2.6rem minmax(0,1fr) auto;gap:.3rem}.item-art{font-size:1.5rem}.order-item strong{font-size:.72rem}.quantity-placeholder{font-size:.65rem;padding:.25rem}.footer-inner .brand{font-size:1rem}.social-note{max-width:6rem}}
@media(min-width:760px){.site-nav{display:flex;position:static;background:none;border:0;box-shadow:none;padding:0;gap:1.5rem}.menu-toggle{display:none}.hero{padding-top:9rem}.hero-content{grid-template-areas:"text visual" "bottom visual"}.hero-visual{min-height:26rem}.stacked-chocolate{height:20rem}.hero-bottom{justify-content:flex-start;padding-left:8rem}.mascot{bottom:0}.product-grid{max-width:56rem;margin:auto;gap:1.5rem}.product-card{padding:1rem}.packaging-panel{padding:2.5rem}.packaging-grid{gap:1.5rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* CTA micro-interaction: subtle lift, arrow nudge and keyboard parity. */
.button.primary{transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;will-change:transform}
.button.primary .button-arrow{display:inline-block;transition:transform .22s ease}
@media(hover:hover) and (pointer:fine){
  .button.primary:hover{transform:translateY(-3px);box-shadow:0 7px 0 #d72a68;filter:saturate(1.08)}
  .button.primary:hover .button-arrow{transform:translateX(5px)}
}
.button.primary:focus-visible{transform:translateY(-2px);box-shadow:0 6px 0 #d72a68}
.button.primary:focus-visible .button-arrow{transform:translateX(5px)}
.button.primary:active{transform:translateY(1px);box-shadow:0 1px 0 #d72a68}
@media(prefers-reduced-motion:reduce){
  .button.primary,.button.primary .button-arrow{transition:none}
  .button.primary:hover,.button.primary:focus-visible,.button.primary:active{transform:none}
  .button.primary:hover .button-arrow,.button.primary:focus-visible .button-arrow{transform:none}
}

/* Milestone 04: progressive tablet / desktop layout. Keep <=480px approved UI unchanged. */
@media(min-width:481px) and (max-width:759px){
  .container{width:min(100% - 2.5rem,42rem)}
  .hero{padding-top:7.5rem;padding-bottom:4rem}
  .hero-content{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:1rem}
  .hero h1{font-size:clamp(2.2rem,5.3vw,3.2rem)}
  .hero-visual{min-height:19rem}
  .stacked-chocolate{height:15rem}
  .hero-bottom{justify-content:flex-start;padding-left:7rem;min-height:6.5rem}
  .product-grid{gap:1.1rem}
  .product-card{padding:1rem}
  .packaging-panel{padding:2rem 1.5rem}
  .step-art{height:9rem}
}
@media(min-width:760px){
  :root{--container:76rem}
  html{scroll-padding-top:5rem}
  .header-inner{padding-block:1.7rem}
  .brand{font-size:1.8rem}
  .site-nav{align-items:center;gap:clamp(.9rem,2.2vw,2rem)}
  .site-nav a{font-size:.95rem;position:relative;padding:.45rem .1rem}
  .site-nav a::after{content:"";position:absolute;bottom:.15rem;left:0;width:100%;height:3px;background:var(--hotpink);border-radius:99px;transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
  .site-nav a:hover::after,.site-nav a:focus-visible::after{transform:scaleX(1)}
  .hero{padding:10rem 0 7rem;min-height:42rem}
  .hero-content{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"text visual" "bottom visual";gap:0 clamp(2rem,5vw,5rem)}
  .hero-text{align-self:end}
  .hero h1{font-size:clamp(3.2rem,5.1vw,5.3rem);margin-bottom:1.7rem}
  .hero-text p{max-width:39ch;font-size:clamp(1rem,1.45vw,1.2rem);line-height:1.5}
  .hero-visual{min-height:30rem;align-self:center}
  .stacked-chocolate{height:clamp(19rem,29vw,26rem);max-width:39rem}
  .choc-bar{border-width:7px;padding:10px;gap:5px}
  .hero-bottom{justify-content:flex-start;padding:1.5rem 0 1rem 7.5rem;min-height:8rem}
  .mascot{width:6rem;height:5.5rem}
  .hero-bottom .button{font-size:1.2rem;padding:.8rem 2.4rem}
  .wavy-bottom{height:4rem}
  .section{padding-block:5rem}
  .products{padding-top:3.3rem}
  .pill-heading,.section-heading{margin-bottom:2.5rem}
  .product-grid{max-width:61rem;gap:clamp(1.5rem,3vw,3rem)}
  .product-card{border-radius:2.2rem;padding:1.5rem 2rem 2rem;box-shadow:0 6px 0 #a3cc50}
  .product-picture{height:clamp(13rem,21vw,19rem)}
  .product-card h3{font-size:clamp(1.5rem,2vw,2rem)}
  .product-card p{font-size:1rem;line-height:1.5}
  .price{font-size:.95rem;padding:.5rem 1rem}
  .benefit-grid{max-width:64rem;margin-inline:auto;gap:clamp(1.5rem,5vw,5rem)}
  .cloud-icon{width:clamp(10rem,16vw,14rem)}
  .benefit h3{font-size:clamp(1.35rem,2vw,1.75rem);margin-top:1rem}
  .benefit p{font-size:1rem;line-height:1.5}
  .packaging{padding-block:4rem}
  .packaging-panel{max-width:68rem;padding:3.5rem clamp(2rem,5vw,5rem) 2.5rem;border-radius:5rem}
  .section-lead{font-size:1rem;line-height:1.5;margin-bottom:2.5rem}
  .packaging-grid{gap:clamp(1rem,3vw,2.5rem)}
  .step-art{height:clamp(11rem,16vw,15rem);border-radius:1.7rem}
  .step h3{font-size:1.05rem;padding:.7rem .3rem}
  .small-note{font-size:.8rem;margin-top:1.7rem}
  .order{padding-top:1rem}
  .order-panel{max-width:62rem;padding:3rem clamp(2rem,5vw,4rem);border-radius:3rem}
  .order-heading{margin-top:-4.2rem;padding:.6rem 2rem}
  .order-intro{font-size:1rem;line-height:1.5}
  .faq{padding-block:4.5rem}
  .faq-list{gap:.8rem}
  .faq details{padding:1rem 1.5rem}
  .faq summary{font-size:1rem}
  .faq details p{font-size:.95rem;line-height:1.5}
  .trust-strip{padding:1.7rem 0}
  .trust-strip span{font-size:.9rem}
  .site-footer{padding:2.7rem 0}
  .footer-inner p{font-size:1rem}
  .social-note{font-size:.85rem}
}
@media(min-width:760px) and (max-width:940px){
  .hero{padding-top:9rem;min-height:36rem}
  .hero-content{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:1rem}
  .hero h1{font-size:clamp(2.6rem,4.8vw,3.5rem)}
  .hero-visual{min-height:22rem}
  .stacked-chocolate{height:18rem}
  .hero-bottom{padding-left:6rem}
  .mascot{width:4.8rem;height:4.5rem}
  .cloud-icon{width:9rem}
  .packaging-panel{border-radius:3.5rem}
}
@media(prefers-reduced-motion:reduce){
  .site-nav a::after{transition:none}
}

/* Desktop hero polish: tighten the first fold and protect illustration edges. */
@media(min-width:941px){
  .hero{padding-top:8rem;padding-bottom:5.5rem;min-height:0}
  .hero-content{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);column-gap:clamp(1.5rem,3.2vw,3.5rem)}
  .hero-text{align-self:end}
  .hero h1{margin-bottom:1.15rem}
  .hero-text p{margin-top:1.2rem;margin-bottom:.5rem}
  .hero-visual{min-height:27rem;padding-inline:1.25rem 2rem}
  .stacked-chocolate{width:min(100%,36rem);height:clamp(18rem,26vw,23rem)}
  .hero-bottom{padding-left:6.6rem;min-height:7rem;padding-top:.75rem}
  .mascot{left:.5rem;bottom:.5rem}
}
@media(min-width:760px) and (max-width:940px){
  .hero{padding-top:7.8rem;padding-bottom:5rem;min-height:0}
  .hero h1{margin-bottom:1.1rem}
  .hero-visual{padding-right:1rem}
  .hero-bottom{padding-left:5.8rem}
  .mascot{left:.35rem}
}

/* Milestone 04: desktop content sections and restrained visual feedback. */
@media(min-width:760px){
  .products .container,.benefits .container,.faq .container{max-width:72rem}
  .product-grid{align-items:stretch}
  .product-card{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
  .product-card .price{margin-top:auto}
  .product-card p{margin-bottom:1.35rem}
  .product-picture{width:100%;overflow:visible}
  .benefit-grid{align-items:start}
  .benefit{min-width:0}
  .benefit p{margin-inline:auto}
  .packaging-panel{width:min(100% - 2rem,68rem)}
  .packaging-grid{align-items:start}
  .step{min-width:0}
  .order-panel{width:min(100% - 2rem,62rem)}
  .bcl-order-container{width:100%;overflow-wrap:anywhere}
  .faq-list{width:min(100%,52rem)}
  .faq details{border:1px solid transparent;transition:border-color .18s ease,box-shadow .18s ease}
  .faq details[open]{border-color:#b7d46c;box-shadow:0 3px 0 #a6c75a}
  .faq summary{line-height:1.45;padding-right:.35rem}
  .faq details p{max-width:70ch}
}
@media(min-width:760px) and (max-width:940px){
  .product-card{padding:1.1rem}
  .product-picture{height:13rem}
  .packaging-panel{padding:2.3rem 1.6rem}
  .packaging-grid{gap:.8rem}
  .step h3{font-size:.9rem}
  .benefit-grid{gap:1rem}
  .order-panel{padding:2.5rem 1.5rem}
}
@media(hover:hover) and (pointer:fine) and (min-width:760px){
  .product-card{transition:transform .2s ease,box-shadow .2s ease}
  .product-card:hover{transform:translateY(-4px);box-shadow:0 10px 0 #a3cc50}
  .faq details:hover{border-color:#b7d46c}
}
@media(prefers-reduced-motion:reduce){
  .product-card,.faq details{transition:none}
  .product-card:hover{transform:none}
}

/* Responsive QA hardening: avoid cramped hero columns on narrow tablets. */
@media(min-width:481px) and (max-width:620px){
  .hero{padding-top:7rem;padding-bottom:4.25rem}
  .hero-content{grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "visual" "bottom"}
  .hero-text{max-width:35rem}
  .hero h1{font-size:clamp(2.15rem,6.8vw,2.8rem)}
  .hero-text p{font-size:.95rem;max-width:34ch}
  .hero-visual{min-height:16rem;width:min(78%,24rem);margin:-.6rem 0 0 auto}
  .stacked-chocolate{height:13rem}
  .hero-bottom{justify-content:center;padding-left:5rem;min-height:6rem}
  .mascot{left:0}
}
@media(min-width:621px) and (max-width:759px){
  .hero h1{font-size:clamp(2rem,4.7vw,2.45rem);overflow-wrap:normal}
  .hero-content{column-gap:1.4rem}
  .hero-text p{font-size:.88rem}
}
@media(min-width:481px){
  .hero-text,.hero-visual,.product-card,.step,.benefit{min-width:0}
  .hero h1{overflow-wrap:break-word}
}

/* Final desktop spacing adjustment: bring order section closer to packaging. */
@media(min-width:760px){
  .packaging{padding-bottom:2.5rem}
  .order{padding-top:0}
}

/* Milestone 05: replace CSS mascot with the uploaded transparent WebP asset. */
.mascot.mascot-image{
  display:block;
  position:absolute;
  left:0;
  bottom:0;
  width:clamp(4.6rem,12vw,6rem);
  height:auto;
  aspect-ratio:1;
  object-fit:contain;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  transform:rotate(-6deg);
  transform-origin:50% 85%;
  animation:mascot-wave 3.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes mascot-wave{
  0%,100%{transform:rotate(-6deg)}
  15%{transform:rotate(2deg)}
  30%{transform:rotate(-9deg)}
  45%{transform:rotate(-3deg)}
  55%,90%{transform:rotate(-6deg)}
}
@media(max-width:480px){
  .mascot.mascot-image{width:4.8rem}
}
@media(min-width:760px) and (max-width:940px){
  .mascot.mascot-image{width:5rem}
}
@media(min-width:941px){
  .mascot.mascot-image{width:6.3rem}
}
@media(prefers-reduced-motion:reduce){
  .mascot.mascot-image{animation:none;transform:none}
}

/* Milestone 05: image-led hero, keeping the real CTA and mascot interactive. */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;clip-path:inset(50%)}
.hero.hero-banner{padding:0;min-height:0;overflow:hidden;background:var(--cream)}
.hero-banner-frame{position:relative;width:100%;max-width:100%;margin:0 auto}
.hero-banner-picture,.hero-banner-image{display:block;width:100%}
.hero-banner-image{height:auto;object-fit:contain}
.hero-banner-actions{position:absolute;z-index:3;left:clamp(1rem,4vw,5rem);bottom:clamp(1.25rem,6%,5rem);width:auto;min-height:5.5rem;padding:0 0 0 clamp(5rem,9vw,8rem);justify-content:flex-start}
.hero-banner-actions .mascot.mascot-image{left:0;bottom:0}
.hero-banner-actions .button.primary{white-space:nowrap}
@media(max-width:620px){
  .hero-banner-actions{left:3.5%;bottom:5%;padding-left:clamp(4.5rem,21vw,6rem);min-height:4.6rem}
  .hero-banner-actions .mascot.mascot-image{width:clamp(4.2rem,19vw,5.3rem)}
  .hero-banner-actions .button.primary{font-size:clamp(.85rem,3.8vw,1.05rem);padding:.55rem clamp(.9rem,4vw,1.5rem);min-height:3rem}
}
@media(min-width:621px) and (max-width:940px){
  .hero-banner-actions{bottom:5%;left:4%;min-height:4.5rem;padding-left:5.3rem}
  .hero-banner-actions .mascot.mascot-image{width:4.8rem}
  .hero-banner-actions .button.primary{font-size:1rem;padding:.6rem 1.5rem}
}
@media(min-width:941px){
  .hero-banner-actions{bottom:6%;left:4%;padding-left:clamp(6rem,9vw,9rem);min-height:7rem}
  .hero-banner-actions .mascot.mascot-image{width:clamp(5.5rem,7vw,7rem)}
}

/* Milestone 05 hero placement: overlay within image, aligned with the approved mockup.
   The image already contains the green waves; avoid a separate CTA strip below it. */
.hero.hero-banner{overflow:hidden}
.hero-banner-frame{position:relative}
.hero-banner-actions{
  position:absolute;
  z-index:3;
  margin:0;
  width:auto;
  min-height:4.5rem;
  padding:0 0 0 5.5rem;
  left:2%;
  right:auto;
  top:auto;
  bottom:0.5%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.hero-banner-actions .mascot.mascot-image{
  left:0;
  bottom:0;
  width:4.8rem;
}
.hero-banner-actions .button.primary{
  font-size:clamp(.9rem,1.5vw,1.15rem);
  padding:.65rem 1.8rem;
  min-height:3.2rem;
}
@media(max-width:620px){
  /* Center the CTA to the full banner, independently of the left-side mascot. */
  .hero-banner-actions{
    left:0;
    right:0;
    width:100%;
    bottom:12%;
    min-height:clamp(4.5rem,18vw,5.6rem);
    padding:0;
    margin:0;
    display:block;
  }
  .hero-banner-actions .mascot.mascot-image{
    left:3.5%;
    bottom:0;
    width:clamp(3.75rem,17.5vw,5.25rem);
    max-width:22%;
  }
  .hero-banner-actions .button.primary{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    font-size:clamp(.95rem,3.9vw,1.15rem);
    padding:.6rem clamp(1.1rem,5vw,1.8rem);
    min-height:clamp(3rem,11vw,3.5rem);
    min-width:clamp(8.8rem,46vw,12rem);
    white-space:nowrap;
  }
  .hero-banner-actions .button.primary:active{
    transform:translate(-50%,calc(-50% + 1px));
  }
  .hero-banner-actions .button.primary:focus-visible{
    transform:translate(-50%,calc(-50% - 2px));
  }
}
@media(min-width:621px) and (max-width:940px){
  .hero-banner-actions{
    left:1.5%;
    bottom:.5%;
    padding-left:4.5rem;
    min-height:3.8rem;
  }
  .hero-banner-actions .mascot.mascot-image{width:4rem}
  .hero-banner-actions .button.primary{
    font-size:.9rem;
    padding:.55rem 1.15rem;
    min-height:2.9rem;
  }
}
@media(min-width:941px){
  .hero-banner-actions{
    left:2%;
    bottom:.5%;
    padding-left:clamp(5rem,7.5vw,7rem);
    min-height:clamp(4.5rem,6vw,5.7rem);
  }
  .hero-banner-actions .mascot.mascot-image{
    width:clamp(4.5rem,6vw,5.7rem);
  }
}

@media(max-width:620px) and (hover:hover) and (pointer:fine){
  .hero-banner-actions .button.primary:hover{transform:translate(-50%,calc(-50% - 3px))}
}
@media(max-width:620px) and (prefers-reduced-motion:reduce){
  .hero-banner-actions .button.primary:hover,
  .hero-banner-actions .button.primary:focus-visible,
  .hero-banner-actions .button.primary:active{transform:translate(-50%,-50%)}
}