@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Figtree:wght@400;500;600;700;800&display=swap');

:root{
  --paper:#F5F7F1;
  --card:#FFFFFF;
  --ink:#2A2620;
  --ink-soft:#655F53;
  --teal:#2E7D6B;
  --teal-dark:#1F5A4C;
  --coral:#E8683F;
  --sun:#EFAC3A;
  --safe:#2F9E64;
  --toxic:#D8482E;
  --caution:#DE9A28;
  --line:#E1E0D2;
  --radius:14px;
  --shadow:0 1px 2px rgba(42,38,32,.06), 0 10px 26px -14px rgba(42,38,32,.22);
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Figtree', -apple-system, sans-serif;
}
*{box-sizing:border-box;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); line-height:1.55; -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:var(--font-display); font-weight:600; line-height:1.15; margin:0 0 .4em;}
h1{font-size:clamp(1.9rem,4.4vw,2.7rem);}
h2{font-size:clamp(1.3rem,2.6vw,1.6rem);}
p{margin:0 0 1em;}
.container{max-width:960px; margin:0 auto; padding:0 20px;}
a{color:var(--teal-dark);}
:focus-visible{outline:3px solid var(--sun); outline-offset:2px;}
.visually-hidden{position:absolute; width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}

/* header */
.site-header{background:var(--teal-dark); color:#fff; padding:16px 0;}
.site-header .row{display:flex; align-items:center; justify-content:space-between;}
.logo{color:#fff; text-decoration:none; font-family:var(--font-display); font-weight:700; font-size:1.4rem; display:flex; align-items:center; gap:8px;}
.logo .paw{font-size:1.3rem;}

/* tabs */
.tabbar{display:flex; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:5px; box-shadow:var(--shadow); max-width:520px; margin:22px auto 0;}
.tabbar button{
  flex:1; border:none; background:none; padding:12px 10px; border-radius:999px; font-family:var(--font-body);
  font-weight:700; font-size:.92rem; color:var(--ink-soft); cursor:pointer; transition:.18s;
}
.tabbar button[aria-selected="true"]{background:var(--teal); color:#fff;}
.tabpanel{display:none; padding:26px 0 60px;}
.tabpanel.active{display:block;}

.intro-text{max-width:640px; color:var(--ink-soft); margin:14px 0 24px;}

/* cost calculator */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow);}
.pet-select{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:8px 0 20px;}
.pet-select button{
  background:#fff; border:2px solid var(--line); border-radius:12px; padding:14px 6px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px; font-weight:700; font-size:.82rem; color:var(--ink-soft);
}
.pet-select button .emoji{font-size:1.5rem;}
.pet-select button[aria-pressed="true"]{border-color:var(--teal); background:#EAF4EF; color:var(--teal-dark);}

.seg-group{display:flex; border:2px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:18px;}
.seg-group button{flex:1; background:#fff; border:none; padding:10px 6px; font-weight:700; font-size:.85rem; color:var(--ink-soft); cursor:pointer; border-right:1px solid var(--line);}
.seg-group button:last-child{border-right:none;}
.seg-group button[aria-pressed="true"]{background:var(--coral); color:#fff;}

.toggle-row{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px;}
.switch{position:relative; width:46px; height:26px; flex:none;}
.switch input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer;}
.switch .track{position:absolute; inset:0; background:var(--line); border-radius:20px; transition:.2s;}
.switch .thumb{position:absolute; top:3px; left:3px; width:20px; height:20px; background:#fff; border-radius:50%; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.3);}
.switch input:checked + .track{background:var(--teal);}
.switch input:checked ~ .thumb{transform:translateX(20px);}

.field-label{font-weight:700; font-size:.92rem; margin-bottom:8px; display:block;}

.results-total{text-align:center; padding:20px 0 6px;}
.results-total .range{font-family:var(--font-display); font-weight:700; font-size:clamp(1.8rem,6vw,2.4rem); color:var(--teal-dark);}
.results-total .sub{color:var(--ink-soft); font-size:.9rem; margin-top:4px;}

.line-items{margin-top:18px;}
.line-item{display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px dashed var(--line);}
.line-item:last-child{border-bottom:none;}
.line-item .name{font-weight:600; font-size:.92rem;}
.line-item .amt{font-weight:700; color:var(--teal-dark); font-size:.9rem;}

.setup-card{background:#FFF6EC; border:1px solid #F0DBB8; border-radius:var(--radius); padding:18px; margin-top:18px;}
.setup-card h3{color:#7A5322;}

.bars{display:flex; align-items:flex-end; gap:12px; height:140px; margin-top:14px;}
.bar-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%;}
.bar-col .bar{width:100%; max-width:56px; background:var(--line); border-radius:6px 6px 0 0; transition:height .4s ease;}
.bar-col.active .bar{background:var(--teal);}
.bar-col .bar-val{font-size:.7rem; margin-bottom:4px; color:var(--ink-soft); font-weight:700;}
.bar-col .bar-label{font-size:.72rem; margin-top:6px; color:var(--ink-soft); text-align:center;}

.callout{background:#FBECE7; border-left:4px solid var(--coral); border-radius:0 10px 10px 0; padding:12px 14px; font-size:.86rem; color:#6B3A28; margin-top:16px;}

.share-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px;}
.share-btn{
  border:2px solid var(--line); background:#fff; border-radius:10px; padding:10px 16px; font-weight:700;
  font-size:.86rem; cursor:pointer; color:var(--ink); display:flex; align-items:center; gap:6px;
}
.share-btn:hover{border-color:var(--teal);}

/* checker */
.search-wrap{position:relative;}
.search-input{
  width:100%; font-size:1.05rem; padding:14px 16px; border:2px solid var(--line); border-radius:12px;
  font-family:var(--font-body); background:#fff;
}
.search-input:focus{border-color:var(--teal);}
.suggestions{
  position:absolute; top:calc(100% + 6px); left:0; right:0; background:#fff; border:1px solid var(--line);
  border-radius:10px; box-shadow:var(--shadow); z-index:10; max-height:260px; overflow-y:auto; display:none;
}
.suggestions.open{display:block;}
.suggestions button{
  width:100%; text-align:left; background:none; border:none; padding:11px 16px; font-size:.94rem;
  cursor:pointer; color:var(--ink); border-bottom:1px solid var(--line);
}
.suggestions button:last-child{border-bottom:none;}
.suggestions button:hover{background:#F0F5EE;}

.persistent-notice{
  background:#FBECE7; border:1px solid #F0C3B3; border-radius:10px; padding:12px 14px; font-size:.86rem;
  color:#6B3A28; margin-top:14px; display:flex; gap:8px; align-items:flex-start;
}

.item-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:20px;}
@media (min-width:600px){.item-grid{grid-template-columns:repeat(3,1fr);}}
.item-chip{
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 10px; text-align:left;
  cursor:pointer; font-weight:600; font-size:.88rem; color:var(--ink);
}
.item-chip:hover{border-color:var(--teal);}
.item-chip .cat{display:block; font-size:.7rem; color:var(--ink-soft); font-weight:500; margin-top:2px;}

.result-card{margin-top:24px; scroll-margin-top:100px;}
.result-card .item-title{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.result-card .item-cat{font-size:.8rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; font-weight:700;}
.species-grid{display:grid; grid-template-columns:1fr; gap:14px; margin-top:14px;}
@media (min-width:640px){.species-grid{grid-template-columns:1fr 1fr;}}
.species-card{border:2px solid var(--line); border-radius:12px; padding:16px;}
.species-card h4{margin:0 0 8px; font-family:var(--font-body); font-weight:800; font-size:1rem;}
.status-badge{
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; font-weight:800;
  font-size:.8rem; border:2px solid transparent;
}
.status-badge.safe{background:#E7F6ED; color:var(--safe); border-color:var(--safe);}
.status-badge.toxic{background:#FBEAE6; color:var(--toxic); border-color:var(--toxic);}
.status-badge.moderation{background:#FDF3E1; color:#8A6410; border-color:var(--caution);}
.severity-tag{font-size:.75rem; font-weight:700; color:var(--ink-soft); margin-left:8px;}
.species-card p{margin:10px 0 0; font-size:.88rem; color:var(--ink-soft);}
.action-line{margin-top:10px; font-size:.85rem; font-weight:700; color:var(--toxic); background:#FBEAE6; border-radius:8px; padding:8px 10px;}

.explainer{padding:36px 0; border-top:1px solid var(--line); margin-top:20px;}
footer.site-footer{background:var(--teal-dark); color:#EAF4EF; margin-top:20px; padding:34px 0 24px;}
footer.site-footer .foot-links{display:flex; flex-wrap:wrap; gap:16px 22px; margin-bottom:16px;}
footer.site-footer a{color:#EAF4EF; text-decoration:none; font-size:.9rem; opacity:.92;}
footer.site-footer a:hover{opacity:1; text-decoration:underline;}
.foot-bottom{border-top:1px solid rgba(255,255,255,.18); padding-top:14px; font-size:.8rem; color:#CFE3DA;}

.cookie-banner{
  position:fixed; bottom:0; left:0; right:0; background:var(--teal-dark); color:#fff; padding:16px 20px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; z-index:80;
  box-shadow:0 -6px 20px rgba(0,0,0,.15);
}
.cookie-banner p{margin:0; font-size:.88rem; max-width:600px;}
.cookie-banner .actions{display:flex; gap:10px;}
.cookie-banner button{border-radius:8px; padding:9px 16px; font-weight:700; font-size:.85rem; cursor:pointer; border:2px solid #fff;}
.cookie-banner .accept{background:#fff; color:var(--teal-dark);}
.cookie-banner .decline{background:none; color:#fff;}

.legal-page{padding:40px 0 60px; max-width:760px; margin:0 auto;}
.legal-page h2{margin-top:1.6em;}
.legal-page .updated{color:var(--ink-soft); font-size:.9rem; margin-bottom:2em;}

@media (prefers-reduced-motion: reduce){ *{animation-duration:.01ms !important; transition-duration:.01ms !important;} }