/* ============================================================================================
   Naverila "demo" skin, 17 Oct 2026. Loaded last on every page under /demo/.
   One rule: change tokens and shapes, never behaviour. Orange is the action colour, blue is
   the active/selected colour and the paw, off-white paper stays, type becomes Clash Display
   for headlines and Clash Grotesk for everything else.
   ============================================================================================ */
:root{
  --d-orange:#F7931E; --d-orange-2:#E07F0F; --d-orange-3:#B8650A; --d-orange-wash:#FFF0DE;
  --d-blue:#1877F2; --d-blue-2:#0E5FD1; --d-blue-wash:#DDEBFF;
  --d-paper:#F6F5F0; --d-paper-2:#EFEDE6; --d-ink:#1D1D1B; --d-muted:#78776F;

  --forest:var(--d-orange); --forest-2:var(--d-orange-2); --forest-3:var(--d-orange-3);
  --primary:var(--d-orange); --primary-ink:var(--d-orange-2); --primary-wash:var(--d-orange-wash);
  --gold:var(--d-blue); --gold-2:var(--d-blue-wash); --butter:var(--d-blue-wash);
  --field:#F1F0EA; --field-2:var(--d-orange-wash); --field-3:#E9E7DF; --aqua:var(--d-blue-wash);
  --paper:var(--d-paper); --paper-2:var(--d-paper-2); --canvas:var(--d-paper); --surface:#fff;
  --ink:var(--d-ink); --ink-2:#2B2B29; --ink-70:#3A3A37; --muted:var(--d-muted); --faint:#8D8C85;
  --line:#E6E4DC; --border:#E2E0D8; --border-soft:#ECEAE2;
  --on-dark:#fff; --on-dark-2:#FFE8CF;
  --display:'Clash Display','Clash Grotesk',system-ui,sans-serif;
  --sans:'Clash Grotesk','Satoshi',system-ui,sans-serif;
  --fs-hero:clamp(31px,4.05vw,58px);
}
html,body{background:var(--d-paper)}
body{font-family:var(--sans)}

/* type: Clash has no italics and no optical axis; headlines are heavy and tight */
h1,h2,h3,.serif,.t-hero,.ov-copy,.wordmark,.brand,.sheet-h .day,.price,.ap-amt,.req-dog,.req-price,.cp-name,.cl-av,.wk{
  font-family:var(--display)!important;font-weight:700!important;font-variation-settings:normal!important;letter-spacing:-.025em!important}
body *{font-style:normal!important}
.hero h1 .w,.t-hero .w{color:var(--d-orange)}
.hero h1 .w::before,.t-hero .w::before{background:var(--d-blue-wash);height:.22em;bottom:.06em}
.hero h1 .dot,.t-hero .dot{color:var(--d-blue)}
.eyebrow,.kick,.lead-in,.psub,.sub,.say{font-family:var(--sans)!important}

/* the mark: orange tile, white paw */
.brand .mk,.wordmark .mk,.m-brand .mk,.mobrand .mk,.brandchip .mk{background:var(--d-orange)!important}
.brand,.wordmark,.side-brand,.hdr .bar a:not(.btn),.hnav a{color:var(--d-ink)!important}
.side-brand .mk{background:#fff!important}.side-brand .mk svg{color:var(--d-orange)!important}
.side .side-brand,.side .side-nav a,.side .side-biz,.side .signout{color:#fff!important}
.brand .mk svg,.wordmark .mk svg,.m-brand .mk svg,.mobrand .mk svg,.brandchip .mk svg{color:#fff!important}

/* buttons: chunky pills; every primary action carries the paw */
.btn,.filt,.seg,.seg button,.seg-b,.today-b,.calbar .add,.req-actions button,.sheet-ctl button,.tag,.pill,.stag,.chip,.ct-pill,.trial-banner .up{border-radius:999px!important}
/* INK on the orange, not white.
   White on #F7931E measures 2.30:1 and the action buttons are 15-16px, so they need 4.5:1 --
   the primary call to action on the site was its least readable text, which matters most in
   daylight on a phone, which is where a groomer reads it. Ink on the same orange is 7.35:1,
   so the brand colour does not have to move; only the text does. Measured, not assumed. */
.btn-dark,.btn-primary,.req-actions .ap,.calbar .add,.btn-gold,.cl-add,.ph-cta,.mobnav .on,.go.btn{
  background:var(--d-orange)!important;color:var(--d-ink)!important;font-weight:700!important;
  letter-spacing:.01em;
  box-shadow:0 14px 28px -14px rgba(247,147,30,.75)!important}
.btn-dark:hover,.btn-primary:hover,.req-actions .ap:hover,.calbar .add:hover{background:var(--d-orange-2)!important}
.btn-dark::after,.btn-primary::after,.req-actions .ap::after{content:"";width:17px;height:17px;flex:none;margin-left:2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231D1D1B'%3E%3Cellipse cx='5.6' cy='12.4' rx='2' ry='2.7'/%3E%3Cellipse cx='9.8' cy='8.1' rx='2.1' ry='2.8'/%3E%3Cellipse cx='14.2' cy='8.1' rx='2.1' ry='2.8'/%3E%3Cellipse cx='18.4' cy='12.4' rx='2' ry='2.7'/%3E%3Cpath d='M12 12.7c-3 0-5.1 2.1-5.1 4.4 0 2 1.9 2.9 5.1 2.9s5.1-.9 5.1-2.9c0-2.3-2.1-4.4-5.1-4.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.btn-line,.btn-quiet,.btn-ghost,.sheet-ctl button{background:#fff!important;color:var(--d-ink)!important;box-shadow:inset 0 0 0 1.5px var(--line)!important}
.btn-line:hover,.btn-quiet:hover,.sheet-ctl button:hover{background:var(--d-paper-2)!important}

/* selected and active states are blue, like the active care card and the paws */
.filt.on,.seg .on,.seg-b.on,.tabs [aria-selected="true"],.cp-tabs .on,.cp-tabs [aria-selected="true"],.story.on,.tier.on,.ct-pill.on,.chip.on{
  background:var(--d-blue)!important;color:#fff!important;border-color:var(--d-blue)!important;box-shadow:none!important}
.ap-chk,.check .c-done,.chk,.done .mk,.c-done{background:var(--d-blue)!important;color:#fff!important}
.ap.active,.req-card.active{background:var(--d-blue-wash)!important}
.now::before{background:var(--d-blue)!important;box-shadow:0 0 10px rgba(24,119,242,.5)!important}
.now .t{background:var(--d-blue)!important;color:#fff!important}
.now .t::before{background:#fff!important}
.trial-banner{background:var(--d-blue)!important}
.trial-banner .exp,.trial-banner strong{color:#fff!important}
.trial-banner .dot{background:#fff!important}
.trial-banner .up{background:#fff!important;color:var(--d-blue)!important}
a{color:var(--d-blue)}

/* corners: soft and generous */
.sheet,.sec,.md .box,.req-card,.nextcard2,.cl-row,.dogcard,.card,.quote-card,.ct-card,.dep-row,.tile,.shot,.story,.mail,.flow,.duo,.faq details,.wk-card,.panel,.cp-card,.cp-stat,.setrow,.svc-item,.ap-note,.inp,.notesbox,textarea,select,input:not([type=checkbox]):not([type=radio]):not([type=range]){border-radius:22px!important}
.inp,.notesbox,textarea,select,input:not([type=checkbox]):not([type=radio]):not([type=range]){border-radius:16px!important}
.ap,.ap-more-in .pill,.sheet-h .tag{border-radius:18px!important}
.ap-av,.dogav,.cl-av,.avcircle,.lph{border-radius:50%!important}
.story .ph{border-radius:0!important}
.sheet{box-shadow:0 30px 60px -36px rgba(29,29,27,.35),0 0 0 1px rgba(29,29,27,.04)!important}

/* the paw trail behind the homepage headline */
.demo-paws{position:absolute;left:-3%;top:-12%;width:min(40%,470px);height:auto;pointer-events:none;z-index:0;color:var(--d-blue);opacity:.9}
.demo-paws .pw{opacity:0;transform-box:fill-box;transform-origin:center;animation:demoPaw .55s cubic-bezier(.3,1.12,.4,1) forwards;animation-delay:calc(.7s + var(--i) * .16s)}
@keyframes demoPaw{from{opacity:0;scale:.4}to{opacity:1;scale:1}}
.hero .hero-grid{position:relative;z-index:1}
@media(max-width:900px){.demo-paws{width:62%;left:auto;right:-8%;top:-3%}}
@media(prefers-reduced-motion:reduce){.demo-paws .pw{animation:none;opacity:1}}

/* chips that were ink-filled become blue; the phone tab bar's active item is an orange pill */
.lineup .f.on,.lu .f.on,[class*="chip"].on,.tabs .on{background:var(--d-blue)!important;color:#fff!important}
.mobnav .on,.mobnav a[aria-current],.mobnav button.on,.mobnav .active{background:var(--d-orange)!important;color:var(--d-ink)!important;border-radius:999px!important}
.mobnav .on svg,.mobnav .active svg{color:var(--d-ink)!important}

/* ============================================================================================
   Second pass: colour by absence. Every large surface that was forest goes neutral; orange is
   kept for the primary action and the active tab; blue marks the single live or selected item.
   ============================================================================================ */
:root{--on-dark:var(--d-ink);--on-dark-2:var(--d-muted)}
/* big surfaces → cream or white, with dark text */
.side,.brand-side,.aside,.mhead,.hd,.overture,.band::before,.sv-stage,.film-video,.pvbar,.demobar{background:var(--d-paper-2)!important;background-image:none!important;color:var(--d-ink)!important}
.side,.brand-side{background:#fff!important;border-right:1px solid var(--line)!important}
.band::before{background:var(--d-paper-2)!important}
.band,.band *:not(.btn):not(.btn *){color:var(--d-ink)}
.band .btn-dark,.band .btn-dark *{color:var(--d-ink)!important}
.aside *:not(.btn):not(.btn *),.mhead *:not(.btn):not(.btn *),.hd *:not(.btn):not(.btn *),.brand-side *:not(.btn):not(.btn *),.overture *:not(.btn):not(.btn *){color:var(--d-ink)!important}
.aside .intro,.aside .sumrow .k,.mhead .loc{color:var(--d-muted)!important}
.brandchip{background:#fff!important;color:var(--d-ink)!important;box-shadow:inset 0 0 0 1.5px var(--line)!important}
.brandchip .mk{background:var(--d-orange)!important}.brandchip .mk svg{color:#fff!important}
.sumbox{background:#fff!important;border-radius:22px!important;padding:16px!important;margin-top:18px!important}
.story{background:#fff!important;box-shadow:0 14px 34px -26px rgba(29,29,27,.25)!important}
.story *{color:var(--d-ink)!important}
.sv-stage.light .sv-ctl,.sv-stage.light .sv-bars i::after{background:var(--d-orange)!important}
/* the sidebar: white, dark text, an orange pill on the current section */
.side .side-brand,.side .side-nav a,.side .side-nav button,.side .side-biz,.side .signout,.side .side-foot *{color:var(--d-ink)!important}
.side .snav{border-radius:999px!important}
.side .snav.on,.side-nav .on,.side .snav[aria-current]{background:var(--d-orange)!important;color:var(--d-ink)!important}
.side .snav.on *,.side-nav .on *{color:var(--d-ink)!important}
.side .snav.on .badge{background:#fff!important;color:var(--d-orange)!important}
.side .side-link,.side .sidecard{background:var(--d-paper)!important;color:var(--d-ink)!important}
/* the trial bar is a quiet card, not a banner */
.trial-banner,.trial-banner.paid{background:#fff!important;color:var(--d-ink)!important;border-bottom:1px solid var(--line)!important}
.trial-banner strong,.trial-banner .exp{color:var(--d-ink)!important}
.trial-banner .dot{background:var(--d-orange)!important}
.trial-banner .up{background:var(--d-orange)!important;color:var(--d-ink)!important}
/* one live item: solid blue, white text, like the morning meal */
.ap.active{background:var(--d-blue)!important}
.ap.active .ap-who strong,.ap.active .ap-who span,.ap.active .ap-time,.ap.active .ap-time small,.ap.active .ap-amt,.ap.active .ap-svc{color:#fff!important}
.ap.active .ap-av{box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(255,255,255,.45)!important}
.ap.active .pill{background:#fff!important;color:var(--d-blue)!important}
.ap.done .ap-chk{background:var(--d-blue)!important}
/* selected things are blue */
/* every "this is the one you picked" state, in one place. Orange, because the navigation
   pills are orange and two different accents for the same meaning is what made the booking
   page look like it had missed the skin. */
.filt.on,.segb.on,.cl-chip.on,.seg .on,.seg-b.on,.tabs [role=tab][aria-selected="true"],.day-pill.sel,.slot.sel,.svc-opt.sel .tick,.strail .si.now .bub,.ct-pill.on,.tier.on,.pm-seg .on{background:var(--d-orange)!important;color:#fff!important;border-color:var(--d-orange)!important;box-shadow:none!important}
.svc-opt.sel,.tier.on{box-shadow:inset 0 0 0 2px var(--d-blue)!important;background:#fff!important;color:var(--d-ink)!important}
.svc-opt.sel *{color:var(--d-ink)!important}.svc-opt.sel .tick{color:#fff!important}
/* the phone tab bar: the current tab is an orange pill */
.bnav{border-radius:999px!important;padding:8px 10px!important}
.bnav.on{background:var(--d-orange)!important;color:var(--d-ink)!important}
.bnav.on svg,.bnav.on span{color:var(--d-ink)!important}
/* accents that are not actions are grey, not orange */
.eyebrow,.kick,.lead-in,.lb,.sheet-f,.psub,.ap-time,.req-h,.cl-k,.stat .k{color:var(--d-muted)!important}
.hero h1 .w::before,.t-hero .w::before{display:none!important}
.dog .bubble{background:var(--d-blue)!important;color:#fff!important}
/* white cards on cream, soft shadow, no hairline */
.sec,.card,.req-card,.nextcard2,.cl-row,.dogcard,.quote-card,.ct-card,.svc-item,.tile,.faq details,.sumbox,.done-card,.booked-card,.stat-card,.money-card,.cp-stat,.cp-card{background:#fff!important;border-color:transparent!important;box-shadow:0 14px 34px -26px rgba(29,29,27,.22)!important}
.nextcard2{background:var(--d-paper-2)!important}
.hnav a::after{background:var(--d-orange)!important}

/* third pass */
.side-brand .mk{background:var(--d-orange)!important}.side-brand .mk svg{color:#fff!important}
.side a,.side button,.side span,.side div,.side small,.side b,.side strong{color:var(--d-ink)!important}
.side .snav.on,.side .snav.on *{color:var(--d-ink)!important}
.side .snav.on .badge{background:#fff!important;color:var(--d-orange)!important}
.side .snav .badge{background:var(--d-blue)!important;color:#fff!important}
.side .side-book,.side .bookcard,.side [class*="book"]{background:var(--d-paper)!important;border:1px solid var(--line)!important;border-radius:18px!important}
/* the live row is the marker; the line itself goes, the time badge becomes a white pill */
.now::before{display:none!important}
.now .t{background:#fff!important;color:var(--d-blue)!important;border-radius:999px!important;padding:4px 10px!important;box-shadow:0 4px 12px rgba(29,29,27,.18)!important;left:-10px!important}
.now .t::before{display:none!important}
/* the paw trail walks in from the top edge, above the headline */
.hero{overflow:visible!important}
.demo-paws{left:auto!important;right:46%!important;top:-48px!important;width:min(30%,360px)!important;opacity:.85}
@media(max-width:1180px){.demo-paws{display:none}}

/* fourth pass: type air, badge clearance, paws walk along the floor of the hero, setup intro eyebrow */
h1,h2,h3,.t-hero,.ov-copy{letter-spacing:-.012em!important}
.now .t{left:-28px!important}
.demo-paws{right:auto!important;left:0!important;top:auto!important;bottom:-6%!important;width:min(26%,320px)!important;opacity:.55}
.ov .eyebrow,.overture .eyebrow,.ov-copy .eyebrow{display:block!important;margin-bottom:10px}

/* ============================================================================================
   The hero's example day, remade: tilt-in sheet, cascading rows, popping avatars, a check that
   draws itself, counters that bump, the note typed as a function of time, a page turn each loop.
   ============================================================================================ */
html.js:not(.go) .sheet-wrap{opacity:0}
.sheet-wrap{opacity:1!important;transform-style:preserve-3d}
.go .sheet-wrap{animation:demoSheetIn 1.2s cubic-bezier(.16,1,.3,1) .35s backwards!important}
@keyframes demoSheetIn{from{opacity:0;transform:perspective(1400px) translateY(34px) rotateX(7deg)}to{opacity:1;transform:perspective(1400px) translateY(0) rotateX(0)}}
html.js:not(.go) .sheet .ap{opacity:0;transform:translateY(14px)}
.go .sheet .ap{animation:demoRowIn .7s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(.95s + var(--i,0) * .09s)}
@keyframes demoRowIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
html.js:not(.go) .sheet .ap-av{opacity:0;transform:scale(.6)}
.go .sheet .ap-av{animation:demoPop .7s cubic-bezier(.3,1.12,.4,1) backwards;animation-delay:calc(1.25s + var(--i,0) * .09s)}
@keyframes demoPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
.sheet .ap{transition:background .45s cubic-bezier(.16,1,.3,1),opacity .45s!important}
.sheet .ap-end{display:grid;justify-items:end}.sheet .ap-end>*{grid-area:1/1}
.sheet .ap-chk{display:grid!important;transform:scale(0);transition:transform .5s cubic-bezier(.34,1.45,.55,1)}
.sheet .ap.done .ap-chk{transform:scale(1)}
.sheet .ap-chk svg path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .35s cubic-bezier(.16,1,.3,1) .15s}
.sheet .ap.done .ap-chk svg path{stroke-dashoffset:0}
.sheet .ap-amt{transition:opacity .3s,transform .3s}
.sheet .ap.done .ap-amt{display:block!important;opacity:0;transform:translateY(-6px)}
.sheet .ap.done{opacity:.62}
.sheet .now{opacity:0;transition:opacity .4s!important}
.sheet .now.on{opacity:1}
.sheet-f b{display:inline-block}
.sheet-f b.bump{animation:demoBump .45s cubic-bezier(.34,1.45,.55,1)}
@keyframes demoBump{40%{transform:translateY(-3px) scale(1.12);color:var(--d-orange)}}
.sheet.turn{animation:demoTurn .9s cubic-bezier(.16,1,.3,1)}
@keyframes demoTurn{0%{transform:none}40%{transform:scale(.985) translateY(4px)}100%{transform:none}}
.caret{display:inline-block;width:1.5px;height:.95em;background:var(--d-blue);vertical-align:-.15em;margin-left:1px;animation:demoBlink .9s steps(1) infinite}
@keyframes demoBlink{50%{opacity:0}}
/* floating tags beside the headline */
.hero-copy{position:relative}
.tags{position:absolute;inset:0;pointer-events:none}
.tag-f{position:absolute;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;font:600 13px var(--sans);color:var(--d-ink);background:#fff;box-shadow:0 10px 24px -14px rgba(29,29,27,.35);opacity:0;transform:scale(.6)}
.tag-f i{width:7px;height:7px;border-radius:50%;background:var(--d-orange);display:inline-block}
.tag-f.t1{right:0;top:-10px}.tag-f.t2{right:6px;top:124px}.tag-f.t3{right:-12px;top:58px}
.tag-f.t2 i{background:var(--d-blue)}
.go .tag-f{animation:demoTagIn .8s cubic-bezier(.3,1.12,.4,1) both,demoDrift 6s ease-in-out infinite}
.go .t1{animation-delay:1.25s,1.25s}.go .t2{animation-delay:1.45s,1.9s}.go .t3{animation-delay:1.65s,2.7s}
@keyframes demoTagIn{from{opacity:0;transform:scale(.6) translateY(8px)}to{opacity:1;transform:none}}
@keyframes demoDrift{0%,100%{translate:0 0}50%{translate:0 -6px}}
@media(max-width:1180px){.tags{display:none}}
@media(prefers-reduced-motion:reduce){.sheet-wrap,.sheet .ap,.sheet .ap-av,.tag-f,.caret,.sheet-f b,.sheet{animation:none!important}html.js:not(.go) .sheet-wrap,html.js:not(.go) .sheet .ap,html.js:not(.go) .sheet .ap-av{opacity:1;transform:none}.tag-f{opacity:1;transform:none}}

/* fifth pass: what the full-page sweep found */
/* the check lives in the price column, never on a second grid row */
.sheet .ap-row{position:relative}
.sheet .ap-chk{position:absolute;right:8px;top:50%;translate:0 -50%}
/* story tiles keep their dark scrim and white type */
.story{background:#2B2B29!important}
.story *{color:#fff!important}
.story .ph{opacity:.9}
/* tags sit in a row above the headline, never on it */
.tag-f{top:-52px!important;right:auto!important}
.tag-f.t1{left:0}.tag-f.t3{left:168px}.tag-f.t2{left:290px}
/* the paw trail walks under the buttons toward the day sheet */
.demo-paws{left:0!important;right:auto!important;top:62%!important;bottom:auto!important;width:min(30%,360px)!important;opacity:.5}

/* ============================================================================================
   The mascot. A goofy 3D puppy: the hero's companion, the pricing dial's dog, the opening's cast.
   ============================================================================================ */
.demo-mascot{display:block;width:min(300px,56%);height:auto;margin:22px 0 -28px auto;filter:drop-shadow(0 26px 30px rgba(29,29,27,.22));transform-origin:50% 100%}
html.js:not(.go) .demo-mascot{opacity:0}
.go .demo-mascot{animation:demoMascotIn .9s cubic-bezier(.3,1.12,.4,1) .9s backwards,demoBob 5.2s ease-in-out 1.8s infinite}
@keyframes demoMascotIn{from{opacity:0;transform:translateY(40px) scale(.8) rotate(-4deg)}to{opacity:1;transform:none}}
@keyframes demoBob{0%,100%{translate:0 0;rotate:0deg}30%{translate:0 -8px;rotate:-1.5deg}65%{translate:0 -3px;rotate:1.2deg}}
.demo-paws{top:58%!important;left:2%!important;width:min(22%,260px)!important}
@media(max-width:900px){.demo-mascot{width:min(58vw,250px);margin:18px auto 0}}
/* the dial: the vector dog is hidden, the mascot sits in its place and grows with the weight */
.dog svg{display:none!important}
.demo-dial-dog{position:absolute;left:50%;bottom:0;height:100%;aspect-ratio:952/1200;translate:-50% 0;transform-origin:50% 100%;scale:calc(.6 + var(--t,.45) * .52);transition:scale .45s cubic-bezier(.34,1.45,.55,1),rotate .45s cubic-bezier(.34,1.45,.55,1);filter:drop-shadow(0 14px 18px rgba(29,29,27,.2))}
.demo-dial-dog .pz-box{position:relative;display:block;width:100%;height:100%;transform-origin:50% 100%;animation:demoIdle 4.6s ease-in-out infinite}
.demo-dial-dog .pz-box.hop{animation:demoHop .55s cubic-bezier(.34,1.45,.55,1),demoIdle 4.6s ease-in-out .55s infinite}
.demo-dial-dog img.pz{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;opacity:0}
/* the puppy lives: sits, squints, waves, looks up, sits again. 12 s, crossfades, no two poses fully on at once */
.demo-dial-dog .pz-sit{animation:pzSit 12s linear infinite}
.demo-dial-dog .pz-tilt{animation:pzTilt 12s linear infinite}
.demo-dial-dog .pz-wave{animation:pzWave 12s linear infinite}
.demo-dial-dog .pz-look{animation:pzLook 12s linear infinite}
@keyframes pzSit{0%,20%{opacity:1}25%,40%{opacity:0}45%,55%{opacity:1}60%,70%{opacity:0}75%,80%{opacity:1}85%,95%{opacity:0}100%{opacity:1}}
@keyframes pzTilt{0%,20%{opacity:0}25%,40%{opacity:1}45%,100%{opacity:0}}
@keyframes pzWave{0%,55%{opacity:0}60%,70%{opacity:1}75%,100%{opacity:0}}
@keyframes pzLook{0%,80%{opacity:0}85%,95%{opacity:1}100%{opacity:0}}
@keyframes demoIdle{0%,100%{transform:none}50%{transform:translateY(-3px) scale(1.01,.99)}}
@keyframes demoHop{0%{transform:none}35%{transform:translateY(-14px) scale(.96,1.05)}70%{transform:translateY(0) scale(1.04,.96)}100%{transform:none}}
.dog.drag .demo-dial-dog{rotate:-4deg}
.stage .dog .bubble{z-index:2}
.ov-mascot .demo-dial-dog,.dog.pet .demo-dial-dog{position:relative;left:auto;bottom:auto;display:block;translate:none;height:100%;scale:1;margin:0 auto}
/* empty states show the mascot instead of a line icon */
.cl-empty>svg{display:none!important}
.cl-empty::before{content:"";display:block;width:132px;height:132px;margin:0 auto 6px;background:url(/assets/skin/mascot-sit.webp) center bottom/contain no-repeat}
@media(prefers-reduced-motion:reduce){.demo-mascot{animation:none!important;opacity:1}.demo-dial-dog .pz,.demo-dial-dog .pz-box{animation:none!important}.demo-dial-dog .pz-sit{opacity:1}}

/* the opening: no rule through the words */
.ov-line{display:none!important}

/* the opening cast: the puppy arrives while the opening is still on screen */
.ov-mascot{animation-delay:.6s!important}

/* ============================================================================================
   The world hero (18 Oct). A rendered world under a blue sky, the title in the sky with tags
   drifting round it, the puppy on the grooming table, and the real Today screen rising out of
   the hills, the camera diving into it and letting it sink back, on a 22 s loop.
   ============================================================================================ */
.world-hero{position:relative;height:min(max(720px,calc(100svh - var(--hdr-h))),1000px);overflow:hidden;background:#1877F2;perspective:1600px}
.world-hero .world,.world-hero .world img{position:absolute;inset:0;width:100%;height:100%}
.world-hero .world img{object-fit:cover;object-position:36% 100%;transform-origin:50% 72%;animation:worldBreathe 22s ease-in-out infinite}
@keyframes worldBreathe{0%,100%{scale:1}50%{scale:1.045}}
.world-hero .sky{position:absolute;left:0;right:0;top:clamp(34px,5.5vh,70px);z-index:3;text-align:center;color:#fff;padding:0 20px;animation:skyFade 22s linear infinite}
.world-hero .wtags{position:absolute;inset:0;z-index:3;pointer-events:none;animation:skyFade 22s linear infinite}
@keyframes skyFade{0%,31%{opacity:1}38%,63%{opacity:0}70%,100%{opacity:1}}
.wtitle{margin:0 auto;font:700 clamp(40px,5.5vw,88px)/1 var(--display)!important;letter-spacing:-.03em!important;text-shadow:0 2px 28px rgba(0,40,120,.22);color:#fff}
.wtitle em{font-style:normal!important;color:var(--d-orange)}
.wtitle .ln{display:block}
.wtitle .msk{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.08em .06em .16em 0;margin:-.08em -.06em -.16em 0}
.wtitle .wd{display:inline-block;white-space:nowrap}
.wlede{margin:16px auto 0;max-width:40em;font:500 clamp(16px,1.2vw,19px)/1.4 var(--sans);color:rgba(255,255,255,.9);opacity:0;animation:wRise .8s cubic-bezier(.16,1,.3,1) .75s both}
.wcta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:20px;opacity:0;animation:wRise .8s cubic-bezier(.16,1,.3,1) .95s both}
.wcta .btn-line{background:#fff!important;color:var(--d-ink)!important;box-shadow:0 14px 30px -18px rgba(0,30,90,.5)!important}
/* The price sits here. It was rgba(255,255,255,.88) over the illustration, which measured
   about 3:1 against the pale part of the sky -- the single most important commercial fact
   on the page was its least readable text. Full white plus a shadow carries it over both
   the dark and the pale parts of the artwork without putting a box around it. */
.wtrust{display:flex;align-items:center;justify-content:center;gap:10px;
  width:fit-content;max-width:100%;margin:14px auto 0;font:600 14px var(--sans);color:#fff;
  /* a scrim, not a shadow. A shadow cannot GUARANTEE a ratio over artwork -- it lifted this
     line from 2.73:1 to 3.98:1 and no further, because what is behind it changes pixel to
     pixel. A translucent backing makes the background a known colour, so the ratio is a
     property of the design rather than of whichever part of the sky it happens to sit on. */
  background:rgba(7,31,74,.52);padding:5px 14px;border-radius:999px;backdrop-filter:blur(3px);opacity:0;animation:wRise .8s cubic-bezier(.16,1,.3,1) 1.15s both}
.wtrust .avs{display:flex;padding-left:8px;margin-left:-4px}
.wtrust .avs img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid #fff;margin-left:-8px;background:#eee}
@keyframes wRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.wtag{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:999px;background:#fff;color:var(--d-ink);font:600 14px var(--sans);box-shadow:0 16px 34px -16px rgba(0,30,90,.45);opacity:0;animation:tagPop .8s cubic-bezier(.3,1.12,.4,1) both,wDrift 7s ease-in-out infinite;animation-delay:calc(1.1s + var(--i) * .14s),calc(var(--i) * .9s)}
.wtag i{width:8px;height:8px;border-radius:50%;background:var(--d-orange)}
.wtag.bl i{background:var(--d-blue)}
@keyframes tagPop{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@keyframes wDrift{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -9px;rotate:-1.2deg}}
/* the puppy sits on the grooming table: placed by geometry (placePup) so it survives any crop */
.wpup{position:absolute;z-index:2;pointer-events:none;translate:-50% 0}
.wpup .pz-box{position:relative;display:block;width:100%;height:100%;transform-origin:50% 100%;animation:demoIdle 4.6s ease-in-out infinite}
.wpup img.pz{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;opacity:0;filter:drop-shadow(0 18px 14px rgba(70,40,0,.28))}
.wpup .pz-sit{animation:pzSit 12s linear infinite}.wpup .pz-tilt{animation:pzTilt 12s linear infinite}.wpup .pz-wave{animation:pzWave 12s linear infinite}.wpup .pz-look{animation:pzLook 12s linear infinite}
/* the product rises out of the hills, the camera dives in, it settles and sinks back */
.win{position:absolute;left:50%;bottom:0;width:min(74%,1180px);translate:-50% 0;z-index:4;border-radius:22px 22px 0 0;background:#fff;overflow:hidden;box-shadow:0 -40px 90px -30px rgba(0,30,90,.5),0 0 0 1px rgba(0,30,90,.08);transform-origin:50% 100%;transform:translateY(112%) rotateX(10deg) scale(.94);animation:winLoop 22s linear infinite}
.win .winbar{display:flex;align-items:center;gap:7px;height:44px;padding:0 16px;background:#F6F5F0;border-bottom:1px solid #E6E4DC}
.win .winbar i{width:11px;height:11px;border-radius:50%;background:#E3E1D9}
.win .winbar .url{margin-left:12px;flex:1;max-width:420px;height:26px;border-radius:999px;background:#fff;font:500 13px var(--sans);color:var(--d-muted);display:flex;align-items:center;justify-content:center}
.win img{display:block;width:100%;height:auto}
@keyframes winLoop{
  0%,23%{transform:translateY(112%) rotateX(10deg) scale(.94);animation-timing-function:cubic-bezier(.16,1,.3,1)}
  33%{transform:translateY(14%) rotateX(0deg) scale(1);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  43%{transform:translateY(14%) rotateX(0deg) scale(1);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  53%{transform:translate(12%,44%) rotateX(0deg) scale(1.7);animation-timing-function:cubic-bezier(.4,0,.6,1)}
  61%{transform:translate(-14%,40%) rotateX(0deg) scale(1.7);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  69%{transform:translateY(14%) rotateX(0deg) scale(1);animation-timing-function:cubic-bezier(.6,0,.7,1)}
  78%,100%{transform:translateY(112%) rotateX(10deg) scale(.94)}
}
@media(max-width:900px){
  .world-hero{height:min(calc(100svh - 64px),820px)}
  .wtags{display:none}
  .wtitle{font-size:clamp(38px,10vw,56px)!important}
  .wlede{max-width:30em;font-size:16px}
  .wlede{margin-top:12px}.wcta{margin-top:16px;gap:8px}.wcta .btn{width:auto!important;height:48px!important;padding:0 18px!important;font-size:15px!important}
  .wtrust{margin-top:10px;font-size:12.5px;gap:8px}.wtrust .avs img{width:26px;height:26px}
  .win{width:94%;border-radius:18px 18px 0 0}
  @keyframes winLoop{
    0%,23%{transform:translateY(112%) rotateX(10deg) scale(.94);animation-timing-function:cubic-bezier(.16,1,.3,1)}
    33%{transform:translateY(10%) scale(1);animation-timing-function:cubic-bezier(.65,0,.35,1)}
    43%{transform:translateY(10%) scale(1);animation-timing-function:cubic-bezier(.65,0,.35,1)}
    53%{transform:translate(18%,36%) scale(1.6);animation-timing-function:cubic-bezier(.4,0,.6,1)}
    61%{transform:translate(-18%,30%) scale(1.6);animation-timing-function:cubic-bezier(.65,0,.35,1)}
    69%{transform:translateY(10%) scale(1);animation-timing-function:cubic-bezier(.6,0,.7,1)}
    78%,100%{transform:translateY(112%) rotateX(10deg) scale(.94)}
  }
}
@media(prefers-reduced-motion:reduce){
  .world-hero .world img,.world-hero .sky,.world-hero .wtags,.wtag,.wlede,.wcta,.wtrust,.wpup .pz-box,.wpup .pz,.win{animation:none!important}
  .world-hero .sky,.world-hero .wtags,.wtag,.wlede,.wcta,.wtrust{opacity:1}
  .wpup .pz-sit{opacity:1}
  .win{transform:translateY(14%)}
}

.wpaws{position:absolute;z-index:1;color:var(--d-blue);pointer-events:none;opacity:.85}
@media(max-width:600px){.wtrust .avs{display:none}.wtrust{white-space:nowrap}}
.wpaws .pw{opacity:0;transform-box:fill-box;transform-origin:center;animation:pawStep .5s cubic-bezier(.3,1.12,.4,1) both;animation-delay:calc(1.3s + var(--i) * .22s)}
@keyframes pawStep{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
@media(prefers-reduced-motion:reduce){.wpaws .pw{animation:none;opacity:1}}

/* ============================================================================================
   Split hero (18 Oct): the world as a card on the left, the live example day on the right.
   Tablet and phone stack them, world first. The rising window is not used in this layout.
   ============================================================================================ */
.world-hero.split{height:auto;overflow:visible;background:var(--d-paper);perspective:none;padding:clamp(12px,1.8vw,24px) 0 clamp(30px,4vw,48px)}
.split .wgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.98fr);gap:clamp(18px,2.2vw,30px);align-items:stretch}
.world-panel{position:relative;overflow:hidden;border-radius:28px;background:#1877F2;min-height:640px;box-shadow:0 34px 70px -40px rgba(0,30,90,.4)}
.world-panel .world,.world-panel .world img{position:absolute;inset:0;width:100%;height:100%}
.world-panel .world img{object-fit:cover;object-position:50% 100%;transform-origin:50% 85%;animation:worldBreathe 22s ease-in-out infinite}
.split .sky{animation:none;top:clamp(24px,3vw,40px);padding:0 clamp(18px,3vw,30px)}
.split .wtags{animation:none}
.split .wtitle{font-size:clamp(34px,3.6vw,52px)!important}
.split .wlede{max-width:30em;font-size:clamp(15px,1.15vw,17px);margin-top:12px}
.split .wcta{margin-top:18px;gap:10px}
.split .wcta .btn{height:50px!important;padding:0 20px!important;font-size:15px!important;width:auto!important}
.split .wtrust{margin-top:12px;font-size:13px}
.split .wtrust .avs img{width:28px;height:28px}
.split .wtag{font-size:13px;padding:8px 12px}
.split .win{display:none}
.split .sheet-wrap{display:flex;flex-direction:column;justify-content:center;min-width:0}
.split .sheet{width:100%}
@media(max-width:1099px){
  .split .wgrid{grid-template-columns:1fr;gap:26px}
  .world-panel{min-height:0;height:clamp(560px,78vw,720px)}
  .split .wtags{display:none}
  .split .sheet-wrap{max-width:680px;width:100%;margin:0 auto}
}
@media(max-width:600px){
  .world-panel{height:clamp(580px,160vw,660px);border-radius:22px}
  .split .sky{top:22px;padding:0 16px}
  .split .wtitle{font-size:clamp(32px,9vw,42px)!important}
  .split .wlede{font-size:15px;margin-top:10px}
  .split .wcta{margin-top:14px;gap:8px}
  .split .wcta .btn{width:100%!important;height:48px!important}
  .split .wtrust{margin-top:10px;font-size:12.5px}
}
/* the opening holds until its pictures and fonts are in (at most 1.5 s), then plays to the end */
html.ov-hold #overture,html.ov-hold #overture *{animation-play-state:paused!important}

/* ============================================================================================
   The product screens as a self-playing deck (18 Oct). Three screenshots stacked like paper;
   the front one changes every 5.6 s, a cursor glides to the next tab and taps it, the caption
   crossfades. Clicking a tab takes over for nine seconds. Reduced motion: tabs only.
   ============================================================================================ */
.deck{position:relative}
.deck .tabs{gap:8px;margin-bottom:18px}
.deck .tabs [role=tab]{position:relative;overflow:hidden;min-height:44px;padding:0 20px;border-radius:999px!important;font:600 15px var(--sans)!important;color:var(--d-ink)!important;background:var(--d-paper-2)!important;transition:background .25s,color .25s}
.deck .tabs [role=tab]:hover{background:#E6E4DC!important}
.deck .tabs [role=tab][aria-selected="true"]{background:var(--d-blue)!important;color:#fff!important}
.deck .tabs .tl{position:relative;z-index:1}
.deck .tabs .prog{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.6);transform:scaleX(0);transform-origin:left;opacity:0}
.deck.playing .tabs [aria-selected="true"] .prog{opacity:1;animation:deckProg 5.6s linear forwards}
@keyframes deckProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.deck-stage{position:relative;aspect-ratio:16/10;padding-top:44px;perspective:1800px}
.deck .shot{position:absolute;left:0;right:0;top:44px;bottom:0;margin:0!important;padding:0!important;background:#fff!important;border-radius:22px!important;overflow:hidden;display:block!important;transform-origin:50% 0;
  box-shadow:0 44px 90px -40px rgba(29,29,27,.38),0 0 0 1px rgba(29,29,27,.06)!important;transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .6s ease,box-shadow .6s}
.deck .shot.on{transform:none;opacity:1;z-index:3}
.deck .shot.next{transform:translateY(-22px) scale(.955);opacity:.92;z-index:2;box-shadow:0 24px 60px -40px rgba(29,29,27,.3),0 0 0 1px rgba(29,29,27,.06)!important}
.deck .shot.back{transform:translateY(-42px) scale(.912);opacity:.8;z-index:1;box-shadow:0 14px 40px -30px rgba(29,29,27,.25),0 0 0 1px rgba(29,29,27,.06)!important}
.deck .shot.out{transform:translate(-5%,8%) rotate(-3deg) scale(1.02);opacity:0;z-index:4}
.deck .shot.snap{transition:none!important}
.deck .shot .chrome{display:flex;align-items:center;gap:7px;height:40px;padding:0 14px;background:var(--d-paper-2);border-bottom:1px solid var(--line)}
.deck .shot .chrome i{width:10px;height:10px;border-radius:50%;background:#E3E1D9}
.deck .shot .chrome span{margin-left:10px;flex:1;max-width:360px;height:24px;border-radius:999px;background:#fff;font:500 12px var(--sans);color:var(--d-muted);display:flex;align-items:center;justify-content:center}
.deck .shot img{display:block;width:100%;height:calc(100% - 40px);object-fit:cover;object-position:50% 0;border-radius:0!important;background:#fff}
.deck-caps{position:relative;margin-top:18px;min-height:1.5em}
.deck-caps .cap{position:absolute;left:0;right:0;top:0;margin:0;font-size:var(--fs-ui);line-height:1.5;color:var(--d-muted);max-width:70ch;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s cubic-bezier(.16,1,.3,1)}
.deck-caps .cap b{color:var(--d-ink);font-weight:600}
.deck-caps .cap.on{position:relative;opacity:1;transform:none}
.deck .enlarge{margin-top:14px}
.deck-cursor{position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:rgba(29,29,27,.88);box-shadow:0 0 0 5px rgba(29,29,27,.14),0 6px 14px rgba(29,29,27,.3);opacity:0;pointer-events:none;z-index:9;transition:left .7s cubic-bezier(.16,1,.3,1),top .7s cubic-bezier(.16,1,.3,1),opacity .3s,transform .18s}
.deck-cursor.press{transform:scale(.78)}
@media(max-width:600px){.deck .tabs [role=tab]{min-height:40px;padding:0 14px;font-size:14px!important}.deck-stage{aspect-ratio:4/3;padding-top:30px}.deck .shot{top:30px}.deck .shot.next{transform:translateY(-15px) scale(.96)}.deck .shot.back{transform:translateY(-28px) scale(.92)}.deck .shot .chrome{height:30px}.deck .shot .chrome span{display:none}.deck .shot img{height:calc(100% - 30px)}}
@media(prefers-reduced-motion:reduce){.deck .shot,.deck-caps .cap,.deck-cursor{transition:none!important}.deck .tabs .prog{display:none}}

/* ===== the lockup: a heavy display wordmark with the paw perched on it =====================
   Every brand lockup carries .dp-lock and its paw carries .dp-mk, both added at build time, so
   this works wherever a lockup sits instead of depending on a list of ancestors. The classes
   are repeated to out-specify the product's own `.hdr .bar a:not(.btn)` (0,3,1). */
/* four times, not three: `.hdr .bar a:not(.btn)` is (0,3,1) and a triple class only reaches
   (0,3,0), which is how the homepage silently went back to ink. */
.dp-lock.dp-lock.dp-lock.dp-lock{
  position:relative!important;
  font-family:var(--display)!important;font-weight:700!important;
  letter-spacing:-.035em!important;color:var(--d-orange)!important;
  gap:0!important;line-height:1!important}
.brand.dp-lock.dp-lock.dp-lock{font-size:clamp(23px,2.1vw,29px)!important}
.wordmark.dp-lock.dp-lock.dp-lock,.m-brand.dp-lock.dp-lock.dp-lock,
.side-brand.dp-lock.dp-lock.dp-lock,.mobrand.dp-lock.dp-lock.dp-lock{font-size:22px!important}
.brandchip.dp-lock.dp-lock.dp-lock{font-size:16px!important;padding-left:14px!important;
  overflow:visible!important}
/* The paw hangs .40em ABOVE the word, so any lockup sitting flush against the top of its
   page pushes the paw off-screen: on a 390px phone the signup screen's mark measured
   top:-10.4px with a height of 16.3px, so two thirds of it was above the viewport -- on the
   first screen of the funnel. The lockups that can sit flush get room to hang into. */
/* MARGIN, not padding: the paw is absolutely positioned against the element's top edge,
   so padding grows the box underneath it and the paw does not move at all. */
.m-brand.dp-lock.dp-lock,.mobrand.dp-lock.dp-lock{margin-top:.55em!important}
/* No paw on the booking chip. The mark hangs ABOVE its word, and this lockup is wrapped in a
   pill, so wherever the paw goes it crosses the pill's border and reads as a stray blue dot
   stuck to the edge -- which is what a groomer's own clients see at the top of the page they
   book on. Nudging it twice did not fix the category: a paw and a pill border cannot occupy
   the same few pixels. The chip already says the name in the brand face and colour. */
.brandchip .dp-mk.dp-mk.dp-mk{display:none!important}
/* the chip is short, so the paw needs to perch lower or the pill clips its top */
.brandchip .dp-mk.dp-mk.dp-mk{top:-.30em;left:.62em;width:.52em!important;height:.52em!important}
/* the paw lifts out of the flow and perches over the word */
.dp-mk.dp-mk.dp-mk{
  position:absolute!important;left:.78em;top:-.40em;
  width:.60em!important;height:.60em!important;min-width:0!important;min-height:0!important;
  background:none!important;box-shadow:none!important;border-radius:0!important;
  rotate:-16deg;pointer-events:none;z-index:2;display:block!important;padding:0!important}
/* The paw is BLUE, which is also the reference lockup: an orange word with a blue paw over
   it. It used to be ink, with a `.side` override to paper for a sidebar assumed to be dark --
   and the app's sidebar is WHITE, so that paw rendered #F6F5F0 on #FFFFFF and simply was not
   there. One colour that works on every surface the lockup actually sits on beats two that
   depend on being right about the background. */
.dp-mk.dp-mk.dp-mk svg{width:100%!important;height:100%!important}
/* fill, not color. The paw's shapes are `fill="currentColor"`, and setting `color` on the
   <svg> alone left them painting ink: something upstream sets colour on the shapes themselves,
   so inheritance never reached them and the mark looked unchanged while the probe reported
   blue. Painting the shapes directly does not depend on who else is in the chain. */
.dp-mk.dp-mk.dp-mk svg,.dp-mk.dp-mk.dp-mk svg *{fill:var(--d-blue)!important;
  color:var(--d-blue)!important}

/* The unpaid amount, which used to be a pink pill. The number is the point; the row already
   says "Not paid yet" above it. Tabular figures so a column of them lines up. */
.dp-amt{font:700 15px var(--sans);color:var(--d-ink);white-space:nowrap;
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;letter-spacing:-.01em;
  margin-left:auto;padding-left:14px}
/* the row is a block, so the amount dropped onto its own line underneath. Scoped with :has()
   so only the rows that carry an amount become a two-column row. */
.setrow:has(.dp-amt){display:flex;align-items:center}

/* The delivery-state ladder. The product hardcodes a pastel per state from a palette this
   skin uses nowhere else; these are the same five states in two hues and a neutral, still
   distinguishable at a glance: wash, wash, outline, solid, grey. Text colour travels with the
   state, which the product's background-only chips could not do -- and is the reason the
   failure state can be a solid rather than another pastel.

   The text colours are NOT the matching palette tokens. --d-orange-3 on the orange wash is
   3.83:1 and --d-muted on paper-2 is 3.84:1, and a status chip is small text, so it wants
   4.5:1 -- the token that looks right at headline size is not automatically readable at 11px.
   Measured in the browser, not assumed. */
.dp-st{display:inline-flex!important;align-items:center!important;
  padding:3px 10px!important;border-radius:999px!important;
  font:600 11.5px var(--sans)!important;line-height:1.45!important;white-space:nowrap!important;
  background:var(--d-paper-2)!important;color:#5A5952!important;
  box-shadow:none!important;border:0!important}
.dp-st.ok{background:var(--d-blue-wash)!important;color:var(--d-blue-2)!important}
.dp-st.wait{background:var(--d-orange-wash)!important;color:#8A4B06!important}
/* uncertain is an outline, the same vocabulary the approve scene uses for a slot that has
   not landed: present, but not committed to */
.dp-st.doubt{background:transparent!important;color:#8A4B06!important;
  box-shadow:inset 0 0 0 1.5px var(--d-orange)!important}
/* a failure is the one thing here that wants you to do something, so it takes the action
   colour as a solid. Ink on #F7931E, not white: white on that orange is 2.2:1. */
.dp-st.bad{background:var(--d-orange)!important;color:var(--d-ink)!important}
.dp-st.off{background:var(--d-paper-2)!important;color:#5A5952!important}

/* the product's own demo banner is forest green and carries an id, so nothing in the skin
   reached it */
#demobar{background:var(--d-ink)!important;color:var(--d-paper)!important;border:0!important}
#demobar b{color:var(--d-orange)!important}
#demobar a{color:var(--d-paper)!important;text-decoration-color:var(--d-orange)!important}

/* colour tokens the product defines that the skin had not claimed, so forest green and the
   product blue were still reaching the client-facing pages */
:root{
  --green:var(--d-orange); --ok:var(--d-orange); --green-lite:var(--d-orange-wash);
  --ok-wash:var(--d-orange-wash); --wash:var(--d-orange-wash); --mint:var(--d-orange-wash);
  --blue:var(--d-blue-wash); --sky:var(--d-blue);
}

/* ===== icons ==============================================================================
   The navigation icons are filled (swapped at build time). Everything else the product draws
   with a 2px line gets rounded joins and a touch more weight, so one language reads across. */
.bnav svg,.snav svg{width:23px!important;height:23px!important}
.bnav{gap:3px!important}
.bnav.on svg,.snav.on svg{color:var(--d-ink)!important}
svg[stroke="currentColor"]{stroke-linecap:round!important;stroke-linejoin:round!important}
.app svg[stroke="currentColor"],.side svg[stroke="currentColor"],
.sheet svg[stroke="currentColor"],.bk svg[stroke="currentColor"]{stroke-width:2.3!important}

/* ===== "Owners ask. You decide." — a character, and the day it lands in ===================
   THE DOG DOES NOT MOVE. An earlier pass rigged it into nine layers and gave it a breathing,
   blinking idle; it read as "a creepy robot". Small continuous motion on a face is uncanny
   rather than alive, and no amount of tuning the amplitudes fixes the category. Everything
   that moves in this panel is UI.

   --s runs 0 -> 1 as the panel crosses the viewport and carries the argument: the request
   arrives and sits there "Asking.", and only past .70 does it become "Approved." and drop
   into Thursday between the 10:30 and the 4:15 -- which is the claim the caption makes.
   ========================================================================================= */
.dps-fig{margin:0}
.dps{position:relative;aspect-ratio:4/3.5;border-radius:26px;overflow:hidden;
  container-type:inline-size;isolation:isolate;background:var(--dps-field,var(--d-blue))}
.dps>*{position:absolute}
.dps-field{inset:0;background:var(--dps-field,var(--d-blue))}

/* cropped by the bottom and the right edge: no floating bodies.
   Two classes, because `.plush` in the rig stylesheet used to win at equal specificity. */
.dps .dps-pup{position:absolute}
.dps-pup{right:-11%;bottom:-3%;width:92%;height:auto;z-index:2;border-radius:0;
  object-fit:contain;
  transform:translate(calc((1 - var(--s,0)) * 6%),calc((1 - var(--s,0)) * 7%));
  opacity:clamp(0,calc(var(--s,0) * 14),1)}

/* The type sits OVER the character, which is what three of the four references do. Behind was
   tried and the animal ate the last glyph of "Approved." at desktop width. */
.dps-word{left:6%;top:5%;display:grid;z-index:5;color:#fff;
  text-shadow:0 2px 26px rgba(8,40,96,.34);
  font-family:var(--display);font-weight:700;letter-spacing:-.035em;line-height:.92;
  font-size:13cqw}
.dps-word b{grid-area:1/1;justify-self:start;font-weight:700;white-space:nowrap}
/* A crossfade between two words over a saturated field is a pale smear: for two frames you
   read neither. The status flips instead, the way a split-flap board changes, and the two
   windows are deliberately disjoint. */
.dps-word .a{opacity:clamp(0,calc((.70 - var(--s,0)) * 26),1);
  translate:0 calc(clamp(0,calc((.70 - var(--s,0)) * -26),1) * -26%)}
.dps-word .b{opacity:clamp(0,calc((var(--s,0) - .70) * 26),1);
  translate:0 calc((1 - clamp(0,calc((var(--s,0) - .70) * 26),1)) * 30%)}

/* flat marks over the 3D render — the medium-mixing the reference school lives on */
.dps-marks{left:0;top:0;width:100%;height:100%;z-index:3;color:#fff;opacity:.9;
  pointer-events:none}
.dps-marks>g{transform-box:fill-box;transform-origin:center;
  opacity:clamp(0,calc((var(--s,0) - var(--t)) * 14),1)}

/* the request, tipping flat-to-upright */
.dps-card{left:6%;top:26%;width:57%;max-width:300px;display:flex;align-items:center;gap:9px;
  z-index:4;background:#fff;border-radius:16px;padding:10px 12px;
  box-shadow:0 26px 42px -26px rgba(6,30,70,.6),inset 0 0 0 1.5px rgba(29,29,27,.05);
  transform-style:preserve-3d;
  transform:translateY(calc((1 - var(--s,0)) * 24px))
            rotateX(calc((1 - var(--s,0)) * 26deg))
            rotateZ(calc((1 - var(--s,0)) * -3deg));
  opacity:clamp(0,calc((var(--s,0) - .26) * 5),1)}
.dps-dot{width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  background:radial-gradient(70% 70% at 36% 30%,#FBEBC9,#E7C98F)}
.dps-txt{display:grid;line-height:1.2;min-width:0}
.dps-txt b{font:700 13.5px var(--sans);color:var(--d-ink)}
.dps-txt i{font:500 11.5px var(--sans);font-style:normal;color:var(--d-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the only orange in the panel, and it arrives at the end of the travel */
.dps-yes{margin-left:auto;width:24px;height:24px;flex:0 0 auto;color:var(--d-orange);
  transform:scale(clamp(0,calc((var(--s,0) - .70) * 8),1));transform-origin:center}
.dps-yes svg{width:100%;height:100%;display:block}

/* THE USEFUL PART: Thursday as it already stands, with the gap the request is asking for.
   The 10:30 and the 4:15 are there from the start; the 2:00 pm row is an outline until the
   approval lands, and then it fills. That is the section's whole claim, shown rather than
   asserted. */
.dps-day{left:6%;top:48%;width:57%;max-width:300px;z-index:4;
  background:#fff;border-radius:16px;padding:11px 12px 9px;
  box-shadow:0 26px 42px -26px rgba(6,30,70,.6),inset 0 0 0 1.5px rgba(29,29,27,.05);
  opacity:clamp(0,calc((var(--s,0) - .34) * 5),1);
  transform:translateY(calc((1 - clamp(0,calc((var(--s,0) - .34) * 5),1)) * 18px))}
.dps-dh{margin:0 0 7px;font:700 11px var(--sans);letter-spacing:.09em;text-transform:uppercase;
  color:var(--d-muted)}
.dps-list{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.dps-row{display:flex;align-items:center;gap:8px;border-radius:10px;padding:5px 7px;
  background:var(--d-paper-2);color:var(--d-ink)}
.dps-ic{width:15px;height:15px;flex:0 0 auto;color:var(--d-muted)}
.dps-ic svg{width:100%;height:100%;display:block}
.dps-t{font:700 11.5px var(--sans);min-width:52px}
.dps-n{font:700 11.5px var(--sans);display:flex;gap:6px;align-items:baseline;min-width:0}
.dps-n i{font:500 11px var(--sans);font-style:normal;color:var(--d-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The slot being asked for: an outline until you say so, then it fills.
   One block, one switch. --on is the whole state of this row, so there is no way for the
   border, the fill and the text colours to disagree about whether it has landed. */
.dps-row.pend{position:relative;isolation:isolate;background:transparent;
  --on:clamp(0,calc((var(--s,0) - .72) * 9),1);
  box-shadow:inset 0 0 0 calc(1.5px * (1 - var(--on))) var(--d-border);
  color:color-mix(in srgb,#fff calc(var(--on) * 100%),var(--d-muted))}
.dps-row.pend::after{content:'';position:absolute;inset:0;border-radius:10px;z-index:-1;
  background:var(--d-blue);opacity:var(--on)}
.dps-row.pend .dps-ic{color:color-mix(in srgb,#fff calc(var(--on) * 100%),var(--d-border))}
.dps-row.pend .dps-n i{color:color-mix(in srgb,#DCEAFF calc(var(--on) * 100%),var(--d-muted))}
.dps-df{margin:8px 0 0;font:500 10.5px var(--sans);color:var(--d-faint)}

@media(max-width:860px){
  .dps{aspect-ratio:4/4.3}
  .dps-word{font-size:15cqw}
  .dps-card,.dps-day{width:78%}
  .dps-card{top:24%} .dps-day{top:44%}
  .dps-pup{width:104%;right:-8%;bottom:-2%}
}
@media(prefers-reduced-motion:reduce){
  /* the resting state is the END of the argument: an approved request sitting in Thursday */
  .dps-pup,.dps-card,.dps-day,.dps-marks>g,.dps-word .b{opacity:1!important}
  .dps-word .a{opacity:0!important}
  .dps-pup,.dps-card,.dps-day{transform:none!important}
  .dps-yes{transform:scale(1)!important}
  .dps-row.pend{--on:1}
}

/* The scene lives inside .studio, which the product built for a photograph: fixed height,
   object-fit:cover on any img, and a dark green scrim painted over the whole thing by
   ::after. All three have to be undone, and the child out-specified — `.studio img` is
   (0,1,1) and beat every single-class rule above. */
.studio.dps-fig{height:auto!important;overflow:visible!important;isolation:auto!important;
  border-radius:0!important;background:none!important}
.studio.dps-fig::after{display:none!important;content:none!important}
.dps .dps-pup{height:auto!important;object-fit:contain!important;border-radius:0!important}
/* the caption was white text on that dark scrim; with the scrim gone it reads in ink below */
.studio.dps-fig figcaption{position:static!important;padding:18px 4px 0!important;
  color:var(--d-ink)!important;z-index:auto!important;max-width:42ch}