/* NexMach Pet — design system v2
   Direction: warm, image-led, appetite-forward. Cream base, espresso ink,
   burnt-amber accent, deep green for compliance. Photography carries the page;
   type and rules stay quiet.

   v1 was cold and text-only. v2 fixes the actual failure: a pet nutrition site
   with no animals, no packs and no badges reads as a dead site. */

:root{
  --cream:#fbf7f1;
  --cream-2:#f4ece0;
  --sand:#ece1d0;
  --line:#e3d8c6;
  --ink:#1c1815;
  --ink-2:#3a322b;
  --muted:#6d635a;
  --amber:#c2601f;
  --amber-2:#e08a3c;
  --amber-3:#f6e3d0;
  --green:#2e6b4a;
  --green-2:#e2efe7;

  --maxw:1200px;
  --r:10px;
  --r-sm:6px;
  --shadow:0 1px 2px rgba(28,24,21,.05),0 14px 34px -18px rgba(28,24,21,.35);
  --shadow-lg:0 2px 4px rgba(28,24,21,.05),0 30px 60px -28px rgba(28,24,21,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:16.5px;line-height:1.66;-webkit-font-smoothing:antialiased;
}
/* height:auto is load-bearing. The HTML width/height attributes are presentational
   hints that set a used height, so with max-width alone a 1536x1024 facility photo
   was being squashed into 365x1024 -- object-fit:fill, badly distorted. */
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--amber)}

h1,h2,h3,h4{
  font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.1;
  letter-spacing:-.018em;margin:0 0 .5em;color:var(--ink);
}
h1{font-size:clamp(2.3rem,5.6vw,4rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.6rem)}
h3{font-size:1.2rem;letter-spacing:-.008em}
p{margin:0 0 1em}
strong{font-weight:600}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px}
.narrow{max-width:820px;margin:0 auto}
section{padding:84px 0}
section.tight{padding:56px 0}
section.flush{padding:0}
.bg-cream2{background:var(--cream-2)}
.bg-sand{background:var(--sand)}
.bg-ink{background:var(--ink);color:#e8ded2}
.bg-ink h1,.bg-ink h2,.bg-ink h3{color:#fdfaf5}
.bg-ink a{color:#fdfaf5}
.bg-ink a:hover{color:var(--amber-2)}
.bg-ink .muted{color:#a99c8e}
.bg-green{background:var(--green);color:#e6f0e9}
.bg-green h1,.bg-green h2,.bg-green h3{color:#fff}
.bg-green a{color:#fff}
.bg-green .muted{color:#bcd4c4}

.muted{color:var(--muted)}
.small{font-size:.88rem}
.center{text-align:center}
.mt0{margin-top:0}.mb0{margin-bottom:0}

.eyebrow{
  font-size:.73rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--amber);margin:0 0 14px;
}
.bg-ink .eyebrow,.bg-green .eyebrow{color:var(--amber-2)}
.lede{font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--ink-2);max-width:62ch}
.bg-ink .lede{color:#d3c7b9}
.bg-green .lede{color:#cfe0d3}
.lede-lg{font-size:clamp(1.1rem,2vw,1.45rem);color:var(--ink-2);max-width:64ch}

/* ---------------- header ---------------- */
header.site{
  position:sticky;top:0;z-index:60;
  background:rgba(251,247,241,.93);backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
header.site .bar{
  display:flex;align-items:center;gap:26px;
  max-width:var(--maxw);margin:0 auto;padding:14px 26px;
}
.brand{
  font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:1.22rem;
  letter-spacing:-.025em;white-space:nowrap;display:flex;align-items:center;gap:9px;
}
.brand .paw{width:22px;height:22px;flex:none;color:var(--amber)}
.brand em{font-style:normal;color:var(--amber)}
nav.main{margin-left:auto;display:flex;gap:23px;align-items:center}
nav.main a{
  font-size:.9rem;font-weight:500;white-space:nowrap;
  padding:4px 0;border-bottom:2px solid transparent;
}
nav.main a:hover{border-bottom-color:var(--amber)}
nav.main a[aria-current="page"]{border-bottom-color:var(--ink);font-weight:600}

.btn{
  display:inline-block;background:var(--amber);color:#fff!important;
  border:2px solid var(--amber);border-radius:999px;
  padding:12px 24px;font-size:.9rem;font-weight:600;white-space:nowrap;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.btn:hover{background:var(--ink);border-color:var(--ink);color:#fff!important;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink)!important;border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff!important}
.btn.on-ink{background:var(--amber-2);border-color:var(--amber-2)}
.btn.on-ink:hover{background:#fff;border-color:#fff;color:var(--ink)!important}
.btn.lg{padding:15px 30px;font-size:.97rem}
header.site .btn{padding:10px 20px;font-size:.86rem}

/* ---------------- hero ---------------- */
.hero{background:var(--cream);padding:0;overflow:hidden}
.hero .grid2{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);align-items:stretch;
  max-width:var(--maxw);margin:0 auto;
}
.hero .copy{padding:78px 26px 78px 26px;display:flex;flex-direction:column;justify-content:center}
.hero .copy .inner{max-width:34rem}
.hero .actions{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero .shot{position:relative;min-height:520px}
.hero .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--cream) 0%,rgba(251,247,241,0) 22%);
}
.hero .badgeline{
  display:flex;gap:16px;flex-wrap:wrap;margin-top:26px;
  font-size:.83rem;color:var(--muted);
}
.hero .badgeline span{display:flex;align-items:center;gap:7px}
.hero .badgeline svg{width:15px;height:15px;color:var(--green);flex:none}

/* ---------------- trust strip ---------------- */
.strip{background:var(--ink);color:#ded2c4}
.strip .row{
  max-width:var(--maxw);margin:0 auto;padding:0 26px;
  display:grid;  grid-template-columns:repeat(4,minmax(0,1fr));
}
.strip .item{
  padding:30px 24px;border-left:1px solid #38312a;display:flex;gap:15px;align-items:flex-start;
}
.strip .item:first-child{border-left:0}
.strip .item svg{width:26px;height:26px;flex:none;color:var(--amber-2);margin-top:2px}
.strip .item b{display:block;font-family:"Fraunces",serif;font-size:1.02rem;color:#fdfaf5;margin-bottom:3px}
.strip .item span{font-size:.84rem;line-height:1.5;color:#a99c8e}

/* ---------------- image + copy rows ---------------- */
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.row2.imgfirst{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.shot-round{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg)}
.shot-round img{width:100%;height:100%;object-fit:cover}

.figure{margin:0}
.figure figcaption{font-size:.83rem;color:var(--muted);margin-top:12px}

/* ---------------- cards ---------------- */
.grid{display:grid;gap:26px}
.g2{  grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{  grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{  grid-template-columns:repeat(4,minmax(0,1fr))}

.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 26px}
.card h3{margin-bottom:.4em}
.card p:last-child{margin-bottom:0}
.card .tag{
  display:inline-block;font-size:.69rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--amber);margin-bottom:10px;
}
.bg-ink .card{background:#2a241f;border-color:#413931}
.bg-ink .card .tag{color:var(--amber-2)}

/* image card */
.icard{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease;
}
.icard:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.icard .ph{position:relative;aspect-ratio:1/1;background:var(--cream-2)}
.icard .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Every container photo is square and the label plate is positioned in percentages
   OF THE IMAGE BOX, so the box must stay 1:1 everywhere. A 4:3 crop shifted the
   plate off the printed panel and clipped the foreground chews. */
.icard.wide .ph{aspect-ratio:1/1}
.icard .bd{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.icard .bd h3{margin:0 0 6px}
.icard .bd .fmt{
  font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber);margin-bottom:12px;
}
.icard .bd .price{
  margin-top:auto;padding-top:18px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
}
.icard .bd .price b{font-family:"Fraunces",serif;font-size:1.28rem;font-weight:600}
.icard .bd .price span{font-size:.8rem;color:var(--muted)}
.dl-mini{margin:14px 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:7px 14px;font-size:.88rem}
.dl-mini dt{color:var(--muted)}
.dl-mini dd{margin:0;font-weight:500}

/* ---------------- full-bleed band ---------------- */
.band{position:relative;padding:0;min-height:520px;display:flex;align-items:center;overflow:hidden}
.band img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.band .scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(24,20,17,.86) 0%,rgba(24,20,17,.66) 46%,rgba(24,20,17,.18) 100%)}
.band .wrap{position:relative;z-index:2;padding-top:76px;padding-bottom:76px;width:100%}
.band .inner{max-width:36rem;color:#f6efe6}
.band h2{color:#fff}
.band p{color:#ddd2c4}

/* ---------------- badges ---------------- */
.badges{display:flex;flex-wrap:wrap;gap:12px}
.badge{
  display:flex;align-items:center;gap:9px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:10px 18px;font-size:.85rem;font-weight:500;
}
.badge svg{width:16px;height:16px;color:var(--green);flex:none}
.bg-ink .badge{background:#2a241f;border-color:#413931;color:#ded2c4}
.bg-ink .badge svg{color:var(--amber-2)}

.iconrow{display:grid;  grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:10px}
.iconrow .it{text-align:center;padding:26px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--r)}
.iconrow .it svg{width:30px;height:30px;color:var(--amber);margin:0 auto 12px}
.iconrow .it b{display:block;font-family:"Fraunces",serif;font-size:1rem;margin-bottom:4px}
.iconrow .it span{font-size:.83rem;color:var(--muted);line-height:1.5}

/* Grid and flex children default to min-width:auto, so ANY wide descendant -- a
   table with min-width:560px, one long unbroken word -- pushes its track past the
   viewport. This was the single root cause of all three horizontal-overflow defects
   found in visual QA at 390px. Track sizing uses minmax(0,1fr) AND children get
   min-width:0, because either one alone can still be defeated. */
.grid > *,.row2 > *,.hero .grid2 > *,.strip .item,.iconrow .it,
footer.site .cols > *,.two-col > *{min-width:0}

/* ---------------- tables ---------------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:560px;background:#fff}
caption{text-align:left;font-size:.82rem;color:var(--muted);padding:0 0 12px}
th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{
  font-size:.71rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);border-bottom:2px solid var(--ink);background:var(--cream-2);
}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------------- steps ---------------- */
.steps{counter-reset:s;list-style:none;margin:0;padding:0}
.steps li{counter-increment:s;position:relative;padding:0 0 32px 66px;border-left:2px solid var(--line);margin-left:20px}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li::before{
  content:counter(s,decimal-leading-zero);position:absolute;left:-21px;top:-3px;
  width:44px;height:44px;border-radius:50%;background:var(--amber);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:"Fraunces",serif;font-size:.92rem;font-weight:600;
}
.steps li h3{margin-bottom:.35em}
.steps li p:last-child{margin-bottom:0}

/* ---------------- callout ---------------- */
.callout{border-left:4px solid var(--amber);background:#fff;padding:24px 26px;border-radius:0 var(--r) var(--r) 0}
.callout.warn{border-left-color:#a4701c}
.callout.ok{border-left-color:var(--green)}
.callout p:last-child{margin-bottom:0}
.bg-ink .callout{background:#2a241f}

/* ---------------- faq ---------------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;padding:20px 0;font-family:"Fraunces",serif;font-size:1.07rem;
  font-weight:600;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--amber);font-weight:400;font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 0 22px;max-width:78ch;color:var(--ink-2)}

/* ---------------- form ---------------- */
form.inq{display:grid;gap:19px}
.field{display:grid;gap:6px}
.field label{font-size:.83rem;font-weight:600}
.field .hint{font-size:.79rem;color:var(--muted)}
input,select,textarea{
  font:inherit;color:inherit;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:12px 14px;width:100%;
}
input:focus,select:focus,textarea:focus{outline:3px solid var(--amber-3);outline-offset:0;border-color:var(--amber)}
textarea{min-height:128px;resize:vertical}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:19px}
.req{color:var(--amber)}
.formnote{border:1px dashed var(--line);border-radius:var(--r);padding:18px 20px;font-size:.86rem;color:var(--ink-2);background:var(--cream-2)}
.formmsg{display:none;padding:16px 18px;border-radius:var(--r);font-size:.92rem}
.formmsg.show{display:block}
.formmsg.good{background:var(--green-2);border:1px solid #b6d3c1;color:#1e4a33}
.formmsg.bad{background:#f9e9dd;border:1px solid #e5c3a6;color:#7a3f1c}

/* ---------------- footer ---------------- */
footer.site{background:var(--ink);color:#a99c8e;padding:64px 0 36px;font-size:.89rem}
footer.site h4{color:#fdfaf5;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;font-family:"Archivo",sans-serif;margin-bottom:15px}
footer.site a{color:#ded2c4}
footer.site a:hover{color:var(--amber-2)}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
footer.site .cols{display:grid;grid-template-columns:1.6fr minmax(0,1fr) minmax(0,1fr) 1.1fr;gap:36px}
footer.site .brand{color:#fdfaf5;margin-bottom:12px}
footer.site .legal{
  margin-top:44px;padding-top:24px;border-top:1px solid #38312a;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:.8rem;color:#8b8078;
}

/* ---------------- utilities ---------------- */
.hr{border:0;border-top:1px solid var(--line);margin:0}
.list-plain{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.list-plain li{position:relative;padding-left:24px}
.list-plain li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;background:var(--amber);border-radius:50%}
.bg-ink .list-plain li::before{background:var(--amber-2)}
.cta-box{background:var(--green);border-radius:var(--r);padding:52px 46px;color:#e6f0e9}
.cta-box h2{color:#fff;margin-top:0}
.cta-box .lede{color:#cfe0d3;margin-bottom:26px}

/* ---------------- responsive ---------------- */
@media (max-width:1040px){
  .hero .grid2{grid-template-columns:1fr}
  .hero .copy{padding:56px 26px 40px}
  .hero .copy .inner{max-width:none}
  .hero .shot{min-height:400px}
  .hero .shot::after{background:linear-gradient(180deg,var(--cream) 0%,rgba(251,247,241,0) 14%)}
  .g4{  grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip .row{  grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip .item:nth-child(3){border-left:0}
  .strip .item:nth-child(n+3){border-top:1px solid #38312a}
  .iconrow{  grid-template-columns:repeat(2,minmax(0,1fr))}
  footer.site .cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:820px){
  section{padding:60px 0}
  .row2,.row2.imgfirst{grid-template-columns:1fr;gap:34px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .band{min-height:0}
  .band .scrim{background:linear-gradient(180deg,rgba(24,20,17,.55) 0%,rgba(24,20,17,.88) 60%)}
  header.site .bar{flex-wrap:wrap;gap:12px;padding:12px 18px}
  /* QA found the last nav link clipped ("About" -> "Abou") at 390px when the row
     scrolled. Wrapping on two lines is the safe fix: nothing is ever cut off. */
  nav.main{
    order:3;width:100%;margin-left:0;
    flex-wrap:wrap;gap:8px 16px;overflow:visible;padding-bottom:2px;
  }
  nav.main a{font-size:.84rem}
  header.site .btn{margin-left:auto;padding:9px 16px;font-size:.83rem}
  .two-col{grid-template-columns:1fr}
  .cta-box{padding:38px 26px}
  .steps li{padding-left:54px;margin-left:18px}
  .steps li::before{width:38px;height:38px;left:-19px;font-size:.82rem}
  footer.site .cols{grid-template-columns:1fr;gap:28px}
}
@media print{
  header.site,footer.site,.btn{display:none}
  body{background:#fff}
}

/* ======================================================================
   v3 additions — label plates, the visualizer, animated counters
   ====================================================================== */

/* ---- the label, typeset live -----------------------------------------------
   ONE place only: the label preview tool on the home page. Product cards no longer
   carry a plate -- they ship finished photographs with the label artwork printed in.

   v6: the plate sits on viz-base.jpg, whose label is a REAL PRINTED CREAM FIELD on a
   photographed jar. The plate paints NO opaque background of its own -- it lays the
   chosen colour over that cream field with `mix-blend-mode: multiply` (.pl-tint), so
   the paper's fibre, the cylinder's curvature and the studio light all survive the
   tint and the result reads as ink on that paper, not as a box stuck on a jar.

   v5, which the user rejected as cheap, painted a flat opaque box and set the wordmark
   in the site's DISPLAY SERIF (Fraunces). Real supplement labels -- including the four
   packs further down this very page -- set the wordmark in a heavy grotesk; the serif
   read as a newspaper masthead. Fixed since v5: sans wordmark, logo upload, finish
   selector, bracketed logo safe area, and cqw-based padding (it was a flat 9px, which
   ate 13% of a small plate).
   Sized in cqw AND cqh via min() so it fits both axes of the rect. */
.plate,.onjar{
  position:absolute;
  color:var(--pl-fg,#f4ece0);
  border-radius:1.5px;
  overflow:hidden;
  container-type:size;
  box-shadow:0 1px 2px rgba(0,0,0,.16);
  transition:color .25s ease;
}
/* The swatch colour as ink. multiply (not an opaque fill) is the whole trick: it keeps
   the photographed paper's luminance variation, which is what the eye reads as print. */
.pl-tint{position:absolute;inset:0;background:var(--pl-bg,#221d19);mix-blend-mode:multiply}
/* One graphic the printed packs also carry, at tone-on-tone strength. */
.pl-paw{
  position:absolute;right:9%;bottom:9%;width:34%;height:auto;opacity:.09;
  fill:#fff;pointer-events:none;
}
.plate .pl-inner,.onjar .pl-inner{z-index:2}
/* finish: matte is none, gloss a specular sweep, foil a metallic band. The sheen sits
   ABOVE the tint and BELOW the type, so it can never eat the small print. */
.pl-sheen{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s ease}
.fin-matte .pl-sheen{opacity:0}
.fin-gloss .pl-sheen{
  opacity:1;
  background:linear-gradient(112deg,
    rgba(255,255,255,0) 28%, rgba(255,255,255,.26) 43%,
    rgba(255,255,255,.05) 51%, rgba(255,255,255,0) 62%);
}
.fin-foil .pl-sheen{
  opacity:1;mix-blend-mode:screen;
  background:
    linear-gradient(104deg, rgba(255,214,140,0) 10%, rgba(255,232,180,.30) 25%,
      rgba(255,255,255,.10) 33%, rgba(255,214,140,0) 46%),
    linear-gradient(76deg, rgba(255,214,140,0) 54%, rgba(255,232,180,.24) 70%,
      rgba(255,214,140,0) 86%);
}
.fin-foil .pl-top,.fin-foil .pl-foot{border-color:#e3c489}
/* Padding must NOT be a percentage on .plate. Percentage padding resolves against the
   CONTAINING BLOCK -- the product photo -- not against the plate, so on a 265px image
   the plate lost ~42px per side and its content box collapsed to 53px. That made every
   cqw-based font size compute to ~3.6px. QA caught it by measurement.
   Fix: .plate carries no padding; .pl-inner is inset:0 so container units resolve
   against the plate itself, and the padding is expressed in cqw. */
/* flex-start, not space-between. With three blocks in a 236px-tall rect, space-between
   opened a ~36px hole between the brand block and the product line. Now the brand block
   and the middle block sit together and only the foot is pushed down. */
.pl-inner{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:flex-start;
  text-align:left;padding:min(6.4cqw,6.4cqh);gap:.55em;
}
.plate span,.onjar span{display:block;max-width:100%;overflow-wrap:anywhere}
/* ---- every display-critical rule in here is written with TWO classes -------------
   `.plate span{display:block}` is (0,1,1). A single-class selector like `.pl-top` is
   (0,1,0) and LOSES to it, so `display:flex` was silently dropped: the logo row never
   became a row, the paw sat on its own line, and the compliance chip stretched to the
   full label width instead of hugging its text. Same trap that hid the small print in
   an earlier round. Anything that must win is written `.plate .x,.onjar .x`. */

/* Stacked, not side by side -- the printed packs put the wordmark on its own row with the
   compliance chip beneath it. A side-by-side row left the wordmark only ~118px of content
   box, so a nine-letter brand overflowed and wrapped. */
.plate .pl-top,.onjar .pl-top{
  display:flex;flex-direction:column;align-items:flex-start;gap:.5em;
  border-bottom:1.5px solid var(--pl-accent,#c8642c);padding-bottom:.5em;
}
/* The logo safe area. Bracketed placeholder when empty, an uploaded mark when not; the
   mark is contained (never stretched) and capped so it cannot break the label grid. */
.plate .pl-logo,.onjar .pl-logo{
  display:flex;align-items:center;gap:.3em;min-width:0;max-width:100%;
}
.pl-logo.has-logo .pl-logopaw,.pl-logo.has-logo .pl-brand{display:none}
.pl-logopaw{width:.85em;height:.85em;flex:0 0 auto;fill:currentColor}
.pl-logomark{max-height:1.9em;max-width:100%;width:auto;object-fit:contain}
/* The `hidden` attribute is a UA rule (display:none) and LOSES to author styles -- and
   `.viz-pack img{width:100%}` is an author style. So the empty logo slot was not hidden
   at all: it rendered as a 92px-wide block and squeezed the wordmark down to 77px, which
   wrapped the placeholder onto three lines. Two classes + the attribute selector so it
   beats both. */
.plate .pl-logomark[hidden],.onjar .pl-logomark[hidden]{display:none}
/* Archivo, not Fraunces. The label wordmark is a heavy grotesk on every real pet
   supplement pack, including the four finished packs on this page. Setting it in the
   site's display serif is what made the tool read as a newspaper rather than a jar. */
.pl-brand{
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-weight:700;letter-spacing:.06em;line-height:1.06;
  font-size:.72rem;text-transform:uppercase;overflow-wrap:anywhere;
}
/* An outlined chip, matching the chip the printed packs carry. inline-block so it hugs
   its own text instead of being stretched by `.plate span`. */
.plate .pl-mark,.onjar .pl-mark{
  display:inline-block;color:var(--pl-accent,#c8642c);
  font-weight:700;letter-spacing:.06em;white-space:nowrap;font-size:.45rem;line-height:1;
  border:1px solid currentColor;border-radius:2px;padding:.34em .6em;
}
.plate .pl-mid,.onjar .pl-mid{display:flex;flex-direction:column;gap:.34em;padding:.1em 0}
.pl-line{font-weight:700;line-height:1.05;font-size:.6rem;letter-spacing:.005em}
.pl-act{opacity:.74;line-height:1.22;font-size:.5rem}
/* The foot carries a rule above it in the accent colour, the same construction the
   finished packs use for their count-and-net-weight line, and it is pinned to the bottom
   of the label by `margin-top:auto` so the composition anchors instead of floating.
   2-class selector: `.plate span{display:block}` would otherwise keep the margin trivial
   and the earlier version left a 36px hole between the middle block and a drifting foot. */
.plate .pl-foot,.onjar .pl-foot{margin-top:auto}
.pl-foot{
  letter-spacing:.055em;text-transform:uppercase;opacity:.86;line-height:1.3;
  border-top:1px solid var(--pl-accent,#c8642c);padding-top:.55em;
}

@supports (container-type:size){
  .pl-inner{padding:min(6.4cqw,6.4cqh)}
  /* 10.2cqw, not 12cqw. The stacked logo row gives the wordmark the full content box
     (~197px on the 226px plate), but an uploaded paw mark plus a nine-letter brand at
     12cqw measured ~213px and wrapped onto a second line. 10.2cqw lands ~183px. */
  /* 8.2cqw: the placeholder "[ YOUR BRAND ]" is the widest thing this row ever holds --
     14 characters plus the paw mark. At 10.2cqw it measured wider than the 197px content
     box and the closing bracket dropped onto a second line, which is what made the first
     render look broken. 8.2cqw keeps it on one line. */
  /* EVERY rule in here is written with two classes. This matters, and getting it half
     right is worse than not doing it: `.plate .pl-mark{font-size:.45rem}` is (0,2,0) and
     out-specifies a single-class `.pl-mark` (0,1,0), so the container-query size silently
     never applied and the chip sat at a fixed 7.2px. QA caught that at 1440x900. */
  .plate .pl-brand,.onjar .pl-brand{font-size:min(7.4cqw,9cqh)}
  .plate .pl-mark,.onjar .pl-mark{font-size:min(5cqw,6cqh)}
  .plate .pl-line,.onjar .pl-line{font-size:min(8cqw,10cqh)}
  .plate .pl-act,.onjar .pl-act{font-size:min(5.2cqw,6.2cqh)}
  /* 4.1cqw, not 4.8cqw: "90 SOFT CHEWS - NET 11 OZ (312 g)" is 34 characters and at
     4.8cqw it measured wider than the content box, breaking mid-parenthesis onto a
     second line. 4.1cqw fits it on one line at the main breakpoint.
     7.6cqw for the brand is set by the WIDEST thing the row ever holds -- the
     placeholder "[ YOUR BRAND ]", 14 characters plus the paw mark. At 8.2cqw that
     needed ~212px of a 197px content box and wrapped; 7.6cqw lands ~191px. */
  .plate .pl-foot,.onjar .pl-foot{font-size:min(4.1cqw,4.9cqh)}
  /* On a small plate the small print becomes unreadable noise rather than information,
     so the label SHEDS LINES instead of shrinking them into mush. The card copy under
     the photo carries all of it anyway.
     These selectors must out-specify `.plate span{display:block}` (0,1,1). Written as
     `.pl-act` they were (0,1,0) and silently lost the cascade -- QA caught the small
     print still rendering at 3.3px. Two classes win. */
  @container (max-width:175px){
    .plate .pl-act,.onjar .pl-act{display:none}
  }
  /* Each threshold is DERIVED from its own size, not guessed, and they are no longer
     shared. `.pl-foot` is 4.1cqw so it crosses 8px at 195px; `.pl-mark` is 5cqw so it
     crosses at 160px. A single shared 170px threshold left the fine print rendering at
     7.x px on any plate between 170 and 195px -- the same dead-band defect as before,
     just moved. The height rules catch a plate that is wide but short, where cqh binds. */
  @container (max-width:195px){
    .plate .pl-foot,.onjar .pl-foot{display:none}
  }
  @container (max-width:170px){
    .plate .pl-mark,.onjar .pl-mark{display:none}
  }
  @container (max-height:165px){
    .plate .pl-foot,.onjar .pl-foot{display:none}
  }
  @container (max-height:135px){
    .plate .pl-mark,.onjar .pl-mark{display:none}
  }
  @container (max-width:130px){
    .plate .pl-line,.onjar .pl-line{display:none}
  }
}

/* ---- animated counter band ---- */
.stats{background:var(--ink);color:#ded2c4;padding:0}
.statrow{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
.statrow li{
  padding:34px 26px;border-left:1px solid #38312a;
  display:flex;flex-direction:column;gap:6px;
}
.statrow li:first-child{border-left:0}
.statrow b{
  font-family:"Fraunces",Georgia,serif;font-weight:700;
  font-size:clamp(2.1rem,4.4vw,3.2rem);line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;
}
.statrow span{font-size:.84rem;line-height:1.5;color:#a99c8e}

/* ---- visualizer ---- */
.viz-sec{background:var(--cream-2)}
.viz-head{align-items:end;gap:40px;margin-bottom:42px}
.viz-head h2{font-size:clamp(1.6rem,3vw,2.3rem)}
.viz{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:52px;align-items:start;
  background:linear-gradient(180deg,#17383f 0%,#0f272c 100%);
  border-radius:var(--r);padding:44px;box-shadow:var(--shadow-lg);
}
.viz-stage{display:flex;flex-direction:column;gap:16px}
.viz-pack{
  position:relative;border-radius:var(--r);overflow:hidden;
  background:#e8dcc8;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  /* Contain the label's mix-blend-mode:multiply to this element, so .pl-tint blends
     against the jar photo and nothing else -- without it the tint would blend with the
     page behind the pack and the label would look washed out. */
  isolation:isolate;
}
.viz-pack img{width:100%;height:auto;display:block}
.viz-note{color:#a99c8e!important;margin:0;text-align:center}
.viz-controls{display:flex;flex-direction:column;gap:22px}
.viz-controls .field label{color:#f4ece0;font-size:.85rem}
.viz-controls .hint{color:#9fb0b2}
.viz-controls input,.viz-controls select{
  background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);color:#fbf7f1;
}
.viz-controls input::placeholder{color:#8b9a9c}
.viz-controls select option{color:#1c1815}
.viz-controls input:focus,.viz-controls select:focus{
  outline:3px solid rgba(224,138,60,.35);border-color:var(--amber-2);
}
.swatches{display:flex;gap:11px;flex-wrap:wrap}
.sw{
  width:40px;height:40px;border-radius:50%;cursor:pointer;padding:0;
  background:var(--sw);border:2px solid rgba(255,255,255,.32);
  transition:transform .15s ease,border-color .15s ease;
}
.sw:hover{transform:translateY(-2px)}
.sw.is-on{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.22)}
/* finish selector -- gives the label a physical finish rather than just a colour, which
   is one of the things that made the old tool read as a flat mockup. */
.fins{display:flex;gap:9px;flex-wrap:wrap}
.fin{
  font-family:inherit;font-size:.82rem;line-height:1;cursor:pointer;
  padding:10px 16px;border-radius:999px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);
  color:#fbf7f1;transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.fin:hover{background:rgba(255,255,255,.14)}
.fin.is-on{background:var(--amber-2);border-color:var(--amber-2);color:#241a10;font-weight:600}
/* optional-marker on a field label, and the remove-logo control */
.opt{color:#8b9a9c;font-weight:400;text-transform:none;letter-spacing:0;font-size:.78em}
.linkbtn{
  font-family:inherit;font-size:.78rem;cursor:pointer;background:none;border:0;padding:0;
  margin-top:2px;color:#e0a05a;text-decoration:underline;text-underline-offset:3px;text-align:left;
}
.linkbtn:hover{color:#f0b878}
/* file input, styled to sit in the dark panel like the text and select fields */
.viz-controls input[type=file]{
  width:100%;padding:11px 12px;border-radius:8px;font-size:.8rem;color:#cfd9da;
  background:rgba(255,255,255,.07);border:1px dashed rgba(255,255,255,.26);
}
.viz-controls input[type=file]::file-selector-button{
  font-family:inherit;font-size:.78rem;margin-right:12px;cursor:pointer;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);
  border-radius:6px;padding:6px 11px;color:#fbf7f1;
}
.viz-actions{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.14);padding-top:22px;
}
.viz-actions .muted{color:#9fb0b2!important}

/* ---- reveal on scroll (progressive: no JS, no animation) ---- */
.js .rv{opacity:0;transform:translateY(18px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.22,.7,.3,1)}
.js .icard{opacity:0;transform:translateY(20px)}
.js .icard.in{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.22,.7,.3,1)}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .icard{opacity:1!important;transform:none!important}
  html{scroll-behavior:auto}
}

@media (max-width:1040px){
  .statrow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .statrow li:nth-child(3){border-left:0}
  .statrow li:nth-child(n+3){border-top:1px solid #38312a}
  .viz{grid-template-columns:minmax(0,1fr);gap:34px;padding:34px}
}
@media (max-width:820px){
  .statrow{grid-template-columns:minmax(0,1fr)}
  .statrow li{border-left:0;border-top:1px solid #38312a;padding:24px 22px}
  .statrow li:first-child{border-top:0}
  .viz{padding:24px}
  .viz-head{align-items:start;gap:16px}
  .sw{width:36px;height:36px}
}