/* PetPolicyCosts.com — lightweight static styles, no framework, no webfonts.
   Visual redesign 2026-11-12: warm, card-based design system driven entirely
   from this one shared file (plus inline SVG in the pages). */

/* ---------- Tokens & base ---------- */
:root {
  --ink:#21313d;
  --muted:#5f7182;
  --accent:#0b6e4f;
  --accent-dark:#084f39;
  --accent-mid:#12a06b;
  --accent-soft:#e7f4ec;
  --amber:#e39a2d;
  --amber-dark:#9c6a14;
  --amber-soft:#fdf3e0;
  --bg:#fdf9f2;
  --card:#ffffff;
  --line:#e8ddcb;
  --line-soft:#efe7d7;
  --shadow:0 1px 2px rgba(33,49,61,.05),0 10px 28px rgba(11,110,79,.07);
  --shadow-lift:0 2px 4px rgba(33,49,61,.06),0 16px 34px rgba(11,110,79,.13);
  --radius:14px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}
a { color:var(--accent-dark); }
a:focus-visible, button:focus-visible, select:focus-visible {
  outline:3px solid rgba(227,154,45,.65);
  outline-offset:2px;
}
main { max-width:920px; margin:0 auto; padding:1.6rem 1.2rem 2.8rem; }
h1 { font-size:2rem; line-height:1.18; letter-spacing:-.01em; margin:.2rem 0 .8rem; }
h2 { font-size:1.42rem; line-height:1.25; letter-spacing:-.01em; margin:2.2rem 0 .7rem; }
p { margin:.7rem 0; }

/* Section headings get a small gradient rule (top-level sections only) */
main > h2::after {
  content:""; display:block; width:44px; height:4px; border-radius:2px;
  margin-top:.45rem;
  background:linear-gradient(90deg,var(--accent),var(--amber));
}

/* ---------- Header ---------- */
.site-header {
  position:sticky; top:0; z-index:20;
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem;
  justify-content:space-between;
  padding:.7rem 1.2rem;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line-soft);
  box-shadow:0 1px 10px rgba(33,49,61,.05);
}
.brand {
  display:inline-flex; align-items:center; gap:.5rem;
  font-weight:800; font-size:1.28rem; letter-spacing:-.01em;
  color:var(--ink); text-decoration:none;
}
.brand::before {
  content:""; width:26px; height:26px; flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%230b6e4f'%3E%3Cellipse cx='12' cy='15.6' rx='5.1' ry='4.3'/%3E%3Cellipse cx='4.5' cy='10.6' rx='2' ry='2.8' transform='rotate(-18 4.5 10.6)'/%3E%3Cellipse cx='8.5' cy='6.7' rx='2.1' ry='3' transform='rotate(-6 8.5 6.7)'/%3E%3Cellipse cx='15.5' cy='6.7' rx='2.1' ry='3' transform='rotate(6 15.5 6.7)'/%3E%3Cellipse cx='19.5' cy='10.6' rx='2' ry='2.8' transform='rotate(18 19.5 10.6)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
.brand span { color:var(--accent); }
nav { display:flex; flex-wrap:wrap; }
nav a {
  margin-left:.35rem; padding:.32rem .6rem; border-radius:999px;
  color:var(--muted); text-decoration:none; font-size:.94rem; font-weight:600;
}
nav a:hover { color:var(--accent-dark); background:var(--accent-soft); }

/* ---------- Homepage hero ---------- */
.hero {
  position:relative; overflow:hidden;
  border-radius:20px;
  padding:2.3rem 2rem 2rem;
  margin-bottom:1.6rem;
  color:#fff;
  background:linear-gradient(128deg,#07402e 0%,var(--accent-dark) 30%,var(--accent) 62%,var(--accent-mid) 100%);
  box-shadow:var(--shadow);
}
.hero h1 { color:#fff; font-size:2.45rem; max-width:22ch; margin-top:0; }
.hero p { color:rgba(255,255,255,.93); max-width:62ch; }
.hero p strong { color:#ffd9a0; }
.hero-art {
  position:absolute; right:1.2rem; top:50%; transform:translateY(-50%);
  width:190px; height:auto; opacity:.95; pointer-events:none;
}
@media (max-width:760px) { .hero-art { display:none; } .hero h1 { font-size:2rem; } }

/* ---------- Stat cards (homepage benchmarks) ---------- */
.stat-cards {
  display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem;
  margin:0 0 1.8rem;
}
.stat-card {
  background:var(--card); border:1px solid var(--line-soft);
  border-top:4px solid var(--accent);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1rem 1.05rem .9rem;
}
.stat-card:nth-child(even) { border-top-color:var(--amber); }
.stat-value { font-size:1.72rem; font-weight:800; letter-spacing:-.02em; color:var(--accent-dark); line-height:1.1; }
.stat-value small { font-size:.95rem; font-weight:700; color:var(--muted); }
.stat-label { margin-top:.35rem; font-size:.88rem; color:var(--muted); line-height:1.45; }
@media (max-width:760px) { .stat-cards { grid-template-columns:repeat(2,1fr); } }

/* ---------- Page hero band (breed / guide / static pages) ---------- */
.page-hero {
  position:relative; overflow:hidden;
  border-radius:18px;
  padding:1.7rem 1.8rem 1.5rem;
  margin-bottom:1.7rem;
  background:linear-gradient(120deg,var(--accent-soft) 0%,#f4efe0 78%,var(--amber-soft) 100%);
  border:1px solid var(--line-soft);
}
.page-hero::after {
  content:""; position:absolute; right:-14px; bottom:-26px;
  width:130px; height:130px; opacity:.10; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23084f39'%3E%3Cellipse cx='12' cy='15.6' rx='5.1' ry='4.3'/%3E%3Cellipse cx='4.5' cy='10.6' rx='2' ry='2.8' transform='rotate(-18 4.5 10.6)'/%3E%3Cellipse cx='8.5' cy='6.7' rx='2.1' ry='3' transform='rotate(-6 8.5 6.7)'/%3E%3Cellipse cx='15.5' cy='6.7' rx='2.1' ry='3' transform='rotate(6 15.5 6.7)'/%3E%3Cellipse cx='19.5' cy='10.6' rx='2' ry='2.8' transform='rotate(18 19.5 10.6)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
}
.page-hero h1 { margin-top:0; }
.page-hero p { color:#3d4f5e; max-width:68ch; position:relative; z-index:1; }

/* ---------- Calculator ---------- */
.calculator {
  background:var(--card);
  border:1px solid var(--line-soft);
  border-top:5px solid var(--accent);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.2rem 1.4rem 1.3rem;
  margin:1.4rem 0;
}
.calculator h2 { margin-top:.1rem; }
.calculator h2::after { content:none; }
.calculator label { display:block; margin:.65rem 0; font-weight:600; }
.calculator select {
  width:100%; padding:.6rem .65rem; margin-top:.3rem; font-size:1rem;
  color:var(--ink); background:#fffdf7;
  border:1px solid var(--line); border-radius:9px;
}
#calc-result { margin-top:.6rem; }
.calc-figure { font-size:1.28rem; font-weight:700; color:var(--accent-dark); }
.calc-note { color:var(--muted); font-size:.9rem; }

/* ---------- Quote CTA ---------- */
.cta-box {
  background:linear-gradient(130deg,var(--accent-dark),var(--accent) 70%,var(--accent-mid));
  border-radius:16px;
  padding:1.5rem 1.6rem;
  margin:2.2rem 0;
  color:#fff;
  box-shadow:var(--shadow);
}
.cta-box h2 { color:#fff; margin-top:0; }
.cta-box h2::after { content:none; }
.cta-box p { color:rgba(255,255,255,.93); }
.cta-button {
  display:inline-block; margin-top:.4rem;
  background:var(--amber); color:#2e2003;
  padding:.78rem 1.45rem; border-radius:10px;
  text-decoration:none; font-weight:800; font-size:1.02rem;
  box-shadow:0 6px 16px rgba(0,0,0,.22);
  transition:transform .15s ease,box-shadow .15s ease;
}
.cta-button:hover { transform:translateY(-1px); box-shadow:0 9px 20px rgba(0,0,0,.25); }
.cta-button[aria-disabled="true"] { opacity:.92; }
.cta-note { color:rgba(255,255,255,.82) !important; font-size:.9rem; }

/* ---------- Tables ---------- */
table {
  border-collapse:collapse; width:100%;
  background:var(--card);
  border:1px solid var(--line-soft); border-radius:12px; overflow:hidden;
  box-shadow:var(--shadow);
  margin:1rem 0 1.4rem;
  font-size:.97rem;
}
th, td { padding:.62rem .8rem; text-align:left; vertical-align:top; }
thead th {
  background:linear-gradient(90deg,var(--accent-dark),var(--accent));
  color:#fff; font-weight:700; border:none;
}
tbody td { border-top:1px solid var(--line-soft); }
tbody tr:nth-child(even) { background:#fdf6ea; }
tbody tr:hover { background:#f6efdc; }
tbody td:first-child { font-weight:600; }

/* ---------- Breed card grid (homepage) ---------- */
.breed-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem;
  margin:1rem 0 1.6rem;
}
.breed-card {
  background:var(--card); border:1px solid var(--line-soft);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1rem 1.1rem .95rem;
  transition:transform .15s ease,box-shadow .15s ease;
}
.breed-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.breed-card h3 { margin:.05rem 0 .3rem; font-size:1.06rem; line-height:1.3; }
.breed-card h3 a { color:var(--ink); text-decoration:none; }
.breed-card h3 a:hover { color:var(--accent-dark); text-decoration:underline; }
.breed-range { font-size:1.38rem; font-weight:800; letter-spacing:-.015em; color:var(--accent-dark); margin:.15rem 0 .45rem; }
.breed-range span { font-size:.82rem; font-weight:600; color:var(--muted); letter-spacing:0; }
.breed-size {
  display:inline-block; margin:0;
  background:var(--accent-soft); color:var(--accent-dark);
  font-size:.78rem; font-weight:700;
  padding:.14rem .55rem; border-radius:999px;
}
@media (max-width:820px) { .breed-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px) { .breed-grid { grid-template-columns:1fr; } }

/* ---------- Breed-page cost chart ---------- */
.chart {
  background:var(--card); border:1px solid var(--line-soft);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:1.05rem 1.2rem .8rem; margin:1.1rem 0 1.3rem;
}
.chart figcaption {
  font-weight:800; font-size:1.02rem; color:var(--accent-dark);
  margin-bottom:.55rem;
}
.chart svg { display:block; width:100%; height:auto; }
.chart-note { color:var(--muted); font-size:.88rem; margin:.45rem 0 .2rem; }

/* ---------- Callout card (breed "all-ages" context, asides) ---------- */
.callout {
  background:var(--amber-soft);
  border:1px solid #eedcae; border-left:5px solid var(--amber);
  border-radius:12px;
  padding:.4rem 1.3rem 1rem;
  margin:1.8rem 0;
}
.callout h2 { margin-top:1rem; }
.callout h2::after { content:none; }

/* ---------- Trust strip (homepage) ---------- */
.trust-strip {
  list-style:none; margin:2rem 0 .4rem; padding:1.15rem 1.3rem;
  display:grid; grid-template-columns:repeat(2,1fr); gap:.65rem 1.6rem;
  background:var(--card); border:1px solid var(--line-soft);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.trust-strip li {
  position:relative; padding-left:1.85rem; font-size:.96rem; color:#3d4f5e;
}
.trust-strip li::before {
  content:""; position:absolute; left:0; top:.18rem; width:19px; height:19px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%230b6e4f'/%3E%3Cpath d='M4.7 8.5l2.2 2.2 4.4-4.9' stroke='white' stroke-width='1.9' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.trust-strip li strong { color:var(--ink); }
@media (max-width:640px) { .trust-strip { grid-template-columns:1fr; } }

/* ---------- Footer ---------- */
.site-footer {
  border-top:3px solid transparent;
  border-image:linear-gradient(90deg,var(--accent),var(--amber)) 1;
  background:#f8f1e2;
  padding:1.5rem 1.2rem 1.8rem;
  font-size:.88rem; color:var(--muted);
}
.site-footer p { max-width:920px; margin:.55rem auto; }
.site-footer strong { color:#41505e; }

@media (max-width:640px) {
  h1 { font-size:1.7rem; }
  .page-hero { padding:1.3rem 1.2rem 1.1rem; }
  .cta-box { padding:1.2rem 1.15rem; }
  main { padding:1.1rem .95rem 2.2rem; }
}