/* Final layout pass: one spacing system from wide desktop to small phones. */
html{scroll-padding-top:59px}
.site-header .header-inner,.hero.shell{max-width:1360px}
.moments-section{padding-block:42px 54px}
.products-section{padding-block:72px 78px}
.why-section{padding-block:72px 80px}
.story-section{padding-block:72px 80px}
.idea-section{padding-block:72px 80px}
.faq-section{padding-block:72px 76px}
.final-cta{margin-block:52px;padding-block:68px}

@media(min-width:1001px){
  .hero{height:auto;min-height:clamp(650px,78svh,820px);display:grid;grid-template-columns:minmax(0,39%) minmax(0,61%);grid-template-rows:1fr auto;align-items:center;padding:44px 0 34px}
  .hero-copy{align-self:center;margin-top:0;padding-bottom:0;min-width:0}
  .hero-products{position:relative;top:auto;right:auto;width:100%;height:clamp(480px,60svh,620px);margin:0;align-self:center}
  .hero-stick{height:86%}
  .stick-blue{left:5%;top:11%}.stick-green{left:23%;top:2%}.stick-pink{left:42%;top:11%}.stick-orange{left:62%;top:5%}
  .powder-splashes{inset:9% 0 1%}
  .benefits{position:static;grid-column:1/-1;width:100%;margin:0;align-self:end;gap:clamp(18px,2vw,34px)}
}

@media(max-width:1000px){
  html{scroll-padding-top:68px}
  .hero.shell{width:min(100% - 48px,760px)}
  .hero{height:auto;min-height:0;display:flex;flex-direction:column;align-items:stretch;padding:42px 0 38px}
  .hero-copy{align-self:auto;margin:0;padding:0;min-width:0}
  .hero .eyebrow{white-space:normal;line-height:1.55}
  .hero h1.hero-brandline{width:100%;max-width:none;margin:22px 0 18px}
  .hero-products{position:relative;top:auto;right:auto;width:100%;height:clamp(360px,50vw,500px);margin:14px 0 0;align-self:auto}
  .hero-stick{height:82%}
  .stick-blue{left:5%;top:12%}.stick-green{left:25%;top:4%}.stick-pink{left:46%;top:12%}.stick-orange{left:68%;top:6%}
  .benefits{position:static;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;margin:10px 0 0;gap:10px;align-self:auto}
  .benefits li{min-width:0;font-size:.69rem;line-height:1.25}
  .moments-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .why-section{grid-template-columns:1fr;gap:30px}
  .why-art{min-height:360px}
  .story-layout{grid-template-columns:1fr;gap:14px}
  .story-aside{position:static}
  .story-wordmark{display:none}
  .story-section h2{margin-bottom:22px}
  .idea-panel{grid-template-columns:1fr}
  .idea-art{position:absolute;inset:0 0 0 52%;opacity:.25}
  .idea-content{padding:clamp(38px,6vw,58px)}
  .faq-layout{grid-template-columns:1fr;gap:28px}
}

@media(max-width:700px){
  .shell,.hero.shell,.site-header .header-inner{width:min(100% - 32px,560px)}
  .moments-section .shell{width:min(100% - 32px,560px)}
  .site-nav{padding-inline:max(16px,calc((100vw - 560px)/2))}
  .hero{padding:30px 0 32px}
  .hero h1.hero-brandline{margin:19px 0 15px}
  .hero-brandline .hero-go{font-size:clamp(5.4rem,24vw,7rem)}
  .hero-brandline .hero-tagline{font-size:clamp(1.8rem,7vw,2.25rem);line-height:1.1;margin-top:15px}
  .hero-description{font-size:1rem;line-height:1.42;max-width:32rem;margin-bottom:18px}
  .hero-ctas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .hero-ctas .pill{width:100%;min-width:0;min-height:45px;gap:8px;padding-inline:10px;font-size:.65rem}
  .hero-products{height:clamp(245px,72vw,330px);margin:12px 0 0}
  .hero-stick{height:82%}
  .stick-blue{left:2%;top:13%}.stick-green{left:25%;top:3%}.stick-pink{left:48%;top:13%}.stick-orange{left:70%;top:6%}
  .powder-splashes{inset:10% -1% 3%;opacity:.5}
  .benefits{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 8px;margin-top:8px}
  .benefits li{font-size:.69rem;gap:6px}
  .benefit-symbol{font-size:1.5rem}

  .moments-section{padding-block:48px 54px}
  .moments-section .serif-title{font-size:clamp(2rem,7vw,2.8rem);line-height:1.12;margin:14px 0 26px}
  .moments-grid{grid-template-columns:1fr;gap:12px}
  .moment{aspect-ratio:1.2;border-radius:14px}
  .moment-closing{margin-top:30px;gap:12px}
  .moment-closing p{font-size:clamp(1.35rem,5vw,1.8rem);line-height:1.18}

  .products-section{padding-block:60px 66px}
  .product-heading{margin-bottom:26px}
  .product-heading h2{font-size:clamp(2.75rem,10vw,3.75rem)}
  .product-heading>p{font-size:1rem;line-height:1.45}
  .product-grid{grid-template-columns:1fr;gap:16px}
  .product-card{display:block;min-height:0}
  .product-stage{height:clamp(240px,67vw,320px);min-height:0}
  .product-stage>img{height:82%}
  .product-stage .product-packshots .product-jar{width:86%;max-height:84%;right:3%;top:8%}
  .product-stage .product-packshots .product-stick{height:63%;left:9%;top:24%}
  .product-body{padding:25px 24px 23px}
  .product-body h3{font-size:clamp(1.8rem,6vw,2.25rem)}
  .product-description{line-height:1.5}

  .why-section{padding-block:62px 66px;gap:26px}
  .why-art{min-height:clamp(245px,70vw,340px)}
  .why-copy h2{font-size:clamp(2.5rem,9vw,3.8rem);line-height:1}
  .why-points{grid-template-columns:1fr;gap:13px;margin-top:27px;padding-top:19px}
  .why-points>div{display:grid;grid-template-columns:27px 1fr;column-gap:8px}
  .why-points span{grid-row:span 2;margin:1px 0 0}
  .why-points strong{font-size:.95rem}
  .why-points p{font-size:.9rem;margin:3px 0 0}

  .story-section{padding-block:63px 68px}
  .story-section h2{font-size:clamp(2.45rem,9.7vw,3.3rem);line-height:1;margin:17px 0 16px}
  .story-copy .story-opening{font-size:1.8rem!important}
  .story-copy p{line-height:1.58;margin-bottom:21px}
  .story-finale{margin-top:31px;padding-top:23px}
  .story-finale h3{font-size:clamp(1.45rem,5.5vw,1.8rem)}

  .idea-section{padding-block:64px 68px}
  .idea-panel{min-height:0}
  .idea-content{padding:36px 24px}
  .idea-content h2{font-size:clamp(2.5rem,9vw,3.6rem);line-height:1;margin:20px 0 22px}
  .idea-art{inset:0;opacity:.14;pointer-events:none}
  .idea-prize{margin:22px 0 25px;padding-left:15px;font-size:.98rem}
  .idea-content .pill{width:100%;padding-inline:15px}
  .idea-content .idea-disclaimer{margin-top:27px}
  .idea-form-wrap{padding:27px 23px}

  .faq-section{padding-block:62px 70px}
  .faq-layout{gap:24px}
  .faq-section h2{font-size:clamp(2.5rem,10vw,3.5rem)}
  .faq-list summary{font-size:1rem;line-height:1.35;padding:19px 38px 19px 0}
  .final-cta{margin-block:42px;padding:49px 21px;border-radius:20px}
  .final-cta h2{font-size:clamp(2.8rem,10vw,4rem);line-height:1}
  .final-cta .pill{width:100%;max-width:280px}
  .footer-inner{min-height:0;padding-block:30px}
}

/* Editorial sections fit a short desktop viewport without hiding their endings. */
@media(min-width:1001px){
  .idea-section{padding-block:26px 38px}
  .idea-panel{min-height:0}
  .idea-content{padding:clamp(35px,3.5vw,50px)}
  .idea-content h2{font-size:clamp(3.5rem,4.7vw,5rem);line-height:.95;margin:18px 0}
  .idea-content>p:not(.eyebrow):not(.idea-disclaimer){font-size:1rem;line-height:1.4;margin-bottom:8px}
  .idea-prize{padding:6px 0 6px 17px;margin:18px 0;font-size:.98rem;line-height:1.36}
  .idea-content .pill{min-height:44px}
  .idea-content .idea-disclaimer{font-size:.8rem;line-height:1.4;margin:17px 0 0}
}

@media(min-width:1100px){
  .story-section{padding-block:40px 44px}
  .story-layout{grid-template-columns:minmax(0,27%) minmax(0,1fr);gap:4%}
  .story-aside{top:85px}
  .story-section h2{font-size:clamp(2.6rem,3.5vw,3.4rem);line-height:1;margin:17px 0 31px}
  .story-wordmark{font-size:clamp(8rem,16vw,13rem)}
  .story-copy{max-width:none;column-count:2;column-gap:clamp(24px,3vw,44px);column-fill:balance;padding-top:2px}
  .story-copy p{break-inside:avoid;font-size:1rem!important;line-height:1.48;margin-bottom:16px}
  .story-copy .story-opening{font-size:1.8rem!important;line-height:1.18;margin-bottom:18px}
  .story-finale{break-inside:avoid;margin-top:16px;padding-top:16px}
  .story-finale h3{font-size:clamp(1.45rem,1.8vw,1.8rem);line-height:1.16}
}

@media(max-width:380px){
  .hero-ctas .pill{font-size:.61rem;letter-spacing:.08em}
  .idea-content h2{font-size:2.45rem}
  .story-section h2{font-size:2.35rem}
  .product-body{padding-inline:21px}
}

/* Each desktop chapter has a complete, balanced landing when reached from the nav. */
@media(min-width:1001px){
  .moments-section,.why-section,.story-section,.idea-section,.faq-section{
    min-height:min(calc(100svh - 59px),760px);
  }
  .moments-section,.story-section,.faq-section{
    display:grid;grid-template-columns:minmax(0,1fr);align-items:center;
  }
  .why-section{padding-block:60px}
  .why-art{min-height:clamp(500px,60svh,620px)}
  .story-aside{position:static}
  .idea-section{display:flex;flex-direction:column;justify-content:center}
  .idea-panel{min-height:clamp(0px,70svh,650px)}
  .idea-content{display:flex;flex-direction:column;justify-content:center}
  .idea-content .pill{align-self:flex-start}
  .final-cta{
    min-height:min(calc(100svh - 59px - 104px),760px);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
  }
}

@media(min-width:1001px) and (max-height:760px){
  .products-section{padding-top:55px}
}