/* Wellseen MCAT — mcat.joinwellseen.com
   Brand tokens and the logo strip / footer are copied from joinwellseen.com so
   the two sites read as one brand; everything between them is this page's own. */
:root{
  --navy:#1A3A75; --navy-deep:#112750; --navy-hover:#204688;
  --ink:#0A0A0A; --muted:rgba(10,10,10,.58); --line:#E8E8E8; --wash:#F7F8FA;
  --green:#16A34A; --lime:#84CC16; --white:#fff;
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1); --dur-press:130ms; --dur:200ms;
}
*{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(--white);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:100%;max-width:1220px;margin:0 auto;padding-inline:clamp(20px,4vw,40px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
section{scroll-margin-top:16px}
#apply{scroll-margin-top:0}

.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-weight:700;letter-spacing:-.01em;background:var(--navy);color:#fff;
  border:0;border-radius:12px;cursor:pointer;padding:13px 22px;font-size:.97rem;
  box-shadow:0 4px 0 var(--navy-deep);
  transition:background var(--dur) var(--ease-out),translate var(--dur-press) var(--ease-out),box-shadow var(--dur-press) var(--ease-out)}
.btn:active{translate:0 4px;box-shadow:0 0 0 var(--navy-deep)}
.btn:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--navy-hover)}}

/* ── proof strip ─────────────────────────────────────────────────────── */
.proof{padding-top:clamp(14px,2.4vh,30px);flex:none}

.proof-label{
  text-align:center;font-size:.78rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin:0 0 clamp(14px,1.8vw,20px);
}

/* One still row, each logo once. --h is per logo, measured from the ink in
   each file so every WORDMARK reads at the same size (a crest-and-wordmark
   lockup puts its letters at a third of the image height); --k scales the
   whole set. Wraps to two centered rows on phones. */
.logos{
  --k:1.5;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(22px,3vw,34px) clamp(36px,6vw,88px);
  max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,40px);
}
@media(max-width:1100px){.logos{--k:1.25}}
@media(max-width:760px){.logos{--k:1}}
.logos img{height:calc(var(--h,32px) * var(--k));width:auto;max-width:100%;object-fit:contain;flex:none}

/* ── top bar: brand left, Apply right ────────────────────────────────── */
.bar{border-bottom:1px solid var(--line);background:var(--white)}
.bar-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-block:clamp(10px,1.4vw,14px)}
.brand{display:inline-flex;align-items:center;gap:11px;font-weight:800;font-size:1.3rem;
  letter-spacing:-.02em;color:var(--ink)}
.brand img{width:38px;height:38px;border-radius:9px;flex:none}
.brand:focus-visible{outline:3px solid var(--lime);outline-offset:4px;border-radius:10px}

/* ── hero ─────────────────────────────────────────────────────────────── */
/* Spacing here scales with screen HEIGHT, so on first load the team photos
   start about half-way into view on any laptop or phone. */
.hero{padding-block:calc(clamp(22px,5vh,72px) + var(--fold-pad,0px)) calc(clamp(18px,3.5vh,48px) + var(--fold-pad,0px));
  text-align:center}
.hero h1{margin:0 auto;max-width:24ch;font-weight:800;letter-spacing:-.04em;line-height:1.04;
  font-size:clamp(2.2rem,min(5.4vw,8.2vh),4.6rem);text-wrap:balance}
.hero .sub{margin:clamp(12px,2vh,24px) auto 0;max-width:58ch;color:var(--muted);
  font-size:clamp(1.02rem,1.5vw,1.2rem);line-height:1.6;text-wrap:balance}

.hero h1,.section-title{font-weight:800;letter-spacing:-.04em;line-height:1.04;
  font-size:clamp(2.2rem,min(5.4vw,8.2vh),4.6rem);text-wrap:balance}
.section-title{margin:0 0 clamp(16px,3vh,36px);text-align:center;color:var(--ink)}
.eyebrow{margin:0 0 clamp(22px,3vw,34px);text-align:center;font-size:.8rem;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--navy)}

/* ── team: big faces in one row ──────────────────────────────────────── */
.team{padding-block:clamp(14px,3vh,40px) clamp(56px,8vw,96px);border-top:1px solid var(--line)}
/* The team gets a wider row than the rest of the page, so five faces can sit
   further apart and every name and role still fits on one line. */
.team .wrap{max-width:1180px}
/* Six people as two rows of three. The longest role, "Former MCAT student and
   research fellow", must stay on one line, so the cards never get narrower
   than it; a swipe row on phones. */
.people{list-style:none;margin:0;padding:0;display:grid;gap:clamp(24px,4vw,56px);
  grid-template-columns:repeat(3,minmax(0,1fr))}
/* tablets: two across so the longest role still fits on one line */
@media(max-width:1023px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* phones: one row you swipe through, cards wide enough for a one-line role */
@media(max-width:767px){
  .people{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * clamp(20px,4vw,40px));padding-inline:clamp(20px,4vw,40px);
    scroll-padding-inline:clamp(20px,4vw,40px);padding-bottom:6px}
  .person{flex:0 0 66vw;scroll-snap-align:start}
}
.person img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;
  border-radius:18px;background:var(--wash)}
.person h3{margin:14px 0 2px;font-size:clamp(.95rem,1.1vw,1.08rem);white-space:nowrap;font-weight:800;letter-spacing:-.02em;line-height:1.3}
.person h3 .li-link{display:inline-flex;vertical-align:-3px;margin-left:4px;color:#0A66C2;
  border-radius:5px;transition:opacity var(--dur) var(--ease-out)}
.person h3 .li-link svg{width:20px;height:20px}
.person h3 .li-link:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.person h3 .li-link:hover{opacity:.75}}
.hero-apply{margin-top:clamp(20px,3vh,32px)}
.person .role{margin:0;white-space:nowrap;font-size:.84rem;font-weight:700;color:var(--navy)}


/* ── the 15-minute call booking, already open ────────────────────────────────────────────────────────────────── */
.quiz{padding-block:clamp(48px,7vw,88px);background:var(--wash);border-block:1px solid var(--line)}
.embed{display:block;width:100%;border:0;border-radius:18px;background:var(--white);
  box-shadow:0 24px 60px -36px rgba(17,39,80,.45)}
.embed-cal{max-width:1060px;margin:0 auto;height:760px}
@media(max-width:700px){.embed-cal{height:1080px}}

/* ── footer ──────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);background:var(--white);
  padding-block:clamp(48px,6vw,72px)}

.foot-grid{display:grid;gap:clamp(32px,4vw,48px)}

@media(min-width:760px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media(min-width:1040px){
  /* full width, brand and newsletter take the left half, link columns spread */
  .foot-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr) minmax(0,.85fr) minmax(0,.8fr);
    gap:clamp(28px,3.4vw,56px)}
}

.foot-brand{display:inline-flex;align-items:center;gap:11px;font-weight:800;
  font-size:1.3rem;letter-spacing:-.02em;color:var(--ink)}

.foot-brand img{width:38px;height:38px;border-radius:9px;flex:none}

.news{margin-top:22px;max-width:36ch}

.news p{margin:0 0 12px;font-size:.86rem;line-height:1.6;color:var(--muted)}

.news form{display:flex;gap:8px;flex-wrap:wrap}

.news input{flex:1 1 170px;min-width:0;font-family:var(--sans);font-size:.92rem;
  padding:12px 14px;border:1px solid var(--line-2,#7F8BA3);border-radius:11px;
  background:var(--white);color:var(--ink);
  transition:border-color var(--dur) var(--ease-out)}

.news input:focus-visible{outline:none;border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(26,58,117,.14)}

.news .btn{flex:none;padding:12px 20px;font-size:.9rem;box-shadow:0 3px 0 var(--navy-deep)}

.past-blogs{display:inline-block;margin-top:14px;font-size:.9rem;font-weight:700;
  color:var(--navy);transition:opacity var(--dur) var(--ease-out)}

@media (hover:hover) and (pointer:fine){.past-blogs:hover{opacity:.66}}

.news .btn:active{translate:0 3px;box-shadow:0 0 0 var(--navy-deep)}

.foot-col h4{margin:0 0 16px;font-size:.74rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink)}

.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}

.foot-col a,.foot-col span.dim{font-size:.92rem;color:var(--muted);
  transition:color var(--dur) var(--ease-out)}

.foot-col a{display:inline-block}

.socials{display:grid;gap:11px}

.socials a{display:inline-flex;align-items:center;gap:11px;font-size:.92rem;
  color:var(--muted)}

.socials svg{flex:none;width:19px;height:19px;fill:var(--navy)}

.foot-legal{display:flex;flex-wrap:wrap;gap:8px 20px}

.foot-legal a{color:var(--muted)}

/* ── phones: footer links are the densest tap targets on the page ─────
   Text links sit at 21-24px tall. A finger needs about 44px, so on small
   screens the padding grows and the gaps shrink to pay for it: the column
   ends up the same height it was, with rows you can actually hit. */
@media(max-width:680px){
  .foot-col ul{gap:0}
  .foot-col a,.foot-col span.dim{display:inline-block;padding-block:10px}
  .socials{gap:0}
  .socials a{padding-block:10px}
  .foot-legal{gap:0 20px}
  .foot-legal a{display:inline-block;padding-block:10px}
  .past-blogs{padding-block:10px}
  .foot-brand{padding-block:6px}
}

.foot-base{margin-top:clamp(36px,4.5vw,54px);padding-top:22px;
  border-top:1px solid var(--line);display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-size:.82rem;color:var(--muted)}

@media (hover:hover) and (pointer:fine){
  .foot-col a:hover,.socials a:hover,.foot-legal a:hover{color:var(--ink)}
  .socials a:hover svg{fill:var(--navy-hover)}
}

/* the footer newsletter's reply line */
.news-msg{margin:8px 0 0;font-size:.83rem;line-height:1.5;display:none}

.news-msg[data-state]{display:block}

.news-msg[data-state="ok"]{color:var(--green)}

.news-msg[data-state="err"]{color:#B42323}

.news-msg[data-state="busy"]{color:var(--muted)}

/* ── announcement toast, bottom left ──────────────────────────────────── */
.toast{position:fixed;left:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);z-index:50;
  width:min(440px,calc(100vw - 24px));display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:14px;align-items:start;padding:16px 14px 16px 16px;background:var(--white);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px -18px rgba(17,39,80,.38);
  opacity:0;transform:translateY(14px);transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out)}
.toast[hidden]{display:none}
.nowrap{white-space:nowrap}
.toast.on{opacity:1;transform:none}
.toast-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;
  background:#DCFCE7;color:var(--green)}
.toast-icon svg{width:22px;height:22px}
.toast-kicker{margin:0 0 3px;font-size:.84rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.toast-text{margin:0;font-size:.92rem;line-height:1.5;font-weight:600;color:var(--ink)}
.toast-x{width:30px;height:30px;margin:-4px -2px 0 0;display:grid;place-items:center;border:0;border-radius:50%;
  background:none;color:#A1A1AA;cursor:pointer;transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
.toast-x svg{width:18px;height:18px;fill:none}
.toast-x:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.toast-x:hover{background:var(--wash);color:var(--ink)}}

@media (prefers-reduced-motion:reduce){
  .toast{transform:none;transition:opacity 160ms var(--ease-out)}
  .btn:active{translate:none}
}