/* Generated by tools/sync-closer.py from the marked block in index.html.
   Do not edit by hand — edit index.html and run the script. Both the landing
   page and every blog page load this, so the closer looks the same in both. */

/* the tick list, used by the mentor section and by the closer */
.perks{list-style:none;margin:clamp(22px,2.8vw,30px) 0 0;padding:0;display:grid;gap:13px}
.perks li{display:flex;align-items:center;gap:11px;font-size:1rem;font-weight:600}
.perks svg{flex:none;width:21px;height:21px}
/* a perk long enough to wrap needs its tick at the top of the block and its
   own lines left aligned, or the centred column ragged-centres line by line */
.closer .perks li{align-items:flex-start;text-align:left}
.closer .perks svg{margin-top:2px}
/* the row itself is the link, so nothing new appears on the page: a hairline
   underline is the whole affordance at rest, and the arrow only resolves
   under the pointer. Its space is reserved either way, so the line never
   reflows on hover. */
.perk-link{color:inherit;text-decoration:underline;
  text-decoration-color:rgba(10,10,10,.2);text-decoration-thickness:1px;
  text-underline-offset:4px;
  transition:color var(--dur) var(--ease-out),
             text-decoration-color var(--dur) var(--ease-out)}
.perk-link .up{width:15px;height:15px;display:inline-block;vertical-align:-2px;
  margin-left:6px;margin-top:0;opacity:0;transform:rotate(180deg);
  transition:opacity var(--dur) var(--ease-out)}
.perk-link:focus-visible .up{opacity:1}
@media (hover:hover) and (pointer:fine){
  .perk-link:hover{color:var(--navy);text-decoration-color:var(--navy)}
  .perk-link:hover .up{opacity:1}
}
/* no pointer to reveal it with, so on touch it sits quietly visible */
@media (hover:none){.perk-link .up{opacity:.45}}

/* ── closer ──────────────────────────────────────────────────────────── */
.closer{padding-block:clamp(64px,9vw,110px);background:var(--white);
  border-top:1px solid var(--line);
  /* the up-link hangs 23px above this section's top edge, so a scroll that
     lands the edge at the viewport top clips it. Stop short by enough to
     clear the overhang and leave air above it. */
  scroll-margin-top:clamp(56px,7vh,84px)}
/* one column since the quiz came out, so the copy is centred rather than
   stranded in the left half of a grid that no longer has a right half */
.closer-grid{display:grid;justify-items:center;text-align:center}
.closer-copy{max-width:730px}
.closer h2{margin:0;font-weight:800;letter-spacing:-.032em;line-height:1.1;
  font-size:clamp(1.9rem,3.7vw,2.8rem);text-wrap:balance}
.closer-sub{margin:clamp(14px,1.8vw,20px) auto 0;font-size:clamp(.98rem,1.2vw,1.08rem);
  line-height:1.65;color:var(--muted);max-width:52ch;text-wrap:pretty}
/* the list centres as one block with a shared left edge, rather than each
   item centring on its own and leaving the three ticks at three x positions */
.closer .perks{margin-top:clamp(20px,2.4vw,26px);justify-items:start;
  width:fit-content;max-width:min(100%,58ch);margin-inline:auto}
.closer .guarantees{justify-content:center}
/* the guarantees say the same two things as the hero and point at the same two
   answers, so they get the same treatment: quiet underline, arrow downward */
.guarantees .perk-link .up{transform:none;width:13px;height:13px}
.guarantees .perk-link{font-weight:600}
/* the price, then the button, then what you get for it */
.price{display:flex;flex-direction:column;align-items:center;gap:5px;
  margin:clamp(22px,2.6vw,30px) 0 0;line-height:1}
.price s{font-size:clamp(1.4rem,2.1vw,1.75rem);font-weight:700;
  color:rgba(10,10,10,.72);letter-spacing:-.025em;font-variant-numeric:tabular-nums;
  text-decoration-thickness:2.5px;text-decoration-color:rgba(10,10,10,.6)}
/* underline, offset and hover come from .perk-link, the same treatment as the
   7-day refund policy link; this only sets the size, weight and spacing */
.price-monthly{margin-top:10px;font-size:.88rem;font-weight:600;color:var(--muted);
  line-height:1.3}
.price-monthly:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:3px}
.price b{font-size:clamp(2.4rem,4.4vw,3.4rem);font-weight:800;letter-spacing:-.04em;
  color:var(--navy);font-variant-numeric:tabular-nums}
.enroll-row{margin-top:clamp(18px,2.2vw,24px)}
.closer .perks{margin-top:clamp(26px,3.2vw,34px)}
.closer .guarantees{margin-top:clamp(20px,2.4vw,26px)}
.enroll-note{margin:12px 0 0;font-size:.86rem;color:var(--muted)}
/* plain block: the two lists keep their own margins, and the wrapper exists
   only to give them a single scroll timeline */
.closer-lists{display:block}
.guarantees{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:8px 24px}
.guarantees li{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;
  font-weight:600;color:var(--muted)}
.guarantees svg{flex:none;width:16px;height:16px}

/* the blog pages have no .btn-cta of their own */
.btn-cta{padding:19px 40px;font-size:1.1rem;border-radius:14px;
  box-shadow:0 6px 0 var(--navy-deep)}
.btn-cta:active{translate:0 6px;box-shadow:0 0 0 var(--navy-deep)}

/* the footer subscribe, while there is no subscribe endpoint to post to */
.news-btn{margin-top:6px}

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


/* ── phones ──────────────────────────────────────────────────────────
   A finger needs about 44px. The quiet links sit at 23px because they are
   just underlined text, so they get vertical padding on touch devices only,
   where the extra height costs nothing and the hit area is the point. */
@media(max-width:680px){
  .perk-link{display:inline-block;padding-block:9px}
  .guarantees{gap:4px 20px}
}

/* ── proof: six rotating score cards and one video ────────────────────
   Eleven students, six cards. Five cards hold two students and crossfade
   between them; the sixth holds the odd one out and sits still. The card is
   a fixed height and the two faces share one grid cell, so nothing reflows
   as they change over. */
.wins{padding-block:clamp(48px,6vw,76px);background:var(--wash);
  border-top:1px solid var(--line)}
/* heading on the left, cards in the middle, video on the right. The heading
   sits on the centre line of the two card rows rather than above them. */
.wins-grid{display:grid;gap:clamp(24px,3vw,38px)}
@media(min-width:1080px){
  .wins-grid{grid-template-columns:minmax(0,1fr) 200px;align-items:center}
  /* the title spans the whole band above the cards */
  .wins-top{grid-column:1/-1}
}
.wins-head{margin:0 0 clamp(6px,1vw,10px);font-weight:800;letter-spacing:-.03em;
  line-height:1.12;font-size:clamp(1.5rem,2.6vw,2.05rem);text-wrap:balance;
  max-width:24ch}
.wins-video{display:grid;gap:12px;justify-items:center}
.video-title{margin:0;font-size:clamp(1rem,1.35vw,1.16rem);font-weight:800;
  line-height:1.32;letter-spacing:-.022em;color:var(--ink);text-wrap:balance;
  max-width:22ch}
@media(min-width:1080px){.video-title{text-align:center}}

.wins-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.wins-nav{display:flex;gap:8px;flex:none}
.wins-arrow{
  width:38px;height:38px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:99px;background:var(--white);
  color:var(--ink);cursor:pointer;padding:0;
  transition:background var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out),
             translate var(--dur-press) var(--ease-out);
}
.wins-arrow svg{width:17px;height:17px}
.wins-arrow:active{translate:0 1px}
.wins-arrow:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .wins-arrow:hover{background:var(--wash);border-color:var(--navy)}
}
.wins-rails{display:grid;gap:12px}
.wins-rail{
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  cursor:grab;
}
.wins-rail::-webkit-scrollbar{display:none}
.wins-rail.dragging{cursor:grabbing;user-select:none}
.wins-run{display:flex;gap:12px;width:max-content}
.win-card{
  flex:0 0 clamp(230px,24vw,286px);scroll-snap-align:start;
  background:var(--white);border:1px solid var(--line);
  border-radius:14px;padding:clamp(13px,1.4vw,16px);
  /* three rows now, so each card is shorter than the single-row version */
  min-height:0;
}
.win-card .face-line{
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;
  overflow:hidden;
}
.face-score{display:flex;align-items:baseline;gap:7px;margin:0 0 10px;
  font-variant-numeric:tabular-nums}
.face-score b{font-weight:700;font-size:1.02rem;color:var(--muted)}
.face-score b.to{font-weight:800;font-size:1.2rem;color:var(--ink);
  letter-spacing:-.02em}
.face-score i{font-style:normal;color:var(--muted);opacity:.55}
.face-score span{font-size:.78rem;font-weight:800;color:var(--green)}
.face-line{margin:0;font-size:.83rem;line-height:1.56;color:rgba(10,10,10,.76)}

/* Every card holds two students in one cell, so one fades out over exactly
   the window the next fades in: the pair always sums to one and the swap
   never dips through blank. Linear, because a crossfade with an eased curve
   on both halves brightens in the middle. */

.video{position:relative;display:block;border-radius:18px;overflow:hidden;
  background:var(--ink);aspect-ratio:9/16;max-width:200px;width:100%;
  transition:transform var(--dur) var(--ease-out)}
.video-thumb{width:100%;height:100%;object-fit:cover;display:block;opacity:.86}
.video .play{position:absolute;inset:0;margin:auto;width:48px;height:48px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:rgba(255,255,255,.94)}
.video .play svg{width:20px;height:20px;fill:var(--navy);margin-left:3px}
@media (hover:hover) and (pointer:fine){.video:hover{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.video:hover{transform:none}}
@media(max-width:859px){.video{margin-inline:auto}}

/* ── phones ──────────────────────────────────────────────────────────
   A finger needs about 44px. The quiet links sit at 23px because they are
   just underlined text, so they get vertical padding on touch devices only,
   where the extra height costs nothing and the hit area is the point. */
@media(max-width:680px){
  .perk-link{display:inline-block;padding-block:9px}
  .guarantees{gap:4px 20px}
}

/* ── premed nudge ─────────────────────────────────────────────────────
   Bottom right, out of the way of the reading column, and it only appears
   once someone is well past the fold. Closing it sticks. */
.nudge{position:fixed;right:clamp(14px,2vw,22px);bottom:clamp(14px,2vw,22px);
  z-index:40;width:min(320px,calc(100vw - 28px));
  background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:18px 18px 16px;box-shadow:0 18px 40px -18px rgba(17,39,80,.34);
  opacity:0;transform:translateY(12px) scale(.985);
  transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out)}
.nudge[hidden]{display:none}
.nudge.on{opacity:1;transform:none}
.nudge-title{margin:0 0 5px;font-size:1rem;font-weight:800;letter-spacing:-.02em;
  color:var(--ink)}
.nudge-line{margin:0 0 14px;font-size:.87rem;line-height:1.5;color:var(--muted);
  max-width:30ch}
.nudge-cta{display:inline-flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.9rem;color:#fff;background:var(--navy);
  border-radius:11px;padding:11px 18px;box-shadow:0 3px 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)}
.nudge-cta:active{translate:0 3px;box-shadow:0 0 0 var(--navy-deep)}
@media (hover:hover) and (pointer:fine){.nudge-cta:hover{background:var(--navy-hover)}}
.nudge-x{position:absolute;top:8px;right:8px;width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:none;border:0;border-radius:50%;color:var(--muted);
  transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
.nudge-x svg{width:17px;height:17px;fill:none}
@media (hover:hover) and (pointer:fine){
  .nudge-x:hover{background:var(--wash);color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  .nudge{transition:opacity 160ms var(--ease-out);transform:none}
  .nudge.on{transform:none}
}

@media (prefers-reduced-motion:reduce){
  /* the arrows keep working; they land instead of gliding */
  .wins-rail{scroll-behavior:auto}
  .wins-arrow{transition:none}
}