@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* One unit = one pixel of the 1672 × 941 reference, scaled to the window's width so the whole
     scene keeps the reference's proportions; in wider windows the tablet runs off the bottom.
     The height limit keeps the words and button on screen in very wide, short windows. */
  --u: min(calc(100vw / 1672), calc(100svh / 845));

  --action: #0060FE;
  --paper: #FAFDFE;
  --ink: #18275E;
}

* { box-sizing: border-box; }

html, body { overflow-x: hidden; overflow-x: clip; }

body {
  margin: 0;
  min-height: 100svh;
  font-family: "Figtree", system-ui, sans-serif;
  color: #fff;
  background: #04194F;
  -webkit-font-smoothing: antialiased;
}

/* The background matches the landing page: navy, a soft blue glow, the faint practice-paper grid */
.sky {
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 50% 30%, rgb(122 162 242 / 0.16), transparent 75%),
    linear-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(90deg, rgb(255 255 255 / 0.05) 1px, transparent 1px) 0 0 / 42px 42px,
    #04194F;
}

/* Header: the landing page's pill, in the same centred column */
.top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1100px, 100% - 32px);
  margin: 14px auto 0;
  padding: 11px 14px 11px 26px;
  background: rgb(255 255 255 / 0.055);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 60px;
}

.wordmark { display: block; line-height: 0; }
.wordmark img { display: block; width: 118px; height: auto; }
.top nav a {
  font-size: 15px;
  color: #CCD8F1;
  text-decoration: none;
}
.top nav { display: flex; align-items: center; white-space: nowrap; gap: 30px; }
.top nav a:hover { color: #fff; }
.top nav a:last-child { padding: 9px 18px; border: 1px solid #52638C; border-radius: 30px; color: #fff; }

/* Inner pages (pricing, sign in) */
.soon {
  position: relative;
  z-index: 1;
  width: min(1100px, 100% - 32px);
  margin: 0 auto;
  padding: 72px 0 64px;
}
.soon h1 { max-width: 11ch; }
.soon .exam a { color: #fff; font-weight: 600; text-underline-offset: 0.2em; }

/* Pricing: two plans; Free leads because the free start is the funnel */
.pricing { padding-top: 32px; }
.pricing h1 { max-width: none; font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -0.03em; }
.plans { display: flex; flex-wrap: wrap; gap: 24px; margin-top: calc(48 * var(--u)); }
.plan {
  flex: 1 1 min(300px, 100%); max-width: 460px;
  display: flex; flex-direction: column;
  padding: 28px;
  border-radius: 20px;
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.22);
}
.plan.full { background: #fff; color: var(--ink); border-color: #fff; }
.plan h2 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.price { margin: 10px 0 18px; font-size: 1.05rem; }
.price b { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.02em; margin-right: 0.15em; }
.price span { display: block; opacity: 0.75; margin-top: 4px; }
.badge { display: inline-block; vertical-align: 3px; margin-left: 8px; padding: 3px 10px; border-radius: 20px; background: #E8F0FF; color: var(--action); font-size: 0.8rem; font-weight: 700; }
.plan ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; font-size: 1.05rem; flex: 1; }
.plan li { display: flex; align-items: center; gap: 10px; }
.plan li svg { flex: none; width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.plan .cta { min-width: 0; min-height: 0; padding: 16px 22px; font-size: 1.1rem; border-radius: 12px; align-self: stretch; }
.plan.full .cta { background: var(--action); color: #fff; }
.plan.full .cta:hover { background: #1A70FF; }
.plan.full .cta:focus-visible { outline-color: var(--action); }

/* Sign in: one field, as short as a form can be */
.signin-form { display: grid; gap: 10px; max-width: 420px; margin: calc(40 * var(--u)) 0 24px; }
.signin-form label { font-size: 1.05rem; font-weight: 500; }
.signin-form input {
  font: inherit; font-size: 1.15rem;
  padding: 16px 18px; border-radius: 12px; border: 2px solid transparent;
  background: #fff; color: var(--ink);
}
.signin-form input:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.signin-form .cta { min-width: 0; margin-top: 8px; border: 0; cursor: pointer; font-family: inherit; }

/* Hero */
.hero {
  position: relative;
  z-index: 1;
  height: calc(100svh - 108 * var(--u));
}
/* Wide screens are one fixed scene: the tablet bleeds off the right and bottom */
@media (min-width: 1001px) and (min-aspect-ratio: 1/1) {
  body { height: 100svh; overflow: hidden; overflow: clip; }
}

.copy {
  position: absolute;
  left: calc(70 * var(--u));
  /* centred in the space under the header, so short windows don't leave a big gap above
     and a squeezed one below */
  top: 50%;
  transform: translateY(-50%);
}
.kicker {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin: 0 0 calc(20 * var(--u));
  font-size: max(1rem, calc(24 * var(--u)));
  font-weight: 500;
  color: #CFE0FF;
}
/* overlapping student avatars (initials for now) */
.faces { display: flex; }
.faces i {
  display: grid; place-items: center;
  width: 1.9em; height: 1.9em;
  margin-left: -0.5em;
  border-radius: 50%;
  border: 0.12em solid #08307F;
  font-style: normal; font-size: 0.9em; font-weight: 700;
  color: #0D1A4F;
}
.faces i:first-child { margin-left: 0; }
.faces i:nth-child(1) { background: #FFD27A; }
.faces i:nth-child(2) { background: #9CC3FF; }
.faces i:nth-child(3) { background: #FFB3A1; }
.faces i:nth-child(4) { background: #A8E6CF; }
.faces i:nth-child(5) { background: #E0CCFF; }
.proof { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
.proof b { color: #fff; font-weight: 700; }
.stars { color: #FFC94D; letter-spacing: 0.08em; font-size: 0.9em; }
h1 {
  margin: 0;
  font-size: calc(80 * var(--u)); /* three lines; the longest must clear the tablet */
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.exam {
  max-width: calc(640 * var(--u));
  text-wrap: balance;
  margin: calc(38 * var(--u)) 0 calc(42 * var(--u));
  font-size: max(1.125rem, calc(31 * var(--u)));
  letter-spacing: -0.005em;
}
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(22 * var(--u));
  min-width: calc(508 * var(--u));
  min-height: calc(98 * var(--u));
  padding: 0.75em 1.3em;
  border-radius: calc(14 * var(--u));
  /* white, so it stands out from every part of the blue background and echoes the white tablet */
  background: #fff;
  color: #0050E0;
  font-size: max(1.125rem, calc(31 * var(--u)));
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgb(0 16 70 / 0.35);
  transition: background 0.15s;
}
.cta:hover { background: #EAF2FF; }
.cta:focus-visible, .top a:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.cta svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- The tablet ----------
   It shows one thing: the app tells you exactly what to fix. Ticks for what was right, one
   highlighted fix, and Try again. Base styles are the flat card used on narrow screens. On wide
   screens the parts sit at positions measured from the reference, and the tablet takes the
   reference's view: one perspective fitted to its edges. Wide numbers are reference pixels times --u. */
.device { display: block; position: relative; color: inherit; text-decoration: none; cursor: pointer; }
.glare, .sheet { display: none; }
.screen {
  background: var(--paper);
  color: var(--ink);
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
}

.fb-task { justify-self: start; padding: 0.3em 0.7em; border-radius: 0.45em; background: #E3EEFD; color: #1556E0; font-weight: 600; font-size: 0.85em; }
.fb-head { margin: 0; font-size: 1.6em; font-weight: 700; color: #121E55; letter-spacing: -0.01em; }
.fb-ok { display: grid; gap: 0.8em; padding: 1em 1.2em; border-radius: 1em; background: #EFF5FE; border: 1px solid #DDE8F8; }
.fb-ok p { display: flex; align-items: center; gap: 0.8em; margin: 0; }
.fb-ok i { flex: none; display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: #22C55E; }
.fb-ok svg { width: 0.95em; height: 0.95em; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.fb-ok .bar { display: block; height: 0.6em; border-radius: 99px; background: #D3E0F5; }
.bar.w1 { width: 62%; } .bar.w2 { width: 48%; }
/* the one fix: amber so it stands out (the app never uses red) */
.fb-fix {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.35em;
  padding: 1em 1.2em; border-radius: 1em;
  background: #FFF6E5; border: 2px solid #F5B23D; border-left-width: 0.45em;
  box-shadow: 0 0.6em 1.4em rgb(180 110 0 / 0.15);
}
.fb-fix small { font-size: 0.8em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #A35F00; }
.fb-fix b { font-size: 1.45em; font-weight: 700; color: #121E55; letter-spacing: -0.01em; }
.fb-try { font-size: 1.05em; color: #4A4030; }
.fb-try mark { background: #FFE2A8; color: #121E55; border-radius: 0.25em; padding: 0 0.25em; font-weight: 700; }
/* quiet, so the page's own button is the only one that stands out */
.again {
  justify-self: end;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  height: 3em; padding: 0 1.4em; border-radius: 0.6em;
  background: #E3EEFD; color: #1556E0; font-size: 1.1em; font-weight: 600;
}
.again svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* Wide screens: the tablet in the reference's view */
@media (min-width: 1001px) and (min-aspect-ratio: 1/1) {
  .device {
    position: absolute;
    /* 5% smaller than the reference, anchored at its right so the gap to the headline opens */
    left: calc(100vw - 772 * var(--u));
    top: calc(100 * var(--u));
    width: calc(1160 * var(--u));
    /* Windows shorter than the reference scene would cut off the tablet's bottom, so its
       contents tighten by about the amount cut off (in tablet units) and the whole screen fits */
    --lean: clamp(0px, calc((941 * var(--u) - 100svh) * 1.25), calc(210 * var(--u)));
    height: max(calc(1000 * var(--u)), calc((100svh - 100 * var(--u)) * 1.5));
    border-radius: calc(92 * var(--u)) 0 0 0;
    /* the bezel: mid blue, a lighter rim on its outer edge, darker towards the bottom */
    background: linear-gradient(180deg, #1A5BB8 0%, #1352AF 40%, #0E4699 100%);
    box-shadow:
      inset calc(3 * var(--u)) calc(3 * var(--u)) 0 0 #3B83DC,
      calc(-40 * var(--u)) calc(30 * var(--u)) calc(90 * var(--u)) rgb(0 8 45 / 0.5);
    transform-origin: 0 0;
    transform: perspective(calc(1827 * var(--u))) rotateX(31.07deg) rotateY(-17.38deg) rotateZ(2.557deg) skewX(-8.322deg) scale(0.6726);
  }
  /* light catching the top bezel, spreading towards the right */
  .glare {
    display: block;
    position: absolute; left: 0; top: 0; right: 0;
    height: calc(60 * var(--u));
    border-radius: calc(92 * var(--u)) 0 0 0;
    background: linear-gradient(90deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0) 42%, rgb(205 223 250 / 0.75) 68%, rgb(240 246 254 / 0.97) 88%);
  }
  .screen {
    display: block;
    position: absolute;
    left: calc(44 * var(--u)); top: calc(47 * var(--u)); right: 0; bottom: 0;
    border-radius: calc(60 * var(--u)) 0 0 0;
    background: linear-gradient(180deg, #FDFEFF, #F7FAFE);
    box-shadow: inset calc(2 * var(--u)) calc(2 * var(--u)) calc(6 * var(--u)) rgb(0 30 90 / 0.10);
  }
  .screen > * { position: absolute; margin: 0; }
  .sheet {
    display: block;
    left: calc(66 * var(--u)); top: calc(54 * var(--u));
    width: calc(950 * var(--u)); height: calc(2000 * var(--u));
    border: calc(2 * var(--u)) solid #E3ECF9;
    border-radius: calc(44 * var(--u));
    background: #fff;
  }
  .fb-task { left: calc(110 * var(--u)); top: calc(110 * var(--u)); font-size: calc(24 * var(--u)); }
  .fb-head { left: calc(110 * var(--u)); top: calc(175 * var(--u)); font-size: calc(46 * var(--u)); }
  .fb-ok { left: calc(110 * var(--u)); width: calc(840 * var(--u)); top: calc(270 * var(--u)); font-size: calc(30 * var(--u) - 0.03 * var(--lean)); }
  .fb-fix { left: calc(110 * var(--u)); width: calc(840 * var(--u)); top: calc(470 * var(--u) - 0.3 * var(--lean)); font-size: calc(30 * var(--u) - 0.04 * var(--lean)); }
  .again { left: calc(659 * var(--u)); top: calc(780 * var(--u) - var(--lean)); width: calc(290 * var(--u)); height: calc(70 * var(--u)); padding: 0; border-radius: calc(16 * var(--u)); font-size: calc(28 * var(--u)); gap: calc(16 * var(--u)); }
}

/* Narrow or tall screens: the words first, then the tablet lying flat beneath them */
@media (max-width: 1000px), (max-aspect-ratio: 1/1) {
  body { display: flex; flex-direction: column; }
  .top { padding: 9px 10px 9px 18px; }
  .wordmark img { width: 104px; }
  .top nav { gap: clamp(14px, 4vw, 28px); }
  .top nav a { font-size: 15px; }
  .proof { white-space: normal; }
  .soon { flex: 1; padding: 48px 0; }
  .hero { flex: 1; display: flex; flex-direction: column; height: auto; padding: 0 16px; overflow: hidden; overflow: clip; }
  .copy { position: static; transform: none; padding: clamp(48px, 12vw, 96px) 0 clamp(40px, 10vw, 72px); }
  h1 { font-size: clamp(38px, 10vw, 64px); }
  h1 br { display: none; } /* phones wrap the headline naturally */
  .exam { max-width: 24em; margin: 20px 0 32px; font-size: clamp(19px, 4.8vw, 26px); }
  .cta { min-width: 0; min-height: 0; padding: 18px 26px; gap: 14px; font-size: clamp(17px, 4.6vw, 22px); border-radius: 12px; white-space: nowrap; box-shadow: 0 14px 30px rgb(0 16 70 / 0.35); }
  .device {
    flex: 1;
    display: flex;
    margin: 0 -16px -40px 0;
    padding: 10px 0 0 12px;
    border-radius: 30px 0 0 0;
    background: linear-gradient(180deg, #1A5BB8, #0E4699);
    box-shadow: inset 2px 2px 0 0 #3B83DC, 0 30px 60px rgb(0 8 50 / 0.4);
  }
  .screen {
    flex: 1;
    align-content: start;
    row-gap: 1em;
    border-radius: 22px 0 0 0;
    padding: 22px 16px 62px 18px;
    font-size: clamp(11px, 2.9vw, 20px);
  }
}

/* Phones: only Sign in in the header, as on the landing page */
@media (max-width: 900px) {
  .top nav a:not(:last-child) { display: none; }
  .top { background: none; border: 0; padding: 16px 0 0; }
}
/* Small phones: the plan buttons' text is wider than a 320px card allows */
@media (max-width: 380px) {
  .plan { padding: 22px; }
  .plan .cta { font-size: 1rem; padding: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cta { transition: none; }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}