/* ============================================================
   APON FEED — stylesheet
   Palette: forest green + leaf green + gold (matches brand logo)
   ============================================================ */

:root{
  --ink:#0E3D1C;          /* forest green (primary dark, from logo) */
  --ink-2:#0A2E15;
  --ink-soft:#3C5A42;
  --body:#2E3A31;
  --muted:#67766B;
  --line:#E4E0D6;
  --cream:#FAF8F3;
  --cream-2:#F3F0E7;
  --white:#FFFFFF;
  --green:#8CC63F;        /* leaf green (logo swoosh highlight) */
  --green-2:#4E9A26;      /* leaf green (logo swoosh base) */
  --gold:#C9A227;         /* gold outline / "FEED" wordmark */
  --gold-lt:#E3C25C;
  --grad:linear-gradient(135deg,#4E9A26 0%,#8CC63F 100%);
  --grad-gold:linear-gradient(135deg,#C9A227 0%,#E3C25C 100%);
  --water-1:#9AD9E3;      /* pond shallows — motif only, never UI */
  --water-2:#2C7D96;      /* pond depth */

  --wrap:1180px;
  --r-sm:10px;
  --r:16px;
  --r-lg:24px;
  --sh-1:0 1px 2px rgba(11,61,52,.06), 0 4px 16px rgba(11,61,52,.06);
  --sh-2:0 12px 40px rgba(11,61,52,.10);
  --sh-3:0 24px 70px rgba(11,61,52,.16);

  --f-head:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:88px;
}

body{
  margin:0;
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  color:var(--body);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%;display:block}

h1,h2,h3{
  font-family:var(--f-head);
  color:var(--ink);
  line-height:1.14;
  letter-spacing:-.02em;
  margin:0 0 .5em;
  font-weight:700;
}
h1{font-size:clamp(2.5rem,6vw,4.1rem)}
h2{font-size:clamp(1.85rem,3.7vw,2.75rem)}
h3{font-size:1.16rem;font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1rem}
a{color:var(--green-2);text-decoration:none}
a:hover{text-decoration:underline}

:focus-visible{
  outline:3px solid var(--green-2);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:24px;
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fff;padding:12px 20px;
  border-radius:0 0 var(--r-sm) 0;font-weight:600;
}
.skip-link:focus{left:0}

/* ── buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--f-head);font-weight:600;font-size:.97rem;
  padding:.85rem 1.6rem;border-radius:100px;border:1.5px solid transparent;
  cursor:pointer;text-decoration:none!important;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:.6rem 1.15rem;font-size:.9rem}
.btn-block{width:100%}

.btn-primary{background:var(--grad);color:#08260F;box-shadow:0 6px 20px rgba(78,154,38,.30)}
.btn-primary:hover{box-shadow:0 12px 30px rgba(78,154,38,.38)}

.btn-ghost{background:transparent;color:var(--ink);border-color:rgba(11,61,52,.22)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(11,61,52,.04)}

.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-2)}

.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:var(--cream-2)}

/* ── header ──────────────────────────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(250,248,243,.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.site-header.is-stuck{
  border-bottom-color:var(--line);
  box-shadow:0 4px 24px rgba(11,61,52,.06);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;min-height:72px;
}

.brand{display:flex;align-items:center;gap:.7rem;min-width:0;text-decoration:none!important}
.brand-mark{height:40px;width:auto;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.brand-text strong{
  font-family:var(--f-head);font-size:1.11rem;font-weight:700;
  color:var(--ink);letter-spacing:.01em;
}
.brand-text em{
  font-style:normal;font-size:.68rem;font-weight:500;
  color:var(--muted);letter-spacing:.13em;text-transform:uppercase;
}

.nav{display:flex;align-items:center;gap:1.7rem}
.nav>a:not(.btn){
  font-size:.95rem;font-weight:500;color:var(--ink-soft);
  text-decoration:none!important;position:relative;padding:.25rem 0;
}
.nav>a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;
  background:var(--grad);transition:width .22s ease;
}
.nav>a:not(.btn):hover{color:var(--ink)}
.nav>a:not(.btn):hover::after{width:100%}

.nav-toggle{
  display:none;width:44px;height:44px;flex:none;border:1px solid var(--line);
  background:#fff;border-radius:12px;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.nav-toggle span{
  display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;
  transition:transform .22s ease, opacity .18s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── language switcher ───────────────────────────────────── */
.lang-switch{
  display:inline-flex;align-items:center;gap:2px;flex:none;
  background:var(--cream-2);border:1px solid var(--line);
  border-radius:100px;padding:3px;
}
.lang-switch a{
  font-family:var(--f-head);font-size:.76rem;font-weight:600;line-height:1.5;
  color:var(--ink-soft);background:transparent;border:0;cursor:pointer;
  padding:.3rem .6rem;border-radius:100px;white-space:nowrap;text-decoration:none;
  transition:background .18s ease,color .18s ease;
}
.lang-switch a:hover{color:var(--ink)}
.lang-switch a[aria-current="true"]{background:var(--ink);color:#fff}
.lg-short{display:none}
.lang-switch a[lang="bn"],
.lang-switch a[lang="as"]{font-family:"Noto Sans Bengali",var(--f-head);font-size:.78rem}

/* ── header at phone width ───────────────────────────────── */
/* The three-way switcher plus a Bengali brand tagline does not fit beside
   the burger on a 390px iPhone: the tagline spilled over the switcher.
   Below 560px the switcher goes to short labels and the tagline is dropped —
   the wordmark alone still identifies the brand. */
@media (max-width:560px){
  .header-inner{gap:.55rem}
  /* Tagline stays — it is part of the mark. It is set smaller here and
     allowed to wrap so it can never push the brand over the switcher. */
  .brand-text em{font-size:.58rem;letter-spacing:.05em;overflow-wrap:anywhere}
  .lang-switch{padding:2px}
  .lang-switch a{padding:.3rem .48rem;font-size:.74rem}
  .lg-full{display:none}
  .lg-short{display:inline}
}

/* ── Bengali / Assamese typography ───────────────────────── */
/* Sora and Inter carry no Bengali-script glyphs, so the whole type
   system swaps to Noto Sans Bengali through the same two tokens.
   Assamese uses the same script (plus ৰ and ৱ) and the same face.
   Both need more leading and none of the Latin letter-spacing. */
html[lang="bn"],html[lang="as"]{
  --f-head:"Noto Sans Bengali","Sora",system-ui,sans-serif;
  --f-body:"Noto Sans Bengali","Inter",system-ui,sans-serif;
}
html[lang="bn"] body,html[lang="as"] body{line-height:1.82}
html[lang="bn"] h1,html[lang="bn"] h2,html[lang="bn"] h3,
html[lang="as"] h1,html[lang="as"] h2,html[lang="as"] h3{
  letter-spacing:normal;line-height:1.38;
}
html[lang="bn"] h1,html[lang="as"] h1{font-size:clamp(2.1rem,5vw,3.4rem)}
html[lang="bn"] .eyebrow,html[lang="as"] .eyebrow,
html[lang="bn"] .pill,html[lang="as"] .pill,
html[lang="bn"] .status,html[lang="as"] .status,
html[lang="bn"] .stage-when,html[lang="as"] .stage-when,
html[lang="bn"] .card-tag,html[lang="as"] .card-tag,
html[lang="bn"] .phase-tag,html[lang="as"] .phase-tag,
html[lang="bn"] .badge-soon,html[lang="as"] .badge-soon,
html[lang="bn"] .sl-stats dt,html[lang="as"] .sl-stats dt,
html[lang="bn"] .scale figcaption,html[lang="as"] .scale figcaption,
html[lang="bn"] .brand-text em,html[lang="as"] .brand-text em{
  letter-spacing:.02em;text-transform:none;
}
/* Labels in either script run longer than "Protein" or "Bag". */
html[lang="bn"] .sl-stats dt,html[lang="as"] .sl-stats dt{font-size:.68rem}
html[lang="bn"] .sl-picker button,html[lang="as"] .sl-picker button{font-size:.75rem}
html[lang="bn"] .sl-note,html[lang="as"] .sl-note{min-height:4.4em}

/* ── hero ────────────────────────────────────────────────── */
.hero{position:relative;padding:clamp(3.5rem,7vw,6rem) 0 clamp(4rem,8vw,7rem);overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.wash{position:absolute;border-radius:50%;filter:blur(80px)}
.wash-a{
  width:min(48vw,580px);aspect-ratio:1;top:-18%;right:-10%;opacity:.46;
  background:radial-gradient(circle at 40% 40%,#9BE8AE 0%,rgba(155,232,174,0) 70%);
}
.wash-b{
  width:min(40vw,450px);aspect-ratio:1;bottom:-20%;left:-13%;opacity:.40;
  background:radial-gradient(circle at 55% 45%,var(--water-1) 0%,rgba(154,217,227,0) 72%);
}

/* Ripple rings — a pellet meeting the pond. The one piece of motion in the
   hero, slow enough to read as ambient rather than as an animation. */
.ripples{
  position:absolute;top:-10%;right:-7%;
  width:min(30vw,380px);aspect-ratio:1;color:var(--water-2);opacity:.20;
}
.ring{transform-box:view-box;transform-origin:300px 300px;animation:ripple 7s ease-out infinite}
.ring:nth-child(2){animation-delay:1.4s}
.ring:nth-child(3){animation-delay:2.8s}
.ring:nth-child(4){animation-delay:4.2s}
.ring:nth-child(5){animation-delay:5.6s}
@keyframes ripple{
  0%   {transform:scale(.28);opacity:0}
  18%  {opacity:.85}
  100% {transform:scale(1.18);opacity:0}
}
.wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:120px}

.hero-inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.12fr .88fr;
  gap:clamp(2rem,4vw,4rem);align-items:center;
}

.eyebrow{
  font-family:var(--f-head);font-size:.79rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--green-2);
  margin:0 0 1rem;display:flex;align-items:center;gap:.7rem;
}
.eyebrow::after{
  content:"";height:2px;width:clamp(28px,6vw,54px);border-radius:2px;
  background:var(--grad-gold);flex:none;
}
.eyebrow-light{color:#8FE0A8}
.eyebrow-light::after{background:var(--grad-gold);opacity:.75}

.grad{
  background:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

.lede{font-size:1.11rem;color:var(--ink-soft);max-width:37rem;margin-bottom:1.9rem}

.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:2.1rem}

.hero-badges{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem .65rem;
}
.hero-badges li{
  font-size:.85rem;font-weight:500;color:var(--ink-soft);
  background:rgba(255,255,255,.72);border:1px solid var(--line);
  padding:.4rem .9rem;border-radius:100px;
}
.hero-badges li::before{content:"✓";color:var(--green);font-weight:700;margin-right:.45rem}

/* hero product card */
.hero-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.4vw,2rem);box-shadow:var(--sh-3);
}
.hero-card-top{margin-bottom:1.3rem}
.pill{
  display:inline-block;font-family:var(--f-head);font-size:.72rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;
  background:rgba(140,198,63,.18);color:#3C7A1E;
  padding:.32rem .8rem;border-radius:100px;margin-bottom:.8rem;
}
.hero-card h2{font-size:1.62rem;margin-bottom:.35rem}
.hero-card-sub{font-size:.92rem;color:var(--muted);margin:0}

.spec{margin:0 0 1.2rem;display:grid;gap:.1rem}
.spec>div{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.72rem 0;border-bottom:1px dashed var(--line);
}
.spec>div:last-child{border-bottom:0}
.spec dt{font-size:.87rem;color:var(--muted);margin:0}
.spec dd{
  margin:0;font-family:var(--f-head);font-size:.92rem;font-weight:600;
  color:var(--ink);text-align:right;
}
.hero-card-note{font-size:.85rem;color:var(--muted);margin-bottom:1.2rem}

/* ── hero product spotlight ──────────────────────────────── */
.spotlight{position:relative;overflow:hidden}
.spotlight::before{
  content:"";position:absolute;inset:0 0 auto;height:4px;
  background:var(--bag,var(--green-2));transition:background .45s ease;
}
.sl-head{margin-bottom:1rem}
.spotlight .pill{
  background:color-mix(in srgb,var(--bag) 15%,transparent);
  color:var(--bag);
  transition:background .45s ease,color .45s ease;
}
.spotlight h2{font-size:1.55rem;margin-bottom:.3rem}

.sl-media{margin:0 0 1.15rem;border-radius:var(--r);overflow:hidden;background:var(--cream-2)}
.sl-media img{width:100%;height:210px;object-fit:contain;background:#FCFCFB;padding:.4rem 0}

.sl-stats{
  margin:0 0 1rem;padding:.9rem 0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:.6rem;border-block:1px solid var(--line);text-align:center;
}
.sl-stats div{display:flex;flex-direction:column;gap:.15rem}
.sl-stats dt{
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:0;
}
.sl-stats dd{
  margin:0;font-family:var(--f-head);font-weight:700;font-size:1.1rem;
  color:var(--ink);font-variant-numeric:tabular-nums;
}

/* Reserve the tallest note so switching grade never jumps the layout. */
.sl-note{font-size:.88rem;color:var(--ink-soft);margin:0 0 1.15rem;min-height:3.4em}

.sl-picker{display:flex;flex-wrap:wrap;gap:.38rem;margin-bottom:1.15rem}
.sl-picker button{
  flex:1 1 auto;font-family:var(--f-head);font-size:.74rem;font-weight:600;
  color:var(--ink-soft);background:var(--cream);border:1px solid var(--line);
  border-radius:100px;padding:.44rem .5rem;cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.sl-picker button:hover{border-color:var(--bag);color:var(--bag)}
.sl-picker button[aria-pressed="true"]{background:var(--bag);border-color:var(--bag);color:#fff}

.sl-swap{transition:opacity .28s ease,transform .28s ease}
.spotlight.is-swapping .sl-swap{opacity:0;transform:translateY(6px)}

/* ── generic section ─────────────────────────────────────── */
.section{padding:clamp(3.6rem,7vw,6.2rem) 0}
.section-tint{background:var(--cream-2)}
/* Dark bands are the water below the surface: a cream wave cuts across the top
   edge, echoing the hero. Extra top padding keeps content clear of it. */
.section-dark{
  background:var(--ink);color:#D6E5E0;position:relative;
  padding-top:calc(clamp(3.6rem,7vw,6.2rem) + 42px);
}
.section-dark::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:58px;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0h1440v42c-240 44-480 44-720 12S240 -2 0 42z' fill='%23FAF8F3'/%3E%3C/svg%3E") top center/100% 100% no-repeat;
}
.section-dark h2,.section-dark h3{color:#fff}
.section-dark .section-lede{color:#A9C4BC}

.section-head{max-width:44rem;margin-bottom:clamp(2.2rem,4vw,3.2rem)}
.section-lede{font-size:1.06rem;color:var(--ink-soft);margin-bottom:0}

.fineprint{font-size:.87rem;color:var(--muted);max-width:44rem;margin-top:2rem}

/* ── trio cards ──────────────────────────────────────────── */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1.7rem;box-shadow:var(--sh-1);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.card p{margin-bottom:0;font-size:.97rem}
.card-tag{
  display:block;font-family:var(--f-head);font-size:.72rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin-bottom:.7rem;
}
.card-muted{background:rgba(255,255,255,.6)}
.card-accent{
  border-color:transparent;
  background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;
  border:1.5px solid transparent;
  box-shadow:var(--sh-2);
}
.card-accent .card-tag{color:var(--green-2)}

/* A whole card that is a link: the resources hub, where the card IS the
   destination rather than containing one. Inherits .card, so it keeps the
   lift on hover and only has to undo the underline and colour. */
.res-card{text-decoration:none;color:inherit;display:block}
.res-card h3{margin-bottom:.5rem;font-size:1.06rem;color:var(--ink)}
.res-card:hover h3{color:var(--green)}
.res-card p{color:var(--ink-soft)}

/* ── industry news digest ────────────────────────────────── */
.news-item{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.5rem 1.6rem;box-shadow:var(--sh-1);margin-bottom:1.1rem;
}
.news-item h3{margin:.45rem 0 .5rem;font-size:1.14rem;line-height:1.35}
.news-item h3 a{color:var(--ink);text-decoration:none}
.news-item h3 a:hover{color:var(--green)}
.news-item p{margin-bottom:0;font-size:.97rem;color:var(--ink-soft)}
.news-meta{
  display:flex;flex-wrap:wrap;gap:.9rem;align-items:baseline;
  margin:0;font-size:.8rem;color:var(--muted);
}
.news-meta time{font-weight:600}
/* The source is credited on the card as well as the article, so nobody has to
   click through to find out whose reporting a figure rests on. */
.news-src b{color:var(--ink);font-weight:600}
.news-tags{list-style:none;margin:.9rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.news-tags li{
  font-size:.74rem;letter-spacing:.04em;color:var(--ink-soft);
  background:var(--cream-2);border:1px solid var(--line);
  border-radius:100px;padding:.18rem .6rem;
}
.news-body p{font-size:1.02rem;line-height:1.75;margin-bottom:1rem}
.news-body p:last-child{margin-bottom:0}

/* ── pillars ─────────────────────────────────────────────── */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.pillar{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r);padding:1.6rem;
  transition:background .2s ease, transform .2s ease;
}
.pillar:hover{background:rgba(255,255,255,.1);transform:translateY(-3px)}
.pillar p{margin-bottom:0;font-size:.95rem;color:#A9C4BC}
.pillar-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:13px;margin-bottom:.95rem;
  background:rgba(140,198,63,.13);border:1px solid rgba(140,198,63,.26);
  color:var(--green);transition:background .2s ease,color .2s ease;
}
.pillar-ico svg{width:23px;height:23px}
.pillar:hover .pillar-ico{background:rgba(201,162,39,.18);border-color:rgba(227,194,92,.4);color:var(--gold-lt)}
.pillar-cta{
  background:var(--grad);border-color:transparent;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
}
.pillar-cta h3{color:#08260F}
.pillar-cta p{color:#0A3B2E;margin-bottom:1rem}

/* ── products ────────────────────────────────────────────── */
.products{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.product{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1.7rem;display:flex;flex-direction:column;box-shadow:var(--sh-1);
  transition:transform .2s ease, box-shadow .2s ease;
}
.product:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.product-live{
  border-color:transparent;
  background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;
  border:1.5px solid transparent;box-shadow:var(--sh-2);
}
.product-head{margin-bottom:.6rem}
.product h3{margin-bottom:0;font-size:1.24rem}
.product>p{font-size:.97rem;color:var(--ink-soft)}
.status{
  display:inline-block;font-family:var(--f-head);font-size:.7rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  padding:.28rem .72rem;border-radius:100px;margin-bottom:.7rem;
}
.status-live{background:rgba(140,198,63,.20);color:#3C7A1E}
.status-next{background:rgba(201,162,39,.16);color:#8A6D12}
.status-soon{background:rgba(232,163,61,.18);color:#96631A}

.ticks{list-style:none;margin:0 0 1.3rem;padding:0;display:grid;gap:.45rem}
.ticks li{font-size:.93rem;color:var(--ink-soft);padding-left:1.5rem;position:relative}
.ticks li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:9px;height:9px;border-radius:50%;background:var(--grad);
}

.link-arrow{
  margin-top:auto;font-family:var(--f-head);font-weight:600;font-size:.94rem;
  color:var(--ink);text-decoration:none!important;
  display:inline-flex;align-items:center;gap:.4rem;
}
.link-arrow::after{content:"→";transition:transform .2s ease;display:inline-block}
.link-arrow:hover{color:var(--green-2)}
.link-arrow:hover::after{transform:translateX(4px)}

/* ── economics + calculator ──────────────────────────────── */
.econ-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,4vw,3.5rem);align-items:start;
}
.econ-formula{
  display:flex;flex-direction:column;gap:.3rem;
  background:#fff;border-left:4px solid var(--green);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:1.1rem 1.3rem;margin:1.6rem 0;box-shadow:var(--sh-1);
}
.econ-formula span{
  font-size:.78rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.econ-formula strong{font-family:var(--f-head);font-size:1.12rem;color:var(--ink)}

.calc{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,2.4vw,2rem);box-shadow:var(--sh-2);
}
.calc-title{font-size:1.16rem;margin-bottom:1.2rem}
.calc-cols{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.calc-col{
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:1rem;margin:0;background:var(--cream);
}
.calc-col-b{
  background:rgba(140,198,63,.09);
  border-color:rgba(140,198,63,.45);
}
.calc-col legend{
  font-family:var(--f-head);font-size:.76rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  padding:0 .45rem;
}

label{display:block;font-size:.86rem;font-weight:500;color:var(--ink-soft);margin-bottom:.8rem}
label:last-child{margin-bottom:0}
input,select,textarea{
  width:100%;margin-top:.35rem;padding:.7rem .85rem;
  font-family:var(--f-body);font-size:1rem;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm);
  transition:border-color .18s ease, box-shadow .18s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--green-2);
  box-shadow:0 0 0 3px rgba(78,154,38,.16);
}
textarea{resize:vertical;min-height:80px}
select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%2365756F' d='M6 8 0 0h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;background-size:11px;padding-right:2.4rem}
.calc-wide{margin-bottom:1.2rem}

.calc-out{border-top:1px solid var(--line);padding-top:.4rem}
.calc-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.62rem 0;border-bottom:1px dashed var(--line);
}
.calc-row:last-child{border-bottom:0}
.calc-row span{font-size:.88rem;color:var(--muted)}
.calc-row strong{
  font-family:var(--f-head);font-size:1rem;color:var(--ink);
  text-align:right;font-variant-numeric:tabular-nums;
}
.calc-row-hi{
  background:var(--cream);margin:.3rem -.7rem;padding:.7rem;
  border-radius:var(--r-sm);border-bottom:0;
}
.calc-row-hi strong{font-size:1.2rem}
.calc-row-hi.is-good strong{color:#3C7A1E}
.calc-row-hi.is-bad strong{color:#B4472F}
.calc-note{font-size:.83rem;color:var(--muted);margin:.9rem 0 0;min-height:1.2em}

/* ── quality steps ───────────────────────────────────────── */
.steps{
  list-style:none;margin:0;padding:0;counter-reset:none;
  display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;
}
.steps li{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1.4rem 1.2rem;position:relative;box-shadow:var(--sh-1);
}
.steps h3{font-size:1.02rem;margin-bottom:.4rem}
.steps p{font-size:.9rem;color:var(--ink-soft);margin-bottom:0}
.step-n{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  background:var(--grad);color:#08260F;
  font-family:var(--f-head);font-weight:700;font-size:.95rem;
  margin-bottom:.85rem;
}

.callout{
  margin-top:1.6rem;background:var(--ink);color:#D6E5E0;
  border-radius:var(--r-lg);padding:clamp(1.5rem,3vw,2.2rem);
}
.callout h3{color:#fff;font-size:1.28rem}
.callout p{margin-bottom:0;color:#A9C4BC;max-width:52rem}

/* ── poultry / next category ─────────────────────────────── */
/* Warm gold rather than the aqua greens and water teal, so the page
   reads two categories at a glance without a second brand palette. */
.section-next{
  background:linear-gradient(180deg,#FBF6E9 0%,#F8F2E2 100%);
  border-block:1px solid #EFE4C8;
}
.next-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,3.6rem);align-items:start}
.section-next .eyebrow{color:#9A7B12}
.section-next .eyebrow::after{background:var(--grad-gold)}

.badge-soon{
  display:inline-block;font-family:var(--f-head);font-size:.72rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;
  background:rgba(201,162,39,.16);color:#8A6D12;
  border:1px solid rgba(201,162,39,.32);
  padding:.32rem .82rem;border-radius:100px;margin-bottom:1rem;
}
.next-note{
  font-size:.97rem;color:var(--ink-soft);
  border-left:3px solid var(--gold);padding-left:1rem;margin-bottom:1.8rem;
}

.next-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.next-list li{
  display:flex;gap:1rem;align-items:flex-start;
  background:rgba(255,255,255,.72);border:1px solid #EFE4C8;
  border-radius:var(--r);padding:1.3rem 1.4rem;
}
.next-list h3{margin-bottom:.35rem}
.next-list p{margin:0;font-size:.95rem;color:var(--ink-soft)}
.next-ico{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:12px;
  background:rgba(201,162,39,.14);border:1px solid rgba(201,162,39,.28);
  color:#9A7B12;
}
.next-ico svg{width:21px;height:21px}

/* ── dealers ─────────────────────────────────────────────── */
.dealer-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,4vw,3.5rem);align-items:start;
}
.chain{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  margin:1.6rem 0 2rem;
}
.chain span{
  font-family:var(--f-head);font-size:.87rem;font-weight:600;color:#fff;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  padding:.5rem 1rem;border-radius:100px;
}
.chain i{color:var(--green);font-style:normal;font-weight:700}

.dealer-list{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.dealer-list li{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r);padding:1.3rem 1.5rem;
}
.dealer-list h3{font-size:1.05rem;margin-bottom:.3rem}
.dealer-list p{font-size:.94rem;color:#A9C4BC;margin-bottom:0}

/* ── vision ──────────────────────────────────────────────── */
.hex{
  display:grid;grid-template-columns:repeat(6,1fr);gap:.8rem;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.hex span{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:96px;padding:1rem .8rem;
  font-family:var(--f-head);font-weight:600;font-size:.95rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-1);transition:transform .2s ease, box-shadow .2s ease;
}
.hex span:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}

.roadmap{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.phase{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1.7rem;box-shadow:var(--sh-1);position:relative;overflow:hidden;
}
.phase::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--grad);
}
.phase p{margin-bottom:0;font-size:.97rem;color:var(--ink-soft)}
.phase-tag{
  display:block;font-family:var(--f-head);font-size:.73rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--green-2);
  margin-bottom:.6rem;
}

/* ── contact ─────────────────────────────────────────────── */
.contact-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2rem,4vw,3.5rem);align-items:start;
}
.contact-list{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.1rem}
.contact-list li{display:flex;gap:1rem;align-items:flex-start}
.contact-list strong{
  display:block;font-family:var(--f-head);font-size:.78rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin-bottom:.1rem;
}
.contact-list a,.contact-list span:not(.ci){font-size:1.05rem;color:var(--ink);font-weight:500}
.contact-list a:hover{color:var(--green-2)}
.ci{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:40px;height:40px;border-radius:12px;
  background:var(--grad);color:#08260F;font-size:1.1rem;
}

.lead{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.4rem,2.4vw,2rem);box-shadow:var(--sh-2);
}
.lead-title{font-size:1.16rem;margin-bottom:1.2rem}
.lead-two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.lead-actions{display:grid;gap:.6rem;margin-top:1.3rem}
.lead-note{font-size:.82rem;color:var(--muted);margin:.9rem 0 0}
.lead-note.is-error{color:#B4472F;font-weight:500}
input[aria-invalid="true"],select[aria-invalid="true"]{
  border-color:#D9705A;box-shadow:0 0 0 3px rgba(217,112,90,.14);
}

/* ── CTA band ────────────────────────────────────────────── */
.band{background:var(--grad);padding:clamp(2.6rem,5vw,3.8rem) 0}
.band-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.5rem;
}
.band h2{
  color:#08260F;margin:0;font-size:clamp(1.5rem,3vw,2.15rem);max-width:34rem;
}

/* ── footer ──────────────────────────────────────────────── */
.site-footer{background:var(--ink-2);color:#8FA8A1;padding:clamp(2.6rem,5vw,3.6rem) 0 1.6rem}
.footer-inner{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;
  padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-brand{max-width:26rem}
.footer-brand strong{
  display:block;font-family:var(--f-head);font-size:1.1rem;color:#fff;margin-bottom:.5rem;
}
.footer-brand p{font-size:.93rem;margin:0}
.footer-nav{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-content:flex-start}
.footer-nav a{color:#B7CCC6;font-size:.94rem;text-decoration:none!important}
.footer-nav a:hover{color:#fff}
.footer-base{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem 2rem;
  padding-top:1.4rem;
}
.footer-base p{font-size:.82rem;margin:0}
.footer-disc{max-width:38rem;opacity:.75}

/* ── floating WhatsApp ───────────────────────────────────── */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:90;
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#25D366;color:#fff;
  box-shadow:0 8px 26px rgba(37,211,102,.42);
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .28s ease, transform .28s ease, visibility .28s ease;
}
.wa-float.is-on{opacity:1;visibility:visible;transform:none}
.wa-float:hover{transform:scale(1.07)}
.wa-float svg{width:30px;height:30px}

/* ── reveal animation ────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s ease, transform .6s ease}
.reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

.contact-list div>a{display:block}
.contact-list div>span+a{margin-top:.2rem}

/* ── product range: lineup shot, pellet media, specs ─────── */
.sub-head{
  font-size:1.05rem;letter-spacing:.02em;
  margin:2.6rem 0 1rem;
}

.range-shot{
  margin:0 0 2.2rem;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-2);background:var(--white);
}
.range-shot img{width:100%;height:auto}

.product{padding-top:0;overflow:hidden}
.product-media{
  margin:0 -1.7rem 1.1rem;background:var(--cream-2);
  border-bottom:3px solid var(--bag,var(--green-2));
}
.product-media img{
  width:100%;height:290px;object-fit:contain;object-position:center;
  background:#FCFCFB;padding:.6rem 0;
}
.product .status{background:color-mix(in srgb,var(--bag,var(--green-2)) 14%,transparent);color:var(--bag,var(--ink))}

.pspec{
  margin:0 0 1rem;padding:.85rem 0;display:grid;gap:.4rem;
  border-block:1px solid var(--line);
}
.pspec div{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.pspec dt{font-size:.88rem;color:var(--muted);margin:0}
.pspec dd{
  margin:0;font-family:var(--f-head);font-weight:600;font-size:.98rem;color:var(--ink);
}

/* ── pellet size scale ───────────────────────────────────── */
/* Circles are drawn at true relative diameter (14px per mm), bottom-aligned
   on a shared rule so the progression reads as one measurement, not six icons. */
.scale{
  margin:0 0 2.4rem;padding:1.5rem clamp(1.1rem,2vw,1.8rem) 1.2rem;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh-1);
}
.scale figcaption{
  font-family:var(--f-head);font-size:.78rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  margin-bottom:1.5rem;
}
.scale-track{overflow-x:auto}
/* On a phone the scale is wider than the screen. Fade its right edge while
   there is more to see, so the cut-off reads as "scroll me" and not as a bug.
   The class is set by JS only when the track actually overflows. */
.scale-track.can-scroll{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent);
}
.scale-row{
  list-style:none;margin:0;padding:0 0 .2rem;
  display:flex;align-items:flex-end;gap:clamp(.9rem,3vw,2.4rem);
  min-width:430px;
}
.scale-row li{
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  flex:1 1 0;text-align:center;
}
.scale-row .dot{
  width:var(--d);height:var(--d);border-radius:50%;
  background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 16%,transparent);
}
/* Mash is a powder, not a pellet — stipple it rather than draw a bead. */
.scale-row .dot-mash{
  background:
    radial-gradient(circle at 30% 35%,var(--c) 34%,transparent 36%),
    radial-gradient(circle at 70% 45%,var(--c) 30%,transparent 32%),
    radial-gradient(circle at 45% 72%,var(--c) 28%,transparent 30%),
    color-mix(in srgb,var(--c) 22%,transparent);
}
.scale-row strong{
  font-family:var(--f-head);font-size:.86rem;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;padding-top:.35rem;
  border-top:2px solid color-mix(in srgb,var(--c) 45%,transparent);width:100%;
}
.scale-row em{font-style:normal;font-size:.74rem;color:var(--muted)}

/* ── feeding stage guide ─────────────────────────────────── */
.stage-guide{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(6,1fr);gap:.7rem;
}
.stage-guide li{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.95rem .9rem .95rem 1.05rem;display:flex;flex-direction:column;gap:.15rem;
  position:relative;overflow:hidden;
}
/* Rail carries the same colour as the grade's bag, tying the guide to the
   product cards and the hero spotlight. */
.stage-guide li::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c);
}
.stage-guide li::after{
  content:"→";position:absolute;right:-.62rem;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:.9rem;z-index:1;
}
.stage-guide li:last-child::after{content:none}
.stage-when{
  font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}
.stage-guide strong{font-family:var(--f-head);color:var(--ink);font-size:.98rem}
.stage-guide em{font-style:normal;font-size:.86rem;color:var(--c);font-weight:600}
/* Five-step variant. Pabda, Tengra and Singhi finish inside the 2 mm band, so
   their guide stops at Aqua Pro — five grades rather than six, because both
   Aqua Shakti packs sit in the 1 mm step. build.py asserts that count, so a
   change to the range fails the build instead of orphaning a card on a second
   row. The breakpoints below override this, which is why it sits above them. */
.stage-guide-5{grid-template-columns:repeat(5,1fr)}

/* ── species chips ───────────────────────────────────────── */
.species{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem;
}
.species li{
  background:var(--white);border:1px solid var(--line);border-radius:100px;
  padding:.5rem 1.1rem;font-family:var(--f-head);font-weight:600;
  font-size:.94rem;color:var(--ink);
}

/* ── quality: ingredients & purity ───────────────────────── */
.qual-grid{
  display:grid;grid-template-columns:1.6fr 1fr;gap:2.2rem;
  margin:2.6rem 0 0;
}
.ing-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem .9rem;
}
.ing-list li{
  font-size:.94rem;color:var(--ink-soft);padding-left:1.3rem;position:relative;
}
.ing-list li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:7px;height:7px;border-radius:50%;background:var(--grad);
}
.nope,.tests{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.nope li{
  font-size:.94rem;font-weight:600;color:var(--ink);
  padding-left:1.5rem;position:relative;
}
.nope li::before{
  content:"✕";position:absolute;left:0;top:0;color:#B4472F;font-weight:700;
}
.tests{grid-template-columns:repeat(2,1fr)}
.tests li{font-size:.92rem;color:var(--ink-soft)}
.qual-grid .sub-head:first-child{margin-top:0}

/* ── responsive ──────────────────────────────────────────── */
@media (max-width:1080px){
  .steps{grid-template-columns:repeat(3,1fr)}
  .hex{grid-template-columns:repeat(3,1fr)}

  /* Nav collapses here rather than at 940: with Poultry added, eight
     items plus the language switcher overflow the header row. */
  .nav{
    position:fixed;inset:72px 0 auto;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--cream);border-bottom:1px solid var(--line);
    padding:.5rem 24px 1.4rem;
    box-shadow:0 20px 40px rgba(11,61,52,.12);
    transform:translateY(-120%);opacity:0;visibility:hidden;
    transition:transform .28s ease, opacity .22s ease, visibility .28s ease;
    max-height:calc(100vh - 72px);overflow-y:auto;
  }
  .nav.is-open{transform:none;opacity:1;visibility:visible}
  .nav>a:not(.btn){padding:.85rem 0;border-bottom:1px solid var(--line);font-size:1rem}
  .nav>a:not(.btn)::after{display:none}
  .nav .btn{margin-top:1rem}
  .nav-toggle{display:flex}

  .lang-switch{margin-left:auto}
}

@media (max-width:940px){
  .hero-inner,.econ-grid,.dealer-grid,.contact-grid,.next-grid{grid-template-columns:1fr}
  .hero-card{order:2}
  .trio,.pillars,.products,.roadmap{grid-template-columns:1fr 1fr}
  .card-accent{grid-column:1/-1}

  .stage-guide{grid-template-columns:repeat(3,1fr)}
  .stage-guide li:nth-child(3)::after{content:none}
  .qual-grid{grid-template-columns:1fr;gap:1.6rem}
  .ing-list{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding-inline:18px}
  html{scroll-padding-top:76px}
  .trio,.pillars,.products,.roadmap,.steps,.calc-cols,.lead-two{grid-template-columns:1fr}
  .card-accent{grid-column:auto}
  .stage-guide{grid-template-columns:1fr 1fr}
  .stage-guide li::after{content:none!important}
  .ing-list{grid-template-columns:1fr 1fr}
  .hex{grid-template-columns:repeat(2,1fr)}
  .hex span{min-height:78px;font-size:.88rem}
  .hero-cta .btn{flex:1 1 100%}
  .band-inner{flex-direction:column;align-items:flex-start}
  .footer-inner{flex-direction:column}
  .wa-float{right:14px;bottom:14px}
}

/* ── print ───────────────────────────────────────────────── */
@media print{
  .site-header,.wa-float,.nav-toggle,.band,.hero-bg{display:none!important}
  body{background:#fff;color:#000}
  .section-dark{background:#fff;color:#000}
  .section-dark h2,.section-dark h3,.callout h3{color:#000}
  .reveal{opacity:1;transform:none}
}

/* ============================================================
   MULTI-PAGE SHELL — added with the 2026 redesign
   Everything above this line predates the redesign and is still
   used; the rules below cover the page types the single-page
   site never had.
   ============================================================ */

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mt{margin-top:2.2rem}

/* ── header: dropdown menus ──────────────────────────────── */
.has-menu{position:relative}
.menu-top{
  display:inline-flex;align-items:center;gap:.36rem;
  font-family:var(--f-body);font-size:.95rem;font-weight:500;
  color:var(--ink-soft);background:none;border:0;cursor:pointer;padding:.25rem 0;
}
.menu-top svg{width:10px;height:6px;transition:transform .2s ease}
.menu-top:hover{color:var(--ink)}
.has-menu:hover .menu-top svg,.menu-top[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav .is-here{color:var(--ink);font-weight:600}

.menu{
  position:absolute;top:calc(100% + .7rem);left:50%;translate:-50% 0;
  min-width:265px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-3);padding:.5rem;
  display:grid;gap:.1rem;z-index:20;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
}
.has-menu:hover .menu,.has-menu:focus-within .menu{opacity:1;visibility:visible;transform:none}
.menu a{
  display:block;padding:.62rem .8rem;border-radius:var(--r-sm);
  font-family:var(--f-head);font-weight:600;font-size:.93rem;color:var(--ink);
  text-decoration:none!important;
}
.menu a span{
  display:block;font-family:var(--f-body);font-weight:400;font-size:.82rem;
  color:var(--muted);margin-top:.12rem;
}
.menu a:hover{background:var(--cream-2)}

/* ── breadcrumbs ─────────────────────────────────────────── */
.crumbs{background:var(--cream-2);border-bottom:1px solid var(--line);font-size:.86rem}
.crumbs .wrap{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding-block:.7rem}
.crumbs a{color:var(--ink-soft)}
.crumbs a:hover{color:var(--green-2)}
.crumbs i{font-style:normal;color:var(--muted)}
.crumbs span{color:var(--muted)}

/* ── page head ───────────────────────────────────────────── */
.page-head{padding:clamp(2.6rem,5vw,4.4rem) 0 clamp(1.6rem,3vw,2.4rem)}
.page-head h1{font-size:clamp(2.1rem,4.6vw,3.3rem);max-width:19ch;text-wrap:balance}
.page-head .lede{font-size:1.12rem;max-width:62ch;margin-bottom:0}
.page-head .next-note{
  font-size:.99rem;color:var(--ink-soft);border-left:3px solid var(--gold);
  padding-left:1rem;margin:1.5rem 0 1.8rem;max-width:58ch;
}
.page-head-soon{background:linear-gradient(180deg,#FBF6E9 0%,var(--cream) 100%)}
.badge-open{background:rgba(78,154,38,.14);color:#3C7A1E;border-color:rgba(78,154,38,.3)}
.section-flush{padding-top:0}

/* ── home hero ───────────────────────────────────────────── */
.hero-x{position:relative;overflow:hidden;padding:clamp(2.4rem,5vw,4.4rem) 0 clamp(2.6rem,5vw,4rem)}
.hero-x-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-x-inner{position:relative;z-index:1;display:grid;gap:clamp(2rem,4vw,3.4rem);align-items:center;
  grid-template-columns:1.02fr .98fr}
.hero-x-copy h1{font-size:clamp(2.3rem,5.2vw,3.9rem);margin-bottom:.55em;text-wrap:balance}
.hero-x-copy .lede{font-size:1.14rem;max-width:40rem}
.hero-x-packs{margin:0}
.hero-x-packs img{width:100%;height:auto;filter:drop-shadow(0 22px 42px rgba(11,61,52,.16))}

/* ── trust strip ─────────────────────────────────────────── */
.strip{background:var(--ink);color:#CFE1D3}
.strip-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding-block:clamp(1.4rem,3vw,2.1rem)}
.strip div{display:flex;flex-direction:column;gap:.15rem;text-align:center}
.strip strong{font-family:var(--f-head);font-size:clamp(1.5rem,3vw,2.1rem);color:#fff;line-height:1}
.strip span{font-size:.84rem;color:#9FBCA6}

/* ── two-column split ────────────────────────────────────── */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,3.6rem);align-items:start}
.section-dark .split h2,.section-dark .split p{color:inherit}

.ticks-lg{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.ticks-lg li{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.1rem 1.25rem;font-size:.95rem;color:var(--ink-soft);
}
.ticks-lg strong{display:block;font-family:var(--f-head);color:var(--ink);margin-bottom:.22rem;font-size:1rem}
.section-dark .ticks-lg li{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13);color:#A9C4BC}
.section-dark .ticks-lg strong{color:#fff}

/* ── product category cards ──────────────────────────────── */
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem}
.cat{
  display:block;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.8rem;text-decoration:none!important;
  box-shadow:var(--sh-1);transition:transform .2s ease,box-shadow .2s ease;
}
.cat:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.cat h3{font-size:1.5rem;margin:.7rem 0 .5rem}
.cat p{color:var(--ink-soft);font-size:.98rem;margin-bottom:1rem}
.cat-tag{
  display:inline-block;font-family:var(--f-head);font-size:.7rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;
  background:rgba(140,198,63,.2);color:#3C7A1E;padding:.28rem .72rem;border-radius:100px;
}
.cat-tag-soon{background:rgba(201,162,39,.18);color:#8A6D12}
.cat-live{border-top:3px solid var(--green-2)}
.cat-soon{border-top:3px solid var(--gold)}

/* ── product grid & cards ────────────────────────────────── */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.pcard{
  position:relative;display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:0 1.5rem 1.5rem;box-shadow:var(--sh-1);overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.pcard::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--bag)}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--sh-2);border-color:color-mix(in srgb,var(--bag) 40%,var(--line))}
.pcard-hit{position:absolute;inset:0;z-index:2}
.pcard-media{margin:0 -1.5rem 1.1rem;background:#FCFCFB;border-bottom:1px solid var(--line)}
.pcard-media img{width:100%;height:280px;object-fit:contain;padding:.9rem 0}
.pcard .status{background:color-mix(in srgb,var(--bag) 13%,transparent);color:var(--bag);margin-bottom:.55rem}
.pcard h3{font-size:1.18rem;margin-bottom:.7rem}
.pcard>p{font-size:.94rem;color:var(--ink-soft);margin-bottom:1.2rem}
.pcard .link-arrow{margin-top:auto;color:var(--bag)}

/* ── ingredient grid ─────────────────────────────────────── */
.ing-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.7rem;
}
.ing-grid li{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.85rem 1rem;border-left:3px solid var(--green);
}
.ing-grid strong{display:block;font-family:var(--f-head);font-size:.95rem;color:var(--ink)}
.ing-grid span{display:block;font-size:.82rem;color:var(--muted);margin-top:.12rem}
.ing-grid-lg li{padding:1.05rem 1.2rem}
.ing-grid-lg strong{font-size:1rem}

.nope-row{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.6rem 0}
.nope-row span{
  font-family:var(--f-head);font-size:.88rem;font-weight:600;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:100px;padding:.5rem 1.1rem;
}
.section-dark .nope-row span{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#fff}

/* ── process chain ───────────────────────────────────────── */
.chain{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;counter-reset:c}
.chain li{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:.85rem 1rem .85rem 3rem;
  font-family:var(--f-head);font-weight:600;font-size:.96rem;color:var(--ink);
}
.chain li::before{
  counter-increment:c;content:counter(c);
  position:absolute;left:.9rem;top:50%;translate:0 -50%;
  width:22px;height:22px;border-radius:50%;background:var(--grad);color:#08260F;
  display:grid;place-items:center;font-size:.74rem;
}
.chain-row{grid-template-columns:repeat(4,1fr)}

.chain-flow{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:1.5rem 0 1.8rem}
.chain-flow span{
  font-family:var(--f-head);font-weight:600;font-size:.92rem;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  padding:.5rem 1rem;border-radius:100px;color:#fff;
}
.chain-flow i{font-style:normal;color:#8FE0A8}
.page-head .chain-flow span{background:var(--white);border-color:var(--line);color:var(--ink)}
.page-head .chain-flow i{color:var(--green-2)}

/* ── dealer grid ─────────────────────────────────────────── */
.dealer-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;
}
.dealer-grid li{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.5rem;box-shadow:var(--sh-1);
}
.dealer-grid h3{margin-bottom:.4rem}
.dealer-grid p{margin:0;font-size:.95rem;color:var(--ink-soft)}

.dealer-apply{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,4vw,3.4rem);align-items:start}

.callout-soft{
  background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r);
  padding:1.3rem 1.4rem;margin-top:1.8rem;
}
.callout-soft h3{margin-bottom:.35rem}
.callout-soft p{font-size:.94rem;color:var(--ink-soft);margin-bottom:.7rem}

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-wrap{max-width:820px}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.1rem 2.2rem 1.1rem 0;position:relative;
  font-family:var(--f-head);font-weight:600;font-size:1.04rem;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:1.45rem;width:9px;height:9px;
  border-right:2px solid var(--green-2);border-bottom:2px solid var(--green-2);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{margin:0 0 1.2rem;color:var(--ink-soft);font-size:.97rem;max-width:68ch}

/* ── product detail hero ─────────────────────────────────── */
.phero{background:linear-gradient(180deg,var(--cream-2) 0%,var(--cream) 100%);
  padding:clamp(2rem,4vw,3.4rem) 0 clamp(2.2rem,4vw,3.4rem);border-bottom:1px solid var(--line)}
.phero-inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,4vw,3.4rem);align-items:center}
.phero-pack{margin:0;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.4rem;box-shadow:var(--sh-2)}
.phero-pack img{width:100%;height:auto}
.phero-copy h1{font-size:clamp(2rem,4.4vw,3.1rem);margin:.6rem 0 .5rem;line-height:1.1}
.phero-copy h1 em{display:block;font-style:normal;font-size:.44em;font-weight:600;
  color:var(--bag);letter-spacing:.01em;margin-top:.35rem}
.phero .status{background:color-mix(in srgb,var(--bag) 14%,transparent);color:var(--bag)}
.phero-copy .lede{font-size:1.1rem;max-width:52ch}
.phero-spec{
  display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin:1.6rem 0 1.8rem;
  padding:1.1rem 0;border-block:1px solid var(--line);
}
.phero-spec div{display:flex;flex-direction:column;gap:.18rem}
.phero-spec dt{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}
.phero-spec dd{margin:0;font-family:var(--f-head);font-weight:700;font-size:1.05rem;color:var(--ink)}

/* ── spec table ──────────────────────────────────────────── */
.spec-cols{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,3vw,3rem);align-items:start}
.spec-table{width:100%;border-collapse:collapse;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.spec-table caption{
  font-family:var(--f-head);font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:.9rem 1.1rem .2rem;
}
.spec-table th,.spec-table td{padding:.8rem 1.1rem;border-top:1px solid var(--line);text-align:left;font-size:.96rem}
.spec-table th{font-family:var(--f-body);font-weight:500;color:var(--ink-soft);width:48%}
.spec-table td{font-family:var(--f-head);font-weight:600;color:var(--ink)}

.tests-grid{list-style:none;margin:0 0 1.4rem;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.tests-grid li{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.6rem .8rem;font-size:.9rem;color:var(--ink-soft);text-align:center;
}
.tests-grid-lg li{padding:.9rem .8rem;font-family:var(--f-head);font-weight:600;color:var(--ink)}

/* ── factory tour ────────────────────────────────────────── */
.tour{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.tour li{
  position:relative;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:1.5rem 1.4rem 1.4rem;box-shadow:var(--sh-1);
}
.tour-n{
  display:block;font-family:var(--f-head);font-size:.82rem;font-weight:700;
  letter-spacing:.08em;color:var(--gold);margin-bottom:.5rem;
}
.tour h3{margin-bottom:.4rem}
.tour p{margin:0;font-size:.94rem;color:var(--ink-soft)}

/* ── plant photography ───────────────────────────────────────
   A grid, not CSS columns: these photographs run in process
   order, and columns would flow 01-04 down the first column and
   put 05 beside 01. align-items:start lets each card keep its
   own aspect ratio rather than cropping the landscape shots;
   a shorter card simply sits shorter in its row. */
.fgal{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1.2rem;align-items:start;margin-bottom:1.8rem;
}
.fgal figure{
  margin:0;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh-1);
}
.fgal img{display:block;width:100%;height:auto;background:#E8EDEF}
.fgal figcaption{
  padding:1rem 1.15rem 1.15rem;font-size:.9rem;line-height:1.55;color:var(--ink-soft);
}
.fg-n{
  display:block;font-family:var(--f-head);font-size:.78rem;font-weight:700;
  letter-spacing:.08em;color:var(--gold);margin-bottom:.3rem;
}
.fgal figcaption strong{
  display:block;font-family:var(--f-head);font-size:1rem;font-weight:700;
  color:var(--ink);margin-bottom:.35rem;
}

/* ── district / subdivision coverage ─────────────────────── */
.dist-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.6rem}
.dist{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:1.2rem 1.1rem;box-shadow:var(--sh-1);
}
.dist h3{margin-bottom:.15rem;font-size:1.02rem}
.dist-hq{margin:0 0 .7rem;font-size:.82rem;color:var(--muted)}
.dist-subs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.dist-subs li{
  font-size:.82rem;line-height:1.4;color:var(--ink-soft);
  background:var(--cream-2);border:1px solid var(--line);
  border-radius:100px;padding:.2rem .6rem;
}

/* ── dealer locator ──────────────────────────────────────── */
/* A district card either lists its dealers or states which office supplies it.
   The "no dealer yet" line is deliberately not greyed into invisibility: it is
   the answer for most districts today, and it tells the farmer what to do. */
.loc-dealers{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.loc-dealers li{display:flex;flex-direction:column;gap:.1rem}
.loc-dealers a{
  font-family:var(--f-head);font-weight:600;font-size:.94rem;
  color:var(--green);text-decoration:none;
}
.loc-dealers a:hover{text-decoration:underline}
.loc-dealers em{font-style:normal;font-size:.8rem;color:var(--muted)}
.loc-none{
  margin:0;font-size:.82rem;line-height:1.45;color:var(--ink-soft);
  background:var(--cream-2);border:1px dashed var(--line);
  border-radius:var(--r-sm);padding:.45rem .65rem;
}
.loc-none span{color:var(--muted)}
.loc-none b{color:var(--ink);font-weight:600}
/* A district with no dealer is an open territory. The prompt sits under the
   supply line rather than replacing it, because the farmer reading this still
   needs to know where their feed comes from today. */
.loc-open{margin:.45rem 0 0;font-size:.82rem}
.loc-open a{color:var(--green);font-weight:600;text-decoration:none}
.loc-open a:hover{text-decoration:underline}

/* Subdivision rows inside a district card. Name on the left, status on the
   right, so a farmer scans down the column for their own subdivision and
   reads across once. */
.loc-subs{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.loc-subs li{
  display:flex;flex-wrap:wrap;gap:.3rem .7rem;align-items:baseline;
  justify-content:space-between;
  padding:.4rem .55rem;border-radius:var(--r-sm);background:var(--cream-2);
  border:1px solid var(--line);
}
.loc-subs strong{font-family:var(--f-head);font-size:.88rem;color:var(--ink);font-weight:600}
.loc-subs .loc-open,.loc-subs .loc-soon,.loc-subs .loc-has{margin:0;font-size:.76rem}
.loc-soon{color:var(--muted);font-weight:600}
.loc-has a{color:var(--green);font-weight:600;text-decoration:none}
.loc-has a:hover{text-decoration:underline}

/* ── a dealer's own page ─────────────────────────────────── */
.dealer-addr{font-size:1.02rem;line-height:1.6;color:var(--ink);margin-bottom:1rem}
.dealer-meta{margin:0 0 .4rem;font-size:.88rem;color:var(--muted)}
.dealer-meta b{color:var(--ink);font-weight:600}
.dealer-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.2rem}

/* 35 districts is a long list, so it is a dense two-line cell rather than a
   card: name on top, headquarters under it, scannable in a single pass. */
/* species guide: a wide table that still has to work on a phone, so it scrolls
   inside its own box rather than pushing the page sideways */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:1.2rem}
.species-table{width:100%;min-width:560px;border-collapse:collapse;background:var(--white)}
.species-table caption{
  caption-side:top;text-align:left;padding:0 0 .7rem;
  font-size:.86rem;color:var(--muted);
}
.species-table th[scope="col"]{
  text-align:left;font-family:var(--f-head);font-size:.82rem;font-weight:700;
  letter-spacing:.03em;color:var(--ink);padding:.7rem .9rem;
  border-bottom:2px solid var(--line);background:var(--cream-2);
}
.species-table th[scope="row"]{
  text-align:left;padding:.75rem .9rem;font-family:var(--f-head);font-weight:600;
  color:var(--ink);border-bottom:1px solid var(--line);
}
.species-table th[scope="row"] em{
  display:block;font-family:var(--f-body);font-style:italic;font-weight:400;
  font-size:.78rem;color:var(--muted);margin-top:.1rem;
}
.species-table td{
  padding:.75rem .9rem;font-size:.9rem;color:var(--ink-soft);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
.species-table td b{color:var(--ink)}

.dcell-grid{
  list-style:none;margin:0 0 1.4rem;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem 1rem;
}
.dcell-grid li{
  padding:.55rem .8rem;background:var(--white);
  border:1px solid var(--line);border-radius:10px;
}
.dcell-grid strong{display:block;font-family:var(--f-head);font-size:.92rem;color:var(--ink)}
.dcell-grid span{display:block;font-size:.78rem;color:var(--muted);margin-top:.1rem}

/* ── offices ─────────────────────────────────────────────── */
.office-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;max-width:760px}
.office{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem}
.office h3{margin-bottom:.5rem}
.office p{font-size:.96rem;color:var(--ink-soft);margin-bottom:.6rem}

/* ── gallery ─────────────────────────────────────────────── */
.gal{list-style:none;margin:0 0 2rem;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.gal li{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--sh-1);border-top:3px solid var(--bag);
}
.gal img{width:100%;height:300px;object-fit:contain;background:#FCFCFB;padding:.8rem 0}
.gal figcaption{
  padding:.9rem 1.1rem 1.1rem;font-family:var(--f-head);font-weight:600;color:var(--ink);
  border-top:1px solid var(--line);
}
.gal figcaption span{display:block;font-family:var(--f-body);font-weight:400;
  font-size:.86rem;color:var(--muted);margin-top:.15rem}
.range-shot figcaption{margin-top:.9rem;font-size:.88rem;color:var(--muted);text-align:center}

/* ── footer ──────────────────────────────────────────────── */
.footer-top{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:2rem;
  padding-block:clamp(2.4rem,5vw,3.4rem) 2rem;
}
.footer-brand strong{display:block;font-family:var(--f-head);font-size:1.1rem;color:#fff;margin-bottom:.5rem}
.footer-brand p{font-size:.92rem;margin-bottom:.7rem;max-width:34ch}
.footer-claim{color:var(--gold-lt);font-family:var(--f-head);font-size:.92rem}
.footer-col h2{
  font-family:var(--f-head);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  color:#7E978D;margin:0 0 .9rem;
}
.footer-col a{display:block;font-size:.92rem;color:#B9CDC2;padding:.18rem 0}
.footer-col a:hover{color:#fff}
.footer-contact p{font-size:.9rem;margin-bottom:.8rem;color:#A8BFB3}
.footer-contact strong{color:#D6E5E0}
.footer-cta{margin-top:.9rem;display:inline-flex}

/* ── responsive ──────────────────────────────────────────── */
@media (max-width:1080px){
  .pgrid,.dealer-grid,.tour,.gal{grid-template-columns:repeat(2,1fr)}
  .dist-grid,.dcell-grid{grid-template-columns:repeat(2,1fr)}
  .fgal{grid-template-columns:repeat(2,1fr)}
  .footer-top{grid-template-columns:1fr 1fr;gap:1.6rem}

  /* the dropdowns become plain stacked links inside the drawer */
  .has-menu{width:100%}
  .menu-top{width:100%;justify-content:space-between;padding:.85rem 0;
    border-bottom:1px solid var(--line);font-size:1rem}
  .menu{position:static;translate:none;opacity:1;visibility:visible;transform:none;
    min-width:0;box-shadow:none;border:0;border-radius:0;padding:.2rem 0 .6rem .9rem;background:none}
  .menu a{padding:.5rem 0}
}
@media (max-width:940px){
  .hero-x-inner,.split,.cat-grid,.spec-cols,.dealer-apply,.phero-inner,.office-grid{grid-template-columns:1fr}
  .hero-x-packs{order:-1}
  .phero-pack{max-width:420px}
  .strip-inner{grid-template-columns:repeat(2,1fr);gap:1.4rem}
  .chain-row{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .pgrid,.dealer-grid,.tour,.gal,.chain-row,.footer-top{grid-template-columns:1fr}
  .dist-grid{grid-template-columns:1fr}
  .dcell-grid{grid-template-columns:repeat(2,1fr)}
  .fgal{grid-template-columns:1fr}
  .phero-spec{grid-template-columns:1fr 1fr}
  .tests-grid{grid-template-columns:1fr 1fr}
  .pcard-media img,.gal img{height:240px}
}