/** Shopify CDN: Minification failed

Line 440:0 Unexpected "}"

**/
/* The shared parts of every page (header, menus, drawers, footer, product card): fixes from the polish pass. */
/* nothing under 13px: the tab on the product card */
.pk .tab{font-size:13px!important}
/* the card's one line ("For arthritis") is a single line on phones too: it reserved two, which left a blank gap above the price */
@media (max-width:599px){
  .pk .line,.pk .helps{height:18px!important;white-space:nowrap!important;display:block!important;overflow:hidden;text-overflow:ellipsis}
  /* at 13px the longest tab ("Lift & support harnesses") no longer fitted a phone card: the tab sits 8px in and is a little tighter */
  .pk .tabs{top:8px;left:8px;max-width:calc(100% - 16px)}
  .pk .tab{padding:5px 6px}
}

/* ==== the page hero (Joe, 5 Oct 2026: "love the new heros, use this site wide on all information pages... centre text on
   mobile, dont use it for collections") ====
   Every information page opens with a full-width band in the header's green: white heading, lime highlight, no gap
   under the header. Collections and search, the basket, the account pages and the three Shop by pages keep their own tops.
   Delivery, Returns, Subscribe & Save and Our mission are set in their own files (src/fixes/page.*.css); Contact, Work with
   us, Sustainability, Reviews and the AI assistant were designed this way. */

/* 1. an intro that is a block inside the page column: the green is carried to the screen edges with a spread shadow */
.fqc-hero,.tmo-hero,.cl-first .sec-h,.sg-hero,.ss-intro .ss-head,.pl-top,.nf-intro{
  background:var(--teal);color:#fff;box-shadow:0 0 0 100vmax var(--teal);clip-path:inset(0 -100vmax);
  padding-top:32px!important;padding-bottom:40px!important;border:0!important}
.cl-first,#ss-scan.ss-intro{padding-top:0!important}
.x-page.pl,.x-page:has(> .wrap > .nf-intro){padding-top:0}
.cl-first .sec-h,.ss-intro .ss-head{margin-bottom:28px!important}
.sg-hero{margin-bottom:24px}
/* 2. an intro that is its own full-width section */
.hq .hq-intro,.os-in-a,.whc{background:var(--teal)!important;color:#fff}
.hq .hq-intro,.os-in-a{padding-top:32px!important;padding-bottom:40px!important}

/* words on the green */
.fqc-hero h1,.tmo-hero h1,.cl-first .sec-h h1,.sg-hero h1,.ss-head h1,.pl-top h1,.nf-intro h1,.hq-intro h1,.os-in-a h1,.whc .wp-h1,.whc .wp-h1 span{color:#fff!important}
.fqc-hero h1 em,.tmo-hero h1 em,.cl-first .sec-h h1 em,.sg-hero h1 em,.ss-head h1 em,.pl-top h1 em,.nf-intro h1 em,.hq-intro h1 em,.os-in-a h1 em,.whc .wp-h1 em,.whc .wp-h1 em span{color:var(--lime)!important}
.fqc-hero .fq-lead,.tmo-hero > p,.cl-first .sec-h p,.sg-hero p,.ss-head p,.pl-top .x-lead,.pl-top .pl-meta,.nf-intro .x-lead,.nf-intro .nf-code,.hq-intro-t p,.os-in-a .wrap > div:first-child > p,.whc .wp-lead{color:rgba(255,255,255,.88)!important}
.tmo-hero .tmo-crumb ol,.pl-top .x-crumb ol{color:rgba(255,255,255,.7)}
.tmo-hero .tmo-crumb a,.pl-top .x-crumb a{color:#fff}
.tmo-hero .tmo-crumb li+li:before,.pl-top .x-crumb li+li:before{color:rgba(255,255,255,.4)}

/* buttons, boxes and chips that sat on white */
.fqc-hero .fq-go,.hq-intro .hq-go{background:var(--lime)!important;color:var(--teal)!important}
.os-in-a .os-btns .btn.sec,.whc .wp-btns .btn:not(.wp-line){background:var(--lime)!important;color:var(--teal)!important}
.os-in-a .os-line,.whc .wp-line{background:transparent!important;color:#fff!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)!important}
.pl-top .x-links a{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.pl-top .x-links a:hover{border-color:#fff}
.pl-top .x-links a[aria-current]{background:var(--lime);border-color:var(--lime);color:var(--teal)}
.pl-top{margin-bottom:0}

/* phones and small tablets: the hero's words are centred */
@media (max-width:899px){
  .fqc-hero,.tmo-hero,.cl-first .sec-h,.sg-hero,.ss-intro .ss-head,.pl-top,.nf-intro{padding-top:22px!important;padding-bottom:28px!important}
  .hq .hq-intro,.os-in-a{padding-top:22px!important;padding-bottom:28px!important}
  .fqc-hero > div:first-child,.tmo-hero,.cl-first .sec-h,.sg-hero,.ss-intro .ss-head,.pl-top,.nf-intro .nf-l,.hq-intro-t,.os-in-a .wrap > div:first-child,
  .dl-hero > div:first-child,.rr-hero > div:first-child,.ss-hero > div:first-child,.om-hero-t,
  .ct-c-band,.wk-b-band,.su-b-band,.crv-c-intro,.aia-band .aia-bh{text-align:center}
  .cl-first .sec-h,.cl-first .sec-h > div{align-items:center;width:100%}
  /* a line of text that has its own width limit sits in the middle too */
  .fqc-hero .fq-lead,.tmo-hero > p,.cl-first .sec-h p,.sg-hero p,.ss-head p,.pl-top .x-lead,.nf-intro .x-lead,.hq-intro-t p,.os-in-a .wrap > div:first-child > p,
  .dl-hero .dl-lead,.rr-hero .rr-lead,.ss-hero > div:first-child > p,.om-hero-t > p,.ct-c-band p,.wk-b-band .wk-lead,.su-b-band p,.crv-c-intro p,.aia-band .aia-lead,
  .fqc-hero h1,.tmo-hero h1,.sg-hero h1,.ss-head h1,.pl-top h1,.nf-intro h1,.hq-intro h1,.os-in-a h1,.dl-hero h1,.rr-hero h1,.ss-hero h1,.om-hero h1,.ct-c-band h1,.wk-b-band h1,.su-b-band h1,.crv-c-intro h1,.aia-band h1{margin-left:auto!important;margin-right:auto!important}
  /* rows that are laid out as flex rows */
  .tmo-crumb ol,.pl-top .x-crumb ol,.dl-crumb ol,.rr-crumb ol,.om-btns,.os-btns,.om-hero .om-rate,.pl-top .x-links,.nf-ways{justify-content:center}
  .aia-band .aia-eg,.aia-band .aia-sub{justify-content:center;text-align:center}
}

/* Shop by condition, symptom and product open with the same green band (Joe, 6 Oct 2026); the two small cards and the photo block stay */
.c3-intro,.sy-intro,.pc-hero{background:var(--teal)!important;color:#fff;padding-top:32px!important;padding-bottom:40px!important}
.c3-intro h1,.sy-intro h1,.pc-hero h1{color:#fff!important}
.c3-intro h1 em,.sy-intro h1 em,.pc-hero h1 em{color:var(--lime)!important}
.c3-intro-t p,.sy-intro-t p,.pc-hero-t p{color:rgba(255,255,255,.88)!important}
.c3-hc-urg,.sy-hc-urg{background:#fff!important;border-color:#fff!important}
@media (max-width:899px){
  .c3-intro,.sy-intro,.pc-hero{padding-top:22px!important;padding-bottom:28px!important}
  .c3-intro-t,.sy-intro-t,.pc-hero-t{text-align:center}
  .c3-intro-t p,.sy-intro-t p,.pc-hero-t p{margin-left:auto;margin-right:auto}
}

/* the account page when it is reading the signed-in customer: the example note goes */
.ac-live .ac-ex{display:none}

/* the small Offers dropdown is as tall as its list, not as tall as the big menus */
.mega.small{min-height:0!important}

/* the footer's ways to pay as card logos (Shopify's own icons, 38 by 24) */
.pay.pay-logos{gap:8px}
.pay.pay-logos li{padding:0;border:0;opacity:1;display:flex;align-items:center;height:24px;background:#fff;border-radius:4px;overflow:hidden}
.pay.pay-logos svg,.pay.pay-logos img{display:block;width:38px;height:24px}

/* the phone menu: shop items first, then the help groups as closed accordions */
.dacc-wrap{margin-top:16px;padding:8px 0 24px;border-top:1px solid var(--line)}
.dacc{border-bottom:1px solid var(--line)}
.dacc summary{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 24px;font:600 16px/1.2 var(--sans);color:var(--ink);cursor:pointer;list-style:none}
.dacc summary::-webkit-details-marker{display:none}
.dacc summary .car{font-size:24px;line-height:1;color:var(--teal);transform:rotate(90deg);transition:transform .2s}
.dacc[open] summary .car{transform:rotate(-90deg)}
.dacc-b{padding:0 0 8px;background:#fff}
.dacc-b .dm{padding-left:36px;min-height:44px;font-weight:400}

/* ---- pictures in their slots (src/photo-slots.js adds .has-photo, and .is-cutout for the transparent PNGs) ---- */
/* the Club card artwork has its own rounded corners (about 7.8% of its width), so the bay's corners follow them and the picture is scaled a touch past the edge */
.club .card.has-photo{border-radius:7.8%/12.4%!important;background-size:101.5% 101.5%!important;background-position:center!important}
/* a cut-out keeps the slot's own tint behind it: the page stylesheets drop the colour once a picture is set, so it is put back here */
.c3-ph.is-cutout{background-color:var(--c3-f,#E4EED6)!important}
.sy-ph.is-cutout{background-color:var(--sy-f,#E4EED6)!important}
.pc-ph.is-cutout{background-color:var(--pc-f,#E4EED6)!important}
.nf-photo.is-cutout,.hq-ph-hero.is-cutout{background-color:#E4EED6!important}

/* ---- the five page heroes, restyled without pictures (Joe, 8 Oct 2026: remove the small photos and restyle) ----
   Shop by condition, Shop by symptom, Shop by product, the dog health quiz and Page not found share the homepage hero's
   language: a deep teal band, one big Domine heading with its lime word, a short lead, the ways in as buttons (the card
   that was highlighted is the lime button, the rest are white outlines), the urgent note as a quiet line, and the brand's
   lime blob bleeding off the bottom-right corner. No picture bay. */
.c3-ph-hero,.sy-ph-hero,.pc-hph,.hq-ph-hero,.nf-photo{display:none!important}

/* the band and its blob */
.c3-intro,.sy-intro,.pc-hero,.hq .hq-intro{position:relative;overflow:hidden;padding-top:60px!important;padding-bottom:68px!important}
.nf-intro{position:relative;padding-top:60px!important;padding-bottom:68px!important}
.c3-intro:after,.sy-intro:after,.pc-hero:after,.hq .hq-intro:after,.nf-intro:after{content:"";position:absolute;z-index:0;right:calc(50% - 50vw - 100px);bottom:-130px;width:320px;height:320px;border-radius:49% 51% 42% 58% / 56% 44% 56% 44%;background:var(--lime)}
.c3-intro-in,.sy-intro-in,.pc-hero-in,.hq-intro-in,.nf-intro > *{position:relative;z-index:1}

/* one column: the words, then the buttons */
.c3-intro-in,.sy-intro-in,.pc-hero-in,.hq-intro-in,.nf-intro{display:block!important}
.c3-intro-l,.sy-intro-l,.pc-hero-l,.nf-l{display:block!important;padding:0!important;max-width:760px}
.hq-intro-l{display:flex!important;flex-direction:row!important;flex-wrap:wrap;justify-content:flex-start!important;align-items:center;gap:12px!important;padding:0!important;max-width:760px}
.hq-intro-t,.hq-help{display:contents!important}
.hq-intro-t h1,.hq-intro-t p{flex:1 1 100%}

/* the words */
.c3-intro h1,.sy-intro h1,.pc-hero h1,.hq-intro-t h1,.nf-intro .x-h1{font:400 56px/1.06 var(--serif)!important;margin:0 0 18px!important;text-wrap:balance}
.c3-intro-t p,.sy-intro-t p,.pc-hero-t p,.hq-intro-t p,.nf-intro .x-lead{font:400 19px/1.45 var(--sans)!important;max-width:44ch!important;margin:0 0 28px!important}
.nf-intro .nf-code{font:600 14px/1.2 var(--sans)!important;letter-spacing:.04em;text-transform:uppercase;margin:0 0 14px!important;color:rgba(255,255,255,.72)!important}

/* the ways in, as buttons */
.c3-help,.sy-help,.pc-help,.nf-ways{display:flex!important;flex-wrap:wrap;align-items:center;gap:12px!important;max-width:none!important;margin:0!important;padding:0!important;overflow:visible!important}
.c3-hc,.sy-hc,.pc-hcard,.hq-hc,.nf-way{display:inline-flex!important;flex:0 0 auto!important;flex-direction:row!important;align-items:center;gap:8px;min-height:52px!important;padding:0 22px!important;border-radius:var(--r)!important;border:2px solid rgba(255,255,255,.7)!important;background:transparent!important;color:#fff!important;text-decoration:none!important;white-space:nowrap;transition:background .15s,color .15s}
.c3-hc b,.sy-hc b,.pc-hcard b,.hq-hc b,.nf-way b{font:600 16px/1.2 var(--sans)!important;color:inherit!important}
.c3-hc span,.sy-hc span,.pc-hcard span,.hq-hc span,.nf-way span{font:600 16px/1.2 var(--sans)!important;color:inherit!important;opacity:.78;text-decoration:none!important}
a.c3-hc:hover,a.sy-hc:hover,a.pc-hcard:hover,a.hq-hc:hover,a.nf-way:hover{background:#fff!important;border-color:#fff!important;color:var(--teal)!important}
.c3-hc-sym,.sy-hc-cond,.pc-hcard-a,.nf-way:first-child{background:var(--lime)!important;border-color:var(--lime)!important;color:var(--teal)!important}
.c3-hc-sym:hover,.sy-hc-cond:hover,.pc-hcard-a:hover,.nf-way:first-child:hover{background:#D2D82C!important;border-color:#D2D82C!important;color:var(--teal)!important}
.hq .hq-intro .hq-go{flex:1 1 100%!important;max-width:max-content;margin:0;min-height:52px!important;padding:0 24px!important;font-size:16px!important;border-radius:var(--r)!important}   /* its own line, then the two outline buttons */

/* the urgent note is a quiet line under the buttons */
.c3-hc-urg,.sy-hc-urg{flex:1 1 100%!important;display:block!important;min-height:0!important;padding:0!important;margin:8px 0 0!important;border:0!important;background:transparent!important;color:rgba(255,255,255,.82)!important;white-space:normal;font:400 14px/1.5 var(--sans)!important;max-width:60ch}
.c3-hc-urg b,.sy-hc-urg b{display:inline!important;font:600 14px/1.5 var(--sans)!important;color:#fff!important;margin-right:6px}
.c3-hc-urg span,.sy-hc-urg span{display:inline!important;font:400 14px/1.5 var(--sans)!important;opacity:1}

@media (max-width:1180px){
  .c3-intro h1,.sy-intro h1,.pc-hero h1,.hq-intro-t h1,.nf-intro .x-h1{font-size:50px!important}
}
@media (max-width:1023px){
  .c3-intro,.sy-intro,.pc-hero,.hq .hq-intro,.nf-intro{padding-top:44px!important}
  .c3-intro h1,.sy-intro h1,.pc-hero h1,.hq-intro-t h1,.nf-intro .x-h1{font-size:44px!important}
  .c3-intro-t p,.sy-intro-t p,.pc-hero-t p,.hq-intro-t p,.nf-intro .x-lead{font-size:17px!important;margin-bottom:24px!important}
  .c3-intro,.sy-intro,.pc-hero,.hq .hq-intro,.nf-intro{padding-bottom:84px!important}
  .c3-intro:after,.sy-intro:after,.pc-hero:after,.hq .hq-intro:after,.nf-intro:after{width:260px;height:260px;right:calc(50% - 50vw - 80px);bottom:-200px}
}
@media (max-width:899px){
  /* the words are centred at this size (above); the buttons and the note follow */
  .c3-intro-l,.sy-intro-l,.pc-hero-l,.nf-l,.hq-intro-l{margin:0 auto;text-align:center}
  .c3-intro h1,.sy-intro h1,.pc-hero h1{margin-left:auto!important;margin-right:auto!important}
  .c3-help,.sy-help,.pc-help,.nf-ways,.hq-intro-l{justify-content:center!important}
  .c3-hc-urg,.sy-hc-urg{margin-left:auto!important;margin-right:auto!important}
  .hq .hq-intro .hq-go{margin:0 auto}
  /* no blob where the words are centred: on a phone it would sit under them */
  .c3-intro:after,.sy-intro:after,.pc-hero:after,.hq .hq-intro:after,.nf-intro:after{display:none}
  .c3-intro,.sy-intro,.pc-hero,.hq .hq-intro,.nf-intro{padding-bottom:52px!important}
}
@media (max-width:599px){
  .c3-intro,.sy-intro,.pc-hero,.hq .hq-intro,.nf-intro{padding-top:32px!important}
  .c3-intro h1,.sy-intro h1,.pc-hero h1,.hq-intro-t h1,.nf-intro .x-h1{font-size:36px!important;margin-bottom:12px!important}
  .c3-intro-t p,.sy-intro-t p,.pc-hero-t p,.hq-intro-t p,.nf-intro .x-lead{font-size:16px!important;margin-bottom:20px!important}
  .c3-hc,.sy-hc,.pc-hcard,.hq-hc,.nf-way,.hq .hq-intro .hq-go{flex:1 1 100%!important;width:100%;max-width:none;white-space:normal;justify-content:center;text-align:center;min-height:48px!important;padding:12px 16px!important;flex-wrap:wrap;row-gap:2px}
  .c3-hc-urg,.sy-hc-urg{text-align:center}
  .c3-intro,.sy-intro,.pc-hero,.hq .hq-intro,.nf-intro{padding-bottom:40px!important}
}

/* department cut-outs sit on the square's own tint; the hover stays lime behind the dog */
.rail.v1 .pod .sq.is-cutout{background-color:#E8F0EC}
.rail.v1 .pod:nth-child(4n+2) .sq.is-cutout{background-color:#EDF1D9}.rail.v1 .pod:nth-child(4n+3) .sq.is-cutout{background-color:#E4EED6}.rail.v1 .pod:nth-child(4n+4) .sq.is-cutout{background-color:#DDE9E6}
.rail.v1 .pod:hover .sq.is-cutout{background-color:var(--lime)}

/* ===== homepage hero directions, /?v=2 to /?v=6 (body hv-a to hv-e): one full-width hero, no shape (Joe, 8 Oct 2026) ===== */
body.hero-one .side{display:none!important}
body.hero-one .hero-grid{grid-template-columns:minmax(0,1fr)!important;height:auto!important;min-height:520px}
body.hero-one .hero .blob{display:none!important}
body.hero-one .hero .copy{height:auto}
@media (min-width:1181px){
  body.hero-one .hero{padding:56px 64px}
  body.hero-one .hero .copy{max-width:660px}
  body.hero-one .hero h1{font-size:64px}
  body.hero-one .hero p{font-size:20px;max-width:44ch}
}
.hv-side,.hv-doors,.hv-steps{position:relative;z-index:2}
/* A: centred, words only */
body.hv-a .hero{display:flex;align-items:center;justify-content:center;text-align:center}
body.hv-a .hero .copy{max-width:780px;align-items:center}
body.hv-a .hero p{max-width:50ch}
body.hv-a .hero .cta,body.hv-a .hero .how{justify-content:center}
/* B: search card on the right */
body.hv-b .hero,body.hv-d .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:48px;align-items:center}
.hv-search{background:#fff;color:var(--ink);border-radius:20px;padding:28px}
.hv-search label{display:block;font:700 22px/1.2 var(--serif);color:var(--teal);margin:0 0 14px}
.hv-search .row{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.hv-search input{flex:1;min-width:0;border:0;padding:0 16px;height:52px;font:400 16px/1.2 var(--sans);color:var(--ink);background:#fff}
.hv-search input:focus{outline:none}
.hv-search .btn{border-radius:0;min-height:52px;padding:0 20px;width:auto!important;flex:0 0 auto}
.hv-search input{flex:1 1 0}
.hv-search .k{display:block;margin:18px 0 8px;font:600 13px/1 var(--sans);color:var(--mute)}
.hv-search .chips{display:flex;flex-wrap:wrap;gap:8px}
.hv-search .chips a{display:inline-flex;align-items:center;min-height:38px;padding:0 12px;border:1px solid var(--line);border-radius:8px;font:500 14px/1.2 var(--sans);color:var(--ink);text-decoration:none}
.hv-search .chips a:hover{border-color:var(--teal);color:var(--teal)}
/* C: three doors under the words */
body.hv-c .hero{display:flex;flex-direction:column;justify-content:center;gap:30px}
body.hv-c .hero .copy{max-width:820px}
body.hv-c .hero h1{margin-bottom:14px}
body.hv-c .hero p{margin:0}
body.hv-c .hero .cta,body.hv-c .hero .how{display:none}
.hv-doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hv-doors .d{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:12px;row-gap:4px;padding:22px 24px;border-radius:16px;text-decoration:none}
.hv-doors .d b{font:700 22px/1.15 var(--serif)}
.hv-doors .d span{font:400 14px/1.4 var(--sans)}
.hv-doors .d b{grid-column:1;grid-row:1}
.hv-doors .d span{grid-column:1;grid-row:2}
.hv-doors .d i{grid-column:2;grid-row:1/3;font:400 30px/1 var(--sans);font-style:normal}
.hv-doors .d1{background:var(--lime);color:var(--teal)}
.hv-doors .d2{background:#fff;color:var(--teal)}
.hv-doors .d3{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}
.hv-doors .d:hover b{text-decoration:underline;text-underline-offset:3px}
/* D: the numbers on the right */
.hv-nums{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hv-nums div{background:rgba(255,255,255,.08);border-radius:16px;padding:22px 20px 18px;display:flex;flex-direction:column;gap:6px}
.hv-nums b{font:700 50px/1 var(--serif);color:var(--lime)}
.hv-nums span{font:400 14px/1.4 var(--sans);color:#fff;opacity:.92}
/* E: teal and lime colour block, the three steps large */
body.hv-e .hero{display:grid;grid-template-columns:minmax(0,56fr) minmax(0,44fr);gap:0;padding:0!important}
body.hv-e .hero .copy{padding:52px 56px;max-width:none}
body.hv-e .hero .how{display:none}
.hv-steps{background:var(--lime);color:var(--teal);padding:52px 48px;height:100%;display:flex;flex-direction:column;justify-content:center}
.hv-steps .k{font:600 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;margin-bottom:24px}
.hv-steps ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:24px}
.hv-steps li{display:grid;grid-template-columns:60px minmax(0,1fr);align-items:center;gap:16px}
.hv-steps li b{font:700 52px/1 var(--serif)}
.hv-steps li span{font:600 21px/1.3 var(--sans)}
@media (max-width:1180px){body.hero-one .hero-grid{min-height:0}}
@media (max-width:1023px){
  body.hero-one .hero{padding-bottom:40px!important;height:auto!important;min-height:0!important}   /* no blob, so no room kept for it, and the panel grows with what is in it */
  body.hv-b .hero,body.hv-d .hero,body.hv-e .hero{grid-template-columns:minmax(0,1fr);gap:28px}
  body.hv-e .hero .copy{padding:40px 32px 0}
  .hv-steps{padding:32px;height:auto}
  .hv-doors{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:599px){
  body.hero-one .hero{padding-bottom:28px!important}
  body.hv-e .hero{padding-bottom:0!important}
  .hv-nums{gap:10px}.hv-nums div{padding:16px 14px 14px}.hv-nums b{font-size:36px}
  .hv-search{padding:20px}
  body.hv-e .hero .copy{padding:28px 20px 0}
  .hv-steps{padding:24px 20px}.hv-steps li b{font-size:40px}.hv-steps li span{font-size:18px}
}

/* ===== five more hero directions with the dog pictures, /?v=7 to /?v=11 (hv-f to hv-j) ===== */
/* F: the sitting retriever cut-out rising from the bottom right, nothing behind it */
body.hv-f .hero .copy{max-width:620px}
.hv-cut{position:absolute;z-index:1;right:64px;bottom:-4%;height:96%;width:auto;pointer-events:none}
/* G: words left, a photograph filling the right side */
body.hv-g .hero{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:0;padding:0!important}
body.hv-g .hero .copy{padding:52px 56px;max-width:none}
.hv-photo{background:#E4EED6 center / cover no-repeat;min-height:100%;position:relative;z-index:1}
/* H: the photograph behind everything, the words on a teal card */
body.hv-h .hero{background-color:#E4EED6;background-position:center;background-size:cover;background-repeat:no-repeat;padding:40px!important;display:flex;align-items:center}
body.hv-h .hero .copy{background:var(--teal);padding:44px 48px;border-radius:20px;max-width:640px}
/* I: the harness retriever popping out of a lime tile on the right */
body.hv-i .hero .copy{max-width:620px}
.hv-tile{position:absolute;z-index:1;right:72px;bottom:-56px;width:460px;height:460px;border-radius:44px;background:var(--lime)}
.hv-tile img{position:absolute;left:50%;bottom:56px;transform:translateX(-50%);height:540px;width:auto}
/* J: three photographs on the right */
body.hv-j .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:48px;align-items:center}
.hv-trio{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:12px;height:400px;position:relative;z-index:1}
.hv-trio img{width:100%;height:100%;object-fit:cover;border-radius:16px;display:block}
.hv-trio img:first-child{grid-row:1/3}
@media (max-width:1180px){.hv-cut{right:32px}.hv-tile{right:40px;width:400px;height:400px}.hv-tile img{height:470px}}
@media (max-width:1023px){
  body.hv-f .hero,body.hv-i .hero{padding-bottom:0!important}
  .hv-cut{position:static;display:block;height:280px;margin:20px auto -10px}
  body.hv-g .hero,body.hv-j .hero{grid-template-columns:minmax(0,1fr);gap:24px}
  body.hv-g .hero .copy{padding:40px 32px 0}
  .hv-photo{min-height:280px}
  .hv-tile{position:relative;right:auto;bottom:auto;margin:24px auto -48px;width:300px;height:300px;border-radius:32px}
  .hv-tile img{height:350px;bottom:48px}
  .hv-trio{height:280px}
}
@media (max-width:599px){
  .hv-cut{height:220px}
  body.hv-g .hero .copy{padding:28px 20px 0}
  .hv-photo{min-height:220px}
  body.hv-h .hero{padding:16px!important}
  body.hv-h .hero .copy{padding:28px 20px}
  .hv-tile{width:240px;height:240px;margin-bottom:-40px}.hv-tile img{height:280px;bottom:40px}
  .hv-trio{height:220px;gap:8px}
}

/* ===== five more with the dogs, /?v=12 to /?v=16 (hv-k to hv-o) ===== */
/* K: the dog on the left, the words on the right */
body.hv-k .hero .copy{margin-left:auto;max-width:560px}
.hv-cutl{position:absolute;z-index:1;left:72px;bottom:-4%;height:96%;width:auto;pointer-events:none}
/* L: a pale green panel, teal words, the lime word becomes a highlight, the Labrador on the right */
body.hv-l .hero{background:#E4EED6;color:var(--teal)}
body.hv-l .hero h1,body.hv-l .hero p,body.hv-l .hero .how{color:var(--teal)}
body.hv-l .hero h1{font-size:54px}
body.hv-l .hero h1 .tw{color:var(--teal);box-shadow:inset 0 -.32em 0 var(--lime);padding:0 4px;margin-left:-4px}   /* a highlighter stroke under the word, not a pill */
body.hv-l .hero h1 .tw:after{background:var(--teal)}
body.hv-l .hv-cut{right:0;bottom:-3%;height:94%}   /* the picture meets the panel's edge, so the arm leaves the frame there */
body.hv-l .hero .btn{background:var(--teal);color:#fff}
body.hv-l .hero .btn.ghost{background:transparent;color:var(--teal);border-color:var(--teal)}
body.hv-l .hero .btn.ghost:hover{background:var(--teal);color:#fff}
body.hv-l .hero .how{opacity:1}body.hv-l .hero .how i{opacity:.5}
body.hv-l .hero .copy{max-width:620px}
/* M: the collie photo behind, the words on a lime card at the right */
body.hv-m .hero{background-color:#E4EED6;background-position:center;background-size:cover;background-repeat:no-repeat;padding:40px!important;display:flex;align-items:center;justify-content:flex-end}
body.hv-m .hero .copy{background:var(--lime);color:var(--teal);padding:44px 48px;border-radius:20px;max-width:600px}
body.hv-m .hero h1,body.hv-m .hero p,body.hv-m .hero .how{color:var(--teal)}
body.hv-m .hero h1 .tw{color:var(--teal);background:#fff;padding:0 12px;border-radius:12px}
body.hv-m .hero h1 .tw:after{background:var(--teal)}
/* while the typing word is between words the highlight pill has nothing to hold: hide it */
body.hv-l .hero h1 .tw:empty,body.hv-m .hero h1 .tw:empty{background:transparent;box-shadow:none;padding:0}
body.hv-m .hero .btn{background:var(--teal);color:#fff}
body.hv-m .hero .btn.ghost{background:transparent;color:var(--teal);border-color:var(--teal)}
body.hv-m .hero .how{opacity:1}
/* N: two prints, tilted, on the right */
body.hv-n .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:40px;align-items:center}
.hv-pair{position:relative;height:430px;z-index:1}
.hv-pair img{position:absolute;width:330px;aspect-ratio:4/3;object-fit:cover;background:#fff;padding:10px 10px 34px;border-radius:6px;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.hv-pair img:first-child{left:0;top:16px;transform:rotate(-5deg)}
.hv-pair img:last-child{right:0;top:96px;transform:rotate(4deg)}
/* O: centred words, the wide black Labrador along the bottom */
body.hv-o .hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:56px 56px 0!important}
body.hv-o .hero .copy{max-width:780px;align-items:center}
body.hv-o .hero p{max-width:50ch}
body.hv-o .hero .cta,body.hv-o .hero .how{justify-content:center}
.hv-wide{display:block;width:min(100%,760px);height:auto;margin:8px auto -1%;position:relative;z-index:1}
@media (max-width:1180px){.hv-cutl{left:32px}body.hv-l .hv-cut{height:80%}}
@media (max-width:1023px){
  body.hv-k .hero,body.hv-l .hero{padding-bottom:0!important}
  body.hv-k .hero .copy{margin-left:0}
  .hv-cutl{position:static;display:block;height:280px;margin:20px auto -10px}
  body.hv-l .hv-cut{position:static;display:block;height:auto;width:62%;max-width:380px;margin:8px -40px -3px auto}   /* bottom right corner, flush with the panel edge */
  body.hv-n .hero{grid-template-columns:minmax(0,1fr);gap:24px}
  .hv-pair{height:300px}.hv-pair img{width:240px;padding:8px 8px 26px}.hv-pair img:last-child{top:60px}
  body.hv-m .hero{justify-content:center}
}
@media (max-width:599px){
  .hv-cutl{height:220px}
  body.hv-l .hv-cut{width:76%;margin:4px -20px -3px auto}
  body.hv-l .hero h1{font-size:34px}
  body.hv-m .hero{padding:16px!important}
  body.hv-m .hero .copy{padding:28px 20px}
  .hv-pair{height:240px}.hv-pair img{width:190px;padding:6px 6px 20px}.hv-pair img:last-child{top:50px}
  body.hv-o .hero{padding:28px 20px 0!important}
}

/* ===== the L family, /?v=17 to /?v=21 (hv-p to hv-t): pale green panel, teal words, the Labrador; five ways to fill it ===== */
body.hv-pale .hero{background:#E4EED6;color:var(--teal);display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,44%);gap:0 24px;align-items:center;padding:44px 0 0 56px!important;height:auto!important;min-height:0!important}
body.hv-pale .hero .copy{height:auto;max-width:600px;padding:0 0 44px}
body.hv-pale .hero h1{font-size:54px;color:var(--teal)}
body.hv-pale .hero p,body.hv-pale .hero .how{color:var(--teal)}
body.hv-pale .hero .how{opacity:1}body.hv-pale .hero .how i{opacity:.5}
body.hv-pale .hero h1 .tw{color:var(--teal);box-shadow:inset 0 -.32em 0 var(--lime);padding:0 4px;margin-left:-4px}
body.hv-pale .hero h1 .tw:empty{box-shadow:none;padding:0}
body.hv-pale .hero h1 .tw:after{background:var(--teal)}
body.hv-pale .hero .btn{background:var(--teal);color:#fff}
body.hv-pale .hero .btn.ghost{background:transparent;color:var(--teal);border-color:var(--teal)}
body.hv-pale .hero .btn.ghost:hover{background:var(--teal);color:#fff}
body.hv-pale .hv-dog{display:block;width:auto;height:auto;max-height:440px;max-width:100%;align-self:end;justify-self:end;object-fit:contain;object-position:right bottom;position:relative;z-index:1}
/* P: tight. the panel is only as tall as the dog, the dog as tall as the panel */
/* Q: the two buttons become three small doors with the real counts */
body.hv-q .hero .copy{max-width:640px}
body.hv-q .hero .cta,body.hv-q .hero .how{display:none!important}
.hv-doors2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:6px}
.hv-doors2 a{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:14px;background:#fff;color:var(--teal);text-decoration:none}
.hv-doors2 a:hover b{text-decoration:underline;text-underline-offset:3px}
.hv-doors2 b{font:700 16px/1.2 var(--serif)}
.hv-doors2 span{font:400 13px/1.35 var(--sans);color:var(--ink)}
/* R: the dog on a lime tile that fills the right side */
body.hv-r .hero{min-height:480px!important}
.hv-tile2{align-self:stretch;justify-self:stretch;margin:16px 16px 16px 0;background:var(--lime);border-radius:24px;position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;min-height:0}
body.hv-r .hv-tile2 .hv-dog{height:94%;max-height:none;width:auto;align-self:flex-end;margin-bottom:-2%}
/* S: pale green left, a lime block right, the dog on it */
body.hv-s .hero{gap:0;min-height:480px!important}
body.hv-s .hero .copy{padding-right:32px}
.hv-block{align-self:stretch;background:var(--lime);display:flex;align-items:flex-end;justify-content:center;position:relative;overflow:hidden}
body.hv-s .hv-block .hv-dog{height:96%;max-height:none;width:auto;margin-bottom:-2%}
/* T: the dog's head rises above the panel */
body.hv-t .hero{overflow:visible!important;border-radius:var(--rl)}
body.hv-t .hero-sec{padding-top:72px}
body.hv-t .hv-dog{max-height:none;height:118%;position:absolute;right:48px;bottom:0;align-self:auto;justify-self:auto}
@media (max-width:1180px){
  body.hv-pale .hero{padding:36px 0 0 40px!important}
  body.hv-pale .hero h1{font-size:46px}
  body.hv-pale .hv-dog{max-height:400px}
}
@media (max-width:1023px){
  body.hv-pale .hero{grid-template-columns:minmax(0,1fr) minmax(0,42%);padding:32px 0 0 32px!important}
  body.hv-pale .hero .copy{padding-bottom:32px}
  body.hv-pale .hero h1{font-size:40px}
  body.hv-pale .hero p{font-size:17px}
  body.hv-pale .hv-dog{max-height:360px}
  .hv-doors2{grid-template-columns:minmax(0,1fr)}
  body.hv-t .hv-dog{right:24px;height:112%}
}
@media (max-width:599px){
  /* phone: the heading runs the full width; under it the lead and the buttons sit left, the dog right, anchored to the bottom like desktop */
  body.hv-pale .hero{grid-template-columns:minmax(0,55%) minmax(0,1fr);grid-template-areas:"h h" "p d" "c d";gap:0 12px;align-items:start;padding:24px 20px 0!important;overflow:hidden}
  body.hv-pale .hero .copy{display:contents}
  body.hv-pale .hero h1{grid-area:h;font-size:30px;margin:0 0 10px;max-width:none}
  body.hv-pale .hero p{grid-area:p;font-size:15px;line-height:1.4;margin:0 0 14px;max-width:none}
  body.hv-pale .hero .cta{grid-area:c;align-self:end;display:flex;flex-direction:column;gap:8px;margin:0 0 20px;position:relative;z-index:2}
  body.hv-pale .hero .cta .btn{width:100%;white-space:normal;min-height:46px;padding:10px 12px;font-size:14px;line-height:1.2;text-align:center}
  body.hv-pale .hero .how{display:none}
  body.hv-pale .hv-dog,body.hv-pale .hv-tile2,body.hv-pale .hv-block{grid-area:d;align-self:end;justify-self:end}
  body.hv-pale .hv-dog{max-height:none;width:calc(100% + 20px);margin:0 -20px 0 0}
  body.hv-q .hv-doors2{grid-area:c;align-self:end;grid-template-columns:minmax(0,1fr);gap:8px;margin:0 0 20px}
  .hv-doors2 a{padding:12px 14px}.hv-doors2 b{font-size:15px}
  body.hv-r .hero,body.hv-s .hero{min-height:0!important}
  .hv-tile2{margin:0 0 16px;border-radius:18px;width:100%;align-items:flex-end}
  body.hv-r .hv-tile2 .hv-dog{height:auto;width:100%;margin:0}
  .hv-block{margin:0 -20px 0 0;border-radius:20px 0 0 0;width:calc(100% + 20px);padding-top:14px}
  body.hv-s .hv-block .hv-dog{height:auto;width:100%;margin:0}
  /* T keeps its own idea on phones: the dog beside the heading, its head above the panel */
  body.hv-t .hero{grid-template-columns:minmax(0,58%) minmax(0,1fr);grid-template-areas:"h d" "p d" "c c";overflow:visible!important;padding-bottom:20px!important}
  body.hv-t .hero h1{font-size:26px}
  body.hv-t .hero .cta{align-self:start;margin:-8px 0 0}
  body.hv-t .hero-sec{padding-top:56px}
  body.hv-t .hv-dog{width:calc(100% + 20px);margin:-50px -20px 0 0}
}
}

/* ===== five structural redesigns, /?v=22 to /?v=26 (hv-u to hv-y) ===== */
.hv-gold{display:inline-flex;gap:1px;font-style:normal;color:var(--gold,#F2B418);font-size:16px;line-height:1}
.hv-gold i{font-style:normal}
/* ---- U: bento grid of real tiles. the hero panel becomes the grid ---- */
body.hv-u .hero.hv-bento{background:transparent!important;padding:0!important;overflow:visible;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:190px;gap:16px;border-radius:0;color:#fff}
body.hv-u .trust{display:none}
body.hv-u .hero .copy{grid-column:1/3;grid-row:1/3;background:var(--teal);border-radius:var(--rl);padding:40px 44px;max-width:none;justify-content:center}
body.hv-u .hero h1{font-size:46px;margin-bottom:14px}
body.hv-u .hero p{font-size:17px;margin-bottom:22px}
body.hv-u .hero .cta{margin:0}
.hv-t{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:22px 24px;border-radius:var(--rl);overflow:hidden;text-decoration:none;color:var(--teal);background:#fff;border:1px solid var(--line)}
.hv-t b{font:700 20px/1.2 var(--serif)}
.hv-t span{font:400 14px/1.4 var(--sans);color:var(--ink)}
.hv-t em{font:600 14px/1.2 var(--sans);font-style:normal;margin-top:8px}
.hv-t-dog{grid-column:3;grid-row:1/3;background:var(--lime);border:0;padding:0;align-items:center;justify-content:flex-end}
.hv-t-dog img{width:92%;height:auto;display:block;margin-bottom:-2%}
.hv-t-club{grid-column:4;grid-row:1;background:var(--teal);color:#fff;border:0}
.hv-t-club span{color:rgba(255,255,255,.85)}.hv-t-club em{color:var(--lime)}
.hv-t-rev{grid-column:4;grid-row:2}
.hv-t-rev b{margin-top:6px}
.hv-t-photo{grid-column:1/3;grid-row:3;background:#E4EED6 center / cover no-repeat;border:0}
.hv-t-del{grid-column:3;grid-row:3;background:#E4EED6;border:0}
.hv-t-offer{grid-column:4;grid-row:3;background:#F5F7F2}
a.hv-t:hover b{text-decoration:underline;text-underline-offset:3px}
/* ---- V: editorial. white, a kicker, one huge headline, a rule, then lead and buttons beside a large photograph ---- */
body.hv-v .hero.hv-ed{background:#fff!important;color:var(--teal);padding:8px 0 0!important;border-radius:0;overflow:visible;display:block}
.hv-kick{display:block;font:600 13px/1.2 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:18px}
body.hv-v .hero h1{font-size:92px;line-height:1;letter-spacing:-.01em;margin:0 0 28px;max-width:16ch;color:var(--teal)}
body.hv-v .hero h1 .tw{color:var(--teal);box-shadow:inset 0 -.28em 0 var(--lime);padding:0 6px;margin-left:-6px}
body.hv-v .hero h1 .tw:empty{box-shadow:none;padding:0}
body.hv-v .hero h1 .tw:after{background:var(--teal)}
.hv-rule{border:0;border-top:2px solid var(--teal);margin:0 0 28px}
.hv-edrow{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
body.hv-v .hero .copy{max-width:none;padding:8px 0 0}
body.hv-v .hero p{color:var(--ink);font-size:20px;max-width:34ch}
body.hv-v .hero .how{color:var(--mute);opacity:1}
body.hv-v .hero .btn{background:var(--teal);color:#fff}
body.hv-v .hero .btn.ghost{background:transparent;color:var(--teal);border-color:var(--teal)}
.hv-fig{margin:0}
.hv-fig img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--rl)}
.hv-fig figcaption{margin-top:10px;font:500 14px/1.4 var(--sans);color:var(--mute)}
/* ---- W: the funnel. words left, the three steps as a card with real symptoms and products ---- */
body.hv-w .hero.hv-funnel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:stretch;padding:48px 48px 0 56px!important}
body.hv-w .hero .copy{max-width:none;padding-bottom:0;justify-content:flex-start}
body.hv-w .hero h1{font-size:50px}
.hv-wdog{display:block;width:72%;max-width:340px;height:auto;margin:auto 0 0 -8px;position:relative;z-index:1}
.hv-steps3{list-style:none;margin:0 0 48px;padding:0;background:#fff;color:var(--ink);border-radius:20px;display:flex;flex-direction:column;position:relative;z-index:2}
.hv-steps3 li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;padding:22px 26px;border-bottom:1px solid var(--line)}
.hv-steps3 li:last-child{border-bottom:0}
.hv-steps3 li > b{width:40px;height:40px;border-radius:50%;background:var(--lime);color:var(--teal);display:inline-flex;align-items:center;justify-content:center;font:700 18px/1 var(--serif)}
.hv-steps3 h3{margin:0 0 10px;font:700 20px/1.2 var(--serif);color:var(--teal)}
.hv-steps3 p{margin:0 0 12px;font:400 15px/1.4 var(--sans);color:var(--mute)}
.hv-chips{display:flex;flex-wrap:wrap;gap:8px}
.hv-chips a{display:inline-flex;align-items:center;min-height:38px;padding:0 12px;border:1px solid var(--line2,#C9D5D1);border-radius:8px;font:500 14px/1.2 var(--sans);color:var(--ink);text-decoration:none}
.hv-chips a:hover{border-color:var(--teal);color:var(--teal)}
.hv-chips a.more{border-color:transparent;color:var(--teal);font-weight:600;padding-left:4px}
.hv-prods{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hv-prods a{width:56px;height:56px;border-radius:12px;background:var(--mist,#F2F4F3);border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;overflow:hidden}
.hv-prods img{width:80%;height:80%;object-fit:contain;mix-blend-mode:multiply}
.hv-prods span{font:500 14px/1.3 var(--sans);color:var(--mute);margin-left:4px}
.hv-steps3 .btn{align-self:flex-start;min-height:46px;padding:0 18px;font-size:15px}
/* ---- X: full-bleed split. the photograph fills the left half of the viewport, the words sit on white ---- */
body.hv-x .hero-sec{padding-top:0}
body.hv-x .hero-grid{margin:0 calc(50% - 50vw)}
body.hv-x .hero.hv-split{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0!important;border-radius:0;background:#fff!important;color:var(--teal);min-height:600px}
.hv-photoL{background:#E4EED6 center / cover no-repeat;min-height:100%}
body.hv-x .hero .copy{max-width:600px;padding:64px 48px 64px 64px;justify-content:center}
body.hv-x .hero h1{color:var(--teal)}
body.hv-x .hero h1 .tw{color:var(--teal);box-shadow:inset 0 -.3em 0 var(--lime);padding:0 4px;margin-left:-4px}
body.hv-x .hero h1 .tw:empty{box-shadow:none;padding:0}
body.hv-x .hero h1 .tw:after{background:var(--teal)}
body.hv-x .hero p{color:var(--ink)}
body.hv-x .hero .how{color:var(--mute);opacity:1}
body.hv-x .hero .btn{background:var(--teal);color:#fff}
body.hv-x .hero .btn.ghost{background:transparent;color:var(--teal);border-color:var(--teal)}
.hv-proofline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:22px 0 0!important;font:500 14px/1.3 var(--sans)!important;color:var(--mute)!important}
.hv-proofline b{color:var(--teal)}
/* ---- Y: hero with the proof beside it. a verified owner review on a white card ---- */
body.hv-y .hero.hv-social{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:48px;align-items:center}
.hv-proof{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px}
.hv-proof blockquote{margin:0;background:#fff;color:var(--ink);border-radius:20px;padding:28px 30px;display:flex;flex-direction:column;gap:12px}
.hv-proof blockquote p{margin:0;font:400 20px/1.4 var(--serif);color:var(--teal)}
.hv-proof footer{font:400 14px/1.4 var(--sans);color:var(--mute)}
.hv-proof footer b{color:var(--ink);font-weight:600}
.hv-proof footer span{display:block;font-weight:600;color:var(--teal);margin-top:2px}
.hv-proofall{align-self:flex-start;color:#fff;font:500 15px/1.3 var(--sans);text-decoration:none}
.hv-proofall b{font-weight:700;color:var(--lime)}
.hv-proofall:hover{text-decoration:underline}
@media (max-width:1180px){
  body.hv-u .hero.hv-bento{grid-auto-rows:170px}
  body.hv-v .hero h1{font-size:72px}
}
@media (max-width:1023px){
  body.hv-u .hero.hv-bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  body.hv-u .hero .copy{grid-column:1/3;grid-row:auto;padding:32px}
  .hv-t-dog{grid-column:1;grid-row:auto;aspect-ratio:1}
  .hv-t-club,.hv-t-rev,.hv-t-del,.hv-t-offer,.hv-t-photo{grid-column:auto;grid-row:auto;min-height:150px}
  .hv-t-photo{grid-column:1/3;min-height:220px}
  body.hv-v .hero h1{font-size:56px}
  .hv-edrow{grid-template-columns:minmax(0,1fr);gap:24px}
  body.hv-w .hero.hv-funnel{grid-template-columns:minmax(0,1fr);gap:16px;padding:32px 32px 0!important}
  .hv-wdog{display:none}
  .hv-steps3{margin-bottom:32px}
  body.hv-x .hero.hv-split{grid-template-columns:1fr;min-height:0}
  .hv-photoL{min-height:0;aspect-ratio:16/9}
  body.hv-x .hero .copy{padding:32px 32px 40px}
  body.hv-y .hero.hv-social{grid-template-columns:minmax(0,1fr);gap:24px}
}
@media (max-width:599px){
  body.hv-u .hero .copy{padding:24px 20px}
  body.hv-u .hero h1{font-size:34px}
  .hv-t{padding:16px 18px;min-height:130px}.hv-t b{font-size:17px}.hv-t span{font-size:13px}
  body.hv-v .hero h1{font-size:40px}
  body.hv-w .hero h1{font-size:34px}
  .hv-chips a{width:auto!important;display:inline-flex!important;min-height:36px;font-size:13.5px}
  .hv-steps3 li{padding:16px 16px;grid-template-columns:36px minmax(0,1fr);gap:12px}
  .hv-steps3 li > b{width:32px;height:32px;font-size:15px}
  body.hv-x .hero .copy{padding:24px 20px 32px}
  .hv-proof blockquote{padding:20px}
}

/* ===== a symptom's own page, rethought (Joe, 10 Oct 2026): no tall picture box stretched beside the list.
   A pale green band carries the urgent note and the buttons on the left and the dog on the right, rising from the
   band's bottom edge; "What it could be" runs underneath at full width, three cards across. Phones keep their layout. ===== */
@media (min-width:900px){
  .sy-s2 .sy-top{grid-template-columns:minmax(0,1fr) 380px;grid-template-rows:auto auto auto;gap:0 32px;align-items:start;position:relative}
  .sy-s2 .sy-top:before{content:"";grid-column:1/-1;grid-row:1/3;background:#E4EED6;border-radius:20px;align-self:stretch;min-height:250px}
  .sy-s2 .sy-info{display:contents}
  .sy-s2 .sy-urgent{grid-column:1;grid-row:1;align-self:end;margin:36px 0 16px 36px;width:auto;max-width:560px;position:relative}
  .sy-s2 .sy-acts{grid-column:1;grid-row:2;align-self:start;margin:0 0 36px 36px;position:relative}
  .sy-s2 .sy-ph-sym{grid-column:2;grid-row:1/3;align-self:stretch;min-height:0!important;margin:-28px 24px 0 0;border-radius:0;background-color:transparent!important;position:relative}
  .sy-s2 .sy-could{grid-column:1/-1;grid-row:3;margin-top:28px}
  .sy-s2 .sy-ccs{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
}

/* ===== the video hero, /?v=27 to 29 (hb-1 to hb-3), after bullpadel.com ===== */
body[class*="hb-"] .hero-sec{padding-top:0}
body[class*="hb-"] .hero-grid{margin:0 calc(50% - 50vw);min-height:0!important}
body[class*="hb-"] .hero{position:relative;padding:0!important;border-radius:0;background:#fff!important;overflow:hidden;height:calc(100vh - 184px)!important;min-height:520px!important;max-height:860px;display:block!important}
.hb-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hb-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,58,55,0) 30%,rgba(10,58,55,.62) 100%);opacity:0;animation:hbIn 1.2s ease 2s forwards}
.hb-copy,.hb-mask{position:absolute;inset:0;display:flex;align-items:flex-end;padding:0 0 64px}
.hb-in{width:100%;max-width:1440px;margin:0 auto;padding:0 var(--gut)}
.hb-in h1{margin:0 0 18px!important;font:800 clamp(34px,6.3vw,104px)/.94 Figtree,var(--sans)!important;letter-spacing:-.03em;text-transform:uppercase}
.hb-in p{font:400 20px/1.45 var(--sans)!important;max-width:46ch!important;margin:0 0 24px!important}
.hb-in .cta{margin:0!important}
/* the white layer: black letters become windows onto the video */
.hb-mask{background:#fff;color:#000;mix-blend-mode:screen;animation:hbOut 1.2s ease 2s forwards;pointer-events:none}
.hb-mask h1{color:#000!important}
.hb-mask p,.hb-mask .cta{visibility:hidden}
/* the layer underneath: the same headline in white, then the lead and buttons */
.hb-copy{color:#fff}
.hb-copy h1{color:#fff!important;opacity:0;animation:hbIn 1.2s ease 2s forwards}
.hb-copy p,.hb-copy .cta{opacity:0;transform:translateY(10px);animation:hbUp .7s ease 3s forwards}
.hb-copy .btn{background:var(--lime);color:var(--teal);min-height:52px;padding:0 24px}
.hb-copy .btn.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.75)}
@keyframes hbOut{to{opacity:0}}@keyframes hbIn{to{opacity:1}}@keyframes hbUp{to{opacity:1;transform:none}}
/* 2: the brand's own serif, sentence case, centred, with the lime word */
body.hb-2 .hb-copy,body.hb-2 .hb-mask{align-items:center;text-align:center;padding:0}
body.hb-2 .hb-in h1{font:700 clamp(40px,7vw,112px)/1 var(--serif)!important;text-transform:none;letter-spacing:-.01em}
body.hb-2 .hb-in h1 em{font-style:normal}
body.hb-2 .hb-copy h1 em{color:var(--lime)}
body.hb-2 .hb-in p{margin-left:auto!important;margin-right:auto!important}
body.hb-2 .hb-in .cta{justify-content:center}
body.hb-2 .hb-scrim{background:rgba(10,58,55,.5)}
/* 3: the windows stay. a white hero, the video only ever seen through the giant headline, teal words beneath */
body.hb-3 .hb-mask{animation:none}
body.hb-3 .hb-scrim{display:none}
body.hb-3 .hb-copy,body.hb-3 .hb-mask{align-items:center;padding:0}
body.hb-3 .hb-in h1{font:700 clamp(52px,10.5vw,176px)/.9 var(--serif)!important;text-transform:none;letter-spacing:-.02em;margin-bottom:28px!important}
body.hb-3 .hb-copy{color:var(--teal);z-index:2}
body.hb-3 .hb-copy h1{visibility:hidden;animation:none}
body.hb-3 .hb-copy p,body.hb-3 .hb-copy .cta{animation-delay:.6s}
body.hb-3 .hb-copy p{color:var(--ink)}
body.hb-3 .hb-copy .btn{background:var(--teal);color:#fff}
body.hb-3 .hb-copy .btn.ghost{background:transparent;color:var(--teal);border-color:var(--teal)}
@media (max-width:1023px){body[class*="hb-"] .hero{height:calc(100vh - 150px)!important;min-height:460px!important;padding-bottom:0!important}}
@media (max-width:599px){
  .hb-copy,.hb-mask{padding-bottom:28px}
  .hb-in p{font-size:16px!important;margin-bottom:18px!important}
  .hb-in .cta .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.hb-mask{animation:none;opacity:0}body.hb-3 .hb-mask{opacity:1}.hb-scrim,.hb-copy h1,.hb-copy p,.hb-copy .cta{animation:none;opacity:1;transform:none}}

/* ===== the scroll-driven video hero, /?v=30 to 34 (hb-4 to hb-8). hero-variants.js sets the transforms from the scroll ===== */
body[class*="hb-"] .hero.hb-scroll{height:190vh!important;max-height:none!important;min-height:0!important;overflow:visible!important;background:#fff!important}
.hb-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#fff}
.hb-frame{position:absolute;inset:0;overflow:hidden;isolation:isolate}
.hb-scroll .hb-mask,.hb-scroll .hb-scrim,.hb-scroll .hb-copy h1,.hb-scroll .hb-copy p,.hb-scroll .hb-copy .cta{animation:none}
.hb-scroll .hb-copy,.hb-scroll .hb-mask{padding-bottom:56px}
.hb-scroll .hb-in h1{display:block;width:max-content;max-width:none;transform-origin:0 0;will-change:transform;margin:0 0 16px!important;font:700 clamp(28px,4.3vw,66px)/1.04 var(--serif)!important;text-transform:none;letter-spacing:-.01em}
.hb-scroll .hb-in h1 em{font-style:normal}
.hb-scroll .hb-copy h1 em{color:var(--lime)}
.hb-scroll .hb-copy h1{opacity:1}
.hb-scroll .hb-scrim{background:linear-gradient(200deg,rgba(10,58,55,0) 35%,rgba(10,58,55,.78) 100%)}
.hb-tint{position:absolute;inset:0;background:#E4EED6;mix-blend-mode:multiply;pointer-events:none;display:none}
body.hb-5 .hb-copy h1,body.hb-6 .hb-copy h1{opacity:1!important}
body.hb-7 .hb-scroll .hb-in h1{font:800 clamp(26px,4.1vw,64px)/.96 Figtree,var(--sans)!important;text-transform:uppercase;letter-spacing:-.03em}
/* 8: framed. the page is pale green, the video ends in a rounded panel like the rest of the site */
body.hb-framed .hb-stage,body.hb-framed .hero.hb-scroll{background:#E4EED6!important}
body.hb-framed .hb-frame{inset:20px;border-radius:28px}
body.hb-framed .hb-tint{display:block}
@media (max-width:599px){
  .hb-scroll .hb-copy,.hb-scroll .hb-mask{padding-bottom:28px}
  body.hb-framed .hb-frame{inset:12px;border-radius:20px}
}

/* ===== the framed video hero made to sell, /?v=35 to 39 (hb-9 to hb-13): shorter stage, menu stays, an intro that says what we do ===== */
body.hb-sell .hb-scroll .hb-copy,body.hb-sell .hb-scroll .hb-mask{padding-bottom:36px}
body.hb-sell .hb-scroll .hb-in h1{font-size:clamp(26px,3.6vw,54px)!important;margin-bottom:12px!important}
body.hb-sell .hb-in p{font-size:17px!important;margin-bottom:18px!important}
.hb-intro{position:absolute;left:50%;transform:translateX(-50%);width:min(900px,calc(100% - 40px));z-index:3;text-align:center;color:var(--teal);display:flex;flex-direction:column;align-items:center;gap:16px}
.hb-intro .lead{margin:0;font:400 19px/1.45 var(--sans);color:var(--teal);max-width:52ch}
.hb-intro .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:0}
.hb-intro .btn{min-height:52px;padding:0 24px;background:var(--teal);color:#fff}
.hb-intro .btn.ghost{background:transparent;color:var(--teal);border:2px solid var(--teal)}
.hb-proof2{margin:0;font:500 14px/1.4 var(--sans);color:var(--teal);display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}
.hb-proof2 > i{font-style:normal;opacity:.5}
.hb-doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}
.hb-doors a{display:flex;flex-direction:column;gap:3px;padding:16px 18px;border-radius:16px;background:#fff;color:var(--teal);text-decoration:none;text-align:left}
.hb-doors a.d1{background:var(--teal);color:#fff}
.hb-doors b{font:700 18px/1.2 var(--serif)}
.hb-doors span{font:400 14px/1.35 var(--sans);opacity:.85}
.hb-doors a:hover b{text-decoration:underline;text-underline-offset:3px}
.hb-search{display:flex;width:min(620px,100%);background:#fff;border-radius:var(--r);overflow:hidden}
.hb-search input{flex:1 1 0;min-width:0;border:0;height:56px;padding:0 18px;font:400 16px/1.2 var(--sans);color:var(--ink);background:#fff}
.hb-search input:focus{outline:none}
.hb-search .btn{border-radius:0;min-height:56px;width:auto!important;flex:0 0 auto}
.hb-chips2{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.hb-chips2 a{display:inline-flex;align-items:center;min-height:38px;padding:0 12px;border-radius:8px;background:#fff;color:var(--teal);font:500 14px/1.2 var(--sans);text-decoration:none}
.hb-chips2 a:hover{background:var(--teal);color:#fff}
.hb-nums2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:100%}
.hb-nums2 div{background:#fff;border-radius:16px;padding:16px 12px;display:flex;flex-direction:column;gap:4px}
.hb-nums2 b{font:700 34px/1 var(--serif);color:var(--teal)}
.hb-nums2 span{font:400 13px/1.3 var(--sans);color:var(--ink)}
.hb-offers{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%;max-width:720px}
.hb-offers a{display:flex;flex-direction:column;gap:3px;padding:14px 18px;border-radius:16px;background:#fff;color:var(--teal);text-decoration:none;text-align:left}
.hb-offers a + a{background:var(--teal);color:#fff}
.hb-offers b{font:700 17px/1.2 var(--serif)}
.hb-offers span{font:400 13.5px/1.35 var(--sans);opacity:.9}
@media (max-width:599px){
  .hb-intro{gap:12px;width:calc(100% - 28px)}
  .hb-intro .lead{font-size:15.5px}
  .hb-intro .cta{flex-direction:column;width:100%}.hb-intro .cta .btn{width:100%;min-height:48px}
  .hb-proof2{font-size:13px}
  .hb-doors{grid-template-columns:1fr;gap:8px}.hb-doors a{padding:11px 14px}.hb-doors b{font-size:16px}.hb-doors span{font-size:13px}
  .hb-nums2{grid-template-columns:1fr 1fr;gap:8px}.hb-nums2 div{padding:12px 10px}.hb-nums2 b{font-size:26px}
  .hb-offers{grid-template-columns:1fr;gap:8px}
  .hb-search input,.hb-search .btn{height:50px;min-height:50px}
  body.hb-sell .hb-in p{font-size:15px!important;margin-bottom:14px!important}
  body.hb-sell .hb-in .cta{gap:8px}body.hb-sell .hb-in .cta .btn{min-height:46px}
}

/* ===== five plain video hero concepts, /?v=40 to 44 (hb-14 to hb-18; body.hb2). hero-variants.js drives them from the scroll ===== */
body.hb2 .hb-stage,body.hb2 .hero.hb-scroll{background:#fff!important}
body.hb2 .hb-frame{inset:0 20px 20px;border-radius:28px;background:#E4EED6}
body.hb2 .hb-win{position:absolute;inset:0}
body.hb2 .hb-scrim{background:linear-gradient(200deg,rgba(10,58,55,0) 30%,rgba(10,58,55,.8) 100%)}
.hb-mask2{position:absolute;inset:0;background:#fff;mix-blend-mode:screen;pointer-events:none}
body.hb2 .hb-tint{display:block}
body.hb2 h1.hb-h{position:absolute;left:0;top:0;margin:0!important;transform-origin:0 0;will-change:transform;white-space:nowrap;font:700 48px/1.05 var(--serif)!important;letter-spacing:-.01em;color:#fff;max-width:none}
body.hb2 h1.hb-h em{font-style:normal;color:var(--lime)}
.hb-mask2 h1.hb-h,.hb-mask2 h1.hb-h em{color:#000!important}
body.hb2 .hb-start{position:absolute;left:50%;transform:translateX(-50%);width:min(620px,calc(100% - 32px));text-align:center;color:var(--teal);z-index:3}
body.hb2 .hb-start p{margin:0 0 16px;font:400 18px/1.45 var(--sans);color:var(--teal)}
body.hb2 .hb-start .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:0}
body.hb2 .hb-start .btn{min-height:50px;padding:0 22px;background:var(--teal);color:#fff}
body.hb2 .hb-start .btn.ghost{background:transparent;color:var(--teal);border:2px solid var(--teal)}
body.hb2 .hb-end{position:absolute;left:36px;bottom:36px;max-width:520px;color:#fff;z-index:3}
body.hb2 .hb-end p{margin:0 0 16px;font:400 17px/1.45 var(--sans);color:#fff}
body.hb2 .hb-end .cta{display:flex;gap:12px;flex-wrap:wrap;margin:0}
body.hb2 .hb-end .btn{min-height:50px;padding:0 22px;background:var(--lime);color:var(--teal)}
body.hb2 .hb-end .btn.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.75)}
/* capsule: a pill of video inside the sentence */
body.hb2 .cap{display:inline-block;width:1.9em;height:.74em;vertical-align:-.04em;margin:0 .14em;border-radius:1em}
/* typed: the small line, then the symptom word, giant */
body.hb2-typed h1.hb-h{white-space:normal;line-height:1}
body.hb2-typed h1.hb-h .sm{display:block;font:500 20px/1.3 var(--sans);letter-spacing:0;margin-bottom:6px;white-space:nowrap}
body.hb2-typed h1.hb-h .tw{display:block;font:700 72px/1 var(--serif);white-space:nowrap;min-height:1em}
body.hb2-typed h1.hb-real .tw{color:var(--lime)}
body.hb2-typed h1.hb-real .tw:after{display:none}
@media (max-width:599px){
  body.hb2 .hb-frame{inset:0 12px 12px;border-radius:20px}
  body.hb2 h1.hb-h{font-size:28px!important}
  body.hb2-typed h1.hb-h .sm{font-size:14px}body.hb2-typed h1.hb-h .tw{font-size:44px}
  body.hb2 .hb-start p{font-size:15.5px;margin-bottom:12px}
  body.hb2 .hb-start .cta,body.hb2 .hb-end .cta{flex-direction:column;gap:8px}
  body.hb2 .hb-start .btn,body.hb2 .hb-end .btn{width:100%;min-height:46px}
  body.hb2 .hb-end{left:18px;right:18px;bottom:18px}
  body.hb2 .hb-end p{font-size:15px;margin-bottom:12px}
}

/* ===== the trust items under the homepage hero: one quiet ruled strip, not four boxes; Judge.me stars in gold (Joe, 10 Oct 2026) ===== */
.trust{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:0!important;margin:20px 0 0!important;padding:0!important;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:visible!important}
.trust .ti{background:none!important;border:0!important;border-radius:0!important;min-height:0!important;padding:14px 20px!important;border-left:1px solid var(--line)!important;gap:2px}
.trust .ti:first-child{border-left:0!important;padding-left:0!important}
.trust .ti b{font:600 15px/1.25 var(--sans)!important;color:var(--teal)}
.trust .ti span{font:400 13.5px/1.35 var(--sans)!important;color:var(--mute);white-space:normal!important}
.trust .stars,.util .stars{color:#F2B418!important}
.util .stars i.on:before,.util .stars i.part:after,.trust .stars i.on:before,.trust .stars i.part:after{color:#F2B418!important}
@media (max-width:899px){
  .trust{grid-template-columns:1fr 1fr!important}
  .trust .ti{padding:12px 14px!important;white-space:normal}
  .trust .ti:nth-child(odd){border-left:0!important;padding-left:0!important}
  .trust .ti:nth-child(n+3){border-top:1px solid var(--line)!important}
  .trust .ti b,.trust .ti span{white-space:normal!important}
  .trust .ti b{font-size:14px!important}.trust .ti span{font-size:13px!important}
}

/* ===== the typed-word video hero on five backgrounds, /?v=45 to 49 (hb-19 to hb-23; body.hb3) ===== */
body.hb3{--hb-bg:#E4EED6;--hb-fg:var(--teal)}
body.hb3-teal{--hb-bg:#0F4C48;--hb-fg:#fff}
body.hb3-white{--hb-bg:#FFFFFF}
body.hb3-mint{--hb-bg:#DDE9E6}
body.hb3-deep{--hb-bg:#0A3A37;--hb-fg:#fff}
body.hb3 .hb-stage{height:auto;overflow:visible;background:#fff!important;padding:20px max(var(--gut),calc((100vw - 1440px) / 2 + var(--gut))) 16px}
body.hb3 .hb-frame{position:relative;inset:auto;border-radius:28px;background:var(--hb-bg)}
body.hb3-white .hb-frame{box-shadow:inset 0 0 0 1px var(--line)}
body.hb3 .hb-tint{background:var(--hb-bg);mix-blend-mode:darken}
/* dark backgrounds: the layer is black with white letters, multiplied over the video, then lightened to the colour */
body.hb3-teal .hb-mask2,body.hb3-deep .hb-mask2{background:#000;mix-blend-mode:multiply}
body.hb3-teal .hb-mask2 h1.hb-h,body.hb3-deep .hb-mask2 h1.hb-h,body.hb3-teal .hb-mask2 h1.hb-h *,body.hb3-deep .hb-mask2 h1.hb-h *{color:#fff!important}
body.hb3-teal .hb-tint,body.hb3-deep .hb-tint{mix-blend-mode:lighten}
body.hb3 .hb-start,body.hb3 .hb-start p{color:var(--hb-fg)}
body.hb3-teal .hb-start .btn,body.hb3-deep .hb-start .btn{background:var(--lime);color:var(--teal)}
body.hb3-teal .hb-start .btn.ghost,body.hb3-deep .hb-start .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
body.hb3 h1.hb-h .sm,body.hb3 h1.hb-h .tw{display:block;width:max-content}
body.hb3 .hb-mask2 h1.hb-h .sm{opacity:.999}
body.hb3 .trust{margin-top:16px!important}
@media (max-width:599px){
  body.hb3 .hb-stage{padding:12px var(--gut) 10px}
  body.hb3 .hb-frame{border-radius:20px}
  body.hb3 .trust{margin-top:10px!important}
  body.hb3 .trust .ti{padding:8px 10px!important}
  body.hb3 .trust .ti b{font-size:13px!important}body.hb3 .trust .ti span{font-size:13px!important}
}

/* ===== three stand-alone dog heroes, /?v=50 to 52 (hb-24 to hb-26; body.hb4): the signed-off words and a cut-out dog, no video ===== */
body.hb4 .hero-sec{padding-top:20px}
body.hb4 .hero-grid{height:auto!important;min-height:0!important}
body.hb4 .hero{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,42%);align-items:stretch;gap:0 24px;padding:0 0 0 56px!important;border-radius:28px;height:auto!important;min-height:440px!important;overflow:hidden}
body.hb4 .hero .copy{height:auto;max-width:600px;padding:52px 0;justify-content:center}
body.hb4 .hero h1{font-size:52px}
.hb4-art{position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:0}
.hb4-art img{display:block;width:auto;max-width:100%;max-height:440px;height:auto;object-fit:contain;object-position:bottom}
/* 24: pale green, teal words, the Labrador */
body.hb4-24 .hero{background:#E4EED6;color:var(--teal)}
body.hb4-24 .hero h1,body.hb4-24 .hero p,body.hb4-24 .hero .how{color:var(--teal)}
body.hb4-24 .hero .how{opacity:1}
body.hb4-24 .hero h1 .tw{color:var(--teal);box-shadow:inset 0 -.3em 0 var(--lime);padding:0 4px;margin-left:-4px}
body.hb4-24 .hero h1 .tw:empty{box-shadow:none;padding:0}
body.hb4-24 .hero h1 .tw:after{background:var(--teal)}
body.hb4-24 .hero .btn{background:var(--teal);color:#fff}
body.hb4-24 .hero .btn.ghost{background:transparent;color:var(--teal);border-color:var(--teal)}
/* 25: teal, the golden retriever on a lime panel that fills the right side */
body.hb4-25 .hb4-art{background:var(--lime);margin:16px 16px 16px 0;border-radius:20px;overflow:hidden}
body.hb4-25 .hb4-art img{max-height:420px}
/* 26: teal, the Labrador on a pale green arch */
body.hb4-26 .hb4-art:before{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(88%,380px);height:86%;border-radius:999px 999px 0 0;background:#E4EED6}
body.hb4-26 .hb4-art img{position:relative;max-height:400px}
@media (max-width:1023px){
  body.hb4 .hero{padding-left:36px!important;min-height:380px!important;padding-bottom:0!important}
  body.hb4 .hero h1{font-size:40px}
  body.hb4 .hero .copy{padding:36px 0}
}
@media (max-width:699px){
  body.hb4 .hero-sec{padding-top:12px}
  body.hb4 .hero{grid-template-columns:minmax(0,1fr);padding:26px 20px 0!important;border-radius:20px;min-height:0!important}
  body.hb4 .hero .copy{padding:0 0 18px}
  body.hb4 .hero h1{font-size:32px}
  body.hb4 .hero .how{display:none}
  .hb4-art{height:230px}
  .hb4-art img{max-height:230px}
  body.hb4-25 .hb4-art{margin:0 -8px 12px;height:220px}
  body.hb4-25 .hb4-art img{max-height:215px}
  body.hb4-26 .hb4-art:before{width:230px;height:88%}
}

/* ---- fixes after checking the eight (10 Oct 2026) ---- */
/* the letters in the white layer must be pure black (or pure white on the dark ones) or the video cannot show through; no caret in either copy */
body.hb3 .hb-mask2 h1.hb-h,body.hb3 .hb-mask2 h1.hb-h *{color:#000!important}
body.hb3-teal .hb-mask2 h1.hb-h,body.hb3-teal .hb-mask2 h1.hb-h *,body.hb3-deep .hb-mask2 h1.hb-h,body.hb3-deep .hb-mask2 h1.hb-h *{color:#fff!important}
body.hb2 h1.hb-h .tw:after{display:none!important}
/* the stand-alone dog heroes are panels in the page column, not full-bleed video stages */
body.hb4 .hero-grid{margin:0!important}
body.hb4 .hero{background:var(--teal)!important;color:#fff;max-height:none!important}
body.hb4-24 .hero{background:#E4EED6!important;color:var(--teal)}
@media (max-width:699px){
  body.hb4 .hb4-art img,body.hb4-26 .hb4-art img{max-height:225px!important;width:auto!important}
  body.hb4-25 .hb4-art img{max-height:210px!important}
  body.hb4 .hero{height:auto!important}
}

/* ===== the dog video on its own as the hero, /?v=53 to 55 (hb-27 to hb-29; body.hb5) ===== */
body.hb5 .hero-sec{padding-top:20px}
body.hb5 .hero-grid{margin:0!important;height:auto!important;min-height:0!important}
body.hb5 .hero{position:relative;display:block!important;height:auto!important;max-height:none!important;min-height:0!important;border-radius:28px;overflow:hidden;background:var(--teal)!important;color:#fff;padding:0!important}
.hb5-v video{display:block;width:100%;height:100%;object-fit:cover}
body.hb5 .hero .copy{position:relative;z-index:2;height:auto}
body.hb5 .hero h1{font-size:52px}
/* 27: the video fills the panel, the words sit over it bottom-left */
body.hb5-27 .hero{aspect-ratio:1500/640;min-height:440px!important;max-height:580px!important;display:flex!important;align-items:flex-end}
body.hb5-27 .hb5-v{position:absolute;inset:0}
body.hb5-27 .hb5-v:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,58,55,.82) 0%,rgba(10,58,55,.45) 42%,rgba(10,58,55,0) 70%)}
body.hb5-27 .hero .copy{padding:48px 56px;max-width:640px}
/* 28: the words on teal beside the video, which has its own rounded corners */
body.hb5-28 .hero{display:grid!important;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch;min-height:440px!important}
body.hb5-28 .hero .copy{grid-column:1;grid-row:1;padding:48px 32px 48px 56px;justify-content:center;max-width:none}
body.hb5-28 .hb5-v{grid-column:2;grid-row:1;margin:16px 16px 16px 0;border-radius:20px;overflow:hidden;min-height:0}
/* 29: the video fills the panel, the words sit on a pale card over it */
body.hb5-29 .hero{aspect-ratio:1500/640;min-height:460px!important;max-height:600px!important;display:flex!important;align-items:center}
body.hb5-29 .hb5-v{position:absolute;inset:0}
body.hb5-29 .hero .copy{margin:24px;padding:36px 40px;background:#E4EED6;border-radius:20px;max-width:540px;color:var(--teal)}
body.hb5-29 .hero h1{font-size:44px;color:var(--teal)}
body.hb5-29 .hero p,body.hb5-29 .hero .how{color:var(--teal)}
body.hb5-29 .hero .how{opacity:1}
body.hb5-29 .hero h1 .tw{color:var(--teal);box-shadow:inset 0 -.3em 0 var(--lime);padding:0 4px;margin-left:-4px}
body.hb5-29 .hero h1 .tw:empty{box-shadow:none;padding:0}
body.hb5-29 .hero h1 .tw:after{background:var(--teal)}
body.hb5-29 .hero .btn{background:var(--teal);color:#fff}
body.hb5-29 .hero .btn.ghost{background:transparent;color:var(--teal);border-color:var(--teal)}
@media (max-width:1023px){
  body.hb5 .hero h1{font-size:40px}
  body.hb5-27 .hero .copy{padding:36px}
  body.hb5-28 .hero .copy{padding:36px 24px 36px 36px}
}
@media (max-width:699px){
  body.hb5 .hero-sec{padding-top:12px}
  body.hb5 .hero{border-radius:20px;aspect-ratio:auto!important;max-height:none!important;min-height:0!important;display:flex!important;flex-direction:column;align-items:stretch}
  body.hb5 .hero h1{font-size:32px!important}
  body.hb5 .hero .how{display:none}
  body.hb5 .hb5-v{position:relative!important;inset:auto!important;order:-1;aspect-ratio:3/2;margin:0!important;border-radius:0!important;flex:none}
  body.hb5-27 .hb5-v:after{display:none}
  body.hb5 .hero .copy{padding:22px 20px 24px!important;margin:0!important;max-width:none!important;border-radius:0!important}
  body.hb5-28 .hb5-v{order:2;margin:0 12px 12px!important;border-radius:14px!important}
  body.hb5-29 .hero{background:#E4EED6!important}
}

/* ===== five takes on words over the video, /?v=56 to 60 (hb-30 to hb-34; body.hb5.hb6) ===== */
body.hb6 #trust{display:none!important}
body.hb6 .hero{display:flex!important;align-items:flex-end}
body.hb6 .hb5-v{position:absolute;inset:0}
body.hb6 .hb5-v:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,58,55,.84) 0%,rgba(10,58,55,.45) 42%,rgba(10,58,55,0) 70%)}
body.hb6 .hero .copy{padding:44px 52px;max-width:620px}
.tr2 .it{white-space:nowrap}
.tr2 .it b{font-weight:600}
.tr2 .it i{font-style:normal;opacity:.8}
.tr2 .stars{color:#F2B418!important;font-size:14px;margin-right:2px}
.tr2 .stars i.on:before,.tr2 .stars i.part:after{color:#F2B418!important}
.tr2 .dup{display:none}
@keyframes tr2go{to{transform:translateX(-50%)}}
/* 30: column width, short and wide; a pale bar underneath */
body.hb6-30 .hero{height:460px!important}
.tr2-bar{margin-top:12px;background:#E4EED6;border-radius:16px;padding:15px 24px;color:var(--teal);font:400 14.5px/1.3 var(--sans);overflow:hidden}
.tr2-bar .tr2-t{display:flex;justify-content:space-between;gap:28px}
/* 31: edge to edge and tall, words in the middle; a lime ticker underneath */
body.hb6-31 .hero-sec{padding-top:0}
body.hb6-31 .hero-grid{margin:0 calc(50% - 50vw)!important}
body.hb6-31 .hero{border-radius:0;height:min(68vh,620px)!important;min-height:480px!important;align-items:center;justify-content:center;text-align:center}
body.hb6-31 .hb5-v:after{background:rgba(10,58,55,.52)}
body.hb6-31 .hero .copy{max-width:780px;align-items:center;padding:40px 24px}
body.hb6-31 .hero h1{font-size:60px}
body.hb6-31 .hero .cta,body.hb6-31 .hero .how{justify-content:center}
.tr2-tick{margin:0 calc(50% - 50vw);background:var(--lime);color:var(--teal);font:500 15px/1 var(--sans);overflow:hidden;padding:14px 0}
.tr2-tick .tr2-t{display:flex;width:max-content;animation:tr2go 36s linear infinite}
.tr2-tick .tr2-t:hover{animation-play-state:paused}
.tr2-tick .it{padding:0 28px}
.tr2-tick .dup{display:flex}
.tr2-tick .stars i:before{color:rgba(15,76,72,.25)}
.tr2-tick .stars,.tr2-tick .stars i.on:before,.tr2-tick .stars i.part:after{color:var(--teal)!important}
/* 32: narrower and taller with a bigger radius; the trust points sit inside the video along the bottom */
body.hb6-32 .hero-grid{max-width:1180px;margin:0 auto!important}
body.hb6-32 .hero{height:560px!important;border-radius:36px}
body.hb6-32 .hero .copy{padding-bottom:96px}
.tr2-in{position:absolute;left:0;right:0;bottom:0;z-index:2;background:rgba(10,58,55,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font:400 14px/1.3 var(--sans);padding:16px 52px}
.tr2-in .tr2-t{display:flex;justify-content:space-between;gap:24px}
/* 33: the words on the right; a deep green band joined to the bottom of the video */
body.hb6-33 .hero{height:480px!important;border-radius:28px 28px 0 0;justify-content:flex-end}
body.hb6-33 .hb5-v:after{background:linear-gradient(270deg,rgba(10,58,55,.86) 0%,rgba(10,58,55,.5) 40%,rgba(10,58,55,0) 68%)}
body.hb6-33 .hb5-v video{transform:scaleX(-1)}
body.hb6-33 .hero .copy{max-width:580px}
.tr2-band{background:var(--deep);color:#fff;border-radius:0 0 28px 28px;padding:18px 52px;font:400 14.5px/1.3 var(--sans)}
.tr2-band .tr2-t{display:flex;justify-content:space-between;gap:24px}
/* 34: two thirds wide, with the trust points as a list in a pale panel beside it */
body.hero-one.hb6-34 .hero-grid{display:grid!important;grid-template-columns:minmax(0,68fr) minmax(0,32fr)!important;gap:16px}
body.hb6-34 .hero{height:500px!important}
body.hb6-34 .hero .copy{padding:40px 44px}
body.hb6-34 .hero h1{font-size:46px}
.tr2-list{background:#E4EED6;border-radius:28px;padding:12px 32px;color:var(--teal);display:flex;align-items:center}
.tr2-list .tr2-t{display:flex;flex-direction:column;width:100%}
.tr2-list .it{white-space:normal;display:flex;flex-direction:column;gap:3px;padding:20px 0;border-top:1px solid rgba(15,76,72,.16)}
.tr2-list .it:first-child{border-top:0}
.tr2-list .it b{font:700 21px/1.2 var(--serif)}
.tr2-list .it i{font:400 15px/1.4 var(--sans);opacity:1;color:var(--ink)}
.tr2-list .stars{display:flex;margin:0 0 4px;font-size:16px}
@media (max-width:1180px){
  .tr2-bar,.tr2-in,.tr2-band{font-size:13px}
  .tr2-bar .tr2-t,.tr2-in .tr2-t,.tr2-band .tr2-t{gap:16px}
  .tr2-bar .it i,.tr2-in .it i,.tr2-band .it i{display:block}
  .tr2-bar .it,.tr2-in .it,.tr2-band .it{white-space:normal}
}
@media (max-width:699px){
  /* phones: 30, 32 and 33 put the video on top and the words under it; 31 and 34 keep the words on the video */
  body.hb6 .hero{height:auto!important}
  body.hb6-30 .hb5-v:after,body.hb6-32 .hb5-v:after,body.hb6-33 .hb5-v:after{display:none}
  body.hb6-31 .hero,body.hb6-34 .hero{min-height:500px!important;justify-content:flex-end;align-items:stretch}
  body.hb6-31 .hb5-v,body.hb6-34 .hb5-v{position:absolute!important;inset:0!important;aspect-ratio:auto;order:0}
  body.hb6-31 .hb5-v:after,body.hb6-34 .hb5-v:after{background:linear-gradient(180deg,rgba(10,58,55,0) 22%,rgba(10,58,55,.9) 78%)}
  body.hb6-31 .hero .copy,body.hb6-34 .hero .copy{text-align:left;align-items:stretch}
  body.hb6-32 .hero{border-radius:24px}
  body.hb6-32 .hero-grid{max-width:none}
  body.hero-one.hb6-34 .hero-grid{grid-template-columns:minmax(0,1fr)!important;gap:10px}
  body.hb6-31 .hero h1{font-size:32px}
  /* the bar becomes a slow ticker; the others become a compact two by two */
  .tr2-bar{padding:12px 0;border-radius:12px;margin-top:10px}
  .tr2-bar .tr2-t{display:flex;width:max-content;justify-content:flex-start;gap:0;animation:tr2go 30s linear infinite}
  .tr2-bar .it,.tr2-tick .it{padding:0 18px;white-space:nowrap}
  .tr2-bar .it i{display:inline}
  .tr2-bar .dup{display:flex}
  .tr2-tick{font-size:14px;padding:12px 0}
  .tr2-in{position:static;padding:14px 20px;background:var(--deep);-webkit-backdrop-filter:none;backdrop-filter:none}
  .tr2-band{padding:14px 20px;border-radius:0 0 20px 20px}
  body.hb6-33 .hero{border-radius:20px 20px 0 0}
  .tr2-in .tr2-t,.tr2-band .tr2-t{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
  .tr2-list{border-radius:20px;padding:6px 20px}
  .tr2-list .it{padding:14px 0}.tr2-list .it b{font-size:18px}.tr2-list .it i{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.tr2 .tr2-t{animation:none!important}.tr2-tick,.tr2-bar{overflow-x:auto}}

/* ---- fixes after checking the five (10 Oct 2026) ---- */
/* the four points share the row evenly and may wrap, so the fourth is never cut off */
@media (min-width:700px){
  .tr2-bar .tr2-t,.tr2-in .tr2-t,.tr2-band .tr2-t{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;width:auto;animation:none}
  .tr2-bar .it,.tr2-in .it,.tr2-band .it{white-space:normal}
  .tr2-bar .it i,.tr2-in .it i,.tr2-band .it i{display:block}
  .tr2-bar .dup{display:none!important}
  .tr2-in{padding:14px 52px}
  body.hb6-32 .hero .copy{padding-bottom:110px}
}
/* 33: the panel grows with its words, and the buttons stay on one line */
body.hb6-33 .hero{height:auto!important;min-height:480px!important}
body.hb6-33 .hero .copy{max-width:640px}
body.hb6-33 .hero h1 .nb{white-space:nowrap}


/* ===== edge to edge, words bottom-left, lighter overlay, /?v=61 to 63 (hb-35 to hb-37; body.hb7) ===== */
body.hb7 .hero-sec{padding-top:0}
body.hb7 .hero-grid{margin:0 calc(50% - 50vw)!important}
body.hb7 .hero{border-radius:0!important;height:min(66vh,600px)!important;min-height:470px!important;align-items:flex-end}
body.hb7 .hb5-v:after{background:linear-gradient(90deg,rgba(10,58,55,.6) 0%,rgba(10,58,55,.3) 38%,rgba(10,58,55,0) 62%)}
body.hb7 .hero .copy{padding:44px max(var(--gut),calc((100vw - 1440px) / 2 + var(--gut)));max-width:none;width:100%}
body.hb7 .hero .copy > *{max-width:600px}
body.hb7 .hero h1,body.hb7 .hero p{text-shadow:0 1px 14px rgba(10,58,55,.35)}
body.hb7 .tr2{margin:0 calc(50% - 50vw);border-radius:0}
body.hb7 .tr2 .tr2-t{max-width:1440px;margin:0 auto}
body.hb7 .tr2-in,body.hb7 .tr2-band,body.hb7 .tr2-row{padding-left:max(var(--gut),calc((100vw - 1440px) / 2 + var(--gut)));padding-right:max(var(--gut),calc((100vw - 1440px) / 2 + var(--gut)))}
body.hb7 .tr2-in{margin:0;background:rgba(10,58,55,.5)}
body.hb7 .tr2-in .tr2-t,body.hb7 .tr2-band .tr2-t,body.hb7 .tr2-row .tr2-t{max-width:none}
body.hb-35 .hero .copy{padding-bottom:104px}
body.hb7 .tr2-band{background:var(--teal)}
.tr2-row{background:#fff;color:var(--teal);font:400 14.5px/1.35 var(--sans);padding-top:18px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.tr2-row .tr2-t{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.tr2-row .it{white-space:normal;padding-left:16px;border-left:3px solid var(--lime)}
.tr2-row .it b{display:block;font:700 17px/1.25 var(--serif)}
.tr2-row .it i{display:block;color:var(--ink);opacity:1}
.tr2-row .stars{display:inline-flex;vertical-align:-1px}
@media (max-width:699px){
  body.hb7 .hero{min-height:500px!important;height:auto!important;justify-content:flex-end;align-items:stretch}
  body.hb7 .hb5-v{position:absolute!important;inset:0!important;aspect-ratio:auto;order:0}
  body.hb7 .hb5-v:after{display:block;background:linear-gradient(180deg,rgba(10,58,55,0) 30%,rgba(10,58,55,.72) 80%)}
  body.hb-35 .hero .copy{padding-bottom:24px!important}
  .tr2-row .tr2-t{grid-template-columns:1fr 1fr;gap:14px 12px}
  .tr2-row .it{padding-left:10px}.tr2-row .it b{font-size:15px}.tr2-row .it i{font-size:13px}
}


/* ===== /?v=64 (hb-38; body.hb8): the video hero fills the screen under the menu, two-line headline, no lead ===== */
body.hb8 .hero{height:var(--hh,600px)!important;min-height:400px!important;max-height:none!important}
body.hb8 .hero .copy p,body.hb8 .hero .how{display:none!important}
body.hb8 .hero .copy{padding-bottom:112px}
body.hb8 .hero .copy > *{max-width:none}
body.hb8 .hero h1{font:400 clamp(24px,2.7vw,42px)/1.15 var(--serif)!important;margin:0 0 28px!important}
body.hb8 .hero h1 .l1{display:block;white-space:nowrap}
body.hb8 .hero h1 .tw{display:block!important;white-space:nowrap;font-weight:700;font-size:2em;line-height:1.05;color:var(--lime);min-height:1.05em!important}
body.hb8 .hero .cta{margin:0}
body.hb8 .hb5-v video{object-position:62% center}
@media (max-width:699px){
  body.hb8 .hero{min-height:400px!important;display:flex!important;flex-direction:column;justify-content:flex-end;align-items:stretch}
  body.hb8 .hb5-v:after{background:linear-gradient(180deg,rgba(10,58,55,0) 38%,rgba(10,58,55,.78) 74%)!important}
  body.hb8 .hero .copy{padding:0 20px 18px!important;width:auto;flex:none}
  body.hb8 .hero h1{font-size:4.6vw!important;margin-bottom:18px!important}
  body.hb8 .hero h1 .tw{font-size:2.45em}
  body.hb8 .hero .cta{display:flex;flex-direction:column;gap:8px}
  body.hb8 .hero .cta .btn{width:100%;min-height:50px}
  body.hb8 .tr2-in{position:relative;z-index:2;background:var(--teal)!important;padding:14px 20px 16px!important;font-size:12.5px;line-height:1.3}
  body.hb8 .tr2-in .tr2-t{gap:10px 14px}
  body.hb8 .tr2-in .it i{display:block}
}


/* ===== /?v=65 to 69 (hb-39 to hb-43; body.hb9): full width, not full screen; five new takes on the four points ===== */
body.hb9 .hero{height:clamp(380px,calc(100vh - 380px),540px)!important;min-height:380px!important}
body.hb9 .hero .copy{padding-bottom:40px}
body.hb9 .tr2 .stars{vertical-align:-2px}
/* 39: a slim teal marquee */
.tr2-mq{background:var(--teal);color:#fff;overflow:hidden;padding:15px 0;font:500 15px/1 var(--sans)}
body.hb9 .tr2-mq .tr2-t{display:flex;width:max-content;max-width:none;margin:0;animation:tr2go 60s linear infinite}
.tr2-mq .tr2-t:hover{animation-play-state:paused}
.tr2-mq .it{position:relative;padding:0 30px}
.tr2-mq .it:after{content:"";position:absolute;right:-4px;top:50%;width:7px;height:7px;margin-top:-3px;border-radius:50%;background:var(--lime)}
/* 40: one sentence, set in the serif, on white */
.tr2-say{background:#fff;border-bottom:1px solid var(--line);padding:22px var(--gut);text-align:center}
.tr2-say p{margin:0 auto;max-width:1180px;font:400 20px/1.5 var(--serif);color:var(--teal)}
.tr2-say .r{white-space:nowrap}
/* 41: a quiet list over the video, bottom right */
.tr2-side{position:absolute;z-index:2;right:max(var(--gut),calc((100vw - 1440px) / 2 + var(--gut)));bottom:40px;color:#fff;text-align:right;font:500 15px/1.3 var(--sans);text-shadow:0 1px 12px rgba(10,58,55,.6)}
body.hb9 .tr2-side{margin:0}
.tr2-side .tr2-t{display:flex;flex-direction:column;gap:9px}
/* 42: a lime band, four serif lines */
.tr2-lime{background:var(--lime);color:var(--teal);padding:18px max(var(--gut),calc((100vw - 1440px) / 2 + var(--gut)))}
body.hb9 .tr2-lime .tr2-t{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:none}
.tr2-lime .it{white-space:normal;padding:2px 22px;border-left:1px solid rgba(15,76,72,.28);font:700 17px/1.3 var(--serif)}
.tr2-lime .it:first-child{border-left:0;padding-left:0}
.tr2-lime .it b{font-weight:700}
.tr2-lime .stars,.tr2-lime .stars i.on:before,.tr2-lime .stars i.part:after{color:var(--teal)!important}
.tr2-lime .stars i:before{color:rgba(15,76,72,.25)}
/* 43: worked into the hero: the rating above the headline, the rest as one line under the buttons */
.hb9-eye{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px;font:500 15px/1.3 var(--sans);text-shadow:0 1px 12px rgba(10,58,55,.5)}
.hb9-eye .stars{color:#F2B418}.hb9-eye .stars i.on:before,.hb9-eye .stars i.part:after{color:#F2B418}
.hb9-eye b{font-weight:700}
.hb9-line{margin:20px 0 0;font:500 14.5px/1.6 var(--sans);text-shadow:0 1px 12px rgba(10,58,55,.5)}
.hb9-line i{font-style:normal;opacity:.55;margin:0 8px}
@media (max-width:699px){
  body.hb9 .hero{height:auto!important;min-height:min(64vh,500px)!important}
  body.hb9 .hero .copy{padding:20px 20px 22px!important}
  .tr2-mq{font-size:14px;padding:13px 0}.tr2-mq .it{padding:0 22px}
  .tr2-say{padding:18px 20px}.tr2-say p{font-size:16.5px;line-height:1.45}
  .tr2-side{position:relative;right:auto;bottom:auto;text-align:left;padding:0 20px 22px;font-size:13.5px}
  .tr2-side .tr2-t{gap:6px}
  .tr2-lime{padding:16px 20px}
  body.hb9 .tr2-lime .tr2-t{grid-template-columns:1fr 1fr;gap:12px 16px}
  .tr2-lime .it{border:0;padding:0;font-size:15px}
  .hb9-eye{font-size:13.5px;margin-bottom:10px}
  .hb9-line{font-size:13px;margin-top:14px}.hb9-line i{margin:0 5px}
}

/* the Judge.me mark beside the rating (logo supplied by Joe, 10 Oct 2026) */
img.jm{display:inline-block;width:20px;height:20px;border-radius:4px;vertical-align:-4px;margin-right:4px}
.tr2-lime img.jm,.tr2-say img.jm{vertical-align:-3px}


/* ===== /?v=70 (hb-44): after tractive.com. the video's bottom corners are rounded; one simple centred line under it ===== */
body.hb9-tp .hero{border-radius:0 0 28px 28px!important}
.tr2-tp{background:#fff;padding:22px var(--gut) 6px;color:var(--ink);font:500 15px/1.2 var(--sans)}
body.hb9 .tr2-tp .tr2-t{display:flex;justify-content:center;align-items:center;gap:14px 64px;flex-wrap:wrap}
.tr2-tp .it{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;white-space:nowrap}
.tr2-tp .nm{font:700 18px/1 var(--sans);color:var(--ink)}
.tr2-tp img.jm{width:24px;height:24px;margin:0;vertical-align:0}
.tr2-tp .stars{font-size:20px;gap:2px;margin:0 2px}
@media (max-width:699px){
  body.hb9-tp .hero{border-radius:0 0 20px 20px!important}
  .tr2-tp{padding:16px 20px 2px;font-size:13.5px}
  body.hb9 .tr2-tp .tr2-t{flex-direction:column;gap:10px}
  .tr2-tp .nm{font-size:16px}.tr2-tp .stars{font-size:17px}
  .tr2-tp .it{gap:8px}
}
@media (max-width:699px){
  .tr2-tp .it{white-space:normal;flex-wrap:wrap;justify-content:center;text-align:center;gap:4px 8px;max-width:100%}
  .tr2-tp .it > span:last-child{flex-basis:100%}
  body.hb9 .tr2-tp .tr2-t{gap:14px}
}

/* the small line under the headline on /?v=70 */
body.hb9-tp .hero h1{margin-bottom:14px!important}
.hb9-sub{font:400 19px/1.45 var(--sans);color:#fff;max-width:46ch!important;margin:0 0 24px;text-shadow:0 1px 14px rgba(10,58,55,.45)}
@media (max-width:699px){body.hb9-tp .hero h1{margin-bottom:10px!important}.hb9-sub{font-size:15.5px;line-height:1.4;margin-bottom:16px}}

/* /?v=70: a taller video, less cropped */
body.hb9-tp .hero{height:clamp(440px,calc(100vh - 310px),640px)!important}
@media (max-width:699px){body.hb9-tp .hero{height:auto!important;min-height:min(70vh,560px)!important}}

/* /?v=70 and 71 on phones (Joe, 10 Oct 2026): smaller text, buttons side by side, Judge.me on one line, no delivery line */
@media (max-width:699px){
  body.hb9-tp .hero h1{font-size:4.2vw!important}
  body.hb9-tp .hero h1 .tw{font-size:2.15em}
  body.hb9-tp .hb9-sub{font-size:14px;line-height:1.4;margin-bottom:14px}
  body.hb9-tp .hero .cta{flex-direction:row!important;gap:8px}
  body.hb9-tp .hero .cta .btn{flex:1 1 0;width:auto!important;min-width:0;min-height:46px;padding:0 6px!important;font-size:14px;white-space:nowrap}
  body.hb9-tp .hero .cta .btn .lg{display:none}
  body.hb9-tp .tr2-tp .it + .it{display:none}
  body.hb9-tp .tr2-tp .it{flex-wrap:nowrap!important;white-space:nowrap!important;gap:6px}
  body.hb9-tp .tr2-tp .it > span:last-child{flex-basis:auto!important}
  body.hb9-tp .tr2-tp{font-size:13px;padding:14px 12px 0}
  body.hb9-tp .tr2-tp .nm{font-size:15px}
  body.hb9-tp .tr2-tp .stars{font-size:15px;gap:1px;margin:0}
  body.hb9-tp .tr2-tp img.jm{width:20px;height:20px}
}

/* /?v=70 and 71: square video edges; on phones the words are centred and the small line is the short one */
body.hb9-tp .hero{border-radius:0!important}
.hb9-sub .m{display:none}
@media (max-width:699px){
  body.hb9-tp .hero .copy{text-align:center;align-items:center}
  body.hb9-tp .hero h1{width:100%}
  body.hb9-tp .hb9-sub{margin-left:auto;margin-right:auto}
  .hb9-sub .d{display:none}.hb9-sub .m{display:inline}
  body.hb9-tp .hero .cta{width:100%}
}
/* the phone search bar: slimmer, and a soft field on the teal header that turns white when you tap into it (site-wide) */
@media (max-width:899px){
  .msearch .wrap{padding:0 16px 10px}
  .msearch .search form{height:38px!important;border-radius:10px;background:rgba(255,255,255,.13)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);transition:background .15s}
  .msearch .search input{height:38px!important;background:transparent!important;color:#fff;font-size:16px!important;padding:0 10px}
  .msearch .search input::placeholder{color:rgba(255,255,255,.8)}
  .msearch .search .mag,.msearch .search .sbtn{color:#fff!important;background:transparent!important}
  .msearch .search .sbtn{width:38px;height:38px}
  .msearch .search form:focus-within{background:#fff!important;box-shadow:none}
  .msearch .search form:focus-within input{color:var(--ink)}
  .msearch .search form:focus-within input::placeholder{color:var(--mute)}
  .msearch .search form:focus-within .mag,.msearch .search form:focus-within .sbtn{color:var(--teal)!important}
}

/* phones and tablets: the search bar under the header is gone; search lives at the top of the menu */
@media (max-width:1023px){.msearch{display:none!important}}
.dsearch{display:flex;gap:8px;padding:16px 20px 16px 24px;border-bottom:1px solid var(--line);background:#fff}
.dsearch input{flex:1 1 0;min-width:0;height:48px;padding:0 14px;border:1px solid var(--line2,#C9D5D1);border-radius:var(--r);font:400 16px/1.2 var(--sans);color:var(--ink);background:#fff}
.dsearch input:focus{outline:none;border-color:var(--teal)}
.dsearch .btn{flex:0 0 auto;min-height:48px;padding:0 18px;background:var(--teal);color:#fff}
/* /?v=70 and 71 on phones: slightly larger words */
@media (max-width:699px){
  body.hb9-tp .hero h1{font-size:4.9vw!important}
  body.hb9-tp .hero h1 .tw{font-size:2.2em}
  body.hb9-tp .hb9-sub{font-size:15.5px}
}


/* ===== product page on phones, tidied (Joe, 10 Oct 2026) ===== */
@media (max-width:599px){
  /* the option buttons: an even two-column grid, lighter borders */
  .n2-vals{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .n2-val{min-height:50px;min-width:0;padding:6px 8px;border-width:1px;border-radius:10px;font:600 14px/1.2 var(--sans);gap:3px;text-align:center}
  .n2-val span{overflow-wrap:anywhere}
  .n2-val small{font-size:12.5px}
  .n2-val[aria-checked="true"]{box-shadow:0 0 0 1px var(--teal)}
  .n2-ol{font-size:14px;margin-bottom:8px}
  /* the rating, then the real-dog thumbnails straight under it */
  .n2-meta{flex-direction:column;align-items:flex-start;gap:2px}
  .n2-meta .n2-dogline{min-height:40px;font-size:14px;gap:10px;margin:0}
}

/* ===== three phone product-card designs for collection pages: ?v=2 (cv-a), ?v=3 (cv-b), ?v=4 (cv-c) ===== */
@media (max-width:599px){
  /* A: two up, no boxes. the picture on a soft tile, a slim outline button */
  body.cv-a .cl-grid{gap:22px 12px}
  body.cv-a .cl-grid .pk{border:0;border-radius:0;background:none;overflow:visible}
  body.cv-a .cl-grid .pk .well{height:168px!important;padding:16px!important;border:0;border-radius:14px;background:#F3F6F1!important}
  body.cv-a .cl-grid .pk .well img{mix-blend-mode:multiply}
  body.cv-a .cl-grid .pk .tabs,body.cv-a .cl-grid .pk > .tab{top:8px;left:8px}
  body.cv-a .cl-grid .pk .tab{font-size:11px;padding:5px 7px}
  body.cv-a .cl-grid .pk .body{padding:10px 2px 0!important}
  body.cv-a .cl-grid .pk .brand{font-size:12px}
  body.cv-a .cl-grid .pk .name{font:700 15px/20px var(--serif)!important;height:40px;min-height:40px}
  body.cv-a .cl-grid .pk .line,body.cv-a .cl-grid .pk .helps{display:none!important}
  body.cv-a .cl-grid .pk .rev{margin-top:6px}
  body.cv-a .cl-grid .pk .price{margin-top:6px!important;height:24px}
  body.cv-a .cl-grid .pk .price .now{font:700 17px/24px var(--sans)}
  body.cv-a .cl-grid .pk .btn{min-height:38px!important;font-size:14px;background:#fff;color:var(--teal);box-shadow:inset 0 0 0 1.5px var(--teal);margin-top:10px!important}
  /* B: a list. picture left, words right, price and a small button on one line */
  body.cv-b .cl-grid{grid-template-columns:minmax(0,1fr)!important;gap:0}
  body.cv-b .cl-grid .pk{display:grid;grid-template-columns:108px minmax(0,1fr);column-gap:14px;align-items:start;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:14px 0;overflow:visible}
  body.cv-b .cl-grid .pk .well{height:108px!important;padding:8px!important;border:0;border-radius:12px;background:#F3F6F1!important}
  body.cv-b .cl-grid .pk .well img{mix-blend-mode:multiply}
  body.cv-b .cl-grid .pk .tabs,body.cv-b .cl-grid .pk > .tab{top:20px;left:6px;max-width:96px}
  body.cv-b .cl-grid .pk .tab{font-size:11px;padding:4px 6px}
  body.cv-b .cl-grid .pk .body,body.cv-c .cl-grid .pk .body{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:0!important}
  body.cv-b .cl-grid .pk .body > *,body.cv-c .cl-grid .pk .body > *{grid-column:1/-1}
  body.cv-b .cl-grid .pk .name{height:auto;min-height:0;font:700 16px/21px var(--serif)!important}
  body.cv-b .cl-grid .pk .line,body.cv-b .cl-grid .pk .helps{display:none!important}
  body.cv-b .cl-grid .pk .rev{margin-top:4px}
  body.cv-b .cl-grid .pk .body > .price,body.cv-c .cl-grid .pk .body > .price{grid-column:1;margin-top:8px!important}
  body.cv-b .cl-grid .pk .body > .btn,body.cv-c .cl-grid .pk .body > .btn{grid-column:2;width:auto;margin-top:8px!important}
  body.cv-b .cl-grid .pk .btn{min-height:38px!important;padding:0 14px;font-size:14px}
  body.cv-b .cl-grid .pk .price .now{font-size:18px}
  /* C: one big card per row. a wide picture, a larger name, price beside the button */
  body.cv-c .cl-grid{grid-template-columns:minmax(0,1fr)!important;gap:14px}
  body.cv-c .cl-grid .pk{border-radius:18px}
  body.cv-c .cl-grid .pk .well{height:200px!important;background:#F3F6F1!important;border:0}
  body.cv-c .cl-grid .pk .well img{mix-blend-mode:multiply}
  body.cv-c .cl-grid .pk .body{padding:14px 16px 16px!important}
  body.cv-c .cl-grid .pk .name{height:auto;min-height:0;font:700 19px/24px var(--serif)!important;-webkit-line-clamp:2}
  body.cv-c .cl-grid .pk .btn{min-height:46px!important;padding:0 20px}
  body.cv-c .cl-grid .pk .price .now{font-size:22px}
}

/* D (?v=5), after the Pets at Home listing: one product per row, a tall picture tile on the left half, the words, price and a full-width button on the right */
@media (max-width:599px){
  body.cv-d .cl-grid{grid-template-columns:minmax(0,1fr)!important;gap:18px}
  body.cv-d .cl-grid .pk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:0;border-radius:0;background:none;overflow:visible}
  body.cv-d .cl-grid .pk .well{height:auto!important;min-height:260px;padding:20px 14px!important;border:0;border-radius:12px;background:#F5F7F2!important}
  body.cv-d .cl-grid .pk .well img{mix-blend-mode:multiply}
  body.cv-d .cl-grid .pk .tabs,body.cv-d .cl-grid .pk > .tab{top:0;left:0;max-width:48%}
  body.cv-d .cl-grid .pk .tab{border-radius:12px 0 8px 0;font-size:12px;padding:7px 9px}
  body.cv-d .cl-grid .pk .body{padding:14px 0 0 14px!important}
  body.cv-d .cl-grid .pk .brand{font:700 15px/20px var(--sans);color:var(--ink);height:20px}
  body.cv-d .cl-grid .pk .name{height:auto;min-height:0;margin-top:2px;font:400 16px/22px var(--sans)!important;-webkit-line-clamp:3}
  body.cv-d .cl-grid .pk .line,body.cv-d .cl-grid .pk .helps{white-space:normal;height:auto;font-size:13px}
  body.cv-d .cl-grid .pk .price{margin-top:auto!important;padding-top:12px;height:auto}
  body.cv-d .cl-grid .pk .price .now{font:700 24px/28px var(--sans)}
  body.cv-d .cl-grid .pk .btn{min-height:48px!important;margin-top:10px!important;font-size:15px}
}

/* the View switch on phone collection pages: one or two per row */
.cl-view{display:none}
@media (max-width:599px){
  .cl-view{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font:500 14px/1 var(--sans);color:var(--mute)}
  .cl-view span{margin-right:2px}
  .cl-view button{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;gap:3px;border:1px solid var(--line2,#C9D5D1);border-radius:8px;background:#fff;padding:0;cursor:pointer}
  .cl-view button i{display:block;width:16px;height:18px;border-radius:3px;background:var(--mute)}
  .cl-view button i + i,.cl-view button[data-v="2"] i{width:8px}
  .cl-view button[aria-pressed="true"]{border-color:var(--teal);background:var(--teal)}
  .cl-view button[aria-pressed="true"] i{background:#fff}
}
/* two per row: the same lime button as one per row (Joe, 10 Oct 2026) */
@media (max-width:599px){body.cv-a .cl-grid .pk .btn{background:var(--lime)!important;color:var(--teal)!important;box-shadow:none!important;min-height:42px!important}}

/* the View switch sits on the Filter and sort row */
@media (max-width:599px){
  .cl-tools .cl-tr{display:flex;align-items:center;gap:8px}
  .cl-tools .cl-tr .cl-sort{min-width:0}
  .cl-tools .cl-tr .cl-sort select{min-width:0}
  .cl-tools .cl-fbtn{padding:0 14px}
  .cl-view{margin-left:0;flex:0 0 auto;gap:6px}
  .cl-view span{display:none}
  .cl-view button{width:44px;height:44px}
}

/* the logo image in place of the wordmark lozenge */
.wm{border:0!important;padding:0!important;border-radius:0!important;background:none!important}
.wm img{display:block;height:46px;width:auto}
.mhdr .wm img{height:34px}
.fbase .wm img{height:40px}
.drawer .wm img,.dhead .wm img{height:30px}


/* ===== 10 Oct 2026, late: Joe's sign-off round ===== */
/* the logo, a little bigger */
.wm img{height:56px}
.mhdr .wm img{height:40px}
.fbase .wm img{height:50px}
/* footer: the rating on one line with the Judge.me mark */
.fjm{flex-direction:row!important;align-items:center!important;flex-wrap:nowrap;white-space:nowrap;gap:8px!important;font-size:14px!important}
.fjm img.jm{width:22px;height:22px;margin:0;vertical-align:0;flex:none}
@media (max-width:599px){
  /* footer: "Worried about your dog? Ask us." on one line */
  .fask h3{font-size:5.4vw!important;white-space:nowrap}
  /* "Where to start with ..." on phones: three plain rows, then price and button on one line */
  .ed3 .sell{padding:16px!important;gap:8px!important}
  .ed3 .sell h4{font-size:21px!important}
  .ed3 .sell .lead{display:none!important}
  .ed3 .ki{grid-template-columns:44px minmax(0,1fr)!important;gap:10px!important;padding:8px 10px!important;align-items:center!important;border-radius:10px}
  .ed3 .ki .img{width:44px!important;height:44px!important}
  .ed3 .ki .w{display:none!important}
  .ed3 .ki .k{font-size:12px!important;margin-bottom:2px}
  .ed3 .ki .n{display:-webkit-box!important;-webkit-line-clamp:1!important;-webkit-box-orient:vertical;overflow:hidden!important;font-size:14.5px!important}
  .ed3 .buy{display:flex!important;align-items:center;gap:10px;padding:10px 12px 10px 14px!important;border-radius:12px}
  .ed3 .buy .k{font-size:13px!important}
  .ed3 .buy .p{margin-right:auto;font-size:22px!important;line-height:1!important}
  .ed3 .buy .btn{width:auto!important;min-height:44px!important;padding:0 16px!important;margin:0!important;flex:none}
  /* the Club block on phones: one pale panel, the card, the headline, three figures in a row, two buttons */
  .club{background:#E4EED6!important;border:0!important}
  .club .cardside{background:transparent!important;padding:22px 18px 0!important;order:-1}
  .club .card{max-width:230px!important}
  .club .say{padding:16px 16px 22px!important;text-align:center;align-items:center}
  .club .say h3{font-size:25px!important;line-height:1.2}
  .club .say h3 .chip{margin-top:6px;padding:3px 10px 6px}
  .club .say .lead,.club .say .extras{display:none!important}
  .clubB1 .rules{flex-direction:row!important;width:100%;margin:14px 0 16px!important;border-top:1px solid rgba(15,76,72,.16);border-bottom:1px solid rgba(15,76,72,.16)}
  .clubB1 .rule{display:flex!important;flex:1 1 0;min-width:0;flex-direction:column!important;align-items:center!important;gap:4px!important;padding:12px 6px!important;border:0!important;border-left:1px solid rgba(15,76,72,.16)!important}
  .clubB1 .rule:first-child{border-left:0!important}
  .clubB1 .rule b{font-size:19px!important;width:auto!important;min-width:0!important;white-space:nowrap}
  .clubB1 .rule span{display:block;width:auto!important;max-width:none!important;font-size:13px!important;line-height:1.3!important;text-align:center}
  .club .say .row{display:flex;gap:8px;width:100%}
  .club .say .row .btn{flex:1 1 0;min-height:46px}
}

/* footer column headings (Shop, Advice, Help, Account, Company, Rated by owners) and their plus signs: white, not lime (Joe, 10 Oct) */
.fcol .fh,.fcol h4,.fcol .fh:after{color:#fff!important}

/* phone menu, simple version (Joe, 10 Oct): one search field, five shop rows, one short list of plain links */
.dtop .tb[data-open="basket"]{display:none}
.dsearch{padding:14px 20px!important;border-bottom:0!important;position:relative}
.dsearch input{height:46px!important;padding-right:84px!important;background:var(--mist,#F3F6F1)!important;border-color:transparent!important}
.dsearch input:focus{border-color:var(--teal)!important;background:#fff!important}
.dsearch .btn{position:absolute;right:24px;top:18px;min-height:38px!important;height:38px;padding:0 14px!important;font-size:14px}
.dlist{border-right:0!important}
#dp0 .dr{height:58px;padding:0 20px;font-size:17px}
#dp0 .dlist .dr:last-child{border-bottom:0}
.dmini{margin:12px 20px 28px;padding-top:14px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
.dmini .dm{min-height:44px;padding:0;font:400 15px/1.25 var(--sans);color:var(--ink);background:transparent}
.dmini .dm:hover{background:transparent;color:var(--teal);text-decoration:underline}

/* Shop by condition / symptom on phones: the list inside an area was too long (Joe, 11 Oct).
   Compact rows: small picture, the name on one or two lines, no description. "Can be urgent" stays, small, at the right. */
@media (max-width:639px){
  .c3-conds,.sy-syms{gap:8px!important}
  .c3-cond,.sy-sym{align-items:center!important;min-height:64px;border-radius:12px!important}
  .c3-cond .c3-ph,.sy-sym .sy-ph{flex:0 0 64px!important;min-height:64px!important;height:64px;align-self:stretch}
  .c3-cond .c3-cb,.sy-sym .sy-cb{flex:1 1 0;min-width:0;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:10px;padding:8px 14px 8px 12px!important}
  .c3-cond .c3-cn,.sy-sym .sy-cn{font-size:16px!important;line-height:1.25}
  .c3-cond .c3-ci,.sy-sym .sy-ci{display:none!important}
  .c3-cond .c3-tag{flex:none;margin:0!important;font-size:13px;padding:3px 8px;white-space:nowrap}
}

/* page not found, phones: department links as tidy two-column rows (Joe, 11 Oct) */
@media (max-width:639px){
  .nf-depts{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .nf-depts a{position:relative;min-height:54px!important;padding:8px 26px 8px 12px!important;background:#fff!important;border:1px solid var(--line);border-radius:12px!important;font:600 15px/1.25 var(--sans)!important;color:var(--ink)!important;text-wrap:pretty!important}
  .nf-depts a:after{content:"\203A";position:absolute;right:10px;top:50%;transform:translateY(-52%);font-size:20px;line-height:1;color:var(--teal)}
}

/* Delivery page on phones (Joe, 11 Oct): the four facts as a two-by-two block; the squeezed table goes, its facts are the same four */
@media (max-width:639px){
  .dl-rules{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important;margin-top:16px;border:0!important}
  .dl-rules .rule{display:flex!important;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 14px!important;border:0!important;border-radius:12px;background:rgba(255,255,255,.08)}
  .dl-rules .rule b{font-size:22px!important;line-height:1.1;min-width:0!important;width:auto!important}
  .dl-rules .rule span{font-size:14px!important;line-height:1.35;text-align:left}
  .dl-tbl{display:none!important}
  .dl-card.dl-col{border:0!important;padding:0!important;background:transparent!important;box-shadow:none!important}
  .dl-card.dl-col .dl-note{margin:0!important;font-size:15px!important;line-height:1.5}
  .dl-sec .sec-h h2{font-size:26px!important}
  .dl-qa .q{font-size:17px!important}
}

/* account page on the store: nothing shows until the real account has loaded; Club parts wait for a Club app */
.ac-wait .ac{visibility:hidden}
.ac-noclub [data-ac-go="club"],.ac-noclub [data-ac-go="vouchers"],.ac-noclub [data-ac-go="refer"],
.ac-noclub .ac-ov1>.ac-teal,.ac-noclub [data-ac-panel="club"],.ac-noclub [data-ac-panel="vouchers"],.ac-noclub [data-ac-panel="refer"]{display:none!important}
.ac-noclub .ac-menu li:has(>[data-ac-go="club"]),.ac-noclub .ac-menu li:has(>[data-ac-go="vouchers"]),.ac-noclub .ac-menu li:has(>[data-ac-go="refer"]){display:none}
.ac-noclub .ac-hello p{display:none}

/* ===== Poorly Pet Club page: three redesigns (body.clb-1, clb-2, clb-3; src/club-variants.js) ===== */
.k{color:var(--ink)}
.k h1{font:400 48px/1.08 var(--serif);margin:0 0 12px;color:inherit}.k h1 em,.k h2 em{font-style:normal;color:var(--lime)}
.k h2{font:700 30px/1.15 var(--serif);margin:0 0 6px;color:var(--teal)}.k .k-sec:not(.k-teal) h2 em{color:var(--teal);background:linear-gradient(transparent 62%,var(--lime) 62%)}
.k .k-sub{margin:0 0 18px;color:var(--mute);font-size:16px}
.k-sec{padding:44px 0}.k-pale{background:#E4EED6}.k-teal{background:var(--teal);color:#fff}.k-teal h2{color:#fff}
.k-hero{background:var(--teal);color:#fff;padding:44px 0 48px}
.k-hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center}
.k-hero p{font-size:18px;line-height:1.5;margin:0 0 22px;color:rgba(255,255,255,.9);max-width:520px}
.k-eye{font:600 14px/1 var(--sans)!important;letter-spacing:.06em;text-transform:uppercase;color:var(--lime)!important;margin:0 0 12px!important}
.k-btns{display:flex;gap:10px;flex-wrap:wrap}.k-btns .btn{min-height:50px;padding:0 26px}
.k-hero .btn.ghost,.k-b1 .btn.ghost{background:transparent;border:2px solid rgba(255,255,255,.75);color:#fff}
.k-card{width:100%;max-width:420px;aspect-ratio:1.586;border-radius:18px;background-size:cover;background-position:center;justify-self:end;box-shadow:0 18px 40px rgba(0,0,0,.28)}
.k-steps{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.k-steps li{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px 22px 24px;display:flex;flex-direction:column;gap:6px}
.k-n{font:700 44px/1 var(--serif);color:var(--teal);margin-bottom:8px}.k-steps b{font:700 20px/1.25 var(--serif);color:var(--teal)}.k-steps span:last-child{font-size:15px;line-height:1.5;color:var(--mute)}
.k-extra{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.k-extra>div{background:#fff;border-radius:16px;padding:20px 22px}.k-extra b{display:block;font:700 24px/1.15 var(--serif);color:var(--teal)}.k-extra span{display:block;margin-top:4px;font-size:15px;color:var(--ink)}
.k-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.k-tier{border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;background:#fff}
.k-tier:last-child{background:var(--teal);border-color:var(--teal);color:#fff}.k-tier:last-child b,.k-tier:last-child .k-tn{color:var(--lime)}.k-tier:last-child .k-tw{color:rgba(255,255,255,.85)}
.k-tn{font:600 15px/1 var(--sans);color:var(--teal);margin-bottom:12px}.k-tier b{font:700 56px/1 var(--serif);color:var(--teal)}.k-tp{font-size:15px;margin-top:4px}.k-tw{margin-top:14px;padding-top:12px;border-top:1px solid rgba(15,76,72,.16);font-size:14px;color:var(--mute)}
.k-tier:last-child .k-tw{border-top-color:rgba(255,255,255,.25)}
.k-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.k-vals{list-style:none;margin:14px 0 0;padding:0;font-size:18px;line-height:1.3}.k-vals li{padding:10px 0;border-top:1px solid rgba(255,255,255,.2)}.k-pale .k-vals li{border-top-color:rgba(15,76,72,.16)}
.k-vals b{font:700 30px/1 var(--serif);color:var(--lime);margin-right:6px}.k-pale .k-vals b{color:var(--teal)}
.k-calc{background:#fff;color:var(--ink);border-radius:18px;padding:24px;box-shadow:0 12px 30px rgba(0,0,0,.14)}
.k-calc h3{font:700 22px/1.2 var(--serif);color:var(--teal);margin:0 0 14px}
.k-cf{display:grid;grid-template-columns:1fr 1fr;gap:12px}.k-cf label{display:block;font:600 14px/1 var(--sans);margin-bottom:6px;color:var(--ink)}
.k-money{display:flex;align-items:center;border:1px solid #C9D5D1;border-radius:10px;height:48px;padding:0 12px;background:#fff}.k-money:before{content:"£";font-weight:600;margin-right:4px}
.k-money input{border:0;outline:0;width:100%;font:600 17px/1 var(--sans);color:var(--ink);background:transparent}
.k-calc select{width:100%;height:48px;border:1px solid #C9D5D1;border-radius:10px;padding:0 12px;font:600 16px/1 var(--sans);color:var(--ink);background:#fff}
.k-out{margin:16px 0 0;padding:14px 16px;border-radius:12px;background:#E4EED6;font-size:16px;line-height:1.35;color:var(--ink)}.k-out b{font:700 30px/1 var(--serif);color:var(--teal)}
.k-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.k-strip>div{padding:22px;border-left:1px solid var(--line)}.k-strip>div:first-child{border-left:0}
.k-strip b{display:block;font:700 52px/1 var(--serif);color:var(--teal)}.k-strip span{display:block;margin-top:8px;font-size:15px;line-height:1.4}
.k-track{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:relative}
.k-track:before{content:"";position:absolute;left:9px;right:33%;top:9px;height:3px;background:var(--teal)}
.k-track li{position:relative;padding:32px 20px 0 0;display:flex;flex-direction:column;gap:3px}
.k-dot{position:absolute;left:0;top:0;width:21px;height:21px;border-radius:50%;background:var(--lime);border:3px solid var(--teal)}
.k-track b{font:700 22px/1.2 var(--serif);color:var(--teal)}.k-track span{font-size:15px;color:var(--mute)}.k-track strong{margin-top:6px;font:600 16px/1.3 var(--sans);color:var(--ink)}
.k2 .k-hero .k-calc{justify-self:end;width:100%;max-width:440px}.k2 .k-two .k-card{box-shadow:none}
.k-first{padding-top:28px}
.k-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.k-b{border-radius:20px;padding:26px;background:#fff;border:1px solid var(--line)}
.k-b h2{font-size:24px;margin-bottom:10px}
.k-b1{grid-column:span 4;background:var(--teal);border-color:var(--teal);color:#fff;display:flex;flex-direction:column;justify-content:center;padding:40px}
.k-b1 p{font-size:18px;margin:0 0 22px;color:rgba(255,255,255,.9)}
.k-b2{grid-column:span 2;background:#E4EED6;border-color:#E4EED6;display:flex;align-items:center;justify-content:center}.k-b2 .k-card{box-shadow:none;justify-self:auto}
.k-b3,.k-b4,.k-b5{grid-column:span 2}.k-b4{background:#E4EED6;border-color:#E4EED6}
.k-b6{grid-column:1 / -1;background:var(--teal);border-color:var(--teal);padding:20px}.k-b6 .k-calc{box-shadow:none;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center}
.k-b6 .k-calc h3{margin:0}.k-b6 .k-out{margin:0}
.k-rows{list-style:none;margin:0;padding:0}.k-rows li{padding:11px 0;border-top:1px solid rgba(15,76,72,.14);display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline}
.k-rows li:first-child{border-top:0;padding-top:2px}.k-rows b{font:700 19px/1.2 var(--serif);color:var(--teal)}.k-rows span{font-size:15px;color:var(--ink)}.k-rows strong{margin-left:auto;font:600 15px/1 var(--sans);color:var(--teal)}
.k-b .k-sub{margin:10px 0 0;font-size:14px}
@media (max-width:899px){
  .k h1{font-size:36px}.k h2{font-size:26px}.k-sec{padding:32px 0}
  .k-hero{padding:28px 0 32px;text-align:center}.k-hero .wrap,.k-two{grid-template-columns:1fr;gap:24px}
  .k-hero p{margin-left:auto;margin-right:auto;font-size:16px}.k-btns{justify-content:center}.k-btns .btn{flex:1 1 0;padding:0 12px}
  .k-card{justify-self:center;max-width:300px}.k2 .k-hero .k-calc{justify-self:center;text-align:left}
  .k-steps,.k-extra,.k-tiers{grid-template-columns:1fr;gap:10px}
  .k-steps li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:2px 12px;padding:16px}.k-n{grid-row:span 2;font-size:36px;margin:0}.k-steps b{font-size:18px}
  .k-extra>div{padding:14px 16px;display:flex;flex-direction:column}.k-extra b{font-size:21px}
  .k-tier{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 14px;align-items:center;padding:16px}.k-tier b{grid-row:span 2;font-size:44px}.k-tn{margin:0}.k-tp{margin:0}.k-tw{grid-column:1 / -1;margin-top:10px;padding-top:10px}
  .k-strip{grid-template-columns:1fr 1fr}.k-strip>div{padding:16px;border-left:0;border-top:1px solid var(--line)}.k-strip>div:nth-child(-n+2){border-top:0}.k-strip>div:nth-child(even){border-left:1px solid var(--line)}.k-strip b{font-size:38px}.k-strip span{font-size:14px}
  .k-track{grid-template-columns:1fr;gap:18px}.k-track:before{left:9px;right:auto;top:9px;bottom:40px;width:3px;height:auto}.k-track li{padding:0 0 0 36px}
  .k-bento{grid-template-columns:1fr;gap:10px}.k-b,.k-b1,.k-b2,.k-b3,.k-b4,.k-b5,.k-b6{grid-column:auto;padding:20px}.k-b1{text-align:center;padding:28px 20px}.k-b2{padding:18px}
  .k-b6{padding:12px}.k-b6 .k-calc{grid-template-columns:1fr;gap:12px}
  .k-calc{padding:18px}.k-vals{font-size:16px}.k-vals b{font-size:26px}
}
.k .k-calc .k-out{color:var(--ink)!important;font-size:16px!important;margin:16px 0 0!important;max-width:none!important}
.k-b6 .k-calc .k-out{margin:0!important}
@media (max-width:899px){
  .k-tier{grid-template-columns:64px minmax(0,1fr)!important}
  .k-tier b{grid-column:1;grid-row:1 / span 2}.k-tier .k-tn,.k-tier .k-tp{grid-column:2}.k-tier .k-tn{align-self:end;margin-bottom:2px}.k-tier .k-tp{align-self:start}
}

/* ===== Poorly Pet Club page, round 2 (body.clb-1..3, .q*; src/club-variants.js) ===== */
.q{color:var(--ink)}
.q h1{font:400 56px/1.05 var(--serif);margin:0 0 14px;color:inherit;text-wrap:balance}.q h1 em{font-style:normal;color:var(--lime)}
.q h2{font:700 28px/1.2 var(--serif);margin:0 0 16px;color:var(--teal);text-wrap:balance}.q h2.q-c{text-align:center;margin-bottom:26px}
.q-eye{font:600 14px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;margin:0 0 14px;color:var(--lime)}
.q-lead{font-size:19px;line-height:1.5;margin:0 0 24px;max-width:520px}
.q-btns{display:flex;gap:10px;flex-wrap:wrap}.q-btns .btn{min-height:52px;padding:0 28px;font-size:16px}
.q-note,.q-small{font-size:14px;color:var(--mute);margin:14px 0 0}
.q-sec{padding:56px 0}.q-pale{background:#E4EED6}.q-teal{background:var(--teal);color:#fff}.q-teal h2{color:#fff}.q-teal .q-note{color:rgba(255,255,255,.8)}
.q-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
/* earn list: big figures, thin rules, no boxes */
.q-earn{list-style:none;margin:0;padding:0}.q-earn li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:baseline;padding:14px 0;border-top:1px solid rgba(15,76,72,.18)}
.q-earn li:last-child{border-bottom:1px solid rgba(15,76,72,.18)}.q-earn b{font:700 40px/1 var(--serif);color:var(--teal)}.q-earn span{font-size:17px;line-height:1.4}
.q-earn4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}.q-earn4 li{display:block;padding:0 24px;border:0!important;border-left:1px solid rgba(15,76,72,.18)!important;text-align:center}
.q-earn4 li:first-child{border-left:0!important}.q-earn4 b{display:block;font-size:64px;margin-bottom:10px}.q-earn4 span{font-size:16px}
/* tiers as a plain row */
.q-tiers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.q-tiers li{border-top:3px solid var(--teal);padding-top:14px;display:flex;flex-direction:column}
.q-tiers b{font:700 56px/1 var(--serif);color:var(--teal)}.q-pp{font-size:14px;color:var(--mute);margin:2px 0 14px}.q-tiers strong{font:600 17px/1.2 var(--sans)}.q-tiers li span:last-child{font-size:15px;color:var(--mute);margin-top:2px}
/* the calculator as a sentence */
.q-say p{font:400 30px/1.6 var(--serif);margin:0;color:var(--teal);max-width:760px}.q-teal .q-say p{color:#fff}
.q-say b{color:inherit;font-weight:700;background:linear-gradient(transparent 60%,var(--lime) 60%)}.q-teal .q-say b{background:none;color:var(--lime)}
.q-in{display:inline-flex;align-items:baseline;border-bottom:3px solid currentColor;padding:0 2px}.q-in i{font-style:normal}
.q-say input,.q-say select{font:inherit;color:inherit;background:transparent;border:0;outline:0;padding:0}
.q-say input{width:3.4ch;-moz-appearance:textfield}.q-say input::-webkit-outer-spin-button,.q-say input::-webkit-inner-spin-button{-webkit-appearance:none}
.q-say select{border-bottom:3px solid currentColor;padding-right:4px;cursor:pointer}.q-say select option{color:#0E2A28;font:400 16px Figtree,Arial,sans-serif}
.q-say input:focus,.q-say select:focus{background:rgba(223,227,58,.35)}
#q-val{display:block;font:400 19px/1.4 var(--sans);margin-top:10px;color:var(--ink)}.q-teal #q-val{color:rgba(255,255,255,.9)}
/* 1: film */
.q-film{position:relative;height:clamp(440px,calc(100vh - 300px),620px);overflow:hidden;background:#0B3936;color:#fff;display:flex;align-items:flex-end}
.q-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.q-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,33,31,.72) 0%,rgba(6,33,31,.35) 48%,rgba(6,33,31,0) 75%),linear-gradient(0deg,rgba(6,33,31,.5),rgba(6,33,31,0) 45%)}
.q-film .wrap{position:relative;width:100%;padding-bottom:48px}.q-film h1{max-width:640px}.q-film .btn.ghost,.q-split .btn.ghost{background:transparent;border:2px solid rgba(255,255,255,.8);color:#fff}
.q-facts{border-bottom:1px solid var(--line);background:#fff}.q-facts .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.q-facts .wrap>div{padding:26px 28px;border-left:1px solid var(--line)}.q-facts .wrap>div:first-child{border-left:0;padding-left:0}
.q-facts b{display:block;font:700 30px/1.1 var(--serif);color:var(--teal)}.q-facts span{display:block;margin-top:4px;font-size:16px}
/* 2: treat */
.q-treat{background:#E4EED6;overflow:hidden}.q-treat .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:end;min-height:520px}
.q-tt{align-self:center;padding:48px 0}.q-treat h1{color:var(--teal)}.q-treat h1 em{color:var(--teal);background:linear-gradient(transparent 62%,var(--lime) 62%)}.q-treat .q-eye{color:var(--teal)}
.q-treat .btn.ghost{background:transparent;border:2px solid var(--teal);color:var(--teal)}
.q-art{position:relative;height:100%;min-height:480px}.q-card{position:absolute;left:0;top:14%;width:66%;aspect-ratio:1.586;border-radius:20px;background-size:cover;background-position:center;transform:rotate(-7deg);box-shadow:0 22px 44px rgba(11,57,54,.28)}
.q-dog{position:absolute;right:-2%;bottom:0;height:92%;width:auto;max-width:none}
.q-bars{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:end}
.q-bars li{display:flex;flex-direction:column}.q-bar{height:calc(170px * var(--h) / 100%);min-height:60px;height:calc(1.7px * (var(--h) / 1%));background:var(--lime);border-radius:10px 10px 0 0;display:flex;align-items:flex-start;justify-content:center;padding-top:10px;margin-bottom:12px}
.q-bar b{font:700 40px/1 var(--serif);color:var(--deep)}.q-bars strong{font:600 17px/1.2 var(--sans)}.q-bars li>span:last-child{font-size:14px;color:rgba(255,255,255,.8);margin-top:2px}
/* 3: split */
.q-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:clamp(420px,calc(100vh - 320px),600px)}
.q-sl{background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:flex-end}.q-si{width:100%;max-width:640px;padding:48px 56px 48px 24px}.q-split .q-small{color:rgba(255,255,255,.8)}
.q-sr{background-size:cover;background-position:center 30%}
.q-run{list-style:none;margin:0 auto;padding:0;max-width:900px}.q-run li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:24px;align-items:start;padding:30px 0;border-top:1px solid rgba(15,76,72,.18)}
.q-run li:first-child{border-top:0;padding-top:0}.q-no{font:700 96px/.85 var(--serif);color:var(--lime);-webkit-text-stroke:2px var(--teal)}
.q-run h2{font-size:34px;margin:0 0 8px}.q-run p{margin:0;font-size:18px;line-height:1.5;max-width:620px}
@media (max-width:899px){
  .q h1{font-size:38px}.q h2{font-size:24px}.q-sec{padding:36px 0}.q-lead{font-size:17px;margin-bottom:20px}
  .q-cols{grid-template-columns:1fr;gap:36px}.q-btns .btn{flex:1 1 0;padding:0 12px;min-height:50px}
  .q-film{height:clamp(440px,calc(100vh - 230px),560px);text-align:center}.q-film .wrap{padding-bottom:28px}.q-film h1,.q-film .q-lead{margin-left:auto;margin-right:auto}
  .q-shade{background:linear-gradient(0deg,rgba(6,33,31,.82) 0%,rgba(6,33,31,.45) 45%,rgba(6,33,31,0) 75%)}
  .q-facts .wrap{grid-template-columns:1fr}.q-facts .wrap>div{padding:14px 0;border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:baseline}.q-facts .wrap>div:first-child{border-top:0}
  .q-facts b{font-size:22px}.q-facts span{margin:0;font-size:15px}
  .q-earn li{grid-template-columns:72px minmax(0,1fr);gap:12px;padding:12px 0}.q-earn b{font-size:32px}.q-earn span{font-size:16px}
  .q-earn4{grid-template-columns:1fr 1fr;row-gap:24px}.q-earn4 li{padding:0 12px}.q-earn4 li:nth-child(odd){border-left:0!important}.q-earn4 b{font-size:46px;margin-bottom:6px}.q-earn4 span{font-size:15px}
  .q-tiers{gap:12px}.q-tiers b{font-size:40px}.q-pp{font-size:13px;margin-bottom:10px}.q-tiers strong{font-size:15px}.q-tiers li span:last-child{font-size:13px}
  .q-say p{font-size:23px;line-height:1.7}#q-val{font-size:17px}
  .q-treat .wrap{grid-template-columns:1fr;gap:0;min-height:0;text-align:center}.q-tt{padding:32px 0 8px}.q-treat .q-lead{margin-left:auto;margin-right:auto}
  .q-art{min-height:0;height:300px}.q-card{left:4%;top:16%;width:58%}.q-dog{right:-6%;height:100%}
  .q-bar{height:calc(1.2px * (var(--h) / 1%))}.q-bar b{font-size:30px}.q-bars strong{font-size:15px}.q-bars li>span:last-child{font-size:13px}
  .q-split{grid-template-columns:1fr;min-height:0}.q-sr{order:-1;height:240px}.q-sl{justify-content:center;text-align:center}.q-si{padding:28px 16px 32px;max-width:none}.q-split .q-lead{margin-left:auto;margin-right:auto}
  .q-run li{grid-template-columns:64px minmax(0,1fr);gap:14px;padding:22px 0}.q-no{font-size:60px;-webkit-text-stroke:1.5px var(--teal)}.q-run h2{font-size:24px}.q-run p{font-size:16px}
}
.q-bar{height:calc(var(--h) * 1.7px)!important;min-height:0!important}
@media (max-width:899px){.q-bar{height:calc(var(--h) * 1.2px)!important}.q-film video{object-position:68% 50%}}
/* Club version 3 content, plain (Joe: the numbered steps and calculator read as AI) */
.q-real{padding:44px 0 36px}.q-real .cl-sub{font:700 28px/1.2 var(--serif);color:var(--teal);margin:0 0 18px}
.q-plain{list-style:none;margin:0;padding:0}.q-plain li{padding:14px 0;border-top:1px solid rgba(15,76,72,.18)}.q-plain li:last-child{border-bottom:1px solid rgba(15,76,72,.18)}
.q-plain b{display:block;font:700 20px/1.25 var(--serif);color:var(--teal)}.q-plain span{display:block;margin-top:3px;font-size:16px;line-height:1.45;color:var(--ink)}
.q3 .q-facts .wrap>div{padding-top:30px;padding-bottom:30px}
@media (max-width:899px){.q-real{padding:28px 0 20px}.q-real .cl-sub{font-size:24px}.q-plain b{font-size:18px}.q-plain span{font-size:15px}}
.q-real .helps{font-weight:600;color:var(--teal)}
.q-real .line{font-weight:600;color:var(--teal)}

/* Club round 3: the treat picture on three hero colours */
.q-t-teal{background:var(--teal)!important;color:#fff}.q-t-teal h1{color:#fff!important}.q-t-teal h1 em{color:var(--lime)!important;background:none!important}.q-t-teal .q-eye{color:var(--lime)!important}
.q-t-teal .btn.ghost{border-color:rgba(255,255,255,.8)!important;color:#fff!important}.q-t-teal .q-card{box-shadow:0 22px 44px rgba(0,0,0,.4)}
.q-t-lime{background:var(--lime)!important;color:var(--deep)}.q-t-lime h1{color:var(--deep)!important}.q-t-lime h1 em{color:var(--deep)!important;background:linear-gradient(transparent 64%,#fff 64%)!important}.q-t-lime .q-eye{color:var(--deep)!important}
.q-t-lime .q-btns .btn:not(.ghost){background:var(--teal);color:#fff}.q-t-lime .btn.ghost{border-color:var(--deep)!important;color:var(--deep)!important}
.q-t-white{background:#fff!important}.q-t-white .wrap{align-items:center!important;padding-top:28px;padding-bottom:28px}.q-t-white h1{color:var(--teal)!important}.q-t-white h1 em{color:var(--teal)!important;background:linear-gradient(transparent 62%,var(--lime) 62%)!important}
.q-block{background:var(--teal);border-radius:28px;overflow:hidden;height:460px;position:relative}.q-block .q-art{position:absolute;inset:0;min-height:0}.q-block .q-card{left:6%;top:16%;width:60%}
.q-f-lime{background:var(--lime)!important;border:0!important}.q-f-lime .wrap>div{border-left-color:rgba(11,57,54,.25)!important}.q-f-lime b{color:var(--deep)!important;font-size:34px}.q-f-lime span{color:var(--deep)}
.q-line{background:var(--teal);color:#fff;padding:44px 0;text-align:center}.q-line p{margin:0 auto;max-width:900px;font:400 34px/1.3 var(--serif);text-wrap:balance}.q-line em{font-style:normal;color:var(--lime)}
.q-tab .wrap{max-width:860px}.q-dl{margin:0;border-top:2px solid var(--teal)}.q-dl>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid rgba(15,76,72,.18)}
.q-dl dt{font-size:17px;color:var(--ink)}.q-dl dd{margin:0;font:700 20px/1.25 var(--serif);color:var(--teal);text-align:right}
@media (max-width:899px){
  .q-t-white .wrap{padding-top:0;padding-bottom:20px}.q-block{height:300px;border-radius:20px;margin-top:8px}
  .q-f-lime .wrap>div{border-top-color:rgba(11,57,54,.25)!important}.q-f-lime b{font-size:22px}
  .q-line{padding:32px 0}.q-line p{font-size:24px}
  .q-dl dt{font-size:15px}.q-dl dd{font-size:17px}
}

/* ===== homepage: "What can you see?" poster row (src/home-posters.js), in the place of the Club section ===== */
.pst-sec{padding:8px 0 0}
.pst-sec .sec-r{display:flex;align-items:center;gap:16px}
.pst-arr{display:flex;gap:8px}.pst-b{width:44px;height:44px;border-radius:12px;border:1px solid var(--line,#E3E8E6);background:#fff;color:var(--teal);font:400 26px/1 var(--sans);cursor:pointer}.pst-b:hover{background:var(--mist,#F2F4F3)}
.pst-row{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px max(16px,calc((100vw - 1328px) / 2 + 24px)) 8px;scroll-padding-left:max(16px,calc((100vw - 1328px) / 2 + 24px))}
.pst-row::-webkit-scrollbar{display:none}
.pst{position:relative;flex:0 0 280px;aspect-ratio:1/1.08;border-radius:26px;overflow:hidden;background:#F4EFE6;scroll-snap-align:start;display:block}
.pst.dk{background:var(--teal)}
.pst-w{position:absolute;left:0;right:0;top:9%;text-align:center;font:700 66px/.9 Fredoka,var(--sans);letter-spacing:.01em;font-kerning:none;color:var(--teal)}
.pst.dk .pst-w{color:#F4EFE6}
.pst img{position:absolute;left:10%;right:10%;bottom:0;width:80%;height:72%;object-fit:contain;object-position:center bottom;transition:transform .25s}
.pst:hover img{transform:translateY(-5px)}
.pst-l{position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);background:var(--teal);color:#fff;font:600 13px/1.25 var(--sans);padding:7px 11px;border-radius:12px}
.pst.dk .pst-l{background:#F4EFE6;color:var(--teal)}
@media (max-width:899px){.pst{flex-basis:220px;border-radius:22px}.pst-w{font-size:52px}.pst-arr{display:none}}
@media (max-width:599px){.pst{flex-basis:62%}.pst-w{font-size:48px}}
/* points hidden for now (src/club-off.js) */
.club-off #club-btn,.club-off #n2-club,.club-off .n2-rpts,.club-off #topic-club{display:none!important}
/* footer rating: one line on phones (signed off), but it may wrap in the narrow desktop column instead of running off the page */
@media (min-width:760px){.fjm{white-space:normal!important;flex-wrap:wrap!important;row-gap:4px!important}}
/* poster rows, round 2: two rows, drifting (src/home-posters.js) */
.pst-row{padding:4px 0 8px!important;scroll-snap-type:none!important;cursor:grab;-webkit-user-select:none;user-select:none}
.pst-row.drag{cursor:grabbing}.pst-row.drag .pst{pointer-events:none}
.pst-track{display:flex;gap:14px;width:max-content}
.pst{flex:0 0 280px!important}
.pst-w{font-size:calc(66px * var(--k,1))!important;white-space:nowrap}
#pst-shop{padding-top:0}
@media (max-width:899px){.pst{flex-basis:220px!important}.pst-w{font-size:calc(52px * var(--k,1))!important}}
@media (max-width:599px){.pst{flex-basis:230px!important}.pst-w{font-size:calc(50px * var(--k,1))!important}}
#pst-shop{padding-top:20px!important}
@media (max-width:899px){#pst-shop{padding-top:28px!important}}
.club-off #club-sec{display:none!important}

/* symptom and condition focus, "Where to start": the three product pictures on white, and a readable "All three" (Joe, 19 Oct) */
.sell .ki .img{background:#fff!important;border:1px solid var(--line,#E3E8E6)}
.sell .buy .k,.sell .kbar .k,.sell [class*="buy"] .k{color:rgba(255,255,255,.85)!important}

/* phone product page (Joe, 19 Oct): reviews line and real-dog photos both start at the left; the delivery meter takes
   the full width now the points perk is hidden; no white gap between Key features and Real dogs */
@media (max-width:899px){
  .n2-meta{align-items:flex-start!important;gap:10px!important}
  .n2-dogline{justify-content:flex-start!important;margin:0!important}
}
.club-off .n2-perks{grid-template-columns:1fr!important}
.club-off .n2-meter{width:100%}
@media (max-width:899px){.pb-feats + .n2-dogs{margin-top:0!important}.pb-feats{margin-bottom:0!important}}   /* phones only: on desktop the green card keeps its gap */

/* no reviews yet: say nothing (Joe, 20 Oct), no "Write the first one" */
.n2-rate0{display:none!important}
/* Judge.me's block that carries its review pop-up: out of sight, the pop-up itself is added to the page body */
.pp-jdgm{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}

/* Judge.me's write-a-review pop-up, in Poorly Pet's fonts and colours */
.jdgm-write-review-modal,.jdgm-write-review-modal *{font-family:Figtree,Arial,sans-serif!important}
.jdgm-write-review-modal h1,.jdgm-write-review-modal h2,.jdgm-write-review-modal h3,.jdgm-write-review-modal [class*="__title"]{font-family:Domine,Georgia,serif!important;color:#0F4C48!important;font-weight:700!important}
.jdgm-write-review-modal .jdgm-star{color:#F2B418!important}
.jdgm-write-review-modal textarea,.jdgm-write-review-modal input[type=text],.jdgm-write-review-modal input[type=email],.jdgm-write-review-modal input[type=url]{border:1px solid #C6D0CE!important;border-radius:12px!important;font-size:16px!important;color:#0E2A28!important}
.jdgm-write-review-modal textarea:focus,.jdgm-write-review-modal input:focus{border-color:#0F4C48!important;outline:none!important}
.jdgm-write-review-modal [class*="__nav"],.jdgm-write-review-modal [class*="nav-bar"],.jdgm-write-review-modal [class*="__footer"]{background:transparent!important}
.jdgm-write-review-modal button[class*="next"],.jdgm-write-review-modal button[class*="submit"],.jdgm-write-review-modal .jdgm-write-review-modal__btn--primary{background:#DFE43A!important;color:#0A3A37!important;border-radius:12px!important;font-weight:600!important;border:0!important}
.jdgm-write-review-modal button[class*="back"]{background:#fff!important;color:#0F4C48!important;border:2px solid #0F4C48!important;border-radius:12px!important;font-weight:600!important}
.jdgm-write-review-modal a{color:#0F4C48!important}
/* every button in the review pop-up is visible (the thank-you "Close" was white on white), and the X shows on every screen */
.jdgm-write-review-modal .jdgm-write-review-modal__nav-btn{background:#DFE43A!important;color:#0A3A37!important;border:0!important;border-radius:12px!important;font-weight:600!important;opacity:1!important}
.jdgm-write-review-modal .jdgm-write-review-modal__nav-btn[class*="back"]{background:#fff!important;color:#0F4C48!important;border:2px solid #0F4C48!important}
.jdgm-write-review-modal .jdgm-write-review-modal__nav-btn:disabled{opacity:.5!important}
.jdgm-write-review-modal .jdgm-write-review-modal__close-btn{display:block!important;visibility:visible!important;opacity:1!important;color:#0F4C48!important;z-index:5}
.nl-err{margin:8px 0 0;font-size:14px;color:#B3261E;font-weight:600;flex-basis:100%}

/* Basket drawer redesign (Joe, 21 Oct 2026): plain rows, a short list of extras, one totals block pinned to the bottom. */
#basket .sdb{padding:0 20px;gap:0}
#basket-lines{padding-top:2px}
#basket .bl{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 12px;padding:14px 0;border-bottom:1px solid var(--line);align-items:start}
#basket .bl:last-child{border-bottom:0}
#basket .bl img{width:56px;height:56px;padding:4px;border:0;background:var(--pale);border-radius:8px}
#basket .bl .bi{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:8px;align-items:start}
#basket .bl .bq{display:contents}
#basket .bl .bb{display:none}
#basket .bl .bt{grid-column:1;grid-row:1;font-size:15px;line-height:1.3;font-weight:500}
#basket .bl .bp{grid-column:2;grid-row:1;margin:0;font-size:15px;font-weight:600;text-align:right;white-space:nowrap}
#basket .bl .bv{grid-column:1/-1;font-size:13px;color:var(--mute)}
#basket .bl .q{grid-column:1;justify-self:start;border-radius:8px}
#basket .bl .q button{width:32px;height:32px;font-size:18px}
#basket .bl .q span{min-width:28px;font-size:15px}
#basket .bl .rm{grid-column:2;justify-self:end;align-self:center;padding:0;font-size:13px}
#basket .bwith{margin-top:6px;padding-top:14px;border-top:1px solid var(--line)}
#basket .bwith h4{font:600 15px/1.2 var(--sans);margin:0 0 4px}
#basket .gw{display:flex;flex-direction:column;gap:0}
#basket .gwi{display:grid;grid-template-columns:44px minmax(0,1fr) auto;column-gap:12px;row-gap:0;align-items:center;border:0;border-radius:0;padding:8px 0;border-bottom:1px solid var(--line)}
#basket .gwi:last-child{border-bottom:0}
#basket .gwi img{grid-row:1/3;width:44px;height:44px;aspect-ratio:auto;padding:3px;background:var(--pale);border-radius:8px}
#basket .gwi .gt{grid-column:2;grid-row:1;height:auto;-webkit-line-clamp:1;font-size:14px;line-height:1.35}
#basket .gwi .gp{grid-column:2;grid-row:2;font-size:13px;font-weight:500;color:var(--mute)}
#basket .gwi .btn{grid-column:3;grid-row:1/3;margin:0;min-height:34px;height:34px;padding:0 16px;font-size:14px}
#basket-sum{position:sticky;bottom:0;margin:auto -20px 0;padding:0 20px;background:#fff;z-index:2;border-top:1px solid var(--line);box-shadow:0 -8px 16px rgba(10,58,55,.05)}
#basket .bsum{display:flex;flex-direction:column;border:0;margin:0;padding:12px 0 calc(14px + env(safe-area-inset-bottom))}
#basket .bsum .rw{font-size:14px;font-weight:400;color:var(--mute);padding:2px 0}
#basket .bsum .rw:nth-of-type(1){order:1}
#basket .bsum .rw:nth-of-type(2){order:2}
#basket .bsum .rw:nth-of-type(3){order:3;margin-top:6px;padding-top:8px;border-top:1px solid var(--line);font-size:18px;font-weight:700;color:var(--ink)}
#basket .bsum .free{order:5;font-size:13px;line-height:1.4;color:var(--mute);margin:6px 0 0}
#basket .bsum .free.bcode{order:4}
#basket .bsum .btn.wide{order:6;margin-top:12px;min-height:48px}
#basket .bsum .bview{order:7;display:block;text-align:center;margin-top:10px;font-size:14px}
@media (max-width:599px){
  #basket .sdh{height:56px}
  #basket .gwi:nth-child(n+2){display:none}
  #basket .bsum .rw:nth-of-type(1){display:none}
  #basket .bsum{padding-top:10px}
}

/* Collection pages, phones: the page numbers did not fit one row. Show Previous, "Page 3 of 12", Next instead. */
.cl-pof{display:none}
@media (max-width:599px){
  .cl-pag .cl-pgn{width:100%;justify-content:space-between;gap:10px}
  .cl-pag .cl-pgn ol{display:none}
  .cl-pag .cl-pof{display:block;flex:1;text-align:center;font:600 15px/1.2 var(--sans);color:var(--ink)}
  .cl-pag .cl-pgn .cl-pp{min-width:110px;height:48px;padding:0 14px;font-size:15px}
  .cl-pag .cl-pgn .cl-pp span{display:inline}
}

/* Cart page, delivery and returns facts: labels in one column, values lined up beside them, the two links on one tidy line. */
.ct-facts li{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;align-items:baseline;justify-content:initial;padding:6px 0;font-size:15px;line-height:1.4;color:var(--ink)}
.ct-facts li b{font-weight:600}
.ct-facts li:last-child{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}
.ct-facts li:last-child a{white-space:nowrap;font-size:14px;text-decoration:underline;text-underline-offset:3px}
/* Danish Design photos: lift the pale lilac studio backdrop to white on cards, search, basket */
img[src*="/files/dd-"],
img[src*="/files/0d200162b62a"],
img[src*="/files/199ce8ca62f5"],
img[src*="/files/249b869f19a5"],
img[src*="/files/2b5ffe3a01d9"],
img[src*="/files/3461c17392fb"],
img[src*="/files/43c230712b3e"],
img[src*="/files/628fb06d9619"],
img[src*="/files/64dea8a9eb40"],
img[src*="/files/68421aa37e11"],
img[src*="/files/6c518fa47518"],
img[src*="/files/884760f57c7b"],
img[src*="/files/94caa43ddf33"],
img[src*="/files/a16b8d7783b6"],
img[src*="/files/af6285050b13"],
img[src*="/files/b6d28bdef1ac"],
img[src*="/files/c7893f575c68"],
img[src*="/files/ffc2ea4b2c0f"],
img[src*="/files/8c79f61ca4b2"]{
  filter:brightness(1.05);
}
.n2-gal img{filter:none}