/* Hanken Grotesk — body and UI. Covers Azerbaijani (ə, ş, ğ, ı, ç, ö, ü) and Turkish in full, with
   real italics, under the SIL OFL. It replaces the Britti trial files, which only carried ASCII and
   left every Azerbaijani letter to a system fallback mid-word.

   Cal Sans — headlines only. It ships as a single upright weight with no italic, so a bold or
   italic heading is synthesised by the browser. See LFY-11.

   Neither face carries Cyrillic, which is fine here — the site is Azerbaijani and English only.
   The app also speaks Russian, so it cannot take this pair as it stands.

   The Britti files are still in assets/fonts/, unreferenced, so going back is a checkout and not a
   download: git checkout site-fonts-britti -- Site/ */

@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/HankenGrotesk-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/HankenGrotesk-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/HankenGrotesk-Regular-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/HankenGrotesk-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/HankenGrotesk-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: url("/assets/fonts/HankenGrotesk-Bold-Italic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Cal Sans";
  src: url("/assets/fonts/CalSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Lernify — marketing site. The tokens mirror the app's Theme (Client/Lernify/Support/Theme.swift). */

:root {
  --blue: #233dff;
  --blue-soft: #4358ff;
  --lime: #c1ff72;
  --bg: #0d1017;
  --bg-raised: #141925;
  --card: #1e2332;
  --hairline: rgba(255, 255, 255, 0.08);
  --text: #ffffff;
  --text-2: rgba(255, 255, 255, 0.66);
  --text-3: rgba(255, 255, 255, 0.42);
  --on-blue: #ffffff;
  --on-blue-2: rgba(255, 255, 255, 0.72);
  --on-lime: #101010;
  --radius-card: 24px;
  --radius-brand: 32px;
  --radius-pill: 999px;
  --shell: 1120px;
  --font: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "Cal Sans", var(--font);
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.shell {
  width: min(100% - 40px, var(--shell));
  margin-inline: auto;
}

/* Type -------------------------------------------------------------------- */

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.04;
  font-weight: 700;
}

/* Cal Sans is a display face: it carries the big headlines and stays out of the small ones, where
   its wide, tightly spaced letterforms read worse than the body face at 21px.

   It is drawn tight already, so the -0.02em above would push the letters into each other at 76px.
   Headlines in this face sit at their natural spacing. */
h1,
h2 {
  font-family: var(--font-display);
  letter-spacing: 0;
}

h1 {
  font-size: clamp(42px, 7vw, 76px);
}

h2 {
  font-size: clamp(32px, 4.4vw, 46px);
}

h3 {
  font-size: 21px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

p {
  margin: 0;
}

.accent {
  color: var(--lime);
  font-style: italic;
  font-weight: 700;
}

.accent-blue {
  color: var(--blue-soft);
  font-style: italic;
}

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-3);
}

.eyebrow--lime {
  color: var(--lime);
}

.lead {
  font-size: clamp(17px, 2vw, 20px);
  color: var(--text-2);
  max-width: 54ch;
}

/* Chrome ------------------------------------------------------------------ */

.wordmark {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--lime);
}

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 14px 0;
  backdrop-filter: blur(18px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.nav--scrolled {
  border-bottom-color: var(--hairline);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav__links {
  display: flex;
  gap: 24px;
  margin-left: auto;
  font-size: 15px;
  color: var(--text-2);
}

.nav__links a:hover {
  color: var(--text);
}

.lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--bg-raised);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}

.lang a[aria-current="true"] {
  color: var(--lime);
}

/* "This page is also in Azerbaijani" — shown on the English pages only, by lang-hint.js, to
   browsers that prefer a language the site also has. Small, at the bottom, and closable. */
.lang-hint {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: calc(100% - 32px);
  margin-inline: auto;
  padding: 10px 10px 10px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--bg-raised);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  font-size: 14px;
  color: var(--text-2);
}

.lang-hint a {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

.lang-hint__close {
  flex: none;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.lang-hint__close:hover,
.lang-hint__close:focus-visible {
  background: var(--hairline);
  color: var(--text);
}

/* Buttons ----------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: var(--radius-pill);
  font-size: 16px;
  font-weight: 600;
  border: 1px solid transparent;
  font-family: inherit; /* a <button> doesn't inherit the page font on its own */
  transition: transform 0.15s ease, filter 0.15s ease;
}

.btn:active {
  transform: scale(0.98);
}

.btn--blue {
  background: var(--blue);
  color: var(--on-blue);
}

.btn--blue:hover {
  filter: brightness(1.12);
}

.btn--lime {
  background: var(--lime);
  color: var(--on-lime);
}

.btn--lime:hover {
  filter: brightness(1.06);
}

/* A button inside .prose is still a button. `.prose a` further down paints links lime and is the
   more specific selector, so on the support page the address was being drawn lime on a lime pill —
   the button looked empty. Only support.html has a button inside prose. */
.prose a.btn--lime {
  color: var(--on-lime);
}

.btn--ghost {
  border-color: var(--hairline);
  color: var(--text-2);
}

.btn--ghost:hover {
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.2);
}

/* App Store badge — no link until the app is published. */
.store {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px 12px 18px;
  border-radius: 16px;
  border: 1px solid var(--hairline);
  background: var(--bg-raised);
  cursor: default;
}

.store svg {
  width: 26px;
  height: 26px;
  fill: var(--text);
  flex: none;
}

.store__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.store__top {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
}

.store__bottom {
  font-size: 17px;
  font-weight: 600;
}

/* Once released, store.js gives the badge its address and it becomes a real link. */
a.store[href] {
  cursor: pointer;
  transition: border-color 0.15s ease;
}

a.store[href]:hover {
  border-color: var(--text-3);
}

/* Released or not ------------------------------------------------------------
   assets/js/store.js sets data-release="live" on <html> before the first paint. Copy that differs
   has both versions in the page and only one is ever displayed, so nothing shifts or flashes. */
:root:not([data-release="live"]) [data-when="live"],
:root[data-release="live"] [data-when="soon"] {
  display: none !important;
}

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

.hero {
  position: relative;
  padding: clamp(60px, 9vw, 120px) 0 clamp(60px, 8vw, 110px);
  overflow: hidden;
}

/* The app's "ecliptic" ring, approximated with slowly drifting blurred blobs. The layer is fixed
   behind the whole page: strongest behind the hero, then it fades as you scroll, so the lower
   sections keep a faint tint of it instead of ending on flat color. */
.page-glow {
  position: fixed;
  inset: -15% -10% -10%;
  z-index: -1;
  pointer-events: none;
  filter: blur(110px);
  opacity: var(--glow, 0.55);
  transition: opacity 0.25s linear;
}

.page-glow span {
  position: absolute;
  display: block;
  border-radius: 50%;
}

.page-glow span:nth-child(1) {
  width: 46vw;
  height: 46vw;
  left: 2%;
  top: 6%;
  background: var(--blue);
  animation: drift 26s ease-in-out infinite alternate;
}

.page-glow span:nth-child(2) {
  width: 38vw;
  height: 38vw;
  right: 6%;
  top: 0%;
  background: var(--lime);
  opacity: 0.55;
  animation: drift 32s ease-in-out infinite alternate-reverse;
}

.page-glow span:nth-child(3) {
  width: 32vw;
  height: 32vw;
  left: 34%;
  bottom: -6%;
  background: var(--blue-soft);
  opacity: 0.5;
  animation: drift 38s ease-in-out infinite alternate;
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(60px, 50px, 0) scale(1.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-glow span {
    animation: none;
  }
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.hero__copy > * + * {
  margin-top: 22px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.hero__note {
  font-size: 14px;
  color: var(--text-3);
}

/* Phone ------------------------------------------------------------------- */

/* An iPhone the screenshots sit inside: titanium edge, black bezel, dynamic island. */
.phone {
  position: relative;
  border-radius: 54px;
  padding: 11px;
  background: linear-gradient(150deg, #5b6170 0%, #2a2e38 18%, #14161c 52%, #3b404c 84%, #1a1d24 100%);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.phone img {
  border-radius: 43px;
  width: 100%;
  background: #000;
}

/* Dynamic island */
.phone::after {
  content: "";
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 27%;
  height: 26px;
  border-radius: var(--radius-pill);
  background: #05070b;
  z-index: 2;
}

/* Side buttons */
.phone::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 21%;
  width: 3px;
  height: 9%;
  border-radius: 2px;
  background: linear-gradient(180deg, #5b6170, #2a2e38);
  box-shadow: 0 8% 0 0 transparent;
}

.screens .phone::after {
  top: 15px;
  height: 17px;
}

.phone--tilt {
  transform: rotate(-2.5deg);
}

/* Sections ---------------------------------------------------------------- */

section {
  padding: clamp(64px, 8vw, 110px) 0;
}

.section__head {
  max-width: 60ch;
}

.section__head > * + * {
  margin-top: 14px;
}

.grid {
  display: grid;
  gap: 20px;
  margin-top: 44px;
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 28px;
}

.card > * + * {
  margin-top: 12px;
}

.card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--lime);
  font-weight: 700;
  font-size: 15px;
}

.card p {
  color: var(--text-2);
  font-size: 16px;
}

.card--brand {
  background: var(--blue);
  border-color: transparent;
  border-radius: var(--radius-brand);
  padding: clamp(28px, 4vw, 44px);
}

.card--brand h3,
.card--brand h2 {
  color: var(--on-blue);
}

.card--brand p {
  color: var(--on-blue-2);
}

/* The brand card is Lernify blue in both themes — it doesn't follow the page — so everything on it
   is written for blue rather than for the current background. */
.card--brand .eyebrow {
  color: rgba(255, 255, 255, 0.6);
}

/* A quiet button standing on blue: the page's hairline and muted text would disappear into it.
   Scoped to the card and written twice so it also outranks the light theme's own `.btn--ghost`,
   which would otherwise paint dark ink onto the blue. */
.card--brand .btn--on-brand,
:root[data-theme="light"] .card--brand .btn--on-brand {
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--on-blue);
}

.card--brand .btn--on-brand:hover,
:root[data-theme="light"] .card--brand .btn--on-brand:hover {
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--on-blue);
}

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

.feature + .feature {
  margin-top: clamp(48px, 6vw, 90px);
}

.feature--flip .feature__media {
  order: -1;
}

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

.ladder {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.rung {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hairline);
}

.rung__index {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--lime);
}

.rung__title {
  font-weight: 600;
}

.rung__sub {
  font-size: 14px;
  color: var(--text-3);
}

.rung--soon {
  opacity: 0.62;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.chip {
  padding: 10px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--hairline);
  font-size: 14px;
  color: var(--text-2);
}

/* Screens strip ----------------------------------------------------------- */

.screens {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 44px;
}

.screens figure {
  margin: 0;
}

.screens figcaption {
  margin-top: 14px;
  font-size: 14px;
  color: var(--text-3);
  text-align: center;
}

.screens .phone {
  border-radius: 38px;
  padding: 7px;
}

.screens .phone img {
  border-radius: 31px;
}

/* FAQ --------------------------------------------------------------------- */

.faq {
  margin-top: 36px;
  border-top: 1px solid var(--hairline);
}

.faq details {
  border-bottom: 1px solid var(--hairline);
}

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  color: var(--lime);
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
}

.faq details[open] summary::after {
  content: "–";
}

.faq p {
  color: var(--text-2);
  padding-bottom: 22px;
  max-width: 70ch;
}

/* The global reset strips underlines, which left the answers' links indistinguishable from text. */
.faq p a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* CTA + footer ------------------------------------------------------------ */

.cta {
  text-align: center;
}

.cta .card--brand > * + * {
  margin-top: 18px;
}

.cta .lead {
  margin-inline: auto;
}

.cta__actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Two columns, so the card isn't a long stack: the message on the left, the QR code and the
   waitlist on the right. One column again on narrow screens. */
.cta__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: center;
}

.cta .cta__card > * + * {
  margin-top: 0;
}

.cta__copy > * + *,
.cta__side > * + * {
  margin-top: 18px;
}

.cta__side .cta__qr {
  margin-top: 0;
}

@media (max-width: 900px) {
  .cta__card {
    grid-template-columns: 1fr;
  }
}

/* Round outlined links next to the language button, for the Instagram and X accounts. */
.cta__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--on-blue);
  transition: border-color 0.15s ease;
}

.cta__social:hover {
  border-color: rgba(255, 255, 255, 0.7);
}

.cta__social svg {
  width: 24px;
  height: 24px;
}

/* The code is drawn on its own white card (see make-qr.swift), so it needs no frame here — only
   room to breathe against the blue. */
.cta__qr {
  margin: 26px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.cta__qr img {
  width: 180px;
  height: 180px;
  border-radius: 18px;
  display: block;
}

.waitlist {
  margin: 26px auto 0;
  max-width: 420px;
  text-align: left;
}

.waitlist__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 8px;
}

.waitlist__row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.waitlist__input {
  flex: 1 1 200px;
  min-width: 0;
  height: 52px;
  padding: 0 18px;
  border-radius: var(--radius-control, 14px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font: inherit;
  font-size: 16px; /* anything smaller and iOS zooms the page when it's focused */
}

.waitlist__input::placeholder { color: rgba(255, 255, 255, 0.5); }

.waitlist__input:focus {
  outline: none;
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
}

.waitlist__row .btn { flex: 0 0 auto; }

.waitlist__note {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin: 10px 0 0;
}

/* The Turnstile challenge runs invisibly for almost everyone, so this slot stays collapsed until
   Cloudflare decides a human has to click something and puts a widget in it. */
.waitlist__captcha:empty { display: none; }

.waitlist__captcha { margin: 12px 0 0; }

/* Empty until there is something to say, so it takes no room up front. */
.waitlist__status:empty { display: none; }

.waitlist__status {
  font-size: 14px;
  font-weight: 600;
  margin: 10px 0 0;
  color: #ffffff;
}

.waitlist__status[data-kind="ok"] { color: var(--lime); }
.waitlist__status[data-kind="error"] { color: #ffc9c9; }
.waitlist__status[data-kind="working"] { color: rgba(255, 255, 255, 0.7); }

/* Takes the waitlist's place once the app is out. */
.cta__download {
  margin: 26px auto 0;
  max-width: 420px;
}

.cta__download svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex: none;
}

.cta__download .waitlist__note {
  text-align: center;
}

.cta__qr figcaption {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
}

footer {
  border-top: 1px solid var(--hairline);
  padding: 44px 0 60px;
  color: var(--text-3);
  font-size: 14px;
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: center;
}

.footer__links {
  display: flex;
  gap: 22px;
  margin-left: auto;
  flex-wrap: wrap;
}

.footer__links a:hover {
  color: var(--text);
}

/* Legal pages ------------------------------------------------------------- */

.prose {
  max-width: 72ch;
  padding: clamp(48px, 7vw, 90px) 0;
}

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

.prose h2 {
  font-size: 24px;
  margin-top: 40px;
}

.prose p,
.prose li {
  color: var(--text-2);
  font-size: 16px;
}

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

.prose li + li {
  margin-top: 8px;
}

.prose a {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Responsive -------------------------------------------------------------- */

@media (max-width: 900px) {
  .hero__inner,
  .feature {
    grid-template-columns: 1fr;
  }

  .feature--flip .feature__media {
    order: 0;
  }

  .hero__media {
    max-width: 340px;
  }

  .grid--3,
  .grid--2 {
    grid-template-columns: 1fr;
  }

  .screens {
    grid-template-columns: repeat(2, 1fr);
  }

  .nav__links {
    display: none;
  }
}

/* Phones inside feature rows stay modest, so the page doesn't turn into a mile of screenshots. */
.feature__media .phone,
.hero__media .phone {
  max-width: 330px;
  margin-inline: auto;
}

/* Light mode ---------------------------------------------------------------
   Mirrors the app's light theme: ink on off-white, white cards, blue as the accent (lime stays on
   the blue surfaces, where it is readable).

   The switch in the header writes `data-theme` on <html>, and the script there sets it on load from
   the stored choice or the system setting. The media query below is the no-script fallback. */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
  --bg: #f6f4f9;
    --bg-raised: #ffffff;
    --card: #ffffff;
    --hairline: rgba(18, 15, 23, 0.1);
    --text: #120f17;
    --text-2: rgba(18, 15, 23, 0.62);
    --text-3: rgba(18, 15, 23, 0.45);
  }
}

:root[data-theme="light"] {
  --bg: #f6f4f9;
  --bg-raised: #ffffff;
  --card: #ffffff;
  --hairline: rgba(18, 15, 23, 0.1);
  --text: #120f17;
  --text-2: rgba(18, 15, 23, 0.62);
  --text-3: rgba(18, 15, 23, 0.45);
}

:root[data-theme="light"] .wordmark,
:root[data-theme="light"] .accent,
:root[data-theme="light"] .card__num,
:root[data-theme="light"] .rung__index,
:root[data-theme="light"] .eyebrow--lime,
:root[data-theme="light"] .prose a,
:root[data-theme="light"] .lang a[aria-current="true"],
:root[data-theme="light"] .faq summary::after {
  color: var(--blue);
}

:root[data-theme="light"] .card--brand .eyebrow--lime {
  color: var(--lime);
}

:root[data-theme="light"] .card__num {
  background: rgba(35, 61, 255, 0.08);
}

:root[data-theme="light"] .card {
  box-shadow: 0 1px 2px rgba(18, 15, 23, 0.04), 0 12px 32px rgba(18, 15, 23, 0.05);
}

:root[data-theme="light"] .rung,
:root[data-theme="light"] .chip,
:root[data-theme="light"] .store {
  background: #ffffff;
}

:root[data-theme="light"] .page-glow {
  filter: blur(130px);
}

:root[data-theme="light"] .phone {
  background: linear-gradient(160deg, rgba(18, 15, 23, 0.14), rgba(18, 15, 23, 0.06));
  box-shadow: 0 30px 70px rgba(18, 15, 23, 0.18);
}

:root[data-theme="light"] .btn--ghost {
  border-color: rgba(18, 15, 23, 0.18);
}

/* Screenshots ----------------------------------------------------------------
   The phones always carry the opposite appearance of the page: a dark page shows the app in light
   mode and the other way round, so the screenshots stand out instead of blending into the section. */

.shot--app-dark {
  display: none;
}

:root[data-theme="light"] .shot--app-dark {
  display: block;
}

:root[data-theme="light"] .shot--app-light {
  display: none;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .shot--app-dark {
    display: block;
  }

  :root:not([data-theme]) .shot--app-light {
    display: none;
  }
}

/* Theme switch ---------------------------------------------------------------- */

.theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--hairline);
  background: var(--bg-raised);
  color: var(--text-2);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.theme:hover {
  color: var(--text);
}

.theme svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.theme .theme__moon {
  display: none;
}

:root[data-theme="light"] .theme .theme__moon {
  display: block;
}

:root[data-theme="light"] .theme .theme__sun {
  display: none;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .theme .theme__moon {
    display: block;
  }

  :root:not([data-theme]) .theme .theme__sun {
    display: none;
  }
}

/* Mascot ----------------------------------------------------------------------- */

.mascot {
  width: 84px;
  height: 84px;
  flex: none;
}

.card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cta .mascot {
  width: 120px;
  height: 120px;
  margin: 0 auto;
}

.hero__mascot {
  position: absolute;
  right: -8px;
  bottom: 18px;
  width: 116px;
  height: 116px;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
  animation: bob 5s ease-in-out infinite alternate;
}

@keyframes bob {
  from {
    transform: translateY(0) rotate(-3deg);
  }
  to {
    transform: translateY(-14px) rotate(3deg);
  }
}

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

@media (max-width: 900px) {
  .hero__mascot {
    width: 84px;
    height: 84px;
    right: 0;
  }
}

/* Lime closing card — the inverse of the blue one: dark text on lime, blue call to action. */

.card--lime {
  background: var(--lime);
  border-color: transparent;
  border-radius: var(--radius-brand);
  padding: clamp(28px, 4vw, 44px);
}

.card--lime h2,
.card--lime h3 {
  color: var(--on-lime);
}

.card--lime .eyebrow {
  color: rgba(16, 16, 16, 0.55);
}

.card--lime .lead,
.card--lime p {
  color: rgba(16, 16, 16, 0.72);
}

.card--lime .btn--blue {
  background: var(--blue);
  color: #ffffff;
}

.card--lime .btn--ink {
  border-color: rgba(16, 16, 16, 0.3);
  color: var(--on-lime);
}

.card--lime .btn--ink:hover {
  border-color: rgba(16, 16, 16, 0.55);
  color: var(--on-lime);
}