/* Generated by tools/sync-shared.js from styles/site.css. Edit the source. */
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/baloo-2-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/nunito-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/nunito-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Shared accessibility helpers (all sites) */
.skip-link{position:absolute;left:.5rem;top:-4rem;z-index:100;padding:.6rem 1rem;background:#fff;color:#000;font-weight:700;border:2px solid #000;text-decoration:none}
.skip-link:focus{top:.5rem}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.table-wrap{position:relative;overflow-x:auto;max-width:100%}
img{max-width:100%;height:auto}
main:focus{outline:none}
.photo-credit{font-size:.8rem;opacity:.85;margin:.3rem 0 0}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Cattologist: playful illustrated. 60 cream / 30 teal / 10 coral. */
:root {
  --cream: #fff7ee;
  --peach: #f9d9c9;
  --mint: #dcefec;
  --teal: #1f6f6b;
  --teal-dark: #164f4c;
  --coral: #e0674a;
  --coral-text: #b5462c;
  --ink: #1f2b2a;
  --round: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 1.08rem/1.7 var(--body); }
a { color: var(--teal); font-weight: 700; text-underline-offset: 3px; }
a:hover { color: var(--coral-text); }
:focus-visible { outline: 3px solid var(--coral-text); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--round); font-weight: 700; line-height: 1.15; color: var(--teal-dark); }

.sale-banner { background: var(--teal); color: #fff; }
.sale-banner__inner { margin: 0 auto; max-width: 70rem; padding: .5rem 1rem; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3rem .7rem; font-size: .95rem; text-align: center; }
.sale-banner__domain { font-family: var(--round); font-size: 1.1rem; }
.sale-banner__link { background: var(--cream); color: var(--teal-dark); border-radius: 999px; padding: .15rem .8rem; text-decoration: none; }
.sale-banner__link:hover, .sale-banner__link:focus-visible { background: var(--peach); color: var(--ink); outline-color: #fff; }

.nav-wrap { max-width: 70rem; margin: 0 auto; padding: 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.logo { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; font-family: var(--round); font-size: 1.8rem; color: var(--teal-dark); }
.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.pills a { display: inline-block; padding: .35rem .9rem; border-radius: 999px; background: #fff; border: 2px solid var(--mint); text-decoration: none; color: var(--teal-dark); }
.pills a:hover { border-color: var(--teal); }
.pills a[aria-current="page"] { background: var(--teal); border-color: var(--teal); color: #fff; }

.hello { max-width: 70rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 56rem) { .hello { grid-template-columns: 1.2fr 1fr; } }
.hello h1 { font-size: clamp(2.4rem, 8vw, 4.2rem); margin: .5rem 0 1rem; }
.hello h1 span { color: var(--coral-text); }
.hello__lede { font-size: 1.2rem; }
.bubble { display: inline-block; background: #fff; border: 2px solid var(--teal); border-radius: 1.5rem 1.5rem 1.5rem .3rem; padding: .3rem 1rem; font-family: var(--round); font-weight: 700; color: var(--teal-dark); margin: 0; }
.blob { border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; overflow: hidden; }
.blob img { display: block; width: 100%; height: auto; }
.blob--wide { border-radius: 2.5rem; margin: 1.5rem 0 2.5rem; }
.pill-btn { display: inline-block; background: var(--teal); color: #fff; border: 0; border-radius: 999px; padding: .65rem 1.4rem; font: 700 1.05rem var(--round); text-decoration: none; cursor: pointer; margin: .25rem .4rem .25rem 0; }
.pill-btn:hover { background: var(--coral-text); color: #fff; }
.pill-btn--light { background: var(--peach); color: var(--ink); }

.questions, .facts, .calc-teaser { max-width: 70rem; margin: 0 auto; padding: 2rem 1rem; }
.questions h2, .facts h2, .calc-teaser h2 { font-size: clamp(1.8rem, 5vw, 2.5rem); }
.qgrid { display: grid; gap: 1.25rem; }
@media (min-width: 50rem) { .qgrid { grid-template-columns: repeat(3, 1fr); } .qgrid--stack { grid-template-columns: 1fr; } }
.qcard { border-radius: 1.75rem; padding: 1.5rem; background: #fff; border: 3px solid var(--mint); }
.qcard--0 { background: var(--mint); }
.qcard--1 { background: var(--peach); border-color: var(--peach); }
.qcard--2 { background: #fff; border-color: var(--teal); }
.qcard h3, .qcard h2 { font-size: 1.45rem; margin-top: 0; }
.qcard a { color: var(--teal-dark); text-decoration-color: var(--coral); text-decoration-thickness: 3px; }
.facts__list { counter-reset: f; list-style: none; padding: 0; display: grid; gap: 1rem; }
.facts__list li { counter-increment: f; position: relative; padding: 1rem 1rem 1rem 4rem; background: #fff; border-radius: 1.25rem; }
.facts__list li::before { content: counter(f); position: absolute; left: 1rem; top: 1rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--coral); color: var(--ink); font: 700 1.2rem/2.2rem var(--round); text-align: center; }
.calc-teaser { background: var(--teal); color: #fff; border-radius: 2rem; max-width: 66rem; margin: 2rem auto; padding: 2rem; }
@media (max-width: 68rem) { .calc-teaser { margin: 2rem 1rem; } }
.calc-teaser h2 { color: #fff; margin-top: 0; }
.calc-teaser .pill-btn { background: var(--cream); color: var(--teal-dark); }

.sheet { max-width: 46rem; margin: 0 auto; padding: 1rem 1rem 3rem; }
.sheet h1 { font-size: clamp(2.2rem, 7vw, 3.4rem); margin: .5rem 0 .75rem; }
.sheet__lede { font-size: 1.2rem; }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; font-size: .95rem; }
.breadcrumbs li + li::before { content: "🐾"; margin-right: .4rem; font-size: .8rem; }
.meta { font-size: .95rem; color: #4a5a58; }
.answer-bubble { background: #fff; border: 3px solid var(--teal); border-radius: 1.75rem 1.75rem 1.75rem .4rem; padding: 1rem 1.4rem; margin: 1.5rem 0 2rem; }
.answer-bubble__label { font-family: var(--round); font-weight: 700; color: var(--coral-text); margin: 0; }
.answer-bubble p:last-child { margin-bottom: 0; }
.prose h2 { font-size: 1.8rem; margin-top: 2.25rem; }
.prose table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 30rem; background: #fff; border-radius: 1rem; overflow: hidden; border: 2px solid var(--mint); }
.prose th, .prose td { padding: .6rem .75rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--mint); }
.prose thead th { background: var(--mint); font-family: var(--round); color: var(--teal-dark); }
.table-wrap { margin: 1rem 0; }
.vetnote { background: var(--peach); border-radius: 1rem; padding: .9rem 1.1rem; }
.sources { margin-top: 2rem; font-size: .95rem; }
.sources h2 { font-size: 1.3rem; }
.related { margin-top: 2rem; background: var(--mint); border-radius: 1.5rem; padding: 1rem 1.5rem; }
.related h2 { font-size: 1.4rem; }
.faq-bubble { background: #fff; border-radius: 1.5rem; padding: .25rem 1.25rem .5rem; margin: 1rem 0; border: 2px solid var(--mint); }
.faq-bubble h2 { font-size: 1.35rem; }

.calc { background: #fff; border: 3px solid var(--mint); border-radius: 1.75rem; padding: 1.25rem 1.5rem 1.5rem; }
.calc label, .calc legend { display: block; font-weight: 700; margin: .8rem 0 .3rem; }
.calc__row { display: grid; gap: .5rem 1.5rem; }
@media (min-width: 36rem) { .calc__row { grid-template-columns: 1fr auto; align-items: start; } }
.calc input[type="number"], .calc select { width: 100%; font: inherit; padding: .6rem .8rem; border: 2px solid var(--teal); border-radius: .9rem; background: var(--cream); color: var(--ink); }
.unit { border: 0; padding: 0; margin: 0; }
.unit label { display: inline-flex; align-items: center; gap: .35rem; margin: .4rem 1rem 0 0; font-weight: 400; }
.unit input { accent-color: var(--teal); width: 1.1rem; height: 1.1rem; }
.hint { font-size: .9rem; margin: .3rem 0 0; color: #4a5a58; }
.calc .pill-btn { margin-top: 1.25rem; }
.result { margin: 2rem 0; background: var(--mint); border-radius: 1.75rem; padding: 1.25rem 1.5rem; }
.result h2 { margin-top: 0; }
.result__big { font-family: var(--round); font-weight: 700; font-size: 3rem; color: var(--teal-dark); margin: 0; line-height: 1.1; }
.result__big span { font-size: 1.2rem; }
.result__error { color: var(--coral-text); font-weight: 700; }
.workings div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; border-bottom: 1px dashed var(--teal); padding: .35rem 0; }
.workings dt { font-weight: 700; }
.workings dd { margin: 0; }
.lost { text-align: center; padding-top: 2rem; }

.pawprint { margin-top: 3rem; background: var(--teal); color: #fff; }
.pawprint__wave { display: block; width: 100%; height: 40px; margin-top: -39px; }
.pawprint__inner { max-width: 70rem; margin: 0 auto; padding: 1.5rem 1rem 2.5rem; display: grid; gap: 1.5rem; }
@media (min-width: 56rem) { .pawprint__inner { grid-template-columns: 1fr 1fr 1.3fr; } }
.pawprint a { color: #fff; }
.pawprint ul { list-style: none; padding: 0; margin: 0; }
.pawprint li { margin: .3rem 0; }
.pawprint__logo { font-family: var(--round); font-size: 1.9rem; margin: 0; }
.footer-sale { background: var(--cream); color: var(--ink); border-radius: 1.25rem; padding: 1rem 1.25rem; margin-top: 0; }
.footer-sale a { color: var(--teal-dark); }
.footer-legal { font-size: .88rem; }