/* Home page, 11/6 v2. Only .sec .eyebrow .h2 .lede .faq .card .rv come from dc.css; every other section here is home-only.
   The PDP components (.perks .fmts .vstage .scan .clim .band3 .bogoimg) are not used on this page. */

/* the nav floats over the hero until the hero has scrolled away */
.hero-wrap{position:relative}
.hero-wrap .nav{position:absolute;left:0;right:0;top:0;margin:22px 24px;background:rgb(255 255 255 / 0);box-shadow:none;backdrop-filter:none;color:#fff}
.hero-wrap .nav .lw{display:block}.hero-wrap .nav .lc{display:none}
.hero-wrap .nav .navbtn{background:rgb(255 255 255 / .18);color:#fff;backdrop-filter:blur(6px)}
.hero-wrap .nav.solid{position:fixed;margin:10px 12px;background:rgb(255 255 255 / .92);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line),0 8px 30px rgb(0 0 0 / .05);color:var(--ink)}
.hero-wrap .nav.solid .lw{display:none}.hero-wrap .nav.solid .lc{display:block}
.hero-wrap .nav.solid .navbtn{background:#f1f1f0;color:var(--ink);backdrop-filter:none}
.navbtn.ex{display:inline-block}

/* hero: copy on the empty left of the orange studio photo */
.hero{position:relative;margin:12px 12px 0;border-radius:var(--r);overflow:hidden;background:#E9653F;color:#fff;height:clamp(640px,calc((100vw - 24px) * .5625),900px);display:flex;align-items:center}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:right center}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(60 20 5 / .16),rgb(60 20 5 / 0) 58%);pointer-events:none}
.hero-copy{position:relative;z-index:1;width:min(55%,700px);padding:96px 0 64px clamp(32px,5.5vw,88px)}
.hero-pill{display:inline-flex;align-items:center;gap:8px;background:rgb(255 255 255 / .16);border:1px solid rgb(255 255 255 / .34);backdrop-filter:blur(8px);border-radius:99px;padding:7px 14px;font-size:13.5px}
.hero-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.hero h1{font-weight:400;font-size:clamp(52px,6.4vw,96px);letter-spacing:-.045em;line-height:.98;margin:22px 0 0}
.hero-sub{max-width:500px;margin:22px 0 0;font-size:18px;line-height:1.5;color:rgb(255 255 255 / .92)}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn-g{display:inline-block;white-space:nowrap;border:1.5px solid rgb(255 255 255 / .7);color:#fff;border-radius:10px;padding:15.5px 30px;font-size:16.5px;font-weight:500}
.btn-g:hover{background:rgb(255 255 255 / .12)}
.hero-copy small{display:block;margin-top:18px;font-size:13.5px;color:rgb(255 255 255 / .8)}

/* trust bar right under the hero */
.tbar{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:18px;background:var(--card);border-radius:99px;padding:16px 30px;font-size:14.5px;color:#333}
.tbar span{display:flex;align-items:center;gap:10px;white-space:nowrap}
.tbar span+span::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:8px}
.tbar svg{flex:none;width:20px;height:20px;color:#111}

/* lineup tabs */
.tabs{display:flex;justify-content:center;gap:6px;width:max-content;max-width:100%;margin:34px auto 0;padding:5px;border-radius:99px;background:var(--card)}
.tabs button{border:0;background:none;border-radius:99px;padding:10px 22px;font-size:15px;color:var(--muted);white-space:nowrap}
.tabs button[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgb(0 0 0 / .08)}
.lineup-grid{margin-top:40px}
.lineup-grid[hidden]{display:none}
.lineup-more{text-align:center;margin-top:40px}
/* four across on desktop, two across on tablet and phone (like the product page's "More from the lineup"); an odd card on the last row sits centred */
.lineup-grid{grid-template-columns:repeat(2,minmax(0,1fr));max-width:920px;margin-inline:auto}
.lineup-grid>.card:last-child{grid-column:auto;width:auto;justify-self:auto}
.lineup-grid>.card:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 11px)}
@media (min-width:1081px){
  .lineup-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;gap:18px}
  .lineup-grid>.card{padding:22px 22px 24px}
  .lineup-grid>.card h3{font-size:27px}
  .lineup-grid>.card .price{font-size:24px;margin:10px 0 20px}
  .lineup-grid>.card .price span{display:block;margin:2px 0 0}
  .lineup-grid>.card .price em{display:block;margin:4px 0 0;font-size:14.5px}
  .lineup-grid>.card .btn-k{padding:14px;font-size:15.5px}
  .lineup-grid>.card:last-child:nth-child(odd){grid-column:auto;justify-self:auto;width:auto}
  .lineup-grid>.card:last-child:nth-child(4n+1){grid-column:1/-1;justify-self:center;width:calc(25% - 13.5px)}
}

/* in every box */
.inbox{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;align-items:stretch}
.inbox-img{border-radius:var(--r);overflow:hidden;background:var(--card);min-height:460px}
.inbox-img img{width:100%;height:100%;object-fit:cover}
.inbox-copy{background:var(--card);border-radius:var(--r);padding:52px 48px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.inbox-copy .eyebrow{justify-content:flex-start}
.inbox-copy .h2{text-align:left;font-size:clamp(34px,3.4vw,48px)}
.inbox-copy ol{list-style:none;margin:30px 0 0;padding:0;display:grid}
.inbox-copy li{display:flex;align-items:center;gap:16px;padding:16px 0;border-top:1px solid #e4e4e0;font-size:17px;line-height:1.4}
.inbox-copy li:last-child{border-bottom:1px solid #e4e4e0}
.inbox-copy li i{flex:0 0 34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font:500 12.5px var(--monof)}
.inbox-note{margin:20px 0 0;color:var(--muted);font-size:14px}

/* two chambers, one twist: bento */
.bento{margin-top:56px;display:grid;grid-template-columns:1.05fr 1fr 1fr;grid-template-rows:auto auto;gap:18px}
.bento-img{grid-row:1/3;border-radius:var(--r);overflow:hidden;background:var(--card);min-height:520px}
.bento-img img{width:100%;height:100%;object-fit:cover}
.bento-card{background:var(--card);border-radius:var(--r);padding:34px 32px;display:flex;flex-direction:column;justify-content:flex-end;min-width:0;min-height:250px}
.bento-card svg{width:28px;height:28px;color:var(--accent);margin-bottom:auto}
.bento-card h3{font-weight:400;font-size:22px;letter-spacing:-.02em;margin:28px 0 8px}
.bento-card p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}

/* how it works, drawn: one 9 s loop shared by the cartridge and the steps */
.howx{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
.howx-art{background:var(--card);border-radius:var(--r);display:grid;place-items:center;padding:44px 24px;min-height:560px}
.cart{display:block;width:auto;height:500px;max-width:100%;overflow:visible;filter:drop-shadow(0 18px 24px rgb(0 0 0 / .08))}
.cart .c-labels circle{fill:var(--accent)}.cart .c-labels line{stroke:var(--accent);stroke-width:1;opacity:.75}.cart .c-labels text{font:500 12.5px var(--font);fill:var(--ink)}.cart .c-labels .sub{font-weight:400;font-size:11px;fill:var(--muted)}
.cart .c-plunger,.cart .c-water,.cart .c-rise,.cart .c-powder,.cart .c-swirl{transform-box:fill-box;animation:9s linear infinite both}
.cart .c-plunger{animation-name:c-plunger}
.cart .c-water{transform-origin:50% 0;animation-name:c-water}
.cart .c-rise{transform-origin:50% 100%;animation-name:c-rise}
.cart .c-powder{animation-name:c-powder}
.cart .c-swirl{animation-name:c-swirl}
@keyframes c-plunger{0%,30%{transform:translateY(0)}65%,100%{transform:translateY(-140px)}}
@keyframes c-water{0%,30%{transform:scaleY(1)}65%,100%{transform:scaleY(0)}}
@keyframes c-rise{0%,30%{transform:scaleY(0)}65%,100%{transform:scaleY(1)}}
@keyframes c-powder{0%,30%{opacity:1}62%{opacity:.15}68%,100%{opacity:0}}
@keyframes c-swirl{0%,32%{opacity:0;transform:translateY(0)}40%{opacity:1}60%{opacity:.8}68%,100%{opacity:0;transform:translateY(-120px)}}
.howx-steps{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.howx-steps li{background:var(--card);border-radius:var(--r);padding:30px 32px;display:flex;align-items:center;gap:22px}
.howx-steps i{position:relative;flex:0 0 44px;height:44px;border-radius:50%;border:1.5px solid var(--accent);display:grid;place-items:center;font:500 13px var(--monof);font-style:normal;color:var(--accent)}
.howx-steps i::before,.howx-steps i::after{position:absolute;inset:-1.5px;border-radius:50%;opacity:0;animation:9s linear infinite both}
.howx-steps i::before{content:"";background:var(--accent)}
.howx-steps i::after{content:attr(data-n);display:grid;place-items:center;color:#fff}
.howx-steps li:nth-child(1) i::before,.howx-steps li:nth-child(1) i::after{animation-name:s1}
.howx-steps li:nth-child(2) i::before,.howx-steps li:nth-child(2) i::after{animation-name:s2}
.howx-steps li:nth-child(3) i::before,.howx-steps li:nth-child(3) i::after{animation-name:s3}
@keyframes s1{0%,29%{opacity:1}31%,100%{opacity:0}}
@keyframes s2{0%,29%{opacity:0}31%,64%{opacity:1}66%,100%{opacity:0}}
@keyframes s3{0%,64%{opacity:0}66%,99%{opacity:1}100%{opacity:0}}
.howx-steps b{display:block;font-weight:400;font-size:24px;letter-spacing:-.02em}
.howx-steps span{display:block;margin-top:4px;color:var(--muted);font-size:15.5px;line-height:1.45}

/* tested, then published */
.tested{margin:120px 12px 0;border-radius:var(--r);overflow:hidden;background:var(--navy);color:#fff}
.tested-img{display:block;width:100%;height:320px;object-fit:cover;object-position:50% 68%}
.tested-in{max-width:var(--content);margin:0 auto;padding:64px 32px 72px;text-align:center}
.tested .eyebrow{color:rgb(255 255 255 / .7)}
.tested .eyebrow::before{background:#fff}
.tested .h2{color:#fff}
.tested-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:44px 0 40px;text-align:left}
.tested-tiles>div{background:rgb(255 255 255 / .08);border:1px solid rgb(255 255 255 / .16);border-radius:20px;padding:26px 26px 28px}
.tested-tiles svg{display:block;width:24px;height:24px;color:var(--accent);margin-bottom:18px}
.tested-tiles b{display:block;font-weight:400;font-size:22px;letter-spacing:-.02em}
.tested-tiles span{display:block;margin-top:6px;color:#aeb8c8;font-size:15px;line-height:1.45}
.tested-note{margin:16px 0 0;color:#8f9bb0;font-size:13px}

/* order by 2 PM ET, ships today */
.shipx{display:grid;grid-template-columns:1fr 1.15fr;gap:18px;align-items:stretch}
.shipx-copy{background:var(--card);border-radius:var(--r);padding:52px 48px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.shipx-copy .eyebrow{justify-content:flex-start}
.shipx-copy .h2{text-align:left;font-size:clamp(34px,3.4vw,48px)}
.cd{margin:34px 0 0}
.cd b{display:block;font-weight:400;font-size:64px;letter-spacing:-.045em;line-height:1;color:var(--accent);font-variant-numeric:tabular-nums}
.cd span{display:block;margin-top:10px;color:var(--muted);font-size:15px}
.shipx-copy ul{list-style:none;margin:30px 0 0;padding:0;display:grid}
.shipx-copy li{padding:14px 0;border-top:1px solid #e4e4e0;font-size:15.5px;color:#333}
.shipx-copy li:last-child{border-bottom:1px solid #e4e4e0}
.shipx-img{border-radius:var(--r);overflow:hidden;background:var(--card);min-height:480px}
.shipx-img img{width:100%;height:100%;object-fit:cover}


/* final call to action */
.home-cta{background:var(--navy);color:#fff;border-radius:var(--r);padding:84px 32px;text-align:center}
.home-cta .h2{color:#fff}
.home-cta p{max-width:520px;margin:18px auto 32px;color:#c4cad4;font-size:17.5px;line-height:1.55}
.home-cta+*{margin-top:0}

@media (max-width:1080px){
  .hero-copy{width:min(60%,560px)}
  .inbox{grid-template-columns:1fr}
  .inbox-img{min-height:0;aspect-ratio:16/10}
  .tbar{flex-wrap:wrap;justify-content:center;border-radius:22px;gap:10px 18px}
  .bento{grid-template-columns:1fr 1fr}
  .bento-img{grid-row:auto;grid-column:1/-1;min-height:0;aspect-ratio:16/10}
  .howx{grid-template-columns:1fr}
  .howx-art{min-height:0;padding:36px 24px}
  .cart{height:440px}
  .tested-tiles{grid-template-columns:1fr}
  .shipx{grid-template-columns:1fr}
  .shipx-img{min-height:0;aspect-ratio:16/10}
}
/* phones and small tablets: the 4:5 photo, copy on its empty top, pen below */
@media (max-width:900px){
  .hero{flex-direction:column;align-items:stretch;height:auto}
  .hero::after{display:none}
  .hero-img{position:relative;order:2;display:block;width:100%;max-width:720px;margin:calc(min(100vw - 24px,720px) * -.28) auto 0}
  .hero-img img{height:auto;aspect-ratio:4/5;object-position:center bottom;-webkit-mask-image:linear-gradient(180deg,transparent,#000 18%);mask-image:linear-gradient(180deg,transparent,#000 18%)}
  .hero-copy{width:auto;max-width:620px;padding:104px 22px 0}
}
@media (max-width:640px){
  .navbtn.ex{display:none}
  .hero-wrap .nav{margin:20px 22px}
  .hero-wrap .nav.solid{margin:10px 12px}
  .hero-copy{padding:88px 20px 0}
  .hero-pill{font-size:12.5px;padding:6px 12px}
  .hero h1{font-size:46px;margin-top:16px}
  .hero-sub{font-size:15.5px;margin-top:14px}
  .hero-btns{margin-top:22px;gap:10px}
  .hero-btns a{padding:13px 15px;font-size:14.5px}
  .hero-copy small{margin-top:12px;font-size:12.5px}
  .tbar{flex-wrap:nowrap;justify-content:flex-start;margin:12px -16px 0;padding:12px 16px;border-radius:0;background:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:8px}
  .tbar::-webkit-scrollbar{display:none}
  .tbar span{scroll-snap-align:start;background:var(--card);border-radius:99px;padding:11px 16px;font-size:13.5px}
  .tbar span+span::before{display:none}
  .tbar svg{width:18px;height:18px}
  .bento{margin-top:36px;gap:10px}
  .bento-img{aspect-ratio:4/5;max-height:480px}
  .bento-card{padding:20px 18px;min-height:0}
  .bento-card svg{width:24px;height:24px}
  .bento-card h3{font-size:18px;margin:18px 0 6px}
  .bento-card p{font-size:13.5px}
  .howx{margin-top:36px;gap:10px}
  .howx-art{padding:24px 16px}
  .cart{height:372px}
  .cart .c-labels text{font-size:14.5px}.cart .c-labels .sub{font-size:12.5px}
  .howx-steps{gap:10px}
  .howx-steps li{padding:20px;gap:16px}
  .howx-steps i{flex-basis:40px;height:40px}
  .howx-steps b{font-size:21px}
  .howx-steps span{font-size:14.5px}
  .tested{margin-top:84px}
  .tested-img{height:220px}
  .tested-in{padding:44px 20px 48px}
  .tested-tiles{margin:30px 0 28px;gap:10px}
  .tested-tiles>div{padding:20px}
  .shipx-copy{padding:32px 24px}
  .cd b{font-size:44px}
  .pair-res{margin-top:16px;padding-top:14px}
  .pair-pay b{font-size:28px}
  .tabs{margin-top:26px}
  .tabs button{padding:9px 18px;font-size:14.5px}
  .lineup-grid{margin-top:28px;gap:10px}
  .lineup-grid>.card:last-child:nth-child(odd){width:calc(50% - 5px)}
  .lineup-grid .card{padding:14px 14px 14px}
  .lineup-grid .card .meta{display:none}
  .lineup-grid .card h3{font-size:21px;margin-top:10px}
  .lineup-grid .card .price{font-size:18px;margin:6px 0 12px}
  .lineup-grid .card .price span{display:none}
  .lineup-grid .card .price em{display:block;margin:2px 0 0;font-size:12.5px;white-space:normal}
  .lineup-grid .card .btn-k{padding:11px 8px;font-size:14px;text-align:center}
  .inbox-copy{padding:32px 24px}
  .inbox-copy li{font-size:15.5px;gap:14px;padding:14px 0}
  .inbox-copy li i{flex-basis:30px;height:30px}
  .home-cta{padding:56px 22px}
}
/* reduced motion: draw the Ready frame, highlight no step */
@media (prefers-reduced-motion:reduce){
  .cart .c-plunger,.cart .c-water,.cart .c-rise,.cart .c-powder,.cart .c-swirl,.howx-steps i::before,.howx-steps i::after{animation:none}
  .cart .c-plunger{transform:translateY(-140px)}
  .cart .c-water{transform:scaleY(0)}
  .cart .c-rise{transform:scaleY(1)}
  .cart .c-powder,.cart .c-swirl{opacity:0}
}