/* ============================================================
   whipworms.com — veterinary field-guide design system
   Palette: spruce ink, sage paper, clinical teal, marigold,
   crimson reserved strictly for clinical alert cues.
   Type: Bricolage Grotesque (display) · Newsreader (body serif)
         · IBM Plex Mono (specimen labels & data)
   ============================================================ */

:root{
  --spruce:#143A34;     /* ink / structure / footer */
  --spruce-2:#0E2E29;   /* deeper */
  --paper:#EBEFEA;      /* page background (cool sage, not cream) */
  --surface:#FFFFFF;    /* cards */
  --surface-2:#F4F7F3;  /* alt rows */
  --teal:#0E7C6B;       /* brand / action (accents, links) */
  --btn-teal:#0A5F51;   /* darker teal for white-on-teal text (AA contrast) */
  --teal-ink:#0A5C50;   /* hover / links on light */
  --teal-soft:#DCEDE8;  /* tints */
  --marigold:#E2A33C;   /* accent: numbers, highlights, lash tip */
  --marigold-deep:#B97E1F;
  --crimson:#B23A48;    /* CLINICAL ALERT ONLY (blood / urgent) */
  --line:#D5DDD6;       /* hairline */
  --line-strong:#C2CCC2;
  --muted:#46544E;      /* secondary text (darkened for contrast) */
  --ink-soft:#2B463F;

  --maxw:1120px;
  --gut:clamp(20px,5vw,56px);
  --radius:14px;
  --radius-lg:22px;
  --shadow:0 1px 2px rgba(20,58,52,.05),0 18px 40px -28px rgba(20,58,52,.45);
  --shadow-lg:0 30px 70px -40px rgba(20,58,52,.55);

  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--spruce);
  font-family:var(--serif);font-size:1.075rem;line-height:1.62;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;display:block}
a{color:var(--teal-ink);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--teal)}
:focus-visible{outline:3px solid var(--marigold);outline-offset:2px;border-radius:4px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px;top:auto}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--spruce);color:#fff;padding:10px 16px;border-radius:8px}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.04;letter-spacing:-.02em;color:var(--spruce);margin:0 0 .4em}
h1{font-size:clamp(2.3rem,6vw,4.1rem);font-weight:800;letter-spacing:-.035em}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.55rem);letter-spacing:-.015em}
h4{font-size:1.05rem;letter-spacing:0}
p{margin:0 0 1.05em}
.lead{font-size:clamp(1.15rem,1.8vw,1.42rem);line-height:1.5;color:var(--ink-soft)}
strong{font-weight:600}
.serif-em{font-style:italic}

.eyebrow{
  font-family:var(--mono);font-size:.72rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--teal-ink);
  display:inline-flex;align-items:center;gap:.6em;margin:0 0 1em
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--marigold)}
.eyebrow--plain::before{display:none}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--btn-teal);--fg:#fff;
  font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:-.01em;
  display:inline-flex;align-items:center;gap:.5em;justify-content:center;
  padding:.85em 1.35em;border-radius:999px;border:1.5px solid transparent;
  background:var(--bg);color:var(--fg);cursor:pointer;text-decoration:none;
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease;
  box-shadow:0 10px 24px -14px rgba(14,124,107,.9)
}
.btn:hover{transform:translateY(-2px);color:#fff;box-shadow:0 16px 30px -14px rgba(14,124,107,.95)}
.btn:active{transform:translateY(0)}
.btn .arrow{transition:transform .2s ease}
.btn:hover .arrow{transform:translateX(3px)}
.btn--gold{--bg:var(--marigold);--fg:#3a2706;box-shadow:0 10px 24px -14px rgba(226,163,60,.95)}
.btn--gold:hover{color:#3a2706}
.btn--ghost{--bg:transparent;--fg:var(--spruce);border-color:var(--line-strong);box-shadow:none}
.btn--ghost:hover{--bg:var(--surface);color:var(--spruce);border-color:var(--teal);box-shadow:var(--shadow)}
.btn--lg{padding:1.05em 1.7em;font-size:1.08rem}
.btn--block{display:flex;width:100%}

/* ---------- Header / nav ---------- */
.nav{position:sticky;top:0;z-index:80;background:rgba(235,239,234,.82);
  backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line)}
.nav__bar{display:flex;align-items:center;gap:1.5rem;height:72px}
.brand{display:flex;align-items:center;gap:.62rem;text-decoration:none;color:var(--spruce)}
.brand:hover{color:var(--spruce)}
.brand__mark{width:38px;height:38px;flex:none}
.brand__name{font-family:var(--display);font-weight:800;font-size:1.32rem;letter-spacing:-.04em;line-height:1}
.brand__name b{color:var(--marigold-deep);font-weight:800}
.brand__tag{display:block;font-family:var(--mono);font-size:.625rem;font-weight:600;letter-spacing:.16em;color:var(--teal-ink);text-transform:uppercase;margin-top:3px}
.nav__links{display:flex;align-items:center;gap:.3rem;margin-left:auto}
.nav__links a{font-family:var(--display);font-weight:500;font-size:.96rem;color:var(--ink-soft);
  text-decoration:none;padding:.5em .7em;border-radius:8px}
.nav__links a:hover{color:var(--spruce);background:rgba(255,255,255,.6)}
.nav__links a[aria-current="page"]{color:var(--teal-ink)}
.nav__cta{margin-left:.5rem}
.nav__links .btn{font-size:.92rem;padding:.62em 1.1em}
.nav__toggle{display:none;margin-left:auto;background:none;border:1.5px solid var(--line-strong);
  border-radius:10px;width:46px;height:42px;cursor:pointer;align-items:center;justify-content:center}
.nav__toggle span,.nav__toggle span::before,.nav__toggle span::after{
  content:"";display:block;width:20px;height:2px;background:var(--spruce);position:relative;transition:.2s}
.nav__toggle span::before{position:absolute;top:-6px}
.nav__toggle span::after{position:absolute;top:6px}

@media (max-width:860px){
  .nav__toggle{display:inline-flex}
  .nav__links{position:absolute;left:0;right:0;top:72px;flex-direction:column;align-items:stretch;
    gap:.1rem;background:var(--paper);border-bottom:1px solid var(--line);padding:.6rem var(--gut) 1.1rem;
    margin-left:0;display:none}
  .nav__links.open{display:flex}
  .nav__links a{padding:.8em .6em;border-bottom:1px solid var(--line)}
  .nav__cta{margin:.5rem 0 0;justify-content:center}
  .nav__links .btn{font-size:.96rem;padding:.7em 1em}
}

/* ---------- Section rhythm ---------- */
.section{padding-block:clamp(56px,9vw,108px)}
.section--tight{padding-block:clamp(40px,6vw,68px)}
.section--ink{background:var(--spruce);color:#EAF2EE}
.section--ink h2,.section--ink h3,.section--ink h4{color:#fff}
.section--ink .lead,.section--ink p{color:#D3E5DF}
.section--ink .eyebrow{color:var(--marigold)}
.section--paper-2{background:var(--surface-2)}
.section__head{max-width:62ch;margin-bottom:clamp(28px,4vw,52px)}
.section__head.center{margin-inline:auto;text-align:center}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding-block:clamp(48px,7vw,88px) clamp(40px,6vw,72px)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,64px);align-items:center}
.hero__kicker{display:inline-flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:1.4rem}
.tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  background:var(--teal-soft);color:var(--teal-ink);padding:.45em .8em;border-radius:999px;font-weight:600}
.tag--latin{background:transparent;border:1px solid var(--line-strong);color:var(--muted);font-style:normal}
.hero h1{margin-bottom:.5rem}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero__sub{font-size:clamp(1.1rem,1.7vw,1.34rem);color:var(--ink-soft);max-width:46ch;margin-bottom:1.8rem}
.hero__cta{display:flex;gap:.8rem;flex-wrap:wrap}
.hero__meta{margin-top:1.7rem;font-family:var(--mono);font-size:.82rem;color:var(--muted);letter-spacing:.02em;line-height:1.7}
.hero__meta b{color:var(--teal-ink);font-weight:600}

/* specimen card (signature) */
.specimen{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:26px 26px 20px;box-shadow:var(--shadow-lg)}
.specimen::before{content:"";position:absolute;inset:10px;border:1px solid var(--line);border-radius:14px;pointer-events:none;
  background-image:radial-gradient(var(--line) .6px,transparent .6px);background-size:13px 13px;opacity:.5}
.specimen__label{position:relative;display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.specimen__label b{color:var(--teal-ink)}
.specimen__art{position:relative;color:var(--spruce);padding:18px 6px 6px}
.specimen__art svg{width:100%;height:auto}
.specimen__ann{position:relative;display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:.72rem;color:var(--muted);margin-top:8px;letter-spacing:.06em}
.specimen__ruler{position:relative;height:14px;margin-top:10px;border-top:1px solid var(--line-strong);
  background-image:repeating-linear-gradient(90deg,var(--line-strong) 0 1px,transparent 1px 24px);
  background-position:top;background-size:24px 7px;background-repeat:repeat-x}

/* ---------- Generic cards / grids ---------- */
.grid{display:grid;gap:clamp(16px,2.4vw,26px)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:880px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(20px,2.6vw,28px);box-shadow:var(--shadow);height:100%}
.card h3{margin-bottom:.45em}
.card p:last-child{margin-bottom:0}
.card__num{font-family:var(--mono);font-size:.78rem;font-weight:600;color:var(--marigold-deep);
  letter-spacing:.1em;display:block;margin-bottom:.7em}
.card--symptom{display:flex;gap:1rem;align-items:flex-start}
.card--symptom .ico{flex:none;width:46px;height:46px;border-radius:12px;background:var(--teal-soft);
  display:grid;place-items:center;color:var(--teal-ink)}
.card--symptom .ico svg{width:24px;height:24px}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--crimson);margin-right:.5em;vertical-align:middle}

/* quick-answer / featured snippet block */
.answer{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--teal);
  border-radius:12px;padding:clamp(20px,3vw,30px)}
.answer p{font-size:1.12rem}
.answer p:last-child{margin-bottom:0}

/* ---------- Calculator ---------- */
.calc{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);overflow:hidden}
.calc__head{background:var(--spruce);color:#fff;padding:clamp(20px,3vw,28px) clamp(22px,3.2vw,34px)}
.calc__head h3{color:#fff;margin-bottom:.25em;font-size:clamp(1.3rem,2.2vw,1.7rem)}
.calc__head p{margin:0;color:#C8DDD6;font-size:.96rem}
.calc__body{display:grid;grid-template-columns:1fr 1fr;gap:0}
@media (max-width:760px){.calc__body{grid-template-columns:1fr}}
.calc__inputs{padding:clamp(22px,3.2vw,34px);border-right:1px solid var(--line)}
@media (max-width:760px){.calc__inputs{border-right:0;border-bottom:1px solid var(--line)}}
.calc__out{padding:clamp(22px,3.2vw,34px);background:var(--surface-2)}
.field{margin-bottom:1.3rem}
.field>label{display:block;font-family:var(--display);font-weight:600;font-size:.95rem;margin-bottom:.5em;color:var(--spruce)}
.seg{display:inline-flex;background:var(--paper);border:1px solid var(--line-strong);border-radius:999px;padding:3px}
.seg button{font-family:var(--display);font-weight:600;font-size:.9rem;border:0;background:none;color:var(--muted);
  padding:.5em 1.05em;border-radius:999px;cursor:pointer;transition:.15s}
.seg button[aria-pressed="true"]{background:var(--btn-teal);color:#fff}
.weight-row{display:flex;gap:.6rem;align-items:stretch}
.weight-row input{flex:1;font-family:var(--mono);font-size:1.25rem;font-weight:500;color:var(--spruce);
  border:1.5px solid var(--line-strong);border-radius:12px;padding:.6em .8em;background:#fff;min-width:0}
.weight-row input:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px var(--teal-soft)}
.hint{font-family:var(--serif);font-size:.86rem;color:var(--muted);margin:.55em 0 0}

.result{font-family:var(--mono)}
.result__label{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:.4em}
.result__big{font-size:clamp(2rem,4.4vw,2.9rem);font-weight:600;color:var(--teal-ink);line-height:1.05;letter-spacing:-.02em}
.result__big span{font-size:1rem;color:var(--muted);font-weight:500;letter-spacing:0}
.result__row{display:flex;justify-content:space-between;gap:1rem;padding:.7em 0;border-bottom:1px dashed var(--line-strong);font-size:.92rem}
.result__row:last-of-type{border-bottom:0}
.result__row .k{color:var(--muted)}
.result__row .v{color:var(--spruce);font-weight:500;text-align:right}
.result__schedule{font-family:var(--serif);font-size:.92rem;background:var(--teal-soft);border-radius:10px;padding:.9em 1.1em;margin-top:1rem;color:var(--ink-soft)}
.result.is-empty .result__big{color:var(--line-strong)}

.calc__warn{display:flex;gap:.7rem;align-items:flex-start;background:#FBEEF0;border:1px solid #ECC9CF;
  border-radius:12px;padding:.95em 1.1em;margin-top:1.1rem;font-size:.9rem;line-height:1.5;color:#7d2230}
.calc__warn svg{flex:none;width:20px;height:20px;color:var(--crimson);margin-top:2px}
.calc__warn strong{color:#7d2230}
.calc__species-warn{display:none;background:#FBEEF0;border:1px solid #ECC9CF;border-radius:10px;
  padding:.8em 1em;margin-top:.8rem;font-size:.88rem;color:#7d2230}
.calc__species-warn.show{display:block}

/* disclaimer note */
.note{display:flex;gap:.85rem;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:1em 1.2em;font-size:.92rem;color:var(--muted);line-height:1.55}
.note svg{flex:none;width:22px;height:22px;color:var(--teal);margin-top:1px}
.note--inline{margin-top:1.4rem}

/* ---------- Lifecycle ---------- */
.cycle{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:step}
@media (max-width:820px){.cycle{grid-template-columns:repeat(2,1fr);gap:18px}}
@media (max-width:480px){.cycle{grid-template-columns:1fr}}
.cycle__step{position:relative;padding:0 clamp(10px,1.6vw,20px)}
.cycle__step:not(:last-child)::after{content:"→";position:absolute;right:-8px;top:62px;color:var(--marigold);
  font-family:var(--mono);font-size:1.3rem}
@media (max-width:820px){.cycle__step::after{display:none}}
.cycle__icon{width:84px;height:84px;border-radius:50%;background:var(--surface);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--teal);margin-bottom:1rem;box-shadow:var(--shadow)}
.cycle__icon svg{width:42px;height:42px}
.cycle__n{counter-increment:step;font-family:var(--mono);font-size:.72rem;color:var(--marigold-deep);letter-spacing:.14em;font-weight:600}
.cycle__n::before{content:"0" counter(step) " / "}
.cycle h4{margin:.35em 0 .35em;font-family:var(--display);font-size:1.1rem}
.cycle p{font-size:.94rem;color:var(--ink-soft);margin:0}
.section--ink .cycle__icon{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#9FD7CA}
.section--ink .cycle p{color:#CDE1DA}
.section--ink .cycle__n{color:#F2C982}

/* ---------- Treatment regimen / steps ---------- */
.regimen{display:grid;gap:14px}
.regimen__item{display:flex;gap:1.1rem;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:1.1em 1.3em}
.regimen__when{flex:none;font-family:var(--mono);font-size:.74rem;font-weight:600;color:#fff;background:var(--btn-teal);
  padding:.5em .7em;border-radius:8px;letter-spacing:.04em;min-width:96px;text-align:center}
.regimen__item p{margin:0;font-size:.96rem}
.regimen__item h4{margin:0 0 .2em}

/* checklist */
.check{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.check li{display:flex;gap:.7rem;align-items:flex-start;font-size:1rem}
.check svg{flex:none;width:22px;height:22px;color:var(--teal);margin-top:3px}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center;
  padding:1.15em 0;font-family:var(--display);font-weight:600;font-size:1.12rem;color:var(--spruce)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--teal-ink)}
.faq summary .pm{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line-strong);
  display:grid;place-items:center;color:var(--teal);transition:.2s;position:relative}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:currentColor;border-radius:2px}
.faq summary .pm::before{width:12px;height:2px}
.faq summary .pm::after{width:2px;height:12px;transition:transform .2s}
.faq details[open] summary .pm{background:var(--teal);color:#fff;border-color:var(--teal)}
.faq details[open] summary .pm::after{transform:scaleY(0)}
.faq__a{padding:0 0 1.3em;color:var(--ink-soft);max-width:74ch}
.faq__a p:last-child{margin-bottom:0}

/* ---------- CTA band (Vetr handoff) ---------- */
.cta{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--spruce),var(--spruce-2));
  color:#E8F0EC;border-radius:var(--radius-lg);padding:clamp(34px,5vw,60px)}
.cta::after{content:"";position:absolute;right:-60px;bottom:-90px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(226,163,60,.22),transparent 65%)}
.cta__grid{position:relative;display:grid;grid-template-columns:1.3fr .7fr;gap:2rem;align-items:center}
@media (max-width:760px){.cta__grid{grid-template-columns:1fr}}
.cta h2{color:#fff;margin-bottom:.4em}
.cta p{color:#C8DDD6;margin-bottom:0}
.cta__actions{display:flex;flex-direction:column;gap:.7rem}
.partner{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--marigold);margin-bottom:1rem}
.partner::before{content:"";width:22px;height:2px;background:var(--marigold)}
.appstores{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.4rem}
.appstores a{font-family:var(--mono);font-size:.8rem;color:#C8DDD6;border:1px solid rgba(255,255,255,.28);
  border-radius:8px;padding:.5em .8em;text-decoration:none}
.appstores a:hover{border-color:var(--marigold);color:#fff}

/* trust strip */
.trust{background:var(--surface);border-block:1px solid var(--line)}
.trust__row{display:flex;align-items:center;gap:clamp(16px,3vw,40px);flex-wrap:wrap;justify-content:center;
  padding-block:18px;font-family:var(--mono);font-size:.78rem;letter-spacing:.07em;color:var(--muted);text-transform:uppercase}
.trust__row b{color:var(--teal-ink);font-weight:600}
.trust__row span{display:inline-flex;align-items:center;gap:.5rem}

/* prose blocks for article pages */
.prose{max-width:72ch}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.3em}
.prose ul,.prose ol{padding-left:1.2em;margin:0 0 1.1em}
.prose li{margin-bottom:.4em}
.prose blockquote{margin:1.4em 0;padding:.4em 0 .4em 1.2em;border-left:3px solid var(--marigold);
  font-style:italic;color:var(--ink-soft)}

/* breadcrumb */
.crumb{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:var(--muted);padding-top:1.4rem}
.crumb a{color:var(--teal-ink);text-decoration:none}
.crumb a:hover{text-decoration:underline}

/* sources */
.sources{font-size:.9rem;color:var(--muted)}
.sources ol{padding-left:1.3em;margin:.6em 0 0}
.sources li{margin-bottom:.4em}

/* page hero (sub pages) */
.phero{padding-block:clamp(28px,4vw,46px) clamp(20px,3vw,30px)}
.phero h1{font-size:clamp(2rem,5vw,3.3rem);margin-bottom:.3em}
.phero .lead{max-width:60ch}

/* ---------- Footer ---------- */
.footer{background:var(--spruce);color:#BCD4CD;padding-block:clamp(44px,6vw,72px) 28px}
.footer a{color:#D5E5DF;text-decoration:none}
.footer a:hover{color:#fff}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(20px,3vw,40px)}
@media (max-width:820px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.footer__grid{grid-template-columns:1fr}}
.footer__brand .brand__name{color:#fff}
.footer__blurb{font-size:.92rem;max-width:34ch;margin-top:1rem;color:#A8C5BD}
.footer h4{color:#fff;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:1em}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;font-size:.94rem}
.footer__legal{margin-top:clamp(30px,4vw,48px);padding-top:22px;border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:#9FBCB4}
.footer__disclaim{font-size:.82rem;color:#9CB9B1;line-height:1.6;margin-top:1.2rem;max-width:80ch}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* hero worm draw-on */
.specimen__art path{}
@media (prefers-reduced-motion:no-preference){
  .draw{stroke:var(--spruce);stroke-width:1;fill:var(--spruce);
    stroke-dasharray:2600;stroke-dashoffset:2600;animation:draw 2.2s ease forwards .25s}
}
@keyframes draw{to{stroke-dashoffset:0}}

.utility-row{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;margin-top:1.6rem}

/* ============================================================
   v2 additions — Guides hub, how-to steps, illustrations, polish
   ============================================================ */

/* spot illustrations (inline SVG, framed) */
.illus{position:relative;border:1px solid var(--line);background:var(--surface-2);border-radius:var(--radius-lg);
  padding:clamp(20px,4vw,38px);display:grid;place-items:center;box-shadow:var(--shadow)}
.illus svg{width:100%;max-width:440px;height:auto;color:var(--spruce)}
.illus figcaption{margin-top:1rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);text-align:center}
.illus--bare{border:0;background:none;box-shadow:none;padding:0}
.prose .illus{margin:1.8em 0}

/* guides hub cards */
.guidegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,26px)}
@media (max-width:880px){.guidegrid{grid-template-columns:1fr}}
.gcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:transform .18s ease,box-shadow .2s ease}
.gcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.gcard__art{background:linear-gradient(160deg,var(--teal-soft),#fff);border-bottom:1px solid var(--line);
  padding:26px 26px 18px;display:grid;place-items:center}
.gcard__art svg{width:118px;height:118px;color:var(--spruce)}
.gcard__body{padding:clamp(20px,2.4vw,26px);display:flex;flex-direction:column;flex:1}
.gcard__tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--teal-ink);font-weight:600;margin-bottom:.7em}
.gcard h3{margin-bottom:.4em}
.gcard p{font-size:.96rem;color:var(--ink-soft);margin-bottom:1.1em}
.gcard .gcard__go{margin-top:auto;font-family:var(--display);font-weight:600;color:var(--teal-ink);
  text-decoration:none;display:inline-flex;align-items:center;gap:.4em}
.gcard:hover .gcard__go{color:var(--teal)}
.gcard__link{text-decoration:none;color:inherit;display:flex;flex-direction:column;flex:1}

/* numbered how-to steps */
.steps{list-style:none;counter-reset:howto;margin:1.6em 0;padding:0;display:grid;gap:1.1rem}
.steps>li{counter-increment:howto;position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:1.2em 1.3em 1.2em 4.2em;box-shadow:var(--shadow)}
.steps>li::before{content:counter(howto);position:absolute;left:1rem;top:1.05em;width:2.1em;height:2.1em;
  display:grid;place-items:center;border-radius:50%;background:var(--spruce);color:#fff;
  font-family:var(--display);font-weight:700;font-size:1rem}
.steps>li h3{margin:0 0 .35em;font-size:1.18rem}
.steps>li p:last-child{margin-bottom:0}
.steps>li p{font-size:.98rem}

/* tip / takeaway callout */
.tip{display:flex;gap:.85rem;align-items:flex-start;background:var(--teal-soft);border:1px solid #BFE0D8;
  border-radius:12px;padding:1em 1.2em;margin:1.5em 0;color:var(--ink-soft);font-size:.96rem;line-height:1.55}
.tip svg{flex:none;width:22px;height:22px;color:var(--teal-ink);margin-top:1px}
.tip strong{color:var(--spruce)}

/* key-facts strip on guide pages */
.keyfacts{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.6em 0}
@media (max-width:620px){.keyfacts{grid-template-columns:1fr}}
.keyfacts div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1em 1.1em}
.keyfacts .n{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--teal-ink);letter-spacing:-.02em}
.keyfacts .l{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;margin-top:.2em}

/* polish: smoother card + link affordances */
.card{transition:transform .18s ease,box-shadow .2s ease}
.card--symptom:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.answer p{line-height:1.6}
.nav__links a[aria-current="page"]{color:var(--teal-ink);font-weight:600}

/* fix: nav CTA button text was being overridden to dark by `.nav__links a` */
.nav__links a.nav__cta,
.nav__links a.nav__cta:hover{color:#fff}
.nav__links a.nav__cta .arrow{color:#fff}