/* VetPlanCheck — Ledger Plum & Copper
   dark plum #352030 · paper #faf3ea · card #fffaf3 · ink #2b1a24 ·
   copper CTA #9a5518 · pale #f3e3d3 · link #7c3a0e */
:root{
  --plum:#352030; --plum2:#241521; --paper:#faf3ea; --paper2:#f3e3d3;
  --card:#fffaf3; --ink:#2b1a24; --copper:#9a5518; --copperlt:#f0c08a;
  --link:#7c3a0e; --muted:#5d4753; --line:#d9c4ae; --pale:#f3e3d3;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:Georgia,'Times New Roman',serif;font-size:18px;line-height:1.62}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
h1,h2,h3,h4{font-family:'Avenir Next','Segoe UI',Arial,sans-serif;line-height:1.22;color:var(--ink)}
h1{font-size:2.35rem;margin:.35em 0 .5em}
h2{font-size:1.65rem;margin:1.4em 0 .55em}
h3{font-size:1.25rem;margin:1.2em 0 .45em}
h4{font-size:1.05rem;margin:1.1em 0 .35em}
p{margin:.65em 0}
a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
.small{font-size:.86rem;color:var(--muted)}
.src{font-size:.86rem;color:var(--muted)}
.kicker{font-family:'Avenir Next','Segoe UI',Arial,sans-serif;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--plum);margin:0 0 .4em;font-weight:700}
.tagline{font-family:'Avenir Next','Segoe UI',Arial,sans-serif;font-size:.85rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--copperlt);font-weight:700;margin:0 0 .6em}
.lede{font-size:1.13rem}
.btn{display:inline-block;background:var(--copper);color:#fff;
  font-family:'Avenir Next','Segoe UI',Arial,sans-serif;font-weight:700;font-size:1rem;
  padding:.78em 1.5em;border-radius:8px;text-decoration:none;border:2px solid var(--ink)}
.btn:hover{background:#7c3a0e}
.btn.alt{background:var(--plum);color:var(--paper);border-color:var(--plum)}
section{padding:34px 0}
section.alt{background:var(--paper2)}
section.dark{background:var(--plum);color:var(--paper)}
section.dark h2,section.dark h3,section.dark p{color:var(--paper)}
section.dark a{color:var(--copperlt)}
section.dark .btn{background:var(--copper);color:#fff;border-color:#fff}
/* Light components inside dark sections — cascade hardening.
   section.dark paints paper text at specificity (0,1,2) for h2/h3/p and by
   inheritance for everything else. Every light panel below re-declares
   EVERY text element at strictly higher specificity (0,2,2)+, including
   li and label, which have no direct section rule and would otherwise
   silently inherit paper onto cream. th paints its own plum/paper scheme. */
section.dark .lock-panel,section.dark .card,section.dark .tool,section.dark .result,
section.dark .notice,section.dark .tablewrap,section.dark .faq,section.dark .faq details{color:var(--ink)}
section.dark .lock-panel h2,section.dark .lock-panel h3,section.dark .lock-panel h4,section.dark .lock-panel p,section.dark .lock-panel li,section.dark .lock-panel td,section.dark .lock-panel summary,section.dark .lock-panel label,
section.dark .card h2,section.dark .card h3,section.dark .card h4,section.dark .card p,section.dark .card li,section.dark .card td,section.dark .card summary,section.dark .card label,
section.dark .tool h2,section.dark .tool h3,section.dark .tool h4,section.dark .tool p,section.dark .tool li,section.dark .tool td,section.dark .tool summary,section.dark .tool label,
section.dark .result h2,section.dark .result h3,section.dark .result h4,section.dark .result p,section.dark .result li,section.dark .result td,section.dark .result summary,section.dark .result label,
section.dark .notice h2,section.dark .notice h3,section.dark .notice h4,section.dark .notice p,section.dark .notice li,section.dark .notice td,section.dark .notice summary,section.dark .notice label,
section.dark .tablewrap h2,section.dark .tablewrap h3,section.dark .tablewrap h4,section.dark .tablewrap p,section.dark .tablewrap li,section.dark .tablewrap td,section.dark .tablewrap summary,section.dark .tablewrap label,
section.dark .faq h2,section.dark .faq h3,section.dark .faq h4,section.dark .faq p,section.dark .faq li,section.dark .faq td,section.dark .faq summary,section.dark .faq label{color:var(--ink)}
section.dark .lock-panel .small,section.dark .lock-panel .src,section.dark .card .small,section.dark .card .src,
section.dark .tool .small,section.dark .tool .src,section.dark .result .small,section.dark .result .src,
section.dark .notice .small,section.dark .notice .src,section.dark .tablewrap .small,section.dark .tablewrap .src,
section.dark .faq .small,section.dark .faq .src{color:var(--muted)}
section.dark .lock-panel .kicker,section.dark .card .kicker,section.dark .tool .kicker,section.dark .result .kicker,
section.dark .notice .kicker,section.dark .tablewrap .kicker,section.dark .faq .kicker{color:var(--plum)}
section.dark .lock-panel a,section.dark .card a,section.dark .tool a,section.dark .result a,
section.dark .notice a,section.dark .tablewrap a,section.dark .faq a{color:var(--link)}
section.dark .lock-panel .btn,section.dark .card .btn,section.dark .tool .btn,section.dark .result .btn,
section.dark .notice .btn,section.dark .tablewrap .btn,section.dark .faq .btn{color:#fff}
section.dark ul.check li::before{color:var(--copperlt)}
section.dark .lock-panel ul.check li::before,section.dark .card ul.check li::before,section.dark .tool ul.check li::before,
section.dark .result ul.check li::before,section.dark .notice ul.check li::before,section.dark .tablewrap ul.check li::before,
section.dark .faq ul.check li::before{color:var(--copper)}
.hero{background:var(--plum);color:var(--paper);padding:44px 0 40px}
.hero h1{color:var(--paper)}
.hero p{color:var(--paper)}
.hero .lede{color:#f6e8da}
.hero a{color:var(--copperlt)}
.hero .btn{background:var(--copper);color:#fff;border-color:#fff}
.hero .small{color:#f6e8da}
.hero .tagline{color:var(--copperlt)}
header.site{background:var(--plum);border-bottom:3px solid var(--copper);padding:14px 0}
header.site .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.mono{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  background:var(--copper);color:#fff;border-radius:9px;
  font-family:'Avenir Next','Segoe UI',Arial,sans-serif;font-weight:800;font-size:1.05rem}
.wordmark{font-family:'Avenir Next','Segoe UI',Arial,sans-serif;font-weight:800;font-size:1.3rem}
.wm-a{color:var(--copperlt)}
.wm-b{color:var(--paper)}
nav.main{display:flex;flex-wrap:wrap;gap:6px 20px;margin-left:auto}
nav.main a{font-family:'Avenir Next','Segoe UI',Arial,sans-serif;font-size:.95rem;font-weight:600;color:var(--paper)}
footer.site{background:var(--plum);color:var(--paper);padding:40px 0 30px;margin-top:0}
footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:26px}
footer.site h4{color:var(--paper);margin-top:0}
footer.site p,footer.site li{color:#f6e8da}
footer.site a{color:var(--copperlt)}
footer.site ul{list-style:none;padding:0;margin:0}
footer.site li{margin:.35em 0}
.wm-h{font-family:'Avenir Next','Segoe UI',Arial,sans-serif}
footer.site .wm-a{color:var(--copperlt)}
footer.site .wm-b{color:var(--paper)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:20px 0}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:20px 0}
.card{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.card h3{margin-top:.2em}
.tool{background:var(--card);color:var(--ink);border:2px solid var(--plum);border-radius:14px;padding:24px 26px;margin:22px 0}
.tool label{display:block;font-family:'Avenir Next','Segoe UI',Arial,sans-serif;font-weight:600;font-size:.95rem;margin:16px 0 5px}
.tool select,.tool input{width:100%;padding:.62em .7em;font-size:1rem;border:1.5px solid var(--muted);
  border-radius:8px;background:#fff;color:var(--ink);font-family:inherit}
.tool input[type="checkbox"]{width:auto}
.result{background:var(--pale);color:var(--ink);border:1.5px solid var(--plum);border-radius:12px;padding:22px 26px;margin:20px 0}
.result h3{margin-top:0}
.verdict{font-size:1.08rem;font-weight:700}
.cheapest{border:2px solid var(--copper);background:var(--card);border-radius:10px;padding:14px 18px;margin:12px 0}
.notice{background:var(--pale);color:var(--ink);border-left:5px solid var(--plum);border-radius:0 10px 10px 0;padding:16px 20px;margin:20px 0}
.notice p{margin:.3em 0}
.careline{background:var(--pale);color:var(--ink);border-left:5px solid var(--copper);border-radius:0 10px 10px 0;padding:16px 20px;margin:20px 0}
.careline p{margin:.3em 0}
.lock-panel{background:var(--card);color:var(--ink);border:2px solid var(--copper);border-radius:14px;padding:24px 28px;margin:26px 0}
.lock-panel h3{margin-top:0;color:var(--ink)}
ul.check{list-style:none;padding:0;margin:.6em 0}
ul.check li{padding:.32em 0 .32em 1.7em;position:relative}
ul.check li::before{content:"✓";position:absolute;left:.2em;color:var(--copper);font-weight:800}
ol.moves{padding-left:1.3em}
ol.moves li{margin:.55em 0}
ol.steps{padding-left:1.3em}
ol.steps li{margin:.55em 0}
.tablewrap{overflow-x:auto;margin:16px 0;background:var(--card);color:var(--ink)}
table{border-collapse:collapse;width:100%;background:var(--card)}
th,td{border:1px solid var(--line);padding:.55em .7em;text-align:left;font-size:.95rem;vertical-align:top}
th{background:var(--plum);color:var(--paper);font-family:'Avenir Next','Segoe UI',Arial,sans-serif}
.flag{display:inline-block;background:var(--copper);color:#fff;border-radius:6px;
  padding:.08em .5em;font-size:.78rem;font-weight:700;font-family:'Avenir Next','Segoe UI',Arial,sans-serif}
.pill{display:inline-block;border-radius:999px;padding:.1em .7em;font-size:.8rem;font-weight:700;
  font-family:'Avenir Next','Segoe UI',Arial,sans-serif;background:var(--pale);color:var(--ink);border:1px solid var(--plum)}
details{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:.4em 1.1em;margin:.6em 0}
summary{font-family:'Avenir Next','Segoe UI',Arial,sans-serif;font-weight:700;cursor:pointer;padding:.55em 0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 18px}
@media (max-width:820px){
  .grid,.grid2,.row2,.row3{grid-template-columns:1fr}
  footer.site .cols{grid-template-columns:1fr}
  h1{font-size:1.8rem}
  body{font-size:17px}
  nav.main{margin-left:0}
}
/* Checker result components (rendered by checker.js) */
.vpc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0}
.vpc-card{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.vpc-card h3{margin-top:0;font-size:1.05rem}
.vpc-card--cheapest{border:2px solid var(--copper)}
.vpc-card--estimate{border:2px dashed var(--copper)}
.vpc-cheapest-badge{display:inline-block;background:var(--copper);color:#fff;border-radius:6px;
  padding:.08em .5em;font-size:.78rem;font-weight:700;font-family:'Avenir Next','Segoe UI',Arial,sans-serif}
.vpc-card-amount{font-size:1.35rem;font-weight:800;font-family:'Avenir Next','Segoe UI',Arial,sans-serif;color:var(--plum)}
.vpc-badge-estimate{display:inline-block;background:var(--plum);color:var(--paper);border-radius:6px;
  padding:.08em .5em;font-size:.78rem;font-weight:700;font-family:'Avenir Next','Segoe UI',Arial,sans-serif}
.vpc-window-banner{background:var(--copper);color:#fff;border-radius:10px;padding:16px 20px;margin:16px 0}
.vpc-window-banner strong{color:#fff}
.vpc-tie-note,.vpc-dates,.vpc-guide-line,.vpc-paperwork-line,.vpc-care-line{margin:.6em 0}
.vpc-truecost{border-top:2px solid var(--plum);margin-top:18px;padding-top:10px}
section.dark .vpc-card,section.dark .vpc-card h3,section.dark .vpc-card p,section.dark .vpc-card li{color:var(--ink)}
@media (max-width:820px){.vpc-cards{grid-template-columns:1fr}}
/* Any <details> placed directly inside a dark section: its card background
   comes from the global details rule, so its text must be re-declared ink
   here or summary/p/li silently inherit paper onto cream. */
section.dark details,section.dark details summary,section.dark details p,section.dark details li,section.dark details label,section.dark details a{color:var(--ink)}
section.dark details a{color:var(--link)}