/* PetInsuranceGuide Design System — Warm & Trustworthy v3 */
:root {
  /* Warm neutrals — cream/brown tones like a vet clinic */
  --grey-50:#FEFAF6; --grey-100:#F8F0E8; --grey-200:#EDE0D4; --grey-300:#D6C8B8;
  --grey-400:#A89888; --grey-500:#7A6E64; --grey-600:#5C524A; --grey-700:#3E3630;
  --grey-800:#2C2420; --grey-900:#1E1814;
  /* Primary: Warm Coral — friendly, caring */
  --coral-50:#FEF7F5; --coral-100:#FDE8E3; --coral-200:#FBD0C7; --coral-400:#D4726A;
  --coral-600:#B85A52; --coral-700:#8C3D38;
  /* Accent: Golden Amber — warm, trustworthy */
  --amber-50:#FFFBF3; --amber-100:#FEF3D5; --amber-400:#D4913A;
  --amber-600:#B0742A; --amber-900:#5C3810;
  /* Accent: Sage Green — calm, natural */
  --green-50:#F4F9F4; --green-100:#E3F0E3; --green-400:#5A8F5A;
  --green-600:#447044; --green-900:#1E341E;
  /* Legacy aliases */
  --paper:var(--grey-50); --paper-elevated:#FFFDFB; --paper-dark:var(--grey-100);
  --ink:var(--grey-900); --ink-soft:var(--grey-700); --ink-muted:var(--grey-500);
  --blue:var(--coral-400); --blue-light:var(--coral-50);
  --amber:var(--amber-400); --amber-light:var(--amber-50);
  --green:var(--green-400); --green-light:var(--green-50);
  --line:var(--grey-200); --line-strong:var(--grey-300);
  --shadow-sm:0 1px 3px rgba(0,0,0,.03);--shadow-md:0 4px 16px rgba(0,0,0,.05);--shadow-lg:0 12px 36px rgba(0,0,0,.06);
  --radius-sm:8px;--radius:10px;--radius-lg:14px;--radius-xl:18px;
  --max-w:1100px;--max-w-narrow:48rem;
  --transition:0.25s cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);font-family:'Inter','system-ui','-apple-system',sans-serif;
  font-size:1rem;color:var(--ink-soft);min-height:100vh;-webkit-font-smoothing:antialiased;line-height:1.7;
  position:relative;overflow-x:hidden;
}
/* ── Warm ambient glow ── */
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 500px 400px at 10% 15%, var(--coral-50) 0%, transparent 55%),
    radial-gradient(ellipse 450px 350px at 85% 70%, var(--amber-50) 0%, transparent 50%),
    radial-gradient(ellipse 350px 300px at 50% 40%, var(--coral-50) 0%, transparent 50%);
  background-size:200% 200%;
  animation:energyField 18s ease-in-out infinite;
  opacity:.8;
}
@keyframes energyField{
  0%{background-position:0% 50%}
  33%{background-position:100% 25%}
  66%{background-position:30% 80%}
  100%{background-position:0% 50%}
}
@keyframes orbGlow{
  0%,100%{opacity:.5;transform:scale(1)}
  50%{opacity:1;transform:scale(1.2)}
}
h1,h2,h3,h4{font-family:'Inter','system-ui',sans-serif;letter-spacing:-0.02em;line-height:1.2;font-weight:700}
h1{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;letter-spacing:-0.03em}
h2{font-size:clamp(1.2rem,3vw,1.75rem);font-weight:700}
h3{font-size:1.15rem;font-weight:600}
code,pre,.mono{font-family:'JetBrains Mono','Menlo','Consolas',monospace}
a{color:var(--blue);text-decoration:none;transition:color var(--transition)}
a:hover{text-decoration:underline}
p{line-height:1.7;color:var(--ink-soft)}
img{max-width:100%;height:auto}
/* ===== NAV ===== */
nav.sticky-glass{position:sticky;top:0;z-index:100;background:rgba(254,250,246,.88);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border-bottom:1px solid var(--line);transition:box-shadow .2s}
nav.sticky-glass.scrolled{box-shadow:0 1px 8px rgba(0,0,0,.03)}
.nav-inner{max-width:var(--max-w);margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 20px}
.nav-logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.1rem;color:var(--ink);text-decoration:none}
.nav-logo span{color:var(--coral-400)}
.nav-links{display:flex;gap:4px;font-size:.875rem;font-weight:500}
.nav-links a{padding:8px 14px;border-radius:var(--radius);color:var(--ink-muted);text-decoration:none;transition:all var(--transition)}
.nav-links a:hover{background:var(--coral-50);color:var(--coral-400)}
.nav-links a.active{background:var(--coral-50);color:var(--coral-400);font-weight:600}
/* ===== CARDS ===== */
.card{background:var(--paper-elevated);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;transition:all .35s cubic-bezier(.25,.46,.45,.94);position:relative;z-index:1}
.card:hover{transform:translateY(-3px);box-shadow:0 0 50px rgba(212,114,106,.06),0 8px 24px rgba(0,0,0,.05);border-color:var(--coral-100)}
.card-blue{border-left:3px solid var(--coral-400)}
.card-amber{border-left:3px solid var(--amber-400)}
.card-green{border-left:3px solid var(--green-400)}
/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;padding:12px 24px;border-radius:var(--radius);text-decoration:none;font-size:.9375rem;border:none;cursor:pointer;transition:all var(--transition)}
.btn-primary{background:var(--coral-400);color:#FFF}
.btn-primary:hover{background:var(--coral-600);transform:translateY(-1px);box-shadow:0 4px 16px rgba(212,114,106,.25);color:#FFF;text-decoration:none}
.btn-secondary{background:transparent;color:var(--ink);border:1.5px solid var(--line-strong)}
.btn-secondary:hover{background:var(--coral-50);border-color:var(--coral-400);color:var(--coral-400);text-decoration:none}
.btn-amber{background:var(--amber-400);color:#FFF}
.btn-amber:hover{background:var(--amber-600);transform:translateY(-1px);color:#FFF;text-decoration:none}
/* ===== TABLES ===== */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-size:.875rem}
thead th{text-align:left;padding:12px 16px;border-bottom:2px solid var(--line-strong);color:var(--ink-muted);font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--paper-dark)}
tbody td{padding:12px 16px;border-bottom:1px solid var(--line);color:var(--ink-soft);vertical-align:middle}
tbody tr:hover{background:var(--paper)}
tbody tr:last-child td{border-bottom:none}
/* ===== BADGES ===== */
.badge{display:inline-flex;align-items:center;gap:4px;padding:5px 14px;border-radius:100px;font-size:.75rem;font-weight:600;letter-spacing:.03em}
.badge-blue{background:var(--coral-50);color:var(--coral-400)}
.badge-amber{background:var(--amber-50);color:var(--amber-400)}
.badge-green{background:var(--green-50);color:var(--green-400)}
/* ===== TAGS ===== */
.tag{display:inline-block;padding:4px 12px;border-radius:100px;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.tag-blue{background:var(--coral-50);color:var(--coral-400)}
.tag-amber{background:var(--amber-50);color:var(--amber-400)}
.tag-green{background:var(--green-50);color:var(--green-400)}
/* ===== HERO ===== */
.hero-section{background:linear-gradient(170deg,var(--coral-50) 0%,var(--grey-50) 40%,var(--amber-50) 80%,var(--grey-50) 100%);background-size:200% 200%;animation:energyField 14s ease-in-out infinite;border:1px solid var(--coral-100);border-radius:var(--radius-xl);padding:40px 32px;position:relative;overflow:hidden}
.hero-section::before{content:'';position:absolute;top:-120px;right:-80px;width:350px;height:350px;border-radius:50%;background:radial-gradient(circle,rgba(212,114,106,.14) 0%,rgba(212,114,106,.04) 35%,transparent 70%);pointer-events:none;animation:orbGlow 6s ease-in-out infinite;transform-origin:center}
.hero-section::after{content:'';position:absolute;bottom:-80px;left:-60px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(212,145,58,.12) 0%,rgba(212,145,58,.03) 35%,transparent 70%);pointer-events:none;animation:orbGlow 8s ease-in-out 2s infinite;transform-origin:center}
/* ===== STATS ===== */
.stat-card{background:var(--paper-elevated);border:1px solid var(--line);border-radius:var(--radius);padding:20px 16px;text-align:center;transition:all var(--transition)}
.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--line-strong)}
.stat-value{font-size:1.75rem;font-weight:800;line-height:1.1;letter-spacing:-.03em}
.stat-label{font-size:.75rem;color:var(--ink-muted);margin-top:4px;font-weight:500;text-transform:uppercase;letter-spacing:.06em}
/* ===== FAQ ===== */
details.card{cursor:pointer;padding:16px 20px;margin-bottom:6px}
details.card summary{font-weight:600;font-size:.9375rem;outline:none;list-style:none;display:flex;justify-content:space-between;align-items:center}
details.card summary::-webkit-details-marker{display:none}
details.card summary::after{content:'+';font-size:1.2rem;color:var(--ink-muted);font-weight:400;transition:transform .3s}
details.card[open] summary::after{content:'\2212';transform:rotate(180deg)}
details.card p{padding-top:10px;font-size:.875rem;color:var(--ink-soft);line-height:1.7}
/* ===== GUIDE LINKS ===== */
.guide-link{display:block;padding:12px 16px;background:var(--paper-elevated);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink);font-size:.875rem;font-weight:500;transition:all var(--transition)}
.guide-link:hover{background:var(--paper);border-color:var(--coral-400);color:var(--coral-400);transform:translateX(3px);box-shadow:var(--shadow-sm);text-decoration:none}
/* ===== AD BANNER ===== */
.ad-banner{background:var(--paper);border-radius:var(--radius);padding:12px;text-align:center;border:1px dashed var(--line-strong)}
.ad-label{font-size:.625rem;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.12em;font-weight:600;margin-bottom:4px}
/* ===== COOKIE BANNER ===== */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:var(--paper-elevated);border-top:1px solid var(--line-strong);padding:14px 20px;z-index:999;box-shadow:0 -4px 20px rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;font-size:.8125rem;color:var(--ink-muted);line-height:1.5}
.cookie-banner a{color:var(--blue);font-weight:600}
.cookie-banner .btn-accept{background:var(--blue);color:#FFF;border:none;padding:8px 24px;border-radius:var(--radius);font-weight:600;font-size:.8125rem;cursor:pointer;white-space:nowrap;transition:all .2s}
.cookie-banner .btn-accept:hover{background:#1550A8}
.cookie-banner .btn-reject{background:transparent;color:var(--ink-muted);border:1.5px solid var(--line-strong);padding:8px 24px;border-radius:var(--radius);font-weight:500;font-size:.8125rem;cursor:pointer;white-space:nowrap;transition:all .2s}
.cookie-banner .btn-reject:hover{background:var(--paper-dark)}
@media(max-width:480px){.cookie-banner{flex-direction:column;text-align:center;padding:12px 16px;gap:8px}}
/* ===== ANIMATIONS ===== */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.anim-fade-up{animation:fadeUp .5s ease-out both}
/* ===== DIVIDER ===== */
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line-strong),transparent);margin:32px 0;border:none}
/* ===== FOOTER ===== */
footer{border-top:1px solid var(--line);margin-top:48px;background:var(--paper-elevated);padding:36px 20px 20px;font-size:.8125rem;color:var(--ink-muted)}
footer a{color:var(--ink-muted);text-decoration:none}
footer a:hover{color:var(--blue);text-decoration:underline}
.footer-grid{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr;gap:24px}}
/* ===== HIGHLIGHT BOX ===== */
.highlight-box{background:var(--coral-50);border:1px solid var(--coral-100);border-radius:var(--radius);padding:20px 24px;margin:20px 0}
.highlight-box-amber{background:var(--amber-50);border:1px solid var(--amber-100);border-radius:var(--radius);padding:20px 24px;margin:20px 0}
.highlight-box-green{background:var(--green-50);border:1px solid var(--green-100);border-radius:var(--radius);padding:20px 24px;margin:20px 0}
/* ===== CURSOR GLOW ===== */
.cursor-glow{position:fixed;pointer-events:none;z-index:9999;width:300px;height:300px;background:radial-gradient(circle,rgba(212,114,106,.1) 0%,rgba(212,114,106,.03) 35%,transparent 60%);border-radius:50%;transform:translate(-50%,-50%);transition:opacity .3s}
/* ===== PET ANIMATIONS ===== */
@keyframes pawFloat{0%{opacity:0;transform:translateY(40px) rotate(0deg)}20%{opacity:.6}80%{opacity:.3}100%{opacity:0;transform:translateY(-60px) rotate(25deg)}}
@keyframes dogBounce{0%,100%{transform:translateY(0) rotate(-3deg)}30%{transform:translateY(-10px) rotate(0deg)}50%{transform:translateY(-4px) rotate(2deg)}70%{transform:translateY(-14px) rotate(-1deg)}}
@keyframes catStretch{0%,100%{transform:scaleY(1) rotate(0)}15%{transform:scaleY(.88) rotate(-5deg)}40%{transform:scaleY(1.08) rotate(2deg)}60%{transform:scaleY(.95) rotate(5deg)}85%{transform:scaleY(1.04) rotate(-2deg)}}
@keyframes tailWag{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(12deg)}}
@keyframes earTwitch{0%,95%,100%{transform:rotate(0)}96%{transform:rotate(-15deg)}98%{transform:rotate(10deg)}}
@keyframes petBlink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.pet-paw{position:absolute;font-size:28px;pointer-events:none;z-index:2;animation:pawFloat 3.5s ease-out infinite;opacity:0}
.pet-paw:nth-child(1){left:10%;animation-delay:0s}
.pet-paw:nth-child(2){left:25%;animation-delay:1.2s;font-size:22px}
.pet-paw:nth-child(3){left:50%;animation-delay:2.4s;font-size:32px}
.pet-paw:nth-child(4){left:75%;animation-delay:.6s;font-size:20px}
.pet-paw:nth-child(5){left:90%;animation-delay:1.8s;font-size:26px}
@keyframes boneFloat{0%{opacity:0;transform:translateY(20px) rotate(-15deg)}30%{opacity:.5}70%{opacity:.3}100%{opacity:0;transform:translateY(-50px) rotate(20deg)}}
@keyframes heartBeat{0%,100%{transform:scale(1)}15%{transform:scale(1.25)}30%{transform:scale(1)}45%{transform:scale(1.2)}}
.pet-corner-dog{position:absolute;bottom:-10px;right:-15px;font-size:80px;pointer-events:none;z-index:2;animation:dogBounce 2.5s ease-in-out infinite;transform-origin:bottom right}
.pet-corner-cat{position:absolute;top:-20px;left:-15px;font-size:65px;pointer-events:none;z-index:2;animation:catStretch 4s ease-in-out infinite;transform-origin:bottom center}
.pet-bone{position:absolute;font-size:24px;pointer-events:none;z-index:2;animation:boneFloat 3s ease-out infinite;opacity:0}
.pet-bone:nth-child(6){left:35%;bottom:10px;animation-delay:.7s}
.pet-bone:nth-child(7){left:65%;bottom:5px;animation-delay:2s;font-size:20px}
.pet-bone:nth-child(8){left:50%;bottom:15px;animation-delay:3s;font-size:28px}
.pet-heart{display:inline-block;animation:heartBeat 1.3s ease-in-out infinite;transform-origin:center}
.pet-face{display:inline-block}
.pet-face .eyes{display:inline-block;animation:petBlink 6s ease-in-out infinite}
.pet-face .tail{display:inline-block;animation:tailWag .35s ease-in-out infinite;transform-origin:top center}
.pet-face .ear{display:inline-block;animation:earTwitch 3s ease-in-out infinite;transform-origin:bottom center}
/* ===== INLINE SVG PETS ===== */
@keyframes svgWag{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(14deg)}}
@keyframes svgEarTwitch{0%,92%,100%{transform:rotate(0)}94%{transform:rotate(-20deg)}96%{transform:rotate(15deg)}}
@keyframes svgBlink{0%,93%,100%{transform:scaleY(1)}95%{transform:scaleY(.05)}97%{transform:scaleY(1)}}
@keyframes svgFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes svgPawPress{0%,100%{transform:scale(1) translateY(0)}30%{transform:scale(.9) translateY(3px)}60%{transform:scale(1.05) translateY(-2px)}}
.pet-svg{display:inline-block;vertical-align:middle}
.pet-svg .tail-wag{animation:svgWag .4s ease-in-out infinite;transform-origin:left center}
.pet-svg .ear-twitch{animation:svgEarTwitch 3.5s ease-in-out infinite;transform-origin:bottom center}
.pet-svg .eye-blink{animation:svgBlink 5s ease-in-out infinite;transform-origin:center}
.pet-svg .body-float{animation:svgFloat 3s ease-in-out infinite}
.pet-svg .paw-press{animation:svgPawPress 1.8s ease-in-out infinite;transform-origin:center}
/* ===== MOBILE ===== */
@media(max-width:768px){
  body{font-size:.9375rem}
  .nav-inner{height:auto;flex-wrap:wrap;padding:8px 12px}
  .nav-links{gap:2px;font-size:.75rem;flex-wrap:wrap;justify-content:center}
  .nav-links a{padding:6px 10px}
  .hero-section{padding:24px 16px}
  .hero-section h1{font-size:clamp(1.2rem,4vw,1.6rem)}
  .card{padding:18px}
  .stat-value{font-size:1.25rem}
  .stat-card{padding:14px 10px}
  .btn{padding:10px 20px;font-size:.8125rem}
  h1{font-size:clamp(1.3rem,4vw,1.8rem)}
  main{padding:16px 12px}
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr!important}
  table{font-size:12px}
  thead th{padding:8px 10px;font-size:9px}
  tbody td{padding:8px 10px}
}