:root{--peach:#F6E0C8;--peach-deep:#E9C29C;--cocoa:#5A3A22;--plum:#3B2A5C}
.pet-stage{position:relative;overflow:hidden;background:var(--peach);isolation:isolate;padding-block:clamp(48px,7vw,96px) clamp(64px,8vw,120px);text-align:center}
.pet-stage .amb{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;z-index:-2;opacity:.55}
.pet-stage::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(246,224,200,.92) 0%,rgba(246,224,200,.55) 45%,rgba(246,224,200,.85) 100%)}
.pet-stage .eyebrow{color:#8A4B12}
.pet-stage h1{font-size:clamp(46px,7.4vw,112px);line-height:.98;font-weight:300;color:var(--plum)}
.pet-stage h1 b{font-weight:600}
.pet-stage .lead{max-width:42ch;margin:20px auto 0;font-size:clamp(17px,1.5vw,20px);color:var(--cocoa)}
.pet-stage .ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.pill.plum{background:var(--plum)}
.pill.plum-ghost{background:transparent;color:var(--plum);box-shadow:inset 0 0 0 1.5px var(--plum)}
.trio{position:relative;margin-top:clamp(36px,5vw,64px);display:flex;align-items:flex-end;justify-content:center;gap:clamp(8px,4vw,64px)}
.trio .side{height:clamp(200px,24vw,350px);width:auto;filter:drop-shadow(0 24px 20px rgba(90,58,34,.28));will-change:transform}
.trio .reel{flex:0 1 360px;max-width:360px;margin:0;box-shadow:0 40px 80px rgba(90,58,34,.35),0 0 0 6px #fff}
.bubbles{position:absolute;inset:0;pointer-events:none;z-index:-1}
.bubbles span{position:absolute;bottom:-60px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.95),rgba(255,255,255,.25) 45%,rgba(255,255,255,.05) 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);animation:rise linear infinite}
@keyframes rise{to{transform:translateY(-120vh) translateX(var(--dx,30px))}}
@media (prefers-reduced-motion:reduce){.bubbles{display:none}}
@media (max-width:560px){.trio .side{display:none}.r-card img{aspect-ratio:1/1}}

#duo-panel{background:var(--peach)}
#duo-panel .eyebrow{color:#8A4B12}
#duo-panel h2{color:var(--plum)}
#duo-panel .lead{color:var(--cocoa)}

.routine{background:#FFF8F1;padding-block:clamp(88px,11vw,150px)}
.routine h2{font-size:clamp(36px,4.6vw,66px);color:var(--plum);text-align:center}
.routine .sub{text-align:center;color:var(--cocoa);margin-top:14px;font-size:18px}
.r-grid{margin-top:56px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px}
.r-card{border-radius:30px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.r-card img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 70%}
.r-card div{padding:22px 24px 28px}
.r-card .num{font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:.14em;color:#8A4B12}
.r-card h3{font-size:26px;font-weight:500;color:var(--plum);margin-top:6px}
.r-card p{color:#6B5242;margin-top:8px;font-size:15.5px}

.pet-detail{padding-block:clamp(88px,11vw,140px)}
.pet-detail .eyebrow{color:#8A4B12}
.pet-detail h2{color:var(--plum)}
.pet-detail .lead{color:#6B5242}
.pet-detail .spec li span:first-child{color:#8A6A55}
.pet-detail .spec, .pet-detail .spec li{border-color:#EBD6C2}
#jab-sec{background:#FFF8F1}
#cv-sec{background:var(--peach)}
.soon{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 22px;border-radius:999px;background:#fff;color:var(--plum);font-weight:700;font-size:15px;box-shadow:inset 0 0 0 1.5px var(--plum)}

/* Palettes per pet product */
.pal-detail{position:relative;overflow:hidden}
.pal-detail .eyebrow{color:var(--acc)}
.pal-detail h2{color:var(--fg)}
.pal-detail .lead{color:var(--soft)}
.pal-detail .spec,.pal-detail .spec li{border-color:var(--line2)}
.pal-detail .spec li span:first-child{color:var(--soft)}
.pal-detail .detail-vis{background:rgba(255,255,255,.22);position:relative;overflow:visible}
.pal-detail .detail-vis img{position:relative;z-index:1}
.pill.pal-acc-solid{background:var(--acc);color:#fff}
.pet-peek{width:clamp(150px,15vw,230px);right:-4%;bottom:-6%;z-index:2}
.pet-peek.pair{width:clamp(180px,19vw,290px);left:-6%;right:auto;bottom:-8%}
.foam{position:absolute;inset:0;pointer-events:none}
.foam span{position:absolute;bottom:-80px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.95),rgba(255,255,255,.25) 45%,rgba(255,255,255,.05) 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6);animation:rise linear infinite}
.runner{position:relative;height:clamp(150px,18vw,240px);overflow:hidden}
.runner .run{width:clamp(150px,16vw,240px);left:-20%;bottom:6px}
html:not(.motion) .runner .run{left:50%;transform:translateX(-50%)}
.cross{position:absolute;inset:0;pointer-events:none}
.cross i{position:absolute;width:44px;height:44px;opacity:.9;background:linear-gradient(var(--acc),var(--acc)) center/100% 30% no-repeat,linear-gradient(var(--acc),var(--acc)) center/30% 100% no-repeat}
.cross i:nth-child(1){left:12%;top:18%}.cross i:nth-child(2){right:14%;top:44%;width:30px;height:30px}.cross i:nth-child(3){left:20%;bottom:16%;width:24px;height:24px}
.paws{position:absolute;inset:0;width:100%;height:100%;color:var(--fg);opacity:.16}
@media (max-width:760px){.pet-peek{width:130px;right:0;bottom:-4%}.pet-peek.pair{width:170px;left:-2%}}