/* 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.

   v5: the plate sits on viz-base.jpg, whose label is a real printed charcoal field
   with paper texture and a die-cut edge shadow. The plate therefore has to READ AS
   PRINTING ON THAT WRAPPED LABEL, not as a rectangle pasted on a jar. It does that by
   covering exactly the measured printed field (LABEL_POS.viz) and by carrying the
   cylinder's own light in its background -- darkened at both wrap edges where the
   label turns away from camera, lifted slightly through the middle where it bulges.
   The shading is part of the background, so it sits UNDER the type and cannot eat the
   small print. Sized in cqw AND cqh via min() so it fits both axes of the rect. */
.plate,.onjar{
  position:absolute;
  background:
    linear-gradient(90deg,
      rgba(0,0,0,.30) 0%, rgba(0,0,0,.10) 6%, rgba(0,0,0,0) 13%,
      rgba(255,255,255,.055) 50%,
      rgba(0,0,0,0) 87%, rgba(0,0,0,.10) 94%, rgba(0,0,0,.30) 100%),
    var(--pl-bg,#221d19);
  color:var(--pl-fg,#f4ece0);
  border-radius:1.5px;
  overflow:hidden;
  container-type:size;
  box-shadow:0 1px 3px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.07);
  transition:color .25s ease;
}
/* 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. */
.pl-inner{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:space-between;
  text-align:left;padding:9px;gap:.34em;
}
.plate span,.onjar span{display:block;max-width:100%;overflow-wrap:anywhere}
.pl-top{
  display:flex;align-items:baseline;justify-content:space-between;gap:.5em;
  border-bottom:1.5px solid var(--pl-accent,#c8642c);padding-bottom:.5em;
}
.pl-brand{font-family:"Fraunces",Georgia,serif;font-weight:700;letter-spacing:.07em;line-height:1;font-size:.72rem}
.pl-mark{color:var(--pl-accent,#c8642c);font-weight:700;letter-spacing:.05em;white-space:nowrap;font-size:.45rem;line-height:1}
.pl-mid{display:flex;flex-direction:column;gap:.32em;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. Without it the taller label
   rect left the bottom of the composition empty and the footer floated. */
.pl-foot{
  letter-spacing:.07em;text-transform:uppercase;opacity:.86;font-size:.46rem;line-height:1.28;
  border-top:1px solid var(--pl-accent,#c8642c);padding-top:.55em;
}

@supports (container-type:size){
  .pl-inner{padding:7cqw 8cqw}
  .pl-brand{font-size:min(12cqw,14cqh)}
  .pl-mark{font-size:min(5.2cqw,6.2cqh)}
  .pl-line{font-size:min(8cqw,10cqh)}
  .pl-act{font-size:min(5.2cqw,6.2cqh)}
  .pl-foot{font-size:min(4.8cqw,5.6cqh)}
  /* 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}
  }
  /* Threshold is 170px, not 150px. `.pl-foot` is 4.8cqw, so it drops below 8px on any
     plate narrower than 166.7px -- a 150-167px dead band where the fine print rendered
     at 7.78px and was unreadable. QA measured the crossover; 170 sits above it.
     The height rule catches a plate that is wide but short, where cqh, not cqw, binds. */
  @container (max-width:170px){
    .plate .pl-mark,.onjar .pl-mark,
    .plate .pl-foot,.onjar .pl-foot{display:none}
  }
  @container (max-height:145px){
    .plate .pl-mark,.onjar .pl-mark,
    .plate .pl-foot,.onjar .pl-foot{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);
}
.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)}
.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}
}