/* doginsurancecosts.net - cool-editorial design (talaria-site-designer v1.5.2)
   Pet & Lifestyle archetype: warm, rounded, friendly. Teal accent hashed from
   config (hue 184 / sat 68 / light 56), light header per site config.
   Epilogue heads, Nunito Sans body, IBM Plex Mono figures.
   Targets the site's real class names: header .wrap, .logo, .logomark,
   .logotype, .lt-name, .lt-tag, .hgrad, .hero, .calc, .fld, .qty, .result,
   .bar, .feats, .feat, .faq, .ad, .guides, .gcard, .related, .disc, .lead,
   .cta, footer .wrap, .cols, cc-banner */

:root{
  --z-accent:     #43D1DB;
  --z-accent-dk:  #157C84;
  --z-accent-dk2: #116369;
  --z-accent-soft:#E4F5F6;
  --z-header-bg:  #F4FAFA;
  --z-paper:      #F9F5F1;
  --z-panel:      #FFFFFF;
  --z-ink:        #302721;
  --z-ink2:       #574A42;
  --z-muted:      #7F736C;
  --z-line:       #E7E0DA;
  --z-line2:      #D6CCC2;
  --z-r:          18px;
  --z-maxw:       980px;
  --z-head:       'Epilogue', system-ui, sans-serif;
  --z-body:       'Nunito Sans', system-ui, sans-serif;
  --z-mono:       'IBM Plex Mono', ui-monospace, monospace;
}

/* ---- reset / base ---- */
*, *::before, *::after{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  font-family:var(--z-body);
  color:var(--z-ink);
  background:var(--z-paper);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block }
a{ color:var(--z-accent-dk); text-underline-offset:2px }
a:hover{ text-decoration:underline }
.wrap{ max-width:var(--z-maxw); margin:0 auto; padding:0 22px }
h1,h2,h3,h4{
  font-family:var(--z-head);
  font-weight:700;
  line-height:1.14;
  color:var(--z-ink);
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
h1{ font-size:clamp(1.9rem,4vw,2.7rem) }
h2{ font-size:clamp(1.25rem,2.3vw,1.55rem) }
h3{ font-size:1.08rem }
p{ margin:0 0 1rem }
ul{ padding-left:1.4em; margin:.5rem 0 1rem }
li{ margin-bottom:.4em }
:focus-visible{ outline:2px solid var(--z-accent-dk); outline-offset:2px }
a, button, select, input{ transition:background-color .14s ease, border-color .14s ease, color .14s ease, transform .1s ease }
button:active, .cta:active{ transform:scale(.98) }
@media (prefers-reduced-motion: reduce){ *, *::before, *::after{ transition:none !important; scroll-behavior:auto } }

/* ---- header (light, per site config) ---- */
header{
  background:var(--z-header-bg);
  color:var(--z-ink);
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid var(--z-line);
}
header .wrap{
  max-width:var(--z-maxw);
  margin:0 auto;
  padding:13px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}
.logo{ display:inline-flex; align-items:center; gap:11px; text-decoration:none }
.logo:hover{ text-decoration:none }
.logomark{
  width:40px; height:40px; border-radius:50%;
  background:var(--z-accent-dk);
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
}
.logomark svg{ width:22px; height:22px }
.logotype{ display:flex; flex-direction:column; line-height:1.1 }
.lt-name{
  font-family:var(--z-head); font-weight:700; font-size:1.14rem;
  color:var(--z-ink); letter-spacing:-.01em;
}
.lt-name .ac{ color:var(--z-accent-dk) }
.lt-tag{
  font-family:var(--z-mono); font-size:.58rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--z-muted); margin-top:3px;
}
header nav a{
  color:var(--z-ink2); text-decoration:none; margin-left:14px;
  font-size:.88rem; font-weight:600; padding:6px 0;
  border-bottom:1px solid transparent;
}
header nav a:hover{ color:var(--z-accent-dk); border-bottom-color:var(--z-accent); text-decoration:none }
.hgrad{ height:3px; background:var(--z-accent) }

/* ---- hero (homepage: two-column, warm paper bg) ---- */
.hero{ background:var(--z-paper); border-bottom:1px solid var(--z-line); color:var(--z-ink); overflow:hidden }
.hero .wrap{ max-width:var(--z-maxw); margin:0 auto; padding:0 22px; display:block }
.hero h1{
  font-size:clamp(1.9rem,4.1vw,2.7rem); font-weight:700; color:var(--z-ink);
  margin:.1em 0 .4em; max-width:17ch; line-height:1.1;
}
.hero p{ font-size:1.03rem; color:var(--z-ink2); max-width:50ch; margin-bottom:.5rem }
.pill{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--z-accent-soft); color:var(--z-accent-dk2);
  padding:4px 12px; border-radius:20px;
  font-family:var(--z-mono); font-size:.68rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; margin-bottom:12px;
}

/* byline - hidden on the homepage hero, shown on inner pages */
.byline{ display:flex; align-items:center; gap:10px; color:var(--z-muted); font-size:.84rem; margin:10px 0 0 }
.byline b{ color:var(--z-ink); font-weight:700 }
.byline .av{
  width:32px; height:32px; border-radius:50%; background:var(--z-accent-soft);
  display:inline-block; object-fit:cover; border:1px solid var(--z-line);
}
.hero .byline{ display:none }
.byline.light{ color:var(--z-muted) }
.byline.light b{ color:var(--z-ink) }

/* ---- homepage two-column hero ---- */
.hero-row{
  display:grid !important;
  grid-template-columns:1fr 1.05fr;
  gap:30px;
  align-items:stretch;
  padding-top:40px !important;
  padding-bottom:38px !important;
}
.hero-left{ display:flex; flex-direction:column; min-width:0 }
.hero-left h1{ margin-bottom:.35em }
.hero-left .answer{ font-size:1.03rem; color:var(--z-ink2); max-width:50ch; margin-bottom:0 }
.hero-mascot-wrap{ margin-top:auto; padding-top:22px; display:flex; align-items:flex-end }
.hero-mascot-wrap svg{ width:190px; height:190px; flex:0 0 auto }
.hero-right{ display:flex; flex-direction:column; min-width:0 }
.hero-right .calc{ margin:0 !important; flex:1 }
.hero .art{ display:none }
@media (max-width:860px){
  .hero-row{ grid-template-columns:1fr !important; gap:0 !important; padding-top:26px !important; padding-bottom:0 !important }
  .hero-left{ padding-bottom:18px }
  .hero-mascot-wrap{ display:none }
  .hero-right{ padding-bottom:22px }
}

/* ---- main content ---- */
main{ max-width:var(--z-maxw); margin:0 auto; padding:26px 22px }
main h2{
  font-size:clamp(1.2rem,2.2vw,1.5rem);
  margin:1.7em 0 .5em; padding-bottom:.3em;
  border-bottom:1px solid var(--z-line);
}
main h2:first-child{ margin-top:0 }
main p{ color:var(--z-ink2) }
main ul li{ color:var(--z-ink2) }
main strong{ color:var(--z-ink) }
main h1{
  font-family:var(--z-head); font-weight:700;
  font-size:clamp(1.7rem,3.6vw,2.4rem);
  color:var(--z-ink); line-height:1.12; margin:0 0 .3em;
}
main > .byline{ margin-bottom:16px }
body:not(:has(.calc-layout)) .tool-hero .wrap{ max-width:760px }

/* ---- calculator card ---- */
.calc{
  background:var(--z-panel); border:1px solid var(--z-line);
  border-radius:var(--z-r); padding:24px; margin:-40px 0 18px;
  position:relative; box-shadow:0 4px 22px rgba(48,39,33,.08);
  border-top:3px solid var(--z-accent);
}
.calc h2{
  font-family:var(--z-head); font-size:1.22rem; font-weight:700;
  border:none; margin:0 0 16px; padding:0;
}
.fld{ display:flex; flex-direction:column; gap:5px; margin:12px 0; font-weight:600; font-size:.9rem; color:var(--z-ink2) }
.fld select, .qty input{
  padding:11px 13px; border:1px solid var(--z-line2); border-radius:9px;
  font-size:1rem; font-family:var(--z-body); background:var(--z-paper); color:var(--z-ink);
}
.fld select:focus, .qty input:focus{
  outline:none; border-color:var(--z-accent); background:#fff;
  box-shadow:0 0 0 3px rgba(67,209,219,.22);
}
.hint{ display:block; color:var(--z-muted); font-weight:400; font-size:.8rem; margin-top:3px }
.qty{ display:flex; align-items:center; gap:10px; margin:12px 0; font-weight:600; font-size:.9rem; color:var(--z-ink2) }
.qty input{ width:88px }

/* ---- result (mono figures) ---- */
.result{
  margin-top:16px; padding:20px; background:var(--z-panel);
  border:1px solid var(--z-line); border-radius:var(--z-r); text-align:center;
  border-top:3px solid var(--z-accent-dk);
}
.result .big{
  font-family:var(--z-mono); font-size:2rem; font-weight:600; color:var(--z-accent-dk2);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; display:block; margin:4px 0;
}
.bar{ height:6px; border-radius:3px; background:linear-gradient(90deg,var(--z-accent-soft),var(--z-accent),var(--z-accent-dk2)); margin:14px 0 4px; position:relative }
.bar i{ position:absolute; top:-4px; width:3px; height:14px; background:var(--z-ink); border-radius:2px }

/* spec-sheet authority strip (signature element) */
.authority{
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  margin-top:14px; border:1px solid var(--z-line); border-radius:12px; overflow:hidden;
  background:var(--z-paper); font-family:var(--z-mono); font-size:.72rem;
}
.authority div{ padding:10px 12px; border-right:1px solid var(--z-line) }
.authority div:last-child{ border-right:0 }
.authority b{ display:block; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--z-muted); font-weight:600; margin-bottom:3px }
.authority span{ color:var(--z-ink); font-weight:600 }
@media (max-width:520px){ .authority{ grid-template-columns:1fr } .authority div{ border-right:0; border-bottom:1px solid var(--z-line) } .authority div:last-child{ border-bottom:0 } }

/* ---- lead / CTA block ---- */
.lead{ margin-top:14px; background:var(--z-paper); border:1px solid var(--z-line); border-radius:var(--z-r); padding:17px 18px; text-align:left }
.lead h3{ margin:0 0 4px; font-family:var(--z-head); font-weight:700; font-size:1rem }
.lead small{ color:var(--z-muted); font-size:.8rem }
.cta{
  display:inline-block; margin-top:10px; background:var(--z-accent-dk); color:#fff;
  padding:11px 20px; border-radius:9px; text-decoration:none; font-weight:700; font-size:.92rem;
}
.cta:hover{ background:var(--z-accent-dk2); color:#fff; text-decoration:none }

/* ---- feature row (varied, not identical triplet) ---- */
.feats{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:12px; margin:20px 0 }
.feat{ background:var(--z-panel); border:1px solid var(--z-line); border-radius:14px; padding:15px; display:flex; gap:11px; align-items:flex-start }
.feat span{ font-weight:700; display:block; font-size:.92rem; color:var(--z-ink) }
.feat small{ color:var(--z-muted); font-size:.8rem }
@media (max-width:700px){ .feats{ grid-template-columns:1fr } }

/* ---- data tables ---- */
table{ width:100%; border-collapse:collapse; margin:12px 0 18px; background:var(--z-panel); border:1px solid var(--z-line); border-radius:12px; overflow:hidden; font-size:.93rem }
th{ font-family:var(--z-body); font-weight:700; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--z-muted); text-align:left; padding:11px 13px; border-bottom:1px solid var(--z-line); background:var(--z-paper) }
td{ text-align:left; border-bottom:1px solid var(--z-line); padding:10px 13px; color:var(--z-ink2) }
tr:last-child td{ border-bottom:0 }
tr td:first-child{ font-weight:600; color:var(--z-ink) }
table.num td:not(:first-child), table.num th:not(:first-child){ font-family:var(--z-mono); font-variant-numeric:tabular-nums }

/* ---- FAQ ---- */
.faq{ background:var(--z-panel); border:1px solid var(--z-line); border-radius:12px; padding:2px 16px; margin:8px 0 }
.faq summary, summary{ font-family:var(--z-head); font-weight:700; font-size:1rem; cursor:pointer; padding:13px 0; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px; color:var(--z-ink) }
summary::-webkit-details-marker{ display:none }
summary::after{ content:"+"; font-family:var(--z-mono); font-size:1.2rem; color:var(--z-accent-dk); font-weight:400; flex:0 0 auto }
details[open] summary::after{ content:"\2212" }
.faq p{ padding-bottom:14px }

/* ---- guide cards ---- */
.guides{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(225px,1fr)); margin:10px 0 20px }
.gcard{ display:block; border:1px solid var(--z-line); border-radius:14px; padding:15px 17px; background:var(--z-panel); text-decoration:none; color:var(--z-ink); transition:border-color .14s, transform .12s }
.gcard:hover{ border-color:var(--z-accent); transform:translateY(-2px); text-decoration:none }
.gcard strong{ display:block; color:var(--z-accent-dk2); font-family:var(--z-head); font-size:1rem; font-weight:700; margin-bottom:5px; line-height:1.25 }
.gcard small{ color:var(--z-muted); font-size:.8rem }

/* ---- dataset callout card ---- */
.dataset-card{
  background:var(--z-panel); border:1px solid var(--z-line); border-radius:var(--z-r);
  padding:20px 22px; margin:18px 0; border-left:4px solid var(--z-accent);
}
.dataset-card h3{ margin:0 0 6px; font-family:var(--z-head) }
.dataset-card .meta{ font-family:var(--z-mono); font-size:.72rem; color:var(--z-muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px }

/* ---- related tags ---- */
.related{ display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 }
.related a{ text-decoration:none; border:1px solid var(--z-line2); background:var(--z-panel); padding:7px 14px; border-radius:22px; font-size:.86rem; color:var(--z-ink2) }
.related a:hover{ border-color:var(--z-accent); color:var(--z-accent-dk2); text-decoration:none }

/* ---- ad placeholder ---- */
.ad{ margin:24px 0; min-height:90px; background:none; border:1px solid var(--z-line); border-radius:var(--z-r); display:flex; align-items:center; justify-content:center; color:var(--z-muted); font-family:var(--z-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase }

/* ---- disclaimer ---- */
.disc{ font-size:.8rem; color:var(--z-muted); background:var(--z-panel); border:1px solid var(--z-line); border-radius:var(--z-r); padding:13px 16px; margin-top:18px; line-height:1.6 }

/* ---- ctabar ---- */
.ctabar{ margin:14px 0 18px }
.ctabar .cta{ display:inline-block }

/* ---- form card (contact) ---- */
.form-card{ background:var(--z-panel); border:1px solid var(--z-line); border-radius:var(--z-r); padding:22px; max-width:560px }
.field{ display:flex; flex-direction:column; gap:5px; margin:12px 0; font-weight:600; font-size:.9rem; color:var(--z-ink2) }
.field input, .field textarea{ padding:11px 13px; border:1px solid var(--z-line2); border-radius:9px; font-size:1rem; font-family:var(--z-body); background:var(--z-paper); color:var(--z-ink) }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--z-accent); background:#fff; box-shadow:0 0 0 3px rgba(67,209,219,.22) }
#formResult{ margin-top:10px; font-weight:700; color:var(--z-accent-dk) }

/* ---- about banner ---- */
.aboutbanner{ border-radius:var(--z-r); padding:22px; display:flex; align-items:center; justify-content:center; margin:10px 0 18px; background:var(--z-accent-soft); border:1px solid var(--z-line) }
.aboutbanner svg{ width:150px; height:150px }

/* ---- footer (dark bookend, GRID never flex) ---- */
footer{ background:var(--z-ink); color:rgba(255,255,255,.62); margin-top:36px; border-top:2px solid var(--z-accent) }
footer .wrap{ max-width:var(--z-maxw); margin:0 auto; padding:38px 22px 24px; font-size:.88rem }
footer a{ color:rgba(255,255,255,.72); text-decoration:none }
footer a:hover{ color:var(--z-accent); text-decoration:none }
footer .cols{ display:grid; grid-template-columns:1.8fr 1fr 1fr; gap:32px; align-items:start; margin-bottom:18px }
footer .cols a{ display:block; margin:0 0 9px }
footer .cols strong{ color:#fff }
footer .cols small{ color:rgba(255,255,255,.48) }
@media (max-width:760px){ footer .cols{ grid-template-columns:1fr 1fr } }

/* brand mark visible on the dark footer */
.site-footer .brand svg rect, footer .brand svg rect{ fill:#fff }
.site-footer .brand .name, footer .brand .name{ color:#fff }

/* related mesh in footer */
.related-mesh{ margin-top:14px; font-size:.8rem; line-height:1.8; color:rgba(255,255,255,.42); border-top:1px solid rgba(255,255,255,.1); padding-top:14px }
.related-mesh a{ color:rgba(255,255,255,.55); text-decoration:underline; text-underline-offset:2px; margin-right:0 }
.related-mesh a:hover{ color:var(--z-accent) }

/* ---- cookie consent banner ---- */
#cc-banner{ background:var(--z-ink) !important; border-top:1px solid rgba(255,255,255,.12) }
#cc-acc{ background:var(--z-accent-dk) !important; color:#fff !important; border:0 !important; border-radius:6px !important; padding:8px 16px !important; cursor:pointer !important; font-weight:700 !important }
#cc-acc:hover{ background:var(--z-accent-dk2) !important }
#cc-rej{ background:transparent !important; color:rgba(255,255,255,.8) !important; border:1px solid rgba(255,255,255,.22) !important; border-radius:6px !important }

/* ---- number highlights (mono) ---- */
.num, .mono{ font-family:var(--z-mono); font-variant-numeric:tabular-nums }

/* ---- csv / cite line on dataset page ---- */
.cite-line{ font-size:.82rem; color:var(--z-muted); background:var(--z-panel); border:1px dashed var(--z-line2); border-radius:12px; padding:12px 16px; margin:16px 0; font-family:var(--z-mono) }
.methodology{ background:var(--z-panel); border:1px solid var(--z-line); border-radius:var(--z-r); padding:18px 20px; margin:16px 0 }

/* ---- mobile ---- */
@media (max-width:640px){
  header .wrap{ padding:12px 16px }
  header nav a{ margin-left:10px; font-size:.82rem }
  .lt-name{ font-size:1rem }
  .lt-tag{ display:none }
  main{ padding:20px 16px }
  .calc{ margin:-24px 0 18px; padding:18px }
  .result .big{ font-size:1.6rem }
  footer .wrap{ padding:26px 16px 18px }
  footer .cols{ gap:22px }
  .feats{ grid-template-columns:1fr }
}