/* ============================================================
   DocSearch Health — clinical clarity, with warmth
   Palette derived for THIS brief (medical trust, not generic corp blue):
     --ink     #14201d  deep near-black green-black (text, authority)
     --teal    #0d6e63  verified medical teal (trust, primary)
     --teal-dk #094f47  hover/depth
     --sage    #e8f0ec  soft clinical surface
     --gold    #c08a3e  warmth accent, used with restraint (the human touch)
     --paper   #fbfcfb  deep clinical white (bg)
     --line    #dde6e1  hairline
   Type: Newsreader (display, editorial authority) · Inter (body) · IBM Plex Mono (utility/eyebrow)
   ============================================================ */

:root{
  --ink:#14201d; --ink-soft:#3f524c; --teal:#0d6e63; --teal-dk:#094f47;
  --sage:#e8f0ec; --sage-dk:#d6e3dc; --gold:#c08a3e; --gold-dk:#a06f2c;
  --paper:#fbfcfb; --card:#ffffff; --line:#dde6e1; --risk:#a5453b;
  --display:"Newsreader",Georgia,serif; --body:"Inter",system-ui,sans-serif; --mono:"IBM Plex Mono",monospace;
  --wrap:1120px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--body); color:var(--ink); background:var(--paper);
  font-size:17px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 26px}
a{color:inherit; text-decoration:none}
em{font-style:italic}

.skip{position:absolute; left:-999px; top:0; background:var(--teal); color:#fff; padding:10px 16px; z-index:100; border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ---------- Type ---------- */
h1,h2,h3{font-family:var(--display); font-weight:500; line-height:1.12; letter-spacing:-.015em; color:var(--ink)}
.eyebrow{font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--teal)}

/* ---------- Header ---------- */
.site-head{position:sticky; top:0; z-index:50; background:rgba(251,252,251,.85); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line)}
.head-inner{display:flex; align-items:center; justify-content:space-between; height:70px}
.brand{display:flex; align-items:center; gap:11px; color:var(--teal)}
.brand-mark{display:grid; place-items:center; color:var(--teal)}
.brand-name{font-family:var(--display); font-size:23px; font-weight:600; color:var(--ink); letter-spacing:-.02em}
.brand-sub{color:var(--teal); font-weight:500}
.nav{display:flex; align-items:center; gap:30px}
.nav a{font-size:15px; font-weight:500; color:var(--ink-soft); transition:color .2s}
.nav a:hover{color:var(--teal)}
.nav-cta{background:var(--teal); color:#fff !important; padding:10px 18px; border-radius:9px; font-weight:600 !important}
.nav-cta:hover{background:var(--teal-dk)}

/* ---------- Buttons ---------- */
.btn-primary,.btn-ghost{display:inline-flex; align-items:center; justify-content:center; font-family:var(--body); font-weight:600; font-size:16px; padding:15px 28px; border-radius:11px; transition:.22s cubic-bezier(.2,.7,.3,1); cursor:pointer}
.btn-primary{background:var(--teal); color:#fff; box-shadow:0 1px 0 rgba(9,79,71,.4), 0 12px 28px -14px rgba(13,110,99,.6)}
.btn-primary:hover{background:var(--teal-dk); transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(13,110,99,.7)}
.btn-primary.lg{font-size:18px; padding:18px 38px}
.btn-primary.sm{font-size:15px; padding:12px 22px}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--teal); color:var(--teal)}

/* ---------- Hero ---------- */
.hero{padding:74px 0 64px; background:
  radial-gradient(1100px 420px at 78% -10%, var(--sage), transparent 70%),
  linear-gradient(180deg,#fff,var(--paper));}
.hero-inner{display:grid; grid-template-columns:1.32fr .88fr; gap:60px; align-items:center}
.hero-copy .eyebrow{margin-bottom:20px}
.hero h1{font-size:clamp(38px,5.2vw,62px); margin-bottom:24px}
.hero h1 em{color:var(--teal); font-style:italic}
.lede{font-size:20px; line-height:1.55; color:var(--ink-soft); max-width:36ch; margin-bottom:32px}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:22px}
.hero-foot{font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; color:var(--ink-soft)}

/* Signature: verification card */
.verify-card{background:var(--card); border:1px solid var(--line); border-radius:20px; padding:28px; box-shadow:0 30px 60px -34px rgba(20,32,29,.4); position:relative}
.verify-card::before{content:""; position:absolute; inset:0; border-radius:20px; padding:1px; background:linear-gradient(160deg,rgba(13,110,99,.35),transparent 45%); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none}
.verify-head{display:flex; align-items:center; gap:10px; font-family:var(--body); font-weight:700; font-size:15px; color:var(--teal); margin-bottom:18px}
.verify-badge{display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--teal); color:#fff}
.verify-list{list-style:none; display:flex; flex-direction:column; gap:11px}
.verify-list li{display:flex; gap:11px; font-size:15px; line-height:1.4; color:var(--ink)}
.verify-list .ck{color:var(--teal); font-weight:700; flex-shrink:0}
.verify-list.risk li{color:var(--ink-soft)}
.verify-list.risk .xk{color:var(--risk); font-weight:700; flex-shrink:0}
.verify-divider{display:flex; align-items:center; text-align:center; margin:18px 0; color:var(--ink-soft)}
.verify-divider::before,.verify-divider::after{content:""; flex:1; height:1px; background:var(--line)}
.verify-divider span{padding:0 14px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase}

/* ---------- Trust bar ---------- */
.trustbar{background:var(--ink); color:#fff}
.trustbar-inner{display:flex; justify-content:space-around; gap:24px; padding:30px 0; flex-wrap:wrap}
.tb-item{display:flex; align-items:baseline; gap:14px}
.tb-num{font-family:var(--display); font-size:42px; font-weight:600; color:#fff; line-height:1}
.tb-label{font-size:14.5px; color:#b9c9c3; max-width:20ch}

/* ---------- Sections ---------- */
.section{padding:80px 0}
.section-alt{background:linear-gradient(180deg,var(--sage),#fff)}
.section-head{max-width:680px; margin-bottom:46px}
.section-head .eyebrow{margin-bottom:16px}
.section h2{font-size:clamp(28px,3.6vw,40px); margin-bottom:18px}
.section-intro{font-size:18px; color:var(--ink-soft); line-height:1.6}

/* ---------- Ranking ---------- */
.rank{list-style:none; display:flex; flex-direction:column; gap:14px}
.rank-row{display:grid; grid-template-columns:96px 1fr; gap:24px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px 28px; transition:.25s}
.rank-row:hover{border-color:var(--sage-dk); transform:translateX(3px)}
.rank-pos{display:flex; flex-direction:column; align-items:center; gap:8px}
.rank-n{font-family:var(--display); font-size:46px; font-weight:600; color:var(--sage-dk); line-height:1}
.rank-tag{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-dk); background:rgba(192,138,62,.13); padding:4px 9px; border-radius:20px; font-weight:500}
.rank-body h3{font-size:23px; margin-bottom:8px; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.rank-host{font-family:var(--mono); font-size:13px; color:var(--teal); font-weight:400}
.rank-why{color:var(--ink-soft); font-size:16px; line-height:1.58; margin-bottom:14px}
.rank-points{list-style:none; display:flex; flex-wrap:wrap; gap:8px 20px; margin-bottom:16px}
.rank-points li{font-size:14.5px; color:var(--ink); padding-left:20px; position:relative}
.rank-points li::before{content:"✓"; position:absolute; left:0; color:var(--teal); font-weight:700}
.rank-cta{font-weight:600; color:var(--teal); font-size:16px; transition:.2s}
.rank-cta:hover{color:var(--teal-dk); padding-left:4px}

/* featured row */
.rank-row.featured{grid-template-columns:96px 1fr; background:linear-gradient(135deg,#fff,var(--sage)); border:1.5px solid var(--teal); box-shadow:0 24px 50px -30px rgba(13,110,99,.55); position:relative; overflow:hidden}
.rank-row.featured::after{content:""; position:absolute; top:0; left:0; width:4px; height:100%; background:linear-gradient(var(--teal),var(--gold))}
.rank-row.featured .rank-n{color:var(--teal)}
.compare-note{margin-top:22px; font-family:var(--mono); font-size:12px; color:var(--ink-soft); letter-spacing:.02em}

/* ---------- Vet questions ---------- */
.qgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.qcard{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:28px; transition:.25s}
.qcard:hover{transform:translateY(-4px); box-shadow:0 24px 44px -28px rgba(20,32,29,.4); border-color:var(--sage-dk)}
.q-n{font-family:var(--mono); font-size:13px; color:var(--teal); font-weight:500; letter-spacing:.06em}
.qcard h3{font-size:20px; margin:12px 0 10px; line-height:1.22}
.qcard p{font-size:15px; color:var(--ink-soft); line-height:1.55}
.qcard-cta{background:var(--ink); color:#fff; display:flex; flex-direction:column; gap:12px; justify-content:center}
.qcard-cta h3{color:#fff}
.qcard-cta p{color:#b9c9c3}
.qcard-cta .btn-primary{margin-top:6px; align-self:flex-start}

/* ---------- Articles ---------- */
.article-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.article-card{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:28px; transition:.25s}
.article-card:hover{transform:translateY(-4px); box-shadow:0 24px 44px -28px rgba(20,32,29,.4); border-color:var(--teal)}
.ac-kicker{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-dk)}
.article-card h3{font-size:21px; margin:12px 0 10px; line-height:1.22}
.article-card p{font-size:15px; color:var(--ink-soft); line-height:1.55; flex:1; margin-bottom:16px}
.ac-read{font-weight:600; color:var(--teal); font-size:15px}

/* ---------- Final CTA ---------- */
.finalcta{background:
  radial-gradient(800px 300px at 50% 120%, rgba(13,110,99,.25), transparent 70%),
  var(--ink); color:#fff; padding:78px 0; text-align:center}
.finalcta h2{color:#fff; font-size:clamp(28px,3.6vw,42px); margin-bottom:14px}
.finalcta-inner p{font-size:18px; color:#c3d2cc; max-width:48ch; margin:0 auto 28px}

/* ---------- Footer ---------- */
.site-foot{background:#0c1614; color:#9fb2ab; padding:54px 0 30px}
.foot-inner{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.08)}
.foot-brand .brand-name{color:#fff; font-size:22px}
.foot-brand p{margin-top:10px; font-size:14.5px; max-width:38ch; line-height:1.55}
.foot-links{display:flex; flex-direction:column; gap:10px}
.foot-links a{font-size:14.5px; color:#9fb2ab; transition:.2s}
.foot-links a:hover{color:#fff}
.foot-fine{padding-top:24px; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap}
.foot-fine p{font-size:12.5px; line-height:1.6; max-width:78ch; color:#7f938c}
.foot-copy{white-space:nowrap}

/* ---------- Article page ---------- */
.article-main{padding:54px 0 70px}
.article-wrap{max-width:760px; margin:0 auto; padding:0 26px}
.article-head{margin-bottom:36px; padding-bottom:28px; border-bottom:1px solid var(--line)}
.article-head .ac-kicker{margin-bottom:14px; display:block}
.article-head h1{font-size:clamp(32px,4.4vw,48px); line-height:1.1; margin-bottom:16px}
.article-head .sub{font-size:19px; color:var(--ink-soft); line-height:1.5}
.article-meta{margin-top:18px; font-family:var(--mono); font-size:12.5px; color:var(--ink-soft); letter-spacing:.03em}
.prose{font-size:18px; line-height:1.72; color:var(--ink)}
.prose h2{font-size:28px; margin:40px 0 14px}
.prose h3{font-size:21px; margin:30px 0 10px}
.prose p{margin:16px 0}
.prose ul,.prose ol{margin:16px 0 16px 24px}
.prose li{margin:8px 0}
.prose strong{font-weight:650}
.prose a{color:var(--teal); font-weight:550; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px}
.prose a:hover{color:var(--teal-dk)}
.callout{background:var(--sage); border-left:4px solid var(--teal); border-radius:0 12px 12px 0; padding:22px 26px; margin:28px 0}
.callout p{margin:0; font-size:16.5px}
.cta-inline{background:var(--card); border:1.5px solid var(--teal); border-radius:16px; padding:28px; margin:36px 0; text-align:center}
.cta-inline h3{font-size:23px; margin-bottom:10px}
.cta-inline p{font-size:16px; color:var(--ink-soft); margin-bottom:18px}
.article-disclaimer{margin-top:40px; padding-top:24px; border-top:1px solid var(--line); font-family:var(--mono); font-size:12px; color:var(--ink-soft); line-height:1.6}
.back-home{display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--teal); margin-bottom:28px; font-size:15px}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr; gap:42px}
  .qgrid,.article-grid{grid-template-columns:1fr 1fr}
  .nav{gap:18px}
  .nav a:not(.nav-cta){display:none}
}
@media(max-width:620px){
  body{font-size:16px}
  .qgrid,.article-grid{grid-template-columns:1fr}
  .rank-row{grid-template-columns:56px 1fr; gap:16px; padding:22px}
  .rank-n{font-size:34px}
  .trustbar-inner{gap:18px; flex-direction:column; align-items:flex-start}
  .foot-fine{flex-direction:column; gap:10px}
  .hero{padding:48px 0 44px}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none !important; scroll-behavior:auto !important}
}