/* Petmaxxing visual system v1 — editorial veterinary journal meets warm pet brand
   Shipped 2026-05-08. See petmaxxing-overhaul-preview.html for reference. */

:root{
  --paper:#faf6f0;
  --paper-deep:#f4ede0;
  --paper-warm:#efe6d4;
  --evergreen:#1f5f3f;
  --evergreen-mid:#2d7a52;
  --evergreen-deep:#143d28;
  --evergreen-tint:#e6efe9;
  --amber:#b8741a;
  --amber-light:#f5e6cc;
  --clay:#c4733e;
  --sage:#7a9b85;
  --honey:#d4a347;
  --lavender:#9b8db5;
  --stone:#8b8579;
  --ink:#1c2a24;
  --text:#3d4f47;
  --text-soft:#5a6b62;
  --muted:#606d67;
  --line:#e2dccf;
  --line-soft:#ede5d4;
  --display:'Source Serif 4',Georgia,serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sidebar:260px;
  --max-content:920px;
  --radius:10px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--body);color:var(--text);background:var(--paper);font-size:15.5px;line-height:1.65;min-height:100vh}
a{color:var(--evergreen);text-decoration:none}
a:hover{color:var(--evergreen-deep)}
img{max-width:100%;height:auto}

/* TRUST RIBBON */
.trust-ribbon{background:var(--evergreen-deep);color:#dde7e0;font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:7px 24px;display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap}
.trust-ribbon .dot{width:6px;height:6px;border-radius:100px;background:#7fc89a;display:inline-block;margin-right:6px;animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.7}50%{opacity:1}}
.trust-ribbon strong{color:#fff;font-weight:600}

/* APP SHELL */
.shell{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:calc(100vh - 32px)}
@media(max-width:980px){.shell{grid-template-columns:1fr}}

aside.side{background:var(--paper-deep);border-right:1px solid var(--line);padding:28px 22px;position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto}
@media(max-width:980px){aside.side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}}
.brand{display:flex;align-items:baseline;gap:0;margin-bottom:24px}
.brand-mark{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:-.02em;color:var(--ink);text-decoration:none;display:block}
.brand-mark em{font-style:italic;color:var(--evergreen);font-weight:600}
.brand-tag{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-top:4px}
.nav-section{margin-top:22px}
.nav-label{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:10px;padding-left:10px}
.nav-count{color:var(--evergreen);font-weight:700}
.nav-list{list-style:none}
.nav-list a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;color:var(--text);font-size:13.5px;font-weight:500;transition:background .15s,color .15s;text-decoration:none}
.nav-list a:hover{background:var(--evergreen-tint);color:var(--evergreen-deep)}
.nav-list a.active{background:var(--evergreen);color:#fff}
.nav-list a .ic{width:14px;height:14px;flex-shrink:0;opacity:.75}
.nav-list a.active .ic{opacity:1}
.nav-list a.tool-item{font-size:12.5px;color:var(--text-soft);padding:6px 10px}
.nav-list a.tool-item:hover{color:var(--evergreen-deep)}

.live-panel{margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px}
.live-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.live-panel-title{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.live-pill{background:var(--evergreen-tint);color:var(--evergreen);font-family:var(--mono);font-size:9px;font-weight:700;padding:2px 6px;border-radius:100px;text-transform:uppercase;letter-spacing:.08em}
.live-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:12px;border-bottom:1px dotted var(--line-soft)}
.live-row:last-child{border-bottom:0}
.live-row .name{color:var(--text);font-weight:500}
.live-row .meta{color:var(--muted);font-family:var(--mono);font-size:11px}

main.body{min-width:0}

/* HERO */
.hero{position:relative;min-height:520px;display:flex;align-items:center;overflow:hidden;background:#0c1e15}
.hero-img{position:absolute;inset:0;background-image:url('/images/remote/1583511655826-05700d52f4d9-w1600.jpg');background-size:cover;background-position:center 35%;opacity:.55}
.hero-vignette{position:absolute;inset:0;background:linear-gradient(95deg,rgba(20,61,40,.92) 0%,rgba(20,61,40,.55) 38%,rgba(20,61,40,.18) 70%,rgba(20,61,40,.45) 100%)}
.hero-grain{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:3px 3px;pointer-events:none;opacity:.4}
.hero-content{position:relative;z-index:2;max-width:var(--max-content);margin:0 auto;padding:60px 48px;width:100%;color:#fff}
.hero-eyebrow{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:#c5dccf;margin-bottom:20px;display:flex;align-items:center;gap:10px}
.hero-eyebrow .div{width:24px;height:1px;background:#7fc89a}
.hero-title{font-family:var(--display);font-size:clamp(40px,5.6vw,64px);font-weight:600;line-height:1.04;letter-spacing:-.022em;margin-bottom:18px;max-width:680px}
.hero-title em{font-style:italic;color:#d4a347;font-weight:500}
.hero-sub{font-size:16.5px;line-height:1.6;color:#e2ece5;max-width:560px;margin-bottom:32px;font-weight:400}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 24px;border-radius:6px;font-weight:600;font-size:14px;font-family:var(--body);transition:all .2s;text-decoration:none;border:0;cursor:pointer}
.btn-primary{background:#d4a347;color:var(--evergreen-deep)}
.btn-primary:hover{background:#e2b35d;color:var(--evergreen-deep)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}

/* CREDIBILITY STRIP */
.cred-strip{background:var(--evergreen-deep);color:#dde7e0;padding:18px 48px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;border-bottom:1px solid rgba(255,255,255,.08)}
@media(max-width:980px){.cred-strip{grid-template-columns:repeat(2,1fr)}}
.cred-cell{display:flex;align-items:center;gap:12px}
.cred-cell .ic{width:22px;height:22px;flex-shrink:0;color:#7fc89a}
.cred-cell .label{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;color:#8eaa9a;margin-bottom:2px}
.cred-cell .value{font-size:13px;font-weight:500;color:#fff;line-height:1.3}

/* CONTENT REGIONS */
section.region{max-width:var(--max-content);margin:0 auto;padding:60px 48px}
@media(max-width:680px){section.region{padding:48px 24px}}
.region-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:28px;gap:24px;flex-wrap:wrap}
.region-eyebrow{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--evergreen);margin-bottom:8px;font-weight:600}
.region-title{font-family:var(--display);font-size:30px;font-weight:600;letter-spacing:-.018em;color:var(--ink);line-height:1.15}
.region-title em{font-style:italic;color:var(--evergreen);font-weight:500}
.region-link{font-size:13px;color:var(--evergreen);font-weight:600;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.region-link:hover{gap:10px;transition:gap .2s}

/* ANCHOR TOOL CTA */
.anchor-cta{background:linear-gradient(135deg,var(--evergreen) 0%,var(--evergreen-mid) 100%);border-radius:var(--radius);padding:36px 40px;color:#fff;display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:center;position:relative;overflow:hidden}
@media(max-width:780px){.anchor-cta{grid-template-columns:1fr;padding:28px 24px}}
.anchor-cta::before{content:'';position:absolute;top:-40%;right:-10%;width:50%;height:200%;background:radial-gradient(ellipse,rgba(212,163,71,.18) 0%,transparent 60%);pointer-events:none}
.anchor-cta-eye{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;color:#a8d4ba;margin-bottom:10px}
.anchor-cta h3{font-family:var(--display);font-size:30px;font-weight:600;line-height:1.15;letter-spacing:-.015em;margin-bottom:10px;color:#fff}
.anchor-cta h3 em{font-style:italic;color:#d4a347}
.anchor-cta p{color:#dde7e0;font-size:14.5px;line-height:1.6;margin-bottom:18px;max-width:420px}
.anchor-cta-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:#a8d4ba;font-family:var(--mono);margin-bottom:18px}
.anchor-cta-meta span::before{content:'·';margin-right:14px;color:#5d7a6b}
.anchor-cta-meta span:first-child::before{content:''}
.anchor-mock{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:16px;font-family:var(--mono);font-size:12px;color:#e2ece5}
.anchor-mock-row{padding:7px 0;border-bottom:1px dotted rgba(255,255,255,.18);display:flex;justify-content:space-between}
.anchor-mock-row:last-child{border-bottom:0;padding-top:10px}
.anchor-mock-row .v{color:#d4a347}
.anchor-mock-row.total .v{color:#fff;font-weight:600}

/* CATEGORY CARDS */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:780px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cat-grid{grid-template-columns:1fr}}
.cat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 20px;display:block;color:inherit;position:relative;transition:transform .15s,border-color .15s,box-shadow .15s;overflow:hidden;text-decoration:none}
.cat:hover{transform:translateY(-2px);border-color:var(--evergreen);box-shadow:0 8px 24px rgba(20,61,40,.06)}
.cat::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent,var(--evergreen));opacity:.85}
.cat[data-cat="joint"]{--accent:var(--clay)}
.cat[data-cat="gut"]{--accent:var(--sage)}
.cat[data-cat="skin"]{--accent:var(--honey)}
.cat[data-cat="calm"]{--accent:var(--lavender)}
.cat[data-cat="senior"]{--accent:var(--stone)}
.cat[data-cat="vit"]{--accent:var(--amber)}
.cat-eye{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--accent,var(--evergreen));font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.cat-eye-dot{width:8px;height:8px;border-radius:100px;background:var(--accent,var(--evergreen))}
.cat h4{font-family:var(--display);font-size:18px;font-weight:600;line-height:1.25;letter-spacing:-.012em;color:var(--ink);margin-bottom:6px}
.cat p{font-size:13px;color:var(--text-soft);line-height:1.55;margin-bottom:14px}
.cat-foot{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--muted);font-family:var(--mono)}
.cat-foot .arrow{color:var(--accent,var(--evergreen));font-weight:600}

/* REVIEWS GRID */
.review-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:14px}
@media(max-width:880px){.review-grid{grid-template-columns:1fr}}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:block;color:inherit;transition:transform .15s,box-shadow .15s;text-decoration:none}
.review:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(20,61,40,.06)}
.review-img{width:100%;height:160px;background-size:cover;background-position:center;background-color:var(--paper-warm)}
.review.featured .review-img{height:240px}
.review-body{padding:18px}
.review-eye{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--evergreen);font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.score-badge{background:var(--evergreen);color:#fff;font-family:var(--mono);font-size:10px;font-weight:700;padding:2px 7px;border-radius:100px;letter-spacing:.04em}
.review h4{font-family:var(--display);font-size:17px;font-weight:600;line-height:1.3;color:var(--ink);margin-bottom:6px;letter-spacing:-.01em}
.review.featured h4{font-size:22px}
.review p{font-size:13px;color:var(--text-soft);line-height:1.55;margin-bottom:12px}
.review-meta{font-family:var(--mono);font-size:10.5px;color:var(--muted);display:flex;gap:12px}
.review-meta span::before{content:'·';margin-right:12px;color:var(--line)}
.review-meta span:first-child::before{content:''}

/* METHODOLOGY */
.method{background:var(--paper-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.method-inner{max-width:var(--max-content);margin:0 auto;padding:48px;display:grid;grid-template-columns:1fr 1.5fr;gap:40px;align-items:center}
@media(max-width:880px){.method-inner{grid-template-columns:1fr;padding:40px 24px}}
.method-pitch h3{font-family:var(--display);font-size:26px;font-weight:600;line-height:1.2;color:var(--ink);margin-bottom:10px;letter-spacing:-.015em}
.method-pitch h3 em{font-style:italic;color:var(--evergreen)}
.method-pitch p{font-size:14.5px;color:var(--text-soft);line-height:1.65;margin-bottom:14px}
.method-pitch .read-link{font-size:13px;font-weight:600;color:var(--evergreen);text-decoration:none}
.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:520px){.method-grid{grid-template-columns:repeat(2,1fr)}}
.metric{background:#fff;border:1px solid var(--line);border-radius:8px;padding:14px}
.metric-num{font-family:var(--display);font-size:22px;font-weight:600;color:var(--evergreen);line-height:1;margin-bottom:6px}
.metric-num em{font-style:italic;color:var(--amber);font-size:14px;margin-left:2px}
.metric-name{font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:3px}
.metric-desc{font-size:11px;color:var(--muted);line-height:1.4}

/* ADVISORY */
.advisory{padding:60px 48px}
@media(max-width:680px){.advisory{padding:48px 24px}}
.advisory-grid{max-width:var(--max-content);margin:0 auto}
.advisory-lede{font-size:14.5px;color:var(--text-soft);max-width:560px;line-height:1.65;margin-top:10px}
.adv-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
@media(max-width:780px){.adv-cards{grid-template-columns:1fr}}
.adv{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;gap:14px;align-items:flex-start}
.adv-photo{width:54px;height:54px;border-radius:100px;background:var(--paper-warm);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:600;color:var(--evergreen);font-size:18px;border:2px solid var(--line)}
.adv-body{flex:1;min-width:0}
.adv-name{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink);letter-spacing:-.005em}
.adv-cred{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--evergreen);margin:3px 0 8px}
.adv-bio{font-size:12.5px;color:var(--text-soft);line-height:1.5}

/* NEWSLETTER */
.newsletter{background:linear-gradient(135deg,var(--evergreen-deep) 0%,var(--evergreen) 100%);color:#fff;padding:48px;position:relative;overflow:hidden}
.newsletter-inner{max-width:var(--max-content);margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;position:relative;z-index:2}
@media(max-width:780px){.newsletter{padding:40px 24px}.newsletter-inner{grid-template-columns:1fr}}
.newsletter::before{content:'';position:absolute;top:-30%;right:-10%;width:50%;height:160%;background:radial-gradient(ellipse,rgba(212,163,71,.14) 0%,transparent 60%);pointer-events:none}
.newsletter h3{font-family:var(--display);font-size:28px;font-weight:600;line-height:1.2;margin-bottom:10px;letter-spacing:-.015em;color:#fff}
.newsletter h3 em{font-style:italic;color:#d4a347}
.newsletter p{color:#c5dccf;font-size:14px;line-height:1.6;max-width:440px}
.news-form{display:flex;gap:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:6px}
.news-form input{flex:1;background:transparent;border:0;padding:10px 12px;color:#fff;font-family:var(--body);font-size:14px;outline:0}
.news-form input::placeholder{color:#a8c2b3}
.news-form button{background:#d4a347;color:var(--evergreen-deep);border:0;padding:10px 18px;border-radius:6px;font-weight:600;font-size:13px;font-family:var(--body);cursor:pointer}
.news-meta{font-family:var(--mono);font-size:10.5px;color:#8eaa9a;margin-top:10px;letter-spacing:.04em}

/* FOOTER */
footer.foot{background:var(--paper-deep);border-top:1px solid var(--line);padding:36px 48px;font-size:12.5px;color:var(--text-soft)}
@media(max-width:680px){footer.foot{padding:32px 24px}}
.foot-inner{max-width:var(--max-content);margin:0 auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px}
.foot-brand{font-family:var(--display);font-weight:600;color:var(--ink);font-size:14px;text-decoration:none}
.foot-brand em{font-style:italic;color:var(--evergreen)}
.foot-links{display:flex;gap:20px;list-style:none;flex-wrap:wrap}
.foot-links a{color:var(--text-soft);font-size:12.5px;text-decoration:none}
.foot-links a:hover{color:var(--evergreen)}
.foot-note{font-size:11px;color:var(--muted);flex-basis:100%;margin-top:12px;line-height:1.55}

/* AD ZONE */
.ad-zone{max-width:var(--max-content);margin:32px auto;padding:0 48px;text-align:center;min-height:90px}
@media(max-width:680px){.ad-zone{padding:0 24px}}

/* ─── ARTICLE PAGE STYLES ──────────────────────────────────────────
   For inner article pages adopting this design system. See template
   pattern in articles/best-dog-supplements.html (when migrated).
   ──────────────────────────────────────────────────────────────── */
.article-wrap{max-width: min(760px, 100%); min-width: 0;margin:0 auto;padding:48px;color:var(--text)}
@media(max-width:680px){.article-wrap{padding:32px 24px}}
.article-wrap .article-meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:18px;font-size:12px;color:var(--muted);font-family:var(--mono)}
.article-wrap .article-meta span::before{content:'·';margin-right:14px;color:var(--line)}
.article-wrap .article-meta span:first-child::before{content:''}
.article-wrap .article-tag{background:var(--evergreen-tint);color:var(--evergreen);padding:3px 9px;border-radius:100px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.article-wrap h1{font-family:var(--display);font-size:clamp(32px,4.5vw,44px);font-weight:600;line-height:1.12;letter-spacing:-.022em;color:var(--ink);margin-bottom:16px}
.article-wrap h1 em{font-style:italic;color:var(--evergreen)}
.article-wrap .article-intro{font-size:17px;line-height:1.65;color:var(--text-soft);margin-bottom:32px}
.article-wrap h2{font-family:var(--display);font-size:26px;font-weight:600;letter-spacing:-.015em;color:var(--ink);margin-top:48px;margin-bottom:14px;line-height:1.2}
.article-wrap h2 em{font-style:italic;color:var(--evergreen)}
.article-wrap h3{font-family:var(--display);font-size:19px;font-weight:600;color:var(--ink);margin-top:32px;margin-bottom:10px}
.article-wrap p{margin-bottom:18px;font-size:16px;line-height:1.72}
.article-wrap p a,.article-wrap li a{color:var(--evergreen);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.article-wrap p a:hover,.article-wrap li a:hover{color:var(--evergreen-deep)}
.article-wrap .cat,.article-wrap .review,.article-wrap .adv{text-decoration:none}
.article-wrap ul,.article-wrap ol{margin:0 0 18px 24px}
.article-wrap li{margin-bottom:8px;font-size:16px;line-height:1.7}

/* Article: Score Card */
.score-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin:24px 0;display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center}
@media(max-width:580px){.score-card{grid-template-columns:1fr}}
.score-card-num{font-family:var(--display);font-size:56px;font-weight:600;color:var(--evergreen);line-height:1;letter-spacing:-.03em}
.score-card-num em{font-style:italic;color:var(--amber);font-size:24px;margin-left:2px}
.score-card-body h4{font-family:var(--display);font-size:20px;font-weight:600;color:var(--ink);margin-bottom:6px}
.score-card-body p{font-size:13.5px;color:var(--text-soft);line-height:1.55;margin-bottom:0}
.score-card-pros-cons{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
@media(max-width:580px){.score-card-pros-cons{grid-template-columns:1fr}}
.sc-col h5{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:700;margin-bottom:8px}
.sc-col.pros h5{color:var(--evergreen)}
.sc-col.cons h5{color:var(--clay)}
.sc-col ul{list-style:none;margin:0;padding:0}
.sc-col li{font-size:13px;line-height:1.55;margin-bottom:6px;padding-left:18px;position:relative}
.sc-col.pros li::before{content:'+';position:absolute;left:0;color:var(--evergreen);font-weight:700}
.sc-col.cons li::before{content:'−';position:absolute;left:0;color:var(--clay);font-weight:700}

/* Article: Data Table */
.data-table{width:100%;border-collapse:collapse;margin:24px 0;font-size:13.5px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.data-table th{background:var(--evergreen-deep);color:#fff;text-align:left;padding:12px 14px;font-family:var(--display);font-weight:600;font-size:13px}
.data-table td{padding:11px 14px;border-bottom:1px solid var(--line)}
.data-table tr:last-child td{border-bottom:0}
.data-table tr:nth-child(even) td{background:var(--paper-deep)}

/* Article: Callout */
.callout{background:var(--evergreen-tint);border-left:3px solid var(--evergreen);padding:18px 22px;border-radius:0 var(--radius) var(--radius) 0;margin:24px 0;font-size:15px;line-height:1.65}
.callout strong{display:block;font-family:var(--display);font-weight:600;color:var(--ink);margin-bottom:6px;font-size:16px}

/* Article: legacy meta bar (alias) */
.article-meta-bar{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-bottom:18px;font-size:12px;color:var(--muted);font-family:var(--mono)}
.article-meta-bar .article-tag{background:var(--evergreen-tint);color:var(--evergreen);padding:3px 9px;border-radius:100px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-family:var(--mono)}
.reviewed-by{font-size:13px;color:var(--text-soft);margin-bottom:18px;font-style:italic;font-family:var(--body)}
.reviewed-by strong{color:var(--evergreen);font-weight:600;font-style:normal}

/* Article: PRODUCT CARD — full review/roundup card with badge + props grid + CTA */
.product-card{background:#fff;border:2px solid var(--evergreen);border-radius:var(--radius);padding:26px 26px 22px;margin:32px 0;position:relative;box-shadow:0 6px 24px rgba(20,61,40,.08)}
.product-card-badge{position:absolute;top:-12px;left:18px;background:var(--evergreen);color:#fff;font-family:var(--mono);font-size:10.5px;font-weight:700;padding:4px 12px;border-radius:100px;text-transform:uppercase;letter-spacing:.06em}
.product-card-name{font-family:var(--display);font-size:21px;font-weight:600;color:var(--ink);margin-bottom:4px;margin-top:8px;letter-spacing:-.01em;line-height:1.25}
.product-card-price{font-family:var(--mono);font-size:13px;color:var(--evergreen);font-weight:700;margin-bottom:12px}
.product-card-body{font-size:14.5px;color:var(--text-soft);line-height:1.7;margin-bottom:14px}
.product-card-body a{color:var(--evergreen);text-decoration:underline;text-underline-offset:3px}

/* Article: PROP GRID (6-metric scoring badges for product cards) */
.prop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
@media(max-width:600px){.prop-grid{grid-template-columns:repeat(2,1fr)}}
.prop-badge{display:flex;align-items:center;gap:8px;padding:8px 11px;background:var(--paper-deep);border-radius:6px;font-size:12px;border:1px solid var(--line)}
.prop-badge-icon{font-size:13px;flex-shrink:0}
.prop-badge-label{font-weight:600;color:var(--text-soft);text-transform:uppercase;letter-spacing:.04em;font-size:9.5px}
.prop-badge-score{font-family:var(--mono);font-weight:700;font-size:12.5px;margin-left:auto}
.prop-badge-score.high{color:var(--evergreen)}
.prop-badge-score.mid{color:var(--amber)}
.prop-badge-score.low{color:var(--clay)}

/* Article: AFFILIATE CTA BUTTON */
.btn-deal{display:inline-block;padding:12px 22px;background:var(--amber);color:var(--evergreen-deep);font-weight:700;font-size:13.5px;text-decoration:none;border-radius:6px;transition:all .2s;font-family:var(--body)}
.btn-deal:hover{background:#d4a347;transform:translateY(-1px);text-decoration:none}

/* Article: WHO SHOULD / SHOULD NOT */
.who-block{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:28px 0;background:#fff}
.who-block-header{padding:14px 20px;font-family:var(--display);font-weight:600;font-size:15.5px}
.who-block-header.good{background:var(--evergreen-tint);color:var(--evergreen-deep);border-bottom:1px solid #c4dccd}
.who-block-header.bad{background:#fbe9e0;color:#8a3d1c;border-bottom:1px solid #e8c5b0}
.who-block-body{padding:14px 20px;font-size:14.5px;line-height:1.7;color:var(--text)}
.who-block-body ul{margin:0;padding-left:20px}
.who-block-body li{margin-bottom:6px}

/* Article: FAQ legacy variant (.faq + .faq-item to match existing template) */
.faq{margin:36px 0}
.faq-title{font-family:var(--display);font-size:24px;font-weight:600;margin-bottom:18px;color:var(--ink);letter-spacing:-.015em}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:8px;margin-bottom:8px;overflow:hidden;padding:0}
.faq-item summary{padding:14px 18px;font-weight:600;font-size:14.5px;cursor:pointer;color:var(--ink);list-style:none;display:flex;align-items:center;gap:10px;font-family:var(--display)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:'+';font-family:var(--body);font-size:18px;color:var(--evergreen);font-weight:600;width:18px;text-align:center;flex-shrink:0;transition:transform .2s}
.faq-item[open] summary::before{content:'−'}
.faq-item .faq-answer{padding:0 18px 16px 46px;font-size:14px;color:var(--text-soft);line-height:1.7}
.faq-item .faq-answer a{color:var(--evergreen);text-decoration:underline;text-underline-offset:3px}

/* Article: EMAIL CAPTURE (in-article variant) */
.email-capture{background:linear-gradient(135deg,var(--evergreen-deep) 0%,var(--evergreen) 100%);border-radius:var(--radius);padding:32px 28px;margin:36px 0;color:#fff;text-align:center;position:relative;overflow:hidden}
.email-capture::before{content:'';position:absolute;top:-30%;right:-10%;width:50%;height:160%;background:radial-gradient(ellipse,rgba(212,163,71,.16) 0%,transparent 60%);pointer-events:none}
.email-capture h3{font-family:var(--display);font-size:20px;margin-bottom:8px;font-weight:600;letter-spacing:-.01em;position:relative}
.email-capture p{color:#c5dccf;font-size:14px;margin-bottom:18px;position:relative}
.email-capture-form{display:flex;gap:8px;max-width:400px;margin:0 auto;position:relative;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:6px}
.email-capture-form input{flex:1;padding:9px 12px;border:0;background:transparent;color:#fff;font-size:14px;font-family:var(--body);outline:0}
.email-capture-form input::placeholder{color:#a8c2b3}
.email-capture-form button{padding:9px 18px;background:#d4a347;color:var(--evergreen-deep);border:0;border-radius:6px;font-weight:700;font-size:13px;cursor:pointer;font-family:var(--body)}

/* Article: RELATED GRID (legacy) */
.related{margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}
.related-title{font-family:var(--display);font-size:18px;font-weight:600;margin-bottom:18px;color:var(--ink);letter-spacing:-.01em}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(max-width:600px){.related-grid{grid-template-columns:1fr}}
.related-card{display:block;text-decoration:none;color:inherit;padding:18px;background:var(--paper-deep);border-radius:var(--radius);transition:all .2s;border:1px solid transparent}
.related-card:hover{border-color:var(--evergreen);background:var(--evergreen-tint);transform:translateY(-2px)}
.related-card-tag{font-family:var(--mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--evergreen);margin-bottom:5px}
.related-card-title{font-family:var(--display);font-weight:600;font-size:14.5px;line-height:1.3;color:var(--ink);letter-spacing:-.01em}

/* Article: BREADCRUMBS */
.breadcrumbs{max-width:760px;margin:0 auto;padding:14px 48px 0;font-size:11.5px;color:var(--muted);font-family:var(--mono);letter-spacing:.02em}
@media(max-width:680px){.breadcrumbs{padding:14px 24px 0}}
.breadcrumbs a{color:var(--text-soft);text-decoration:none}
.breadcrumbs a:hover{color:var(--evergreen)}

/* Article: callout warning/tip variants */
.callout.warning{background:#fbe9e0;border-left-color:var(--clay)}
.callout.warning strong{color:#8a3d1c}
.callout.success{background:var(--evergreen-tint);border-left-color:var(--evergreen)}
.callout.success strong{color:var(--evergreen-deep)}
.callout.tip{background:var(--amber-light);border-left-color:var(--amber)}
.callout.tip strong{color:#7a4f10}

/* Article: FAQ details/summary (current new variant) */
.faq-section{margin:36px 0}
.faq-section details{background:#fff;border:1px solid var(--line);border-radius:8px;margin-bottom:8px;overflow:hidden}
.faq-section summary{padding:14px 18px;font-weight:600;font-size:14.5px;cursor:pointer;color:var(--ink);list-style:none;font-family:var(--display)}
.faq-section summary::-webkit-details-marker{display:none}
.faq-section summary::after{content:'+';float:right;color:var(--evergreen);font-weight:600;font-family:var(--body)}
.faq-section details[open] summary::after{content:'−'}
.faq-section details p{padding:0 18px 16px;font-size:14px;color:var(--text-soft);line-height:1.65;margin:0;border-top:1px solid var(--line)}
.faq-section details[open] p{padding-top:14px}


/* === RESPONSIVE TABLES (network heal 2026-07-30) === */
/* Wide comparison tables were pushing article pages into horizontal scroll on mobile (measured at
   390px by lattice-core/scripts/render-audit.mjs). Give the table its own scroll container so the
   PAGE never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse
   and the table remains readable. Both rules are required; the first alone destroys the layout. */
table.data-table, table.pricing-table, table.capability-matrix, table.comparison-table,
.article-body table, main table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table.data-table > thead, table.data-table > tbody,
table.pricing-table > thead, table.pricing-table > tbody,
table.capability-matrix > thead, table.capability-matrix > tbody,
table.comparison-table > thead, table.comparison-table > tbody,
.article-body table > thead, .article-body table > tbody,
main table > thead, main table > tbody {
  display: table;
  width: 100%;
  min-width: max-content;
}


/* === RESPONSIVE TABLES v2 (network heal 2026-07-30) === */
/* Wide comparison tables push article pages into horizontal scroll on mobile (measured at 390px by
   lattice-core/scripts/render-audit.mjs). Give every table its own scroll container so the PAGE
   never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and
   the table stays readable. BOTH rules are required; the first alone destroys the layout.
   Deliberately generic: the network uses 15+ distinct table class names and an explicit list has
   already been outrun once. */
table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table > thead, table > tbody, table > tfoot {
  display: table;
  width: 100%;
  min-width: max-content;
}


/* === RESPONSIVE TABLES v3 (network heal 2026-07-30) === */
/* Wide comparison tables push article pages into horizontal scroll on mobile (measured at 390px by
   lattice-core/scripts/render-audit.mjs). Give every table its own scroll container so the PAGE
   never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and
   the table stays readable. BOTH rules are required; the first alone destroys the layout.
   Deliberately generic: the network uses 15+ distinct table class names and an explicit list has
   already been outrun once. */
table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table > thead, table > tbody, table > tfoot {
  display: table;
  width: 100%;
  min-width: max-content;
}

/* Form controls must not outgrow their container either. The newsletter capture ships an email
   input with an inline `min-width:200px`, which together with its padding and the Subscribe button
   pushed three nesyona article pages 5px past a 390px viewport. A hard min-width on a flex child is
   the classic cause, and it is inline on the element, so only a max-width guard reaches it. */
input, select, textarea, button, img, video, iframe, pre {
  max-width: 100%;
}


/* === RESPONSIVE TABLES v4 (network heal 2026-07-30) === */
/* Wide comparison tables push article pages into horizontal scroll on mobile (measured at 390px by
   lattice-core/scripts/render-audit.mjs). Give every table its own scroll container so the PAGE
   never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and
   the table stays readable. BOTH rules are required; the first alone destroys the layout.
   Deliberately generic: the network uses 15+ distinct table class names and an explicit list has
   already been outrun once. */
table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table > thead, table > tbody, table > tfoot {
  display: table;
  width: 100%;
  min-width: max-content;
}

/* Form controls must not outgrow their container either. The newsletter capture ships an email
   input with an inline `min-width:200px`, which together with its padding and the Subscribe button
   pushed three nesyona article pages 5px past a 390px viewport. A hard min-width on a flex child is
   the classic cause, and it is inline on the element, so only a max-width guard reaches it. */
input, select, textarea, button, img, video, iframe, pre {
  max-width: 100%;
}

/* max-width alone does not reach this one. The email input carries an INLINE `min-width:200px`, and
   an inline style beats a stylesheet rule, so the flex row stays wider than its parent and the page
   keeps scrolling 5px. A min-width floor on a flex child is the standard cause of exactly this, and
   `!important` is the only lever that reaches an inline declaration — used deliberately here and
   scoped to one control rather than sprayed across the sheet. */
form input[type="email"] {
  min-width: 0 !important;
}


/* === RESPONSIVE TABLES v5 (network heal 2026-07-30) === */
/* Wide comparison tables push article pages into horizontal scroll on mobile (measured at 390px by
   lattice-core/scripts/render-audit.mjs). Give every table its own scroll container so the PAGE
   never scrolls sideways, while thead/tbody stay display:table so the columns do not collapse and
   the table stays readable. BOTH rules are required; the first alone destroys the layout.
   Deliberately generic: the network uses 15+ distinct table class names and an explicit list has
   already been outrun once. */
table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table > thead, table > tbody, table > tfoot {
  display: table;
  width: 100%;
  min-width: max-content;
}

/* Form controls must not outgrow their container either. The newsletter capture ships an email
   input with an inline `min-width:200px`, which together with its padding and the Subscribe button
   pushed three nesyona article pages 5px past a 390px viewport. A hard min-width on a flex child is
   the classic cause, and it is inline on the element, so only a max-width guard reaches it. */
input, select, textarea, button, img, video, iframe, pre {
  max-width: 100%;
}

/* max-width alone does not reach this one. The email input carries an INLINE `min-width:200px`, and
   an inline style beats a stylesheet rule, so the flex row stays wider than its parent and the page
   keeps scrolling 5px. A min-width floor on a flex child is the standard cause of exactly this, and
   `!important` is the only lever that reaches an inline declaration — used deliberately here and
   scoped to one control rather than sprayed across the sheet. */
form input[type="email"] {
  min-width: 0 !important;
}

/* Long unbroken links. On LensPOV the widest element on four pages was an <a> at 547-678px against
   a 390px viewport: raw URLs used as citation link text, which have no spaces to wrap at, so the
   browser lets them run past the edge and the whole page scrolls sideways. The U3 citation campaign
   adds MORE external links, so this gets worse as the network gets better sourced unless it is
   fixed at the stylesheet. */
a, code, kbd, samp {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ── MOBILE TABLE OVERFLOW (2026-08-13) ─────────────────────────────────────────────────────
   MEASURED BEFORE APPLYING: best-vitamins-for-dogs-2026 showed 370px of horizontal overflow at
   mobile width with the widest element reported as tbody. .data-table is used by 404 articles
   across 15 properties and nothing wraps it in a scroll container.
   Scoped to small screens so desktop rendering is untouched. `table.data-table` (0,0,1,1) beats a
   bare `.data-table` (0,0,1,0) wherever articles carry their own inline rules. */
@media (max-width: 640px) {
  table.data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
}



/* ── GRID MIN-WIDTH FIX (2026-08-13) ────────────────────────────────────────────────────────
   DIAGNOSED FROM COMPUTED STYLES, after two hypotheses were falsified by measurement:
     - wrapping .data-table in a scroll container   370px -> 370px  (dead)
     - respacing `@media(max-width:X)` queries      370px -> 370px  (dead)

   The actual reading: aside.side computed `width: 760px; max-width: none` while its parent
   div.shell computed 390px wide with `display: grid`. Grid items default to `min-width: auto`,
   so a single wide descendant forces the TRACK past the container and no amount of max-width or
   overflow on the descendant can pull it back. The container is 390; the track is 760.

   `minmax(0, 1fr)` plus `min-width: 0` on the children is the standard remedy. Scoped to mobile
   so desktop layout is untouched. */
@media (max-width: 980px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .shell > * { min-width: 0; }
}