/* 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);
}

/* the mask is what stops logos hard-clipping at the edges of the track */
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}

.track{
  display:flex;align-items:center;width:max-content;
  /* two identical halves, so translating -50% lands exactly on the seam */
  animation:marquee 40s linear infinite;
}

.set{display:flex;align-items:center;flex:none}

@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* every logo gets the same box and is fitted inside it, so a portrait crest and
   an 8:1 wordmark occupy the same footprint instead of one dwarfing the other */
/* equal height, width free to vary with the logo's own proportions. A fixed
   box makes an 8:1 wordmark render at a third the height of a crest, which is
   the thing that looked mismatched. The max-width only reins in the extremes. */
/* Each logo is sized so its WORDMARK reads at the same size, not so its
   bounding box matches. A crest-and-wordmark lockup puts its letters at a
   third of the image height; a pure wordmark fills it. Matching boxes is what
   made Oxford and Georgetown unreadable next to Caltech. --h is per logo,
   measured from the actual ink in each file; --k scales the whole set. */
.track{--k:1}

@media(max-width:1100px){.track{--k:.88}}

@media(max-width:760px){.track{--k:.78}}

.track img{
  height:calc(var(--h,32px) * var(--k));width:auto;
  object-fit:contain;flex:none;
  /* spacing lives on the item, not in flex gap, so one set is exactly 50% */
  margin-right:clamp(44px,4.6vw,68px);
}

@media (hover:hover) and (pointer:fine){
  .marquee:hover .track{animation-play-state:paused}
}

/* ── 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}
.bar-apply{padding:11px 26px}

/* ── 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)}
.people{list-style:none;margin:0;padding:0;display:grid;gap:clamp(18px,2.4vw,32px);
  grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.people{grid-template-columns:repeat(2,minmax(0,1fr))}}
.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:16px 0 2px;font-size:clamp(1.02rem,1.5vw,1.18rem);font-weight:800;letter-spacing:-.02em;line-height:1.3}
.person .role{margin:0 0 8px;font-size:.84rem;font-weight:700;color:var(--navy)}


/* ── the quiz, 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-quiz{max-width:960px;margin:0 auto;height:min(640px,82vh);min-height:520px}

/* ── score increases: one compact row, left to right ─────────────────── */
.scores{padding-block:clamp(48px,7vw,80px) clamp(56px,8vw,96px)}
.score-row{list-style:none;margin:0;padding:4px 2px 16px;display:flex;gap:14px;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:2px;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 48px),transparent);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 48px),transparent)}
.score-row.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.score-row:focus-visible{outline:3px solid var(--lime);outline-offset:4px;border-radius:12px}
.score{flex:0 0 168px;scroll-snap-align:start;border:1px solid var(--line);border-radius:16px;
  padding:18px 16px 16px;background:var(--white);text-align:center}
.score .gain{margin:0;font-size:2.1rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--green);
  font-variant-numeric:tabular-nums}
.score .from{margin:6px 0 12px;font-size:.92rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.more{font:inherit;font-size:.84rem;font-weight:700;color:var(--navy);background:none;border:0;padding:6px 4px;
  cursor:pointer;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.more:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:4px}
@media (hover:hover) and (pointer:fine){.more:hover{color:var(--navy-hover)}}

/* the call to the booking step, under the scores */
.first-step{display:flex;flex-direction:column;align-items:center;gap:clamp(16px,2vw,22px);
  margin-top:clamp(48px,7vw,80px);text-align:center}
.first-step span:first-child{max-width:20ch;font-weight:800;letter-spacing:-.035em;line-height:1.08;
  font-size:clamp(2rem,5.2vw,3.8rem);text-wrap:balance}
.down{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:var(--navy);color:#fff;box-shadow:0 5px 0 var(--navy-deep);
  animation:nudge-down 1.8s var(--ease-out) infinite}
.down svg{width:26px;height:26px}
@keyframes nudge-down{0%,100%{translate:0 0}50%{translate:0 6px}}
.first-step:focus-visible .down{outline:3px solid var(--lime);outline-offset:4px}

/* ── booking, already open ───────────────────────────────────────────── */
.book{padding-block:clamp(40px,6vw,72px) clamp(56px,8vw,96px);background:var(--wash);border-top:1px solid var(--line)}
.embed-cal{max-width:1060px;margin:0 auto;height:760px}
@media(max-width:700px){.embed-cal{height:1080px}}

/* ── a student's full story ──────────────────────────────────────────── */
.story-box{width:min(560px,calc(100vw - 32px));border:0;border-radius:20px;padding:28px 26px 26px;
  box-shadow:0 40px 90px -30px rgba(17,39,80,.55);color:var(--ink)}
.story-box::backdrop{background:rgba(10,14,25,.5)}
.story-box .gain{margin:0;font-size:2.4rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--green)}
.story-box .from{margin:6px 0 16px;font-weight:700}
.story-text{margin:0;line-height:1.7;color:var(--muted)}
.story-x{position:absolute;top:12px;right:12px;width:36px;height:36px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;background:var(--white);color:var(--muted);cursor:pointer}
.story-x svg{width:17px;height:17px;fill:none}
.story-x:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* ── 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)}
  .track{animation:none} .marquee{overflow-x:auto}
  .down{animation:none} .btn:active{translate:none}
}