/* Snoot · vet care + pet supply */
:root{
  --ink:#14223B; --ink-2:#3B4862; --mute:#6E778A; --soft:#A2AABA; --line:#E6E9EF; --mist:#F4F6F9; --white:#fff;
  --lime:#D9F45B; --lime-2:#C6E83A;
  --sky:#D4E9FF; --mint:#D0F3E3; --blush:#FFDDE8; --apricot:#FFE3CF; --butter:#FFF0B0;
  --sky-d:#5AA8FF; --mint-d:#35C98E; --blush-d:#FF82AC; --apricot-d:#FF8F55; --butter-d:#FFC928;
  --sh-1:0 1px 2px rgba(20,34,59,.06),0 12px 32px -16px rgba(20,34,59,.25);
  --sh-2:0 2px 6px rgba(20,34,59,.06),0 34px 70px -30px rgba(20,34,59,.42);
  --display:'Chillax','General Sans',system-ui,sans-serif;
  --body:'General Sans',system-ui,-apple-system,sans-serif;
  --pad:clamp(18px,4vw,56px);
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--body);color:var(--ink);background:#fff;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
ul,ol{list-style:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:.98;letter-spacing:-.03em}
:focus-visible{outline:2.5px solid var(--sky-d);outline-offset:3px;border-radius:12px}
.wrap{max-width:1360px;margin:0 auto;padding:0 var(--pad)}
.muted{color:var(--mute)} .small{font-size:14px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px}
.skip:focus{top:12px}
.i{width:20px;height:20px;flex:none}
.stars{color:#FFB800;letter-spacing:1px}
.t-sky{--t:var(--sky);--d:var(--sky-d)} .t-mint{--t:var(--mint);--d:var(--mint-d)} .t-blush{--t:var(--blush);--d:var(--blush-d)}
.t-apricot{--t:var(--apricot);--d:var(--apricot-d)} .t-butter{--t:var(--butter);--d:var(--butter-d)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 26px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:16px;white-space:nowrap;transition:background .25s,color .25s,transform .25s var(--ease),box-shadow .25s}
.btn:hover{background:var(--lime);color:var(--ink)}
.btn:active{transform:scale(.98)}
.btn .i{width:18px;height:18px;transition:transform .25s var(--ease)}
.btn:hover .i{transform:translateX(3px)}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink);background:#fff}
.btn.lime{background:var(--lime);color:var(--ink)}
.btn.lime:hover{background:#fff}
.btn.sm{height:42px;padding:0 18px;font-size:14.5px;gap:8px}
.btn.block{width:100%}
.btn[disabled]{opacity:.4;pointer-events:none}
.link{display:inline-flex;align-items:center;gap:8px;font-weight:600;white-space:nowrap;padding-bottom:3px;background:linear-gradient(var(--ink),var(--ink)) 0 100%/100% 1.5px no-repeat;transition:background-size .3s var(--ease)}
.link:hover{background-size:0 1.5px;background-position:100% 100%}
.link .i{width:18px;height:18px}
.live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mint-d);box-shadow:0 0 0 0 rgba(53,201,142,.55);animation:pulse 2s infinite;flex:none}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(53,201,142,0)}100%{box-shadow:0 0 0 0 rgba(53,201,142,0)}}
.label{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;color:var(--ink-2);margin-bottom:20px}
.label i{width:9px;height:9px;border-radius:50%}
.label.light{color:#C9D3E6}
.d-mint{background:var(--mint-d)} .d-lime{background:var(--lime)} .d-apricot{background:var(--apricot-d)} .d-sky{background:var(--sky-d)} .d-blush{background:var(--blush-d)}

/* announcement + header */
.announce{background:var(--ink);color:#C9D3E6;font-size:13.5px;font-weight:500}
.announce .wrap{display:flex;justify-content:center;align-items:center;gap:26px;height:38px}
.announce b{color:var(--lime);font-weight:600}
.announce .sep{width:3px;height:3px;border-radius:50%;background:#56637e}
#site-header{display:contents}
[id]{scroll-margin-top:96px}
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);transition:box-shadow .3s}
header.site.scrolled{box-shadow:0 1px 0 var(--line)}
.nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;height:80px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:-.04em;line-height:1}
.logo .wm{height:32.5px;width:auto;fill:currentColor}
/* logo motion: the nose sniffs (hover, add to bag, search) and nostrils flare */
.wm-l,.wm-nose,.wm-hole,.bnose{transform-box:fill-box}
.wm-l{transform-origin:50% 100%}
.wm-nose,.bnose{transform-origin:50% 85%}
.wm-hole{transform-origin:50% 50%}
.logo .wm{transition:scale .3s var(--ease)}
.logo:active .wm{scale:.94}
.logo:hover .wm-nose,.logo:focus-visible .wm-nose,.wm.sniff .wm-nose{animation:sniff .85s var(--ease)}
.logo:hover .wm-hole,.logo:focus-visible .wm-hole,.wm.sniff .wm-hole{animation:flare .85s var(--ease)}
.logo.intro .wm-l{animation:wmRise .8s var(--ease) both}
.logo.intro .wm-l:nth-child(3){animation-delay:.07s}
.logo.intro .wm-l:nth-child(5){animation-delay:.2s}
.logo.intro .wm-nose{animation:wmPop .7s cubic-bezier(.34,1.56,.64,1) .12s both,sniff .85s var(--ease) 1s}
.logo.intro .wm-hole{animation:flare .85s var(--ease) 1s}
.rbadge .bnose{animation:sniffIdle 8s var(--ease) 2s infinite}
.rbadge:hover .bnose{animation:sniff .85s var(--ease)}
@keyframes wmRise{from{opacity:0;transform:translateY(60%)}}
@keyframes wmPop{0%{opacity:0;transform:translateY(25%) scale(.35)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes sniff{0%,76%,100%{transform:none}14%{transform:translateY(-3%) scale(1.07,.9)}28%{transform:translateY(1%) scale(.97,1.04)}44%{transform:translateY(-3%) scale(1.07,.9)}60%{transform:scale(.99,1.02)}}
@keyframes flare{0%,76%,100%{transform:none}14%{transform:scale(1.24,.8)}28%{transform:scale(.9,1.06)}44%{transform:scale(1.24,.8)}60%{transform:scale(.97,1.02)}}
@keyframes sniffIdle{0%,10%,100%{transform:none}1.8%{transform:translateY(-4%) scale(1.08,.88)}3.6%{transform:scale(.97,1.05)}5.6%{transform:translateY(-4%) scale(1.08,.88)}7.6%{transform:none}}
.nav-links{display:flex;justify-content:center;gap:2px}
.nav-links a{position:relative;padding:10px 15px;border-radius:999px;font-weight:500;font-size:15.5px;color:var(--ink-2);transition:color .2s,background .2s}
.nav-links a:hover{color:var(--ink);background:var(--mist)}
.nav-links a.on{color:var(--ink);font-weight:600}
.nav-links a.on::after{content:"";position:absolute;left:50%;bottom:3px;width:5px;height:5px;border-radius:50%;background:var(--ink);translate:-50% 0}
.nav-right{display:flex;align-items:center;gap:8px;grid-column:3;justify-self:end}
.search{position:relative}
.search label{display:flex;align-items:center;gap:10px;height:46px;width:clamp(180px,16vw,240px);padding:0 16px;border-radius:999px;background:var(--mist);transition:box-shadow .2s,background .2s;cursor:text}
.search label:focus-within{background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
.search input{border:0;background:none;outline:none;width:100%;min-width:0;font-size:15px}
.search input::placeholder{color:var(--soft)}
.search input::-webkit-search-cancel-button{display:none}
.search .i{color:var(--mute);width:18px;height:18px}
.sresults{position:absolute;top:calc(100% + 10px);right:0;width:min(380px,92vw);background:#fff;border-radius:24px;box-shadow:var(--sh-2);padding:8px;display:none;z-index:60}
.sresults.on{display:block}
.sresults a{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:8px;border-radius:16px}
.sresults a:hover,.sresults a.hl{background:var(--mist)}
.sresults .th{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:var(--t)}
.sresults .th img{width:86%}
.sresults b{font-size:15px;font-weight:600;line-height:1.2;display:block}
.sresults small{color:var(--mute);font-size:13px}
.sresults .pr{font-weight:600}
.sresults .all{grid-template-columns:1fr;text-align:center;font-weight:600;font-size:14px}
.sresults .none{padding:16px;color:var(--mute);font-size:15px}
.book-link{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 16px;border-radius:999px;font-weight:600;font-size:15px;transition:background .2s}
.book-link:hover{background:var(--mist)}
.book-link .i{width:18px;height:18px}
.icon-btn{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;transition:background .2s}
.icon-btn:hover{background:var(--mist)}
.icon-btn .i{width:22px;height:22px}
.cart-btn{display:flex;align-items:center;gap:10px;height:46px;padding:0 7px 0 16px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:15px;transition:transform .25s var(--ease)}
.cart-btn .n{min-width:32px;height:32px;border-radius:999px;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-size:13.5px;font-weight:700;padding:0 8px}
.cart-btn.bump{animation:bump .5s var(--ease)}
@keyframes bump{35%{transform:scale(1.08) rotate(-3deg)}70%{transform:scale(.97)}}
.menu-btn{display:none}
.mnav{display:none}

/* hero */
.hero{padding:clamp(28px,4vw,60px) 0 0;overflow-x:clip}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,7vw,112px);align-items:center}
.pill-live{display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);font-weight:500;font-size:14.5px;color:var(--ink-2)}
.hero h1{font-size:clamp(56px,7.2vw,118px);line-height:.92;letter-spacing:-.045em;font-weight:600;margin:28px 0 30px}
.hl{display:inline-block;background:var(--lime);padding:.02em .14em .08em;border-radius:.18em;rotate:-2deg;margin-left:-.06em}
.hero .lead{font-size:clamp(17.5px,1.45vw,20.5px);color:var(--ink-2);max-width:470px;margin-bottom:36px;line-height:1.5}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}
.proof{display:flex;align-items:center;gap:16px;margin-top:44px;font-size:15px;line-height:1.35}
.proof b{font-family:var(--display);font-size:19px;font-weight:700}
.proof .stars{font-size:14px;margin-left:4px}
.proof span{color:var(--mute)}
.faces{display:flex}
.faces img{width:46px;height:46px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff;margin-left:-12px}
.faces img:first-child{margin-left:0}

.hero-media{position:relative;margin:24px 24px 40px 0}
.back-card{position:absolute;inset:-4% -5% -4% 6%;background:var(--sky);border-radius:48px;rotate:4deg}
.vframe{position:relative;aspect-ratio:6/5.2;border-radius:40px;overflow:hidden;background:#d9dde3;box-shadow:var(--sh-2);isolation:isolate}
.vframe picture,.vframe img,.vframe video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:36% 50%}
.vframe video{opacity:0;transition:opacity 1s ease}
.vframe.playing video{opacity:1}
.vctl{position:absolute;right:18px;top:18px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;place-items:center;z-index:2;transition:transform .2s,background .2s}
.vctl:hover{transform:scale(1.06);background:#fff}
.vctl .i{width:16px;height:16px}
.vctl .iy{display:none}
.vframe.paused .ip{display:none}
.vframe.paused .iy{display:block}
.rbadge{position:absolute;left:-46px;top:-46px;width:124px;height:124px;z-index:3}
.rbadge .spin{animation:spin 18s linear infinite;transform-origin:80px 80px}
.rbadge text{font-family:var(--display);font-weight:600;font-size:12.6px;letter-spacing:.13em;fill:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}
.float-prod{position:absolute;right:-44px;bottom:-54px;width:31%;z-index:3;rotate:9deg;filter:drop-shadow(0 24px 24px rgba(20,34,59,.28));animation:float 6s ease-in-out infinite;transition:rotate .4s var(--ease)}
.float-prod:hover{rotate:3deg}
.float-prod img{width:100%;height:auto}
.float-prod .tag{position:absolute;left:4%;top:8%;background:var(--lime);font-weight:600;font-size:13px;height:30px;padding:0 12px;border-radius:999px;display:inline-flex;align-items:center;rotate:-14deg}
@keyframes float{50%{translate:0 -10px}}
.appt{position:absolute;left:-60px;bottom:64px;z-index:3;display:flex;align-items:center;gap:12px;background:#fff;border-radius:24px;padding:10px;box-shadow:var(--sh-2)}
.appt .av{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 0;background:var(--sky)}
.appt b{display:block;font-size:15px;line-height:1.2}
.appt small{display:block;font-size:13px;color:var(--mute);white-space:nowrap}
.appt .btn{margin-left:6px}

.near-row{display:flex;justify-content:space-between;align-items:center;gap:20px 40px;margin-top:clamp(56px,6vw,88px);padding-top:24px;padding-bottom:24px;flex-wrap:wrap;position:relative}
.near-row::before,.near-row::after{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;border-top:1px solid var(--line)}
.near-row::after{top:auto;bottom:0}
.near{display:flex;align-items:center;gap:10px;font-size:15px}
.near-pick{position:relative}
.near-btn{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:15.5px}
.near-btn .i{width:18px;height:18px;transition:transform .2s}
.near-btn[aria-expanded=true] .i{transform:rotate(180deg)}
.near-menu{position:absolute;left:-14px;top:calc(100% + 12px);background:#fff;border-radius:22px;box-shadow:var(--sh-2);padding:8px;min-width:290px;z-index:20;opacity:0;pointer-events:none;translate:0 -6px;transition:opacity .2s,translate .2s}
.near-menu.on{opacity:1;pointer-events:auto;translate:0 0}
.near-menu button{display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;padding:12px 14px;border-radius:14px;text-align:left;font-weight:600;font-size:15px}
.near-menu button small{color:var(--mute);font-weight:500;font-size:13px}
.near-menu button:hover,.near-menu button.on{background:var(--mist)}
.perks-row{display:flex;gap:32px;flex-wrap:wrap}
.perks-row li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:var(--ink-2)}
.perks-row .i{width:20px;height:20px;color:var(--ink)}

/* sections */
.s{padding:clamp(88px,10vw,150px) 0}
.s.pt0{padding-top:0}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;margin-bottom:clamp(32px,4vw,56px);flex-wrap:wrap}
.sec-head h2,.care-intro h2,.faq-side h2,.auto-copy h2{font-size:clamp(40px,5vw,76px);letter-spacing:-.04em;max-width:20ch}
h2 .m{display:block}
.sec-head h2 .m,.care-intro h2 .m,.faq-side h2 .m,.auto-copy h2 .m{color:var(--soft)}
.sec-head.center{flex-direction:column;align-items:center;text-align:center}
.sec-head .sub{font-size:18px;color:var(--mute);max-width:520px}
.center-cta{display:flex;justify-content:center;margin-top:48px}

/* categories */
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.cat{position:relative;display:block;aspect-ratio:3/3.9;border-radius:30px;background:var(--t);overflow:hidden;padding:22px;isolation:isolate}
.cat b{display:block;font-family:var(--display);font-size:clamp(20px,1.7vw,24px);font-weight:600;letter-spacing:-.02em;line-height:1.05}
.cat small{display:block;font-size:13.5px;color:var(--ink-2);margin-top:4px;opacity:.75}
.cat img{position:absolute;left:50%;bottom:0;width:92%;height:auto;translate:-50% 0;z-index:-1;transition:transform .7s var(--ease)}
.cat.prod img{width:80%;bottom:2%}
.cat:hover img{transform:translateY(-8px) scale(1.05)}
.cat .go{position:absolute;right:16px;top:16px;width:38px;height:38px;border-radius:50%;background:#fff;display:grid;place-items:center;opacity:0;scale:.8;transition:opacity .3s,scale .3s var(--ease)}
.cat .go .i{width:16px;height:16px}
.cat:hover .go{opacity:1;scale:1}

/* chips + segmented */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{height:42px;padding:0 18px;border-radius:999px;font-weight:600;font-size:14.5px;color:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--line);transition:background .2s,color .2s,box-shadow .2s;white-space:nowrap}
.chip:hover{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.chip.on{background:var(--ink);color:#fff;box-shadow:none}
.seg{position:relative;display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--mist);border-radius:999px;padding:5px}
.sec-head .seg{margin-top:10px}
.seg button{position:relative;z-index:1;height:44px;padding:0 26px;border-radius:999px;font-weight:600;font-size:15px;transition:color .25s}
.seg button.on{color:#fff}
.seg-knob{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:var(--ink);transition:transform .4s var(--ease),width .4s var(--ease)}

/* product cards */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);row-gap:clamp(32px,3vw,44px)}
.pcard{position:relative;display:flex;flex-direction:column;gap:16px;animation:cardin .6s var(--ease) both}
@keyframes cardin{from{opacity:0;transform:translateY(14px)}}
.pcard .ph{position:relative;display:grid;place-items:center;aspect-ratio:1/1.08;border-radius:30px;background:var(--t);overflow:hidden}
.pcard .ph img{width:88%;height:auto;transition:transform .7s var(--ease)}
.pcard:hover .ph img{transform:scale(1.06) rotate(-2deg)}
.pcard .tags{position:absolute;left:14px;top:14px;display:flex;gap:6px;z-index:1}
.chiplet{display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:999px;background:#fff;font-size:12.5px;font-weight:600;white-space:nowrap}
.chiplet.rx{background:var(--ink);color:#fff}
.chiplet.pick{background:var(--lime)}
.addbtn{position:absolute;right:14px;bottom:14px;z-index:2;width:48px;height:48px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 8px 20px -10px rgba(20,34,59,.5);transition:background .25s,color .25s,transform .35s var(--ease)}
.addbtn:hover{background:var(--ink);color:#fff;transform:rotate(90deg)}
.addbtn.done{background:var(--lime);color:var(--ink);transform:none}
.addbtn .i{width:20px;height:20px}
.pcard .meta{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:0 4px}
.pcard h3{font-family:var(--body);font-size:17.5px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.pcard h3 a::after{content:"";position:absolute;inset:0}
.price{font-weight:600;font-size:17.5px;white-space:nowrap}
.price s{color:var(--soft);font-weight:500;margin-left:6px;font-size:.88em}
.pcard .sub{display:flex;justify-content:space-between;gap:10px;padding:0 4px;margin-top:-10px;font-size:14px;color:var(--mute)}
.pcard .sub .r{white-space:nowrap;color:var(--ink-2)}
.pcard .sub .r b{font-weight:600}

/* statement */
.statement-wrap{padding:0 clamp(10px,1.2vw,18px)}
.statement{position:relative;overflow:hidden;background:var(--lime);border-radius:clamp(32px,4vw,56px);min-height:clamp(560px,60vw,880px);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;isolation:isolate}
.st-kicker{position:absolute;top:clamp(26px,3vw,44px);left:0;right:0;text-align:center;font-weight:600;font-size:16px}
.st-word{position:absolute;left:50%;top:46%;translate:-50% -50%;font-family:var(--display);font-weight:700;font-size:clamp(130px,25vw,400px);line-height:.8;letter-spacing:-.05em;color:var(--ink);white-space:nowrap;z-index:-1;user-select:none;padding-right:.05em}
.st-dog{display:block;width:clamp(250px,29vw,440px)}
.st-dog img{width:100%;height:auto;filter:drop-shadow(0 30px 30px rgba(20,34,59,.25))}
.stickers .sk{position:absolute;z-index:2;display:inline-flex;align-items:center;height:clamp(44px,4vw,56px);padding:0 clamp(18px,1.8vw,26px);border-radius:999px;font-weight:600;font-size:clamp(14.5px,1.25vw,17.5px);box-shadow:var(--sh-1);white-space:nowrap;transition:rotate .4s var(--ease)}
.stickers .sk:hover{rotate:0deg}
.sk.s1{left:7%;top:24%;background:#fff;rotate:-6deg}
.sk.s2{right:7%;top:28%;background:var(--ink);color:var(--lime);rotate:5deg}
.sk.s3{left:12%;bottom:15%;background:var(--sky);rotate:5deg}
.sk.s4{right:11%;bottom:12%;background:var(--blush);rotate:-5deg}

/* vet care */
.care{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(48px,7vw,120px);align-items:start}
.care-intro{position:sticky;top:120px}
.care-intro h2{margin-bottom:24px}
.body-l{font-size:18px;color:var(--mute);max-width:460px}
.facts{display:flex;gap:clamp(24px,3vw,48px);margin:36px 0 40px;padding-top:28px;border-top:1px solid var(--line)}
.facts b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(34px,3.2vw,46px);letter-spacing:-.04em;line-height:1}
.facts span{font-size:14px;color:var(--mute)}
.svc-list{border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:60px minmax(0,1fr) auto 46px;gap:22px;align-items:center;padding:24px 12px;border-bottom:1px solid var(--line);transition:background .3s}
.svc-row:hover{background:var(--mist)}
.svc-row .ico{width:60px;height:60px;border-radius:20px;background:var(--t);display:grid;place-items:center;transition:transform .4s var(--ease)}
.svc-row:hover .ico{transform:rotate(-8deg)}
.svc-row .ico .i{width:24px;height:24px}
.svc-row h3{font-size:clamp(21px,1.9vw,26px);font-weight:650;letter-spacing:-.025em}
.svc-row p{font-size:15px;color:var(--mute);margin-top:6px;line-height:1.45}
.svc-row .pr{text-align:right;font-weight:600;white-space:nowrap}
.svc-row .pr small{display:block;font-weight:500;color:var(--mute);font-size:13.5px}
.svc-row .go{width:46px;height:46px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line);display:grid;place-items:center;transition:background .25s,color .25s,box-shadow .25s}
.svc-row:hover .go{background:var(--ink);color:#fff;box-shadow:none}
.svc-row .go .i{width:18px;height:18px}

/* vet chat */
.chat-band{position:relative;overflow:hidden;background:var(--ink);color:#fff;border-radius:clamp(32px,4vw,56px);padding:clamp(36px,6vw,96px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(40px,6vw,96px);align-items:center;isolation:isolate}
.chat-band::before{content:"";position:absolute;right:-12%;top:-30%;width:58%;aspect-ratio:1;border-radius:50%;background:#1C2D4C;z-index:-1}
.chat-copy h2{font-size:clamp(40px,4.8vw,72px);letter-spacing:-.045em;margin-bottom:32px}
.chat-copy h2 .m{color:#7E8DAD}
.ticks{display:grid;gap:14px;margin-bottom:40px}
.ticks li{display:flex;gap:14px;align-items:center;font-size:17px;color:#DCE3F0}
.ticks .i{width:28px;height:28px;padding:6px;border-radius:50%;background:var(--lime);color:var(--ink);stroke-width:3}
.chat-win{background:#fff;color:var(--ink);border-radius:32px;box-shadow:0 50px 90px -40px rgba(0,0,0,.6);overflow:hidden;width:100%;max-width:480px;justify-self:end}
.cw-head{display:flex;gap:12px;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}
.cw-head .av{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 0;background:var(--butter)}
.cw-head b{display:block;font-size:15.5px;line-height:1.2}
.cw-head small{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--mute)}
.cw-head .live{width:7px;height:7px}
.cw-time{margin-left:auto;font-size:13px;color:var(--soft);font-weight:600}
.cw-body{padding:20px 18px;display:flex;flex-direction:column;gap:10px;min-height:370px}
.msg{max-width:84%;padding:12px 16px;border-radius:22px;font-size:15px;line-height:1.45}
.msg.me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:6px}
.msg.vet{align-self:flex-start;background:var(--mist);border-bottom-left-radius:6px}
.cw-card{display:flex;gap:10px;align-items:center;margin-top:10px;padding:10px;border-radius:16px;background:#fff}
.cw-card .i{width:34px;height:34px;padding:8px;border-radius:12px;background:var(--lime)}
.cw-card b{display:block;font-size:14px;line-height:1.2}
.cw-card small{font-size:12.5px;color:var(--mute)}
.typing{display:flex;gap:5px;padding:15px 16px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--soft);animation:typing 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{50%{translate:0 -4px;opacity:.5}}
.cw-input{display:flex;align-items:center;justify-content:space-between;margin:0 14px 14px;height:52px;padding:0 6px 0 18px;border-radius:999px;background:var(--mist);color:var(--soft);font-size:14.5px}
.cw-input .send{width:40px;height:40px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center}
.cw-input .send .i{width:16px;height:16px}
.chat-win .msg{opacity:0;translate:0 10px;transition:opacity .45s,translate .45s var(--ease)}
.chat-band.in .msg{opacity:1;translate:0 0}
.chat-band.in .msg:nth-child(1){transition-delay:.3s}
.chat-band.in .msg:nth-child(2){transition-delay:1.1s}
.chat-band.in .msg:nth-child(3){transition-delay:2s}
.chat-band.in .msg:nth-child(4){transition-delay:2.7s}
.chat-band.in .msg:nth-child(5){transition-delay:4.3s}
.chat-win .msg.typing{max-height:60px;overflow:hidden}
.chat-band.in .msg.typing{animation:typing-hide .35s 4s forwards}
@keyframes typing-hide{to{opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin-top:-10px}}

/* plans */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;border-radius:34px;padding:clamp(28px,3vw,40px);box-shadow:inset 0 0 0 1.5px var(--line);transition:transform .4s var(--ease)}
.plan:hover{transform:translateY(-6px)}
.plan.feat{background:var(--ink);color:#fff;box-shadow:none}
.plan .pop{position:absolute;top:24px;right:24px;height:30px;padding:0 12px;border-radius:999px;background:var(--lime);color:var(--ink);font-size:13px;font-weight:600;display:inline-flex;align-items:center}
.plan .pi{width:56px;height:56px;border-radius:18px;background:var(--t);color:var(--ink);display:grid;place-items:center;margin-bottom:26px}
.plan .pi .i{width:24px;height:24px}
.plan h3{font-size:30px;letter-spacing:-.035em}
.plan .for{color:var(--mute);font-size:15px;margin-top:6px}
.plan.feat .for{color:#A9B5CC}
.plan .amt{display:flex;align-items:baseline;gap:6px;margin:28px 0 4px}
.plan .amt b{font-family:var(--display);font-weight:700;font-size:72px;letter-spacing:-.045em;line-height:1;transition:opacity .2s}
.plan .amt.swap b{opacity:0}
.plan .amt span{color:var(--mute);font-weight:500}
.plan.feat .amt span{color:#A9B5CC}
.plan .save{font-size:14px;font-weight:500;color:var(--ink-2);margin-bottom:26px}
.plan.feat .save{color:var(--lime)}
.plan ul{display:grid;gap:13px;margin-bottom:34px;padding-top:26px;border-top:1px solid var(--line)}
.plan.feat ul{border-color:#2B3A57}
.plan li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.4}
.plan li .i{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--t);color:var(--ink);stroke-width:3;margin-top:1px}
.plan.feat li .i{background:var(--lime)}
.plan .btn{margin-top:auto}
.plan.feat .btn{background:var(--lime);color:var(--ink)}
.plan.feat .btn:hover{background:#fff}

/* vets */
.vets{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.vet{display:flex;flex-direction:column}
.vet .portrait{position:relative;aspect-ratio:4/4.9;border-radius:30px;background:var(--t);overflow:hidden;margin-bottom:18px}
.vet .portrait img{position:absolute;left:50%;bottom:0;width:88%;height:auto;translate:-50% 0;transition:transform .7s var(--ease);transform-origin:50% 100%}
.vet:hover .portrait img{transform:scale(1.04)}
.vet .yrs{position:absolute;left:14px;top:14px;z-index:1}
.vet h3{font-family:var(--body);font-size:19px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.vet .role{color:var(--mute);font-size:15px;margin-top:4px}
.vet .bk{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:15px;margin-top:12px;width:fit-content}
.vet .bk .i{width:16px;height:16px;transition:transform .25s var(--ease)}
.vet .bk:hover .i{transform:translateX(4px)}

/* autoship */
.auto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,7vw,120px);align-items:center}
.auto-copy h2{margin-bottom:36px}
.steps{counter-reset:s;margin-bottom:40px;border-top:1px solid var(--line)}
.steps li{counter-increment:s;display:grid;grid-template-columns:52px 1fr;column-gap:18px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.steps li::before{content:counter(s);grid-row:span 2;width:44px;height:44px;border-radius:50%;background:var(--apricot);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:18px}
.steps b{font-size:18px;font-weight:600;line-height:1.3}
.steps span{font-size:15.5px;color:var(--mute)}
.auto-art{position:relative;aspect-ratio:1/.94;border-radius:clamp(32px,4vw,48px);background:var(--apricot);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.auto-art picture{width:86%}
.auto-art img{width:100%;height:auto}
.sk-note{position:absolute;left:7%;top:9%;height:46px;padding:0 20px;border-radius:999px;background:#fff;font-weight:600;font-size:15px;display:inline-flex;align-items:center;rotate:-5deg;box-shadow:var(--sh-1)}
.sk-save{position:absolute;right:7%;top:8%;width:clamp(84px,8vw,112px);aspect-ratio:1;border-radius:50%;background:var(--lime);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:clamp(24px,2.3vw,32px);letter-spacing:-.04em;rotate:10deg}

/* reviews */
.rating{display:flex;align-items:center;gap:14px}
.rating>b{font-family:var(--display);font-weight:600;font-size:64px;letter-spacing:-.04em;line-height:1}
.rating>span{display:flex;flex-direction:column;font-size:14px;color:var(--mute)}
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.rev{display:flex;flex-direction:column;gap:22px}
.rev img{width:100%;aspect-ratio:1/.82;object-fit:cover;border-radius:30px}
.rev blockquote{font-family:var(--display);font-weight:500;font-size:clamp(20px,1.65vw,24px);line-height:1.3;letter-spacing:-.01em}
.rev figcaption{display:flex;flex-direction:column;font-size:15px}
.rev figcaption b{font-weight:600}
.rev figcaption span{color:var(--mute)}

/* faq */
.faq{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,7vw,120px);align-items:start}
.faq-side h2{margin-bottom:34px}
.help{background:var(--mist);border-radius:28px;padding:28px}
.help>b{font-family:var(--display);font-size:24px;letter-spacing:-.03em;font-weight:700}
.help p{color:var(--mute);margin:6px 0 20px;font-size:15.5px}
.help-btns{display:flex;gap:10px;flex-wrap:wrap}
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;font-family:var(--display);font-weight:600;font-size:clamp(20px,1.8vw,24px);letter-spacing:-.025em}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:38px;height:38px;border-radius:50%;background:var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314223B' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/16px no-repeat;transition:transform .35s var(--ease),background-color .25s}
details[open] summary::after{transform:rotate(45deg);background-color:var(--lime)}
details p{color:var(--mute);padding:0 60px 28px 0;font-size:16.5px;max-width:640px}

/* footer */
footer.site{background:var(--ink);color:#fff;margin:clamp(88px,10vw,150px) clamp(10px,1.2vw,18px) 0;border-radius:clamp(32px,4vw,56px) clamp(32px,4vw,56px) 0 0;padding:clamp(48px,6vw,88px) 0 30px}
.foot-top{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;padding-bottom:56px;border-bottom:1px solid #2B3A57}
.foot-top h2{font-size:clamp(40px,5vw,76px);letter-spacing:-.05em}
.foot-top h2 span{color:var(--lime)}
.foot-sub{color:#A9B5CC;margin-top:18px;max-width:420px;font-size:16px}
.sub-form{display:flex;gap:6px;margin-top:28px;max-width:460px;background:#1F2F4D;border-radius:999px;padding:6px}
.sub-form input{flex:1;min-width:0;height:48px;border:0;border-radius:999px;background:transparent;color:#fff;padding:0 18px;outline:none}
.sub-form input::placeholder{color:#8291AE}
.sub-form .btn{height:48px}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.foot-cols h5{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#8291AE;margin-bottom:18px;font-weight:600}
.foot-cols a{display:block;margin-bottom:12px;color:#E6EBF5;font-size:15.5px;transition:color .2s}
.foot-cols a:hover{color:var(--lime)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;padding-top:28px;color:#8291AE;font-size:14px;flex-wrap:wrap;gap:16px}
.foot-bot .logo{color:#fff;font-size:26px}
.foot-bot .logo .wm{height:37px}
.foot-hours{display:flex;gap:22px;flex-wrap:wrap}
.foot-hours b{color:#fff;font-weight:600}

/* shop */
.shop-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px 40px;flex-wrap:wrap;padding:clamp(36px,5vw,72px) 0 clamp(28px,3vw,40px)}
.crumbs{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--mute);font-weight:500;margin-bottom:20px;flex-wrap:wrap}
.crumbs a:hover{color:var(--ink)}
.crumbs span{opacity:.45}
.shop-head h1{font-size:clamp(52px,6.8vw,108px);letter-spacing:-.045em;line-height:.94;font-weight:600}
.shop-head p{font-size:18px;color:var(--mute);max-width:520px;margin-top:22px}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;margin-bottom:28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);flex-wrap:wrap}
.toolbar-r{display:flex;align-items:center;gap:14px}
.sortwrap{position:relative}
.sortwrap select{appearance:none;-webkit-appearance:none;height:42px;border:0;border-radius:999px;background:var(--mist);padding:0 42px 0 18px;font-weight:600;font-size:14.5px;cursor:pointer}
.sortwrap .i{position:absolute;right:14px;top:50%;translate:0 -50%;width:16px;height:16px;pointer-events:none}
.qnote{display:flex;align-items:center;gap:10px;margin:-8px 0 26px;font-size:15px}
.qnote button{text-decoration:underline;font-weight:600}
.promo{grid-column:span 2;position:relative;overflow:hidden;border-radius:30px;background:var(--ink);color:#fff;padding:clamp(28px,3vw,44px);display:flex;flex-direction:column;justify-content:space-between;gap:22px;min-height:100%;isolation:isolate}
.promo::before{content:"";position:absolute;right:-60px;bottom:-60px;width:62%;aspect-ratio:1;border-radius:50%;background:#1F2F4D;z-index:-1}
.promo h3{font-size:clamp(34px,3.4vw,52px);letter-spacing:-.045em;max-width:9ch}
.promo h3 span{color:var(--lime)}
.promo p{color:#C9D3E6;max-width:300px;font-size:16px}
.promo img{position:absolute;right:2%;bottom:4%;width:min(44%,260px);rotate:8deg;z-index:-1;filter:drop-shadow(0 20px 24px rgba(0,0,0,.35))}
.empty-state{grid-column:1/-1;text-align:center;padding:60px 20px}
.empty-state h3{font-size:36px;margin-bottom:8px}

/* product page */
.pdp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,6vw,96px);padding:20px 0 0;align-items:start}
.pdp-media{position:sticky;top:104px}
.pdp-img{position:relative;aspect-ratio:1/1;border-radius:clamp(32px,3.6vw,48px);background:var(--t);display:grid;place-items:center;overflow:hidden}
.pdp-img img{width:84%;height:auto;animation:float 7s ease-in-out infinite}
.pdp-img .tags{position:absolute;left:22px;top:22px;display:flex;gap:8px}
.pdp-img .chiplet{height:34px;font-size:13.5px;padding:0 14px}
.pdp-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.pdp-facts div{border-radius:22px;padding:16px 14px;background:var(--mist);font-size:13.5px;font-weight:600;line-height:1.3}
.pdp-facts .i{width:22px;height:22px;margin-bottom:10px}
.pdp-info h1{font-size:clamp(40px,4.4vw,70px);letter-spacing:-.04em;font-weight:600;margin-bottom:16px}
.pdp-rate{display:flex;gap:10px;align-items:center;font-size:15px;color:var(--mute);flex-wrap:wrap}
.pdp-rate b{color:var(--ink)}
.pdp-price{display:flex;align-items:center;gap:12px;margin:24px 0 18px}
.pdp-price .price{font-family:var(--display);font-size:44px;font-weight:700;letter-spacing:-.04em}
.pdp-price .price s{font-family:var(--body);font-size:18px;letter-spacing:0}
.pdp-desc{font-size:18px;color:var(--ink-2);margin-bottom:26px;max-width:560px}
.vetnote{display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:start;padding:18px 20px;border-radius:24px;background:var(--mist);margin-bottom:26px}
.vetnote img{width:52px;height:52px;border-radius:50%;object-fit:cover;object-position:50% 0;background:var(--t)}
.vetnote b{display:block;font-size:15px}
.vetnote p{font-size:15px;color:var(--ink-2);margin-top:4px;line-height:1.5}
.rxbox{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:18px 20px;border-radius:24px;background:var(--apricot);margin-bottom:26px}
.rxbox .rx{width:44px;height:44px;border-radius:14px;background:var(--ink);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:17px}
.rxbox b{font-size:16px;display:block;margin-bottom:4px}
.rxbox p{font-size:14.5px;color:var(--ink-2)}
.rxbox select{margin-top:12px;width:100%;height:46px;border-radius:14px;border:0;background:#fff;padding:0 14px;font-weight:600;font-size:14.5px}
.lbl{font-weight:600;font-size:14px;color:var(--ink-2);margin:0 0 10px}
.sizes{display:flex;gap:10px;margin-bottom:24px;flex-wrap:wrap}
.size{min-width:108px;padding:12px 18px;border-radius:18px;box-shadow:inset 0 0 0 1.5px var(--line);font-weight:600;line-height:1.2;text-align:left;transition:box-shadow .2s,background .2s}
.size small{display:block;color:var(--mute);font-weight:500;font-size:13px;margin-top:2px}
.size:hover{box-shadow:inset 0 0 0 1.5px var(--soft)}
.size.on{box-shadow:inset 0 0 0 2px var(--ink)}
.opt{display:grid;grid-template-columns:24px 1fr auto;gap:14px;align-items:start;padding:18px 20px;border-radius:22px;margin-bottom:10px;cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .2s,background .2s;width:100%;text-align:left}
.opt.on{box-shadow:inset 0 0 0 2px var(--ink);background:var(--mist)}
.opt .rad{width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--soft);display:grid;place-items:center;margin-top:1px}
.opt.on .rad{box-shadow:inset 0 0 0 2px var(--ink)}
.opt.on .rad::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--ink)}
.opt b{display:block;font-size:16.5px;font-weight:600}
.opt span{font-size:14.5px;color:var(--mute)}
.opt .pr{font-weight:600;font-size:17px;white-space:nowrap;color:var(--ink)}
.opt .pr s{color:var(--soft);font-weight:500;font-size:14.5px;margin-right:6px}
.opt select{margin-top:10px;height:38px;border-radius:12px;border:0;box-shadow:inset 0 0 0 1.5px var(--line);background:#fff;padding:0 10px;font-weight:600;font-size:14px}
.buy{display:flex;gap:12px;margin:22px 0}
.qty{display:flex;align-items:center;border-radius:999px;background:var(--mist);height:54px;flex:none}
.qty button{width:48px;height:100%;display:grid;place-items:center;border-radius:999px;transition:background .2s}
.qty button:hover{background:var(--line)}
.qty button .i{width:18px;height:18px}
.qty span{min-width:26px;text-align:center;font-weight:600}
.pdp-perks{display:grid;gap:12px;margin-bottom:8px;padding:20px 0;border-top:1px solid var(--line)}
.pdp-perks div{display:flex;gap:12px;align-items:center;font-size:15px;font-weight:500;color:var(--ink-2)}
.pdp-perks .i{width:20px;height:20px;color:var(--ink)}
.pdp-info summary{font-size:20px;padding:22px 0}
.pdp-info details p{padding-right:0}

/* drawer */
.scrim{position:fixed;inset:0;background:rgba(20,34,59,.4);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s;z-index:80}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:10px;right:10px;bottom:10px;width:min(460px,calc(100% - 20px));background:#fff;border-radius:32px;z-index:81;transform:translateX(calc(100% + 20px));transition:transform .5s var(--ease);display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--sh-2)}
.drawer.on{transform:none}
.d-head{display:flex;justify-content:space-between;align-items:center;padding:24px 24px 18px}
.d-head h3{font-size:30px;letter-spacing:-.04em}
.d-head h3 small{font-family:var(--body);font-size:15px;font-weight:500;color:var(--mute);letter-spacing:0;margin-left:8px}
.x{width:44px;height:44px;border-radius:50%;background:var(--mist);display:grid;place-items:center;transition:background .2s,transform .3s var(--ease)}
.x:hover{background:var(--lime);transform:rotate(90deg)}
.x .i{width:20px;height:20px}
.ship{margin:0 24px;padding:14px 16px;border-radius:18px;background:var(--mist);font-size:14.5px}
.ship b{font-weight:600}
.bar{height:6px;border-radius:999px;background:#fff;margin-top:10px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:var(--ink);transition:width .5s var(--ease)}
.d-body{flex:1;overflow:auto;padding:6px 24px;overscroll-behavior:contain}
.empty{text-align:center;padding:40px 10px}
.empty .eart{width:170px;height:190px;border-radius:30px;background:var(--butter);margin:0 auto 24px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.empty .eart img{width:92%}
.empty h4{font-size:30px;margin-bottom:8px}
.line{display:grid;grid-template-columns:84px 1fr auto;gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.line .th{width:84px;height:84px;border-radius:20px;display:grid;place-items:center;background:var(--t)}
.line .th img{width:86%}
.line h4{font-family:var(--body);font-weight:600;font-size:16px;line-height:1.25;letter-spacing:0;margin-bottom:2px}
.line small{color:var(--mute);font-size:13.5px;display:block}
.line .rxt{display:inline-flex;margin-top:6px;font-size:11.5px;font-weight:600;background:var(--ink);color:#fff;border-radius:999px;padding:3px 9px}
.line label{display:flex;gap:8px;align-items:center;font-size:13.5px;font-weight:500;margin-top:8px;cursor:pointer;color:var(--ink-2)}
.line input[type=checkbox]{accent-color:var(--ink);width:16px;height:16px}
.line .qty{height:36px;margin-top:10px;width:fit-content}
.line .qty button{width:34px}
.line .qty button .i{width:14px;height:14px}
.line .qty span{font-size:14px;min-width:20px}
.line .rt{text-align:right;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end}
.line .rt b{font-weight:600;font-size:16px}
.line .rm{font-size:13px;color:var(--mute);text-decoration:underline}
.up{margin:18px 0;border-radius:22px;padding:12px;display:grid;grid-template-columns:60px 1fr auto;gap:12px;align-items:center;background:var(--mist)}
.up .th{width:60px;height:60px;border-radius:16px;display:grid;place-items:center;background:var(--t)}
.up .th img{width:86%}
.up b{font-size:15px;font-weight:600;display:block;line-height:1.2}
.up small{color:var(--mute);font-size:13px}
.d-foot{padding:18px 24px 22px;border-top:1px solid var(--line)}
.tot{display:flex;justify-content:space-between;font-family:var(--display);font-weight:700;font-size:26px;margin-bottom:14px;letter-spacing:-.03em}
.d-foot p{font-size:13px;color:var(--mute);text-align:center;margin-top:12px}

/* booking modal */
.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:rgba(20,34,59,.45);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);opacity:0;pointer-events:none;transition:opacity .25s}
.modal.on{opacity:1;pointer-events:auto}
.mbox{width:min(740px,100%);max-height:calc(100dvh - 32px);overflow:auto;background:#fff;border-radius:36px;padding:clamp(24px,4vw,44px);position:relative;transform:translateY(24px) scale(.98);transition:transform .4s var(--ease);box-shadow:var(--sh-2);overscroll-behavior:contain}
.modal.on .mbox{transform:none}
.mbox>.x{position:absolute;right:20px;top:20px}
.mprog{display:flex;gap:6px;margin-bottom:22px;max-width:200px}
.mprog i{flex:1;height:5px;border-radius:99px;background:var(--line);transition:background .3s}
.mprog i.on{background:var(--ink)}
.mstep{font-size:14px;font-weight:600;color:var(--mute);margin-bottom:10px}
.mbox h3{font-size:clamp(32px,4.2vw,48px);letter-spacing:-.045em;margin-bottom:26px;padding-right:48px}
.pets{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
.petb{position:relative;border-radius:26px;background:var(--t);overflow:hidden;aspect-ratio:1/1.05;text-align:left;padding:16px;font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.03em;transition:transform .25s var(--ease),box-shadow .25s;box-shadow:inset 0 0 0 0 var(--ink);isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}
.petb img{position:absolute;left:50%;bottom:0;width:78%;translate:-50% 0;z-index:-1}
.petb .paw{position:absolute;left:50%;top:58%;translate:-50% -50%;width:40%;height:auto;opacity:.85}
.petb:hover{transform:translateY(-3px)}
.petb.on{box-shadow:inset 0 0 0 3px var(--ink)}
.field{display:block;margin-bottom:14px}
.field>span{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.field input,.field select{width:100%;height:54px;border-radius:16px;border:0;box-shadow:inset 0 0 0 1.5px var(--line);padding:0 16px;font-size:16px;background:#fff;transition:box-shadow .2s}
.field input:focus,.field select:focus{outline:none;box-shadow:inset 0 0 0 2px var(--ink)}
.svcs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:8px}
.svcb{display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:center;text-align:left;padding:14px;border-radius:20px;box-shadow:inset 0 0 0 1.5px var(--line);transition:box-shadow .2s,background .2s}
.svcb .ico{width:46px;height:46px;border-radius:15px;background:var(--t);display:grid;place-items:center}
.svcb .ico .i{width:20px;height:20px}
.svcb b{display:block;font-size:16px;font-weight:600;line-height:1.2}
.svcb small{color:var(--mute);font-size:13px}
.svcb:hover{box-shadow:inset 0 0 0 1.5px var(--soft)}
.svcb.on{box-shadow:inset 0 0 0 2px var(--ink);background:var(--mist)}
.days{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(72px,1fr);gap:8px;overflow-x:auto;scrollbar-width:none;margin-bottom:16px;padding:2px}
.days::-webkit-scrollbar{display:none}
.day{border-radius:18px;padding:10px 6px;background:var(--mist);text-align:center;transition:background .2s,color .2s}
.day small{display:block;font-size:12.5px;font-weight:600;color:var(--mute)}
.day b{font-family:var(--display);font-size:24px;display:block;line-height:1.1;font-weight:700}
.day.on{background:var(--ink);color:#fff}
.day.on small{color:#A9B5CC}
.times{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:8px;margin-bottom:22px}
.time{height:44px;border-radius:14px;box-shadow:inset 0 0 0 1.5px var(--line);font-weight:600;font-size:14.5px;transition:background .2s,box-shadow .2s}
.time:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.time.on{background:var(--lime);box-shadow:inset 0 0 0 2px var(--ink)}
.time[disabled]{opacity:.35;text-decoration:line-through;pointer-events:none}
.mfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px;flex-wrap:wrap}
.mfoot .back{font-weight:600;text-decoration:underline;text-underline-offset:3px}
.confirm{text-align:center;padding:6px 0}
.confirm .tick{width:84px;height:84px;border-radius:50%;background:var(--lime);display:grid;place-items:center;margin:0 auto 22px;animation:pop .5s var(--ease)}
.confirm .tick .i{width:38px;height:38px;stroke-width:3}
@keyframes pop{from{transform:scale(.4);opacity:0}}
.confirm h3{padding:0}
.ticket{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border-radius:22px;overflow:hidden;text-align:left;margin:6px 0 22px}
.ticket div{background:var(--mist);padding:14px 18px}
.ticket small{display:block;font-size:13px;color:var(--mute);font-weight:600}
.ticket b{font-size:16px;font-weight:600}
.demo-note{font-size:13.5px;color:var(--mute);margin-top:14px}

/* checkout */
.co{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);padding:24px 0 0;align-items:start}
.co h1{font-size:clamp(48px,5.6vw,86px);letter-spacing:-.045em;font-weight:600;margin-bottom:20px}
.co h2{font-size:24px;letter-spacing:-.03em;margin:36px 0 16px;display:flex;align-items:center;gap:12px}
.co h2 i{min-width:30px;height:30px;padding:0 8px;border-radius:999px;background:var(--ink);color:#fff;display:grid;place-items:center;font-style:normal;font-size:14px;font-family:var(--body);font-weight:600;letter-spacing:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ship-opts{display:grid;gap:10px}
.note{background:var(--mist);border-radius:18px;padding:14px 18px;font-size:14.5px;font-weight:500;display:flex;gap:10px;align-items:center}
.summary{position:sticky;top:104px;border-radius:34px;background:var(--mist);padding:clamp(24px,3vw,34px)}
.summary h3{font-size:28px;letter-spacing:-.04em;margin-bottom:20px}
.sline{display:grid;grid-template-columns:62px 1fr auto;gap:14px;align-items:center;margin-bottom:14px}
.sline .th{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;background:var(--t);position:relative}
.sline .th img{width:86%}
.sline .q{position:absolute;right:-7px;top:-7px;background:var(--ink);color:#fff;min-width:22px;height:22px;border-radius:999px;font-size:12px;display:grid;place-items:center;font-weight:600;padding:0 5px}
.sline b{font-weight:600;line-height:1.2;display:block;font-size:15px}
.sline small{color:var(--mute);font-size:13px}
.srow{display:flex;justify-content:space-between;padding:7px 0;font-size:15.5px}
.srow.t{border-top:1px solid var(--line);margin-top:12px;padding-top:16px;font-family:var(--display);font-weight:700;font-size:28px;letter-spacing:-.03em}
.done-wrap{text-align:center;padding:40px 0 20px;grid-column:1/-1}
.done-wrap .tick{width:96px;height:96px;border-radius:50%;background:var(--lime);display:grid;place-items:center;margin:0 auto 26px;animation:pop .5s var(--ease)}
.done-wrap .tick .i{width:42px;height:42px;stroke-width:3}
.done-wrap h1{font-size:clamp(50px,7vw,104px);margin-bottom:18px}
.done-wrap p{font-size:19px;max-width:540px;margin:0 auto 30px;color:var(--mute)}

/* toast */
.toast{position:fixed;left:50%;bottom:24px;z-index:95;translate:-50% 20px;opacity:0;display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:10px 20px 10px 10px;border-radius:999px;font-weight:500;font-size:14.5px;box-shadow:var(--sh-2);transition:opacity .3s,translate .4s var(--ease);pointer-events:none;max-width:calc(100% - 32px)}
.toast.on{opacity:1;translate:-50% 0}
.toast .i{width:28px;height:28px;padding:6px;border-radius:50%;background:var(--lime);color:var(--ink);stroke-width:3}

/* reveal */
.rv{opacity:0;translate:0 28px;transition:opacity .8s var(--ease),translate .8s var(--ease)}
.rv.in{opacity:1;translate:0 0}
.reviews .rv:nth-child(2),.vets .rv:nth-child(2),.cats .rv:nth-child(2){transition-delay:.07s}
.reviews .rv:nth-child(3),.vets .rv:nth-child(3),.cats .rv:nth-child(3){transition-delay:.14s}
.vets .rv:nth-child(4),.cats .rv:nth-child(4){transition-delay:.21s}
.cats .rv:nth-child(5){transition-delay:.28s}
.cats .rv:nth-child(6){transition-delay:.35s}

/* ============ responsive ============ */
@media (max-width:1240px){
  .nav-links a{padding:10px 11px;font-size:15px}
  .book-link{display:none}
  .cats{grid-template-columns:repeat(3,1fr)}
  .cat{aspect-ratio:1/1.05}
  .cat img{width:62%}
  .cat.prod img{width:56%}
  .grid{grid-template-columns:repeat(3,1fr)}
  .vets{grid-template-columns:repeat(2,1fr)}
  .appt{left:-28px}
}
@media (max-width:1040px){
  .nav-links{display:none}
  .menu-btn{display:grid}
  .mnav{display:block;position:fixed;inset:0;z-index:70;pointer-events:none}
  .mnav .scr{position:absolute;inset:0;background:rgba(20,34,59,.4);opacity:0;transition:opacity .3s}
  .mnav .panel{position:absolute;left:10px;right:10px;top:10px;background:#fff;border-radius:32px;padding:18px 18px 22px;box-shadow:var(--sh-2);transform:translateY(-115%);transition:transform .5s var(--ease)}
  .mnav.on{pointer-events:auto}
  .mnav.on .scr{opacity:1}
  .mnav.on .panel{transform:none}
  .mnav .ptop{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
  .mnav nav a{display:flex;justify-content:space-between;align-items:center;padding:15px 4px;font-family:var(--display);font-weight:600;font-size:28px;letter-spacing:-.03em;border-bottom:1px solid var(--line)}
  .mnav nav a .i{width:22px;height:22px;color:var(--soft)}
  .mnav .msearch label{display:flex;align-items:center;gap:10px;height:52px;padding:0 18px;border-radius:999px;background:var(--mist)}
  .mnav .msearch input{border:0;background:none;outline:none;width:100%;font-size:16px}
  .mnav .mbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
  .hero-grid{grid-template-columns:1fr;gap:64px}
  .hero-copy{max-width:640px}
  .hero-media{max-width:620px;width:calc(100% - 40px);margin:0 auto 40px}
  .care,.chat-band,.auto,.faq,.pdp,.co{grid-template-columns:1fr}
  .care-intro,.pdp-media,.summary{position:static}
  .chat-win{justify-self:start}
  .plans,.reviews{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(72%,400px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1*var(--pad));padding:6px var(--pad) 10px;scroll-padding:var(--pad)}
  .plans::-webkit-scrollbar,.reviews::-webkit-scrollbar{display:none}
  .plan,.rev{scroll-snap-align:start}
  .plan:hover{transform:none}
  .foot-top{grid-template-columns:1fr}
  .auto-art{max-width:620px}
  .near-row{justify-content:flex-start}
}
@media (max-width:860px){
  .search{display:none}
  .grid{grid-template-columns:repeat(2,1fr)}
  .sk.s1{left:4%;top:14%}
  .sk.s2{right:4%;top:22%}
  .sk.s3{left:4%;bottom:10%}
  .sk.s4{right:4%;bottom:6%}
}
@media (max-width:640px){
  body{font-size:16px}
  .announce .wrap{height:34px;font-size:12.5px}
  .announce .hide-sm{display:none}
  .nav{height:66px;gap:12px}
  .logo{font-size:26px}
  .logo .wm{height:28px}
  .cart-btn{padding:0 6px 0 14px;gap:8px}
  .cart-btn .t{display:none}
  .hero{padding-top:22px}
  .hero h1{font-size:clamp(52px,16vw,76px);margin:22px 0 20px}
  .pill-live{font-size:13px;height:34px;padding:0 13px}
  .hero-cta .btn{flex:1 1 auto}
  .proof{margin-top:32px}
  .hero-grid{gap:56px}
  .hero-media{width:calc(100% - 20px);margin:0 auto 24px}
  .back-card{inset:-3% -4% -3% 5%;border-radius:36px;rotate:3deg}
  .vframe{aspect-ratio:1/1.02;border-radius:30px}
  .rbadge{width:86px;height:86px;left:-14px;top:-30px}
  .float-prod{width:34%;right:-14px;bottom:-30px}
  .float-prod .tag{font-size:11.5px;height:26px;padding:0 9px}
  .appt{left:12px;bottom:14px;padding:8px;gap:10px;border-radius:20px;max-width:calc(100% - 120px)}
  .appt .av{width:40px;height:40px}
  .appt b{font-size:14px}
  .appt small{font-size:12px;white-space:normal}
  .appt .btn{display:none}
  .near-row{gap:16px}
  .perks-row{gap:12px 20px}
  .perks-row li{font-size:14px}
  .cats{grid-template-columns:repeat(2,1fr);gap:12px}
  .cat{aspect-ratio:1/1.12;padding:16px;border-radius:26px}
  .cat img{width:80%}
  .cat.prod img{width:70%}
  .sec-head .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--pad));padding:2px var(--pad);width:calc(100% + 2*var(--pad))}
  .sec-head .chips::-webkit-scrollbar{display:none}
  .grid{gap:12px;row-gap:28px}
  .pcard{gap:12px}
  .pcard .ph{border-radius:24px}
  .pcard .tags{left:10px;top:10px}
  .chiplet{height:24px;font-size:11.5px;padding:0 9px}
  .addbtn{width:40px;height:40px;right:10px;bottom:10px}
  .pcard .meta{flex-direction:column;gap:2px}
  .pcard h3{font-size:15.5px}
  .price{font-size:15.5px}
  .pcard .sub{margin-top:-6px;font-size:13px}
  .pcard .sub .a{display:none}
  .statement{min-height:520px}
  .st-word{top:40%;font-size:34vw}
  .st-dog{width:62%}
  .stickers .sk{font-size:13px;height:38px;padding:0 14px}
  .sk.s1{left:5%;top:15%}
  .sk.s2{right:4%;top:auto;bottom:34%}
  .sk.s3{left:3%;bottom:18%}
  .sk.s4{right:3%;bottom:5%}
  .svc-row{grid-template-columns:52px minmax(0,1fr) 40px;gap:4px 14px;padding:20px 4px}
  .svc-row .ico{width:52px;height:52px;border-radius:17px;grid-row:span 2}
  .svc-row .pr{grid-column:2;grid-row:2;text-align:left}
  .svc-row .pr small{display:inline;margin-left:6px}
  .svc-row .go{grid-column:3;grid-row:1/span 2;width:40px;height:40px}
  .svc-row p{display:none}
  .facts{gap:22px}
  .chat-band{padding:32px 20px 20px}
  .cw-body{min-height:0;padding:16px 14px}
  .msg{font-size:14px}
  .plans,.reviews{grid-auto-columns:82%}
  .vets{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:74%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1*var(--pad));padding:0 var(--pad);scroll-padding:var(--pad);gap:14px}
  .vets::-webkit-scrollbar{display:none}
  .vet{scroll-snap-align:start}
  .sk-note{font-size:13px;height:38px;padding:0 14px}
  .rating>b{font-size:52px}
  details p{padding-right:0}
  .foot-cols{grid-template-columns:1fr 1fr}
  .foot-bot{flex-direction:column;align-items:flex-start}
  .promo{grid-column:1/-1;min-height:0}
  .promo img{display:none}
  .toolbar-r{width:100%;justify-content:space-between}
  .toolbar .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--pad));padding:2px var(--pad);width:calc(100% + 2*var(--pad))}
  .toolbar .chips::-webkit-scrollbar{display:none}
  .pdp-facts{grid-template-columns:1fr 1fr}
  .buy .btn{padding:0 18px}
  .two{grid-template-columns:1fr}
  .pets{gap:8px}
  .petb{font-size:17px;padding:12px;border-radius:20px}
  .svcs{grid-template-columns:1fr}
  .mbox{border-radius:30px}
  .ticket{grid-template-columns:1fr}
}
@media (max-width:380px){
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;translate:none}
  .chat-win .msg{opacity:1;translate:none}
  .chat-win .typing{display:none}
}

/* figma capture mode: no motion, everything visible */
.capture *,.capture *::before,.capture *::after{animation:none!important;transition:none!important}
.capture .chat-win .msg{opacity:1;translate:none}
.capture .chat-win .typing{display:none}
.capture .mnav,.capture .drawer,.capture .scrim,.capture .modal,.capture #toast{display:none!important}