/*
 * The landing page (templates/landing/), and nothing else: the app's own stylesheet is
 * static/dist/app.css, built by Tailwind. This file is hand-written and never built.
 *
 * - Every class starts with "lp-". Tailwind scans templates/ for class-like words, and
 *   a prefix no utility uses keeps these from emitting anything into app.css.
 * - Mobile first, one breakpoint: 900px. Below it, the phone design's layout; at and
 *   above it, the desktop design's, whose flex rows wrap exactly as the design file's
 *   own do — the hero stacks until ~1050px and the nav takes a second row below ~955px.
 * - No CSS url function and no import at-rule, comments included: the production
 *   collectstatic rewrites both wherever they appear, and dies on a path it cannot find.
 * - Colours are the tokens below and nothing else. Their values are the brand's, in
 *   static/css/tokens.css, which templates/landing/base.html links ahead of this file.
 */

:root {
  /* Brand: ink ground and type, chalk light ground, one lime, white cards. */
  --lp-ink: var(--sp-ink);
  --lp-chalk: var(--sp-chalk);
  --lp-lime: var(--sp-lime);
  --lp-paper: var(--sp-paper);

  /* The design's neutrals: tints of ink on the dark ground, of chalk on the light. */
  --lp-ink-raised: var(--sp-ink-raised);
  --lp-ink-mark: var(--sp-ink-mark);
  --lp-ink-rule: var(--sp-ink-rule);
  --lp-ink-line: var(--sp-ink-line);
  --lp-ink-faint: var(--sp-ink-faint);
  --lp-ink-dim: var(--sp-ink-dim);
  --lp-ink-muted: var(--sp-ink-muted);
  --lp-ink-soft: var(--sp-ink-soft);
  --lp-chalk-muted: var(--sp-chalk-muted);
  --lp-chalk-line: var(--sp-chalk-line);
  --lp-hover: var(--sp-hover);

  --lp-font-display: var(--sp-font-display);
  --lp-font-body: var(--sp-font-body);

  --lp-gutter: 20px;
  --lp-focus: var(--lp-ink);
}

@media (min-width: 900px) {
  :root {
    --lp-gutter: 32px;
  }
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/*
 * The design files keep the browser's default box model, where a stated size or flex
 * basis is the content alone and padding and border are drawn outside it. That is why,
 * in the design, an outline link-button stands 2px taller than its lime twin, a step
 * circle is 50px rather than 48, and the maths card is wider than its 420px basis. These
 * are the elements where it shows. <button>s are left out: every browser sizes them
 * border-box already. The page-wide border-box stays, because the column grids and the
 * privacy card's alignment depend on it.
 */
a.lp-btn,
.lp-step-num,
.lp-week-block-lime,
.lp-bubble,
.lp-maths-card,
.lp-dot {
  box-sizing: content-box;
}

html {
  background: var(--lp-ink);
  -webkit-text-size-adjust: 100%;
  /* Room for the marquee pinned along the bottom, so a focused link is never behind it. */
  scroll-padding-bottom: 64px;
}

body.lp {
  margin: 0;
  font-family: var(--lp-font-body);
  color: var(--lp-ink);
  background: var(--lp-chalk);
  -webkit-font-smoothing: antialiased;
}

/* The attribute must win over any display a .lp-* rule sets, or a hidden panel shows. */
[hidden] {
  display: none !important;
}

/* Desktop only: what the phone design leaves out. */
@media (max-width: 899.98px) {
  .lp-d {
    display: none !important;
  }
}

.lp-wrap {
  max-width: calc(1280px + 2 * var(--lp-gutter));
  margin-inline: auto;
  padding-inline: var(--lp-gutter);
}

/* Read aloud, never seen: the calculator's live announcement. */
.lp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--lp-focus);
  outline-offset: 3px;
}

:focus:not(:focus-visible),
#main:focus {
  outline: none;
}

.lp-skip {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--lp-lime);
  color: var(--lp-ink);
  font-weight: 800;
  text-decoration: none;
}

.lp-skip:focus {
  top: 12px;
}

/* A queued message ("You have signed out."), one band each above the page. */
.lp-flash {
  margin: 0;
  padding: 12px var(--lp-gutter);
  background: var(--lp-lime);
  color: var(--lp-ink);
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}

/* ---------- Buttons and pills ---------- */

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--lp-font-body);
  text-decoration: none;
  cursor: pointer;
}

.lp-btn-lime {
  background: var(--lp-lime);
  color: var(--lp-ink);
  font-weight: 800;
}

.lp-btn-ghost {
  border: 1.5px solid var(--lp-ink-line);
  color: var(--lp-chalk);
  font-weight: 700;
}

.lp-pill {
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 8px;
}

.lp-pill-lime {
  background: var(--lp-lime);
  color: var(--lp-ink);
}

.lp-pill-line {
  border: 1px solid var(--lp-ink-line);
  color: var(--lp-chalk);
}

@media (min-width: 900px) {
  .lp-pill {
    font-size: 13px;
    padding: 5px 10px;
  }
}

/* ---------- Header ---------- */

/*
 * The phone design's header needs 364px of column, so below a 412px screen "Sign in" and
 * "Start free" would each wrap onto two lines. --lp-squeeze grows from 0 at 412px to 52px
 * at 360px, and the wordmark (20px to 15.5px), the gaps (12px to 8px) and the button's
 * padding (16px to 14px) give that much back. At 412px and up it is the design's header.
 */
.lp-header {
  --lp-squeeze: clamp(0px, 412px - 100vw, 52px);
  background: var(--lp-ink);
  color: var(--lp-chalk);
  --lp-focus: var(--lp-lime);
}

.lp-header-inner {
  display: flex;
  align-items: center;
  gap: calc(12px - var(--lp-squeeze) / 13);
  padding-block: 16px;
}

.lp-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--lp-chalk);
  text-decoration: none;
}

.lp-brand .lp-logo {
  width: 28px;
  height: 28px;
}

.lp-logo-wing {
  fill: var(--lp-lime);
}

.lp-logo-fold {
  stroke: var(--lp-ink);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.lp-wordmark {
  font-family: var(--lp-font-display);
  font-weight: 800;
  font-size: calc(20px - var(--lp-squeeze) * 4.5 / 52);
  letter-spacing: -0.03em;
}

.lp-nav {
  display: flex;
  align-items: center;
  gap: calc(12px - var(--lp-squeeze) / 13);
  margin-left: auto;
}

.lp-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--lp-ink-muted);
  text-decoration: none;
}

.lp-nav-signin {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--lp-ink-muted);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.lp-btn-nav {
  min-height: 44px;
  padding: 0 calc(16px - var(--lp-squeeze) / 26);
  font-size: 14px;
}

@media (min-width: 900px) {
  .lp-header-inner {
    flex-wrap: wrap;
    gap: 16px 32px;
    padding-block: 20px;
  }

  .lp-brand {
    gap: 10px;
  }

  .lp-brand .lp-logo {
    width: 34px;
    height: 34px;
  }

  .lp-wordmark {
    font-size: 23px;
  }

  .lp-nav {
    flex-wrap: wrap;
    gap: 8px 28px;
    font-size: 15px;
    font-weight: 600;
  }

  .lp-nav-signin {
    color: var(--lp-chalk);
    font-size: inherit;
    font-weight: inherit;
  }

  .lp-btn-nav {
    padding: 0 20px;
    font-size: inherit;
  }
}

/* ---------- Hero ---------- */

.lp-hero {
  background: var(--lp-ink);
  color: var(--lp-chalk);
  padding-block: 28px 40px;
  --lp-focus: var(--lp-lime);
}

.lp-hero-inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.lp-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.lp-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 12px;
  border: 1px solid var(--lp-ink-line);
  border-radius: 999px;
  color: var(--lp-ink-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lp-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lp-lime);
}

.lp-h1 {
  margin: 0;
  font-family: var(--lp-font-display);
  font-weight: 800;
  font-size: clamp(2.625rem, 6.2vw, 5.5rem);
  line-height: 0.96;
  letter-spacing: -0.035em;
}

.lp-h1 span {
  display: block;
}

.lp-h1-accent {
  color: var(--lp-lime);
}

.lp-lede {
  margin: 0;
  color: var(--lp-ink-soft);
  font-size: 17px;
  line-height: 1.5;
}

.lp-hero-ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lp-btn-xl {
  min-height: 56px;
  padding: 0 24px;
  font-size: 17px;
}

.lp-hero-note {
  margin: 0;
  color: var(--lp-ink-muted);
  font-size: 13px;
}

.lp-hero-demo {
  min-width: 0;
}

@media (min-width: 900px) {
  .lp-hero {
    padding-block: 56px 88px;
  }

  .lp-hero-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 56px 64px;
  }

  .lp-hero-copy {
    flex: 1 1 480px;
    gap: 28px;
  }

  .lp-hero-demo {
    flex: 1 1 440px;
  }

  .lp-badge {
    gap: 10px;
    padding: 8px 14px;
    font-size: 13px;
  }

  .lp-badge-dot {
    width: 9px;
    height: 9px;
  }

  .lp-lede {
    max-width: 560px;
    font-size: 20px;
  }

  .lp-hero-ctas {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
  }

  .lp-btn-xl.lp-btn-lime {
    padding: 0 28px;
  }

  .lp-hero-note {
    font-size: 14px;
  }
}

/* ---------- The extraction demo ---------- */

.lp-demo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--lp-ink-rule);
  border-radius: 20px;
  background: var(--lp-ink-raised);
}

.lp-demo-file {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lp-demo-file-icon {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--lp-ink-muted);
}

.lp-demo-filename {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lp-demo-pages {
  flex: none;
  margin-left: auto;
  padding: 3px 8px;
  border: 1px solid var(--lp-ink-line);
  border-radius: 999px;
  color: var(--lp-ink-muted);
  font-size: 11px;
  font-weight: 700;
}

.lp-demo-state {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lp-excerpt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--lp-ink);
  color: var(--lp-ink-dim);
  font-size: 13px;
  line-height: 1.5;
}

.lp-excerpt p {
  margin: 0;
}

.lp-excerpt mark {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--lp-ink-mark);
  color: var(--lp-chalk);
}

.lp-excerpt-label {
  color: var(--lp-ink-faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lp-excerpt-more {
  color: var(--lp-ink-faint);
}

.lp-btn-extract {
  gap: 8px;
  min-height: 50px;
  padding: 0 20px;
  font-size: 15px;
}

.lp-btn-extract .lp-icon-arrow {
  width: 16px;
  height: 16px;
}

.lp-demo-found {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--lp-lime);
  font-size: 13px;
  font-weight: 700;
}

/* Focus lands here after "Extract" so a keyboard or screen-reader user follows the swap,
   but it is a status line, not a control, and the design draws no ring around it. */
.lp-demo-found:focus {
  outline: none;
}

.lp-icon-check {
  flex: none;
  width: 16px;
  height: 16px;
}

.lp-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-row {
  --lp-row-big: 19px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--lp-ink);
}

/*
 * Sized from the big line's own font size, not in pixels: Syne 800 is wide, and "NOV",
 * the widest label, needs 3.77 times its size. The design's 52px held two digits and
 * let "THU" and "NOV" run into the title beside them.
 */
.lp-row-when {
  flex: none;
  width: calc(3.9 * var(--lp-row-big));
  line-height: 1.05;
  text-align: center;
}

.lp-row-big,
.lp-row-small,
.lp-row-title,
.lp-row-sub {
  display: block;
}

.lp-row-big {
  font-family: var(--lp-font-display);
  font-weight: 800;
  font-size: var(--lp-row-big);
  text-transform: uppercase;
}

.lp-row-small {
  color: var(--lp-ink-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lp-row-what {
  flex: 1 1 auto;
  min-width: 0;
}

.lp-row-title {
  font-size: 14px;
  font-weight: 700;
}

.lp-row-sub {
  color: var(--lp-ink-muted);
  font-size: 12px;
}

.lp-demo-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp-btn-md {
  min-height: 48px;
  padding: 0 20px;
  font-size: 15px;
}

.lp-btn-reset {
  min-height: 44px;
  padding: 0 16px;
  font-size: 14px;
}

@media (min-width: 900px) {
  .lp-demo {
    gap: 18px;
    padding: 22px;
    border-radius: 22px;
  }

  .lp-demo-file {
    flex-wrap: wrap;
    gap: 10px 14px;
  }

  .lp-demo-file-icon {
    width: 28px;
    height: 28px;
  }

  .lp-demo-filename {
    overflow: visible;
    font-size: 15px;
    white-space: normal;
  }

  .lp-demo-pages {
    padding: 4px 10px;
    font-size: 12px;
  }

  .lp-demo-state {
    gap: 18px;
  }

  .lp-excerpt {
    gap: 10px;
    padding: 18px 20px;
    border-radius: 14px;
    font-size: 14px;
  }

  .lp-excerpt-label {
    font-size: 11px;
  }

  .lp-btn-extract {
    gap: 10px;
    min-height: 52px;
    padding: 0 22px;
    font-size: 16px;
  }

  .lp-btn-extract .lp-icon-arrow {
    width: 18px;
    height: 18px;
  }

  .lp-demo-found {
    gap: 10px;
    font-size: 14px;
  }

  .lp-icon-check {
    width: 18px;
    height: 18px;
  }

  .lp-rows {
    gap: 8px;
  }

  .lp-row {
    --lp-row-big: 22px;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 14px;
  }

  .lp-row-small {
    font-size: 11px;
  }

  .lp-row-title {
    font-size: 15px;
  }

  .lp-row-sub {
    font-size: 13px;
  }

  .lp-demo-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .lp-btn-reset {
    min-height: 48px;
    padding: 0 18px;
    font-size: 15px;
  }
}

/* With scripting off nothing can swap the two states, so the excerpt stands alone. */
@media (scripting: none) {
  .lp-btn-extract {
    display: none;
  }
}

/* ---------- The university marquee ---------- */

/*
 * Pinned to the bottom of the screen until scrolling brings it to its own place under
 * the hero, so it shows on first load at any screen height: the hero alone is taller
 * than a laptop screen at the design's 88px headline, and than two phone screens.
 */
.lp-marquee {
  --lp-marquee-gap: 32px;
  --lp-marquee-time: 28s;
  position: sticky;
  bottom: 0;
  z-index: 1;
  overflow: hidden;
  padding-block: 12px;
  border-block: 2px solid var(--lp-ink);
  background: var(--lp-lime);
  color: var(--lp-ink);
}

/*
 * The track holds the list twice and slides left by half its own width. The left
 * padding must equal the gap: then half the track is exactly one copy plus one gap,
 * so at -50% the second copy sits where the first began and the loop has no seam.
 */
.lp-marquee-track {
  display: flex;
  gap: var(--lp-marquee-gap);
  width: max-content;
  padding-left: var(--lp-marquee-gap);
  font-family: var(--lp-font-display);
  font-weight: 800;
  font-size: 18px;
  white-space: nowrap;
  animation: lp-marquee var(--lp-marquee-time) linear infinite;
}

.lp-marquee-list {
  display: flex;
  gap: var(--lp-marquee-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

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

@media (prefers-reduced-motion: reduce) {
  .lp-marquee-track {
    animation: none;
  }
}

@media (min-width: 900px) {
  .lp-marquee {
    --lp-marquee-gap: 56px;
    --lp-marquee-time: 36s;
    padding-block: 16px;
  }

  .lp-marquee-track {
    font-size: 22px;
    letter-spacing: -0.01em;
  }
}

/* ---------- Section headings (every section after the hero) ---------- */

/* --lp-kicker lets a dark section lighten the eyebrow without another rule. */
.lp-kicker {
  margin: 0;
  color: var(--lp-kicker, var(--lp-chalk-muted));
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* The phone size differs by section (36px, 34px), so a section sets --lp-h2-phone. */
.lp-h2 {
  margin: 0;
  font-family: var(--lp-font-display);
  font-weight: 800;
  font-size: var(--lp-h2-phone, 36px);
  line-height: 1;
  letter-spacing: -0.03em;
}

@media (min-width: 900px) {
  .lp-kicker {
    font-size: 13px;
  }

  /* "How it works" and "Universities" set the design's smaller clamp through --lp-h2-desk. */
  .lp-h2 {
    font-size: var(--lp-h2-desk, clamp(36px, 4.4vw, 60px));
  }
}

/* ---------- What it does ---------- */

.lp-what {
  padding-block: 48px;
}

.lp-what-inner,
.lp-what-head,
.lp-what-heading {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lp-what-heading {
  min-width: 0;
}

.lp-what-sub {
  margin: 0;
  color: var(--lp-chalk-muted);
  font-size: 18px;
  line-height: 1.5;
}

.lp-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* On phones the numeral sits beside the text; at 900px it heads a column. */
.lp-card {
  display: flex;
  gap: 16px;
  min-width: 0;
  padding: 20px;
  border: 1.5px solid var(--lp-ink);
  border-radius: 18px;
  background: var(--lp-paper);
}

.lp-card-num {
  flex: none;
  font-family: var(--lp-font-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.lp-card-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.lp-card-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.lp-card-body {
  margin: 0;
  color: var(--lp-chalk-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* The vignettes: desktop only (.lp-d in the markup), pinned to the foot of the card. */
.lp-vignette {
  margin-top: auto;
  padding: 16px;
  border-radius: 14px;
  background: var(--lp-chalk);
}

.lp-vignette-quote {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp-quote {
  margin: 0;
  color: var(--lp-chalk-muted);
  font-size: 12px;
  line-height: 1.4;
}

.lp-icon-down {
  width: 20px;
  height: 20px;
}

.lp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lp-chip {
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.lp-chip-ink {
  background: var(--lp-ink);
  color: var(--lp-chalk);
}

.lp-chip-lime {
  background: var(--lp-lime);
  color: var(--lp-ink);
}

.lp-chip-line {
  padding: 4px 10px;
  border: 1.5px solid var(--lp-ink);
}

.lp-vignette-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lp-chat-label {
  margin: 0;
  color: var(--lp-chalk-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lp-bubble {
  align-self: flex-start;
  max-width: 92%;
  margin: 0;
  padding: 12px 14px;
  border: 1.5px solid var(--lp-ink);
  border-radius: 16px 16px 16px 4px;
  background: var(--lp-paper);
  font-size: 14px;
  line-height: 1.45;
}

.lp-week {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.lp-week-day {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lp-week-label {
  color: var(--lp-chalk-muted);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
}

.lp-week-block {
  height: 18px;
  border-radius: 6px;
  background: var(--lp-chalk-line);
}

.lp-week-block-tall {
  height: 28px;
}

.lp-week-block-ink {
  background: var(--lp-ink);
}

.lp-week-block-lime {
  height: 40px;
  border: 1.5px solid var(--lp-ink);
  background: var(--lp-lime);
}

@media (min-width: 900px) {
  .lp-what {
    padding-block: 96px;
  }

  .lp-what-inner {
    gap: 40px;
  }

  .lp-what-head {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px 48px;
  }

  .lp-what-heading {
    flex: 1 1 520px;
    gap: 14px;
  }

  .lp-what-sub {
    flex: 1 1 360px;
    min-width: 0;
  }

  /* A grid rather than the design's 320px flex row, which wraps 2 + 1 below ~1064px. */
  .lp-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .lp-card {
    flex-direction: column;
    gap: 18px;
    padding: 28px;
    border-radius: 22px;
  }

  .lp-card-num {
    font-size: 48px;
  }

  .lp-card-text {
    gap: 18px;
  }

  .lp-card-title {
    font-size: 24px;
    letter-spacing: -0.02em;
    line-height: 1.15;
  }

  .lp-card-body {
    font-size: 16px;
    line-height: 1.55;
  }
}

/* ---------- Do the maths ---------- */

.lp-maths {
  --lp-kicker: var(--lp-ink-muted);
  --lp-focus: var(--lp-lime);
  --lp-h2-phone: 34px;
  padding-block: 48px;
  background: var(--lp-ink);
  color: var(--lp-chalk);
}

.lp-maths-inner,
.lp-maths-ask {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lp-maths-ask,
.lp-maths-card {
  min-width: 0;
}

.lp-maths-intro {
  margin: 0;
  color: var(--lp-ink-soft);
  font-size: 18px;
  line-height: 1.5;
}

.lp-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lp-pick {
  min-width: 48px;
  min-height: 48px;
  padding: 1px 6px; /* the browser's own button padding, which the design leaves in place */
  border: 1.5px solid var(--lp-ink-line);
  border-radius: 999px;
  background: transparent;
  color: var(--lp-chalk);
  font-family: var(--lp-font-display);
  font-weight: 800;
  font-size: 19px;
  cursor: pointer;
}

.lp-pick[aria-pressed="true"] {
  border-color: var(--lp-lime);
  background: var(--lp-lime);
  color: var(--lp-ink);
}

.lp-maths-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--lp-ink-rule);
  border-radius: 18px;
  background: var(--lp-ink-raised);
}

.lp-figures {
  display: flex;
  gap: 24px;
}

.lp-figure {
  flex: 1 1 0;
  margin: 0;
}

.lp-figure-n,
.lp-figure-label {
  display: block;
}

.lp-figure-n {
  font-family: var(--lp-font-display);
  font-weight: 800;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.lp-figure-lime {
  color: var(--lp-lime);
}

.lp-figure-label {
  margin-top: 6px;
  color: var(--lp-ink-soft);
  font-size: 13px;
  font-weight: 600;
}

.lp-maths-rule {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--lp-ink-rule);
}

.lp-verdict {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* On phones, the size and weight of the phone design's <strong> lead-in. */
.lp-verdict-title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.lp-verdict-body {
  margin: 0;
  color: var(--lp-ink-soft);
  font-size: 15px;
  line-height: 1.5;
}

.lp-btn-outline-lime {
  align-self: flex-start;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border: 1.5px solid var(--lp-lime);
  color: var(--lp-lime);
  font-size: 15px;
  font-weight: 800;
}

.lp-maths-foot {
  margin: 0;
  color: var(--lp-ink-dim);
  font-size: 12px;
}

@media (min-width: 900px) {
  .lp-maths {
    padding-block: 96px;
  }

  /* The design's own wrapping row: side by side from about 996px, stacked below. */
  .lp-maths-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 48px 72px;
  }

  .lp-maths-ask {
    flex: 1 1 440px;
    gap: 22px;
  }

  .lp-maths-card {
    flex: 1 1 420px;
    gap: 24px;
    padding: 32px;
    border-radius: 22px;
  }

  .lp-picker {
    gap: 10px;
  }

  .lp-pick {
    min-width: 56px;
    min-height: 56px;
    font-size: 22px;
  }

  .lp-figures {
    flex-wrap: wrap;
    gap: 24px 40px;
  }

  .lp-figure {
    flex: 1 1 160px;
  }

  .lp-figure-n {
    font-size: 72px;
  }

  .lp-figure-label {
    margin-top: 8px;
    font-size: 15px;
  }

  .lp-verdict-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
  }

  .lp-verdict-body {
    font-size: 16px;
  }
}

/* ---------- Pricing ---------- */

.lp-pricing {
  --lp-h2-phone: 34px;
  padding-block: 48px;
}

.lp-pricing-inner,
.lp-pricing-head {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lp-pricing-sub {
  margin: 0;
  color: var(--lp-chalk-muted);
  font-size: 18px;
  line-height: 1.5;
}

.lp-plans {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lp-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 22px;
  border: 1.5px solid var(--lp-ink);
  border-radius: 18px;
}

.lp-plan-free {
  background: var(--lp-paper);
}

/* No border on phones, as in the phone design; the desktop design gives it an ink one. */
.lp-plan-pro {
  --lp-focus: var(--lp-lime);
  border: 0;
  background: var(--lp-ink);
  color: var(--lp-chalk);
}

.lp-plan-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lp-plan-name {
  margin: 0;
  color: var(--lp-chalk-muted);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lp-plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.lp-plan-amount {
  font-family: var(--lp-font-display);
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.04em;
}

.lp-plan-per {
  color: var(--lp-ink-muted);
  font-size: 14px;
  font-weight: 700;
}

.lp-plan-note {
  margin: 0;
  color: var(--lp-chalk-muted);
  font-size: 15px;
}

.lp-plan-pro .lp-plan-name,
.lp-plan-pro .lp-plan-note {
  color: var(--lp-ink-muted);
}

.lp-plan-pro .lp-plan-amount,
.lp-plan-pro .lp-tick {
  color: var(--lp-lime);
}

.lp-plan-tag {
  position: absolute;
  top: 16px;
  right: 16px;
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--lp-lime);
  color: var(--lp-ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lp-ticks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 1.4;
}

.lp-ticks li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.lp-tick {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
}

/* Pushed to the foot of the card, so the two buttons line up whatever the lists hold. */
/* Full width on phones with no side padding, as in the phone design; 22px from 900px. */
.lp-btn-plan {
  margin-top: auto;
  min-height: 48px;
  padding: 0;
  font-size: 15px;
}

.lp-btn-ink-line {
  border: 1.5px solid var(--lp-ink);
  color: var(--lp-ink);
  font-weight: 800;
}

@media (min-width: 900px) {
  .lp-pricing {
    padding-block: 96px;
  }

  .lp-pricing-inner {
    gap: 40px;
  }

  .lp-pricing-head {
    max-width: 720px;
    gap: 14px;
  }

  .lp-plans {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .lp-plan {
    flex: 1 1 360px;
    gap: 22px;
    padding: 32px;
    border-radius: 22px;
  }

  .lp-plan-amount {
    font-size: 56px;
  }

  .lp-plan-per {
    font-size: 16px;
  }

  .lp-plan-tag {
    top: 20px;
    right: 20px;
    font-size: 12px;
  }

  .lp-ticks {
    font-size: 16px;
  }

  .lp-plan-pro {
    border: 1.5px solid var(--lp-ink);
  }

  .lp-btn-plan {
    min-height: 52px;
    padding: 0 22px;
    font-size: 16px;
  }
}

/* ---------- How it works ---------- */

.lp-how {
  --lp-h2-phone: 32px;
  --lp-h2-desk: clamp(32px, 3.6vw, 48px);
  padding-block: 48px;
  border-block: 1.5px solid var(--lp-ink);
  background: var(--lp-paper);
}

.lp-how-inner {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.lp-steps {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-step {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  min-width: 0;
}

.lp-step-num {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--lp-ink);
  border-radius: 50%;
  background: var(--lp-lime);
  font-family: var(--lp-font-display);
  font-weight: 800;
  font-size: 20px;
}

.lp-step-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.lp-step-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.lp-step-body {
  margin: 0;
  color: var(--lp-chalk-muted);
  font-size: 15px;
  line-height: 1.5;
}

@media (min-width: 900px) {
  .lp-how {
    padding-block: 80px;
  }

  .lp-how-inner {
    gap: 36px;
  }

  /* A grid rather than the design's 300px flex row, which leaves step 3 alone below ~1004px. */
  .lp-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .lp-step-title {
    font-size: 20px;
  }

  .lp-step-body {
    font-size: 16px;
  }
}

/* ---------- Universities ---------- */

.lp-unis {
  --lp-h2-phone: 32px;
  --lp-h2-desk: clamp(32px, 3.6vw, 48px);
  padding-block: 48px;
}

.lp-unis-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lp-unis-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.lp-unis-note {
  margin: 0;
  color: var(--lp-chalk-muted);
  font-size: 16px;
  line-height: 1.5;
}

.lp-unis-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-uni {
  padding: 9px 16px;
  border: 1.5px solid var(--lp-ink);
  border-radius: 999px;
  background: var(--lp-paper);
  font-family: var(--lp-font-display);
  font-weight: 800;
  font-size: 16px;
}

.lp-uni-yours {
  border-style: dashed;
  border-color: var(--lp-chalk-muted);
  background: transparent;
  color: var(--lp-chalk-muted);
}

@media (min-width: 900px) {
  .lp-unis {
    padding-block: 96px;
  }

  /* The design's own wrapping row: a forced grid would squeeze the h2 past its column. */
  .lp-unis-inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px 72px;
  }

  .lp-unis-head {
    flex: 1 1 360px;
  }

  .lp-unis-note {
    font-size: 17px;
  }

  .lp-unis-list {
    flex: 2 1 560px;
    gap: 10px;
  }

  .lp-uni {
    padding: 12px 20px;
    font-size: 20px;
  }
}

/* ---------- Privacy ---------- */

/* No top padding: the universities section's own bottom padding sits above the card. */
.lp-privacy {
  --lp-h2-phone: 32px;
  --lp-h2-desk: 32px;
  padding-block: 0 48px;
}

.lp-privacy-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 22px;
  border: 1.5px solid var(--lp-ink);
  border-radius: 18px;
  background: var(--lp-paper);
}

.lp-privacy-head {
  min-width: 0;
}

.lp-privacy-head .lp-h2 {
  margin-bottom: 10px;
}

.lp-privacy-sub {
  margin: 0;
  color: var(--lp-chalk-muted);
  font-size: 16px;
  line-height: 1.5;
}

.lp-privacy-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
  line-height: 1.45;
}

.lp-privacy-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* The design's 10px dot, its border drawn outside it (content-box, see the base rules). */
.lp-dot {
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border: 1.5px solid var(--lp-ink);
  border-radius: 50%;
  background: var(--lp-lime);
}

@media (min-width: 900px) {
  .lp-privacy {
    padding-block: 0 96px;
  }

  .lp-privacy-card {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 28px 48px;
    padding: 36px;
    border-radius: 22px;
  }

  .lp-privacy-head {
    flex: 1 1 300px;
  }

  .lp-privacy-list {
    flex: 2 1 480px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
  }
}

/* ---------- Closing call to action ---------- */

.lp-start {
  --lp-focus: var(--lp-lime);
  padding-block: 56px 0;
  background: var(--lp-ink);
  color: var(--lp-chalk);
}

.lp-start-inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/*
 * The largest type on the page: 7vw against the hero's 6.2vw, up to 112px against its
 * 88px. The min() is a guard for narrow phones: "Organised" is about 7.8 times the font
 * size wide in Syne 800, so a 48px floor overflows a 390px phone's 350px column. Capping
 * the size at an eighth of the column gives ~44px there (the phone design's own size)
 * and leaves desktop untouched, where the cap is far above the clamp.
 */
.lp-start-title {
  max-width: 1100px;
  margin: 0;
  font-family: var(--lp-font-display);
  font-weight: 800;
  font-size: min(clamp(48px, 7vw, 112px), calc((100vw - 2 * var(--lp-gutter)) / 8));
  line-height: 0.94;
  letter-spacing: -0.04em;
}

.lp-start-ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Full width on phones with no side padding, as in the phone design. */
.lp-btn-xxl {
  min-height: 56px;
  padding: 0;
  font-size: 17px;
}

.lp-start-note {
  margin: 0;
  color: var(--lp-ink-muted);
  font-size: 13px;
}

/* ---------- Footer ---------- */

.lp-footer {
  --lp-focus: var(--lp-lime);
  padding-block: 36px 32px;
  background: var(--lp-ink);
  color: var(--lp-ink-muted);
}

.lp-footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding-top: 18px;
  border-top: 1px solid var(--lp-ink-rule);
  font-size: 13px;
}

.lp-footer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--lp-chalk);
  font-weight: 700;
}

/* The design's footer mark is the wing alone. */
.lp-footer .lp-logo {
  width: 20px;
  height: 20px;
}

.lp-footer .lp-logo-fold {
  display: none;
}

.lp-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

/*
 * The design's own height, which a 44px box would break twice: the row would grow, and
 * the focus ring would be drawn round the whole box, a tall square that cuts into the
 * line above on phones. So the box stays the text's and the ::before is the target,
 * 44px tall, centred on it, reaching into the padding and the gap around the row.
 */
.lp-footer-link {
  position: relative;
  color: var(--lp-ink-muted);
  text-decoration: none;
}

.lp-footer-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  min-height: 44px;
  translate: 0 -50%;
}

@media (min-width: 900px) {
  .lp-start {
    padding-block: 112px 0;
  }

  .lp-start-inner {
    align-items: flex-start;
    gap: 32px;
  }

  .lp-start-ctas {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
  }

  .lp-btn-xxl {
    min-height: 60px;
    padding: 0 24px;
    font-size: 18px;
  }

  .lp-btn-xxl.lp-btn-lime {
    padding: 0 32px;
  }

  .lp-start-note {
    font-size: 14px;
  }

  .lp-footer {
    padding-block: 80px 64px;
  }

  .lp-footer-row {
    gap: 12px 28px;
    padding-top: 24px;
    font-size: 14px;
  }

  .lp-footer-nav {
    margin-left: auto;
  }
}

/* ---------- The sample semester (templates/landing/how_it_works.html) ---------- */

/*
 * The landing's parts around two demos that are the app's own markup, drawn by app.css:
 * an ink hero at the legal title's size, then chalk sections headed as the landing's are,
 * then the closing band and the footer.
 */
.lp-sample-hero {
  --lp-kicker: var(--lp-ink-muted);
  padding-block: 32px 48px;
  background: var(--lp-ink);
  color: var(--lp-chalk);
}

.lp-sample-hero-inner {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.lp-sample-title {
  max-width: 980px;
  margin: 0;
  font-family: var(--lp-font-display);
  font-weight: 800;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1;
  letter-spacing: -0.03em;
}

.lp-sample {
  padding-top: 48px;
}

/* Chalk between the last section and the ink band. */
.lp-sample + .lp-start {
  margin-top: 48px;
}

.lp-sample-inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lp-sample-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 760px;
}

.lp-sample-sub {
  margin: 0;
  color: var(--lp-chalk-muted);
  font-size: 17px;
  line-height: 1.5;
}

/*
 * Below 900px the week is wider than a phone. It scrolls sideways inside its card on
 * Schedule, but this demo is inert and an inert subtree takes no swipe, so this box
 * scrolls instead: the demo is as wide as the card's own minimum (app.css: the inner's
 * 720px and the card's two 1.5px borders), which keeps the card's scroller still.
 */
.lp-sample-scroll {
  overflow-x: auto;
}

.lp-sample-demo-week {
  min-width: 723px;
}

.lp-sample-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--lp-chalk-muted);
  font-size: 14px;
  font-weight: 700;
}

.lp-sample-course {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lp-sample-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* The landing's card, stacked at every width: the title, then the message. */
.lp-sample-card {
  flex-direction: column;
}

.lp-sample-mail {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp-sample-subject {
  margin: 0;
  font-family: var(--lp-font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.lp-sample-line {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
}

.lp-sample-line strong {
  font-weight: 800;
}

.lp-sample-meta {
  margin: 0;
  color: var(--lp-chalk-muted);
  font-size: 13px;
}

@media (min-width: 900px) {
  .lp-sample-hero {
    padding-block: 56px 80px;
  }

  .lp-sample-hero-inner {
    gap: 24px;
  }

  .lp-sample {
    padding-top: 96px;
  }

  .lp-sample + .lp-start {
    margin-top: 96px;
  }

  .lp-sample-inner {
    gap: 32px;
  }

  .lp-sample-sub {
    font-size: 18px;
  }

  .lp-sample-demo-week {
    min-width: 0;
  }

  .lp-sample-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

/* ---------- Legal pages (templates/landing/legal.html) ---------- */

.lp-legal {
  padding-block: 48px;
}

/* Left on the landing's grid, at a line length that reads, as the pricing head is. */
.lp-legal-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.lp-legal-head,
.lp-legal-card {
  width: 100%;
  max-width: 760px;
}

.lp-legal-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lp-legal-title {
  margin: 0;
  font-family: var(--lp-font-display);
  font-weight: 800;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1;
  letter-spacing: -0.03em;
}

.lp-legal-meta {
  margin: 0;
  color: var(--lp-chalk-muted);
  font-size: 14px;
}

/* The privacy card's frame. */
.lp-legal-card {
  padding: 22px;
  border: 1.5px solid var(--lp-ink);
  border-radius: 18px;
  background: var(--lp-paper);
}

/* What LegalDocument.body_html emits: h2, h3, p, ul and strong, and nothing else. */
.lp-prose {
  font-size: 16px;
  line-height: 1.6;
}

.lp-prose > * {
  margin: 0;
}

.lp-prose > * + * {
  margin-top: 16px;
}

.lp-prose > * + h2,
.lp-prose > * + h3 {
  margin-top: 28px;
}

.lp-prose h2,
.lp-prose h3 {
  font-family: var(--lp-font-display);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.lp-prose h2 {
  font-size: 22px;
}

.lp-prose h3 {
  font-size: 18px;
}

.lp-prose ul {
  padding-left: 20px;
}

.lp-prose strong {
  font-weight: 800;
}

@media (min-width: 900px) {
  .lp-legal {
    padding-block: 96px;
  }

  .lp-legal-inner {
    gap: 32px;
  }

  .lp-legal-card {
    padding: 36px;
    border-radius: 22px;
  }

  .lp-prose {
    font-size: 17px;
  }

  .lp-prose h2 {
    font-size: 26px;
  }

  .lp-prose h3 {
    font-size: 20px;
  }
}