/* Public pages share the study desk's colors; course cards keep authored CSS. */
.landing-page,
.auth-page {
  width: 100%;
  color: var(--ink);
}
:root {
  --landing-blue: #2e60ce;
  --landing-body: #536c81;
  --landing-lead: #365269;
  --landing-eyebrow: #436b7c;
  --landing-link-line: #9bafbe;
  --landing-closing-link: #859dac;
  /* The app's own main button (since v0.1.91): the landing page's was navy,
     and beside it the sample card's was already this teal. */
  --landing-cta: #167b86;
  --on-landing-cta: #fff;
  --landing-cta-hover: #126a74;
  --landing-panel-line: #d9e3eb;
  --landing-stack: #e7eef7;
  --landing-stack-line: #cfdbe7;
  --landing-well: #edf2f7;
  --landing-hairline: #192f4510;
  /* The dark "How it works" band; its text stays light in both themes. */
  --landing-method: #192f45;
  --landing-closing: #e7f0f7;
  --landing-closing-line: #d8e5ef;
  --landing-goodbye-line: #d1e0ec;
}
.landing-page {
  background: var(--paper);
}
.landing-wrap {
  width: min(1240px, calc(100% - 96px));
  margin-inline: auto;
}
.landing-page a {
  text-decoration: none;
}
.landing-page h1,
.landing-page h2,
.landing-page h3,
.auth-page h1 {
  font-family: var(--font-sans);
}
.landing-page h1 {
  font-size: clamp(44px, 5.1vw, 72px);
  letter-spacing: -3.5px;
  line-height: 1.1;
  font-weight: 600;
}
.landing-page h2 {
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.18;
  letter-spacing: -1.7px;
  font-weight: 550;
}
.landing-page h3 {
  font-size: 21px;
  font-weight: 550;
  letter-spacing: -0.6px;
}
.landing-page em {
  font-family: var(--font-serif);
  font-weight: 400;
}
.landing-page p {
  line-height: 1.75;
}
.landing-page section[id],
#try {
  scroll-margin-top: 30px;
}
.landing-nav {
  display: flex;
  align-items: center;
  gap: 38px;
  padding-block: 27px;
  border-bottom: 1px solid var(--line);
}
.landing-nav .brand {
  margin: 0;
  font-size: 23px;
}
.landing-links {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
  font-size: 13px;
}
.landing-links a,
.landing-signin {
  padding-block: 12px;
}
.landing-links a:hover,
.landing-signin:hover,
.landing-language:hover {
  color: var(--landing-blue);
}
.landing-account {
  display: flex;
  align-items: center;
  gap: 23px;
  font-size: 13px;
}
/* The other interface language (since v0.1.70): a quiet link beside sign-in. */
.landing-language {
  padding: 12px 0;
  border: 0;
  background: none;
  color: var(--muted);
}
.landing-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 17px 24px;
  border: 1px solid var(--landing-cta);
  border-radius: 8px;
  background: var(--landing-cta);
  color: var(--on-landing-cta);
  font-weight: 600;
  font-size: 15px;
  min-height: 52px;
  transition:
    background 0.15s,
    transform 0.15s;
}
.landing-cta:hover {
  background: var(--landing-cta-hover);
  transform: translateY(-2px);
}
.landing-cta.compact {
  min-height: 44px;
  padding: 11px 17px;
  font-size: 13px;
  gap: 18px;
}
.landing-cta span {
  font-size: 20px;
  line-height: 1;
}
/* The opening is written intro, sample, the rest (since 2026-11-01): a phone
   shows it in that order, so the sample comes right after the lead, where it
   came after the whole opening, more than a screen down. A wider screen puts
   the intro and the rest together beside the sample. */
.landing-hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-areas:
    "intro preview"
    "more preview";
  grid-template-rows: auto 1fr;
  column-gap: 65px;
  padding-block: 78px 85px;
}
.landing-hero-intro {
  grid-area: intro;
}
.landing-hero-more {
  grid-area: more;
  align-self: start;
}
/* Top, not centred: the sample opens as a lesson, with its answer, and a
   centred opening put its button at the fold of a laptop's screen. */
.landing-hero .landing-preview-area {
  grid-area: preview;
  align-self: start;
}
.landing-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--landing-eyebrow);
  margin-bottom: 23px;
}
.landing-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--sea);
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: 1px;
}
.landing-hero h1 em {
  color: var(--landing-blue);
  white-space: nowrap;
  font-size: 0.94em;
  letter-spacing: -3px;
}
.landing-lead {
  font-size: 20px;
  margin-top: 27px;
  color: var(--landing-lead);
}
.landing-description {
  max-width: 440px;
  font-size: 14px;
  color: var(--landing-body);
  margin-top: 17px;
}
/* What a visitor asks first: the cost, where it runs, the time a day. */
.landing-facts {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
  font-size: 14px;
  color: var(--landing-lead);
}
.landing-facts li {
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.landing-facts li::before {
  content: "✓";
  color: var(--sea);
  font-weight: 700;
}
/* What backs a claim, where it is made (since 2026-11-01). */
.landing-facts a,
.landing-evidence a {
  color: var(--landing-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.landing-facts a {
  margin-left: 6px;
}
.landing-evidence {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  list-style: none;
  margin: 0;
  padding: 0 26px 24px 0;
  font-size: 14px;
}
.landing-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  margin-top: 31px;
}
.landing-text-link {
  font-size: 13px;
  border-bottom: 1px solid var(--landing-link-line);
  padding-block: 10px;
}
.landing-text-link span {
  margin-left: 9px;
}
.landing-small {
  font-size: 13px;
  color: var(--landing-body);
  margin-top: 14px;
}
.landing-preview-area {
  position: relative;
  min-width: 0;
  padding: 0 8px;
}
.landing-preview-caption {
  font:
    13px/1.6 var(--font-sans);
  font-weight: 600;
  letter-spacing: 2px;
  display: flex;
  justify-content: space-between;
  padding: 0 10px 13px;
  color: var(--landing-body);
}
.landing-preview-caption > span:last-child {
  font:
    32px/1 var(--font-serif);
  margin-right: 8px;
}
.landing-preview {
  position: relative;
  isolation: isolate;
  background: var(--surface);
  border: 1px solid var(--landing-panel-line);
  padding: 22px;
  border-radius: 14px;
  box-shadow: 0 18px 60px -30px #355a7c60;
}
.landing-preview:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 7px -10px -7px 10px;
  border: 1px solid var(--landing-stack-line);
  border-radius: 14px;
  background: var(--landing-stack);
  transform: rotate(3deg);
}
.landing-preview:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--surface);
  border-radius: 14px;
}
.landing-preview-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-bottom: 24px;
}
.landing-preview-toolbar select {
  min-width: 0;
  max-width: 60%;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  border: 0;
  background: var(--surface);
  min-height: 36px;
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
}
.landing-preview-modes {
  display: flex;
  gap: 3px;
  background: var(--landing-well);
  border-radius: 6px;
  padding: 3px;
}
.landing-preview-modes button {
  border: 0;
  border-radius: 4px;
  background: transparent;
  font-size: 13px;
  padding: 7px 11px;
  color: var(--landing-body);
}
.landing-preview-modes button[aria-pressed="true"] {
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 1px 4px #192f4512;
}
#preview-card {
  min-height: 215px;
}
.landing-preview .study-card {
  background: var(--card-paper);
  min-height: 215px;
  border: 0;
  border-radius: 10px;
}
.landing-preview-loading {
  padding: 65px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
.landing-preview-actions {
  margin-top: 22px;
  display: flex;
  gap: 10px;
}
.landing-preview-actions .button {
  flex: 1;
  min-height: 46px;
  justify-content: center;
  font-size: 14px;
}
/* Again and Good say what they mean under their names (since the rewrite of
   2026-11-01): a visitor meets them here before any study session. */
.landing-preview-actions .button small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  opacity: 0.85;
}
/* "Start learning …" is a link to sign-up, styled as a button. The preview card
   is narrow, so it and "Try another language" each take a full row. */
.landing-preview-actions:has(a.button) {
  flex-direction: column;
}
.landing-preview-actions a.button {
  display: inline-flex;
  align-items: center;
  text-align: center;
  text-decoration: none;
}
.landing-preview-feedback {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin-top: 13px;
  min-height: 38px;
}
.landing-preview-note {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  margin-top: 25px;
}
.landing-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin-bottom: 33px;
}
.landing-section-heading .landing-eyebrow {
  margin-bottom: 15px;
}
.landing-section-heading h2 {
  font-size: 32px;
}
.landing-section-heading > p {
  color: var(--landing-body);
  font-size: 14px;
  flex-shrink: 0;
}
.landing-courses {
  padding-block: 43px 86px;
  border-top: 1px solid var(--line);
}
/* Eight courses: two rows of four, and four rows of two below 850 px, where four
   to a row would break Korean's "Hangul · TOPIK1". */
.landing-course-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
/* The level names, said in words under the courses that carry them. */
.landing-levels {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 22px 60px;
  margin-top: 40px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}
.landing-levels h3 {
  font-size: 18px;
  margin-bottom: 10px;
}
.landing-levels p,
.landing-levels dd {
  font-size: 14px;
  line-height: 1.65;
  color: var(--landing-body);
}
.landing-levels dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 34px;
  margin: 0;
}
.landing-levels dt {
  font:
    13px/1.5 ui-monospace,
    monospace;
  letter-spacing: 1px;
  color: var(--ink);
  margin-bottom: 4px;
}
.landing-levels dd {
  margin: 0;
}
.landing-levels .landing-explained {
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--landing-well);
}
.landing-course {
  display: flex;
  flex-direction: column;
  text-align: left;
  border: 1px solid var(--line);
  border-top: 3px solid var(--course-ink);
  border-radius: 3px 3px 9px 9px;
  padding: 20px 19px 17px;
  background: var(--course-paper);
  color: var(--ink);
  transition:
    transform 0.15s,
    box-shadow 0.15s;
}
.landing-course:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 20px -15px #192f4540;
}
/* --course-ink colours the card's top rule; --course-text is the same hue darkened
   to at least 4.5:1 on the card, for the level code and greeting. */
.landing-french {
  --course-ink: #397db0;
  --course-text: #33719f;
  --course-paper: #edf4fb;
}
.landing-korean {
  --course-ink: #896b9b;
  --course-text: #7b5e8c;
  --course-paper: #f0edf6;
}
.landing-german {
  --course-ink: #91805d;
  --course-text: #786a4d;
  --course-paper: #f4f2eb;
}
.landing-chinese {
  --course-ink: #ac6c65;
  --course-text: #995952;
  --course-paper: #f8eeeb;
}
.landing-japanese {
  --course-ink: #63867a;
  --course-text: #537066;
  --course-paper: #eaf3ee;
}
.landing-italian {
  --course-ink: #7f9150;
  --course-text: #5f6f37;
  --course-paper: #f1f4e6;
}
.landing-portuguese {
  --course-ink: #c4732a;
  --course-text: #a3571a;
  --course-paper: #fcf1e4;
}
.landing-english {
  --course-ink: #a8607a;
  --course-text: #8f4d66;
  --course-paper: #f8edf1;
}
.landing-course-level {
  color: var(--course-text);
  font:
    13px/1.5 ui-monospace,
    monospace;
  letter-spacing: 1px;
}
.landing-course-native {
  display: flex;
  align-items: center;
  height: 87px;
  font-family: var(--font-serif);
  font-size: 31px;
  letter-spacing: -1px;
  color: var(--course-text);
}
.landing-course-native:lang(ko),
.landing-course-native:lang(ja) {
  font-family: system-ui, sans-serif;
  font-size: 23px;
  letter-spacing: -1.4px;
}
.landing-course strong {
  font-size: 15px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 9px;
}
.landing-course > span:not([class]) {
  margin-bottom: 18px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--landing-body);
}
.landing-course-preview {
  border-top: 1px solid var(--landing-hairline);
  padding-top: 13px;
  margin-top: auto;
  font-size: 13px;
  width: 100%;
}
.landing-method {
  background: var(--landing-method);
  color: #f3f7fb;
  padding-block: 75px;
}
.landing-method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
}
.landing-method .landing-eyebrow {
  color: #a4c9d1;
}
.landing-method h2 {
  font-size: 43px;
}
.landing-method h2 em {
  color: #bcd8ee;
}
.landing-method h2 + p {
  max-width: 390px;
  color: #bed0df;
  font-size: 14px;
  margin-top: 22px;
}
/* The two ratings as a legend, not as buttons: nothing here can be pressed. */
.landing-rating-example {
  display: flex;
  gap: 24px;
  margin-top: 29px;
}
.landing-rating-example > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #bed0df;
  font-size: 14px;
}
.landing-rating-example > span::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #8a9aa8;
}
.landing-rating-example > span:last-child {
  color: #aed6d1;
}
.landing-rating-example > span:last-child::before {
  background: #aed6d1;
}
.landing-method .landing-method-caption {
  font-size: 13px;
  color: #b3c9da;
  margin-top: 12px;
}
.landing-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.landing-steps li {
  display: flex;
  gap: 25px;
  padding: 23px 0;
  border-bottom: 1px solid #ffffff24;
}
.landing-steps li:first-child {
  padding-top: 0;
}
.landing-steps li:last-child {
  border: 0;
  padding-bottom: 0;
}
.landing-step-number {
  color: #97b7cc;
  font:
    13px/1.5 ui-monospace,
    monospace;
  padding-top: 5px;
}
.landing-steps h3 {
  font-size: 20px;
  margin-bottom: 7px;
}
.landing-steps p {
  font-size: 14px;
  color: #bed0df;
}
.landing-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px;
  padding-block: 65px;
  border-bottom: 1px solid var(--line);
}
.landing-detail-mark {
  display: block;
  font:
    21px/1.4 var(--font-serif);
  color: var(--sea);
  margin-bottom: 16px;
}
.landing-details h3 {
  font-size: 18px;
  margin-bottom: 10px;
}
.landing-details p {
  font-size: 14px;
  color: var(--landing-body);
}
/* Each block says its point and its limit; the rest opens in place
   (since 2026-11-01), as does the key to the level names. */
.landing-more {
  margin-top: 8px;
}
.landing-more summary {
  cursor: pointer;
  width: fit-content;
  font-size: 13px;
  color: var(--landing-blue);
  padding-block: 8px;
}
.landing-more summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.landing-more[open] summary {
  margin-bottom: 6px;
}
.landing-levels .landing-level-key {
  margin-top: 0;
}
.landing-level-key dl {
  margin-top: 10px;
}
.landing-page .landing-closing > p.landing-maker {
  max-width: 46ch;
  margin: 0 auto 4px;
  font-size: 15px;
  color: var(--landing-lead);
}
.landing-faq {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 90px;
  padding-block: 85px;
}
.landing-faq h2 {
  font-size: 42px;
}
.landing-questions details {
  border-bottom: 1px solid var(--line);
}
.landing-questions summary {
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  padding: 22px 30px 22px 0;
  position: relative;
  line-height: 1.5;
}
.landing-questions summary::-webkit-details-marker {
  display: none;
}
.landing-questions summary:after {
  content: "+";
  position: absolute;
  right: 0;
  top: 21px;
  font-size: 21px;
  color: var(--muted);
}
.landing-questions details[open] summary:after {
  content: "−";
}
.landing-questions summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.landing-questions p {
  font-size: 14px;
  color: var(--landing-body);
  padding: 0 26px 24px 0;
}
.landing-closing {
  background: var(--landing-closing);
  border: 1px solid var(--landing-closing-line);
  border-radius: 14px;
  text-align: center;
  padding: 58px 24px 0;
  overflow: hidden;
}
.landing-closing h2 {
  font-size: 58px;
  margin-bottom: 26px;
}
.landing-closing h2 em {
  color: var(--landing-blue);
}
.landing-closing > p:not(.landing-eyebrow) {
  font-size: 13px;
  margin: 17px 0 36px;
  color: var(--landing-body);
}
.landing-closing > p a {
  border-bottom: 1px solid var(--landing-closing-link);
  margin-left: 4px;
}
.landing-goodbyes {
  border-top: 1px solid var(--landing-goodbye-line);
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 22px;
  padding: 22px 0;
  color: var(--muted);
  font-family: var(--font-serif);
  font-size: 19px;
}
.landing-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 37px 12px;
}
.landing-footer .brand {
  font-size: 18px;
  margin: 0;
}
.landing-footer p,
.landing-footer > a:last-child {
  font-size: 13px;
  color: var(--muted);
}
.landing-skip {
  position: absolute;
  left: 24px;
  top: -100px;
  z-index: 10;
  padding: 14px;
  background: var(--surface);
}
.landing-skip:focus {
  top: 12px;
}
.landing-noscript {
  padding: 24px;
  text-align: center;
}
.auth-page {
  max-width: 1100px;
  margin: auto;
  padding: 34px 48px 70px;
}
.auth-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.auth-top .brand {
  margin: 0;
}
.auth-panel {
  max-width: 440px;
  margin: 70px auto 0;
}
.auth-panel h1 {
  font-size: 39px;
  line-height: 1.15;
  font-weight: 550;
}
.auth-panel > .intro {
  font-size: 14px;
  margin: 17px 0 25px;
}
.auth-panel .login-form {
  margin: 0;
  max-width: none;
}
.auth-panel .practice {
  display: block;
  margin: 15px auto 0;
}
@media (min-width: 1400px) {
  .landing-hero {
    column-gap: 90px;
  }
}
@media (max-width: 1100px) {
  .landing-wrap {
    width: calc(100% - 64px);
  }
  .landing-links {
    gap: 18px;
  }
  .landing-nav {
    gap: 24px;
  }
  .landing-hero {
    column-gap: 30px;
    padding-block: 60px;
  }
  .landing-page h1 {
    font-size: 54px;
  }
  .landing-description {
    font-size: 14px;
  }
  .landing-hero-actions {
    gap: 20px;
  }
  .landing-cta {
    padding-inline: 19px;
    gap: 20px;
  }
  .landing-course {
    padding-inline: 13px;
  }
  .landing-course-native {
    font-size: 27px;
  }
  .landing-course-native:lang(ko),
  .landing-course-native:lang(ja) {
    font-size: 19px;
  }
  .landing-method-grid {
    gap: 55px;
  }
}
@media (max-width: 850px) {
  .landing-links {
    display: none;
  }
  .landing-account {
    margin-left: auto;
  }
  .landing-hero {
    grid-template-columns: 1fr 1fr;
    column-gap: 28px;
  }
  .landing-page h1 {
    font-size: 43px;
    letter-spacing: -2px;
  }
  .landing-hero h1 em {
    white-space: normal;
    letter-spacing: -2px;
  }
  .landing-lead {
    font-size: 17px;
  }
  .landing-hero-actions {
    flex-direction: column;
    align-items: start;
    gap: 8px;
  }
  .landing-preview {
    padding: 15px;
  }
  .landing-preview-toolbar {
    gap: 4px;
  }
  .landing-preview-modes button {
    padding-inline: 8px;
  }
  .landing-section-heading {
    display: block;
  }
  .landing-section-heading > p {
    margin-top: 16px;
  }
  .landing-section-heading > p br {
    display: none;
  }
  .landing-method h2 {
    font-size: 35px;
  }
  .landing-details {
    gap: 28px;
  }
  .landing-details h3 {
    line-height: 1.4;
  }
  .landing-faq {
    gap: 35px;
    grid-template-columns: 1fr 1.7fr;
  }
  .landing-levels {
    grid-template-columns: 1fr;
  }
  .landing-course-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .landing-wrap {
    width: calc(100% - 40px);
  }
  .landing-nav {
    padding-block: 20px;
    gap: 12px;
  }
  .landing-nav .brand {
    font-size: 19px;
    gap: 8px;
  }
  .landing-nav .brand img {
    width: 29px;
    height: 29px;
  }
  .landing-account {
    gap: 14px;
  }
  .landing-account .compact {
    padding: 10px 12px;
    font-size: 13px;
    gap: 0;
    min-height: 40px;
  }
  .landing-account .compact span {
    display: none;
  }
  .landing-signin {
    font-size: 13px;
  }
  /* A phone's top row has no room for it: just under the rule, at the right. */
  .landing-nav {
    position: relative;
  }
  .landing-language {
    position: absolute;
    top: 100%;
    right: 0;
  }
  .landing-hero {
    display: block;
    padding: 46px 0 55px;
  }
  .landing-page h1 {
    font-size: clamp(42px, 10.4vw, 61px);
    line-height: 1.12;
    letter-spacing: -2.4px;
  }
  .landing-hero h1 em {
    white-space: nowrap;
    letter-spacing: -2.4px;
  }
  .landing-eyebrow {
    font-size: 13px;
    margin-bottom: 20px;
    letter-spacing: 2px;
  }
  .landing-lead {
    margin-top: 23px;
    font-size: 18px;
  }
  .landing-description {
    max-width: 440px;
    font-size: 14px;
  }
  .landing-hero-actions {
    flex-direction: row;
    align-items: center;
    gap: 23px;
    margin-top: 26px;
  }
  .landing-cta {
    font-size: 13px;
    min-height: 48px;
    gap: 22px;
    padding: 14px 19px;
  }
  .landing-preview-area {
    margin-block: 34px 10px;
    padding-inline: 7px;
  }
  /* The sample is already above it on a phone. */
  .landing-hero-actions .landing-text-link {
    display: none;
  }
  .landing-preview-caption {
    font-size: 13px;
  }
  .landing-preview {
    padding: 18px;
  }
  .landing-preview-note {
    margin-top: 19px;
  }
  .landing-section-heading h2 {
    font-size: 29px;
    max-width: 330px;
  }
  .landing-courses {
    padding-block: 37px 48px;
  }
  .landing-course-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .landing-course {
    padding: 17px 14px 13px;
  }
  /* The longest line of levels, Korean's "Hangul · TOPIK1", stays on one line
     on a phone 360 px wide or more. */
  .landing-course-level {
    letter-spacing: 0;
  }
  .landing-course-native {
    height: 75px;
  }
  .landing-levels dl {
    grid-template-columns: 1fr;
  }
  .landing-course-native:lang(ko),
  .landing-course-native:lang(ja) {
    font-size: 20px;
  }
  .landing-method {
    padding-block: 48px;
  }
  .landing-method-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .landing-method h2 {
    font-size: 37px;
  }
  .landing-steps li {
    gap: 20px;
  }
  .landing-details {
    grid-template-columns: 1fr;
    padding-block: 40px;
    gap: 30px;
  }
  .landing-details > div {
    padding-left: 48px;
    position: relative;
  }
  .landing-detail-mark {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 17px;
    max-width: 34px;
  }
  .landing-details h3 {
    font-size: 18px;
  }
  .landing-faq {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-block: 45px;
  }
  .landing-faq h2 {
    font-size: 35px;
  }
  .landing-faq h2 br {
    display: none;
  }
  .landing-questions summary {
    font-size: 14px;
  }
  .landing-closing {
    padding: 38px 18px 0;
  }
  .landing-closing .landing-eyebrow {
    font-size: 13px;
    letter-spacing: 1.6px;
  }
  .landing-closing h2 {
    font-size: 43px;
  }
  .landing-goodbyes {
    flex-wrap: wrap;
    gap: 13px 22px;
    font-size: 17px;
  }
  .landing-footer {
    flex-wrap: wrap;
    padding-top: 30px;
  }
  .landing-footer p {
    display: none;
  }
  .auth-page {
    padding: 25px 24px 55px;
  }
  .auth-panel {
    margin-top: 50px;
  }
  .auth-panel h1 {
    font-size: 35px;
  }
}
/* Dark mode follows the device: tokens and course colors only. */
@media (prefers-color-scheme: dark) {
  :root {
    --landing-blue: #8fb0f5;
    --landing-body: #a3b6c6;
    --landing-lead: #c3d2de;
    --landing-eyebrow: #8fb4c4;
    --landing-link-line: #4f6577;
    --landing-closing-link: #5b7283;
    --landing-cta: #167b86;
    --on-landing-cta: #fff;
    --landing-cta-hover: #1b8a96;
    --landing-panel-line: #2a3744;
    --landing-stack: #1a2530;
    --landing-stack-line: #2c3a47;
    --landing-well: #1e2c38;
    --landing-hairline: #ffffff14;
    --landing-method: #16212b;
    --landing-closing: #16212b;
    --landing-closing-line: #26333f;
    --landing-goodbye-line: #2a3744;
  }
  .landing-french {
    --course-ink: #6fa3d6;
    --course-text: #9cc3ea;
    --course-paper: #16212c;
  }
  .landing-korean {
    --course-ink: #a98dbd;
    --course-text: #c7b2d6;
    --course-paper: #201c28;
  }
  .landing-german {
    --course-ink: #b5a279;
    --course-text: #d2c29c;
    --course-paper: #22211a;
  }
  .landing-chinese {
    --course-ink: #c98c85;
    --course-text: #e0aba5;
    --course-paper: #291c1a;
  }
  .landing-japanese {
    --course-ink: #86ab9e;
    --course-text: #a9cbbf;
    --course-paper: #18231f;
  }
  .landing-italian {
    --course-ink: #a3b56f;
    --course-text: #c2d295;
    --course-paper: #1f2316;
  }
  .landing-portuguese {
    --course-ink: #e8a05e;
    --course-text: #f3bd83;
    --course-paper: #2a1d10;
  }
  .landing-english {
    --course-ink: #cf8fa6;
    --course-text: #e3afc1;
    --course-paper: #2a1a20;
  }
}
/* Spanish's headline is a few letters longer than English's and its second line
   does not wrap: on the narrowest phones it is set a little smaller to fit. */
@media (max-width: 360px) {
  html[lang="es"] .landing-hero h1 {
    font-size: 36px;
  }
}
/* The source-code page: the AGPL offer every footer links to. */
.source-back {
  margin-left: auto;
  padding-block: 12px;
  font-size: 13px;
}
.source-back:hover,
.source-licence a:hover {
  color: var(--landing-blue);
  text-decoration: underline;
}
.source-main {
  padding-block: 70px 80px;
  border-bottom: 1px solid var(--line);
}
.source-main:focus {
  outline: none;
}
.landing-page .source-main h1 {
  font-size: clamp(40px, 4.4vw, 58px);
  letter-spacing: -2.5px;
}
.source-main .landing-lead {
  max-width: 620px;
}
.source-download {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  margin-top: 34px;
}
.source-download p {
  font-size: 14px;
  color: var(--landing-body);
}
.source-contents {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  max-width: 920px;
  margin-top: 54px;
}
.source-contents section {
  background: var(--surface);
  border: 1px solid var(--landing-panel-line);
  border-radius: 14px;
  padding: 26px 30px;
}
.landing-page .source-contents h2 {
  font-size: 19px;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
}
.source-contents ul {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--landing-body);
}
.source-licence {
  margin-top: 30px;
  font-size: 13px;
}
.source-licence a {
  color: var(--landing-blue);
}
/* Privacy, terms and 404 (since v0.1.47): the source page's frame, with prose. */
.doc-updated {
  margin-top: 14px;
  font-size: 14px;
  color: var(--muted);
}
.doc {
  max-width: 680px;
  margin-top: 44px;
}
.landing-page .doc h2 {
  font-size: 21px;
  letter-spacing: -0.4px;
  margin: 38px 0 10px;
}
.landing-page .doc h2:first-child {
  margin-top: 0;
}
.doc p,
.doc li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--landing-body);
}
.doc p {
  margin: 0 0 12px;
}
.doc ul {
  margin: 0 0 12px;
  padding-left: 20px;
}
.doc li + li {
  margin-top: 8px;
}
.doc strong {
  color: var(--ink);
  font-weight: 600;
}
.doc a {
  color: var(--landing-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.doc-note {
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--landing-panel-line);
}
.doc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 13px;
}
.doc-links a {
  color: var(--muted);
}
.doc-links a:hover {
  color: var(--landing-blue);
  text-decoration: underline;
}
@media (max-width: 620px) {
  .source-back {
    font-size: 13px;
  }
  .source-main {
    padding-block: 44px 52px;
  }
  .source-contents {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }
  .source-contents section {
    padding: 22px 22px;
  }
}
/* Held down (since v0.1.93): the landing page answered a pointer, and nothing
   answered a finger. A button that rose under the pointer comes back down. */
.landing-cta:active {
  background: var(--sea-press);
  border-color: var(--sea-press);
  transform: translateY(0) scale(0.98);
}
.landing-course:active {
  transform: translateY(-1px);
  box-shadow: none;
}
.landing-questions summary:active {
  color: var(--landing-blue);
}
.landing-preview-modes button:active {
  background: var(--press);
  color: var(--ink);
}
@media (hover: hover) {
  .landing-questions summary:hover {
    color: var(--landing-blue);
  }
  .landing-preview-modes button[aria-pressed="false"]:hover {
    background: var(--hover);
    color: var(--ink);
  }
}
@media (prefers-reduced-motion: reduce) {
  .landing-page *,
  .landing-page *:before {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
/* An answer and the pages that back it read as one. */
.landing-questions p:has(+ .landing-evidence) {
  padding-bottom: 10px;
}