/* VetRight website. Colours and type follow the brand tokens in
   VetRight/vetright-brand (brand/tokens/tokens.css). The site uses the light
   palette only. */

@font-face{font-family:"Figtree";src:url("fonts/Figtree-Variable.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}

:root{
  color-scheme:light;
  --forest:#00574A;--pine:#0C2A25;--glacier:#7ADFE5;--paper:#F5F8F6;--white:#FFFFFF;
  --mist:#DCE5E1;--stone:#55655F;--grid:#1A6C5E;--soft:#D5ECE7;--body:#2B4640;
  --font:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1192px;--gutter:clamp(16px,4vw,48px);
  /* The dot grid: 3px dots on a 24px pitch. */
  --dots:radial-gradient(circle,var(--grid) 1.5px,transparent 1.9px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,p{margin:0}
img{display:block;max-width:100%}
a{text-underline-offset:3px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--pine);outline-offset:2px;box-shadow:0 0 0 5px var(--glacier);border-radius:4px}
.wrap{max-width:calc(var(--wrap) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter);width:100%}
.skip{position:absolute;left:-999px;top:8px;background:var(--white);color:var(--pine);padding:8px 14px;border-radius:6px;z-index:10}
.skip:focus{left:8px}

/* Forest areas: the whole of a one-screen page, and the header and footer of
   a document page. The grid is anchored to the right and bottom edges. */
.screen,.band{background:var(--dots) right bottom/24px 24px,var(--forest);color:var(--white)}
.screen a,.band a{color:var(--white)}
.screen a:hover,.band a:hover{color:var(--glacier)}
.top{padding-block:22px}
.brand{display:block;width:150px}
.brand img{width:100%;height:auto}
.end{padding-block:24px;font-size:.875rem;color:var(--soft)}
.end .wrap{display:flex;flex-wrap:wrap;gap:6px 28px}
h1{font-size:clamp(2.125rem,4.4vw,3.5rem);line-height:1.06;font-weight:600;letter-spacing:-.03em;text-wrap:balance}
@media (max-width:560px){.brand{width:122px}}

/* A one-screen page */
.screen{min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;position:relative;overflow:hidden}
.screen > *{position:relative;z-index:1}
.screen main{display:grid;align-content:center;padding-block:clamp(32px,6vh,72px)}
.screen main .wrap{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,10fr)}
.screen main .wrap > *{grid-column:1}
.screen p{font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.5;max-width:44ch}
.screen h1 + p{color:var(--soft);margin-top:26px}
.screen p + p{margin-top:18px}
@media (max-width:940px){.screen main .wrap{grid-template-columns:minmax(0,1fr)}}

/* The form on the home page */
[hidden]{display:none !important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.notify{margin-top:34px;max-width:34rem}
.notify > p:first-child{color:var(--white)}
.notify .fields{display:flex;gap:10px;margin-top:14px}
.notify input[type=email]{flex:1;min-width:0;font:inherit;padding:12px 14px;border:1px solid var(--white);border-radius:6px;background:var(--white);color:var(--pine)}
.notify input::placeholder{color:var(--stone);opacity:1}
.notify button{font:inherit;font-weight:600;padding:12px 22px;border:1px solid var(--glacier);border-radius:6px;background:var(--glacier);color:var(--pine);cursor:pointer;white-space:nowrap}
.notify button:hover{background:var(--white);border-color:var(--white)}
.notify button:disabled{opacity:.6;cursor:default}
.notify .trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notify #notify-check{margin-top:12px}
.notify .status{margin-top:12px;font-size:1rem;font-weight:500;color:var(--white)}
.notify .status:empty{display:none}
.notify .small{margin-top:14px;font-size:.875rem;line-height:1.5;color:var(--soft);max-width:46ch}
.screen .done{margin-top:34px;color:var(--white)}
@media (max-width:480px){.notify .fields{flex-direction:column}}

/* The stage line on the home page. Its offsets are 12px past a multiple of
   24px, so its points land on dots of the grid. */
.screen .line{position:absolute;z-index:0;width:528px;height:336px;max-width:none;bottom:84px;right:-84px}
@supports (right:round(down,1px,1px)){
  .screen .line{right:calc(round(down,max(0px,(100vw - 1288px)/2),24px) - 84px)}
}
@media (max-width:940px){.screen .line{display:none}}

/* A document page */
.doc{background:var(--paper);color:var(--pine)}
.doc .head{padding-block:clamp(24px,4vw,56px) clamp(40px,6vw,80px)}
.doc .head p{font-size:clamp(1.0625rem,1.5vw,1.25rem);color:var(--soft);margin-top:18px;max-width:48ch}
.doc main{padding-block:clamp(40px,6vw,80px);display:grid;gap:16px}
.doc main > *{max-width:64ch}
.doc main a{color:var(--forest)}
.doc h2{font-size:1.375rem;line-height:1.25;font-weight:600;letter-spacing:-.01em;margin-top:22px}
.doc h2:first-child{margin-top:0}
.doc main p{color:var(--body)}

@media print{.screen,.band{-webkit-print-color-adjust:exact;print-color-adjust:exact}}