@font-face{font-family:"Outfit";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/outfit-700.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-weight:500 800;font-style:normal;font-display:swap;src:url("../fonts/manrope.woff2") format("woff2")}
/* ==========================================================================
   Pawdforward — design system (audit pass)
   Palette from the brief: Forest #0E2F24 · Leaf #5B8E5A · Sage #A7C488 · Light #F4F6F1 · Charcoal #1E1E1E
   One spacing scale (--s1…--s10) drives every gap, padding and section rhythm. Content max 1200.
   Mobile first. Every animation has a static end state (.no-js / .reduce).
   ========================================================================== */

:root{
  --forest:#0E2F24; --forest-2:#153B2D; --forest-3:#1C4A39;
  --leaf:#5B8E5A; --leaf-2:#4F7F4E;
  --sage:#A7C488; --sage-2:#C7DBB0; --sage-3:#E3EDD6;
  --light:#F4F6F1; --cream:#FBFBF7;
  --kraft:#C8A97E; --kraft-2:#E5D4B6; --kraft-3:#F2E8D6;
  --ink:#1E1E1E; --ink-2:#3A463F; --muted:#67746C;
  --line:rgba(14,47,36,.12); --line-2:rgba(14,47,36,.2);

  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --sec:clamp(var(--s8),8vw,var(--s10));      /* section block padding */
  --sec-sm:clamp(var(--s7),6vw,var(--s9));    /* tighter section */
  --gap:var(--s4);                             /* default grid gap, grows at tablet/desktop */
  --head-gap:clamp(var(--s6),4vw,var(--s7));   /* section head → content */

  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:34px; --r-2xl:44px;
  --sh-sm:0 6px 18px rgba(14,47,36,.08);
  --sh-md:0 18px 46px rgba(14,47,36,.12);
  --sh-lg:0 34px 80px rgba(14,47,36,.18);

  --font-display:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;

  --wrap:1200px; --gutter:20px;
  --nav-h:66px; --bar-h:38px;
  --ease:cubic-bezier(.22,.8,.22,1); --spring:cubic-bezier(.34,1.56,.64,1);
}
@media (min-width:720px){:root{--gutter:32px;--gap:var(--s5)}}
@media (min-width:1100px){:root{--gutter:40px;--gap:var(--s6);--nav-h:76px}}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:calc(var(--nav-h) + var(--s3))}
body{background:var(--light);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;overflow-anchor:none}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
ul,ol{list-style:none}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--leaf);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}   /* form honeypot: off-screen for people, filled in by bots */
.skip{position:absolute;left:var(--s3);top:-60px;background:var(--forest);color:#fff;padding:10px 16px;border-radius:999px;z-index:200}
.skip:focus{top:var(--s3)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* the one horizontal container: side gutters live here and nowhere else */
.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- type ---------- */
h1,h2,h3,h4,.display{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:1.05;color:var(--ink);text-wrap:balance}
.h-hero{font-size:clamp(40px,7.2vw,88px);letter-spacing:-.035em;line-height:.96;font-weight:700}
.h-1{font-size:clamp(36px,5.6vw,72px);letter-spacing:-.03em;line-height:.98;font-weight:700}
.h-2{font-size:clamp(30px,4vw,52px);letter-spacing:-.028em;line-height:1.04}
.h-3{font-size:clamp(24px,2.8vw,34px);letter-spacing:-.02em}
.h-4{font-size:clamp(19px,2vw,24px);letter-spacing:-.01em}
.lede{font-size:clamp(16.5px,1.3vw,19px);line-height:1.55;color:var(--ink-2);max-width:56ch}
.small{font-size:14px;line-height:1.5;color:var(--muted)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--leaf)}
.eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px}
.eyebrow.plain::before{display:none}
.on-dark,.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff}
.on-dark .lede{color:rgba(255,255,255,.78)}
.on-dark .small{color:rgba(255,255,255,.62)}
.on-dark .eyebrow{color:var(--sage)}
.accent{color:var(--leaf)}
.accent-sage{color:var(--sage)}
.center{text-align:center}
.tbc{text-decoration:underline dotted rgba(91,142,90,.75);text-decoration-thickness:1.5px;text-underline-offset:4px;cursor:help}
.tbc-note{font-size:12.5px;color:var(--muted);display:flex;gap:var(--s2);align-items:flex-start;line-height:1.5}
.tbc-note svg{width:14px;height:14px;flex:none;margin-top:3px;color:var(--leaf)}
.on-dark .tbc-note{color:rgba(255,255,255,.6)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;font-weight:700;font-size:15.5px;white-space:nowrap;transition:transform .25s var(--spring),box-shadow .25s var(--ease),background .2s,color .2s;isolation:isolate;overflow:hidden}
.btn svg{width:18px;height:18px;flex:none;transition:transform .3s var(--spring)}
.btn:hover svg.arrow{transform:translateX(4px)}
.btn:active{transform:scale(.97)}
.btn-forest{background:var(--forest);color:#fff;box-shadow:0 10px 24px -10px rgba(14,47,36,.6)}
.btn-forest:hover{background:var(--forest-2);transform:translateY(-2px)}
.btn-leaf{background:var(--leaf);color:#fff}
.btn-leaf:hover{background:var(--leaf-2);transform:translateY(-2px)}
.btn-sage{background:var(--sage);color:var(--forest)}
.btn-sage:hover{background:var(--sage-2);transform:translateY(-2px)}
.btn-white{background:#fff;color:var(--forest);box-shadow:var(--sh-sm)}
.btn-white:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--forest);border:1.5px solid var(--line-2)}
.btn-ghost:hover{border-color:var(--forest);background:rgba(14,47,36,.04)}
.on-dark .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.on-dark .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-sm{height:42px;padding:0 18px;font-size:14px}
.btn-lg{height:58px;padding:0 30px;font-size:16.5px}
.btn-block{width:100%}
.btn .btn-ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);transform:scale(0);animation:ripple .6s var(--ease) forwards;pointer-events:none}
@keyframes ripple{to{transform:scale(3);opacity:0}}
.link{font-weight:700;color:var(--forest);display:inline-flex;align-items:center;gap:6px;border-bottom:1.5px solid var(--sage);padding-bottom:1px;transition:border-color .2s}
.link:hover{border-color:var(--forest)}
.link svg{width:16px;height:16px;transition:transform .3s var(--spring)}
.link:hover svg{transform:translateX(4px)}
.on-dark .link{color:#fff;border-color:rgba(255,255,255,.4)}
.icon-btn{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:var(--forest);transition:background .2s,transform .2s var(--spring);position:relative}
.icon-btn:hover{background:rgba(14,47,36,.06)}
.icon-btn svg{width:22px;height:22px}
.on-dark .icon-btn{color:#fff}

/* ---------- chips / tags ---------- */
.chip{display:inline-flex;align-items:center;gap:var(--s2);height:34px;padding:0 14px;border-radius:999px;font-size:13.5px;font-weight:700;background:#fff;color:var(--forest);box-shadow:var(--sh-sm)}
.chip svg{width:15px;height:15px;color:var(--leaf)}
.chip.sage{background:var(--sage-3);box-shadow:none}
.chip.glass{background:rgba(255,255,255,.12);color:#fff;box-shadow:none}
.chip.glass svg{color:var(--sage)}
.tag{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.tag svg{width:12px;height:12px}
.tag.leaf{background:var(--leaf);color:#fff}
.tag.sage{background:var(--sage-3);color:var(--forest)}
.tag.kraft{background:var(--kraft-2);color:var(--forest)}
.tag.forest{background:var(--forest);color:#fff}
.tag.white{background:#fff;color:var(--forest)}
.tag.outline{border:1.5px solid var(--line-2);color:var(--ink-2)}

/* ---------- surfaces + section rhythm ---------- */
.card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-sm);position:relative}
.card-forest{background:var(--forest);color:#fff;border-radius:var(--r-lg)}
.card-sage{background:var(--sage-3);border-radius:var(--r-lg)}
.grain::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;border-radius:inherit;z-index:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.section{padding-block:var(--sec);position:relative}
.section-tight{padding-block:var(--sec-sm);position:relative}
.section-forest{background:var(--forest);color:#fff}
.section-sage{background:var(--sage-3)}
.section-cream{background:var(--cream)}
.section-kraft{background:var(--kraft-3)}
.sec-head{display:grid;gap:var(--s3);max-width:720px;margin-bottom:var(--head-gap)}
.sec-head.center{text-align:center;margin-inline:auto;justify-items:center}
.sec-head.split{max-width:none;grid-template-columns:1fr;align-items:end;gap:var(--s4)}
@media (min-width:900px){.sec-head.split{grid-template-columns:1.2fr .8fr;gap:var(--s7)}}
.sec-head.split .lede{max-width:44ch}
.stack{display:grid;gap:var(--s4)}
.stack-lg{display:grid;gap:var(--s5)}
.row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.paw-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:.06;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g fill='%230E2F24' transform='translate(40 40) rotate(-20)'><ellipse cx='0' cy='6' rx='13' ry='11'/><ellipse cx='-15' cy='-10' rx='5.5' ry='7'/><ellipse cx='-5' cy='-18' rx='5.5' ry='7'/><ellipse cx='6' cy='-18' rx='5.5' ry='7'/><ellipse cx='16' cy='-10' rx='5.5' ry='7'/></g><g fill='%230E2F24' transform='translate(120 120) rotate(15)'><ellipse cx='0' cy='6' rx='13' ry='11'/><ellipse cx='-15' cy='-10' rx='5.5' ry='7'/><ellipse cx='-5' cy='-18' rx='5.5' ry='7'/><ellipse cx='6' cy='-18' rx='5.5' ry='7'/><ellipse cx='16' cy='-10' rx='5.5' ry='7'/></g></svg>")}
.section-forest .paw-bg,.page-hero.forest .paw-bg,.footer .paw-bg{filter:invert(1);opacity:.07}

/* ---------- photo tiles (the storytelling unit) ---------- */
.photo{position:relative;overflow:hidden;border-radius:var(--r-xl);background:var(--sage-3);isolation:isolate}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%);transition:transform .9s var(--ease)}
.photo:hover img{transform:scale(1.04)}
.photo .cap{position:absolute;left:0;right:0;bottom:0;padding:var(--s5);display:grid;gap:var(--s1);color:#fff;background:linear-gradient(180deg,rgba(14,47,36,0) 0%,rgba(14,47,36,.72) 100%);z-index:1}
.photo .cap h3{color:#fff;font-size:clamp(18px,1.8vw,24px)}
.photo .cap p{font-size:14px;color:rgba(255,255,255,.85);max-width:34ch}
.photo .cap .tag{width:max-content;margin-bottom:var(--s1)}

/* ==========================================================================
   Announcement bar + header
   ========================================================================== */
.bar{background:var(--forest);color:#fff;height:var(--bar-h);font-size:13px;font-weight:600;position:relative;z-index:60}
.bar .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s4)}
.bar-msgs{position:relative;height:100%;flex:1;overflow:hidden}
/* messages slide up into the strip at full strength; a fade would pass through half-transparent text,
   which fails contrast for those frames. The outgoing one is hidden at once. */
.bar-msg{position:absolute;inset:0;display:flex;align-items:center;gap:var(--s2);visibility:hidden;transform:translateY(100%);transition:transform .45s var(--ease),visibility 0s;white-space:nowrap}
.bar-msg.on{visibility:visible;transform:none}
.bar-msg svg{width:14px;height:14px;color:var(--sage);flex:none}
.bar-right{display:none;align-items:center;gap:14px}
@media (min-width:720px){.bar-right{display:flex}.bar-msg{justify-content:center}}
.region{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 6px;border-radius:999px;background:rgba(255,255,255,.1);font-weight:700;font-size:12.5px;transition:background .2s;color:#fff}
.region:hover{background:rgba(255,255,255,.18)}
.region .flag{width:16px;height:16px;border-radius:50%;overflow:hidden;display:inline-grid;place-items:center;background:#fff}
.region svg.chev{width:12px;height:12px;opacity:.7}

.header{position:sticky;top:0;z-index:55;background:rgba(244,246,241,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.header.stuck{border-color:var(--line);box-shadow:0 8px 30px -18px rgba(14,47,36,.3)}
.header .wrap{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:var(--s3)}
.logo{display:inline-flex;align-items:center}
.logo img{height:34px;width:auto}
@media (min-width:1100px){.logo img{height:40px}}
.footer .logo img{height:44px}
.nav{display:none;align-items:center;gap:var(--s1)}
@media (min-width:1000px){.nav{display:flex}}
.nav a{position:relative;display:inline-flex;align-items:center;height:40px;padding:0 14px;border-radius:999px;font-weight:700;font-size:15px;color:var(--forest);transition:background .2s}
.nav a:hover{background:rgba(14,47,36,.06)}
.nav a.hot{color:var(--leaf)}
.nav a.hot::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--leaf);margin-left:8px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.5}}
.nav a[aria-current="page"]{background:rgba(14,47,36,.08)}
.hdr-actions{display:flex;align-items:center;gap:2px}
.cart-count{position:absolute;top:4px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--leaf);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;transform:scale(0);transition:transform .35s var(--spring)}
.cart-count.on{transform:scale(1)}
.burger{display:inline-flex}
@media (min-width:1000px){.burger{display:none}}
.burger .lines > span{display:block;width:22px;height:2.2px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.burger .lines{display:grid;gap:6px;height:22px;align-content:center}
.menu-open .burger .lines span:nth-child(1){transform:translateY(8.2px) rotate(45deg)}
.menu-open .burger .lines span:nth-child(2){opacity:0}
.menu-open .burger .lines span:nth-child(3){transform:translateY(-8.2px) rotate(-45deg)}
.menu-open{overflow:hidden}
.mobile-nav{position:fixed;inset:0;z-index:54;background:var(--forest);color:#fff;padding:calc(var(--nav-h) + var(--bar-h) + var(--s5)) var(--gutter) var(--s7);display:flex;flex-direction:column;gap:6px;clip-path:circle(0 at calc(100% - 40px) 60px);transition:clip-path .6s var(--ease),visibility .6s;visibility:hidden}
.menu-open .mobile-nav{clip-path:circle(150% at calc(100% - 40px) 60px);visibility:visible;transition:clip-path .6s var(--ease),visibility 0s}
.mobile-nav > a{font-family:var(--font-display);font-size:clamp(28px,7.5vw,42px);font-weight:600;padding:var(--s2) 0;border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;opacity:0;transform:translateY(14px);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.menu-open .mobile-nav > a{opacity:1;transform:none}
.mobile-nav > a:nth-child(1){transition-delay:.15s}.mobile-nav > a:nth-child(2){transition-delay:.2s}.mobile-nav > a:nth-child(3){transition-delay:.25s}.mobile-nav > a:nth-child(4){transition-delay:.3s}.mobile-nav > a:nth-child(5){transition-delay:.35s}.mobile-nav > a:nth-child(6){transition-delay:.4s}
.mobile-nav > a svg{width:26px;height:26px;color:var(--sage)}
.mobile-nav .mn-foot .chip{height:34px;font-size:13.5px;font-family:var(--font-body)}
.mobile-nav .mn-foot{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap;opacity:0;transition:opacity .4s .45s}
.menu-open .mobile-nav .mn-foot{opacity:1}

/* ==========================================================================
   Hero (photographic)
   ========================================================================== */
.hero{position:relative;overflow:clip;background:var(--light)}
.hero .wrap{display:grid;gap:var(--s6);padding-block:var(--s6) var(--sec-sm);align-items:center}
@media (min-width:1000px){.hero .wrap{grid-template-columns:1fr 1fr;gap:var(--s7);padding-block:var(--s7) var(--sec-sm)}}
.hero-copy{position:relative;z-index:3;display:grid;gap:var(--s5);justify-items:start}
.hero-copy .h-hero{max-width:12ch}
.hero-copy .flip{display:inline-grid;vertical-align:baseline;color:var(--leaf)}
.hero-copy .flip > span{grid-area:1/1;transition:opacity .45s var(--ease),transform .55s var(--spring);white-space:nowrap}
.hero-copy .flip > span[aria-hidden="true"]{opacity:0;transform:translateY(60%) rotate(4deg)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.hero-proof{display:flex;flex-wrap:wrap;gap:var(--s2)}
.hero-stage{position:relative;z-index:2}

/* On a phone the copy ran to a full screen and the photograph sat under the
   fold, so tapping the size toggle changed a picture nobody could see. The
   three things that change together — headline, toggle, photograph — now
   sit together, and the explanation and the buttons follow. The copy block
   dissolves into the grid so its children can be ordered against the stage. */
@media (max-width:999px){
  .hero .wrap{gap:var(--s4);justify-items:start}
  .hero-copy{display:contents}
  .hero-copy > .eyebrow{order:1}
  .hero-copy > .h-hero{order:2}
  .hero-copy > .fit-toggle{order:3}
  .hero-stage{order:4;width:100%;justify-self:stretch;margin-block:var(--s2) var(--s2)}
  .hero-copy > .lede{order:5}
  .hero-copy > .hero-ctas{order:6}
  .hero-copy > .hero-proof{order:7}
  /* the two pills repeat the proof chips beneath and sat on the dog's head;
     the base rule is declared later in the file, so this needs the extra weight */
  .hero-photo .callout{display:none}
}
.hero-photo{position:relative;aspect-ratio:4/4.6;border-radius:var(--r-2xl);overflow:hidden;background:var(--sage-3);box-shadow:var(--sh-md)}
@media (min-width:1000px){.hero-photo{aspect-ratio:4/5}}
.hero-photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%);transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
.hero-photo > img.big{opacity:0;transform:scale(1.04)}
.hero[data-fit="big"] .hero-photo > img.big{opacity:1;transform:none}
.hero[data-fit="big"] .hero-photo > img.little{opacity:0;transform:scale(1.04)}
/* the rendered roll sits over the photographs and under the callouts and card */
.hero-photo .hero-gl{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none;opacity:0;transition:opacity .9s var(--ease)}
.hero-photo .hero-gl.on{opacity:1}

/* ---------- the story canvas ----------
   One fixed canvas behind the page's positioned content: above section
   backgrounds and running text, below anything that carries a z-index (nav,
   cart, sheet, the hero's own stage). The static product images keep their
   layout so the acts can anchor to them, and fade once the first frame has
   drawn, so a failed mount leaves the page exactly as it was. */
.story-gl{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
html.gl-story .cmp3-floor img.roll,
html.gl-story .fit-stage .stage-bag img,
html.gl-story .bundle-art img,
html.gl-story .bundle-art .plus{opacity:0;transition:opacity .6s var(--ease)}
/* the motes sink behind the copy, in front of the forest */
html.gl-story #why .wrap{position:relative;z-index:2}
.callout{position:absolute;display:inline-flex;align-items:center;gap:var(--s2);background:#fff;color:var(--forest);font-weight:800;font-size:13px;padding:8px 12px 8px 8px;border-radius:999px;box-shadow:var(--sh-md);z-index:4;white-space:nowrap}
.callout .dot{width:22px;height:22px;border-radius:50%;background:var(--leaf);display:inline-flex;align-items:center;justify-content:center;color:#fff}
.callout .dot svg{width:12px;height:12px}
.callout.c1{left:var(--s4);top:calc(var(--s4) + 46px)}
.callout.c2{left:var(--s4);top:var(--s4)}
.fit-toggle{display:inline-flex;padding:5px;border-radius:999px;background:#fff;box-shadow:var(--sh-sm);position:relative;isolation:isolate}
.fit-toggle button{position:relative;z-index:1;height:44px;padding:0 18px;border-radius:999px;font-weight:800;font-size:14px;color:var(--forest);transition:color .3s;display:inline-flex;align-items:center;gap:var(--s2)}
.fit-toggle button svg{width:16px;height:16px}
.fit-toggle .thumb{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);background:var(--forest);border-radius:999px;transition:transform .5s var(--spring);z-index:0}
.fit-toggle[data-on="big"] .thumb{transform:translateX(100%)}
.fit-toggle button[aria-pressed="true"]{color:#fff}
.paw-trail{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.paw-trail svg{position:absolute;width:22px;height:22px;color:var(--forest);opacity:0;animation:pawfade 1.6s var(--ease) forwards}
@keyframes pawfade{0%{opacity:0;transform:scale(.4) rotate(var(--r))}15%{opacity:.35;transform:scale(1) rotate(var(--r))}100%{opacity:0;transform:scale(1) rotate(var(--r))}}

/* ---------- marquee ---------- */

/* ==========================================================================
   Product cards
   ========================================================================== */
.range-grid{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:640px){.range-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.range-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.range-grid.four{grid-template-columns:repeat(4,1fr)}}
.pcard{position:relative;background:#fff;border-radius:var(--r-xl);padding:var(--s4);display:grid;gap:var(--s4);box-shadow:var(--sh-sm);transition:transform .4s var(--spring),box-shadow .4s;align-content:start}
.pcard:hover{transform:translateY(-6px);box-shadow:var(--sh-md)}
.pcard .art{position:relative;aspect-ratio:1/1;border-radius:var(--r-lg);overflow:hidden;background:var(--sage-3);display:flex;align-items:flex-end;justify-content:center;gap:4%;padding:12% 10% 8%;isolation:isolate}
.pcard .art.forest{background:var(--forest)}
.pcard .art.kraft{background:var(--kraft-2)}
.pcard .art.light{background:var(--light)}
.pcard .art.sage{background:var(--sage)}
.pcard .art img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 18px 20px rgba(14,47,36,.28));transition:transform .6s var(--spring)}
.pcard:hover .art img{transform:translateY(-6px) rotate(-2deg)}
.pcard .art img.lg{max-height:100%}
.pcard .art img.md{max-height:80%}
.pcard .art img.sm{max-height:62%}
.pcard .art .tag{position:absolute;top:var(--s3);left:var(--s3);z-index:2}
.pcard .meta{display:grid;gap:var(--s1)}
.pcard .meta h3{font-size:20px}
.pcard .meta p{font-size:14px;color:var(--muted)}
.pcard .row{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:nowrap}
.price{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--forest)}
.price .sub{display:block;font-family:var(--font-body);font-size:12.5px;font-weight:700;color:var(--leaf)}
.price s{color:var(--muted);font-weight:500;margin-right:6px}
.quick-add{width:46px;height:46px;border-radius:50%;background:var(--forest);color:#fff;display:grid;place-items:center;transition:transform .3s var(--spring),background .2s;flex:none}
.quick-add:hover{transform:scale(1.08) rotate(90deg);background:var(--leaf)}
.quick-add svg{width:20px;height:20px}
.quick-add.sniff{animation:sniff .5s var(--spring)}
@keyframes sniff{0%{transform:scale(1)}40%{transform:scale(1.25) rotate(-8deg)}70%{transform:scale(.94) rotate(6deg)}100%{transform:scale(1)}}

/* ==========================================================================
   Bundle builder
   ========================================================================== */
.bundle{display:grid;gap:var(--s5);background:var(--forest);color:#fff;border-radius:var(--r-2xl);padding:var(--s5);position:relative;overflow:hidden}
@media (min-width:720px){.bundle{padding:var(--s7)}}
@media (min-width:1000px){.bundle{grid-template-columns:1fr 1fr;gap:var(--s7);align-items:center}}
.bundle-art{position:relative;aspect-ratio:1/1;max-height:440px;border-radius:var(--r-xl);background:var(--forest-3);display:flex;align-items:flex-end;justify-content:center;gap:6%;padding:14% 10% 12%;overflow:hidden}
.bundle-art img{max-height:100%;width:auto;filter:drop-shadow(0 26px 28px rgba(0,0,0,.45));transition:transform .7s var(--spring)}
.bundle-art img.disp{max-height:90%;max-width:24%;object-fit:contain}
/* the rolls are a wide image sized by height alone, so on a phone they ran
   past the right edge of the art box and were clipped mid-roll; a width
   ceiling keeps dispenser, gap and rolls inside the box at every size */
.bundle-art img.rolls{max-height:62%;max-width:64%;object-fit:contain}
.bundle-art .plus{position:absolute;left:50%;top:18%;transform:translateX(-50%);width:44px;height:44px;border-radius:50%;background:var(--sage);color:var(--forest);display:grid;place-items:center;font-weight:900;font-size:24px;font-family:var(--font-display);box-shadow:var(--sh-md)}
.bundle[data-size="big"] .bundle-art img.rolls{transform:scale(1.12)}
.bundle-copy{display:grid;gap:var(--s4)}
.seg{display:inline-flex;padding:5px;border-radius:999px;background:rgba(255,255,255,.1);position:relative;isolation:isolate;width:max-content;max-width:100%}
.seg button{position:relative;z-index:1;height:44px;padding:0 20px;border-radius:999px;font-weight:800;font-size:14px;color:#fff;transition:color .3s;white-space:nowrap;flex:1}
.seg .thumb{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);background:var(--sage);border-radius:999px;transition:transform .5s var(--spring);z-index:0}
.seg[data-on="1"] .thumb{transform:translateX(100%)}
.seg button[aria-pressed="true"]{color:var(--forest)}
.bundle-lines{display:grid;font-size:15px}
.bundle-lines div{display:flex;justify-content:space-between;gap:var(--s3);padding:10px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.bundle-lines div.total{border:0;font-weight:800;font-size:18px;font-family:var(--font-display)}
.bundle-lines .save{color:var(--sage);font-weight:800}

/* ==========================================================================
   How it works
   ========================================================================== */
.steps{display:grid;gap:var(--gap)}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}
.step{position:relative;background:#fff;border-radius:var(--r-xl);padding:var(--s5);display:grid;grid-template-rows:auto auto 1fr auto;gap:var(--s3);box-shadow:var(--sh-sm);transition:transform .4s var(--spring)}
.step:hover{transform:translateY(-4px)}
.step .num{font-family:var(--font-display);font-weight:800;font-size:48px;line-height:1;color:var(--sage-2);letter-spacing:-.05em}
.step h3{font-size:24px}
.step p{color:var(--ink-2);font-size:15px}
.step .art{height:150px;display:flex;align-items:flex-end;justify-content:center;margin-top:var(--s3);transition:transform .5s var(--spring)}
.step:hover .art{transform:rotate(-3deg) scale(1.04)}
.step .art img{max-height:100%;width:auto;filter:drop-shadow(0 12px 14px rgba(14,47,36,.25))}
.steps-line{display:none}
@media (min-width:900px){.steps-line{display:block;height:3px;background:var(--line);border-radius:3px;margin:0 8% var(--s5);position:relative}.steps-line i{position:absolute;inset:0;background:var(--leaf);border-radius:3px;transform-origin:left;transform:scaleX(0)}.steps-line .walker{position:absolute;top:-14px;left:0;width:30px;height:30px;color:var(--forest);transform:translateX(-50%)}.no-js .steps-line i,.reduce .steps-line i{transform:none}}

/* ==========================================================================
   Never Run Out (single idea, one photo, one CTA)
   ========================================================================== */
.nro{display:grid;gap:var(--gap)}
@media (min-width:900px){.nro{grid-template-columns:1fr 1fr;align-items:center}}
.nro .photo{aspect-ratio:4/5;max-height:560px}
@media (max-width:899px){.nro .photo{aspect-ratio:4/3}}
.nro-copy{display:grid;gap:var(--s4)}
.controls{display:flex;flex-wrap:wrap;gap:var(--s2)}

/* ==========================================================================
   Story grid (photographs that do work)
   ========================================================================== */
.story-grid{display:grid;gap:var(--gap);grid-template-columns:1fr}
.story-grid .photo{aspect-ratio:4/5}
@media (min-width:640px){.story-grid{grid-template-columns:repeat(2,1fr)}.story-grid .photo.wide{grid-column:span 2;aspect-ratio:16/9}}
@media (min-width:1000px){.story-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:260px}.story-grid .photo{aspect-ratio:auto}.story-grid .photo.tall{grid-row:span 2}.story-grid .photo.wide{grid-column:span 2;aspect-ratio:auto}}

/* ==========================================================================
   Reviews (honest empty state)
   ========================================================================== */
.reviews-empty{display:grid;gap:var(--s5);background:#fff;border-radius:var(--r-2xl);padding:var(--s5);box-shadow:var(--sh-sm)}
@media (min-width:720px){.reviews-empty{padding:var(--s7)}}
@media (min-width:900px){.reviews-empty{grid-template-columns:1fr 1fr;align-items:center;gap:var(--s7)}}
.stars{display:inline-flex;gap:3px;color:var(--sage-2)}
.stars svg{width:22px;height:22px}
.review-skel{display:grid;gap:var(--s3)}
.review-skel .r{display:grid;grid-template-columns:48px 1fr;gap:var(--s3);align-items:center;padding:var(--s3);border-radius:var(--r-md);background:var(--light)}
.review-skel .r .av{width:48px;height:48px;border-radius:50%;overflow:hidden;background:var(--sage-3)}
.review-skel .r .av img{width:100%;height:100%;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%)}
.review-skel .r .speech{background:#fff;border-radius:14px;padding:10px 12px;font-size:13.5px;font-weight:700;color:var(--forest);display:inline-block}

/* ==========================================================================
   Why compostable
   ========================================================================== */
.why{display:grid;gap:var(--gap)}
@media (min-width:1000px){.why{grid-template-columns:1fr 1fr;gap:var(--s7);align-items:center}}
.why-list{display:grid;gap:var(--s2)}
.why-list li{display:grid;grid-template-columns:40px 1fr;gap:var(--s3);align-items:start;padding:var(--s4);border-radius:var(--r-md);background:rgba(255,255,255,.06)}
.why-list li .ico{width:40px;height:40px;border-radius:12px;background:var(--sage);color:var(--forest);display:grid;place-items:center}
.why-list li .ico svg{width:20px;height:20px}
.why-list li b{display:block;font-size:15.5px;margin-bottom:2px}
.why-list li span{font-size:14px;color:rgba(255,255,255,.72)}
.cert-slot{border:2px dashed rgba(255,255,255,.3);border-radius:var(--r-md);padding:var(--s3);display:flex;align-items:center;gap:var(--s3);color:rgba(255,255,255,.7);font-size:13px;font-weight:600}
.cert-slot .sq{width:44px;height:44px;border-radius:10px;border:2px dashed rgba(255,255,255,.3);flex:none;display:grid;place-items:center}
.cert-slot .sq svg{width:20px;height:20px;opacity:.6}
.light-slot{border-color:var(--line-2);color:var(--muted)}
.light-slot .sq{border-color:var(--line-2)}
.timeline{display:grid;position:relative;padding-left:26px}
.timeline::before{content:"";position:absolute;left:8px;top:8px;bottom:8px;width:2px;background:var(--line-2)}
.timeline li{position:relative;padding-bottom:var(--s5)}
.timeline li::before{content:"";position:absolute;left:-24px;top:6px;width:14px;height:14px;border-radius:50%;background:var(--sage);border:3px solid #fff}
.timeline li b{display:block}
.timeline li span{font-size:14px}

/* ==========================================================================
   FAQ / accordion
   ========================================================================== */
.acc{display:grid;gap:var(--s2)}
.acc-item{background:#fff;border-radius:var(--r-md);box-shadow:var(--sh-sm);overflow:hidden}
.acc-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s4);padding:18px 20px;font-weight:800;font-size:16px}
.acc-item summary::-webkit-details-marker{display:none}
.acc-item summary .pm{width:30px;height:30px;border-radius:50%;background:var(--sage-3);display:grid;place-items:center;flex:none;transition:transform .4s var(--spring),background .2s;color:var(--forest)}
.acc-item summary .pm svg{width:14px;height:14px}
.acc-item[open] summary .pm{transform:rotate(45deg);background:var(--forest);color:#fff}
.acc-item .acc-body{padding:0 20px 20px;color:var(--ink-2);font-size:15px;line-height:1.6}
.acc-item .acc-body p+p{margin-top:var(--s2)}

/* ==========================================================================
   Email capture + forms
   ========================================================================== */
.capture{display:grid;gap:var(--s4);background:var(--sage-3);border-radius:var(--r-2xl);padding:var(--s5);position:relative;overflow:hidden}
@media (min-width:720px){.capture{padding:var(--s6)}}
.form-row{display:flex;gap:var(--s2);flex-wrap:wrap}
.input{height:54px;border-radius:999px;border:2px solid var(--line);background:#fff;padding:0 20px;flex:1;min-width:0;font-size:15px;transition:border-color .2s,box-shadow .2s;width:100%}
.input:focus{border-color:var(--forest);outline:none;box-shadow:0 0 0 4px rgba(91,142,90,.15)}
textarea.input{height:auto;min-height:130px;padding:16px 20px;border-radius:var(--r-lg);resize:vertical}
select.input{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230E2F24' stroke-width='2.5'><path d='m6 9 6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 18px center;padding-right:44px}
.field{display:grid;gap:6px}
.field label{font-size:13.5px;font-weight:800;color:var(--ink-2)}
.form-grid{display:grid;gap:var(--s3)}
@media (min-width:720px){.form-grid{grid-template-columns:1fr 1fr}.form-grid .full{grid-column:1/-1}}
/* A form that has kept your details but not yet sent them must not look
   like one that has, so the pending state is visibly a different thing. */
.credit{display:block;margin-top:8px;opacity:.72}
.cart-note{margin:0 0 6px;color:var(--muted)}
/* declared ahead of .form-ok, so it wins on specificity rather than order */
.form-ok.form-ok-pending{background:#fff;color:var(--ink);border:1.5px dashed var(--leaf)}
.form-ok.form-ok-pending .small{color:var(--muted)}
.demo-flag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;
  background:var(--kraft);color:var(--forest);font-size:11px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;vertical-align:1px}
/* CASL: express consent, given deliberately, never assumed */
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:14px;
  font-size:13.5px;line-height:1.45;color:var(--muted);cursor:pointer}
.consent input{flex:none;width:24px;height:24px;margin:0;accent-color:var(--leaf);cursor:pointer}   /* 24px: WCAG 2.5.8 target size */
.consent span{max-width:52ch}
.form-ok{background:var(--forest);color:#fff;border-radius:var(--r-lg);padding:var(--s5);display:grid;gap:var(--s2);animation:pop .5s var(--spring)}
/* a failed send: said under the form, which stays filled in for another try */
.form-err{flex-basis:100%;margin-top:var(--s2);padding:10px 14px;border-radius:var(--r-sm,12px);background:#FBEAE6;color:#8A2A1C;border:1px solid #F0C4BA}
p.form-err .link{color:#8A2A1C;border-color:#D9988A;display:inline;padding-block:0;margin-block:0}
/* the second line and the email link sit on forest green, so they need light ink (the pending card above stays dark-on-white) */
.form-ok .small{color:rgba(255,255,255,.8)}
.form-ok .link{color:#fff;border-color:rgba(255,255,255,.5)}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{background:var(--forest);color:#fff;padding-block:var(--sec-sm) var(--s6);position:relative;overflow:hidden}
.footer-grid{display:grid;gap:var(--s6);position:relative;z-index:1}
@media (min-width:900px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s7)}}
.footer .footer-h{font-size:13px;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--sage);margin-bottom:var(--s4);font-family:var(--font-body);font-weight:800}
.footer ul{display:grid;gap:10px}
.footer ul a{color:rgba(255,255,255,.8);font-weight:600;font-size:15px;transition:color .2s}
.footer ul a:hover{color:#fff}
.footer-brand{display:grid;gap:var(--s4);align-content:start;justify-items:start}
.footer-brand p{color:rgba(255,255,255,.7);max-width:36ch}
.footer-bottom{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:var(--s4);justify-content:space-between;align-items:center;font-size:13px;color:rgba(255,255,255,.55);position:relative;z-index:1}
.footer-bottom .region{background:rgba(255,255,255,.08)}
.footer .big-word{position:absolute;left:0;right:0;bottom:-.18em;font-family:var(--font-display);font-weight:800;font-size:clamp(90px,17vw,260px);line-height:1;letter-spacing:-.05em;color:rgba(255,255,255,.035);text-align:center;pointer-events:none;white-space:nowrap;user-select:none}

/* ==========================================================================
   Cart drawer + toast
   ========================================================================== */
.scrim{position:fixed;inset:0;background:rgba(14,47,36,.45);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;z-index:80}
.cart-open .scrim{opacity:1;visibility:visible;transition:opacity .35s,visibility 0s}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100%);background:var(--light);z-index:90;transform:translateX(100%);transition:transform .5s var(--ease),visibility .5s;display:grid;grid-template-rows:auto auto 1fr auto;box-shadow:var(--sh-lg);visibility:hidden}
.cart-open .drawer{transform:none;visibility:visible;transition:transform .5s var(--ease),visibility 0s}   /* visible at once on open so focus can move in; hidden only after the slide-out */
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:var(--s4) var(--s5) var(--s3)}
.drawer-head h3{font-size:22px}
.ship-bar{padding:0 var(--s5) var(--s4);display:grid;gap:var(--s2);font-size:13.5px;font-weight:700;color:var(--ink-2)}
.ship-bar .track{height:8px;border-radius:999px;background:#fff;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.ship-bar .fill{height:100%;background:linear-gradient(90deg,var(--sage),var(--leaf));width:0;transition:width .6s var(--ease);border-radius:999px}
.ship-bar.done .fill{background:var(--forest)}
.cart-lines{overflow-y:auto;overflow-x:hidden;padding:0 var(--s5);display:grid;gap:var(--s2);align-content:start}
.cart-line{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:var(--s3);background:#fff;border-radius:var(--r-md);padding:var(--s3);align-items:center;animation:pop .45s var(--spring)}
@keyframes pop{from{transform:scale(.92);opacity:0}}
.cart-line .thumb{width:72px;height:72px;border-radius:12px;background:var(--sage-3);display:grid;place-items:center;overflow:hidden;padding:8px}
.cart-line .thumb,.cart-xsell .thumb{position:relative}
/* placed inside the square, never sized by the image: a tall cut-out with height attributes used to
   spill out and leave the square blank */
.cart-line .thumb img{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);object-fit:contain}
.cart-line .thumb.forest{background:var(--forest)}
.cart-line .thumb.kraft{background:var(--kraft-2)}
.cart-line .info{display:grid;gap:3px;font-size:14px}
.cart-line .info b{font-size:15px}
/* a long tag ("Subscription · every 4 wk") wraps inside its column instead of pushing the price and
   quantity off the side of a phone screen */
.cart-line .info .tag{width:auto;max-width:100%;justify-self:start;white-space:normal;height:auto;min-height:24px;padding-block:4px;line-height:1.25}
.cart-line .qty{display:inline-flex;align-items:center;gap:2px;background:var(--light);border-radius:999px;padding:3px}
.cart-line .qty button{width:28px;height:28px;border-radius:50%;font-weight:900;display:grid;place-items:center}
.cart-line .qty span{min-width:20px;text-align:center;font-weight:800;font-size:14px}
.cart-line .right{display:grid;gap:var(--s2);justify-items:end}
.cart-line .rm{font-size:12px;color:var(--muted);text-decoration:underline}
.cart-empty{padding:var(--s6) var(--s5);text-align:center;display:grid;gap:var(--s3);justify-items:center;color:var(--muted)}
.cart-empty img{height:140px;width:auto;filter:drop-shadow(0 10px 14px rgba(14,47,36,.2))}
.cart-xsell{margin:var(--s2) var(--s5) 0;background:var(--sage-3);border-radius:var(--r-md);padding:var(--s3);display:grid;grid-template-columns:52px 1fr auto;gap:var(--s3);align-items:center;font-size:13.5px}
.cart-xsell .thumb{width:52px;height:52px;border-radius:10px;background:#fff;display:grid;place-items:center;overflow:hidden;padding:6px}
.cart-xsell .thumb img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:contain}
.drawer-foot{padding:var(--s4) var(--s5) var(--s5);display:grid;gap:var(--s2);background:#fff;border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:0 -10px 30px -20px rgba(14,47,36,.3)}
.drawer-foot .tot{display:flex;justify-content:space-between;font-weight:800;font-size:18px;font-family:var(--font-display)}
.drawer-foot .small{text-align:center}
.toast{position:fixed;left:50%;bottom:var(--s5);transform:translate(-50%,20px);background:var(--forest);color:#fff;padding:12px 18px;border-radius:999px;font-weight:700;font-size:14px;display:flex;align-items:center;gap:10px;box-shadow:var(--sh-lg);opacity:0;visibility:hidden;transition:opacity .3s,transform .4s var(--spring),visibility .3s;z-index:100;max-width:calc(100% - 2 * var(--gutter))}
.toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)}
.toast svg{width:18px;height:18px;color:var(--sage);flex:none}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:95}

/* ==========================================================================
   Find Your Fit
   ========================================================================== */
.fit{display:grid;gap:var(--s5);background:#fff;border-radius:var(--r-2xl);box-shadow:var(--sh-md);padding:var(--s5);position:relative;overflow:hidden}
@media (min-width:720px){.fit{padding:var(--s6)}}
@media (min-width:1000px){.fit{grid-template-columns:1fr 1fr;gap:var(--s7);align-items:stretch}}
.fit-steps{display:grid;gap:var(--s5);align-content:start}
.fit-prog{display:flex;gap:6px}
.fit-prog i{height:6px;flex:1;border-radius:3px;background:var(--sage-3);overflow:hidden;position:relative}
.fit-prog i::after{content:"";position:absolute;inset:0;background:var(--forest);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.fit-prog i.on::after{transform:none}
.fit-q{display:grid;gap:var(--s3);animation:pop .45s var(--spring)}
.fit-q h3{font-size:clamp(22px,2.4vw,30px)}
.fit-q .small{margin-top:calc(-1 * var(--s2))}
.fit-opts{display:grid;gap:var(--s2);grid-template-columns:repeat(2,1fr)}
@media (min-width:560px){.fit-opts.four{grid-template-columns:repeat(4,1fr)}}
.fit-opt{position:relative;display:grid;gap:var(--s2);justify-items:center;text-align:center;padding:var(--s4) var(--s2) var(--s3);border-radius:var(--r-lg);background:var(--light);border:2px solid transparent;font-weight:800;font-size:14px;transition:border-color .2s,transform .35s var(--spring),background .2s;min-height:120px;align-content:end;color:var(--forest)}
.fit-opt:hover{transform:translateY(-3px);background:var(--sage-3)}
.fit-opt[aria-pressed="true"]{border-color:var(--forest);background:var(--sage-3)}
.fit-opt .ico{height:56px;display:grid;place-items:end center;color:var(--forest)}
.fit-opt .ico img{height:var(--s,34px);width:auto;filter:drop-shadow(0 6px 8px rgba(14,47,36,.25))}
.fit-opt .ico svg{height:var(--s,34px);width:auto;overflow:visible}
.fit-opt small{display:block;font-size:12px;color:var(--muted);font-weight:600}
.fit-opt.wide{grid-column:1/-1;grid-template-columns:auto 1fr;text-align:left;justify-items:start;min-height:0;padding:var(--s3) var(--s4);align-items:center;align-content:center;gap:var(--s3)}
.fit-opt.wide .ico{height:44px;width:44px;place-items:center}
.fit-nav{display:flex;justify-content:space-between;align-items:center;gap:var(--s2)}
.fit-stage{position:relative;border-radius:var(--r-xl);background:var(--sage-3);min-height:320px;display:grid;place-items:end center;overflow:hidden;padding:var(--s5)}
.fit-stage .floor{position:absolute;left:8%;right:8%;bottom:14%;height:2px;background:rgba(14,47,36,.15);border-radius:2px}
.fit-stage .stage-dog{position:relative;z-index:1;transform-origin:50% 100%;filter:drop-shadow(0 20px 22px rgba(14,47,36,.28));transition:transform .8s var(--spring),opacity .4s,height .8s var(--spring);height:var(--h,52%);margin-bottom:14%}
.fit-stage .stage-dog img{height:100%;width:auto}
/* ---------- Find Your Fit, per dog ----------
   The household stands in a row on one floor, each silhouette at its own
   height, and the result is one card per dog. */
.stage-pack{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:center;gap:4%;width:100%;height:100%}
/* the tallest dog tops out under the roll in the top-right corner */
.stage-pack .stage-dog{height:var(--h,52%);max-height:62%;flex:none;transition:height .8s var(--spring)}
.stage-pack.many .stage-dog{--h:calc(var(--h,52%) * .78)}
@media (max-width:560px){.stage-pack{gap:2%}}

.fit-pack{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:calc(-1 * var(--s1))}
.pack-chip{padding-right:6px;gap:8px}
.pack-chip img{height:22px;width:auto}
.pack-chip .x{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:18px;line-height:1;color:var(--muted)}
.pack-chip .x:hover{background:rgba(14,47,36,.08);color:var(--forest)}

.res-list{display:grid;gap:var(--s3)}
.fit-result .res-card.little{background:var(--leaf)}
.fit-result .res-card.big{background:var(--forest)}
/* the dog label sits on a coloured card, so it is white at full strength, not a muted grey at reduced opacity */
.fit-result .res-card .res-who{display:inline-flex;align-items:center;gap:6px;color:#fff;opacity:.92;margin-bottom:2px;font-weight:700}
.res-who img{height:18px;width:auto}
.fit-stage .stage-bag{position:absolute;right:8%;top:8%;width:26%;transition:transform .7s var(--spring);filter:drop-shadow(0 14px 18px rgba(14,47,36,.28))}
.fit-stage .stage-bag img{width:100%;height:auto}
.fit-stage .stage-label{position:absolute;left:var(--s3);top:var(--s3);z-index:2}
.fit-result{display:grid;gap:var(--s4);align-content:center;animation:pop .5s var(--spring)}
.fit-result .res-card{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:center;background:var(--forest);color:#fff;border-radius:var(--r-lg);padding:var(--s4)}
.fit-result .res-card .bag{width:72px;height:72px;border-radius:14px;background:rgba(255,255,255,.1);display:grid;place-items:center;padding:6px}
.fit-result .res-card .bag img{max-width:100%;max-height:100%}
.fit-result .res-card h3{color:#fff;font-size:26px}
.fit-result .res-card p{color:rgba(255,255,255,.8);font-size:14px}
.fit-result .whylist{display:grid;gap:var(--s2)}
.fit-result .whylist li{display:flex;gap:10px;font-size:14.5px;color:var(--ink-2);align-items:flex-start}
.fit-result .whylist li svg{width:18px;height:18px;color:var(--leaf);flex:none;margin-top:3px}
.fit-result .equal{background:var(--sage-3);border-radius:var(--r-md);padding:var(--s3) var(--s4);font-size:13.5px;color:var(--forest);display:flex;gap:10px;align-items:flex-start}
.fit-result .equal svg{width:18px;height:18px;flex:none;margin-top:2px}
.fit-cta{display:flex;flex-wrap:wrap;gap:var(--s2)}
@media (max-width:560px){.fit-result .res-card{grid-template-columns:1fr}.fit-result .res-card .bag{display:none}.fit-cta .btn{flex:1 1 100%}.fit-stage{min-height:280px}}

/* ==========================================================================
   Product detail page
   ========================================================================== */
.crumbs{display:flex;flex-wrap:wrap;gap:var(--s2);font-size:13px;font-weight:700;color:var(--muted);padding-block:var(--s3)}
.pdp{display:grid;gap:var(--s6);padding-bottom:var(--sec-sm)}
@media (min-width:1000px){.pdp{grid-template-columns:1.1fr .9fr;gap:var(--s7);align-items:start}}
.gallery{display:grid;gap:var(--s3)}
@media (min-width:1000px){.gallery{position:sticky;top:calc(var(--nav-h) + var(--s4))}}
.gallery .main{position:relative;aspect-ratio:1/1;border-radius:var(--r-2xl);background:var(--sage-3);overflow:hidden;isolation:isolate;transition:background .5s}
.gallery .main.forest{background:var(--forest)}
.gallery .main.kraft{background:var(--kraft-2)}
.gallery .main .slide{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:4%;padding:12% 10% 10%;opacity:0;transform:scale(.96);transition:opacity .5s var(--ease),transform .6s var(--spring);pointer-events:none}
.gallery .main .slide.on{opacity:1;transform:none;pointer-events:auto}
.gallery .main .slide img{max-height:100%;max-width:100%;width:auto;object-fit:contain;filter:drop-shadow(0 28px 30px rgba(14,47,36,.28))}
.gallery .main .slide img.photo-fill{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%);filter:none}
.gallery .main .slide .cap{position:absolute;left:var(--s4);bottom:var(--s4);background:rgba(255,255,255,.92);color:var(--forest);font-size:12.5px;font-weight:800;padding:6px 10px;border-radius:999px}
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--s2)}
.thumbs button{aspect-ratio:1;border-radius:14px;background:#fff;border:2px solid transparent;display:grid;place-items:center;padding:8px;transition:border-color .2s,transform .3s var(--spring);overflow:hidden}
.thumbs button:hover{transform:translateY(-2px)}
.thumbs button[aria-selected="true"]{border-color:var(--forest)}
.thumbs button{position:relative}
/* absolutely placed inside the square, so the image can never size the button: with its width/height
   attributes a tall product cut-out used to grow the row and draw outside the visible square */
.thumbs button img{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);object-fit:contain}
.thumbs button img.photo-fill{object-fit:cover;border-radius:8px}
.buy{display:grid;gap:var(--s4)}
.buy .title{display:grid;gap:var(--s2);justify-items:start}
.buy .title h1{font-size:clamp(34px,4.4vw,56px)}
.buy .title .desc{font-size:17px;color:var(--ink-2)}
.buy .pricebar{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap}
.buy .pricebar .price{font-size:30px}
.buy .pricebar .per{font-size:13px;color:var(--muted);font-weight:700}
.opt-block{display:grid;gap:var(--s2)}
.opt-block .lbl{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;font-size:13.5px;font-weight:800;color:var(--ink-2)}
.purchase{display:grid;gap:var(--s2)}
.purchase label{position:relative;display:grid;grid-template-columns:24px 1fr auto;gap:var(--s3);align-items:center;background:#fff;border-radius:var(--r-md);padding:var(--s3) var(--s4);border:2px solid transparent;cursor:pointer;transition:border-color .2s,background .2s}
.purchase label:has(input:checked){border-color:var(--forest);background:var(--sage-3)}
.purchase input{appearance:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);display:grid;place-items:center;margin:0;transition:border-color .2s;background:#fff}
.purchase input::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--forest);transform:scale(0);transition:transform .3s var(--spring)}
.purchase input:checked{border-color:var(--forest)}
.purchase input:checked::after{transform:scale(1)}
.purchase .t{display:grid;gap:2px;font-weight:800;font-size:15px}
.purchase .t small{font-weight:600;color:var(--muted);font-size:13px}
.purchase .p{font-weight:800;font-family:var(--font-display);font-size:17px;color:var(--forest);text-align:right}
.purchase .p small{display:block;font-family:var(--font-body);font-size:12px;color:var(--leaf);font-weight:800}
.purchase .cad-wrap{grid-column:1/-1;display:grid;gap:var(--s2);overflow:hidden;max-height:0;opacity:0;transition:max-height .4s var(--ease),opacity .3s}
.purchase label:has(input:checked) .cad-wrap{max-height:140px;opacity:1}
.cadence-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2)}
.cadence-opts button{height:56px;border-radius:var(--r-md);background:#fff;border:2px solid var(--line);font-weight:800;display:grid;place-items:center;line-height:1.1;transition:border-color .2s,transform .3s var(--spring),background .2s;color:var(--forest);font-size:14px}
.cadence-opts button small{font-size:11px;font-weight:700;color:var(--muted)}
.cadence-opts button[aria-pressed="true"]{border-color:var(--forest);background:var(--sage-3)}
.qty-ctl{display:inline-flex;align-items:center;background:#fff;border-radius:999px;padding:4px;box-shadow:var(--sh-sm)}
.qty-ctl button{width:42px;height:42px;border-radius:50%;font-weight:900;font-size:18px;display:grid;place-items:center;transition:background .2s}
.qty-ctl button:hover{background:var(--sage-3)}
.qty-ctl span{min-width:34px;text-align:center;font-weight:800;font-size:16px}
.atc-row{display:grid;grid-template-columns:auto 1fr;gap:var(--s2);align-items:center}
@media (max-width:560px){.atc-row{grid-template-columns:1fr}.qty-ctl{justify-self:start}}
.buy .assure{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.buy .assure div{display:grid;gap:var(--s1);justify-items:center;text-align:center;font-size:12px;font-weight:700;color:var(--ink-2);background:#fff;border-radius:var(--r-md);padding:var(--s3) var(--s2)}
.buy .assure svg{width:20px;height:20px;color:var(--leaf)}
.specs{display:grid;background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm)}
.specs div{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);font-size:14.5px}
.specs div:last-child{border:0}
.specs div span:first-child{color:var(--muted);font-weight:700}
.specs div span:last-child{font-weight:800;color:var(--forest);text-align:right}
.sticky-atc{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:var(--s3);transform:translateY(110%);transition:transform .45s var(--ease)}
.sticky-atc.on{transform:none}
@media (min-width:1000px){.sticky-atc{display:none}}
.sticky-atc .info{display:grid;font-size:13px;font-weight:700;color:var(--muted)}
.sticky-atc .info b{font-size:16px;color:var(--forest);font-family:var(--font-display)}
.pdp-section{padding-block:var(--sec-sm);border-top:1px solid var(--line)}
.compat{display:grid;grid-template-columns:72px 1fr;gap:var(--s4);align-items:center;background:var(--kraft-2);border-radius:var(--r-lg);padding:var(--s4)}
.compat img{width:72px;height:90px;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(14,47,36,.25))}
.compat b{display:block;font-size:16px}
.compat span{font-size:14px;color:var(--ink-2)}
.pdp-grid-2{display:grid;gap:var(--gap)}
@media (min-width:900px){.pdp-grid-2{grid-template-columns:1fr 1fr;gap:var(--s7)}}
.proof{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:560px){.proof{grid-template-columns:repeat(2,1fr)}}
.proof-item{background:#fff;border-radius:var(--r-lg);padding:var(--s5);display:grid;gap:var(--s3);box-shadow:var(--sh-sm);align-content:start}
.proof-item .ico{width:46px;height:46px;border-radius:14px;background:var(--sage-3);display:grid;place-items:center;color:var(--forest)}
.proof-item .ico svg{width:24px;height:24px}
.proof-item h3{font-size:16px;line-height:1.3}
.proof-item p{font-size:13.5px;color:var(--muted);line-height:1.5}

/* ==========================================================================
   Generic page hero + content
   ========================================================================== */
.page-hero{padding-block:var(--sec-sm) var(--s7);position:relative;overflow:hidden}
.page-hero .wrap{display:grid;gap:var(--s4);align-items:center}
@media (min-width:900px){.page-hero.with-photo .wrap{grid-template-columns:1.1fr .9fr;gap:var(--s7)}}
.page-hero .copy{display:grid;gap:var(--s4);justify-items:start;max-width:640px;position:relative;z-index:1}
.page-hero.center .copy{text-align:center;justify-items:center;margin-inline:auto}
.page-hero.forest{background:var(--forest);color:#fff}
.page-hero.sage{background:var(--sage-3)}
.page-hero.kraft{background:var(--kraft-3)}
.page-hero .photo{aspect-ratio:4/3}
@media (min-width:900px){.page-hero .photo{aspect-ratio:5/4;max-height:460px}}
.prose{max-width:720px;display:grid;gap:var(--s3);color:var(--ink-2);font-size:16.5px;line-height:1.7}
.prose h2{font-size:clamp(26px,3vw,36px);margin-top:var(--s4)}
.prose h3{font-size:22px;margin-top:var(--s2)}
.prose ul{display:grid;gap:var(--s2)}
.prose ul li{display:grid;grid-template-columns:20px 1fr;gap:10px}
.prose ul li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--leaf);margin-top:10px;justify-self:center}
.prose .note{background:var(--sage-3);border-radius:var(--r-md);padding:var(--s3) var(--s4);font-size:14.5px;color:var(--forest)}
.two-col{display:grid;gap:var(--s6)}
@media (min-width:1000px){.two-col{grid-template-columns:1fr 320px;gap:var(--s7);align-items:start}}
.side-nav{display:grid;gap:var(--s1)}
@media (min-width:1000px){.side-nav{position:sticky;top:calc(var(--nav-h) + var(--s5))}}
.side-nav a{padding:10px 14px;border-radius:12px;font-weight:700;color:var(--ink-2);font-size:14.5px;transition:background .2s,color .2s}
.side-nav a:hover,.side-nav a.on{background:#fff;color:var(--forest)}
.side-nav a.btn,.side-nav a.btn:hover{color:#fff;background:var(--forest)}
.filters{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s5)}
.filters button{height:40px;padding:0 16px;border-radius:999px;background:#fff;font-weight:800;font-size:14px;box-shadow:var(--sh-sm);transition:background .2s,color .2s,transform .3s var(--spring)}
.filters button:hover{transform:translateY(-2px)}
.filters button[aria-pressed="true"]{background:var(--forest);color:#fff}
.pcard.hide{display:none}
.plan-grid{display:grid;gap:var(--gap)}
@media (min-width:900px){.plan-grid{grid-template-columns:repeat(3,1fr)}}
.plan{background:#fff;border-radius:var(--r-xl);padding:var(--s5);display:grid;gap:var(--s4);box-shadow:var(--sh-sm);position:relative;overflow:hidden;transition:transform .4s var(--spring);align-content:start}
.plan:hover{transform:translateY(-4px)}
.plan.hot{background:var(--forest);color:#fff}
.plan.hot h3,.plan.hot .price{color:#fff}
.plan.hot .price .sub{color:var(--sage)}
.plan ul{display:grid;gap:var(--s2);font-size:14.5px}
.plan ul li{display:flex;gap:10px;align-items:flex-start}
.plan ul li svg{width:18px;height:18px;color:var(--leaf);flex:none;margin-top:3px}
.plan ul li span{flex:1}
.plan.hot ul li svg{color:var(--sage)}
.plan .art{height:160px;display:flex;align-items:flex-end;justify-content:center;gap:var(--s3);border-radius:var(--r-lg);background:var(--sage-3);padding:var(--s3)}
.plan.hot .art{background:var(--forest-3)}
.plan .art img{max-height:100%;width:auto;filter:drop-shadow(0 14px 16px rgba(14,47,36,.28))}
.plan .art img.sm{max-height:70%}
.plan .ribbon{position:absolute;top:18px;right:-34px;transform:rotate(38deg);background:var(--sage);color:var(--forest);font-size:11px;font-weight:900;letter-spacing:.1em;padding:6px 40px;text-transform:uppercase;z-index:2}
.contact-grid{display:grid;gap:var(--gap)}
@media (min-width:1000px){.contact-grid{grid-template-columns:1fr .8fr;gap:var(--s7);align-items:start}}
.help-links{display:grid;gap:var(--s2)}
.help-links a{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);background:#fff;border-radius:var(--r-md);padding:var(--s4);font-weight:800;box-shadow:var(--sh-sm);transition:transform .3s var(--spring)}
.help-links a:hover{transform:translateX(4px)}
.help-links a svg{width:18px;height:18px;color:var(--leaf);flex:none}
.values{display:grid;gap:var(--gap);grid-template-columns:1fr}
@media (min-width:560px){.values{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.values{grid-template-columns:repeat(4,1fr)}}
.value{background:#fff;border-radius:var(--r-lg);padding:var(--s5);display:grid;gap:var(--s2);box-shadow:var(--sh-sm);align-content:start}
.value .ico{width:44px;height:44px;border-radius:14px;background:var(--forest);color:var(--sage);display:grid;place-items:center}
.value .ico svg{width:22px;height:22px}
.value b{font-size:16px}
.value p{font-size:14px;color:var(--muted)}
.story{display:grid;gap:var(--gap)}
@media (min-width:1000px){.story{grid-template-columns:1fr 1fr;gap:var(--s7);align-items:center}}
.story .photo{aspect-ratio:4/5;max-height:560px}
.calendar{background:#fff;border-radius:var(--r-xl);padding:var(--s5);box-shadow:var(--sh-md);display:grid;gap:var(--s3);color:var(--ink)}
.calendar .cal-head{display:flex;justify-content:space-between;align-items:center;font-weight:800;gap:var(--s3);flex-wrap:wrap}
.cal-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.cal-grid .wk{height:36px;border-radius:10px;background:var(--light);display:grid;place-items:center;font-size:11.5px;font-weight:800;color:var(--muted);transition:background .3s,color .3s,transform .4s var(--spring)}
.cal-grid .wk.ship{background:var(--forest);color:#fff;transform:scale(1.06)}
.cal-grid .wk.ship span{display:none}
.cal-grid .wk.ship::after{content:"";width:14px;height:14px;background:var(--sage);mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'><path d='M21 8 12 3 3 8v8l9 5 9-5V8Zm-9 2.6L6.4 8 12 5.1 17.6 8 12 10.6Z'/></svg>") center/contain no-repeat}
.cal-grid .wk.low{background:var(--kraft-2);color:var(--forest)}
.sub-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.sub-stats div{background:var(--sage-3);border-radius:var(--r-md);padding:var(--s3);display:grid;gap:2px}
.sub-stats b{font-family:var(--font-display);font-size:20px;letter-spacing:-.02em;color:var(--forest)}
.sub-stats span{font-size:12px;color:var(--muted);font-weight:700}
.subs{display:grid;gap:var(--gap)}
@media (min-width:1000px){.subs{grid-template-columns:.95fr 1.05fr;gap:var(--s7);align-items:center}}
.cadence{display:grid;gap:var(--s3)}

/* ==========================================================================
   Motion utilities
   ========================================================================== */
[data-reveal]{opacity:0;transform:translateY(28px);will-change:transform,opacity}
[data-reveal="fade"]{transform:none}
[data-reveal="left"]{transform:translateX(-40px)}
[data-reveal="right"]{transform:translateX(40px)}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal].in,.no-js [data-reveal],.reduce [data-reveal]{opacity:1;transform:none}
.float{animation:float 6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.wag:hover{animation:wag .7s var(--spring)}
@keyframes wag{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}60%{transform:rotate(5deg)}}
.reduce *,.reduce *::before,.reduce *::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}

/* ---- product-card art variants ---- */
.pcard .art.photo-art{padding:0}
.pcard .art img.fill{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;object-position:var(--fx,50%) var(--fy,50%);filter:none}
.pcard:hover .art img.fill{transform:scale(1.04)}
.pcard .art.hang{align-items:flex-start;padding-top:0}
.pcard .art.hang img{max-height:96%}
.step .art .tile-img,.plan .art .tile-img{height:100%;width:auto;max-width:100%;border-radius:16px;object-fit:cover;filter:none}
.bundle-art .plus{z-index:2}

/* ---- audit fixes: comparison sizing, logo scale, hero product on phones ---- */
.cmp2-stage{overflow:visible;grid-template-columns:1fr auto 1fr;grid-template-areas:"l eq r" "foot foot foot"}
.cmp2-side.little{grid-area:l}.cmp2-side.big{grid-area:r}.cmp2-eq{grid-area:eq}
.cmp2-side{min-width:0}
.cmp2-floor{gap:var(--s3)}
.cmp2-floor img{object-fit:contain;object-position:bottom}
.cmp2-dog{max-width:40%}
.cmp2-bag{max-width:58%}
.cmp2-side.little{--dog:34%;--bag:34%}
.cmp2-side.big{--dog:94%;--bag:46%}
.cmp2-eq{padding-bottom:var(--s8)}
.cmp2-eq .same{display:none}
.cmp2-foot{grid-area:foot;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s2);padding-top:var(--s2)}
.cmp2-foot .chip{height:30px;font-size:12.5px}
@media (max-width:560px){.cmp2-side .lbl small{display:none}.cmp2-side.little{--dog:30%;--bag:30%}.cmp2-side.big{--dog:88%;--bag:42%}.cmp2-floor{--floor:180px}}

@media (min-width:720px){.cmp3{padding:var(--s7) var(--s7) var(--s6);gap:var(--s6)}}
/* Find Your Fit stage: definite height so % dog sizes resolve and the card never stretches */
.fit-stage{height:clamp(280px,30vw,380px);min-height:0}
@media (min-width:1000px){.fit{align-items:start}}
.fit-stage .stage-dog img{max-height:100%}
.fit-stage{display:flex;align-items:flex-end;justify-content:center}
.fit-stage .stage-dog{margin-bottom:12%}

/* ---- vector logo: crisp at any size, recolours by context ---- */
.logo-svg{height:40px;width:auto;display:block;overflow:visible}
.logo-svg.compact{height:30px}
@media (min-width:1100px){.logo-svg.compact{height:36px}}
.footer .logo-svg{height:64px}
.logo-svg .w1,.logo-svg .tm,.logo-svg .tag{fill:var(--forest)}
.logo-svg .w2{fill:var(--leaf)}
.logo-svg .toe{fill:var(--leaf)}
.logo-svg .palm{fill:var(--forest)}
.logo-svg .leaf{fill:var(--sage-2)}
.logo-svg .vein{stroke:var(--forest)}
.logo-svg .rule{stroke:var(--sage)}
.footer .logo-svg .w1,.footer .logo-svg .tm,.footer .logo-svg .tag{fill:#fff}
.footer .logo-svg .w2,.footer .logo-svg .toe{fill:var(--sage)}
.footer .logo-svg .palm{fill:var(--sage-3)}
.footer .logo-svg .leaf{fill:var(--forest)}
.footer .logo-svg .vein{stroke:var(--sage-3)}
.footer .logo-svg .rule{stroke:rgba(255,255,255,.45)}

.hdr-actions .icon-btn svg{width:22px;height:22px;display:block}
.hdr-actions{gap:var(--s1)}

/* ---- hero product card: glass panel inside the photo, never overhangs ---- */
.hero-card{position:absolute;right:var(--s4);bottom:var(--s4);left:auto;z-index:4;display:flex;align-items:center;gap:var(--s3);padding:10px 14px 10px 10px;border-radius:20px;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--sh-md);color:var(--forest);transition:transform .35s var(--spring),box-shadow .3s;max-width:calc(100% - 2 * var(--s4))}
.hero-card:hover{transform:translateY(-3px);box-shadow:var(--sh-lg)}
.hero-card img{height:56px;width:auto;flex:none;filter:drop-shadow(0 8px 10px rgba(14,47,36,.25));transition:transform .6s var(--spring)}
.hero-card:hover img{transform:rotate(-4deg) scale(1.05)}
.hero-card .t{display:grid;gap:2px;min-width:0}
.hero-card .t b{font-family:var(--font-display);font-size:16px;letter-spacing:-.01em;white-space:nowrap}
.hero-card .t span{font-size:13px;font-weight:700;color:var(--leaf)}
.hero-card .go{width:36px;height:36px;border-radius:50%;background:var(--forest);color:#fff;display:grid;place-items:center;flex:none;transition:transform .3s var(--spring)}
.hero-card .go svg{width:16px;height:16px}
.hero-card:hover .go{transform:translateX(3px)}
.hero[data-fit="big"] .hero-card img{height:64px}
@media (max-width:560px){.hero-card{left:var(--s3);right:var(--s3);bottom:var(--s3);padding:8px 10px 8px 8px}.hero-card img{height:48px}.hero-card .t b{font-size:15px}}


.step .link{justify-self:start;font-size:14.5px}
.step{grid-template-rows:auto auto 1fr auto auto}
/* mobile menu footer: three equal pills */
.mobile-nav .mn-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.mobile-nav .mn-foot > *{height:40px;padding:0 12px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:700;background:rgba(255,255,255,.12);color:#fff;box-shadow:none;width:100%}
.mobile-nav .mn-foot .region .flag{width:18px;height:18px}
.mobile-nav .mn-foot .chip svg{width:16px;height:16px;color:var(--sage)}

/* ==========================================================================
   Little vs Big: two product tiles, equal height, honest relative scale
   ========================================================================== */
.logo img{height:40px}
.cmp3{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);max-width:960px;margin-inline:auto}
@media (min-width:720px){.cmp3{gap:var(--s5)}}
.cmp3-side{position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:var(--s3);padding:var(--s4);border-radius:var(--r-xl);min-width:0;transition:transform .4s var(--spring),box-shadow .4s;box-shadow:var(--sh-sm)}
@media (min-width:720px){.cmp3-side{padding:var(--s5)}}
.cmp3-side:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.cmp3-side.little{background:#fff}
.cmp3-side.big{background:var(--forest);color:#fff}
.cmp3-side .tag{justify-self:start}
.cmp3-floor{display:flex;align-items:flex-end;justify-content:center;gap:6%;height:var(--floor,220px);width:100%}

/* Everything on a floor is sized by HEIGHT against that floor, never by a
   share of the card's width. Sized by width, the puppy (26%) was drawn
   wider than the Dane (22%), and on a narrow phone card the "big" dog came
   out smaller than the small one. By height the Dane fills the floor and the
   puppy stands at a third of it, which is roughly their real ratio, at every
   width. */
.cmp3-floor img{width:auto;object-fit:contain;object-position:bottom;filter:drop-shadow(0 14px 16px rgba(14,47,36,.28));transition:transform .6s var(--spring)}
.cmp3-side:hover .roll{transform:translateY(-4px)}
.cmp3-side.little .roll{height:36%}
.cmp3-side.little .dog{height:34%}
.cmp3-side.big .roll{height:47%}
.cmp3-side.big .dog{height:100%}
/* phone overrides come after the base rules they override */
@media (max-width:560px){
  .cmp3-floor{--floor:132px;gap:3%}
  /* a phone card is narrow: the Dane at full floor height was wider than
     the room beside the roll and ran out through the card's edge, so each
     image also gets a width ceiling and the pair sits a touch smaller */
  .cmp3-floor img{max-width:58%}
  .cmp3-side.big .dog{height:92%}
  .cmp3-side.big .roll{height:40%}
  .cmp3-side.little .roll{height:32%}
}
.cmp3-lbl{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.cmp3-lbl b{font-family:var(--font-display);font-weight:700;font-size:clamp(17px,2.2vw,26px);letter-spacing:-.02em;color:inherit}
.cmp3-side.little{color:var(--forest)}
.cmp3-dims{font-size:12.5px;font-weight:800;color:var(--muted);white-space:nowrap}
.cmp3-side.big .cmp3-dims{color:var(--sage)}
.cta-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);max-width:480px;margin:var(--s6) auto 0}
.cta-pair .btn{width:100%;padding:0 12px;white-space:normal;text-align:center;line-height:1.1}

/* ==========================================================================
   Tokens replacing inline styles (item 10)
   ========================================================================== */
.fp-1{--fx:50%;--fy:50%}
.fp-2{--fx:50%;--fy:45%}
.fp-3{--fx:45%;--fy:70%}
.fp-4{--fx:50%;--fy:40%}
.fp-5{--fx:50%;--fy:62%}
.fp-6{--fx:40%;--fy:50%}
.fp-7{--fx:42%;--fy:92%}
.fp-8{--fx:38%;--fy:55%}
.fp-9{--fx:55%;--fy:58%}
.fp-10{--fx:50%;--fy:70%}
.fp-11{--fx:50%;--fy:66%}
.fp-12{--fx:35%;--fy:50%}
.fp-hero-sm{--fx:50%;--fy:54%}
.fp-hero-lg{--fx:50%;--fy:44%}
.ico-s{--s:30px}.ico-m{--s:40px}.ico-l{--s:48px}.ico-xl{--s:56px}
.rot-180{transform:rotate(180deg)}.mt-3{margin-top:var(--s3)}.mt-4{margin-top:var(--s4)}.mb-3{margin-bottom:var(--s3)}.mb-5{margin-bottom:var(--s5)}
.js-start{justify-self:start}.as-start{align-self:start}.fs-inherit{font-size:inherit}.fs-17{font-size:17px}.fs-26{font-size:26px}
.maxh-full{max-height:100%!important}.maxh-90{max-height:90%!important}.maxh-82{max-height:82%!important}.maxh-78{max-height:78%!important}.maxh-44{max-height:44%!important}
.cols-4{grid-template-columns:repeat(4,1fr)!important}.cols-5{grid-template-columns:repeat(5,1fr)!important}
.card-pad{padding:var(--s5);display:grid;gap:var(--s4)}.card-pad-sm{padding:var(--s4);display:grid;gap:var(--s2)}
.stack-xl{display:grid;gap:var(--s6)}.maxw-none{max-width:none}.maxw-820{max-width:820px}.w-max{width:max-content}
.c-forest{color:var(--forest)}.c-ink2{color:var(--ink-2)}.c-sage{color:var(--sage)}.c-white{color:#fff}.c-white70{color:rgba(255,255,255,.7)}
.bg-forest{background:var(--forest);color:#fff}.h-52{--h:52%}
.art-cta{aspect-ratio:auto;height:100%;min-height:220px;background:transparent;align-content:center;display:grid;gap:var(--s3);padding:var(--s2)}

/* ==========================================================================
   Accessibility pass (items 5, 6, 12)
   ========================================================================== */
:root{--leaf-text:#3F6A42;--muted:#5E6B63}
.eyebrow{color:var(--leaf-text)}
.price .sub{color:var(--leaf-text)}
.btn-leaf,.tag.leaf{background:var(--leaf-2)}
.small,.tbc-note,.cmp3-dims,.pcard .meta p,.proof-item p,.value p,.step .num{color:var(--muted)}
.step .num{color:var(--sage-2)}
/* 44px minimum hit areas */
.logo{min-height:44px;display:inline-flex;align-items:center}
.link{min-height:44px;display:inline-flex;align-items:center}
.footer ul{gap:0}
.footer ul a{display:inline-flex;align-items:center;min-height:44px}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;padding-inline:2px}
.crumbs{padding-block:0}
.filters button{height:44px}
.qty-ctl button{width:44px;height:44px}
.cart-line .qty button{width:36px;height:36px}
.region{height:44px;padding:0 12px 0 8px}
.bar{height:44px}
:root{--bar-h:44px}
.purchase input{width:44px;height:44px;border:0;background:transparent;position:relative;display:grid;place-items:center}
.purchase input::before{content:"";width:22px;height:22px;border-radius:50%;border:2px solid var(--line-2);background:#fff;grid-area:1/1;transition:border-color .2s}
.purchase input::after{grid-area:1/1}
.purchase input:checked::before{border-color:var(--forest)}
.purchase label{grid-template-columns:44px 1fr auto;padding-left:var(--s2)}
.hero-card .go{width:44px;height:44px}
.prose .link,.acc-body .link,.small .link,p .link{min-height:0;display:inline;padding-block:12px}

/* ==========================================================================
   Sticky buy bar, phones only (item 3)
   ========================================================================== */

.fp-13{--fx:45%;--fy:55%}.maxh-70{max-height:70%!important}.maxh-88{max-height:88%!important}.mx-auto{margin-inline:auto}.jc-center{justify-content:center}.mt-6{margin-top:var(--s6)}
.footer .tbc-note{color:rgba(255,255,255,.62)}
.section-forest .why-list li span{color:rgba(255,255,255,.78)}

/* ---- acceptance pass 2: remaining targets + contrast on dark cards ---- */
.footer ul a,.crumbs a{min-width:44px}
.link{min-width:44px}
.btn-sm{height:44px}
.side-nav a{display:flex;align-items:center;min-height:44px}
.prose .link,.acc-body .link,.small .link,p .link{display:inline-block;min-height:0;padding-block:12px;margin-block:-12px;vertical-align:baseline}
.btn:disabled,.btn:disabled:hover{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}
.ico-inline{display:inline-block;width:1em;height:1em;vertical-align:-.15em;margin-right:4px;color:var(--leaf)}
/* svgs are block by default; inside an inline link the arrow has to stay on the text's line */
.prose .link svg,.acc-body .link svg,.small .link svg,p .link svg{display:inline-block;vertical-align:-.15em;margin-left:6px}
.cart-line .qty button{width:44px;height:44px}
.cart-line .qty{padding:0;background:transparent}
.card-forest .eyebrow,.bg-forest .eyebrow,.section-forest .eyebrow,.bundle .eyebrow{color:var(--sage)}
.card-forest .small,.bg-forest .small{color:rgba(255,255,255,.72)}
.card-forest .link,.bg-forest .link{color:#fff;border-color:rgba(255,255,255,.45)}
.purchase .p small{color:var(--leaf-text)}