/* FreshPlan — mobile-first, warm palette */
:root{
  --or:#E8833A; --or-d:#C96A28; --gr:#2D6A4F; --gr-l:#E8F3ED;
  --bg:#FFFDF9; --card:#ffffff; --ink:#26332C; --ink2:#5B6B61; --ink3:#8A9890;
  --line:#EBE6DD; --warn:#FFF4E5; --warn-b:#F0B357; --bad:#FCE8E6; --ok:#DCF0E4;
  --r:16px; --sh:0 2px 12px rgba(38,51,44,.07);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Roboto,"Helvetica Neue",Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select{font-family:inherit;font-size:16px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,253,249,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hdr-in{max-width:640px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo{font-size:24px}
.brand-n{font-weight:800;font-size:17px;letter-spacing:-.02em}
.brand-s{font-size:11px;color:var(--ink3);line-height:1.2}
.switches{display:flex;gap:6px;flex-shrink:0}
.seg{display:flex;background:#F1ECE4;border-radius:999px;padding:3px;font-size:12px;font-weight:700}
.seg span{padding:5px 11px;border-radius:999px;color:var(--ink3);transition:.18s}
.seg span.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}

/* ---------- layout ---------- */
main{max-width:640px;margin:0 auto;padding:16px 16px 40px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:16px;box-shadow:var(--sh)}
.hidden{display:none}
.ttl{font-size:23px;font-weight:800;margin:0 0 6px;letter-spacing:-.02em}
.sub{margin:0 0 20px;color:var(--ink2);font-size:14px}
.ct{font-size:18px;font-weight:800;margin:0 0 4px;letter-spacing:-.01em}
.cs{margin:0 0 16px;color:var(--ink2);font-size:13px}
.tiny{font-size:11px;color:var(--ink3);text-align:center;margin:10px 0 0}
.opt{font-weight:400;color:var(--ink3);font-size:12px}

/* ---------- form ---------- */
.fld{margin-bottom:20px}
.fld>label{display:block;font-size:13px;font-weight:700;color:var(--ink2);margin-bottom:8px;text-transform:uppercase;letter-spacing:.04em}
.wrow{display:flex;align-items:center;gap:10px}
.wrow input{
  flex:1;min-width:0;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;
  background:#fff;font-size:19px;font-weight:700;color:var(--ink);transition:.15s;
}
.wrow input:focus{outline:none;border-color:var(--or);box-shadow:0 0 0 3px rgba(232,131,58,.13)}
.wunit{font-size:14px;font-weight:700;color:var(--ink3);min-width:48px}
select{
  width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;background:#fff;
  font-size:15px;font-weight:600;color:var(--ink);appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%238A9890' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 15px center;
}
select:focus{outline:none;border-color:var(--or)}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  padding:9px 14px;border:1.5px solid var(--line);border-radius:999px;background:#fff;
  font-size:14px;font-weight:600;color:var(--ink2);transition:.15s;display:inline-flex;align-items:center;gap:6px;
}
.chip:active{transform:scale(.97)}
.chip.on{background:var(--or);border-color:var(--or);color:#fff}
.chips.big .chip{padding:14px 22px;font-size:16px;flex:1;justify-content:center}
.chips.sm .chip{padding:6px 11px;font-size:12.5px}
.chip .ci{font-size:17px}
.chips.sm .chip .ci{display:none}
.hint{margin:9px 0 0;font-size:12.5px;color:var(--ink2);font-style:italic;min-height:18px}

/* ---------- CTA ---------- */
.cta{
  width:100%;padding:17px;background:var(--or);color:#fff;border-radius:14px;
  font-size:16.5px;font-weight:800;letter-spacing:-.01em;box-shadow:0 4px 16px rgba(232,131,58,.32);transition:.15s;
}
.cta:active{transform:translateY(1px);box-shadow:0 2px 8px rgba(232,131,58,.3)}
.cta.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}

/* ---------- hero ---------- */
.hero{position:relative;border-radius:var(--r);overflow:hidden;margin-bottom:16px;box-shadow:var(--sh)}
.hero img{width:100%;height:200px;object-fit:cover}
.hero-ov{position:absolute;left:0;right:0;bottom:0;padding:32px 16px 14px;
  background:linear-gradient(transparent,rgba(20,28,23,.75))}
.hero-tag{color:#fff;font-weight:800;font-size:16px;letter-spacing:-.01em}

/* ---------- stats ---------- */
.statgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border-radius:12px;overflow:hidden;margin-bottom:16px}
.stat{background:#fff;padding:14px;text-align:center}
.sv{font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--or)}
.sl{font-size:11.5px;color:var(--ink3);margin-top:2px}
.modebox{display:flex;gap:12px;align-items:flex-start;background:var(--gr-l);border-radius:12px;padding:14px}
.mode-ic{font-size:20px;line-height:1.2}
.mode-t{font-weight:800;font-size:14.5px;color:var(--gr)}
.mode-d{font-size:12.5px;color:var(--ink2);margin-top:2px}

/* ---------- ingredient table ---------- */
.itbl{width:100%;border-collapse:collapse}
.itbl th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);
  padding:0 0 9px;border-bottom:1.5px solid var(--line);font-weight:700;
}
.itbl th.r{text-align:right}
.itbl td{padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.itbl td.r{text-align:right;white-space:nowrap}
.itbl tr:last-child td{border-bottom:none}
.food-n{font-weight:700;font-size:14.5px}
.food-z{font-size:11.5px;color:var(--ink3);margin-top:1px}
.amt{font-weight:800;font-size:15px;color:var(--ink)}
.amt2{font-size:11.5px;color:var(--ink3);margin-top:1px}
.share{display:inline-block;min-width:42px;padding:3px 8px;background:#F1ECE4;border-radius:999px;font-size:12px;font-weight:700;color:var(--ink2)}
.note{margin-top:14px;padding:11px 13px;background:#F7F4EE;border-radius:10px;font-size:12.5px;color:var(--ink2)}

/* ---------- supplements ---------- */
.card.warn{background:var(--warn);border-color:var(--warn-b)}
.card.warn .ct{display:flex;align-items:center;gap:7px}
.wic{font-size:16px}
.supp{background:#fff;border-radius:12px;padding:14px;margin-bottom:9px;border:1px solid rgba(240,179,87,.3)}
.supp:last-child{margin-bottom:0}
.supp-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.supp-n{font-weight:800;font-size:14.5px}
.supp-a{font-weight:800;font-size:15px;color:var(--or-d);white-space:nowrap}
.supp-z{font-size:11.5px;color:var(--ink3);margin-top:2px}
.supp-d{font-size:12.5px;color:var(--ink2);margin-top:7px;padding-top:7px;border-top:1px dashed var(--line)}
.supp-d b{color:var(--or-d)}

/* ---------- aafco ---------- */
.arow{margin-bottom:13px}
.arow:last-child{margin-bottom:0}
.arow-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:5px}
.arow-n{font-size:13.5px;font-weight:700}
.arow-v{font-size:13px;font-weight:800}
.arow-v.ok{color:var(--gr)}
.arow-v.bad{color:#C0392B}
.arow-t{font-size:11px;color:var(--ink3);font-weight:600}
.bar{height:6px;background:#F1ECE4;border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:var(--gr);transition:width .5s}
.bar i.bad{background:#E07A6B}
.anote{font-size:11.5px;color:var(--ink2);margin-top:4px;font-style:italic}

/* ---------- steps ---------- */
.steps{margin:0;padding-left:20px}
.steps li{margin-bottom:11px;font-size:14px;color:var(--ink);padding-left:4px}
.steps li:last-child{margin-bottom:0}
.steps b{color:var(--or-d)}

/* ---------- disclaimer ---------- */
.card.disc{background:#F7F4EE}
.card.disc ul{margin:0;padding-left:18px}
.card.disc li{font-size:12.5px;color:var(--ink2);margin-bottom:8px}
.card.disc li:last-child{margin-bottom:0}
.card.disc b{color:var(--ink)}

/* ---------- footer ---------- */
footer{max-width:640px;margin:0 auto;padding:0 16px 34px;text-align:center}
footer p{font-size:11.5px;color:var(--ink3);margin:0 0 6px}

@media (max-width:360px){
  .chips.big .chip{padding:12px 14px;font-size:15px}
  .statgrid{grid-template-columns:1fr 1fr}
  .sv{font-size:19px}
}

/* ---------- recipe list ---------- */
.lsthead{margin-bottom:14px}
.lsthead .ttl{margin-bottom:4px}
.lsthead .sub{margin-bottom:0}
.rcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;margin-bottom:13px;box-shadow:var(--sh);cursor:pointer;
  transition:transform .13s,box-shadow .13s;
}
.rcard:active{transform:scale(.985);box-shadow:0 1px 5px rgba(38,51,44,.09)}
.rcard-in{display:flex;align-items:stretch}
.rthumb{width:112px;flex-shrink:0;background:#F1ECE4}
.rthumb img{width:112px;height:100%;min-height:112px;object-fit:cover;display:block}
.rbody{flex:1;min-width:0;padding:13px 14px;display:flex;flex-direction:column;justify-content:center}
.rname{font-weight:800;font-size:16px;letter-spacing:-.01em;display:flex;align-items:center;gap:7px}
.rname .num{
  display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  background:var(--or);color:#fff;border-radius:6px;font-size:11px;font-weight:800;flex-shrink:0;
}
.rmain{font-size:12.5px;color:var(--ink2);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rmeta{display:flex;gap:12px;margin-top:8px;flex-wrap:wrap}
.rmeta span{font-size:11.5px;color:var(--ink3);font-weight:600}
.rmeta b{color:var(--or);font-weight:800}
.rtags{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
.rtag{font-size:10.5px;padding:2px 7px;background:var(--gr-l);color:var(--gr);
  border-radius:5px;font-weight:700}

/* ---------- back bar ---------- */
.backbar{
  display:inline-flex;align-items:center;gap:5px;padding:8px 14px 8px 10px;margin-bottom:12px;
  background:#fff;border:1.5px solid var(--line);border-radius:999px;
  font-size:13.5px;font-weight:700;color:var(--ink);box-shadow:var(--sh);
}
.backbar:active{transform:scale(.97)}
.backbar .bk{font-size:19px;line-height:1;color:var(--or);font-weight:400}
.hero-sub{color:rgba(255,255,255,.9);font-size:12.5px;margin-top:2px;font-weight:600}

/* ---------- breed ---------- */
.breedbox{margin-top:9px;padding:11px 13px;background:var(--gr-l);border-radius:11px;font-size:12.5px;color:var(--ink2)}
.breedbox .br-h{font-weight:800;color:var(--gr);font-size:12px;letter-spacing:.03em;margin-bottom:5px;text-transform:uppercase}
.breedbox .br-row{margin-bottom:5px}
.breedbox .br-row:last-child{margin-bottom:0}
.card.breed{background:var(--gr-l);border-color:#BFE0CE}
.card.breed .ct{color:var(--gr)}
.bsec{margin-bottom:14px}
.bsec:last-child{margin-bottom:0}
.bsec-h{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2);margin-bottom:7px;display:flex;align-items:center;gap:6px}
.bchip{
  display:flex;gap:9px;align-items:flex-start;background:#fff;border-radius:10px;
  padding:10px 12px;margin-bottom:7px;border:1px solid rgba(45,106,79,.14);
}
.bchip:last-child{margin-bottom:0}
.bchip .bc-n{font-weight:800;font-size:13.5px;min-width:0}
.bchip .bc-p{font-size:11px;color:var(--or);font-weight:800;white-space:nowrap}
.bchip .bc-w{font-size:12px;color:var(--ink2);margin-top:3px}
.brisks{display:flex;flex-wrap:wrap;gap:6px}
.brisk{font-size:11.5px;padding:4px 9px;background:#fff;border-radius:6px;color:var(--ink2);
  border:1px solid rgba(45,106,79,.18);font-weight:600}

/* ---------- danger / toxins ---------- */
.card.danger{background:#FDECEA;border-color:#E88C7D}
.toxhead{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:2px 0;
  cursor:pointer}
.toxic{font-size:19px;line-height:1}
.toxt{flex:1;font-weight:800;font-size:15px;color:#A32E1C;letter-spacing:-.01em}
.toxwarn{display:flex;gap:2px;font-size:13px;line-height:1;opacity:.9}
.toxarrow{font-size:22px;color:#A32E1C;transition:transform .32s cubic-bezier(.33,.01,.2,1);
  display:inline-block;line-height:1;padding:0 2px}
.toxarrow.up{transform:rotate(180deg)}
#toxBody,#toxBodyList{margin-top:13px}
.titem{background:#fff;border-radius:10px;padding:11px 13px;margin-bottom:8px;border:1px solid rgba(163,46,28,.16)}
.titem:last-child{margin-bottom:0}
.titem .ti-n{font-weight:800;font-size:13.5px;color:#A32E1C}
.titem .ti-w{font-size:12px;color:var(--ink2);margin-top:4px}
.titem.cat-only .ti-n::after{content:'CAT ONLY';font-size:9px;background:#A32E1C;color:#fff;
  padding:1px 5px;border-radius:4px;margin-left:6px;vertical-align:middle;letter-spacing:.04em}
.titem.dog-only .ti-n::after{content:'DOG ONLY';font-size:9px;background:#A32E1C;color:#fff;
  padding:1px 5px;border-radius:4px;margin-left:6px;vertical-align:middle;letter-spacing:.04em}
.toxnote{margin-top:11px;padding:10px 12px;background:rgba(163,46,28,.08);border-radius:9px;
  font-size:11.5px;color:#8B2418;line-height:1.5}

/* ---------- hero carousel: absolute + crossfade ---------- */
.hero2{position:relative;margin:0 0 14px;border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh);background:#EDE7DE}
/* stage holds a fixed 16:9 box so nothing collapses before images decode */
.car-stage{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#EDE7DE}
.car-slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;cursor:pointer;
  transition:opacity .62s cubic-bezier(.33,.01,.2,1),
             transform .62s cubic-bezier(.33,.01,.2,1),
             visibility 0s linear .62s;
  transform:scale(1.035);will-change:opacity,transform;
}
.car-slide.on{opacity:1;visibility:visible;transform:scale(1);transition-delay:0s}
.car-ph{position:absolute;inset:0;background:#EDE7DE}
.car-ph img{width:100%;height:100%;object-fit:cover;display:block}
.car-cap{
  position:absolute;left:0;right:0;bottom:0;padding:30px 15px 15px;
  background:linear-gradient(to top,rgba(18,26,22,.72),rgba(18,26,22,.34) 52%,transparent);
  color:#fff;display:flex;flex-direction:column;gap:2px;pointer-events:none;
}
.car-cap b{font-size:15.5px;font-weight:800;letter-spacing:-.01em;line-height:1.25;
  text-shadow:0 1px 3px rgba(0,0,0,.35)}
.car-cap span{font-size:11.5px;opacity:.94;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.35)}
.car-dots{position:absolute;bottom:11px;right:13px;display:flex;gap:5px;z-index:3}
.car-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);
  transition:background .3s,width .3s;cursor:pointer}
.car-dot.on{background:#fff;width:16px;border-radius:3px}
.car-hint{position:absolute;top:11px;left:13px;z-index:3;font-size:10.5px;font-weight:700;
  color:#fff;background:rgba(18,26,22,.42);padding:4px 9px;border-radius:999px;
  backdrop-filter:blur(3px);pointer-events:none}

/* ---------- sub-pages ---------- */
.subpage{padding-bottom:6px}
.backbar{display:inline-flex;align-items:center;gap:5px;padding:9px 15px 9px 11px;margin-bottom:12px;
  background:#fff;border:1.5px solid var(--line);border-radius:999px;font-size:13.5px;font-weight:700;
  color:var(--ink);box-shadow:var(--sh)}
.backbar:active{transform:scale(.97)}
.backbar .bk{font-size:20px;line-height:1;color:var(--or);font-weight:400}
.sp-hero{border-radius:var(--r);overflow:hidden;margin-bottom:13px;box-shadow:var(--sh);background:#EDE7DE}
.sp-hero img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.sp-t{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-bottom:11px;
  display:flex;align-items:center;gap:8px}
.sp-ic{font-size:20px}
.sp-body p{font-size:13.5px;color:var(--ink2);line-height:1.65;margin-bottom:10px}
.sp-body ul{margin:0 0 11px;padding-left:19px}
.sp-body li{font-size:13px;color:var(--ink2);line-height:1.6;margin-bottom:5px}
.sp-body strong{color:var(--ink)}
.spfacts{display:flex;gap:8px;flex-wrap:wrap;margin:11px 0 4px}
.spfact{flex:1;min-width:78px;background:var(--or-l);border-radius:10px;padding:9px 8px;text-align:center}
.spfact b{display:block;font-size:15px;font-weight:800;color:var(--or);letter-spacing:-.01em}
.spfact span{font-size:10px;color:var(--ink2);font-weight:600}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;z-index:200;background:rgba(14,20,17,.94);display:flex;
  flex-direction:column;align-items:center;justify-content:center;padding:18px;gap:13px}
.lb-x{position:absolute;top:16px;right:16px;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:17px;display:flex;align-items:center;
  justify-content:center}
.lb img{max-width:100%;max-height:74vh;border-radius:12px;object-fit:contain}
.lb-cap{color:#fff;font-size:13px;font-weight:700;text-align:center;opacity:.92}

/* ---------- trust strip ---------- */
.trust{display:flex;gap:7px;margin-bottom:13px}
.ti{flex:1;background:var(--card);border:1px solid var(--line);border-radius:11px;
  padding:9px 4px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1px}
.ti-i{font-size:14px;line-height:1}
.ti b{font-size:13px;font-weight:800;color:var(--or);letter-spacing:-.01em}
.ti span[data-i18n]{font-size:9.5px;color:var(--ink3);font-weight:600;line-height:1.2}

/* ---------- paw divider ---------- */
.pawdiv{display:flex;justify-content:center;gap:9px;margin:18px 0 4px;opacity:.28}
.pawdiv span{font-size:11px}

/* ---------- footer brand ---------- */
.ft-brand{font-weight:800;font-size:14px;margin-bottom:5px;color:var(--ink)}
.ft-t{font-size:11.5px;color:var(--ink3);line-height:1.55}

/* ---------- playful pet touches ---------- */
.card{position:relative}
#formCard::before{
  content:'🐾';position:absolute;top:11px;right:13px;font-size:13px;opacity:.16;pointer-events:none;
}
.sec-pet{display:flex;align-items:center;gap:7px}
.sec-pet .sp{font-size:15px}

.verline{text-align:center;font-size:10.5px;color:var(--ink3);margin:2px 0 10px;letter-spacing:.02em}
.verline b{color:var(--or);font-weight:800}

/* Utility guard.
   .lb{display:flex} is declared at line 301 and .hidden{display:none} at line
   34 — same specificity, so the later rule won and the lightbox overlay stayed
   on screen from first load with no way to dismiss it. Every utility that must
   never be overridden by a component rule is restated here at the end. */
.hidden{display:none!important}

/* ============================================================
   v6 — 60 recipes in three groups, two cards per row
   ============================================================ */
.grp{margin:0 0 26px}
.grp-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:0 2px 10px;border-bottom:2px solid #E6EDE8;margin-bottom:14px}
.grp-h h2{margin:0;font-size:1.06rem;font-weight:800;letter-spacing:.01em;
  display:flex;align-items:center;gap:8px}
.grp-n{display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:20px;padding:0 6px;border-radius:10px;
  background:#26332C;color:#fff;font-size:.72rem;font-weight:700}
.grp-s{font-size:.76rem;color:#7C8C83;font-weight:600}
.g-wet  .grp-h h2{color:#2E7D5B}
.g-dry  .grp-h h2{color:#B4652A}
.g-treat .grp-h h2{color:#8A5A2B}
.g-wet  .grp-n{background:#2E7D5B}
.g-dry  .grp-n{background:#B4652A}
.g-treat .grp-n{background:#8A5A2B}

.grp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:380px){.grp-grid{grid-template-columns:1fr}}

/* card becomes a vertical photo-first tile */
.grp-grid .rcard{overflow:hidden;border-radius:14px;background:#fff;
  box-shadow:0 2px 10px rgba(38,51,44,.09);cursor:pointer;
  transition:transform .16s, box-shadow .16s}
.grp-grid .rcard:active{transform:scale(.975)}
.grp-grid .rthumb{position:relative;width:100%;aspect-ratio:1/1;
  background:#F2F5F3;overflow:hidden;margin:0}
.grp-grid .rthumb img{width:100%;height:100%;object-fit:cover;display:block}
.grp-grid .rbody{padding:9px 10px 11px}
.grp-grid .rname{font-size:.86rem;font-weight:800;line-height:1.28;
  color:#1F2A24;margin-bottom:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.grp-grid .rmode{font-size:.68rem;font-weight:700;color:#8A9A90;margin-bottom:4px}
.grp-grid .rmain{font-size:.7rem;color:#6C7C73;line-height:1.35;margin-bottom:6px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.grp-grid .rmeta{display:flex;gap:8px;font-size:.68rem;color:#8A9A90;margin-bottom:0}
.grp-grid .rmeta b{color:#26332C;font-size:.75rem}
.grp-grid .rtags{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px}
.grp-grid .rtag{font-size:.62rem;font-weight:700;padding:2px 6px;border-radius:6px;
  background:#EEF3EF;color:#4E6157}

/* building indicator */
.building{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;padding:56px 16px;color:#6C7C73}
.bspin{width:30px;height:30px;border-radius:50%;
  border:3px solid #DDE6E0;border-top-color:#E8833A;animation:bspin .8s linear infinite}
@keyframes bspin{to{transform:rotate(360deg)}}
.btxt{font-size:.82rem;font-weight:700}

/* ============================================================
   v8 — drag-following carousel, page transitions, motion polish
   ============================================================ */

/* --- carousel: a real track that tracks the finger --- */
.car-track{display:flex;height:100%;will-change:transform;
  transform:translate3d(0,0,0);touch-action:pan-y}
.car-slide{position:relative!important;inset:auto!important;
  flex:0 0 100%;width:100%;height:100%;
  opacity:1!important;visibility:visible!important;
  transform:none!important;cursor:grab;
  transition:filter .42s cubic-bezier(.22,.61,.36,1)}
/* while the finger is down the blur is recomputed every frame, so it must
   not be eased; on release the easing takes over and the seam dissolves */
.car-track.dragging .car-slide{transition:none}
.car-slide:active{cursor:grabbing}
/* the cloned first/last slides that make the loop seamless */
.car-slide[data-clone]{pointer-events:auto}
/* keep the caption from swallowing the drag */
.car-cap{pointer-events:none}
.car-dots{display:flex;justify-content:center;gap:7px;padding:11px 0 2px}
.car-dot{width:7px;height:7px;border-radius:50%;background:var(--line);
  transition:width .3s cubic-bezier(.22,.61,.36,1),background .3s;cursor:pointer}
.car-dot.on{width:20px;border-radius:4px;background:var(--or)}

/* --- sub-pages slide in, so a tap reads as a page change --- */
.subpage.page-in{animation:pageIn .34s cubic-bezier(.22,.61,.36,1) both}
@keyframes pageIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}

/* --- long-form article styling --- */
.sp-lead{font-size:14.5px!important;line-height:1.75!important;color:var(--ink)!important;
  font-weight:600;margin-bottom:13px!important}
.spsec{margin:17px 0 0}
.spsec h3{font-size:14.5px;font-weight:800;color:var(--ink);
  letter-spacing:-.01em;margin:0 0 6px;display:flex;align-items:flex-start;gap:7px}
.spsec h3::before{content:'🐾';font-size:11px;opacity:.4;line-height:1.7;flex:0 0 auto}
.spsec p{font-size:13.5px;color:var(--ink2);line-height:1.85;margin:0}
.splist{margin:16px 0 0!important}
.spnote{margin-top:15px!important;background:var(--warn);border:1px solid var(--warn-b);
  border-radius:11px;padding:11px 12px!important;font-size:12.5px!important;color:#7A4A16!important}

/* --- entrance: cards rise into place --- */
.card{animation:rise .44s cubic-bezier(.22,.61,.36,1) both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
main > .card:nth-of-type(2),#recipeList .grp:nth-child(2),
#recipeList .rgrp:nth-child(2){animation-delay:.06s}
#recipeList .grp:nth-child(3),#recipeList .rgrp:nth-child(3){animation-delay:.12s}

/* --- press feedback on everything tappable --- */
.cta,.chip,.backbar,.car-dot,.toxhead{transition:transform .13s cubic-bezier(.22,.61,.36,1),
  box-shadow .22s,background .22s,border-color .22s}
.cta:active,.chip:active,.backbar:active{transform:scale(.975)}
.cta{position:relative;overflow:hidden}
.cta:hover{box-shadow:0 6px 20px rgba(232,131,58,.28)}
.cta::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--rx,50%) var(--ry,50%),
             rgba(255,255,255,.5),transparent 62%);transition:opacity .45s}
.cta:active::after{opacity:1;transition:opacity 0s}
.chip.on{box-shadow:0 3px 12px rgba(45,106,79,.20)}
.chip:hover{border-color:var(--or)}

/* --- a little more pet: paw watermark on section cards --- */
.card{position:relative}
#recipeList .grp,#recipeList .rgrp{position:relative}
#recipeList .grp::after,#recipeList .rgrp::after{
  content:'🐾';position:absolute;top:9px;right:12px;font-size:15px;
  opacity:.07;pointer-events:none}
.backbar .bk{font-size:19px;line-height:1;margin-right:2px}
.brand .logo{display:inline-block;animation:paw 3.6s ease-in-out infinite}
@keyframes paw{0%,86%,100%{transform:rotate(0)}91%{transform:rotate(-13deg)}96%{transform:rotate(13deg)}}
.pawdiv span{display:inline-block;animation:pawbeat 2.4s ease-in-out infinite}
.pawdiv span:nth-child(2){animation-delay:.18s}
.pawdiv span:nth-child(3){animation-delay:.36s}
@keyframes pawbeat{0%,100%{transform:translateY(0);opacity:.28}50%{transform:translateY(-4px);opacity:.6}}

/* --- trust strip is now three items --- */
.trust{display:grid;grid-template-columns:repeat(3,1fr)}

/* ============================================================
   v9 — premium feel: press feedback everywhere, real page
   transitions, depth on hover, motion that answers the finger
   ============================================================ */

/* --- press feedback on every tappable surface --- */
.rcard,.chip,.backbar,.seg,.toxhead,.car-dot,.supp,.stat{
  transition:transform .14s cubic-bezier(.22,.61,.36,1),
             box-shadow .22s cubic-bezier(.22,.61,.36,1),
             background .22s,border-color .22s}
.rcard:active{transform:scale(.975)}
.chip:active{transform:scale(.955)}
.seg:active{transform:scale(.96)}

/* ripple, shared by everything tappable */
.cta,.rcard,.chip,.backbar,.seg{position:relative;overflow:hidden}
.cta::after,.rcard::after,.chip::after,.backbar::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--rx,50%) var(--ry,50%),
             rgba(255,255,255,.55),transparent 62%);
  transition:opacity .5s}
.cta:active::after,.rcard:active::after,.chip:active::after,
.backbar:active::after{opacity:1;transition:opacity 0s}

/* --- depth on hover (desktop pointers only, so touch never sticks) --- */
@media (hover:hover){
  .rcard:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(38,51,44,.14)}
  .chip:hover{transform:translateY(-1px)}
  .card:hover{box-shadow:0 6px 22px rgba(38,51,44,.09)}
  .supp:hover{background:#FBF8F3}
  .car-slide{cursor:grab}
}

/* --- the header lifts once you scroll past the top --- */
.hdr{transition:box-shadow .28s,background .28s}
.hdr.scrolled{box-shadow:0 3px 16px rgba(38,51,44,.10)}

/* --- switching between form / list / detail is a transition, not a jump --- */
#result:not(.hidden),#detail:not(.hidden){animation:pageIn .34s cubic-bezier(.22,.61,.36,1) both}
#result:not(.hidden){animation-name:pageIn}
.subpage.page-in{animation:pageIn .36s cubic-bezier(.22,.61,.36,1) both}

/* --- recipe cards stagger in instead of all appearing at once --- */
#recipeList .rcard{animation:rise .42s cubic-bezier(.22,.61,.36,1) both}
#recipeList .rcard:nth-child(1){animation-delay:0s}
#recipeList .rcard:nth-child(2){animation-delay:.04s}
#recipeList .rcard:nth-child(3){animation-delay:.08s}
#recipeList .rcard:nth-child(4){animation-delay:.12s}
#recipeList .rcard:nth-child(5){animation-delay:.16s}
#recipeList .rcard:nth-child(6){animation-delay:.20s}
#recipeList .rcard:nth-child(n+7){animation-delay:.24s}

/* --- stat tiles settle in sequence --- */
.statgrid .stat{animation:pop .4s cubic-bezier(.22,.61,.36,1) both}
.statgrid .stat:nth-child(2){animation-delay:.05s}
.statgrid .stat:nth-child(3){animation-delay:.10s}
.statgrid .stat:nth-child(4){animation-delay:.15s}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

/* --- images fade up instead of snapping in --- */
.hero img,.sp-hero img,.car-ph img{animation:imgIn .5s ease both}
@keyframes imgIn{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}

/* --- the progress bar breathes while the solver runs --- */
.bar{position:relative;overflow:hidden}
.bar::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:translateX(-100%);animation:sheen 1.15s ease-in-out infinite}
@keyframes sheen{to{transform:translateX(100%)}}

/* --- keyboard users get a visible ring --- */
.cta:focus-visible,.chip:focus-visible,.backbar:focus-visible,
.rcard:focus-visible,.seg:focus-visible{
  outline:2.5px solid var(--or);outline-offset:2px}

/* --- respect the OS "reduce motion" setting --- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}


/* ============================================================
   v10
   ============================================================ */

/* A few more colours to work with. The page was orange-on-cream almost
   everywhere, which read flat; these are accents for tags, stat tiles and
   rules — not a new palette for whole surfaces. */
:root{
  --teal:#2F8F83;  --teal-l:#E4F2F0;
  --amber:#C98A1E; --amber-l:#FBF1DE;
  --plum:#8A5A8F;  --plum-l:#F3EAF4;
  --sky:#3E7CB1;   --sky-l:#E7F0F8;
}

/* ---------- carousel: soften the seam, not the photo ----------
   v9 blurred each whole slide by distance from centre. That made every
   picture soft and did nothing for the hard edge where two different
   photos meet. Now each photo fades out over its own left and right edge
   while the track travels (--fe is set per frame during a drag), so A
   dissolves into B exactly at the join. A settled slide is --fe:0 and
   therefore perfectly sharp. */
.car-ph::before,.car-ph::after{
  content:'';position:absolute;top:0;bottom:0;width:12%;z-index:2;
  pointer-events:none;opacity:var(--fe,0);
  transition:opacity .42s cubic-bezier(.22,.61,.36,1);
}
.car-ph::before{left:0;background:linear-gradient(to right,rgba(237,231,222,.95),rgba(237,231,222,0))}
.car-ph::after{right:0;background:linear-gradient(to left,rgba(237,231,222,.95),rgba(237,231,222,0))}
/* while the finger is down the value changes every frame — no easing */
.car-track.dragging .car-ph::before,
.car-track.dragging .car-ph::after{transition:none}

/* ---------- back button: presses to the theme colour ---------- */
.backbar{transition:transform .14s cubic-bezier(.22,.61,.36,1),
                    background .18s,border-color .18s,color .18s,box-shadow .18s}
.backbar:active{
  transform:scale(.96);
  background:var(--or);border-color:var(--or);color:#fff;
  box-shadow:0 4px 14px rgba(232,131,58,.34);
}
.backbar:active .bk{color:#fff}

/* ---------- ingredient line under the dish name ---------- */
.hero-ing{margin-top:5px;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.82);
  line-height:1.45;text-shadow:0 1px 3px rgba(0,0,0,.3)}

/* ---------- tags get their own colours ---------- */
.rtag{transition:transform .14s}
.rtag-teal {background:var(--teal-l); color:var(--teal)}
.rtag-amber{background:var(--amber-l);color:var(--amber)}
.rtag-plum {background:var(--plum-l); color:var(--plum)}
.rtag-sky  {background:var(--sky-l);  color:var(--sky)}

/* ---------- a thin colour edge on each card, by category ---------- */
.grp-grid .rcard{position:relative}
.grp-grid .rcard::after{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--or);opacity:.85;border-radius:14px 14px 0 0;
}
.g-wet   .grp-grid .rcard::after{background:#2E7D5B}
.g-dry   .grp-grid .rcard::after{background:#B4652A}
.g-treat .grp-grid .rcard::after{background:#8A5A2B}

/* ---------- stat tiles: alternating accents instead of all orange ---------- */
.spfact:nth-child(1){background:var(--or-l)}    .spfact:nth-child(1) b{color:var(--or)}
.spfact:nth-child(2){background:var(--teal-l)}  .spfact:nth-child(2) b{color:var(--teal)}
.spfact:nth-child(3){background:var(--sky-l)}   .spfact:nth-child(3) b{color:var(--sky)}
.spfact:nth-child(4){background:var(--plum-l)}  .spfact:nth-child(4) b{color:var(--plum)}

/* ---------- a little more ornament, kept quiet ---------- */
.grp-n{box-shadow:0 2px 8px rgba(38,51,44,.16)}
.grp-h h2{position:relative;padding-left:2px}
.sp-t .sp-ic{filter:saturate(1.05)}