/* landing: ordered source sections, combined by the asset build. */
/* Landing page in Duolingo's manner: a 70px sticky nav that grows a button
   once the hero scrolls away, 50px lip buttons, a hero of the app beside a
   headline and two stacked buttons, rows of one idea each with a lowercase
   display heading over grey copy (landing-top-sections.css), then pricing,
   questions and a full-bleed brand footer with pale link columns. Learn
   Britain's logo blue carries the accent, and the moose is the mascot.
   Dark mode restates the tokens later in the file. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}
.wrap {
  max-width: none;
  padding: 0;
}
.landing {
  color-scheme: light dark;
  --paper: #fff;
  --panel: #f8fbfd;
  --ink: #404b60;
  --ink-1: #4c586e;
  --ink-2: #5c6980;
  --ink-3: #667286;
  --line: #dce1e6;
  --lip: #d4dce0;
  --brand: #d52b3a;
  --brand-lip: #ad1e2e;
  --brand-hover: #ec757f;
  --brand-soft: #fff0f1;
  --brand-line: #f5a0aa;
  --brand-ink: #9d1627;
  /* Labels on the brand fill are white, the owner's call for every button and
     badge (see .btn-press.primary): 2.10:1, the site's one contrast exception. */
  --on-brand: #fff;
  --green-lip: #44aa0b;
  --green-soft: #dcfcd0;
  --green-line: #a9ea91;
  --red-lip: #e43724;
  --red-soft: #fee0dd;
  --red-line: #fdb4ab;
  --orange: #ff8900;
  --moose: #f6a21c;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  background: var(--paper);
  color: var(--ink);
  font-family: Nunito, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.4;
  overflow-x: clip;
}
.landing img {
  max-width: 100%;
  height: auto;
  display: block;
}
.landing a {
  color: var(--brand-ink);
}
.landing button {
  font-family: inherit;
}
.landing h1,
.landing h2,
.landing h3 {
  font-family: Nunito, sans-serif;
  margin: 0;
}
.landing :where(a, button, summary, video):focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 16px;
  z-index: 100;
  padding: 10px 20px;
  background: var(--paper);
  border: 2px solid var(--brand);
  border-radius: 12px;
  font-weight: 700;
  transform: translateY(-180%);
}
.skip-link:focus {
  transform: translateY(0);
}
/* Pressable buttons: a 46px face plus a solid 4px lip that closes on press,
   uppercase 15px with .8px tracking, 12px corners. The secondary is white
   with a 2px stroke and a 2px lip. */
.btn-press {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: 46px;
  margin-bottom: 4px;
  padding: 10px 16px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.8px;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition:
    transform 0.1s var(--ease),
    box-shadow 0.1s var(--ease),
    background-color 0.15s;
}
/* The owner's call: the primary CTA keeps white on the brand blue. That is
   2.10:1 against AA's 4.5:1 — the deliberate exception to the contrast pass,
   kept here rather than spread, so the rest of the page stays compliant. */
.btn-press.primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 4px 0 var(--brand-lip);
}
.btn-press.primary:hover {
  background: var(--brand-hover);
}
.btn-press.primary:active {
  transform: translateY(4px);
  box-shadow: none;
}
.btn-press.secondary {
  min-height: 48px;
  margin-bottom: 2px;
  border: 2px solid var(--line);
  background: var(--paper);
  color: var(--brand-ink);
  box-shadow: 0 2px 0 var(--line);
}
.btn-press.secondary:hover {
  background: var(--panel);
}
.btn-press.secondary:active {
  transform: translateY(2px);
  box-shadow: none;
}
.btn-press span {
  font-size: inherit;
}
/* Nav: logo left, a muted uppercase link right; once the hero copy has
   scrolled under it the link swaps for the primary button and the bar gains
   a 2px bottom rule. Without JS it simply stays in the rest state. */
.land-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s;
}
.land-nav.is-scrolled {
  border-bottom-color: var(--line);
}
.land-nav-inner {
  width: min(988px, calc(100% - 48px));
  height: 70px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand-lockup {
  display: flex;
  align-items: center;
  height: 56px;
  flex-shrink: 0;
  text-decoration: none;
}
/* The wordmark is live text in Fredoka Bold, the same mark the study app's rail uses. */
.landing .wordmark {
  font:
    700 34px/1 Fredoka,
    Nunito,
    system-ui,
    sans-serif;
  letter-spacing: -0.4px;
  color: #d52b3a;
  white-space: nowrap;
}
.land-nav-links {
  display: flex;
  align-items: center;
}
.landing .land-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--ink-3);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-decoration: none;
}
.landing .land-nav-link:hover {
  color: var(--ink-2);
}
.land-nav-link svg {
  width: 14px;
  height: 14px;
}
.land-nav-cta {
  display: none;
  margin-bottom: 0;
}
.mobile-start {
  display: none;
}
.land-nav.is-scrolled .land-nav-link {
  display: none;
}
.land-nav.is-scrolled .land-nav-cta {
  display: inline-flex;
}
/* Crumpet leads into Britain's stories. Keep the scene and invitation together
   instead of stretching this opening across every available viewport height. */
.land-hero {
  width: min(1120px, calc(100% - 64px));
  margin: auto;
  padding: 54px 0 28px;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: 48px;
}
.hero-art {
  position: relative;
  min-width: 0;
}
.hero-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding-bottom: 12px;
}
.hero-copy h1 {
  font-size: clamp(40px, 5.2vw, 62px);
  font-weight: 900;
  line-height: 1.08;
  color: var(--ink);
  letter-spacing: -1.2px;
  text-wrap: balance;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  margin-top: 30px;
}
.hero-actions .btn-press {
  min-height: 56px;
  padding: 14px 25px;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}
.hero-actions .secondary {
  min-height: 48px;
  padding-inline: 4px;
  border: 0;
  box-shadow: none;
  background: transparent;
}
.hero-actions .secondary:hover {
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 5px;
}
.hero-trust {
  margin: 17px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-3);
}
.install-hint {
  max-width: 330px;
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink-2);
}
.install-hint b {
  color: var(--ink);
}
.install-hint a {
  font-weight: 700;
}
/* The reel sits in a handset drawn flat and friendly: a
   white, pale-rimmed face on a solid brand-blue body, tipped so the body shows
   along the right and bottom edges. The body is four plates 14px apart on the
   z-axis under a mild perspective, so it is a real extrusion: the side facing
   the viewer is the side that shows, as thick as the angle makes it, and its
   edges stay flush with the face. Each plate carries a short in-plane sweep
   down and to the right that bridges the gap to the plate behind it. It is a
   picture, not a link: a tap or a swipe on it never leaves the page. */
.reel-preview {
  display: block;
  width: 258px;
  max-width: 100%;
  margin: auto;
  perspective: 1200px;
  perspective-origin: 50% 40%;
}
.reel-device {
  --pitch: 14px;
  position: relative;
  display: block;
  aspect-ratio: 9/16;
  transform-style: preserve-3d;
  transform: rotateX(16deg) rotateY(-16deg) rotateZ(5deg);
}
.reel-body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}
.reel-body i {
  position: absolute;
  inset: 0;
  border-radius: 48px;
  background: var(--brand);
  box-shadow:
    2px 2px 0 var(--brand),
    4px 4px 0 var(--brand),
    6px 6px 0 var(--brand);
  transform: translateZ(calc(var(--i) * var(--pitch) * -1));
}
.reel-body i:nth-child(1) {
  --i: 1;
}
.reel-body i:nth-child(2) {
  --i: 2;
}
.reel-body i:nth-child(3) {
  --i: 3;
}
.reel-body i:nth-child(4) {
  --i: 4;
}
.reel-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 11px solid var(--brand-line);
  border-radius: 48px;
  background: #30291f;
}
/* The handset demo: the story fills the screen, its question slides up over
   it, a finger taps the answer, then the whole thing swipes on to the next. */
.reel-demo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 37px;
  background: #30291f;
}
/* Both stories ride one strip, twice the screen tall, so the swipe moves them
   as a single piece and no seam can open between them. */
.reel-demo-strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200%;
  transition: transform 0.6s var(--ease);
  will-change: transform;
}
.reel-demo-illustration {
  display: block;
  width: 100%;
  height: 50%;
  object-fit: cover;
  background: #30291f;
}
.reel-demo-card {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 18px 15px;
  background: var(--paper);
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.6s var(--ease);
  will-change: transform;
}
/* Where landing-interactions.js slides the card and the strip (data-slide).
   is-instant jumps without the transition. */
.reel-demo-card[data-slide="shown"] {
  transform: translateY(0%);
}
.reel-demo-card[data-slide="gone"] {
  transform: translateY(-100%);
}
.reel-demo-card[data-slide="below"] {
  transform: translateY(100%);
}
.reel-demo-strip[data-slide="next"] {
  transform: translateY(-50%);
}
.reel-demo-strip[data-slide="first"] {
  transform: translateY(0%);
}
.reel-demo-card.is-instant,
.reel-demo-strip.is-instant {
  transition: none;
}
.reel-demo-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.reel-demo-question {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink-1);
  text-wrap: pretty;
}
.reel-demo-answers {
  display: grid;
  gap: 5px;
  margin-top: 4px;
}
.reel-demo-answer {
  display: block;
  padding: 7px 9px;
  border: 2px solid var(--line);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink-1);
  box-shadow: 0 2px 0 var(--lip);
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}
.reel-demo-answer[data-state="correct"] {
  border-color: var(--green-line);
  background: var(--green-soft);
  color: var(--green-lip);
  box-shadow: 0 2px 0 var(--green-line);
}
.reel-demo-toast {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 800;
  color: var(--green-lip);
}
.reel-demo-finger {
  position: absolute;
  z-index: 2;
  left: var(--x);
  top: var(--y);
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  background: rgba(213, 43, 58, 0.5);
  box-shadow:
    0 0 0 3px #fff,
    0 4px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.12s var(--ease);
}
.reel-demo-finger.is-tap {
  transform: scale(0.7);
}
.reel-caption {
  display: block;
  margin-top: 34px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-3);
  text-align: center;
}
/* Feature rows: 473px copy column, illustration fills the rest, 101px between,
   alternating sides, 48px lowercase brand headings over 17px grey copy. */
.land-section {
  width: min(988px, calc(100% - 48px));
  margin: auto;
  padding: 72px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 101px;
  scroll-margin-top: 80px;
}

.reel-demo-teaching {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 50%;
  flex: none;
  padding: 30px 16px 22px;
  background: #fff;
}
.reel-demo-teaching .reel-demo-illustration {
  flex: 1;
  min-height: 0;
  height: 70%;
  width: 100%;
  object-fit: contain;
  background: #fff;
}
.reel-demo-fact {
  display: block;
  padding: 12px 8px 0;
  color: #192b42;
  font-size: 17px;
  line-height: 1.4;
  font-weight: 800;
  text-align: center;
}
.land-section.reverse {
  flex-direction: row-reverse;
}
.land-copy {
  flex: 0 0 473px;
  min-width: 0;
}
.land-art {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.land-heading {
  font-size: 48px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--brand-ink);
  letter-spacing: -0.2px;
  text-wrap: balance;
}
.section-copy {
  margin: 24px 0 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
  color: var(--ink-2);
  text-wrap: pretty;
}
.section-copy a {
  font-weight: 700;
  text-decoration: none;
}
.section-copy a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.section-note {
  margin: 16px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--ink-3);
}
/* A row closes on a proper button. */
.section-cta {
  min-width: 240px;
  margin-top: 28px;
}
/* Every few seconds the section button dips into its own lip and springs back:
   the press it is inviting, performed once, gently. A real hover or press
   takes over from it, and it holds still for anyone who asked for less motion. */
@keyframes cta-invite {
  0%,
  86%,
  100% {
    transform: translateY(0);
    box-shadow: 0 4px 0 var(--brand-lip);
  }
  91% {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--brand-lip);
  }
  96% {
    transform: translateY(0);
    box-shadow: 0 4px 0 var(--brand-lip);
  }
}
.btn-press.primary.section-cta {
  animation: cta-invite 3.6s ease-in-out infinite;
}
.btn-press.primary.section-cta:hover,
.btn-press.primary.section-cta:active,
.btn-press.primary.section-cta:focus-visible {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .btn-press.primary.section-cta {
    animation: none;
  }
}
/* Maker note: avatar tile and heading left, copy right. */
.land-maker {
  width: min(988px, calc(100% - 48px));
  margin: auto;
  padding: 96px 0;
  display: flex;
  align-items: flex-start;
  gap: 101px;
}
.maker-intro {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.maker-avatar {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 24px;
  background: var(--moose);
  color: var(--on-brand);
  font-size: 44px;
  font-weight: 800;
  /* White on the moose's orange reads with the app's gold drop under it. */
  text-shadow: 0 2px 0 #b8790a;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.12);
}
.maker-intro h2 {
  font-size: 32px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--brand-ink);
}
.maker-copy {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 560px;
}
.maker-copy p {
  margin: 0 0 16px;
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
  color: var(--ink-2);
}
.maker-copy details {
  margin: 0 0 20px;
  border-top: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
}
.maker-copy summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  color: var(--ink-1);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
}
.maker-copy summary::-webkit-details-marker {
  display: none;
}
.maker-copy summary > span {
  color: var(--brand-ink);
  font-size: 24px;
  line-height: 1;
  transition: transform 0.2s;
}
.maker-copy details[open] summary > span {
  transform: rotate(45deg);
}
.maker-detail {
  padding: 4px 0 8px;
}
.maker-detail p {
  font-size: 15px;
  line-height: 22px;
}
.maker-copy a {
  font-weight: 700;
}
.maker-copy .maker-contact {
  margin: 0;
  font-size: 15px;
}
/* Closer and footer: the centred brand heading and button, the waving moose
   in a white valley, and a brand-blue wave rolling into the footer. */
.land-closer {
  padding: 80px 0 0;
  text-align: center;
  overflow: hidden;
}
.closer-inner {
  width: min(988px, calc(100% - 48px));
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.closer-inner h2 {
  margin: 0 0 32px;
  font-size: 48px;
  font-weight: 900;
  line-height: 1.2;
  color: var(--brand-ink);
  text-wrap: balance;
}
.closer-inner .btn-press {
  width: min(100%, 330px);
}
.closer-note {
  max-width: 520px;
  margin: 18px auto 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--ink-3);
  text-align: center;
}
.closer-note a {
  font-weight: 700;
}
.closer-scene {
  position: relative;
  height: 320px;
  margin-top: 8px;
}
.closer-moose {
  position: absolute;
  left: 50%;
  bottom: 6px;
  z-index: 1;
  width: 280px;
  transform: translateX(-50%);
}
.closer-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  display: block;
  width: 100%;
  height: 170px;
  color: var(--brand);
}
/* The owner's call, same as the primary CTA: the footer is white on the brand
   blue. That is 2.10:1 against AA's 4.5:1 — a deliberate exception, kept
   together here so the rest of the page stays compliant. It still beats the
   pale blue it replaced, which was 1.73:1 and the least readable text on the
   site. --on-brand is #fff in both themes, so the dark theme follows. */
.land-footer {
  background: var(--brand);
  color: var(--on-brand);
}
.land-footer-inner {
  width: min(988px, calc(100% - 48px));
  margin: auto;
  padding: 80px 0 56px;
  display: grid;
  grid-template-columns: repeat(4, 178px);
  justify-content: space-between;
  gap: 24px;
}
.footer-col h3 {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 700;
  color: var(--on-brand);
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.footer-col a {
  color: var(--on-brand);
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
  text-decoration: none;
}
.footer-col a:hover {
  color: var(--on-brand);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.land-footer hr {
  margin: 0;
  border: 0;
  border-top: 2px solid rgba(255, 255, 255, 0.4);
}
.footer-note {
  width: min(988px, calc(100% - 48px));
  margin: auto;
  padding: 40px 0 64px;
}
.footer-note p {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 22px;
  color: var(--on-brand);
}
.footer-note > span {
  display: block;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--on-brand);
}
/* The landing page carries its own tokens and never loads base.css, and it used
   to declare color-scheme: light — so it was the one surface that stayed white
   when everything else went dark. Same ground and ink as base.css and the
   server-rendered pages, so the product agrees with itself. The brand blue, the
   moose orange and the state colours are unchanged: they read on both grounds. */
@media (prefers-color-scheme: dark) {
  .landing {
    --paper: #0d1520;
    --panel: #131e2b;
    --ink: #f0f5fa;
    --ink-1: #dbe4ee;
    --ink-2: #a3b0bf;
    --ink-3: #98a6b6;
    --line: #233242;
    --lip: #060b11;
    --brand-soft: #3c1721;
    --brand-line: #8b2435;
    --brand-ink: #f5a0aa;
    --green-soft: #17300a;
    --green-line: #275b18;
    --red-soft: #3a2210;
    --red-line: #6d3d1c;
  }
}
@media (max-width: 1050px) {
  .land-hero {
    gap: 32px;
    padding-top: 44px;
  }
  .hero-copy h1 {
    font-size: clamp(38px, 5.2vw, 54px);
  }
  .hero-actions {
    gap: 14px;
  }
  .hero-actions .btn-press {
    padding-inline: 20px;
  }
  .hero-actions .secondary {
    padding-inline: 0;
  }
  .reel-preview {
    width: 240px;
  }
  .land-section {
    gap: 48px;
  }
  .land-copy {
    flex-basis: 400px;
  }
  .land-heading {
    font-size: 40px;
  }
  .land-maker {
    gap: 48px;
  }
  .maker-intro {
    flex-basis: 240px;
  }
  .land-footer-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}
@media (max-width: 760px) {
  .landing {
    padding-bottom: calc(84px + env(safe-area-inset-bottom));
  }
  .mobile-start {
    position: fixed;
    z-index: 30;
    inset: auto 0 0;
    display: flex;
    justify-content: center;
    padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
    background: var(--paper);
    border-top: 1px solid var(--line);
    /* Tucked away while another "Try a free mock test" is on screen;
       landing-interactions.js adds is-shown once none is. */
    transform: translateY(100%);
    visibility: hidden;
    transition:
      transform 0.2s ease,
      visibility 0s linear 0.2s;
  }
  .mobile-start.is-shown {
    transform: none;
    visibility: visible;
    transition: transform 0.2s ease;
  }
  .mobile-start .btn-press {
    width: min(100%, 420px);
    min-height: 48px;
    margin: 0;
  }
  html {
    scroll-padding-top: 70px;
  }
  .land-nav-inner {
    height: 60px;
    width: calc(100% - 32px);
    justify-content: center;
  }
  .land-nav-links {
    display: none;
  }
  .brand-lockup {
    height: 48px;
  }
  .landing .wordmark {
    font-size: 29px;
  }
  .land-hero {
    width: calc(100% - 40px);
    padding: 10px 0 22px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
  }
  .hero-copy {
    width: 100%;
    align-items: center;
    text-align: center;
    padding: 0;
  }
  .reel-preview {
    width: 220px;
  }
  .hero-copy h1 {
    font-size: 34px;
    letter-spacing: -0.6px;
  }
  .hero-actions {
    width: min(100%, 350px);
    flex-direction: column;
    gap: 4px;
    margin-top: 18px;
  }
  .hero-actions .primary {
    width: 100%;
  }
  .hero-actions .secondary {
    min-height: 40px;
    padding-block: 8px;
  }
  .hero-trust {
    margin-top: 8px;
    font-size: 13px;
  }
  .land-section,
  .land-section.reverse {
    width: calc(100% - 48px);
    min-height: 0;
    padding: 56px 0;
    flex-direction: column;
    gap: 32px;
    text-align: center;
  }
  .land-copy {
    flex: 0 0 auto;
    width: 100%;
  }
  .land-art {
    width: 100%;
  }
  .land-heading {
    font-size: 32px;
  }
  .section-copy {
    margin-top: 16px;
  }

  .land-maker {
    width: calc(100% - 48px);
    padding: 64px 0;
    flex-direction: column;
    gap: 24px;
  }
  .maker-intro {
    flex: 0 0 auto;
    gap: 16px;
  }
  .maker-avatar {
    width: 72px;
    height: 72px;
    font-size: 34px;
    border-radius: 18px;
  }
  .maker-intro h2 {
    font-size: 28px;
  }
  .land-closer {
    padding-top: 64px;
  }
  .closer-inner h2 {
    font-size: 32px;
    margin-bottom: 24px;
  }
  .closer-inner .btn-press {
    width: 100%;
  }
  .closer-scene {
    height: 230px;
  }
  .closer-moose {
    width: 190px;
  }
}
@media (max-width: 760px) {
  .closer-wave {
    height: 120px;
  }
  .land-footer-inner {
    width: calc(100% - 48px);
    padding: 56px 0 40px;
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-note {
    width: calc(100% - 48px);
    padding: 32px 0 48px;
  }
}
/* 761-899px: two columns still fitted a 400px copy block and almost nothing
   else, so the interactive demo — the page's only try-before-you-buy moment —
   was squeezed to 257px with 99px answer buttons wrapping to mismatched heights,
   beside a copy column with room to spare. Stack them; the vertical room is
   free, and the demo gets its full width back. Everything else about the tablet
   layout is left alone. */
@media (min-width: 761px) and (max-width: 899px) {
  .land-section,
  .land-section.reverse {
    flex-direction: column;
    gap: 40px;
    text-align: center;
  }
  .land-copy {
    flex: 0 0 auto;
    width: min(100%, 600px);
    margin-inline: auto;
  }
  .land-art {
    width: 100%;
  }
}
@media (max-width: 370px) {
  .landing .wordmark {
    font-size: 26px;
  }
  .hero-copy h1 {
    font-size: 30px;
  }
  .reel-preview {
    width: 200px;
  }
  .land-heading,
  .closer-inner h2 {
    font-size: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .landing * {
    animation: none !important;
    transition: none !important;
  }
}
/* Proportions without inline styles. The landing scripts set data-x and data-y
   to a whole percentage, 0–100; each rule below turns one into --x and --y (a
   position inside the nearest positioned box). One rule per whole percentage;
   tests/integration/landing.test.mjs keeps the lists complete. */
[data-x="0"] {
  --x: 0%;
}
[data-x="1"] {
  --x: 1%;
}
[data-x="2"] {
  --x: 2%;
}
[data-x="3"] {
  --x: 3%;
}
[data-x="4"] {
  --x: 4%;
}
[data-x="5"] {
  --x: 5%;
}
[data-x="6"] {
  --x: 6%;
}
[data-x="7"] {
  --x: 7%;
}
[data-x="8"] {
  --x: 8%;
}
[data-x="9"] {
  --x: 9%;
}
[data-x="10"] {
  --x: 10%;
}
[data-x="11"] {
  --x: 11%;
}
[data-x="12"] {
  --x: 12%;
}
[data-x="13"] {
  --x: 13%;
}
[data-x="14"] {
  --x: 14%;
}
[data-x="15"] {
  --x: 15%;
}
[data-x="16"] {
  --x: 16%;
}
[data-x="17"] {
  --x: 17%;
}
[data-x="18"] {
  --x: 18%;
}
[data-x="19"] {
  --x: 19%;
}
[data-x="20"] {
  --x: 20%;
}
[data-x="21"] {
  --x: 21%;
}
[data-x="22"] {
  --x: 22%;
}
[data-x="23"] {
  --x: 23%;
}
[data-x="24"] {
  --x: 24%;
}
[data-x="25"] {
  --x: 25%;
}
[data-x="26"] {
  --x: 26%;
}
[data-x="27"] {
  --x: 27%;
}
[data-x="28"] {
  --x: 28%;
}
[data-x="29"] {
  --x: 29%;
}
[data-x="30"] {
  --x: 30%;
}
[data-x="31"] {
  --x: 31%;
}
[data-x="32"] {
  --x: 32%;
}
[data-x="33"] {
  --x: 33%;
}
[data-x="34"] {
  --x: 34%;
}
[data-x="35"] {
  --x: 35%;
}
[data-x="36"] {
  --x: 36%;
}
[data-x="37"] {
  --x: 37%;
}
[data-x="38"] {
  --x: 38%;
}
[data-x="39"] {
  --x: 39%;
}
[data-x="40"] {
  --x: 40%;
}
[data-x="41"] {
  --x: 41%;
}
[data-x="42"] {
  --x: 42%;
}
[data-x="43"] {
  --x: 43%;
}
[data-x="44"] {
  --x: 44%;
}
[data-x="45"] {
  --x: 45%;
}
[data-x="46"] {
  --x: 46%;
}
[data-x="47"] {
  --x: 47%;
}
[data-x="48"] {
  --x: 48%;
}
[data-x="49"] {
  --x: 49%;
}
[data-x="50"] {
  --x: 50%;
}
[data-x="51"] {
  --x: 51%;
}
[data-x="52"] {
  --x: 52%;
}
[data-x="53"] {
  --x: 53%;
}
[data-x="54"] {
  --x: 54%;
}
[data-x="55"] {
  --x: 55%;
}
[data-x="56"] {
  --x: 56%;
}
[data-x="57"] {
  --x: 57%;
}
[data-x="58"] {
  --x: 58%;
}
[data-x="59"] {
  --x: 59%;
}
[data-x="60"] {
  --x: 60%;
}
[data-x="61"] {
  --x: 61%;
}
[data-x="62"] {
  --x: 62%;
}
[data-x="63"] {
  --x: 63%;
}
[data-x="64"] {
  --x: 64%;
}
[data-x="65"] {
  --x: 65%;
}
[data-x="66"] {
  --x: 66%;
}
[data-x="67"] {
  --x: 67%;
}
[data-x="68"] {
  --x: 68%;
}
[data-x="69"] {
  --x: 69%;
}
[data-x="70"] {
  --x: 70%;
}
[data-x="71"] {
  --x: 71%;
}
[data-x="72"] {
  --x: 72%;
}
[data-x="73"] {
  --x: 73%;
}
[data-x="74"] {
  --x: 74%;
}
[data-x="75"] {
  --x: 75%;
}
[data-x="76"] {
  --x: 76%;
}
[data-x="77"] {
  --x: 77%;
}
[data-x="78"] {
  --x: 78%;
}
[data-x="79"] {
  --x: 79%;
}
[data-x="80"] {
  --x: 80%;
}
[data-x="81"] {
  --x: 81%;
}
[data-x="82"] {
  --x: 82%;
}
[data-x="83"] {
  --x: 83%;
}
[data-x="84"] {
  --x: 84%;
}
[data-x="85"] {
  --x: 85%;
}
[data-x="86"] {
  --x: 86%;
}
[data-x="87"] {
  --x: 87%;
}
[data-x="88"] {
  --x: 88%;
}
[data-x="89"] {
  --x: 89%;
}
[data-x="90"] {
  --x: 90%;
}
[data-x="91"] {
  --x: 91%;
}
[data-x="92"] {
  --x: 92%;
}
[data-x="93"] {
  --x: 93%;
}
[data-x="94"] {
  --x: 94%;
}
[data-x="95"] {
  --x: 95%;
}
[data-x="96"] {
  --x: 96%;
}
[data-x="97"] {
  --x: 97%;
}
[data-x="98"] {
  --x: 98%;
}
[data-x="99"] {
  --x: 99%;
}
[data-x="100"] {
  --x: 100%;
}
[data-y="0"] {
  --y: 0%;
}
[data-y="1"] {
  --y: 1%;
}
[data-y="2"] {
  --y: 2%;
}
[data-y="3"] {
  --y: 3%;
}
[data-y="4"] {
  --y: 4%;
}
[data-y="5"] {
  --y: 5%;
}
[data-y="6"] {
  --y: 6%;
}
[data-y="7"] {
  --y: 7%;
}
[data-y="8"] {
  --y: 8%;
}
[data-y="9"] {
  --y: 9%;
}
[data-y="10"] {
  --y: 10%;
}
[data-y="11"] {
  --y: 11%;
}
[data-y="12"] {
  --y: 12%;
}
[data-y="13"] {
  --y: 13%;
}
[data-y="14"] {
  --y: 14%;
}
[data-y="15"] {
  --y: 15%;
}
[data-y="16"] {
  --y: 16%;
}
[data-y="17"] {
  --y: 17%;
}
[data-y="18"] {
  --y: 18%;
}
[data-y="19"] {
  --y: 19%;
}
[data-y="20"] {
  --y: 20%;
}
[data-y="21"] {
  --y: 21%;
}
[data-y="22"] {
  --y: 22%;
}
[data-y="23"] {
  --y: 23%;
}
[data-y="24"] {
  --y: 24%;
}
[data-y="25"] {
  --y: 25%;
}
[data-y="26"] {
  --y: 26%;
}
[data-y="27"] {
  --y: 27%;
}
[data-y="28"] {
  --y: 28%;
}
[data-y="29"] {
  --y: 29%;
}
[data-y="30"] {
  --y: 30%;
}
[data-y="31"] {
  --y: 31%;
}
[data-y="32"] {
  --y: 32%;
}
[data-y="33"] {
  --y: 33%;
}
[data-y="34"] {
  --y: 34%;
}
[data-y="35"] {
  --y: 35%;
}
[data-y="36"] {
  --y: 36%;
}
[data-y="37"] {
  --y: 37%;
}
[data-y="38"] {
  --y: 38%;
}
[data-y="39"] {
  --y: 39%;
}
[data-y="40"] {
  --y: 40%;
}
[data-y="41"] {
  --y: 41%;
}
[data-y="42"] {
  --y: 42%;
}
[data-y="43"] {
  --y: 43%;
}
[data-y="44"] {
  --y: 44%;
}
[data-y="45"] {
  --y: 45%;
}
[data-y="46"] {
  --y: 46%;
}
[data-y="47"] {
  --y: 47%;
}
[data-y="48"] {
  --y: 48%;
}
[data-y="49"] {
  --y: 49%;
}
[data-y="50"] {
  --y: 50%;
}
[data-y="51"] {
  --y: 51%;
}
[data-y="52"] {
  --y: 52%;
}
[data-y="53"] {
  --y: 53%;
}
[data-y="54"] {
  --y: 54%;
}
[data-y="55"] {
  --y: 55%;
}
[data-y="56"] {
  --y: 56%;
}
[data-y="57"] {
  --y: 57%;
}
[data-y="58"] {
  --y: 58%;
}
[data-y="59"] {
  --y: 59%;
}
[data-y="60"] {
  --y: 60%;
}
[data-y="61"] {
  --y: 61%;
}
[data-y="62"] {
  --y: 62%;
}
[data-y="63"] {
  --y: 63%;
}
[data-y="64"] {
  --y: 64%;
}
[data-y="65"] {
  --y: 65%;
}
[data-y="66"] {
  --y: 66%;
}
[data-y="67"] {
  --y: 67%;
}
[data-y="68"] {
  --y: 68%;
}
[data-y="69"] {
  --y: 69%;
}
[data-y="70"] {
  --y: 70%;
}
[data-y="71"] {
  --y: 71%;
}
[data-y="72"] {
  --y: 72%;
}
[data-y="73"] {
  --y: 73%;
}
[data-y="74"] {
  --y: 74%;
}
[data-y="75"] {
  --y: 75%;
}
[data-y="76"] {
  --y: 76%;
}
[data-y="77"] {
  --y: 77%;
}
[data-y="78"] {
  --y: 78%;
}
[data-y="79"] {
  --y: 79%;
}
[data-y="80"] {
  --y: 80%;
}
[data-y="81"] {
  --y: 81%;
}
[data-y="82"] {
  --y: 82%;
}
[data-y="83"] {
  --y: 83%;
}
[data-y="84"] {
  --y: 84%;
}
[data-y="85"] {
  --y: 85%;
}
[data-y="86"] {
  --y: 86%;
}
[data-y="87"] {
  --y: 87%;
}
[data-y="88"] {
  --y: 88%;
}
[data-y="89"] {
  --y: 89%;
}
[data-y="90"] {
  --y: 90%;
}
[data-y="91"] {
  --y: 91%;
}
[data-y="92"] {
  --y: 92%;
}
[data-y="93"] {
  --y: 93%;
}
[data-y="94"] {
  --y: 94%;
}
[data-y="95"] {
  --y: 95%;
}
[data-y="96"] {
  --y: 96%;
}
[data-y="97"] {
  --y: 97%;
}
[data-y="98"] {
  --y: 98%;
}
[data-y="99"] {
  --y: 99%;
}
[data-y="100"] {
  --y: 100%;
}
/* The landing page in Duolingo's manner (landing.html): short lowercase
   headings in the display type over two sentences of grey copy, rows of one
   big picture each, and a hero that is the app, a headline and two stacked
   buttons. Later in landing.css than the older partials, so each size these
   rules set is set again in this file's own media queries. */
.landing .land-heading {
  font-size: 48px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--brand-ink);
  letter-spacing: -0.6px;
}
.landing .section-copy {
  margin-top: 20px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.55;
}
.land-intro {
  max-width: 660px;
  margin: 0 auto;
  text-align: center;
}
.land-section {
  padding: 96px 0;
}
.land-copy {
  flex-basis: 440px;
}
/* The hero: the app on the left, the words centred on the right. */
.land-hero {
  width: min(988px, calc(100% - 48px));
  padding: 40px 0 56px;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}
.land-hero .hero-art {
  order: -1;
}
.hero-copy {
  align-items: center;
  text-align: center;
}
.landing .hero-copy h1 {
  max-width: 13em;
  font-size: clamp(34px, 3.6vw, 44px);
  letter-spacing: -0.6px;
}
.hero-actions {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: min(100%, 340px);
  margin-top: 32px;
}
.landing .hero-actions .btn-press {
  width: 100%;
  min-height: 52px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.landing .hero-actions .secondary {
  border: 2px solid var(--line);
  box-shadow: 0 2px 0 var(--line);
  background: var(--paper);
}
.landing .hero-actions .secondary:hover {
  background: var(--panel);
  text-decoration: none;
}
.hero-trust {
  margin-top: 20px;
  text-align: center;
}
/* What is free today, in one thin band across the page. */
.land-free {
  border-block: 2px solid var(--line);
}
.land-free-inner {
  width: min(988px, calc(100% - 48px));
  margin: auto;
  padding: 22px 0;
  display: flex;
  align-items: center;
  gap: 32px;
}
.land-free-title {
  flex: 0 0 150px;
  color: var(--ink-3);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.land-free-list {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.land-free-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.land-free-list b {
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  color: var(--brand-ink);
}
.land-free-list span {
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}
.landing .section-moose {
  width: min(100%, 320px);
}

@media (max-width: 1050px) {
  .landing .land-heading {
    font-size: 40px;
  }
  .land-free-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 760px) {
  .landing .land-heading {
    font-size: 32px;
  }
  .landing .section-copy {
    font-size: 17px;
  }
  .land-section,
  .land-section.reverse {
    padding: 56px 0;
  }
  /* Stacked, a row's basis is a height: the copy takes only what it needs. */
  .land-copy {
    flex-basis: auto;
  }
  .land-hero {
    width: calc(100% - 40px);
    padding: 16px 0 32px;
    /* The lesson sits close under the words, so more of it is on the first screen. */
    gap: 24px;
  }
  .land-hero .hero-art {
    order: 0;
  }
  .landing .hero-copy h1 {
    font-size: 30px;
  }
  .hero-actions {
    margin-top: 24px;
  }
  .land-free-inner {
    width: calc(100% - 40px);
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    text-align: center;
  }
  .land-free-title {
    flex: 0 0 auto;
  }
  .land-free-list {
    gap: 14px 10px;
  }
  .land-free-list li {
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  .landing .section-moose {
    width: 220px;
  }
}
/* The conversion pass (28 Sep 2026, landing.html): what is free on a wide
   screen, and a row's own button. After landing-top-sections.css, whose sizes
   these build on. The hero's intro, the notes under its buttons and the
   question-check line under what is free went on 30 Sep 2026: too much text
   in too many sizes. */
/* What is free, on a wide screen: the title centred over four columns, each a
   big number over a short label, as the phone already shows them. */
@media (min-width: 761px) {
  .land-free-inner {
    flex-direction: column;
    gap: 20px;
    padding: 36px 0 24px;
  }
  .land-free-title {
    flex: none;
    text-align: center;
  }
  .land-free-list {
    width: min(100%, 860px);
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .land-free-list li {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
  }
  .land-free-list b {
    font-size: 44px;
  }
  .land-free-list span {
    font-size: 15px;
  }
}
/* A row's own button, under its two sentences. */
.landing .land-copy .land-cta {
  margin: 24px 0 0;
}
@media (max-width: 760px) {
  .landing .land-copy .land-cta {
    display: flex;
    justify-content: center;
  }
}
/* The hero's picture (landing.html): the app going through its first lesson
   (landing-hero-lesson.css), in the same brand-blue handset as the story
   row's (landing-keyframes-0-30.css .reel-face), on a soft brand disc. The
   phone's first picture, the learning path, carries the description. */
.app-stage {
  position: relative;
  width: min(100%, 470px);
  margin: 0 auto;
  padding: 24px 0 28px;
  isolation: isolate;
}
.app-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 96%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brand-soft);
  translate: -50% -50%;
}
.app-shot {
  width: 280px;
  margin: 0 auto;
  overflow: hidden;
  border: 11px solid var(--brand-line);
  border-radius: 48px;
  background: #fff;
  box-shadow:
    6px 6px 0 var(--brand),
    0 30px 60px -28px rgb(157 22 39 / 55%);
}
.landing .app-shot img {
  width: 100%;
  aspect-ratio: 600 / 1123;
  object-fit: cover;
}
@media (max-width: 1050px) {
  .app-shot {
    width: 250px;
  }
}
@media (max-width: 760px) {
  .hero-art {
    width: 100%;
  }
  .app-stage {
    width: min(100%, 360px);
    padding: 8px 0 12px;
  }
  /* As wide as the rows' phones (landing-moments.css .moment-handset), so
     the lesson stays readable. */
  .app-shot {
    width: 250px;
    border-width: 10px;
    border-radius: 42px;
  }
}
/* Each big row of the landing page (landing.html, landing-sections.html)
   wears one of the app's section colours (today-rules.css): a pale panel
   holds its picture, the screen from the app that the row is about, and its
   heading takes the colour's text shade, which keeps 4.5:1 on the page in
   both themes. Blue is the plan, orange the lessons, purple the practice
   tests. */
.tone-blue {
  --tone-soft: #fff0f1;
  --tone-ink: #9d1627;
}
.tone-orange {
  --tone-soft: #ffefdc;
  --tone-ink: #ab5c00;
}
.tone-purple {
  --tone-soft: #f5e7fe;
  --tone-ink: #9c59c3;
}
@media (prefers-color-scheme: dark) {
  .tone-blue {
    --tone-soft: #311a22;
    --tone-ink: #f5a0aa;
  }
  .tone-orange {
    --tone-soft: #2e1d08;
    --tone-ink: #ffb96a;
  }
  .tone-purple {
    --tone-soft: #261a30;
    --tone-ink: #e0b1fb;
  }
}
.landing .land-section .land-heading {
  color: var(--tone-ink, var(--brand-ink));
}
.moment {
  position: relative;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: min(100%, 460px);
  min-height: 420px;
  margin: 0;
  padding: 44px;
  border-radius: 40px;
  background: var(--tone-soft, var(--brand-soft));
}
/* The plan and mock rows show the whole app screen in the hero's handset
   (landing-hero-app.css .app-shot), standing straight and rising out of the
   panel's lower edge, so the screen's quiet lower half stays out of sight. */
.moment.is-phone {
  overflow: hidden;
  place-items: end center;
  padding-bottom: 0;
}
.moment-handset {
  display: block;
  box-sizing: border-box;
  width: 290px;
  height: 410px;
  overflow: hidden;
  border: 11px solid var(--brand-line);
  border-bottom: 0;
  border-radius: 44px 44px 0 0;
  background: #fff;
  box-shadow: 6px 0 0 var(--brand);
}
.landing .moment-handset > img:first-child {
  display: block;
  width: 100%;
  height: auto;
}
/* The mock row shows more of its screen: the answer it taps and the praise
   that slides up under it (landing-screen-motion.css). */
.moment.is-tall .moment-handset {
  height: 471px;
}
.moment .reel-preview {
  margin-block: 8px;
}
.moment .reel-caption {
  color: var(--ink-2);
}
.landing .moment .section-moose {
  width: min(100%, 300px);
}
@media (max-width: 760px) {
  .moment {
    width: 100%;
    min-height: 0;
    padding: 32px 24px;
    border-radius: 32px;
  }
  .moment.is-phone {
    padding-bottom: 0;
  }
  .moment-handset {
    width: 250px;
    height: 350px;
    border-width: 10px 10px 0;
    border-radius: 40px 40px 0 0;
  }
  .moment.is-tall .moment-handset {
    height: 405px;
  }
  .landing .moment .section-moose {
    width: 200px;
  }
}
/* The plan and mock rows' screens move each time they come on screen
   (landing-screens.js marks the figure data-armed, then data-playing, and
   takes data-playing off again once the screen has left the view, so the
   covers return unseen and it replays from the start). The
   plan builds in: white covers over its lines wipe or fade away, one after
   another. The mock's clock ticks over the screenshot's own, and a tap turns
   its first answer green, the app's own answered screen fading in over the
   question. Without the script, or with reduced motion, both are the still
   screens. Positions are the app's own, in CSS px of its 390px-wide screen,
   as a share of that width: 1cqw is 3.9px there. */
.moment-handset {
  position: relative;
  container-type: inline-size;
}
.plan-build i,
.screen-after,
.screen-clock,
.screen-tap {
  position: absolute;
  display: none;
}
[data-armed] .plan-build i,
[data-armed] .screen-after,
[data-armed] .screen-clock,
[data-armed] .screen-tap {
  display: block;
}

/* The plan: "10 minutes a day" (y 295px), the badge (344px), the note (392px)
   and the three cards (442px), covered in the screen's own white. */
.plan-build i {
  background: #fff;
}
.plan-build i:nth-child(1) {
  top: 75.13cqw;
  left: 13.33cqw;
  width: 73.33cqw;
  height: 10.77cqw;
}
.plan-build i:nth-child(2) {
  top: 87.44cqw;
  left: 17.95cqw;
  width: 64.1cqw;
  height: 10.77cqw;
}
.plan-build i:nth-child(3) {
  top: 99.74cqw;
  left: 18.46cqw;
  width: 63.08cqw;
  height: 7.44cqw;
}
.plan-build i:nth-child(n + 4) {
  top: 112.31cqw;
  width: 30.26cqw;
  height: 20.77cqw;
}
.plan-build i:nth-child(4) {
  left: 3.08cqw;
}
.plan-build i:nth-child(5) {
  left: 34.87cqw;
}
.plan-build i:nth-child(6) {
  left: 66.67cqw;
}
[data-playing] .plan-build i:nth-child(-n + 2) {
  transform-origin: right;
  animation: screen-wipe 0.5s ease-out 0.25s forwards;
}
[data-playing] .plan-build i:nth-child(2) {
  animation-delay: 0.85s;
}
[data-playing] .plan-build i:nth-child(n + 3) {
  animation: screen-fade 0.3s ease-out 1.35s forwards;
}
[data-playing] .plan-build i:nth-child(4) {
  animation-delay: 1.6s;
}
[data-playing] .plan-build i:nth-child(5) {
  animation-delay: 1.75s;
}
[data-playing] .plan-build i:nth-child(6) {
  animation-delay: 1.9s;
}

/* The mock: the answered screen, the clock's digits (320.8px, 23.5px; 17px
   Nunito 800 in the app's red) and a tap on the first answer (238px, 353px). */
.screen-after {
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
}
.screen-clock {
  top: 5.38cqw;
  left: 81.67cqw;
  box-sizing: border-box;
  width: 13.08cqw;
  height: 5.64cqw;
  padding: 0.64cqw 0 0 0.59cqw;
  background: #fff;
  color: #fa5340;
  font:
    800 4.36cqw/1 Nunito,
    ui-rounded,
    system-ui,
    sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.screen-tap {
  top: 103.59cqw;
  left: 61.03cqw;
  width: 8cqw;
  height: 8cqw;
  margin: -4cqw 0 0 -4cqw;
  border-radius: 50%;
  background: rgb(213 43 58 / 50%);
  box-shadow:
    0 0 0 0.8cqw #fff,
    0 1cqw 2.6cqw rgb(0 0 0 / 25%);
  opacity: 0;
}
[data-playing] .screen-tap {
  animation: screen-tap 1.6s ease-out 0.9s forwards;
}
[data-playing] .screen-after {
  animation: screen-show 0.2s ease-out 1.62s forwards;
}

@keyframes screen-wipe {
  to {
    transform: scaleX(0);
  }
}
@keyframes screen-fade {
  to {
    opacity: 0;
  }
}
@keyframes screen-show {
  to {
    opacity: 1;
  }
}
@keyframes screen-tap {
  0% {
    opacity: 0;
    transform: scale(1.5);
  }
  25%,
  60% {
    opacity: 1;
    transform: scale(1);
  }
  45% {
    transform: scale(0.7);
  }
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-armed] .plan-build i,
  [data-armed] .screen-after,
  [data-armed] .screen-tap {
    display: none;
  }
}
/* The hero's handset goes through the app's first lesson
   (landing-hero-lesson.js), screen by screen, each the app's own
   (img/landing/lesson-*.webp, captured at 390x730px), and each moves as the
   app moves it (the app's lesson-ui-*.css): START eases the lesson up
   (view-enter); a new step keeps the toolbar and footer still while its
   content slides in from the right (guided-enter); a picked answer lights up;
   marking it changes the answer and Crumpet at once while the result panel
   rises from the bottom edge (feedback-rise). The script marks the figure
   data-armed, each screen
   data-shown and the tap data-at; the tap is the mock row's .screen-tap
   (landing-screen-motion.css). Without the script, or with reduced motion, the
   hero is the still path. Positions are the app's CSS px as a share of its
   390px width: 1cqw is 3.9px there. */
.app-shot {
  position: relative;
  container-type: inline-size;
}
.lesson-screen {
  position: absolute;
  inset: 0;
  display: none;
  visibility: hidden;
}
[data-armed] .lesson-screen {
  display: block;
}
.lesson-screen[data-shown] {
  visibility: visible;
}
.lesson-screen.is-marked,
.lesson-content {
  background: #fff;
}

/* START: the lesson eases up over the path. The app shows its white pane
   first, which in a loop reads as a blink, so here the path fades into it. */
[data-shown].is-open > img {
  animation: lesson-open 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* A new step: its content, from under the toolbar (96px) to the footer
   (643px), slides in over the pane's white. */
.lesson-content {
  position: absolute;
  top: 24.62cqw;
  right: 0;
  left: 0;
  height: 140.26cqw;
  overflow: hidden;
}
.landing .lesson-content img {
  margin-top: -24.62cqw;
}
[data-shown] .lesson-content img {
  animation: lesson-step 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* The picked answer. */
.is-pick img {
  opacity: 0;
}
[data-shown].is-pick img {
  animation: screen-show 0.12s ease-out forwards;
}

/* Marked right: above the result panel (522px) the answer and Maple change
   at once, and the pane's white waits below until the panel rises into it. */
.is-marked > img {
  clip-path: inset(0 0 calc(100% - 133.85cqw));
}
.lesson-panel {
  position: absolute;
  top: 133.85cqw;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
.landing .lesson-panel img {
  margin-top: -133.85cqw;
}
[data-shown] .lesson-panel {
  animation: lesson-panel 0.34s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* Back to the path between the two plays: "Excellent!", alone by then,
   fades away. */
[data-rewind] .lesson-screen[data-shown] {
  animation: screen-fade 0.45s ease forwards;
}

/* The taps, from Learn Canada's own first lesson: START (195px, 342px),
   Continue (662px, inside both screens' buttons) and the right answer (372px),
   right of each label so it stays readable. */
.app-shot [data-lesson-tap][data-at] {
  animation: screen-tap 0.7s ease-out both;
}
.app-shot [data-at="start"] {
  top: 87.69cqw;
  left: 50cqw;
}
.app-shot [data-at="continue"] {
  top: 169.74cqw;
  left: 62cqw;
}
.app-shot [data-at="voting"] {
  top: 95.38cqw;
  left: 62cqw;
}

@keyframes lesson-open {
  from {
    opacity: 0;
    transform: translateY(4.1cqw);
  }
}
@keyframes lesson-step {
  from {
    opacity: 0;
    transform: translateX(9.23cqw);
  }
}
@keyframes lesson-panel {
  from {
    opacity: 0;
    transform: translateY(12.31cqw);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-armed] .lesson-screen {
    display: none;
  }
}
/* The landing page's lower half (landing-sections.html): the pricing row,
   Free, Weekly and Lifetime side by side, stacked in that order on a phone,
   with what lifetime access means (claims ledger L-22). */
.land-plans {
  width: min(1120px, calc(100% - 64px));
  margin: auto;
  padding: 104px 0 24px;
  scroll-margin-top: 80px;
}
.plan-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 44px auto 0;
}
@media (max-width: 960px) {
  .plan-cards {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
}
.plan-card {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border: 2px solid var(--line);
  border-radius: 28px;
  box-shadow: 0 4px 0 var(--line);
}
.plan-card.is-lifetime {
  border-color: var(--brand-line);
  box-shadow: 0 4px 0 var(--brand-line);
  background: var(--brand-soft);
}
.plan-card h3 {
  color: var(--brand-ink);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.plan-price {
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plan-price b {
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  color: var(--ink);
}
.plan-price span {
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 700;
}
.plan-list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}
.plan-list li {
  position: relative;
  padding-left: 30px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}
.plan-list li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 3px;
  width: 11px;
  height: 6px;
  border-left: 3px solid var(--green-lip);
  border-bottom: 3px solid var(--green-lip);
  transform: rotate(-45deg);
}
.plan-note {
  margin: 20px 0 0;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
}
/* Each button sits at the foot of its card, at least 28px below what comes
   before it, so the three line up side by side. */
.plan-card .btn-press {
  width: 100%;
  margin-top: auto;
  font-size: 16px;
}
.plan-card > :nth-last-child(2) {
  margin-bottom: 28px;
}
@media (max-width: 760px) {
  .land-plans {
    width: calc(100% - 40px);
    padding-top: 72px;
  }
  .plan-cards {
    margin-top: 32px;
  }
  .plan-card {
    padding: 24px;
  }
}

/* The lifetime price beside what one booking of the real test costs. */
.plan-value {
  margin: 14px 0 0;
  color: var(--brand-ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
}
/* The footer's install link and the hint it opens, white on the brand blue. */
.land-footer .install-hint,
.land-footer .install-hint b {
  max-width: 178px;
  margin-top: 6px;
  color: var(--on-brand);
}
/* "before you start." (landing-sections.html): the questions a careful visitor
   asks first, each opening in place. */
.land-faq {
  width: min(860px, calc(100% - 64px));
  margin: auto;
  padding: 88px 0 40px;
  scroll-margin-top: 80px;
}
.faq-list {
  margin-top: 36px;
  border-top: 2px solid var(--line);
}
.faq-list details {
  border-bottom: 2px solid var(--line);
}
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 20px 4px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary > span {
  flex: none;
  color: var(--brand-ink);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  transition: transform 0.2s var(--ease);
}
.faq-list details[open] summary > span {
  transform: rotate(45deg);
}
.faq-answer p {
  max-width: 68ch;
  margin: 0;
  padding: 0 4px 22px;
  color: var(--ink-2);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.55;
}
@media (prefers-reduced-motion: reduce) {
  .faq-list summary > span {
    transition: none;
  }
}
@media (max-width: 760px) {
  .land-faq {
    width: calc(100% - 40px);
    padding-top: 64px;
  }
  .faq-list summary {
    font-size: 17px;
    padding-block: 16px;
  }
  .faq-answer p {
    font-size: 16px;
  }
}
/* Public course pages and the landing page's crawlable study navigation. */
.land-study-nav,
.course-site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
}
.land-study-nav {
  justify-content: center;
  padding: 8px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.land-study-nav a,
.course-site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 800;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.course-site-nav {
  margin: -12px 0 28px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--line);
}
.course-site-nav [aria-current="page"] {
  color: var(--ink);
  text-decoration-thickness: 3px;
}
.course-overview h1 {
  font-family: Fredoka, Nunito, sans-serif;
  font-size: clamp(30px, 5vw, 40px);
  line-height: 1.18;
}
.course-overview h3 {
  margin: 0 0 6px;
  font-size: 18px;
  line-height: 1.3;
}
.course-lead {
  margin: 16px 0 24px;
  font-size: 18px;
}
.course-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 24px;
  padding: 18px 12px;
  border: 2px solid var(--line);
  border-radius: var(--r);
}
.course-summary > div {
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  text-align: center;
}
.course-summary dt {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}
.course-summary dd {
  margin: 0;
  font-size: 30px;
  font-weight: 900;
  line-height: 1.2;
}
.course-summary dd.course-summary-word {
  margin-block: auto;
  font-size: 16px;
}
.course-steps {
  padding-left: 26px;
}
.course-steps li {
  margin-bottom: 20px;
  padding-left: 8px;
}
.course-topic-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-block: 20px 32px;
}
.course-topic.card {
  margin: 0;
  padding: 16px;
}
.course-topic p {
  font-size: 15px;
}
.course-topic-count {
  margin-bottom: 0;
  font-weight: 800;
}
.course-note {
  margin-block: 26px;
  padding-top: 16px;
  border-top: 2px solid var(--line);
  font-size: 14px;
}
@media (max-width: 460px) {
  .course-topic-list {
    grid-template-columns: 1fr;
  }
  .land-study-nav {
    gap: 4px 16px;
  }
}