/* ═══════════════════════════════════════════════════════
   PAWSCIENCE — Design System
   Visual Style: Clean editorial, pet health authority
   Accent: Deep Blue (#1e40af) + Warm Amber (#b45309)
   Typography: Fraunces / Satoshi / IBM Plex Mono
   ═══════════════════════════════════════════════════════ */

:root {
  --accent: #1e40af;
  --accent-hover: #1e3a8a;
  --accent-light: #eff6ff;
  --accent-dim: rgba(30,64,175,0.08);
  --secondary: #b45309;
  --secondary-light: #fef3c7;
  --secondary-hover: #92400e;

  --bg: #fafaf9;
  --surface: #ffffff;
  --surface-alt: #f5f5f4;
  --text: #1c1917;
  --text-secondary: #44403c;
  --muted: #78716c;
  --dim: #a8a29e;
  --border: #e7e5e4;
  --border-dark: #d6d3d1;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Satoshi', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --max-w: 860px;
  --wide: 1000px;
  --radius: 10px;
  --radius-sm: 6px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }

/* ── NETWORK BAR ── */
.network-bar {
  background: #1c1917;
  padding: 6px 1.5rem;
  font-size: .7rem;
  color: #a8a29e;
  display: flex;
  align-items: center;
  gap: .75rem;
  overflow-x: auto;
  white-space: nowrap;
}
.network-bar span { font-weight: 600; color: #78716c; margin-right: .25rem; }
.network-bar a { color: #a8a29e; font-family: var(--font-mono); font-size: .65rem; }
.network-bar a:hover { color: #fff; text-decoration: none; }
.network-bar a.current { color: var(--accent); font-weight: 600; }

/* ── DISCLOSURE ── */
.disclosure {
  background: var(--accent-light);
  border-bottom: 1px solid var(--border);
  padding: .5rem 1.5rem;
  font-size: .75rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
}
.disclosure a { color: var(--accent); font-weight: 500; }

/* ── NAV ── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250,250,249,.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: .75rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.nav-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.nav-left a {
  font-size: .85rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.nav-left a:hover { color: var(--accent); text-decoration: none; }
.nav-brand {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: #1c1917;
  text-decoration: none;
  letter-spacing: -.01em;
  background: #1c1917;
  color: #fff;
  padding: .35rem 1.1rem;
  border-radius: var(--radius-sm);
  text-align: center;
  justify-self: center;
}
.nav-brand span {
  color: #60a5fa;
}
.nav-brand:hover { text-decoration: none; opacity: .92; }
.nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.nav-links a {
  font-size: .85rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.nav-links a:hover { color: var(--accent); text-decoration: none; }
.nav-cta {
  background:var(--accent-fill,var(--accent));
  color: #fff !important;
  padding: .4rem 1rem;
  border-radius: var(--radius-sm);
  font-size: .8rem !important;
  font-weight: 600 !important;
  transition: background .2s;
}
.nav-cta:hover { background: var(--accent-hover); text-decoration: none !important; }

/* ── HERO ── */
.hero {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 4rem 1.5rem 3rem;
  text-align: center;
}
.hero-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-light);
  padding: .3rem .8rem;
  border-radius: 20px;
  margin-bottom: 1.25rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 1rem;
  letter-spacing: -.02em;
}
.hero h1 em {
  font-style: italic;
  color: var(--accent);
}
.hero p {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto 1.5rem;
  line-height: 1.7;
}
.hero-cta {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  color: var(--accent);
  border: 2px solid var(--accent);
  padding: .6rem 1.5rem;
  border-radius: var(--radius-sm);
  transition: all .2s;
}
.hero-cta:hover {
  background:var(--accent-fill,var(--accent));
  color: #fff;
  text-decoration: none;
}

/* ── STATS ROW ── */
.stats-row {
  max-width: var(--max-w);
  margin: 0 auto 2.5rem;
  padding: 0 1.5rem;
  display: flex;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}
.stat {
  text-align: center;
  min-width: 100px;
}
.stat-number {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--accent);
  line-height: 1.2;
}
.stat-label {
  font-size: .78rem;
  color: var(--muted);
  font-weight: 500;
  margin-top: .15rem;
}

/* ── SECTIONS ── */
.section {
  max-width: var(--max-w);
  margin: 0 auto 2.5rem;
  padding: 0 1.5rem;
}
.section-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .5rem;
  letter-spacing: -.01em;
}
.section-sub {
  font-size: .95rem;
  color: var(--muted);
  margin-bottom: 1.25rem;
  line-height: 1.6;
  max-width: 640px;
}

/* ── CARD GRID ── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

/* ── GUIDE CARD ── */
.guide-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  text-decoration: none;
  color: var(--text);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.guide-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  border-color: var(--border-dark);
  text-decoration: none;
}
.guide-card-cat {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.guide-card-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  letter-spacing: -.01em;
}
.guide-card-desc {
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.55;
}
.guide-card-tag {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--dim);
  margin-top: .35rem;
}

/* ── AD ZONE ── */
.ad-zone {
  max-width: var(--max-w);
  margin: 1.5rem auto;
  padding: 0 1.5rem;
  min-height: 90px;
}

/* ── CTA BLOCK ── */
.cta-block {
  background: var(--accent-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}
.cta-block-icon {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
}
.cta-block-body {
  flex: 1;
}
.cta-block-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .35rem;
}
.cta-block-desc {
  font-size: .88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: .85rem;
}
.btn-deal {
  display: inline-block;
  background: var(--secondary);
  color: #fff;
  font-weight: 600;
  font-size: .85rem;
  padding: .5rem 1.15rem;
  border-radius: var(--radius-sm);
  transition: background .2s;
}
.btn-deal:hover {
  background: var(--secondary-hover);
  text-decoration: none;
  color: #fff;
}

/* ── EMAIL MICRO ── */
.email-micro {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.email-micro-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
}
.email-micro-text {
  flex: 1;
  font-size: .88rem;
  color: var(--text-secondary);
  min-width: 200px;
}
.email-micro-text strong {
  color: var(--text);
}
.email-micro-input {
  font-family: var(--font-body);
  font-size: .85rem;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  width: 200px;
  background: var(--bg);
  color: var(--text);
  transition: border-color .2s;
}
.email-micro-input:focus {
  border-color: var(--accent);
}
.email-micro-btn {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  padding: .5rem 1rem;
  border: none;
  border-radius: var(--radius-sm);
  background:var(--accent-fill,var(--accent));
  color: #fff;
  cursor: pointer;
  transition: background .2s;
  white-space: nowrap;
}
.email-micro-btn:hover {
  background: var(--accent-hover);
}

/* ── STICKY EMAIL STRIP ── */
.email-strip {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: #1c1917;
  padding: .65rem 1.5rem;
  transform: translateY(100%);
  transition: transform .35s ease;
}
.email-strip.visible {
  transform: translateY(0);
}
.email-strip-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.email-strip-text {
  flex: 1;
  font-size: .82rem;
  color: #d6d3d1;
  min-width: 180px;
}
.email-strip-text strong {
  color: #fff;
}
.email-strip-input {
  font-family: var(--font-body);
  font-size: .82rem;
  padding: .4rem .65rem;
  border: 1px solid #44403c;
  border-radius: var(--radius-sm);
  background: #292524;
  color: #fafaf9;
  outline: none;
  width: 190px;
  transition: border-color .2s;
}
.email-strip-input:focus {
  border-color: var(--accent);
}
.email-strip-btn {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  padding: .4rem .9rem;
  border: none;
  border-radius: var(--radius-sm);
  background:var(--accent-fill,var(--accent));
  color: #fff;
  cursor: pointer;
  transition: background .2s;
  white-space: nowrap;
}
.email-strip-btn:hover {
  background: var(--accent-hover);
}
.email-strip-close {
  background: none;
  border: none;
  color: #78716c;
  font-size: 1.1rem;
  cursor: pointer;
  padding: .25rem;
  line-height: 1;
  transition: color .2s;
}
.email-strip-close:hover {
  color: #fff;
}

/* ── FOOTER ── */
.footer {
  max-width: var(--max-w);
  margin: 3rem auto 0;
  padding: 2.5rem 1.5rem 2rem;
  border-top: 1px solid var(--border);
}
.footer-brand {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: .5rem;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 1rem;
}
.footer-links a {
  font-size: .82rem;
  font-weight: 500;
  color: var(--muted);
}
.footer-links a:hover { color: var(--accent); }
.footer-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 1rem;
}
.footer-extra a {
  font-size: .82rem;
  font-weight: 500;
  color: var(--muted);
}
.footer-extra a:hover { color: var(--accent); }
.footer-disclosure {
  background: var(--accent-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .6rem 1rem;
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 1rem;
  text-align: center;
}
.footer-disclosure a { color: var(--accent); font-weight: 500; }
.footer-disc {
  font-size: .75rem;
  color: var(--dim);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.footer-disc a { color: var(--muted); }
.footer-network {
  font-size: .7rem;
  color: var(--dim);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}
.footer-network span { font-weight: 600; color: var(--muted); margin-right: .25rem; }
.footer-network a { color: var(--dim); font-family: var(--font-mono); font-size: .65rem; }
.footer-network a:hover { color: var(--accent); }

/* ── AFFILIATE DISCLOSURE (INLINE) ── */
.affiliate-disclosure-inline {
  max-width: var(--max-w);
  margin: 0 auto .75rem;
  padding: .5rem 1.5rem;
  font-size: .75rem;
  color: var(--muted);
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  text-align: center;
  line-height: 1.5;
}

/* ── PICK BOX (Top Pick / Budget Pick / Vet Pick) ── */
.pick-box {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}
.pick-box.top-pick { border-color: var(--accent); }
.pick-box.budget-pick { border-color: var(--secondary); }
.pick-box.vet-pick { border-color: #16a34a; }
.pick-box-badge {
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .2rem .6rem;
  border-radius: 4px;
  white-space: nowrap;
}
.top-pick .pick-box-badge { background: var(--accent-light); color: var(--accent); }
.budget-pick .pick-box-badge { background: var(--secondary-light); color: var(--secondary); }
.vet-pick .pick-box-badge { background: #dcfce7; color: #16a34a; }
.pick-box-body { flex: 1; }
.pick-box-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: .25rem;
}
.pick-box-desc {
  font-size: .88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: .5rem;
}
.pick-box-price {
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--muted);
}
.pick-box-cta {
  display: inline-block;
  margin-top: .5rem;
  background:var(--accent-fill,var(--accent));
  color: #fff;
  font-weight: 600;
  font-size: .82rem;
  padding: .45rem 1rem;
  border-radius: var(--radius-sm);
  transition: background .2s;
}
.pick-box-cta:hover { background: var(--accent-hover); text-decoration: none; color: #fff; }

/* ── COMPARISON TABLE ── */
.comparison-table-wrap {
  max-width: var(--max-w);
  margin: 1.5rem auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
  line-height: 1.5;
}
.comparison-table th {
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  background: var(--surface-alt);
  padding: .6rem .75rem;
  border-bottom: 2px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.comparison-table td {
  padding: .6rem .75rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}
.comparison-table tr:hover td {
  background: var(--accent-dim);
}
.comparison-table .ct-product {
  font-weight: 600;
  color: var(--text);
}
.comparison-table .ct-link {
  color: var(--accent);
  font-weight: 600;
  font-size: .8rem;
}
.comparison-table .ct-link:hover { text-decoration: underline; }
.comparison-table .ct-highlight {
  background: var(--accent-light);
  font-weight: 600;
}

/* ── AFFILIATE BOX (generic) ── */
.affiliate-box {
  background: var(--accent-light);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}
.affiliate-box-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: .35rem;
}
.affiliate-box-desc {
  font-size: .88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: .75rem;
}
.affiliate-box-cta {
  display: inline-block;
  background: var(--secondary);
  color: #fff;
  font-weight: 600;
  font-size: .85rem;
  padding: .5rem 1.15rem;
  border-radius: var(--radius-sm);
  transition: background .2s;
}
.affiliate-box-cta:hover { background: var(--secondary-hover); text-decoration: none; color: #fff; }

/* ── Q&A SECTION (People Also Ask) ── */
.qa-section {
  max-width: var(--max-w);
  margin: 2rem auto;
  padding: 0 1.5rem;
}
.qa-section-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}
.qa-item {
  border-bottom: 1px solid var(--border);
  padding: .75rem 0;
}
.qa-item:last-child { border-bottom: none; }
.qa-question {
  font-weight: 600;
  font-size: .95rem;
  color: var(--text);
  margin-bottom: .35rem;
}
.qa-answer {
  font-size: .88rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ── RESPONSIVE (700px) ── */
@media (max-width: 700px) {
  .hero { padding: 3rem 1.25rem 2.5rem; }
  .hero h1 { font-size: 2rem; }
  .hero p { font-size: 1rem; }

  .stats-row { gap: 1.5rem; }
  .stat-number { font-size: 1.4rem; }

  .nav { grid-template-columns: 1fr auto 1fr; padding: .6rem 1rem; }
  .nav-left { gap: .6rem; }
  .nav-left a { font-size: .75rem; }
  .nav-brand { font-size: 1.1rem; padding: .3rem .8rem; }
  .nav-links { gap: .75rem; }
  .nav-links a { font-size: .78rem; }
  .nav-cta { padding: .35rem .75rem; font-size: .75rem !important; }

  .card-grid { grid-template-columns: 1fr; }

  .cta-block { flex-direction: column; gap: .75rem; }

  .email-micro { flex-direction: column; align-items: stretch; gap: .6rem; }
  .email-micro-input { width: 100%; }

  .email-strip-inner { justify-content: center; text-align: center; }
  .email-strip-text { min-width: 100%; }
  .email-strip-input { width: 140px; flex: 1; }

  .section { margin-bottom: 2rem; }
  .section-title { font-size: 1.3rem; }
}


/* ═══════════════════════════════════════════════════════════════
   ENTERPRISE-GRADE COMPONENTS — appended 2026-05-16 from seed-template/styles.css.
   Maps to ENTERPRISE-GRADE-STANDARD.md patterns 2-8 + 10.
   Site-local :root fallbacks defined below for variables this site lacks.
   ═══════════════════════════════════════════════════════════════ */
:root{--dark:#0c0a09;--text-light:#78716c;--cream:#f5f0eb;--display:'Fraunces',Georgia,serif;--mono:'IBM Plex Mono','Fira Code',monospace;--shadow-sm:0 1px 3px rgba(0,0,0,.06)}
/* ═══════════════════════════════════════════════════════════════
   ENTERPRISE-GRADE COMPONENTS — 10-pattern bar
   Added 2026-05-16 (session 8) from GrantProbe homepage overhaul.
   Maps to ENTERPRISE-GRADE-STANDARD.md patterns 2-8 + 10.
   Use these instead of hand-rolling per-site overrides.
   ═══════════════════════════════════════════════════════════════ */

/* Pattern 2 + 10 — Eyebrow labels (hairline-flanked universal signature) */
.eyebrow{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-light);display:inline-flex;align-items:center;gap:.6rem}
.eyebrow::before,.eyebrow::after{content:'';width:24px;height:1px;background:var(--border)}
.eyebrow-solo{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:inline-block;margin-bottom:8px}
.section-head{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem;text-align:center;margin-bottom:1.5rem}
.section-head .eyebrow{margin-bottom:.6rem}
.section-head h2{font-family:var(--display);font-size:1.75rem;font-weight:500;color:var(--dark);letter-spacing:-.01em;margin:0}
.section-head p{font-size:.9375rem;color:var(--text-light);margin-top:.5rem;max-width:560px;margin-left:auto;margin-right:auto}
.eg-section{padding:2.5rem 0}
.eg-section.tight{padding:1.5rem 0 2rem}

/* Pattern 4 — Cred-strip (iconified trust metrics under hero) */
.cred-strip{max-width:var(--max-w);margin:1.5rem auto 0;padding:0 1.5rem;display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.cred-cell{display:flex;align-items:center;gap:.75rem;padding:.95rem 1.1rem;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow-sm)}
.cred-cell svg{flex-shrink:0;width:22px;height:22px;color:var(--accent)}
.cred-text{display:flex;flex-direction:column;line-height:1.3}
.cred-label{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-light)}
.cred-value{font-size:.8125rem;font-weight:600;color:var(--dark);margin-top:2px}
@media(max-width:768px){.cred-strip{grid-template-columns:repeat(2,1fr)}}

/* Pattern 3 — Numbered methodology grid (01-06 framework) */
.method-grid{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.method-cell{background:#fff;border:1px solid var(--border);border-radius:10px;padding:1.1rem 1.2rem;position:relative;transition:all .2s}
.method-cell:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.method-num{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--accent);letter-spacing:.06em;margin-bottom:.45rem}
.method-name{font-family:var(--display);font-size:1rem;font-weight:600;color:var(--dark);margin-bottom:.35rem;line-height:1.25}
.method-desc{font-size:.78rem;color:var(--text-light);line-height:1.55}
@media(max-width:760px){.method-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.method-grid{grid-template-columns:1fr}}

/* Pattern 5 — Anchor + mock-output card (CTA paired with sample-output) */
.anchor-mock{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem;display:grid;grid-template-columns:1fr 1.05fr;gap:1.25rem;align-items:stretch}
.am-pitch{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.75rem 1.85rem;display:flex;flex-direction:column;justify-content:center}
.am-pitch h3{font-family:var(--display);font-size:1.5rem;font-weight:600;line-height:1.15;color:var(--dark);margin:.5rem 0 .65rem;letter-spacing:-.01em}
.am-pitch p{font-size:.92rem;color:var(--text);line-height:1.6;margin-bottom:1.1rem}
.am-pitch ul{list-style:none;padding:0;margin:0 0 1.25rem;font-size:.86rem;color:var(--text);line-height:1.7}
.am-pitch ul li{padding-left:1.4rem;position:relative}
.am-pitch ul li::before{content:'✓';position:absolute;left:0;color:var(--accent);font-weight:800}
.am-cta{display:inline-block;align-self:flex-start;padding:.75rem 1.4rem;background:var(--accent-fill,var(--accent));color:#fff;font-weight:700;font-size:.875rem;text-decoration:none;border-radius:8px;transition:all .2s;box-shadow:0 2px 8px rgba(15,118,110,.22)}
.am-cta:hover{background:var(--accent-hover);transform:translateY(-1px)}
.am-mock{background:linear-gradient(180deg,#f8fafc 0%,#fff 100%);border:1px solid var(--border);border-radius:12px;padding:1.25rem 1.4rem;box-shadow:var(--shadow-sm)}
.am-mock-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:.7rem;border-bottom:1px solid var(--border);margin-bottom:.6rem}
.am-mock-label{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-light)}
.am-mock-pill{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--accent-fill,var(--accent));padding:3px 8px;border-radius:4px}
.am-mock-input{font-family:var(--mono);font-size:.75rem;color:var(--text-light);padding:.5rem .65rem;background:var(--cream);border-radius:6px;margin-bottom:.8rem}
.am-mock-input strong{color:var(--dark);font-weight:700}
.am-row{display:grid;grid-template-columns:1fr auto;gap:.4rem .8rem;padding:.7rem 0;border-bottom:1px dashed var(--border);align-items:center}
.am-row:last-child{border-bottom:none}
.am-row-name{font-size:.85rem;font-weight:600;color:var(--dark);line-height:1.25}
.am-row-meta{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-light);margin-top:3px}
.am-row-amount{font-family:var(--display);font-size:1rem;font-weight:600;color:var(--accent);text-align:right;line-height:1}
.am-row-score{font-family:var(--mono);font-size:.66rem;font-weight:700;color:var(--accent);text-align:right;margin-top:3px}
.am-mock-foot{margin-top:.75rem;padding-top:.7rem;border-top:1px solid var(--border);font-size:.72rem;color:var(--text-light);font-style:italic;text-align:center}
@media(max-width:820px){.anchor-mock{grid-template-columns:1fr}}

/* Pattern 7 — Named advisory / editorial section */
.advisory{max-width:var(--max-w);margin:0 auto;padding:0 1.5rem}
.advisory-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1.75rem 2rem;box-shadow:var(--shadow-sm)}
.advisory-grid{display:grid;grid-template-columns:240px 1fr;gap:1.5rem;align-items:start}
.advisory-author{display:flex;flex-direction:column;align-items:center;text-align:center;padding-right:1.25rem;border-right:1px solid var(--border)}
.advisory-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-hover));color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:1.4rem;font-weight:600;margin-bottom:.65rem}
.advisory-name{font-family:var(--display);font-size:1.05rem;font-weight:600;color:var(--dark);line-height:1.2}
.advisory-role{font-size:.75rem;color:var(--text-light);margin-top:.2rem;margin-bottom:.55rem}
.advisory-cred{font-family:var(--mono);font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-weight:700;line-height:1.55}
.advisory-body h4{font-family:var(--display);font-size:1.15rem;font-weight:600;color:var(--dark);margin:0 0 .65rem;letter-spacing:-.01em}
.advisory-body p{font-size:.88rem;color:var(--text);line-height:1.65;margin-bottom:.7rem}
.advisory-body p:last-child{margin-bottom:0}
.advisory-links{display:flex;gap:1rem;margin-top:.85rem;flex-wrap:wrap}
.advisory-links a{font-family:var(--mono);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent);text-decoration:none}
.advisory-links a:hover{text-decoration:underline}
@media(max-width:720px){.advisory-grid{grid-template-columns:1fr}.advisory-author{padding-right:0;border-right:none;padding-bottom:1.25rem;border-bottom:1px solid var(--border);flex-direction:row;text-align:left;gap:1rem;align-items:center}.advisory-avatar{margin-bottom:0}}

/* Pattern 8 — Newsletter social-proof line */
.email-proof{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-light);text-align:center;margin-top:.6rem;flex-basis:100%;line-height:1.5}
.email-proof strong{color:var(--accent);font-weight:700}
.email-strip-proof{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#a8a29e;margin-left:.6rem}

/* Pattern 6 — Type-badges + score-pills */
.tb{display:inline-block;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2.5px 7px;border-radius:3px;line-height:1.3;margin-right:.4rem;vertical-align:middle}
.tb-pillar{background:var(--accent-fill,var(--accent));color:#fff}
.tb-roundup{background:var(--secondary-light);color:var(--secondary-hover);border:1px solid rgba(180,83,9,.25)}
.tb-guide{background:var(--accent-light);color:var(--accent-hover);border:1px solid rgba(30,64,175,.25)}
.tb-state{background:#fdf2f8;color:#9d174d;border:1px solid rgba(219,39,119,.25)}
.tb-tool{background:#f3e8ff;color:#6b21a8;border:1px solid rgba(124,58,237,.25)}
.tb-review{background:#e0e7ff;color:#3730a3;border:1px solid rgba(67,56,202,.25)}
.tb-comparison{background:#fef3c7;color:#92400e;border:1px solid rgba(180,83,9,.25)}
.score-pill{font-family:var(--mono);font-size:9.5px;font-weight:800;letter-spacing:.04em;background:var(--accent-fill,var(--accent));color:#fff;padding:2px 6px;border-radius:3px;margin-left:.35rem}

/* ── PRINT STYLES ── */
@media print{.nav-cta,.email-micro,.email-strip,.ad-zone,.cred-strip,.method-grid,.anchor-mock,.advisory{display:none}body{background:#fff}}
@media print{.cred-strip,.method-grid,.anchor-mock,.advisory,.eyebrow{display:none}}


/* === 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;
}

/* ── READING CONTAINER FOR THE STATIC PAGES (2026-08-25) ─────────────────────────────────────
   ⛔ `.article-wrap{max-width:760px;margin:0 auto;padding:48px}` lives ONLY in
   petmaxxing-overhaul.css, which the article pages load and these six static pages do not. They
   ship the wrapper markup and never receive the rule that makes it a wrapper, so /about, /contact,
   /privacy and /methodology rendered their body copy edge to edge — 1905px line lengths on a
   desktop, measured, not guessed.
   ⭐ SAME CLASS AS THE OMNIRX NAV FIXED AN HOUR EARLIER: a page carrying a component's MARKUP but
     not its STYLESHEET. The markup is correct, so every disk-side check passes; only the rendered
     width shows it. Worth looking for wherever a site has two stylesheet families.
   Defined here rather than by adding overhaul.css to these pages, because loading both families on
   one page risks conflicts these pages have never been tested against. styles.css defined no
   `.article-wrap` rule at all, so this adds behaviour and overrides nothing. */
.article-wrap{max-width:min(760px,100%);min-width:0;margin:0 auto;padding:2.5rem 1.5rem 4rem}