/* ============================================================
   Vetdost - shared foundations

   The fonts, the reset and the two layout helpers that both the
   product site and the practice website need. Nothing else.

   This file exists because the two sites were fighting. The
   clinic stylesheet defines .band, .stat, .stats, .faq, .lede
   and .chips for its own purposes, and the product site uses
   those same names for entirely different components. Loading
   both meant rules like

       .band p { color:#C0D6CA; font-size:17.5px }

   were silently overriding the product site, which is how the
   FAQ answers ended up as pale green text on a white background.

   So the product site loads this plus saas.css, and never loads
   vetdost.css. The practice website keeps vetdost.css exactly as
   it was. Neither can reach into the other again.
   ============================================================ */

/* ------------------------------------------------------------
   Fonts, self hosted, no CDN
   ------------------------------------------------------------ */
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;font-weight:700 800;font-stretch:100%;font-display:swap;
  src:url('../fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;font-weight:700 800;font-stretch:100%;font-display:swap;
  src:url('../fonts/bricolage-grotesque-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* Geist and Geist Mono, the cutting mat faces. Variable, so one
   file covers every weight the design uses. Declaring a face costs
   nothing until something asks for it, so the pages still on
   saas.css never fetch these. mat.css points --display and --mono
   at them. */
@font-face{
  font-family:'Geist';
  font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/geist-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Geist';
  font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Geist Mono';
  font-style:normal;font-weight:400 500;font-display:swap;
  src:url('../fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Geist Mono';
  font-style:normal;font-weight:400 500;font-display:swap;
  src:url('../fonts/geist-mono-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ------------------------------------------------------------
   The four tokens saas.css needs from outside itself.
   Everything else it defines for its own use.
   ------------------------------------------------------------ */
:root{
  --display:'Bricolage Grotesque',system-ui,-apple-system,sans-serif;
  --body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --gut:clamp(20px,4vw,44px);
  --maxw:1200px;
}

/* ------------------------------------------------------------
   Reset
   ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{overflow-x:hidden;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
input,select,textarea{font:inherit;color:inherit}
p{text-wrap:pretty}
h1,h2,h3,h4{text-wrap:balance}
:focus-visible{outline:2px solid #12523A;outline-offset:3px;border-radius:3px}

.shell{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:400;
  background:#12523A;color:#fff;padding:14px 22px;font-weight:600;
}
.skip:focus{left:0}