:root {
  --ink: #0f1b2d;
  --ink-soft: #4a5568;
  --bg: #ffffff;
  --bg-soft: #fafaf7;
  --card: #ffffff;
  --line: #e8e6df;
  --brand: #2d6a4f;
  --brand-soft: #d8f3dc;
  --brand-dark: #1b4332;
  --accent: #e76f51;
  --gold: #f4a261;
  --shadow: 0 1px 3px rgba(15, 27, 45, 0.06), 0 4px 12px rgba(15, 27, 45, 0.04);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); }
img { max-width: 100%; height: auto; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ====== HEADER ====== */
header.site {
  background: white;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}
header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}
.logo {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
}
.logo-img { width: 40px; height: 40px; vertical-align: middle; margin-right: 9px; }
.logo span { color: var(--brand); }
nav.primary a {
  margin-left: 24px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
}
nav.primary a:hover { color: var(--brand); }
nav.primary a.lang-switch {
  margin-left: 18px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
nav.primary a.lang-switch:hover {
  border-color: var(--brand);
  color: var(--brand);
}
@media (max-width: 700px) {
  /* Bigger touch targets on mobile: the nav links were only ~24px tall */
  header.site .wrap { padding-top: 8px; padding-bottom: 8px; }
  nav.primary a { margin-left: 14px; font-size: 14px; display: inline-block; padding: 9px 0; }
  nav.primary a.lang-switch { margin-left: 10px; padding: 8px 12px; }
  .crumbs a { display: inline-block; padding: 4px 0; }
}

/* Visually hidden, still read by screen readers. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ====== SITE SEARCH ======
   Its own row under the nav so it stays prominent without crowding the eight
   nav links — but part of the header block, not a separate toolbar stripe: it
   shares the header's white background, and the field spans the same content
   width as the logo, nav, breadcrumbs and H1 so every edge lines up.
   Fixed heights throughout and an absolutely-positioned results panel, so
   nothing here can shift layout (CLS budget stays intact). */
/* Scoped under header.site to out-specify `header.site .wrap`, which sets
   display:flex and its own padding for the logo/nav row. Without that this row
   stays a flex container and the field shrinks to its content width. */
header.site .search-row .wrap {
  display: block;
  padding-top: 2px;
  padding-bottom: 16px;
}
.site-search-wrap { position: relative; }
#site-search {
  display: flex;
  align-items: center;
  gap: 10px;
}
.site-search-input {
  flex: 1 1 auto;
  height: 54px;
  min-width: 0;
  padding: 0 22px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.site-search-input::placeholder { color: var(--ink-soft); opacity: 1; }
.site-search-input:hover { border-color: #cfd6d1; }
.site-search-input:focus {
  outline: none;
  background: white;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(45, 106, 79, 0.13);
}
.site-search-btn {
  flex: 0 0 auto;
  height: 54px;
  padding: 0 30px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: white;
  background: var(--brand);
  border: 1.5px solid var(--brand);
  border-radius: 999px;
  cursor: pointer;
  transition: filter 0.15s;
}
.site-search-btn:hover { filter: brightness(1.1); }

/* Results overlay — absolute, so it floats above content instead of pushing it. */
.site-search-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 60vh;
  overflow-y: auto;
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 12px 34px rgba(15, 27, 45, 0.14);
}
.site-search-panel[hidden] { display: none; }
.site-search-list { list-style: none; margin: 0; padding: 6px; }
.site-search-list li { margin: 0; }
.site-search-list a,
.search-page-list a {
  display: block;
  padding: 9px 11px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--ink);
}
.site-search-list a strong,
.search-page-list a strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
}
.site-search-list a span,
.search-page-list a span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.site-search-list a:hover,
.site-search-list a.is-active { background: var(--bg-soft, #eef4f1); }
.site-search-list a.is-active { outline: 2px solid var(--brand); outline-offset: -2px; }
.site-search-empty { margin: 0; padding: 14px; font-size: 14px; color: var(--ink-soft); }

/* Empty-state coaching: what this box is for, with one-tap examples. */
.site-search-hint {
  margin: 0;
  padding: 12px 12px 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.site-search-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 12px 12px;
}
.site-search-chip {
  font: inherit;
  font-size: 13px;
  padding: 6px 11px;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.site-search-chip:hover { border-color: var(--brand); color: var(--brand); }

/* Dead end → content request. A search we can't answer is a visitor telling
   us what to build, so capture the email against the term. */
.search-request {
  padding: 14px;
  border-top: 1px solid var(--line);
  background: var(--brand-soft);
}
.search-request-title { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--brand-dark); }
.search-request-body { margin: 0 0 10px; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.search-request-row { display: flex; gap: 8px; }
.search-request-email {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 16px;
  font: inherit;
  font-size: 15px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.search-request-email:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.15); }
.search-request-btn {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 20px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: white;
  background: var(--brand);
  border: 1px solid var(--brand);
  border-radius: 999px;
  cursor: pointer;
}
.search-request-btn:hover:not(:disabled) { filter: brightness(1.08); }
.search-request-btn:disabled { opacity: 0.6; cursor: default; }
.search-request-status:empty { display: none; }
.search-request-status { margin: 8px 0 0; font-size: 13px; color: var(--accent); }
.search-request-thanks { margin: 0; font-size: 14px; font-weight: 600; color: var(--brand-dark); }

@media (max-width: 480px) {
  .search-request-row { flex-wrap: wrap; }
  .search-request-email,
  .search-request-btn { width: 100%; flex: 1 1 100%; }
}
.site-search-more {
  display: block;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

/* /search/ results page */
.search-page-list { list-style: none; margin: 0; padding: 0; }
.search-page-list li { margin: 0 0 6px; }
.search-page-list a { padding: 12px 14px; border: 1px solid var(--line); }
.search-page-list a:hover { border-color: var(--brand); background: var(--bg-soft, #f7f9f8); }

@media (max-width: 700px) {
  header.site .search-row .wrap { padding-top: 0; padding-bottom: 12px; }
  /* 16px font avoids iOS zoom-on-focus. */
  .site-search-input { height: 50px; font-size: 16px; padding: 0 18px; }
  .site-search-btn { height: 50px; padding: 0 18px; font-size: 14px; }
}
/* Match the 16px gutter the rest of the page switches to, so the field's edges
   stay flush with the breadcrumbs and H1 below it. */
@media (max-width: 600px) {
  header.site .search-row .wrap { padding-left: 16px; padding-right: 16px; }
}
/* Narrow phones: claw back room for the placeholder. */
@media (max-width: 430px) {
  #site-search { gap: 8px; }
  .site-search-input { padding: 0 16px; }
  .site-search-btn { padding: 0 14px; }
}

/* ====== BREADCRUMBS ====== */
.crumbs {
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 24px 0;
  font-size: 13px;
  color: var(--ink-soft);
}
.crumbs a {
  color: var(--ink-soft);
  text-decoration: none;
}
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current="page"] {
  color: var(--ink);
  font-weight: 500;
}

/* ====== HERO ====== */
.hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 24px 16px;
}
.hero h1 {
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 8px 0 14px;
  font-weight: 800;
}
.meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-soft);
  padding-bottom: 16px;
}
.meta .dot { color: var(--line); }

.badge {
  display: inline-block;
  padding: 4px 10px;
  background: var(--brand-soft);
  color: var(--brand);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ====== QUICK ANSWER ====== */
.quick {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 8px;
  padding: 20px 24px;
  margin: 20px 0 0;
}
.quick h2 {
  margin: 0 0 8px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand);
  font-weight: 700;
}
.quick p { margin: 0; font-size: 17px; }

/* ====== AFFILIATE DISCLOSURE ====== */
.disclosure {
  max-width: 1100px;
  margin: 12px auto 0;
  padding: 0 24px;
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
}

/* ====== MAIN GRID ====== */
main.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
}
/* Let grid tracks shrink below their content's intrinsic width so a wide
   table/element scrolls inside its column instead of stretching the page. */
main.page > * { min-width: 0; }
main.solo {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}
@media (max-width: 880px) {
  main.page { grid-template-columns: minmax(0, 1fr); }
}

article h2 {
  font-size: 26px;
  letter-spacing: -0.01em;
  margin: 40px 0 16px;
  font-weight: 700;
}
article > h2:first-child { margin-top: 0; }
article h3 { font-size: 19px; margin: 24px 0 8px; }
article p { margin: 0 0 14px; font-size: 16px; }
article ul, article ol { font-size: 16px; }

/* ====== COMPARISON TABLE ====== */
.vs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.vs-table th,
.vs-table td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.vs-table th {
  background: var(--bg-soft);
  font-weight: 600;
  color: var(--ink-soft);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vs-table tr:last-child td { border-bottom: none; }
.vs-table .feat { font-weight: 600; width: 32%; }
.check { color: var(--brand); font-weight: 700; }
.cross { color: var(--accent); font-weight: 700; }

/* Horizontal scroll wrapper for wide multi-provider charts (no CLS: table keeps its own height) */
.chart-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.chart-scroll .vs-table { min-width: 640px; }
.fineprint { font-size: 13px; color: var(--ink-soft); margin: 4px 0 20px; }

/* Mobile: let comparison/coverage tables scroll inside their own box instead of
   stretching the page. Without this, a wide .vs-table forces the article wider
   than the viewport on the comparison, review and vet-cost layouts. */
@media (max-width: 700px) {
  .vs-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  article table:not(.vs-table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
}

/* ====== PROS/CONS CARDS ====== */
.pc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0;
}
@media (max-width: 600px) {
  .pc-grid { grid-template-columns: 1fr; }
}
.pc {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: var(--shadow);
}
.pc h4 {
  margin: 0 0 12px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.pc ul { margin: 0; padding-left: 18px; font-size: 14px; }
.pc li { margin-bottom: 6px; }
.pc.good h4 { color: var(--brand); }
.pc.bad h4 { color: var(--accent); }

/* ====== VERDICT ====== */
.verdict {
  background: linear-gradient(135deg, #fff 0%, var(--bg-soft) 100%);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px 28px;
  margin: 32px 0;
  box-shadow: var(--shadow);
}
.verdict h3 {
  margin: 0 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 700;
}
.verdict p { font-size: 17px; margin: 0 0 12px; }
.verdict strong { color: var(--ink); }

/* ====== CTA BUTTONS ====== */
.cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0 0;
}
@media (max-width: 600px) {
  .cta-row { grid-template-columns: 1fr; }
}
.cta {
  display: block;
  text-align: center;
  padding: 14px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: transform 0.1s, box-shadow 0.1s;
}
.cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45, 106, 79, 0.18);
}
.cta-primary {
  background: var(--brand);
  color: white;
}
.cta-secondary {
  background: white;
  color: var(--brand);
  border: 1.5px solid var(--brand);
}

/* ====== FAQ ====== */
details.faq {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 8px;
}
details.faq summary {
  padding: 16px 20px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+";
  font-size: 22px;
  color: var(--brand);
  font-weight: 400;
}
details.faq[open] summary::after { content: "−"; }
details.faq[open] { box-shadow: var(--shadow); }
details.faq .faq-body {
  padding: 0 20px 18px;
  font-size: 15px;
  color: var(--ink-soft);
}

/* ====== SIDEBAR ====== */
aside.side {
  position: sticky;
  top: 80px;
  align-self: start;
}
/* Reserved ad dimensions — prevents CLS when AdSense loads.
   Each variant matches a real AdSense unit size (label adds ~30px). */
.ad-slot {
  background: var(--bg-soft);
  border: 1px dashed var(--line);
  border-radius: 8px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ad-slot small {
  display: block;
  margin-top: 6px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px; /* keep the label legible on mobile (was inheriting 10px) */
}
.ad-slot.sidebar    { width: 300px; min-height: 280px; max-width: 100%; }
.ad-slot.in-article { width: 100%;  min-height: 280px; margin: 28px 0; }
.ad-slot.leaderboard { width: 100%; min-height: 120px; max-width: 728px; margin: 20px auto; }

/* Force explicit dimensions on every image to prevent CLS.
   If an image has no width/height attrs, give it an aspect ratio fallback. */
img { aspect-ratio: attr(width) / attr(height); }
img:not([width]):not([height]) { aspect-ratio: 16 / 9; background: var(--bg-soft); }
.side-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}
.side-card h4 {
  margin: 0 0 12px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.side-card ul { margin: 0; padding-left: 18px; font-size: 14px; }
.side-card li { margin-bottom: 8px; }
.side-card li a {
  color: var(--ink);
  text-decoration: none;
}
.side-card li a:hover {
  color: var(--brand);
  text-decoration: underline;
}

/* ====== HOMEPAGE HERO ====== */
.home-hero {
  background: linear-gradient(180deg, var(--bg-soft) 0%, white 100%);
  padding: 64px 0 48px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.home-hero h1 {
  font-size: clamp(32px, 5vw, 52px);
  letter-spacing: -0.025em;
  margin: 12px 0 16px;
  font-weight: 800;
  line-height: 1.1;
}
.home-hero p.lede {
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 auto 28px;
}
.home-hero .cta {
  display: inline-block;
  padding: 14px 28px;
  font-size: 16px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 48px 0;
}
@media (max-width: 700px) {
  .feature-grid { grid-template-columns: 1fr; }
}
.feature {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
  box-shadow: var(--shadow);
}
.feature h2 { margin: 0 0 8px; font-size: 17px; }
.feature p { margin: 0; font-size: 14px; color: var(--ink-soft); }

.section-head {
  text-align: center;
  margin: 56px 0 24px;
}
.section-head h2 {
  font-size: 28px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.section-head p {
  color: var(--ink-soft);
  margin: 0;
}

.compare-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 24px 0;
}
@media (max-width: 600px) {
  .compare-grid { grid-template-columns: 1fr; }
}
.compare-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
  text-decoration: none;
  color: var(--ink);
  display: block;
  box-shadow: var(--shadow);
  transition: transform 0.1s, box-shadow 0.1s;
}
.compare-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15, 27, 45, 0.08);
}
.compare-card h3 { margin: 0 0 6px; font-size: 18px; }
.compare-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
}

/* ====== FOOTER ====== */
footer.site {
  background: #0f1b2d;
  color: #b4bcc8;
  padding: 40px 24px;
  font-size: 14px;
  margin-top: 64px;
}
footer.site .wrap {
  display: grid;
  grid-template-columns: 2fr repeat(5, 1fr);
  gap: 28px;
  padding: 0;
}
@media (max-width: 1000px) {
  footer.site .wrap { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 600px) {
  footer.site .wrap { grid-template-columns: 1fr 1fr; }
}
footer.site .logo { color: white; font-size: 17px; }
footer.site .logo span { color: #74c69d; }
footer.site h2 {
  color: white;
  margin: 0 0 12px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
footer.site a {
  color: #b4bcc8;
  text-decoration: none;
  display: block;
  padding: 9px 0; /* larger tap target for footer nav links (esp. mobile) */
}
footer.site a:hover { color: white; }
footer.site .blurb {
  margin: 12px 0 0;
  max-width: 340px;
  font-size: 13px;
  line-height: 1.5;
}
footer.site .legal {
  grid-column: 1 / -1;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #1f3047;
  font-size: 12px;
  color: #aab4c2;
}

/* ====== UTILS ====== */
.notice {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 18px 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.sources { color: var(--ink-soft); margin-top: 28px; }

.takeaways {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px 24px;
  margin: 16px 0 0;
}
.takeaways h2 {
  margin: 0 0 10px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: 700;
}
.takeaways ul { margin: 0; padding-left: 20px; }
.takeaways li { margin-bottom: 8px; font-size: 15px; }
.takeaways li:last-child { margin-bottom: 0; }

/* ====== COST ESTIMATOR ====== */
.estimator {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 24px;
  margin: 20px 0;
  box-shadow: var(--shadow);
}
.estimator .est-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
@media (max-width: 600px) { .estimator .est-fields { grid-template-columns: 1fr; } }
.estimator label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
.estimator select {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
}
.estimator .est-result {
  margin-top: 18px;
  min-height: 150px; /* reserved to avoid layout shift */
  background: var(--brand-soft);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 18px;
}
.estimator .est-label { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--ink-soft); margin-bottom: 8px; }
.estimator .est-range { font-size: 42px; font-weight: 800; color: var(--brand-dark); line-height: 1.05; }
.estimator .est-range small { font-size: 16px; font-weight: 600; color: var(--ink-soft); }
.estimator .est-year { font-size: 14px; color: var(--ink-soft); margin-top: 10px; }
.estimator .est-note { font-size: 12px; color: var(--ink-soft); margin: 12px 0 0; font-style: italic; }

/* Vet cost estimator result */
.estimator .est-result.vest-result { min-height: 300px; display: block; text-align: left; padding: 22px 18px; }

/* Headline: estimated vet bill */
.vest-bill { text-align: center; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid var(--line, #e2e6ea); }
.vest-bill .vest-k { display: block; font-size: 13px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-bottom: 8px; }
.vest-bill .vest-v { display: block; font-size: 42px; font-weight: 800; color: var(--brand-dark); line-height: 1.05; }
.vest-unit { display: block; font-size: 15px; font-weight: 600; color: var(--ink-soft); margin-top: 4px; }

/* Two comparison cards */
.vest-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
@media (max-width: 560px) { .vest-cols { grid-template-columns: 1fr; } }
.vest-col { background: #fff; border: 1px solid var(--line, #e2e6ea); border-radius: 12px; padding: 20px 16px; text-align: center; }
.vest-yes { border-color: var(--brand, #2d5a88); box-shadow: 0 2px 10px rgba(45,90,136,.10); }
.vest-col .vest-k { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--ink-soft); margin-bottom: 10px; }
.vest-col .vest-v { display: block; font-size: 30px; font-weight: 800; line-height: 1.1; margin-bottom: 12px; }
.vest-col .vest-sub { display: block; font-size: 13px; color: var(--ink-soft); line-height: 1.6; }
.vest-no .vest-v { color: #c0392b; }
.vest-yes .vest-v { color: var(--brand-dark); }
.vest-cta-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .vest-cta-row { grid-template-columns: 1fr; } }

/* Embed code snippet block */
.embed-code { margin: 14px 0; }
.embed-code pre { background: #16213e; color: #e8edf3; border-radius: 10px; padding: 14px 16px; overflow-x: auto; font-size: 13px; line-height: 1.5; }
.embed-code code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; }

/* ====== PET HEALTH JOURNAL ====== */
.journal {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 24px;
  margin: 20px 0;
  box-shadow: var(--shadow);
}
.journal .pj-pet,
.journal .pj-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
}
.journal .pj-form { margin-top: 4px; }
.journal input[type="text"],
.journal input[type="number"],
.journal input[type="date"],
.journal select {
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
}
.journal #pj-desc { flex: 1 1 220px; min-width: 180px; }
.journal #pj-pet-name { flex: 1 1 200px; }
.journal #pj-amount { width: 130px; }
.journal .pj-link {
  background: none; border: none; color: var(--ink-soft);
  font-size: 13px; cursor: pointer; text-decoration: underline;
}
.journal .pj-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 14px 0; padding-top: 14px; border-top: 1px solid var(--line);
}
.journal .pj-actions button {
  font-size: 13px; padding: 8px 14px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg); color: var(--ink); cursor: pointer;
}
.pj-curable .pj-card {
  background: var(--brand-soft); border-radius: 10px; padding: 16px 18px; margin: 6px 0 4px;
}
.pj-curable .pj-days { font-size: 28px; font-weight: 800; color: var(--brand-dark); line-height: 1.1; }
.pj-curable .pj-days span { font-size: 15px; font-weight: 600; }
.pj-curable .pj-since { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.pj-curable .pj-bar { height: 8px; background: var(--line); border-radius: 6px; overflow: hidden; margin: 12px 0 10px; }
.pj-curable .pj-bar span { display: block; height: 100%; background: var(--brand-dark); }
.pj-curable .pj-note { font-size: 12px; color: var(--ink-soft); margin: 0; font-style: italic; }
.pj-total { font-weight: 700; margin: 6px 0 10px; color: var(--ink); }
.pj-timeline { list-style: none; padding: 0; margin: 0; }
.pj-timeline .pj-empty { color: var(--ink-soft); font-style: italic; padding: 10px 0; }
.pj-item {
  position: relative; border-left: 3px solid var(--line);
  padding: 10px 36px 10px 14px; margin: 0 0 8px;
  background: var(--bg); border-radius: 0 8px 8px 0;
}
.pj-item.pj-t-symptom { border-left-color: #c0392b; }
.pj-item.pj-t-vet { border-left-color: var(--brand-dark); }
.pj-item.pj-t-med { border-left-color: #8e44ad; }
.pj-item.pj-t-cost { border-left-color: #b7791f; }
.pj-item.pj-t-weight { border-left-color: #2c7a7b; }
.pj-item.pj-t-note { border-left-color: var(--ink-soft); }
.pj-meta { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft); }
.pj-tag { font-weight: 700; color: var(--ink); }
.pj-amt { font-weight: 700; color: var(--brand-dark); }
.pj-text { margin-top: 3px; }
.pj-del {
  position: absolute; top: 8px; right: 8px; width: 24px; height: 24px;
  border: none; background: none; color: var(--ink-soft); font-size: 20px; line-height: 1; cursor: pointer;
}
.pj-del:hover { color: #c0392b; }

/* ====== EXIT-INTENT MODAL ====== */
.exit-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); padding: 20px; }
.exit-modal[hidden] { display: none; }
.exit-card { background: var(--card); color: var(--ink); max-width: 440px; width: 100%; border-radius: 12px; padding: 28px 24px; position: relative; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.exit-close { position: absolute; top: 6px; right: 12px; background: none; border: none; font-size: 28px; line-height: 1; cursor: pointer; color: var(--ink-soft); }
.exit-title { margin: 0 0 8px; font-size: 22px; letter-spacing: -0.01em; }
.exit-copy { margin: 0 0 16px; }
.exit-form { display: flex; flex-wrap: wrap; gap: 10px; }
.exit-input { flex: 1 1 200px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 6px; font-size: 15px; }
.exit-btn { border: none; cursor: pointer; }
.exit-form .form-status { flex: 1 1 100%; margin: 0; font-size: 14px; color: #b00020; }
.exit-fine { font-size: 12px; color: var(--ink-soft); margin: 12px 0 0; }
@media print { .exit-modal { display: none !important; } }

/* ====== CHECKLIST (lead-magnet) ====== */
.checklist { list-style: none; padding: 0; margin: 0 0 20px; }
.checklist li { margin: 0; border-bottom: 1px solid var(--line); }
.checklist label { display: flex; align-items: flex-start; gap: 10px; padding: 9px 2px; cursor: pointer; font-size: 15px; line-height: 1.45; }
.checklist input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; }

@media print {
  header.site, footer.site, .ad-slot, .feedback-cta, .crumbs, .cta-row,
  .email-bar, [data-print], .side,
  .journal .pj-pet, .journal .pj-form, .journal .pj-actions, .pj-del { display: none !important; }
  .checklist { break-inside: auto; }
  .checklist li { break-inside: avoid; }
  .journal { border: none; box-shadow: none; padding: 0; }
  .pj-item { break-inside: avoid; }

  /* Lead-magnet guide — hide the email gate, print the guide + worksheet */
  .gate, .verdict, .quick { display: none !important; }
  .ebook-unlock { border: none; margin-top: 0; }
  .ebook-unlock [data-print] { display: none !important; }
  .ebook-unlock .vs-table td, .ebook-unlock .vs-table th { border: 1px solid #999; }

  /* Family Pet Care Planner — print a clean chart */
  .pl-pet-choose, .pl-addbox, .pl-actions, .pl-badge, .pl-gate, .pl-link { display: none !important; }
  .planner { border: none; box-shadow: none; padding: 0; }
  .pl-row { break-inside: avoid; border: 1px solid #ccc; }
  .pl-assign select { border: none; font-weight: 700; -webkit-appearance: none; appearance: none; padding-left: 0; }
  .pl-group { break-inside: avoid; }
}

.related-guides { margin-top: 48px; border-top: 1px solid var(--line); padding-top: 24px; }
.related-guides h2 { font-size: 22px; margin: 0 0 16px; letter-spacing: -0.01em; }
.related-guides .compare-card h3 { font-size: 16px; margin: 0; }
.related-guides .compare-grid { margin: 0; }

/* ====== ARTICLE (MARKDOWN) TABLES ====== */
/* Markdown tables render as bare <table>; give them the same look as .vs-table. */
article table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 15px;
  box-shadow: var(--shadow);
}
article th,
article td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
article thead th {
  background: var(--bg-soft);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}
article tbody tr:last-child td { border-bottom: none; }
article tbody td:first-child { font-weight: 600; }

/* ====== MOBILE REFINEMENTS ====== */
@media (max-width: 600px) {
  /* Tighter side gutters for more usable width on small phones */
  .wrap,
  .crumbs,
  .hero,
  .disclosure,
  main.page,
  main.solo { padding-left: 16px; padding-right: 16px; }

  /* Let the nav wrap under the logo instead of crowding/overflowing */
  header.site .wrap { flex-wrap: wrap; row-gap: 10px; }
  nav.primary {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
  }
  nav.primary a { margin-left: 0; font-size: 15px; }
  nav.primary a.lang-switch { margin-left: auto; }

  /* Keep wide tables on-screen: scroll them instead of breaking the layout */
  article table,
  .vs-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  article table th,
  article table td,
  .vs-table th,
  .vs-table td { white-space: nowrap; }
}

/* Inline glossary auto-links — subtle dotted underline to distinguish from regular links */
.glossary-link{border-bottom:1px dotted currentColor;text-decoration:none;}
.glossary-link:hover{border-bottom-style:solid;}

/* ====== FAMILY PET CARE PLANNER ====== */
.planner {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  margin: 24px 0;
  background: var(--card);
  box-shadow: var(--shadow);
}
.pl-pet-choose { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.pl-pet-choose .pl-label { font-weight: 600; font-size: 14px; margin-right: 4px; }
.pl-toggle {
  border: 1.5px solid var(--line); background: transparent; color: var(--ink-soft);
  border-radius: 999px; padding: 7px 18px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.pl-toggle-on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); }
.pl-addbox {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: end;
  border: 1px solid var(--line); border-radius: 10px; padding: 14px; margin-bottom: 8px; background: var(--bg-soft);
}
.pl-addbox label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.pl-addbox input {
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; font-size: 15px; font-family: inherit;
}
.pl-addbox input[type="text"] { min-width: 180px; }
.pl-addbox input[type="number"] { width: 84px; }
.pl-members { list-style: none; padding: 0; margin: 12px 0 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.pl-member {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px 6px 10px; font-size: 14px; background: var(--card);
}
.pl-member .pl-age { color: var(--ink-soft); }
.pl-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); display: inline-block; }
.pl-empty, .pl-note { color: var(--ink-soft); font-size: 14px; margin: 8px 0 16px; }
.pl-link { background: none; border: none; color: var(--brand); cursor: pointer; font-size: 13px; padding: 0; text-decoration: underline; }
.pl-group { margin-bottom: 22px; }
.pl-group-h {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft);
  margin: 0 0 10px; border-bottom: 1px solid var(--line); padding-bottom: 6px;
}
.pl-rows { display: grid; gap: 10px; }
.pl-row {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start;
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--card);
}
.pl-task { display: grid; gap: 3px; }
.pl-task-t { font-weight: 600; font-size: 15px; }
.pl-badge {
  justify-self: start; font-size: 11px; font-weight: 700; color: var(--brand-dark);
  background: var(--brand-soft); border-radius: 999px; padding: 2px 9px;
}
.pl-why { font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.pl-assign { display: grid; gap: 4px; font-size: 12px; color: var(--ink-soft); min-width: 150px; }
.pl-assign select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 14px; font-family: inherit; background: var(--card); }
.pl-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.pl-gate {
  border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 10px;
  padding: 18px 20px; margin: 28px 0; background: var(--brand-soft);
}
.pl-gate h3 { margin: 0 0 6px; font-size: 19px; }
.pl-gate p { margin: 0 0 14px; font-size: 15px; }
.pl-gate form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pl-gate input[type="email"] { padding: 11px 13px; border: 1px solid var(--line); border-radius: 6px; font-size: 15px; min-width: 240px; }
.pl-pack {
  border: 1px solid var(--brand); border-radius: 12px; padding: 20px; margin: 24px 0; background: var(--card);
}
.pl-pack h3 { margin-top: 0; }
.pl-ecard { display: grid; gap: 12px; max-width: 460px; margin-top: 8px; }
.pl-ecard label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.pl-ecard input, .pl-ecard textarea {
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; font-size: 15px; font-family: inherit;
}
@media (max-width: 640px) {
  .pl-row { grid-template-columns: 1fr; }
  .pl-assign { min-width: 0; }
}

/* ====== "CITE THIS" CALLOUT (link-bait for data pages) ====== */
.cite-box {
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 20px 0;
  background: var(--bg-soft);
}
.cite-box > p { margin: 0 0 8px; font-size: 14px; }
.cite-box blockquote {
  margin: 0 0 10px;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
  word-break: break-word;
}
.cite-box .cite-media { color: var(--ink-soft); margin-bottom: 0; }

.gear-box {
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 24px 0;
  background: var(--bg-soft);
}
.gear-box h3 { margin: 0 0 6px; font-size: 18px; }
.gear-box > p { margin: 0 0 10px; font-size: 15px; color: var(--ink-soft); }
.gear-box ul { margin: 0 0 10px; padding-left: 20px; }
.gear-box li { margin: 4px 0; }
.gear-box .fineprint { margin: 8px 0 0; }
.gear-box .gear-more { font-size: 12px; color: var(--ink-soft); margin-left: 6px; white-space: nowrap; }

ul.related-conditions {
  list-style: none;
  padding: 0;
  margin: 12px 0 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px 20px;
}
ul.related-conditions li { margin: 0; }
ul.related-conditions a { display: inline-block; padding: 2px 0; }

.feature-links {
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 8px;
  padding: 14px 20px;
  margin: 20px 0 28px;
  background: var(--brand-soft);
}
.feature-links h3 { margin: 0 0 8px; font-size: 17px; }
.feature-links ul { margin: 0; padding-left: 20px; }
.feature-links li { margin: 4px 0; }

.download-box {
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 20px 0 28px;
  background: var(--bg-soft);
}
.download-box h3 { margin: 0 0 6px; font-size: 18px; }
.download-box > p { margin: 0 0 10px; font-size: 15px; }
.download-box .fineprint { margin: 8px 0 0; }

.gate {
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: 8px;
  padding: 18px 22px;
  margin: 24px 0;
  background: var(--brand-soft);
}
.gate h3 { margin: 0 0 6px; font-size: 19px; }
.gate form { display: grid; gap: 12px; max-width: 460px; margin-top: 14px; }
.gate input[type="email"] { padding: 11px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; }
.ebook-unlock { border-top: 2px solid var(--brand); margin-top: 32px; padding-top: 8px; }
.ebook-unlock td { height: 30px; }

/* Sticky email-capture bar */
.email-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;gap:12px;
  padding:10px 16px;background:var(--brand-dark,#1f513f);color:#fff;box-shadow:0 -2px 10px rgba(0,0,0,.15)}
.email-bar-form{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:1;margin:0}
.email-bar-copy{margin:0;font-size:15px;line-height:1.3;flex:1 1 240px}
.email-bar-input{flex:1 1 160px;min-width:0;padding:9px 12px;border:0;border-radius:6px;font-size:15px}
.email-bar-btn{padding:9px 16px;border:0;border-radius:6px;background:#fff;color:var(--brand-dark,#1f513f);
  font-weight:700;font-size:15px;cursor:pointer;white-space:nowrap}
.email-bar-close{background:none;border:0;color:#fff;font-size:26px;line-height:1;cursor:pointer;padding:0 4px}
@media (max-width:560px){.email-bar-copy{flex-basis:100%}}