/* the trial ribbon's yellow. Defined here rather than in index.html's
   inline :root so the closer survives being copied onto a blog page. */
:root{--yellow:#FACC15;--yellow-ink:#422006}

/* 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, with the same quiet underline — but the closer sits BELOW the FAQ,
   so its arrow keeps the base rotation and points up, towards the answer. */
.guarantees .perk-link .up{width:13px;height:13px}
.guarantees .perk-link{font-weight:600}
/* the price, then the button, then what you get for it */
/* Two ways to pay, side by side: the instalment plan on the left and the one
   payment on the right, with what the second saves stated rather than implied. */
.pay-plans{display:grid;gap:10px;max-width:560px;margin:clamp(20px,2.4vw,26px) auto 0;
  padding-top:11px}
@media(min-width:640px){
  .pay-plans{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    gap:8px clamp(10px,1.6vw,18px)}
  .pay-plans > .pay-card:first-child{grid-area:1/1}
  .pay-or{grid-area:1/2}
  .pay-plans > .pay-best{grid-area:1/3}
  .pay-popular{grid-area:2/3}
}
/* the two prices are alternatives, not a list: the word carries that, so it
   is real text rather than a drawn divider */
/* One plan: nothing to compare, so the card centres on its own. Specific
   enough to beat the two-card grid areas above at every width. */
.pay-plans.pay-single{grid-template-columns:minmax(0,300px);justify-content:center}
.pay-plans.pay-single > .pay-card{grid-area:auto}
.pay-or{align-self:center;font-size:1rem;font-weight:800;letter-spacing:.1em;color:var(--muted);
  text-align:center}
/* pay-, not plan-: .plan is already the study-plan SECTION, and index.html's
   inline style loads after this file, so a .plan card would inherit 110px of
   section padding. */
.pay-card{position:relative;display:grid;gap:4px;justify-items:center;text-align:center;
  align-content:center;background:var(--white);border:1px solid var(--line);
  border-radius:14px;padding:34px 14px clamp(15px,1.8vw,19px);text-decoration:none;
  color:var(--ink);
  transition:border-color var(--dur) var(--ease-out),translate var(--dur-press) var(--ease-out)}
/* the ribbon's clip box is 104px square; a card shorter than that (the blog
   version, which has no Enroll line) would let its tail hang below the corner */
.pay-card{overflow:hidden}
.pay-card:active{translate:0 1px}
.pay-card:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.pay-card:hover{border-color:var(--navy)}}
@media (prefers-reduced-motion:reduce){.pay-card{transition:none}}
.pay-best{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}
.pay-amount{font-size:clamp(1.5rem,2.7vw,1.95rem);font-weight:800;letter-spacing:-.04em;
  color:var(--navy);font-variant-numeric:tabular-nums;line-height:1.08}
.pay-amount i{font-style:normal;font-size:.44em;font-weight:700;color:var(--muted);
  letter-spacing:0}
.pay-go{margin-top:9px;font-size:.85rem;font-weight:700;color:var(--navy);
  text-decoration:underline;text-decoration-color:rgba(26,58,117,.35);
  text-underline-offset:4px}
.pay-saving{font-size:.8rem;font-weight:700;color:var(--green)}
/* a corner ribbon, clipped by its own square: the band is longer than the
   corner it crosses, so it reads as passing behind the card edge */
.pay-trial{position:absolute;top:0;right:0;width:104px;height:104px;overflow:hidden;
  border-radius:0 13px 0 0;pointer-events:none}
/* the band is centred deep enough into the square that the whole label sits
   inside the clipped corner — too high and the leading "7" is cut off */
.pay-trial i{position:absolute;top:24px;right:-38px;width:140px;rotate:45deg;
  background:var(--yellow);color:var(--yellow-ink);font-style:normal;font-size:.53rem;
  font-weight:800;letter-spacing:.03em;text-transform:uppercase;text-align:center;
  padding:3px 0;white-space:nowrap}
.pay-popular{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-align:center}
/* Off the landing page the price cards are information, not checkout links:
   the blog version renders them as <div>s and sends everyone to the landing
   page's own offer through one button. A div must not pretend to be clickable,
   so it loses the hover border and the press. */
div.pay-card{cursor:default}
div.pay-card:active{translate:none}
@media (hover:hover) and (pointer:fine){
  div.pay-card:hover{border-color:var(--line)}
  div.pay-best:hover{border-color:var(--navy)}
}
.pay-cta{display:flex;justify-content:center;margin-top:clamp(20px,2.4vw,26px)}
.enroll-note{margin:14px 0 0;text-align:center;font-size:.86rem;color:var(--muted)}
/* plain block: the two lists keep their own margins; the wrapper groups them
   for the closer's copy column */
.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)}
/* The sketch: title centred over a 2x2 grid of portrait cards with one arrow
   at each bottom corner, and the video with its own title off to the right,
   level with the middle of the grid. */
.wins-grid{display:grid;gap:clamp(32px,5vw,56px);justify-items:center}
@media(min-width:1000px){
  .wins-grid{grid-template-columns:auto minmax(0,1fr);align-items:center}
  .wins-left{justify-self:start}
  .wins-video{justify-self:end}
}
.wins-left{display:grid;gap:clamp(16px,2.2vw,26px);width:min(100%,560px)}
.wins-head{margin:0;text-align:center;font-weight:800;letter-spacing:-.025em;
  line-height:1.2;font-size:clamp(1.1rem,1.55vw,1.28rem);text-wrap:balance}
.win-cards{display:grid;grid-template-columns:repeat(2,minmax(0,230px));
  justify-content:space-between;
  column-gap:clamp(20px,6vw,100px);row-gap:clamp(18px,2.4vw,30px)}
@media(max-width:560px){.win-cards{grid-template-columns:minmax(0,1fr)}}
.win-card{display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:14px;padding:clamp(14px,1.5vw,17px)}
/* every body is as tall as the longest story, so paging never moves the grid */
.win-body{min-height:var(--win-body-h,0px)}
/* bare arrows, small, centred under the grid */
.win-nav{display:flex;align-items:center;justify-content:center;gap:clamp(22px,3vw,34px)}
.win-nav[hidden]{display:none}
.win-arrow{appearance:none;background:none;border:0;margin:0;padding:8px 10px;cursor:pointer;
  color:var(--ink);display:grid;place-items:center;border-radius:8px;
  transition:color var(--dur) var(--ease-out),translate var(--dur-press) var(--ease-out)}
.win-arrow svg{width:26px;height:10px}
.win-arrow:active{translate:0 1px}
.win-arrow:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.win-arrow:hover{color:var(--navy)}}
@media (prefers-reduced-motion:reduce){.win-arrow{transition:none}}
.win-status{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.wins-video{display:grid;gap:clamp(14px,1.8vw,20px);justify-items:center;width:min(100%,520px)}
.video-title{margin:0;text-align:center;font-size:clamp(1.1rem,1.55vw,1.28rem);font-weight:800;
  line-height:1.25;letter-spacing:-.022em;color:var(--ink);text-wrap:balance}
.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)}


.video{position:relative;display:block;border-radius:18px;overflow:hidden;
  background:var(--ink);aspect-ratio:2/3;max-width:230px;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}}

/* ── 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;padding-right:28px;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-person{display:flex;align-items:center;gap:12px;margin:10px 0 14px}
.nudge-person img{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;
  border:1px solid var(--line)}
.nudge-name{margin:0;font-size:.95rem;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.nudge-role{margin:2px 0 0;font-size:.82rem;line-height:1.4;color:var(--muted)}
.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}
}


/* a link inside an FAQ answer: underlined, because in a block of plain answer
   text nothing else marks it as clickable */
.a-link{color:#1D4ED8;font-weight:700;text-decoration:underline;
  text-decoration-color:#1D4ED8;text-decoration-thickness:1.5px;text-underline-offset:3px;
  transition:color var(--dur) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.a-link:hover{color:#1E3A8A;text-decoration-color:#1E3A8A}}

/* ── the Find your pattern popup ──────────────────────────────────────
   Bottom right, the same card as the premed nudge, and never on screen at the
   same time as it (motion.js queues them). Not modal: no veil, no scroll lock,
   and opening it does not take focus away from what the reader is doing. */
.sheet{position:fixed;right:clamp(14px,2vw,22px);bottom:clamp(14px,2vw,22px);z-index:45;
  width:min(380px,calc(100vw - 28px));
  height:min(560px,calc(100vh - 96px));height:min(560px,calc(100dvh - 96px));
  background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  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)}
.sheet[hidden]{display:none}
.sheet.on{opacity:1;transform:none}
.sheet-frame{display:block;width:100%;height:100%;border:0}
.sheet-x{position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--white);border:1px solid var(--line);border-radius:50%;
  color:var(--muted);
  transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
.sheet-x svg{width:17px;height:17px;fill:none}
@media (hover:hover) and (pointer:fine){
  .sheet-x:hover{background:var(--wash);color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){
  .sheet{transition:opacity 160ms var(--ease-out);transform:none}
  .sheet.on{transform:none}
}