/* VetYourPro — Registry design system.
   One small vocabulary, each element with a fixed job (see CLAUDE.md / build-lessons.md).
   Committed single light world for launch; dark mode is a later, deliberate add. */

:root{
  --gnd:#EEF1EF;      /* page ground: cool slate paper, biased toward the green accent */
  --surf:#ffffff;     /* card / panel fill */
  --ink:#16211C;      /* primary text */
  --mut:#4C5A52;      /* secondary text: labels, captions, board names, ledes */
  --line:#c6d0ca;     /* firmer hairline: header/footer edges, card borders, section rules */
  --line2:#d6ddd8;    /* soft hairline: ledger row separators, cell dividers */
  --wash:#f2f6f4;     /* tint fill: the verdict band only */
  --brand:#1C6B4A;    /* accent: links, primary buttons, focus, the seal */
  --brand-d:#134f37;  /* accent pressed */
  --ok:#1C6B4A;       /* status green — active / in good standing */
  --warn:#8A6A10;     /* status amber — not eligible / lapsed */
  --bad:#A23127;      /* status red — suspended / revoked / discipline */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --pad:28px;         /* standard page inset */
  --gap:26px;         /* standard section rhythm */
  --measure:980px;    /* content column */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--gnd);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
img{max-width:100%}

.wrap{max-width:var(--measure);margin:0 auto;padding:0 var(--pad)}
main{display:block}

/* header */
.site-head{background:var(--surf);border-bottom:1px solid var(--line)}
.site-head .bar{max-width:var(--measure);margin:0 auto;padding:13px var(--pad);display:flex;align-items:center;gap:18px}
.mark{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:600;font-size:1.22rem;letter-spacing:-.01em;color:var(--ink)}
.mark svg{width:21px;height:21px;color:var(--brand)}
.nav{margin-left:auto;display:flex;gap:20px;font-size:.9rem;color:var(--mut);align-items:center}
.nav a{color:var(--mut)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.searchbox{position:relative}
.searchbox input{font:inherit;font-size:.86rem;color:var(--ink);background:#fbfcfb;border:1px solid var(--line);border-radius:7px;padding:7px 11px;width:190px}
.searchbox .results{position:absolute;top:calc(100% + 5px);right:0;width:280px;background:var(--surf);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 30px -10px rgba(20,33,28,.28);overflow:hidden;z-index:30}
.searchbox .results a{display:block;padding:8px 12px;color:var(--ink);font-size:.9rem;border-bottom:1px solid var(--line2)}
.searchbox .results a:last-child{border-bottom:none}
.searchbox .results a:hover{background:var(--wash);text-decoration:none}
.searchbox .results .board{color:var(--mut);font-size:.8rem}

/* layout helpers */
.page{padding:var(--pad) 0 calc(var(--pad) + 8px)}
.stack>*+*{margin-top:var(--gap)}
.eyebrow{font-size:.8rem;color:var(--brand);font-weight:600;margin:0 0 9px}
h1{font-family:var(--serif);font-weight:500;font-size:clamp(1.85rem,3.6vw,2.6rem);line-height:1.1;letter-spacing:-.015em;margin:0 0 10px;text-wrap:balance}
.lede{font-size:1.04rem;color:var(--mut);max-width:60ch;margin:0;line-height:1.5}
.hero-lede{margin-bottom:22px}
.crumb{font-size:.84rem;color:var(--mut);margin:0 0 12px}
.sub{color:var(--mut);font-size:.96rem;max-width:64ch;margin:-4px 0 14px;line-height:1.5}

h2{font-family:var(--serif);font-weight:600;font-size:1.32rem;letter-spacing:-.01em;margin:0 0 12px}
h2.sec{border-top:1px solid var(--line);padding-top:calc(var(--gap) - 4px);margin-top:0}

/* lookup */
.lookup{background:var(--surf);border:1px solid var(--line);border-radius:10px;padding:14px;display:grid;gap:10px;align-items:end}
.lookup.home{grid-template-columns:1.1fr 1fr 1.5fr auto}
.lookup.state{grid-template-columns:1.5fr auto}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld label{font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;font-weight:600;color:var(--mut)}
.fld select,.fld input{font:inherit;font-size:.94rem;color:var(--ink);background:#fbfcfb;border:1px solid var(--line);border-radius:7px;padding:10px 12px;width:100%}
.btn{font:inherit;font-weight:600;font-size:.94rem;background:var(--brand);color:#fff;border:none;border-radius:7px;padding:11px 20px;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.btn:hover{background:var(--brand-d);text-decoration:none;color:#fff}
.btn.wide{width:100%}
.lookup-note{margin:9px 2px 0;font-size:.82rem;color:var(--mut)}

/* trust row (no dividers — whitespace + top rule) */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:0 44px;border-top:1px solid var(--line)}
.trust .t{padding:16px 0 2px}
.trust h3{font-family:var(--serif);font-weight:600;font-size:1.02rem;margin:0 0 5px}
.trust p{margin:0;font-size:.89rem;color:var(--mut);line-height:1.45}

/* profession head cards */
.heads{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.heads a{background:var(--surf);border:1px solid var(--line);border-radius:9px;padding:13px 15px;display:block}
.heads a:hover{border-color:var(--brand);text-decoration:none}
.heads a[aria-disabled="true"]{opacity:.55;pointer-events:none}
.heads .st{display:block;font-family:var(--serif);font-weight:600;font-size:1.05rem;color:var(--ink)}
.heads .ct{display:block;color:var(--mut);font-size:.82rem;margin-top:3px;line-height:1.35}

/* result card */
.rec{background:var(--surf);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.verdict{display:flex;align-items:center;gap:13px;padding:18px 22px;background:var(--wash);border-bottom:1px solid var(--line2)}
.verdict .seal{width:34px;height:34px;flex-shrink:0;color:var(--ok)}
.verdict .vtext{flex:1;min-width:0}
.verdict .vstatus{font-family:var(--serif);font-weight:600;font-size:1.32rem;color:var(--ok);line-height:1.15}
.verdict .vqual{color:var(--mut);font-size:.92rem}
.verdict.warn .seal,.verdict.warn .vstatus{color:var(--warn)}
.verdict.bad .seal,.verdict.bad .vstatus{color:var(--bad)}
.facts.two{grid-template-columns:repeat(2,1fr)}
.liveresult{min-height:1.5rem}
.verdict .vname{text-align:right;flex-shrink:0}
.verdict .vname .n{font-family:var(--serif);font-weight:600;font-size:1.12rem}
.verdict .vname .s{color:var(--mut);font-size:.85rem}
.facts{display:grid;grid-template-columns:repeat(4,1fr)}
.facts .c{padding:15px 22px;border-right:1px solid var(--line2)}
.facts .c:last-child{border-right:none}
.facts .l{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);font-weight:600;margin:0 0 5px}
.facts .v{font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.prov{display:flex;flex-wrap:wrap;gap:5px 14px;align-items:center;padding:12px 22px;background:#f4f7f5;border-top:1px solid var(--line2);font-size:.85rem;color:var(--mut)}
.prov b{color:var(--ink);font-weight:600}
.candlist{display:grid;gap:8px}
.candhead{font-size:.9rem;color:var(--mut);margin:0}
.cand{display:flex;flex-direction:column;gap:2px;text-align:left;width:100%;background:var(--surf);border:1px solid var(--line);border-left:3px solid var(--ok);border-radius:9px;padding:11px 14px;cursor:pointer;font:inherit}
.cand:hover{background:var(--wash)}
.cand.warn{border-left-color:var(--warn)}
.cand.bad{border-left-color:var(--bad)}
.cand .cn{font-weight:600;font-size:1rem;color:var(--ink)}
.cand .cm{font-size:.85rem;color:var(--mut);font-variant-numeric:tabular-nums}
.sample-note{font-size:.82rem;color:var(--mut);margin:8px 2px 0}

/* cta */
.cta{display:flex;gap:18px;align-items:center;background:var(--surf);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:10px;padding:16px 20px}
.cta .ctxt{flex:1}
.cta h3{margin:0 0 3px;font-family:var(--serif);font-weight:600;font-size:1.06rem}
.cta p{margin:0;color:var(--mut);font-size:.89rem;line-height:1.45}

/* status meanings */
.meanings{display:grid;border-top:1px solid var(--line2)}
.meanings .m{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line2);align-items:start}
.dot{width:9px;height:9px;border-radius:50%;margin-top:7px}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.bad{background:var(--bad)}
.meanings dt{font-weight:600;font-size:.98rem;margin:0 0 2px}
.meanings dd{margin:0;color:var(--mut);font-size:.91rem;line-height:1.5}

/* fact grid */
.factgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.factgrid .row{padding:11px 0;border-bottom:1px solid var(--line2)}
.factgrid dt{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);font-weight:600;margin:0 0 3px}
.factgrid dd{margin:0;font-size:.95rem;line-height:1.45}

/* faq */
.faq .q{padding:13px 0;border-bottom:1px solid var(--line2)}
.faq .q:first-child{border-top:1px solid var(--line2)}
.faq h3{font-weight:600;font-size:1rem;margin:0 0 4px;font-family:var(--sans)}
.faq p{margin:0;color:var(--mut);font-size:.92rem;line-height:1.5;max-width:66ch}

/* directory list (per-state / per-profession, ledger grammar) */
.dir{columns:2 280px;column-gap:36px}
.dir a{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line2);break-inside:avoid}
.dir a:hover{text-decoration:none}
.dir a:hover .nm{text-decoration:underline}
.dir .nm{color:var(--brand);font-weight:600;font-size:.95rem;white-space:nowrap}
.dir .bd{color:var(--mut);font-size:.83rem;text-align:right;line-height:1.3}

/* monitor pricing */
.price{display:grid;grid-template-columns:1.2fr 1fr;gap:22px;align-items:stretch}
.price .plan{background:var(--surf);border:1px solid var(--line);border-radius:12px;padding:22px;display:flex;flex-direction:column}
.price .plan.lead{border-left:4px solid var(--brand)}
.price .amt{font-family:var(--serif);font-weight:600;font-size:2.1rem;letter-spacing:-.01em}
.price .amt span{font-family:var(--sans);font-size:.95rem;color:var(--mut);font-weight:500}
.price ul{list-style:none;margin:14px 0 0;padding:0}
.price li{padding:8px 0 8px 24px;position:relative;font-size:.93rem;border-bottom:1px solid var(--line2)}
.price li:last-child{border-bottom:none}
.price li::before{content:"";position:absolute;left:2px;top:13px;width:11px;height:6px;border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(-45deg)}
.price .pin{margin-top:auto;padding-top:16px}
.montarget{margin:0 0 10px;font-size:.9rem;font-weight:600;color:var(--ink);background:var(--wash);border:1px solid var(--line2);border-radius:7px;padding:8px 11px}
.waitlist{display:flex;gap:10px;flex-wrap:wrap}
.waitlist input{font:inherit;flex:1;min-width:0;background:#fbfcfb;border:1px solid var(--line);border-radius:7px;padding:11px 12px}
.waitlist .msg{width:100%;font-size:.85rem;color:var(--brand);margin:0}

/* footer */
.site-foot{margin-top:calc(var(--gap) + 14px);border-top:1px solid var(--line);background:var(--surf)}
.site-foot .inner{max-width:var(--measure);margin:0 auto;padding:22px var(--pad) 30px;color:var(--mut);font-size:.86rem;line-height:1.6}
.site-foot .lead{color:var(--ink)}
.site-foot .links{margin-top:8px}
.site-foot .links a{color:var(--mut);margin-right:14px}
.site-foot .disc{margin-top:8px;font-style:italic}

.others{margin:0;font-size:.92rem;color:var(--mut)}
.others a{margin-right:6px}

@media(max-width:720px){
  :root{--pad:18px;--gap:22px}
  .nav .searchbox{display:none}
  .lookup.home{grid-template-columns:1fr 1fr}
  .lookup.home .btn{grid-column:1/-1}
  .lookup.state{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr;gap:0}
  .trust .t{border-bottom:1px solid var(--line2);padding:14px 0}
  .trust .t:last-child{border-bottom:none}
  .heads{grid-template-columns:1fr 1fr}
  .facts{grid-template-columns:1fr 1fr}
  .facts .c{border-bottom:1px solid var(--line2)}
  .facts .c:nth-last-child(-n+2){border-bottom:none}
  .verdict{flex-wrap:wrap}.verdict .vname{text-align:left}
  .factgrid,.price{grid-template-columns:1fr}
  .cta{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}