/* Galo Health. Phone first. Gloock for display, Kumbh Sans for everything else. */
@font-face{font-family:Gloock;src:url(/assets/fonts/gloock-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Kumbh Sans";src:url(/assets/fonts/kumbh-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Kumbh Sans";src:url(/assets/fonts/kumbh-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Kumbh Sans";src:url(/assets/fonts/kumbh-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --teal:#164748;
  --sage:#869F74;
  --gold:#C3A05C;
  --paper:#F6F6F6;
  --white:#fff;
  --placeholder:#4d6d6e;
  --fault:#8C3A21; /* 7:1 on paper. Used only for error text and the error border. */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--teal);font:400 1.0625rem/1.5 "Kumbh Sans",sans-serif}
img,svg{display:block;max-width:100%}
h1,h2,p{margin:0}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0}
input,button{font:inherit;color:inherit}
[hidden]{display:none!important}

/* The plate bleeds off the top and right; the wave cuts in from the left. */
.plate{position:relative;height:min(112vw,800px);overflow:hidden}
.photo{width:100%;height:100%;object-fit:cover;object-position:62% 62%;animation:uncover 1.1s cubic-bezier(.2,.7,.2,1) both}
.wave{position:absolute;inset:-1px;width:calc(100% + 2px);height:calc(100% + 2px);max-width:none}
.wave-wide{display:none}
.logo-wrap{position:absolute;left:20px;top:20px;width:112px}
.hero{position:relative}
.logo{width:100%;height:auto}

.words{padding:6px 20px 0}
h1{font:400 clamp(4.6rem,25.5vw,9rem)/.88 Gloock,serif;letter-spacing:-.012em;margin-left:-3px}
h1 span{display:block}
.tag{font-weight:500;font-size:1.25rem;margin-top:1.05rem}
.dot{color:#7a5f28;padding:0 .2em}
.intro{margin-top:1rem;max-width:36em}

/* The sage field and white line drawing, as on the client's graphic. */
.below{margin-top:2.25rem;position:relative}
.field-band{position:relative;background:var(--sage);height:112px;overflow:hidden}
.edge{position:absolute;left:0;top:-1px;width:100%;height:46px}
.sprig{position:absolute;right:-6px;top:-44px;width:150px;height:auto;transform:rotate(-74deg) scaleX(-1)}
.sheet{padding:2rem 20px 3rem;background:var(--paper)}

/* Form */
legend,.lead{display:block;font-size:1.125rem;font-weight:600;line-height:1.35;margin-bottom:.55rem}
.req{font-weight:600}
.field label{display:block;font-size:.9375rem;font-weight:500;margin-bottom:.3rem}
.field label.lead{font-size:1.125rem;font-weight:600;margin-bottom:.45rem}
.names{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 .75rem}
.names legend{grid-column:1/-1}
.group,.solo{margin-bottom:1.6rem}

input:not([type=radio],[type=checkbox]){display:block;width:100%;min-height:50px;padding:.6rem .85rem;background:var(--white);border:1px solid var(--teal);border-radius:12px}
input::placeholder{color:var(--placeholder);opacity:1}
input:focus-visible,button:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
input[aria-invalid=true]{border:2px solid var(--fault)!important}

.help{font-size:.9375rem;margin-top:.35rem}
/* The error repeats the helper's words, so show one or the other. */
input[aria-invalid=true]~.help{display:none}
.error{color:var(--fault);font-weight:600;font-size:.9375rem;margin-top:.4rem}
.status{color:var(--fault);font-weight:600;margin-bottom:1.5rem;padding:.75rem 0;border-top:2px solid var(--fault);border-bottom:2px solid var(--fault)}
.status:focus{outline:none}

/* Each option is a labelled stone: the real input sits over it, the small mark says which kind. */
.opts{display:flex;flex-wrap:wrap;gap:.5rem}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.opt span{display:flex;align-items:center;gap:.6rem;min-height:46px;padding:.45rem 1.05rem .45rem .85rem;background:var(--white);border:1px solid var(--teal);border-radius:999px;font-weight:500;transition:background-color .15s,color .15s}
.opt span::before{content:"";flex:none;width:15px;height:15px;border:1.5px solid currentColor}
.opt input[type=radio]+span::before{border-radius:50%}
.opt input[type=checkbox]+span::before{border-radius:3px}
.opt input:checked+span{background:var(--teal);color:var(--paper)}
.opt input[type=radio]:checked+span::before{background:var(--paper);box-shadow:inset 0 0 0 3px var(--teal)}
.opt input[type=checkbox]:checked+span::before{background:var(--paper);clip-path:polygon(14% 52%,0 66%,38% 100%,100% 18%,84% 4%,36% 70%);border:0}
.opt input:focus-visible+span{outline:3px solid var(--teal);outline-offset:2px}

h2{font:400 1.875rem/1.1 Gloock,serif;margin:2.25rem 0 1rem}
.consent legend{font-weight:500;font-size:1.0625rem;line-height:1.45}
.fine{font-size:.9375rem;line-height:1.5}
.trap{display:none}

button{display:block;width:100%;min-height:56px;margin-top:2rem;padding:.8rem 1.5rem;background:var(--teal);color:var(--paper);border:0;border-radius:12px;font-weight:600;letter-spacing:.06em;cursor:pointer;transition:background-color .15s}
button:hover{background:#0f3536}
button[aria-busy=true]{opacity:.7;cursor:progress}

.success{font:400 clamp(2.25rem,10vw,3.5rem)/1.05 Gloock,serif;max-width:14em}
.success:focus{outline:none}

footer{padding:1.25rem 20px 1.75rem;font-size:.9375rem;border-top:1px solid var(--teal);margin:0 20px;padding-inline:0}

.thanks main{padding:20px 20px 4rem}
.thanks .logo-link{display:block;width:112px;margin-bottom:3.5rem}

@keyframes uncover{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
@media (prefers-reduced-motion:reduce){
  .photo{animation:none}
  .opt span,button{transition:none}
}

/* Between phone and desktop the plate is wider than tall, so keep the stethoscope in frame. */
@media (min-width:600px) and (max-width:999px){
  .photo{object-position:62% 82%}
}

@media (min-width:1000px){
  .hero{min-height:900px}
  .plate{position:absolute;right:0;top:0;bottom:0;width:58%;height:auto}
  .photo{object-position:70% 60%}
  .wave-phone{display:none}
  .wave-wide{display:block}
  .logo-wrap{left:72px;top:48px;width:150px;z-index:2}
  .words{position:relative;z-index:2;padding:262px 0 0 72px;width:62%}
  h1{font-size:clamp(9rem,13.4vw,14.5rem);line-height:.84;margin-left:-6px}
  .tag{font-size:1.625rem;margin-top:1.9rem}
  .intro{font-size:1.1875rem;max-width:28em;margin-top:1.1rem}

  .below{margin-top:0;display:grid;grid-template-columns:minmax(360px,34%) minmax(0,1fr)}
  .field-band{height:auto;overflow:visible;border-radius:0 240px 0 0/0 340px 0 0;display:flex;align-items:flex-end}
  .edge{display:none}
  /* The drawing stays beside the long form, rooted at the bottom of the screen. */
  .sprig{position:sticky;bottom:0;right:auto;top:auto;width:90%;margin:0 0 0 5%;transform:none}
  .sheet{padding:3.5rem 72px 4rem}
  .signup{max-width:720px}
  .pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:0 1rem;align-items:start}
  h2{font-size:2.25rem}
  button{width:auto;min-width:360px}
  footer{margin:0 72px}
  .thanks main{padding:48px 72px 6rem}
  .thanks .logo-link{width:150px}
}