/* Natural Stacks — sleep listicle. Same tokens as the GC PDP (.gcp system). */
@font-face{font-family:"SF-Heading-font";font-weight:600;font-display:swap;
  src:url("https://cdn.shopify.com/s/files/1/0042/0750/9567/files/Gilroy-Semibold1.otf?v=1622684383") format("opentype");}
@font-face{font-family:"SF-Heading-font";font-weight:700;font-display:swap;
  src:url("https://cdn.shopify.com/s/files/1/0042/0750/9567/files/Gilroy-Bold1.otf?v=1622685072") format("opentype");}
@font-face{font-family:"SF-Body-font";font-weight:500;font-display:swap;
  src:url("https://cdn.shopify.com/s/files/1/0042/0750/9567/files/Rubik-Regular.ttf?v=1622776767");}
@font-face{font-family:"SF-Body-font";font-weight:600;font-display:swap;
  src:url("https://cdn.shopify.com/s/files/1/0042/0750/9567/files/Rubik-Medium.ttf?v=1622776767");}

:root{
  --f-head:"SF-Heading-font",Gilroy,"Helvetica Neue",Arial,sans-serif;
  --f-body:"SF-Body-font",Rubik,"Helvetica Neue",Arial,sans-serif;
  --night-1:#4E1D93; --night-2:#3F1A7C; --night-3:#2E1560;
  --night-4:#21114A; --night-5:#170B33; --night-lift:#7C34DE;
  --violet:#58219D; --card:#F7F2FB; --card-soft:#EBDFF7;
  --yellow:#FFB405; --lime:#C6F75E; --lime-press:#B2E842;
  --ink:#000; --ink-soft:#5B5168;
  --r-card:22px; --r-pill:999px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;background:var(--night-5);scroll-behavior:smooth;}
body{
  margin:0;color:#fff;font-family:var(--f-body);
  font-size:19px;font-weight:500;line-height:1.62;-webkit-font-smoothing:antialiased;
  padding-bottom:96px;
  background:
    radial-gradient(60% 20% at 50% 4%, var(--night-lift) 0%, rgba(124,52,222,0) 60%),
    linear-gradient(178deg,var(--night-1) 0%,var(--night-2) 18%,var(--night-3) 42%,var(--night-4) 70%,var(--night-5) 100%);
  background-repeat:no-repeat;
}
img{display:block;max-width:100%;height:auto;}
button{font-family:inherit;}
a{color:inherit;}
.wrap{max-width:760px;margin:0 auto;padding:0 20px;}
@media (min-width:900px){ body{font-size:20px;} .wrap{padding:0 28px;} }

/* marquee */
.marquee{background:var(--yellow);color:var(--ink);border-bottom:2px solid var(--ink);overflow:hidden;padding:9px 0;}
.marquee .track{display:flex;width:max-content;animation:slide 34s linear infinite;}
.marquee .run{display:flex;align-items:center;gap:26px;padding-right:26px;
  font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;}
.marquee .dot{width:5px;height:5px;border-radius:50%;background:#000;flex:0 0 auto;}
@keyframes slide{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.marquee .track{animation:none;}}

/* hero */
.hero{padding:34px 0 0;}
.kicker{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);margin:0 0 16px;}
h1{
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(32px,7.4vw,58px);line-height:1.03;letter-spacing:-.02em;
  margin:0;text-wrap:balance;
}
h1 em{font-style:normal;color:var(--yellow);}
.deck{margin:20px 0 0;font-size:clamp(17px,4.2vw,21px);line-height:1.55;color:rgba(255,255,255,.76);max-width:44ch;}
.heroshot{margin:26px 0 0;border-radius:var(--r-card);overflow:hidden;border:1px solid rgba(255,255,255,.16);}
.heroshot img{width:100%;}
.cap{margin:10px 0 0;font-size:13px;color:rgba(255,255,255,.5);line-height:1.45;}

/* stat band */
.stats{margin:34px 0 0;display:grid;grid-template-columns:1fr;gap:10px;}
@media (min-width:620px){.stats{grid-template-columns:1fr 1fr;}}
.stat{
  display:flex;align-items:baseline;gap:16px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.2);
  border-radius:16px;padding:16px 18px;
}
.stat b{
  flex:0 0 auto;font-family:var(--f-head);font-weight:700;color:var(--yellow);
  font-size:clamp(26px,6vw,34px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.stat span{font-size:14.5px;line-height:1.42;color:rgba(255,255,255,.82);}
.stat sup{color:var(--yellow);font-size:10px;}
.stats .wide{grid-column:1/-1;border-color:var(--yellow);background:rgba(255,180,5,.09);}

/* tap test */
.test{margin:34px 0 0;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.24);border-radius:var(--r-card);padding:24px 20px;}
.test h2{font-family:var(--f-head);font-weight:700;font-size:21px;margin:0;letter-spacing:-.01em;}
.test p{margin:8px 0 0;font-size:15px;color:rgba(255,255,255,.66);}
.checks{margin:18px 0 0;display:flex;flex-direction:column;gap:8px;}
.chk{display:flex;align-items:center;gap:13px;cursor:pointer;
  background:rgba(255,255,255,.05);border-radius:14px;padding:13px 16px;
  font-size:15.5px;line-height:1.35;transition:background .15s ease;}
.chk:hover{background:rgba(255,255,255,.11);}
.chk input{position:absolute;opacity:0;width:1px;height:1px;}
.box{flex:0 0 auto;width:22px;height:22px;border:2px solid rgba(255,255,255,.6);border-radius:6px;position:relative;transition:background .15s,border-color .15s;}
.chk input:checked ~ .box{background:var(--yellow);border-color:var(--yellow);}
.chk input:checked ~ .box::after{content:"";position:absolute;left:6.5px;top:2px;width:5px;height:11px;border:solid #000;border-width:0 2.5px 2.5px 0;transform:rotate(42deg);}
.chk input:focus-visible ~ .box{outline:3px solid #fff;outline-offset:3px;}
.verdict{margin:18px 0 0;padding:16px 18px;border-radius:14px;background:var(--yellow);color:#000;
  font-family:var(--f-head);font-weight:700;font-size:16.5px;line-height:1.35;display:none;}
.verdict.on{display:block;}
.verdict a{display:inline-block;margin-top:6px;font-family:var(--f-body);font-weight:600;font-size:14.5px;text-underline-offset:3px;}

/* reasons */
.reason{margin:48px 0 0;}
.rhead{display:flex;align-items:flex-start;gap:16px;}
.num{flex:0 0 auto;font-family:var(--f-head);font-weight:700;font-size:clamp(40px,11vw,62px);
  line-height:.85;color:var(--yellow);letter-spacing:-.04em;font-variant-numeric:tabular-nums;}
.rtitle h2{font-family:var(--f-head);font-weight:700;font-size:clamp(23px,5.4vw,31px);
  line-height:1.08;letter-spacing:-.015em;margin:0;text-wrap:balance;}
.tag{display:inline-block;margin-top:10px;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:5px 11px;border-radius:var(--r-pill);}
.tag.fix{background:var(--lime);color:#000;}
.tag.nofix{background:rgba(255,255,255,.14);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.3);}
.reason p{margin:16px 0 0;color:rgba(255,255,255,.8);}
.reason p b{color:#fff;font-weight:600;}
.rshot{margin:22px 0 0;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.14);}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:22px 0 0;}
.duo figure{margin:0;}
.duo img{border-radius:14px;border:1px solid rgba(255,255,255,.14);width:100%;}
.duo figcaption{margin:8px 0 0;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.62);}
.duo .bad figcaption{color:var(--yellow);}

/* retention card */
.keep{margin:44px 0 0;border-left:3px solid var(--yellow);padding:4px 0 4px 20px;}
.keep p{margin:0;font-family:var(--f-head);font-weight:700;font-size:19px;line-height:1.3;}
.keep span{display:block;margin-top:8px;font-family:var(--f-body);font-weight:500;font-size:15px;color:rgba(255,255,255,.62);}
.keep a{color:var(--yellow);text-underline-offset:3px;}

/* the turn */
.turn{margin:52px 0 0;background:rgba(255,255,255,.06);border:1.5px solid var(--yellow);border-radius:var(--r-card);padding:28px 22px;}
.turn h2{font-family:var(--f-head);font-weight:700;font-size:clamp(24px,5.6vw,34px);line-height:1.08;letter-spacing:-.02em;margin:0;text-wrap:balance;}
.turn p{margin:16px 0 0;color:rgba(255,255,255,.82);}

/* dose bars */
.bars{margin:22px 0 0;display:flex;flex-direction:column;gap:14px;}
.bar-row{display:flex;align-items:center;gap:14px;}
.bar-lab{flex:0 0 96px;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1.25;}
.bar{flex:1;height:26px;border-radius:var(--r-pill);background:rgba(255,255,255,.12);overflow:hidden;}
.bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--yellow);}
.bar-row.ours .bar i{background:var(--lime);}
.bar-val{flex:0 0 auto;font-family:var(--f-head);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;}

/* CTA */
.cta{
  display:block;width:100%;text-align:center;text-decoration:none;
  border:2px solid var(--ink);background:var(--lime);color:var(--ink);
  font-size:17px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  padding:19px 20px;border-radius:var(--r-pill);cursor:pointer;margin:26px 0 0;
  transition:background .14s ease,transform .08s ease;
}
.cta:hover{background:var(--lime-press);}
.cta:active{transform:translateY(1px);}
.cta-sub{margin:12px 0 0;text-align:center;font-size:13.5px;color:rgba(255,255,255,.6);}

/* ingredients */
.sec{margin:64px 0 0;}
.sec > h2{font-family:var(--f-head);font-weight:700;font-size:clamp(26px,6vw,38px);line-height:1.06;letter-spacing:-.02em;margin:0;text-wrap:balance;}
.sec > .lead{margin:14px 0 0;color:rgba(255,255,255,.72);}
.ings{margin:26px 0 0;display:grid;grid-template-columns:1fr;gap:12px;}
.ing{background:rgba(255,255,255,.055);border:1.5px solid rgba(255,255,255,.24);border-radius:18px;padding:22px 20px;}
.ing .n{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.ing h3{font-family:var(--f-head);font-weight:700;font-size:22px;margin:6px 0 0;letter-spacing:-.01em;}
.ing .dose{display:inline-block;margin-top:9px;font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;background:var(--yellow);color:#000;padding:4px 11px;border-radius:var(--r-pill);}
.ing p{margin:13px 0 0;font-size:16px;color:rgba(255,255,255,.76);}
.ing.less{border-color:var(--lime);background:rgba(198,247,94,.07);}
.ing.less .dose{background:var(--lime);}

/* offer */
.offer{margin:34px 0 0;background:var(--card);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-card);padding:26px 22px 28px;}
.offer h3{font-family:var(--f-head);font-weight:700;font-size:25px;margin:0;letter-spacing:-.015em;}
.offer .shot{display:flex;justify-content:center;margin:16px 0 0;}
.offer .shot img{height:150px;width:auto;}
.offer ul{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:9px;}
.offer li{display:flex;gap:11px;font-size:15.5px;align-items:flex-start;}
.offer li::before{content:"";flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--violet);margin-top:8px;}
.price{display:flex;align-items:baseline;gap:11px;margin:20px 0 0;flex-wrap:wrap;}
.price .now{font-family:var(--f-head);font-weight:700;font-size:36px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.price .was{font-size:16px;color:var(--ink-soft);text-decoration:line-through;}
.price .save{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--violet);color:#fff;padding:4px 10px;border-radius:var(--r-pill);}
.offer .fine{margin:12px 0 0;font-size:13px;color:var(--ink-soft);text-align:center;line-height:1.5;}
.offer .fine b{color:var(--ink);}

/* guarantee */
.guar{margin:26px 0 0;border:1.5px solid rgba(255,255,255,.28);border-radius:18px;padding:24px 20px;text-align:center;background:rgba(255,255,255,.05);}
.guar .tag2{display:inline-block;background:var(--yellow);color:#000;font-family:var(--f-head);font-weight:700;
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;border-radius:var(--r-pill);}
.guar h3{font-family:var(--f-head);font-weight:700;font-size:22px;margin:14px 0 0;}
.guar p{margin:10px 0 0;font-size:15.5px;color:rgba(255,255,255,.74);}

/* faq */
.qa{margin:26px 0 0;display:flex;flex-direction:column;gap:10px;}
.qa details{border:1.5px solid rgba(255,255,255,.26);border-radius:16px;background:rgba(255,255,255,.05);overflow:hidden;}
.qa details[open]{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.45);}
.qa summary{list-style:none;cursor:pointer;padding:17px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--f-head);font-size:16px;font-weight:700;}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::after{content:"+";flex:0 0 auto;font-size:23px;font-weight:400;line-height:1;color:rgba(255,255,255,.8);}
.qa details[open] summary::after{content:"\2212";}
.qa .ans{padding:0 20px 18px;font-size:16px;color:rgba(255,255,255,.76);}

/* sources + disclaimer */
.foot{margin:60px 0 0;padding:26px 0 0;border-top:1px solid rgba(255,255,255,.18);}
.foot h4{font-family:var(--f-head);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.6);margin:0 0 12px;}
.foot ol{margin:0;padding-left:20px;font-size:12.5px;line-height:1.7;color:rgba(255,255,255,.5);}
.foot .disc{margin:22px 0 0;font-size:12px;line-height:1.65;color:rgba(255,255,255,.42);}

/* sticky bar */
.stick{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;align-items:center;gap:12px;
  background:var(--card);border-top:2px solid var(--ink);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  transform:translateY(120%);transition:transform .24s ease;
}
.stick.show{transform:translateY(0);}
.stick .mini{flex:0 0 auto;width:42px;height:42px;border-radius:10px;background:var(--card-soft);overflow:hidden;display:flex;align-items:center;justify-content:center;}
.stick .mini img{height:38px;width:auto;}
.stick .who{flex:1;min-width:0;color:var(--ink);}
.stick .who b{display:block;font-size:13px;font-weight:700;line-height:1.2;}
.stick .who span{display:block;font-size:11.5px;color:var(--ink-soft);}
.stick a{flex:0 0 auto;text-decoration:none;border:2px solid var(--ink);background:var(--lime);color:var(--ink);
  font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;padding:12px 18px;border-radius:var(--r-pill);}
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}