/* PeptidePaw — site stylesheet. Its own look (deep teal, sky, coral), distinct from SlowChew's oat/pine/orange.
   Mobile-first: everything holds at 390px with no horizontal scroll. */
:root{
  --display:"Fraunces";
  --text:"Nunito Sans";
  --paper:#F5FAFB;
  --paper-2:#E6F2F5;
  --card:#FFFFFF;
  --ink:#10313B;
  --ink-soft:#4E6A72;
  --line:#D5E6EA;
  --teal:#0E4A5A;
  --teal-soft:#D9ECF0;
  --coral:#FF8A65;
  --coral-dark:#D9603C;
  --coral-soft:#FFE6DD;
  --sun:#FFD166;
  --radius:20px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text),system-ui,sans-serif;font-size:18px;line-height:1.65;overflow-x:clip}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--teal);text-underline-offset:3px}
a:hover{color:var(--coral-dark)}
h1,h2,h3{font-family:var(--display),Georgia,serif;color:var(--ink);font-weight:700}
h1{font-size:48px;line-height:1.08;letter-spacing:-.6px;margin:0 0 16px}
h2{font-size:30px;line-height:1.2;margin:36px 0 12px}
h3{font-size:21px;line-height:1.3;margin:24px 0 8px}
p{margin:0 0 16px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.narrow{max-width:740px;margin:0 auto;padding:0 20px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:8px;z-index:99}
.skip:focus{left:8px}

/* preview ribbon (pre-launch only) */
.pp-ribbon{position:fixed;left:12px;bottom:12px;z-index:100;background:var(--ink);color:#fff;font-size:12px;font-weight:800;
  letter-spacing:.3px;padding:6px 12px;border-radius:999px;pointer-events:none}

/* nav */
.pp-nav{position:sticky;top:0;z-index:50;background:rgba(245,250,251,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.pp-nav-in{max-width:1120px;margin:0 auto;padding:0 20px;min-height:66px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pp-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.pp-brand svg{width:34px;height:34px}
.pp-word{font-family:var(--display),Georgia,serif;font-weight:800;font-size:25px;letter-spacing:-.3px}
.pp-word b{color:var(--coral-dark);font-weight:800}
.pp-links{display:flex;align-items:center;gap:18px;font-weight:700;font-size:16px;flex-wrap:wrap}
.pp-links a{text-decoration:none;color:var(--ink-soft)}
.pp-links a:hover,.pp-links a[aria-current="page"]{color:var(--ink)}
.pp-links a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:3px;text-underline-offset:7px}

/* buttons */
.btn{display:inline-block;font-weight:800;text-decoration:none;border-radius:999px;padding:13px 24px;font-size:17px;line-height:1.2}
.btn-shop{background:var(--coral);color:#2A1007}
.btn-shop:hover{background:var(--coral-dark);color:#fff}
.btn-ghost{border:2px solid var(--teal);color:var(--teal)}
.btn-ghost:hover{background:var(--teal);color:#fff}
.pp-links .btn{padding:8px 16px;font-size:15px;color:#2A1007}

/* hero */
.hero{padding:56px 0 40px;background:linear-gradient(180deg,var(--paper-2),var(--paper))}
.hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.eyebrow{display:inline-block;background:var(--teal-soft);color:var(--teal);font-weight:800;font-size:14px;letter-spacing:.4px;
  text-transform:uppercase;border-radius:999px;padding:5px 12px;margin-bottom:14px}
.lede{font-size:21px;color:var(--ink-soft);max-width:56ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.hero-art{border-radius:28px;overflow:hidden;box-shadow:0 24px 50px -30px rgba(16,49,59,.55)}

/* sections + cards */
.sec{padding:48px 0}
.sec-alt{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column}
.card h3{margin-top:0}
.card p{color:var(--ink-soft);font-size:16px}
.card .more{margin-top:auto;font-weight:800;text-decoration:none}
.guide-card{padding:0;overflow:hidden}
.guide-card .body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.guide-card .meta{font-size:14px;color:var(--ink-soft);font-weight:700}
.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:14px}
.steps li{counter-increment:s;position:relative;padding:4px 0 4px 52px}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;background:var(--coral-soft);
  color:var(--coral-dark);font-weight:900;display:grid;place-items:center}

/* article */
.article-head{padding:44px 0 18px}
.crumbs{font-size:14px;font-weight:700;color:var(--ink-soft);margin-bottom:12px}
.crumbs a{color:var(--ink-soft)}
.dek{font-size:21px;color:var(--ink-soft)}
.byline{font-size:15px;color:var(--ink-soft);font-weight:700}
.article-art{border-radius:24px;overflow:hidden;margin:8px 0 26px}
.prose ul,.prose ol{padding-left:24px;margin:0 0 16px}
.prose li{margin-bottom:6px}
table{border-collapse:collapse;width:100%;margin:8px 0 22px;background:var(--card);border-radius:14px;overflow:hidden;border:1px solid var(--line)}
caption{text-align:left;font-weight:800;padding:0 0 8px}
th,td{text-align:left;padding:12px 14px;border-top:1px solid var(--line)}
thead th{background:var(--teal-soft);border-top:0}

/* notes */
.vet-note{background:var(--teal-soft);border-left:5px solid var(--teal);border-radius:14px;padding:16px 18px;margin:26px 0;font-size:16px}
.vet-note strong{display:block;margin-bottom:4px}
.shop-box{background:var(--coral-soft);border-radius:var(--radius);padding:24px;margin:30px 0;display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.shop-box p{margin:0;max-width:52ch}
.shop-box h2{margin:0 0 6px;font-size:24px}

/* faq */
details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin-bottom:12px}
summary{font-weight:800;cursor:pointer}
details p{margin:10px 0 0}

/* footer */
.pp-foot{background:var(--teal);color:#DCEFF3;padding:40px 0 30px;margin-top:40px;font-size:15px}
.pp-foot a{color:#fff}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
.foot-legal{border-top:1px solid rgba(255,255,255,.2);margin-top:24px;padding-top:16px;font-size:13px;color:#B9D9E0}
.pp-foot .pp-word{color:#fff}

@media (max-width:860px){
  h1{font-size:36px}
  h2{font-size:25px}
  .hero-in{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .pp-links{gap:12px;font-size:15px;padding-bottom:10px}
}
.article-art img,.hero-art img,.guide-card img{width:100%}