/* Polyglot Pro: the website.
   A light, quiet page around one idea from the app: a sentence being said,
   its words lighting up one after another. The page is the launch film's
   own warm paper, so the film sits on it with no frame. Amber is the mark's
   own colour; each language brings its colour only where that language is
   on show. The app's own dark canvas appears where the app does: in its
   phones, and the footer. */

/* The fonts, from polyglotpro.ai itself (SIL Open Font License; the
   licences are beside them in /fonts). Latin, and the extended Latin that
   Polish needs; other scripts use the system's own. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/newsreader-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/newsreader-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;

  /* The film's paper. Its file says #FAF7F6, and browsers paint it a level
     or two lighter as they convert its colour, so the page sits between. */
  --page: #FBF8F7;
  --card: #F1EDE8;
  --ink: #17181C;
  --soft: #5C5E66;
  --line: rgb(23 24 28 / 0.09);
  --line-strong: rgb(23 24 28 / 0.16);

  /* The mark: lit words in the app's amber, the rest still to say. */
  --amber: #FFB324;
  --amber-soft: #FFE1A1;
  --amber-ink: #8F5C00;
  --word: #E4E1DA;
  --word-dark: #4A4C55;

  /* The app's own canvas. */
  --charcoal: #202126;
  --charcoal-ink: #F3F3F5;
  --charcoal-soft: #C9CAD0;
  --charcoal-muted: #A6A7B0;

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* The serif is only for what the learner says in English, as in the app. */
  --serif: ui-serif, "Newsreader", "New York", Georgia, serif;
  --zh: "Geist", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --ko: "Geist", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --th: "Geist", "Sukhumvit Set", "Thonburi", "Noto Sans Thai", "Leelawadee UI", sans-serif;
  --ar: "Geist", "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Segoe UI", sans-serif;

  /* One type scale for the whole site. */
  --t-display: clamp(2.75rem, 1.5rem + 4.4vw, 5rem);
  --t-h2: clamp(2.125rem, 1.4rem + 2.7vw, 3.5rem);
  --t-h3: clamp(1.25rem, 1.12rem + 0.45vw, 1.5rem);
  --t-lead: clamp(1.125rem, 1.02rem + 0.42vw, 1.375rem);
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;

  /* One rhythm for every section. */
  --section: clamp(80px, 9vw, 136px);
  --head-gap: clamp(40px, 4.6vw, 64px);

  --gutter: clamp(20px, 5vw, 48px);
  --max: 1200px;
  --header: 68px;
  --radius: 28px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  background: var(--page);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header) + 16px);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  min-height: 100svh;
  overflow-x: clip;
  background: var(--page);
  color: var(--ink);
  font: 400 var(--t-body)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }
ul, ol { padding: 0; }
a { color: inherit; }
strong { font-weight: 600; color: var(--ink); }

:lang(zh) { font-family: var(--zh); }
:lang(ko) { font-family: var(--ko); }
:lang(th) { font-family: var(--th); }
:lang(ar), :lang(fa) { font-family: var(--ar); }

ruby { ruby-position: under; -webkit-ruby-position: after; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 8px;
}

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

.skip {
  position: absolute;
  left: 12px; top: -100px;
  z-index: 50;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--page);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 12px; }
main:focus { outline: none; }

.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

.eyebrow {
  font: 600 0.75rem/1.2 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
}

.link {
  color: var(--ink);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.link:hover { text-decoration-color: var(--ink); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.button--primary { background: var(--ink); color: #FFFFFF; }
.button--primary:hover { background: #2E3036; }
.button:active { transform: scale(0.98); }

/* Sections come into view gently, once; the page never waits on them. */
@media (prefers-reduced-motion: no-preference) {
  .reveal-on [data-reveal] {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  }
  .reveal-on [data-reveal].is-in { opacity: 1; transform: none; }
  .reveal-on [data-reveal-group] > * {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
    transition-delay: calc(var(--k, 0) * 70ms);
  }
  .reveal-on [data-reveal-group].is-in > * { opacity: 1; transform: none; }
}

@media print {
  [data-reveal], [data-reveal-group] > *, .levels .level__lines i { opacity: 1 !important; transform: none !important; }
  .site-header { position: static; }
}

/* MARK: - The mark: a sentence being said */

.mark { overflow: visible; }
.mark__word { fill: var(--word); }
.mark__word.is-lit { fill: var(--amber); }

@media (prefers-reduced-motion: no-preference) {
  .mark--live .mark__word {
    transform-box: fill-box;
    transform-origin: center;
    animation: say-word 6.4s var(--ease) infinite both;
    animation-delay: calc(0.6s + var(--i) * 0.34s);
  }
}
/* Each word lights in turn, the sentence rests, then clears in the same
   order and begins again. */
@keyframes say-word {
  0%, 2% { fill: var(--word); transform: scale(1); }
  5% { fill: var(--amber); transform: scale(1.07); }
  9% { fill: var(--amber); transform: scale(1); }
  58% { fill: var(--amber); }
  64%, 100% { fill: var(--word); transform: scale(1); }
}

/* MARK: - Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid transparent;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.site-header.is-stuck {
  background: rgb(251 248 247 / 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--line);
}
.site-header__inner {
  height: var(--header);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}
.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font: 600 1.0625rem/1 var(--sans);
  letter-spacing: -0.015em;
  text-decoration: none;
  white-space: nowrap;
}
.brand__icon { width: 30px; height: 30px; border-radius: 22.37%; }
.brand--on-dark { color: var(--charcoal-ink); }

.site-nav ul { list-style: none; display: flex; gap: 2px; }
.site-nav a {
  display: block;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--soft);
  font-size: var(--t-small);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.site-nav a:hover { color: var(--ink); background: var(--card); }

.get-app {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--ink);
  color: #FFFFFF;
  font-size: var(--t-small);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.get-app:hover { background: #2E3036; }
.get-app:active { transform: scale(0.97); }

@media (max-width: 860px) {
  .site-header__inner { grid-template-columns: 1fr auto; }
  .site-nav { display: none; }
}

/* MARK: - Hero */

.hero {
  padding-block: clamp(40px, 7vh, 88px) clamp(24px, 3vw, 48px);
  overflow-x: clip;
  text-align: center;
}
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }

/* Hello in each language, one after another, each in its colour. */
.greet {
  display: grid;
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.greet__word {
  grid-area: 1 / 1;
  color: var(--ci);
  opacity: 0;
}
.greet__word:first-child { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .greet__word, .greet__word:first-child {
    animation: greet 22s linear infinite both;
    animation-delay: calc(var(--i) * 2.2s);
  }
}
@keyframes greet {
  0% { opacity: 0; filter: blur(10px); transform: translateY(8px); animation-timing-function: var(--ease); }
  2.4% { opacity: 1; filter: blur(0); transform: none; }
  8.4% { opacity: 1; filter: blur(0); transform: none; animation-timing-function: ease-in; }
  10% { opacity: 0; filter: blur(8px); transform: translateY(-6px); }
  100% { opacity: 0; filter: blur(8px); }
}

.hero__title {
  max-width: 13em;
  margin-top: 6px;
  font: 600 var(--t-display)/1.03 var(--sans);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero__sub {
  max-width: 40em;
  margin-top: 18px;
  color: var(--soft);
  font-size: var(--t-lead);
  line-height: 1.5;
  text-wrap: balance;
}

/* Apple asks for clear space of a quarter of the badge's height around it. */
.store {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin-top: 28px;
}
.store__badge { display: block; padding: 12px; border-radius: 14px; }
.store__badge img { height: 48px; width: auto; }
.store .button { margin-block: 10px 8px; }
.store__note { color: var(--soft); font-size: 0.875rem; }
/* Launch day: the offer, Apple's badge, and how the free part works. */
.store__offer { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.store--live .store__badge { margin-block: -4px -2px; }
.store--live .store__note { max-width: 25em; line-height: 1.5; text-wrap: balance; }

@media (prefers-reduced-motion: no-preference) {
  .js .greet, .js .hero__title { animation: rise 0.9s var(--ease) both; }
  .js .hero__sub, .js .hero .store { animation: rise 0.9s var(--ease) 0.12s both; }
  .js .hero__visual { animation: rise-far 1.1s var(--ease) 0.24s both; }
}
@keyframes rise-far {
  from { opacity: 0; transform: translateY(40px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* The product, in the first screen: the film once there is one, and until
   then a large phone where a line lights as it is said. */
.hero__visual { width: 100%; margin-top: clamp(32px, 4.4vh, 56px); }
.hero__visual--phone { display: grid; justify-items: center; }
.hero__visual .hero__phone { width: clamp(248px, 24vw, 330px); }
.hero__visual .hero__phone::before { inset: -2% -80% 6%; }
.hero .store { margin-top: 20px; }
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* MARK: - The film
   No frame: the page is the film's paper, and a soft rim of that paper
   dissolves the film's edges (where its glow and, in a few scenes, its
   phone reach them) into the page. Its two controls sit under it. */

/* Wider than the text column, centred on it, without widening the column. */
.hero__visual--film {
  --film: min(100vw, 1280px);
  justify-self: start;
  width: var(--film);
  margin: clamp(0px, 1vh, 12px) calc((100% - var(--film)) / 2) 0;
}
/* The film's edges turn transparent, so the page itself shows through
   them, with no painted band to mismatch the film's own paper. The sides,
   empty paper, fade wide; the top and bottom, which its phone comes close
   to, fade short. */
.film__frame {
  --fade-x: clamp(24px, 12vw, 180px);
  --fade-y: clamp(10px, 3.6vw, 52px);
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 var(--fade-x), #000 calc(100% - var(--fade-x)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--fade-y), #000 calc(100% - var(--fade-y)), transparent);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent, #000 var(--fade-x), #000 calc(100% - var(--fade-x)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--fade-y), #000 calc(100% - var(--fade-y)), transparent);
  mask-composite: intersect;
}
.film__frame video { width: 100%; height: 100%; object-fit: cover; }
.js .film__frame video { cursor: pointer; }
.film__controls {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: clamp(-28px, -2vw, -8px);
}
.no-js .film__controls { display: none; }
.film__play,
.film__sound {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.55);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.film__play:hover, .film__sound:hover { background: #FFFFFF; }
.film__play { width: 38px; }
.film__play svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.film__play .i-play { display: none; fill: currentColor; stroke-width: 1.2; }
.film__play[data-paused] .i-pause { display: none; }
.film__play[data-paused] .i-play { display: block; }
.film__sound { gap: 8px; padding: 0 16px 0 13px; font-size: 0.875rem; font-weight: 600; }
.film__sound svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.film__sound svg path:first-child { fill: currentColor; }
.film__sound[aria-pressed="false"] .i-waves { opacity: 0.3; }
.film__length { color: var(--soft); font-weight: 500; font-variant-numeric: tabular-nums; }

/* MARK: - Sections */

.section { padding-block: var(--section); overflow-x: clip; }

.section__title {
  max-width: 14em;
  font: 600 var(--t-h2)/1.05 var(--sans);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.section__head { max-width: 42rem; margin-bottom: var(--head-gap); }
.section__head p {
  margin-top: 20px;
  max-width: 34em;
  color: var(--soft);
  font-size: var(--t-lead);
  line-height: 1.5;
  text-wrap: pretty;
}
.section__head p + p { margin-top: 12px; }

/* MARK: - Phones, framed as on the App Store slides */

.device {
  container-type: inline-size;
  position: relative;
  width: 100%;
  isolation: isolate;
}
.device::before {
  content: "";
  position: absolute;
  inset: 6% -26% 10%;
  z-index: -1;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--c) 22%, transparent),
    color-mix(in srgb, var(--c) 8%, transparent) 55%,
    transparent
  );
  pointer-events: none;
}
.device__frame {
  padding: 2.5cqi;
  border-radius: 15.5cqi;
  background: #0C0C0E;
  box-shadow:
    0 0 0 max(1px, 0.45cqi) #34353B,
    0 6cqi 14cqi -4cqi rgb(23 24 28 / 0.35),
    0 1.5cqi 4cqi rgb(23 24 28 / 0.12);
}

/* MARK: - The app, drawn
   Its screens are laid out in the app's own points: --u is one point of a
   390-point-wide iPhone screen, so the drawing scales with the phone. */

.app {
  --u: calc(100cqi / 390);
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  aspect-ratio: 1206 / 2622;
  overflow: hidden;
  border-radius: 13cqi;
  background: var(--charcoal);
  color: var(--charcoal-ink);
  font-family: var(--sans);
  text-align: left;
}
.app strong { color: inherit; }
/* The room lit in the language's colour from the top corner, as in the app. */
.app::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    circle at 100% 0,
    color-mix(in srgb, var(--c) 24%, transparent) 0%,
    color-mix(in srgb, var(--c) 20%, transparent) 12%,
    color-mix(in srgb, var(--c) 13%, transparent) 24%,
    color-mix(in srgb, var(--c) 6%, transparent) 36%,
    color-mix(in srgb, var(--c) 2%, transparent) 48%,
    transparent 60%
  );
}
.app__screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding-top: calc(54 * var(--u));
}
.app__status {
  position: absolute;
  inset: 0 0 auto;
  height: calc(54 * var(--u));
  display: flex;
  align-items: center;
  padding: calc(4 * var(--u)) calc(30 * var(--u)) 0 calc(46 * var(--u));
  font-size: calc(16.5 * var(--u));
  font-weight: 600;
  letter-spacing: -0.01em;
}
.app__island {
  position: absolute;
  left: 50%;
  top: calc(11 * var(--u));
  width: calc(124 * var(--u));
  height: calc(36 * var(--u));
  margin-left: calc(-62 * var(--u));
  border-radius: 999px;
  background: #000000;
}
.app__battery {
  position: relative;
  margin-left: auto;
  width: calc(26 * var(--u));
  height: calc(12.5 * var(--u));
  border-radius: calc(4 * var(--u));
  box-shadow: inset 0 0 0 calc(1.2 * var(--u)) rgb(243 243 245 / 0.5);
}
.app__battery::after {
  content: "";
  position: absolute;
  inset: calc(2.2 * var(--u));
  border-radius: calc(2 * var(--u));
  background: var(--charcoal-ink);
}
.app__title { font-size: calc(17 * var(--u)); font-weight: 600; text-align: center; }
.app__subtitle {
  margin-top: calc(2 * var(--u));
  color: var(--charcoal-muted);
  font-size: calc(12.5 * var(--u));
  font-weight: 500;
  text-align: center;
}
.app__eyebrow {
  margin-top: calc(10 * var(--u));
  color: var(--ct);
  font-size: calc(11 * var(--u));
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}
.app__foot {
  display: grid;
  justify-items: center;
  margin-top: auto;
  padding-bottom: calc(48 * var(--u));
}
.app__button {
  display: grid;
  place-items: center;
  width: calc(350 * var(--u));
  height: calc(56 * var(--u));
  border-radius: 999px;
  background: var(--c);
  color: var(--ink);
  font-size: calc(18 * var(--u));
  font-weight: 600;
}
.app__button--small { width: calc(200 * var(--u)); height: calc(50 * var(--u)); font-size: calc(17 * var(--u)); }
.app__link { margin-top: calc(18 * var(--u)); color: var(--charcoal-soft); font-size: calc(15 * var(--u)); }
.app__caption {
  margin-top: calc(16 * var(--u));
  color: var(--charcoal-soft);
  font-size: calc(13 * var(--u));
  font-weight: 500;
}
.app__back {
  position: absolute;
  left: calc(18 * var(--u));
  top: calc(10 * var(--u));
  color: var(--charcoal-muted);
  font-size: calc(16 * var(--u));
}
.app__segments { display: flex; justify-content: center; gap: calc(8 * var(--u)); }
.app__segments i {
  display: block;
  width: calc(46 * var(--u));
  height: calc(3.5 * var(--u));
  border-radius: 999px;
  background: #3A3B41;
}
.app__segments .is-done { background: color-mix(in srgb, var(--c) 58%, var(--charcoal)); }
.app__segments .is-now, .app__segments--all i { background: var(--c); }

/* The mic: held, it is live. */
.app__mic {
  display: grid;
  place-items: center;
  width: calc(108 * var(--u));
  height: calc(108 * var(--u));
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 26%, transparent);
}
.app__mic-disc {
  display: grid;
  place-items: center;
  width: calc(78 * var(--u));
  height: calc(78 * var(--u));
  border-radius: 50%;
  background: var(--c);
}
.app__mic-disc svg {
  width: 50%;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.9;
  stroke-linecap: round;
}
.app__mic-disc svg rect { fill: var(--ink); stroke: none; }
.app__mic--small { width: calc(88 * var(--u)); height: calc(88 * var(--u)); }
.app__mic--small .app__mic-disc { width: calc(64 * var(--u)); height: calc(64 * var(--u)); }

/* Telling it. */
.tell__head { margin-top: calc(38 * var(--u)); }
.tell__prompt {
  margin: calc(34 * var(--u)) calc(22 * var(--u)) 0;
  font: 600 calc(31 * var(--u))/1.14 var(--serif);
  letter-spacing: -0.01em;
}
.tell__hint { margin: calc(8 * var(--u)) calc(22 * var(--u)) 0; color: var(--charcoal-soft); font-size: calc(15 * var(--u)); }
.tell__said { margin: calc(34 * var(--u)) calc(22 * var(--u)) 0; font: 600 calc(21 * var(--u))/1.26 var(--serif); }

/* The story, written. */
.read__title {
  margin: calc(112 * var(--u)) calc(20 * var(--u)) 0;
  font: 500 calc(29 * var(--u))/1.15 var(--serif);
  text-align: center;
}
.read__lines {
  list-style: none;
  display: grid;
  gap: calc(20 * var(--u));
  margin: calc(36 * var(--u)) calc(22 * var(--u)) 0;
  text-align: center;
}
.read__target { display: block; font-size: calc(18.5 * var(--u)); font-weight: 600; line-height: 1.25; }
.read__en {
  display: block;
  margin-top: calc(4 * var(--u));
  color: #9C9DA5;
  font: 400 calc(14 * var(--u))/1.3 var(--serif);
}
.read__tap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(8 * var(--u));
  margin-top: calc(28 * var(--u));
  color: var(--charcoal-muted);
  font-size: calc(12.5 * var(--u));
  font-weight: 500;
}
.read__tap svg, .app .hear svg {
  width: calc(16 * var(--u));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.read__tap svg path:first-child { fill: currentColor; }

/* A line, said from memory. */
.app--say .app__segments { margin-top: calc(84 * var(--u)); }
.say__cue {
  margin: calc(168 * var(--u)) calc(24 * var(--u)) 0;
  color: var(--charcoal-soft);
  font: 600 calc(21 * var(--u))/1.25 var(--serif);
  text-align: center;
}
.say__words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(10 * var(--u)) calc(12 * var(--u));
  margin: calc(26 * var(--u)) calc(16 * var(--u)) 0;
}
.sw { display: grid; justify-items: center; }
.sw b {
  color: var(--ct);
  font-size: calc(29 * var(--u));
  font-weight: 600;
  line-height: 1.15;
  border-bottom: calc(2 * var(--u)) solid transparent;
}
.sw small { margin-top: calc(3 * var(--u)); color: #9A9BA3; font-size: calc(13 * var(--u)); }
/* A word not said yet is a blank of its own width over its gloss. */
.sw:not(.is-said) b { color: transparent; border-bottom-color: var(--word-dark); }
.say__listening {
  margin-bottom: calc(16 * var(--u));
  color: var(--ct);
  font-size: calc(15 * var(--u));
  font-weight: 600;
}

/* The story's card. */
.card__head { position: relative; margin-top: calc(12 * var(--u)); padding: 0 calc(76 * var(--u)); text-align: center; }
.card__title { font: 600 calc(18 * var(--u))/1.15 var(--serif); }
.card__head .app__segments { margin-top: calc(12 * var(--u)); }
.card {
  position: relative;
  margin: calc(54 * var(--u)) calc(20 * var(--u)) 0;
  padding: calc(22 * var(--u));
  border-radius: calc(22 * var(--u));
  background:
    radial-gradient(circle at 85% 12%, color-mix(in srgb, var(--c) 22%, transparent), transparent 60%),
    #2A2A2D;
  box-shadow: inset 0 0 0 calc(1 * var(--u)) color-mix(in srgb, var(--c) 46%, transparent);
}
.card__name {
  min-height: calc(58 * var(--u));
  padding-right: calc(72 * var(--u));
  font: 600 calc(21 * var(--u))/1.15 var(--serif);
}
.card__stamp {
  position: absolute;
  top: calc(18 * var(--u));
  right: calc(18 * var(--u));
  display: grid;
  place-items: center;
  width: calc(58 * var(--u));
  height: calc(58 * var(--u));
  border-radius: 50%;
  background: var(--c);
  color: var(--ink);
  font-size: calc(17 * var(--u));
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 0 calc(34 * var(--u)) color-mix(in srgb, var(--c) 50%, transparent);
}
.card__note {
  margin-top: calc(16 * var(--u));
  color: var(--charcoal-muted);
  font-size: calc(12 * var(--u));
  font-weight: 500;
}
/* The story, grown: its lines drawn as the words of the mark. */
.card__rows { display: grid; gap: calc(8 * var(--u)); margin-top: calc(20 * var(--u)); }
.card__rows .row { display: flex; gap: calc(6 * var(--u)); }
.card__rows .row i {
  display: block;
  height: calc(9 * var(--u));
  border-radius: 999px;
  background: var(--c);
  transition: background-color 0.35s ease;
}
.card__rows .row.is-new i { background: var(--word-dark); }
.card__rows .row.is-hidden { display: none; }

/* What moves, when it plays: added on top of screens that are complete
   without it. */
@media (prefers-reduced-motion: no-preference) {
  .is-playing .app__mic { animation: mic-live 1.6s ease-in-out infinite; }
  .is-playing .tell__said span { animation: dictate 0.5s var(--ease) both; animation-delay: calc(0.5s + var(--i) * 0.14s); }
  .is-playing .read__lines li { animation: line-in 0.7s var(--ease) both; animation-delay: calc(0.35s + var(--i) * 0.38s); }
  .is-playing .sw b { animation: said 8s var(--ease) infinite both; animation-delay: calc(0.4s + var(--i) * 0.42s); }
  .card__stamp.is-stamping { animation: stamp 0.7s var(--ease) both; }
  .card__rows .row.is-arriving { animation: line-in 0.45s var(--ease) both; }
}
@keyframes mic-live {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes dictate {
  from { opacity: 0; filter: blur(4px); }
  to { opacity: 1; filter: blur(0); }
}
@keyframes line-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes said {
  0%, 4% { color: transparent; border-bottom-color: var(--word-dark); }
  7%, 60% { color: var(--ct); border-bottom-color: transparent; }
  64%, 100% { color: transparent; border-bottom-color: var(--word-dark); }
}
@keyframes stamp {
  0% { opacity: 0; transform: scale(1.9) rotate(-16deg); }
  55% { opacity: 1; transform: scale(0.92) rotate(0deg); }
  100% { opacity: 1; transform: scale(1); }
}

/* MARK: - One story, start to finish
   A sequence of moments, each with its phone. On wide screens with motion,
   one phone stays in view while the moments scroll past it. */

.beats { list-style: none; display: grid; gap: clamp(64px, 9vw, 112px); }
.beat { display: grid; justify-items: center; gap: 32px; text-align: center; }
.beat__text { max-width: 27rem; }
.beat__text h3 { font: 600 var(--t-h3)/1.2 var(--sans); letter-spacing: -0.02em; text-wrap: balance; }
.beat__text p { margin-top: 10px; color: var(--soft); font-size: var(--t-body); text-wrap: pretty; }
.beat__phone { width: min(72vw, 272px); }
.story__stage { display: none; }

/* Narrower screens: each moment beside its phone, the phones taking turns
   on either side, so the four read as one sequence rather than four
   full-height phones in a column. */
@media (max-width: 959px) {
  .beats { gap: clamp(40px, 7vw, 64px); }
  .beat {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    align-items: center;
    justify-items: start;
    gap: clamp(18px, 4vw, 48px);
    text-align: left;
  }
  .beat:nth-child(even) { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); }
  .beat:nth-child(even) .beat__phone { order: -1; }
  .beat__phone { width: 100%; max-width: 260px; justify-self: center; }
  .beat__text h3 { font-size: clamp(1.125rem, 1rem + 0.9vw, 1.5rem); }
  .beat__text p { font-size: clamp(0.9375rem, 0.88rem + 0.4vw, 1.0625rem); line-height: 1.55; }
}

@media (min-width: 960px) {
  .beat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); justify-items: start; align-items: center; gap: 64px; text-align: left; }
  .beat__phone { width: min(100%, 300px); justify-self: center; }
}

@media (min-width: 960px) and (prefers-reduced-motion: no-preference) {
  /* The heading opens the left column, so the phone is there from the
     start, beside it. */
  .js .story {
    --phone: min(310px, calc((100vh - 170px) * 0.44));
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 64px;
  }
  .js .story__head { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .js .beats { grid-column: 1; grid-row: 2; gap: 0; }
  .js .story__stage { grid-column: 2; grid-row: 1 / span 2; }
  .js .story-section { padding-bottom: clamp(48px, 5vw, 80px); }
  .js .beat {
    display: flex;
    min-height: 50vh;
    align-items: center;
    opacity: 0.32;
    transition: opacity 0.5s ease;
  }
  .js .beat.is-active { opacity: 1; }
  /* Room under the last moment, so the phone is still held in full when
     that moment reaches the middle of the window and its card is stamped:
     the stuck phone's foot (its top, plus its height) less the last
     moment's foot (three quarters of the way down). */
  .js .beats {
    padding-bottom: max(0px, calc(max(var(--header) + 16px, 50vh - var(--phone) * 1.1 + 20px) + var(--phone) * 2622 / 1206 - 75vh + 24px));
  }
  .js .beat__text { max-width: 31rem; }
  .js .beat__text h3 { font-size: clamp(1.875rem, 1.15rem + 1.7vw, 2.75rem); line-height: 1.08; letter-spacing: -0.035em; }
  .js .beat__text p { font-size: var(--t-lead); line-height: 1.5; }
  .js .beat__phone { display: none; }
  .js .story__stage { display: block; }
  .js .story__sticky {
    isolation: isolate;
    position: sticky;
    top: max(calc(var(--header) + 16px), calc(50vh - var(--phone) * 1.1 + 20px));
    display: grid;
    justify-items: center;
  }
  .js .story__phone { width: var(--phone); }
  .js .story__sticky::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    width: calc(var(--phone) * 2.6);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(
      closest-side,
      color-mix(in srgb, var(--c) 20%, transparent),
      color-mix(in srgb, var(--c) 8%, transparent) 50%,
      transparent
    );
    pointer-events: none;
  }
  .js .story__phone .app__screen {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease, visibility 0s linear 0.45s;
  }
  .js .story__phone .app__screen.is-shown { opacity: 1; visibility: visible; transition: opacity 0.45s ease; }
}

/* MARK: - Real screens
   Five of the app's own screens in a row, each lit in the colour of the
   language it was captured in. Where five don't fit, the row scrolls
   sideways, the next phone peeking in from the edge. */

.shots__lead {
  max-width: 30em;
  margin-top: 16px;
  color: var(--soft);
  font-size: var(--t-lead);
  line-height: 1.5;
  text-wrap: balance;
}
.shots__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 36px);
  margin-top: clamp(36px, 4.4vw, 56px);
}
.shots__list:focus-visible { outline-offset: 8px; border-radius: 16px; }
.shot { display: grid; justify-items: center; align-content: start; text-align: center; }
.shot .device { max-width: 214px; }
.device__frame img { width: 100%; border-radius: 13cqi; background: var(--charcoal); }
.shot__caption { margin-top: 22px; color: var(--soft); font-size: var(--t-small); line-height: 1.4; }
.shot__lang { display: block; color: var(--ci); font-weight: 600; }
@media (max-width: 899px) {
  .shots__list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(56vw, 212px);
    gap: 16px;
    margin-inline: calc(-1 * var(--gutter));
    padding: 8px var(--gutter) 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .shots__list::-webkit-scrollbar { display: none; }
  .shot { scroll-snap-align: start; }
}

/* MARK: - The Polyglot Method
   One sentence carries it: what most apps do, muted, and what polyglots do,
   in full ink, its words lighting as if said. Three short reasons follow. */

.kicker {
  color: var(--amber-ink);
  font: 600 0.8125rem/1.2 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.statement {
  max-width: 21em;
  margin-top: 22px;
  font: 600 clamp(1.875rem, 1.15rem + 2.4vw, 3.25rem)/1.12 var(--sans);
  letter-spacing: -0.032em;
  text-wrap: pretty;
}
/* Large text, so 3:1 is enough; this grey keeps 3.1:1 on the paper. */
.statement__them { color: #8A8C94; }
.statement__word { transition: color 0.3s ease; }
.js .statement.is-waiting .statement__word { color: #D3D4D8; }
.js .statement .statement__word.is-lit { color: var(--ink); }
.principles {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px clamp(28px, 4vw, 56px);
  margin-top: var(--head-gap);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--line);
}
.principles h3 { font: 600 var(--t-h3)/1.2 var(--sans); letter-spacing: -0.02em; text-wrap: balance; }
.principles p { max-width: 26em; margin-top: 10px; color: var(--soft); text-wrap: pretty; }
@media (max-width: 860px) {
  .principles { grid-template-columns: 1fr; }
}

/* MARK: - From A1 to C2 */

.levels {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
.level { display: grid; align-content: start; }
/* The story at this level, one rounded line per line it needs: the older
   lines soft, the two this level adds in full amber. */
.level__lines {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  height: calc(14 * 8px + 13 * 5px);
}
.level__lines i {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--amber-soft);
  transform-origin: left center;
}
.level__lines i:nth-child(odd) { width: 86%; }
.level__lines i:nth-child(3n) { width: 64%; }
.level__lines i:nth-child(4n + 1) { width: 100%; }
.level__lines i:nth-last-child(-n + 2) { background: var(--amber); }
.level:first-child .level__lines i { background: var(--amber); }
.level__stamp {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-top: 24px;
  border-radius: 50%;
  background: var(--amber);
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.level__band { margin-top: 18px; font: 600 1.125rem/1.25 var(--sans); letter-spacing: -0.015em; text-wrap: balance; }
.level__count { margin-top: 4px; color: var(--amber-ink); font-size: 0.875rem; font-weight: 600; }
.level__topics { list-style: none; display: grid; gap: 6px; margin-top: 14px; color: var(--soft); font-size: var(--t-small); line-height: 1.4; }
@media (prefers-reduced-motion: no-preference) {
  .reveal-on .levels:not(.is-in) .level__lines i { transform: scaleX(0); }
  .reveal-on .levels .level__lines i {
    transition: transform 0.6s var(--ease);
    transition-delay: calc(var(--k) * 110ms + (13 - var(--r)) * 22ms);
  }
}
@media (max-width: 1023px) {
  .levels { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 56px; }
}
@media (max-width: 599px) {
  /* A list, each level's lines drawn as a row of short words. */
  .levels { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
  .level {
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: 18px;
    padding-block: 24px;
    border-bottom: 1px solid var(--line);
  }
  .level__stamp { grid-row: 1 / span 4; margin-top: 0; }
  .level__lines { grid-column: 2; order: 3; flex-direction: row; justify-content: flex-start; height: auto; gap: 4px; margin-top: 10px; }
  .level__lines i, .level__lines i:nth-child(n) { width: 12px; height: 6px; }
  .level__band { grid-column: 2; margin-top: 2px; }
  .level__count { grid-column: 2; }
  .level__topics { grid-column: 2; order: 4; }
}

/* MARK: - The sentence, on a language's page
   A teacher's line, in English and as the app writes it in the page's
   language: its words light one by one when it comes into view, and each
   teacher's button brings their own line. */

.stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  justify-items: center;
  width: 100%;
  max-width: 1040px;
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(40px, 5.6vw, 80px) clamp(20px, 5vw, 64px) clamp(28px, 3.6vw, 44px);
  border-radius: 32px;
  background: var(--card);
  text-align: center;
}
/* The room lit in the language's colour, as the app lights it. It stays in
   the corner, clear of the small coloured label, so that label keeps 4.5:1. */
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  --reach: clamp(360px, 52vw, 720px);
  background: radial-gradient(
    circle var(--reach) at 100% 0,
    color-mix(in srgb, var(--tint) 24%, transparent) 0%,
    color-mix(in srgb, var(--tint) 14%, transparent) 30%,
    color-mix(in srgb, var(--tint) 4%, transparent) 62%,
    transparent 100%
  );
}
.stage__you { margin-bottom: 14px; }
.stage__english {
  max-width: 19em;
  font: 500 clamp(1.5rem, 0.95rem + 1.9vw, 2.5rem)/1.14 var(--serif);
  letter-spacing: -0.02em;
  text-wrap: balance;
  font-variation-settings: "opsz" 72;
}
.stage__lang { margin: clamp(28px, 3.6vw, 44px) 0 12px; color: var(--ci); }
.say__line {
  max-width: 24em;
  font-size: clamp(1.25rem, 0.9rem + 1.3vw, 2rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
/* The app's lines, one under another, as the story shows them. */
.say__part { display: block; text-wrap: balance; }
.say__line:lang(zh) { line-height: 1.8; letter-spacing: 0.02em; }
/* A little air between Mandarin words, so each word's pinyin stands apart. */
.say__line:lang(zh) .w { padding-inline: 0.1em; }
/* Mandarin and Japanese break only where the page allows: between words,
   or after a Japanese particle. */
.say__line:lang(zh), .say__line:lang(ja) { word-break: keep-all; }
.say__line:lang(ko) { line-height: 1.4; letter-spacing: -0.02em; word-break: keep-all; }
.say__line:lang(th), .say__line:lang(ar), .say__line:lang(fa) { line-height: 1.55; letter-spacing: 0; }

/* Each teacher's version of the card's two halves, stacked in one place:
   the stack is as tall as the longest, so swapping never moves the page.
   The one showing crossfades in as the last fades out; under Reduce Motion
   it simply swaps. */
.stack { display: grid; width: 100%; justify-items: center; align-items: start; }
.stack > * { grid-area: 1 / 1; }
.stack > :not(.is-shown) { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .stack > * { transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s; }
  .stack > .is-shown { transition: opacity 0.45s var(--ease) 0.15s, visibility 0s; }
}

/* A word never breaks inside itself; lines break between words. */
.w { color: var(--ci); white-space: nowrap; transition: color 0.3s ease; }
.w rt {
  padding-top: 0.25em;
  color: var(--soft);
  font: 500 max(0.36em, 11px)/1 var(--sans);
  letter-spacing: 0.02em;
  transition: color 0.3s ease;
}
.js .stage.is-waiting .w, .js .stage.is-saying .w { color: rgb(23 24 28 / 0.2); }
.js .stage.is-waiting .w rt, .js .stage.is-saying .w rt { color: rgb(23 24 28 / 0.22); }
.js .stage .w.is-lit { color: var(--ci); }
.js .stage .w.is-lit rt { color: var(--soft); }

/* Hear it from a teacher in each place the app has one from: a button
   each, which brings that teacher's line to the card and plays their
   walkthrough of it, the playing one filled with the language's colour,
   its bars moving, as the app's Hear it is while a walkthrough plays. */
.teach { display: grid; justify-items: center; gap: 14px; margin-top: clamp(28px, 3.4vw, 40px); }
.teach__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 48rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px 0 14px;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.6);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink);
  font: 600 0.9375rem/1 var(--sans);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.chip:hover { background: #FFFFFF; }
.chip:active { transform: scale(0.98); }
.chip__speaker { width: 18px; height: 18px; color: var(--soft); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.chip__speaker path:first-child { fill: currentColor; }
/* The teacher whose line the card shows. */
.chip.is-current { box-shadow: inset 0 0 0 1.5px var(--ci); }
.chip.is-current .chip__speaker { color: var(--ci); }
.chip[aria-pressed="true"] { background: var(--ci); color: #FFFFFF; box-shadow: none; }
.chip[aria-pressed="true"] .chip__speaker { display: none; }
.bars { display: none; align-items: center; gap: 2px; width: 18px; height: 14px; justify-content: center; }
.bars i { width: 2px; height: 100%; border-radius: 1px; background: currentColor; transform: scaleY(var(--rest)); }
.bars i:nth-child(1) { --rest: 0.45; --phase: 0s; }
.bars i:nth-child(2) { --rest: 0.85; --phase: -0.495s; }
.bars i:nth-child(3) { --rest: 0.6; --phase: -0.18s; }
.bars i:nth-child(4) { --rest: 0.35; --phase: -0.72s; }
.chip[aria-pressed="true"] .bars { display: inline-flex; }
@media (prefers-reduced-motion: no-preference) {
  .chip.is-playing .bars i { animation: bar 0.9s ease-in-out var(--phase) infinite; }
}
@keyframes bar {
  0%, 100% { transform: scaleY(0.33); }
  50% { transform: scaleY(1); }
}
.no-js .teach { display: none; }
@media (max-width: 480px) {
  .chip { min-height: 44px; padding: 0 15px 0 12px; font-size: 0.875rem; }
}
.stage__note {
  max-width: 36em;
  margin-top: 20px;
  color: var(--soft);
  font-size: var(--t-small);
  line-height: 1.55;
  text-wrap: balance;
}
@media (max-width: 480px) {
  .stage { padding-inline: 16px; }
}

/* MARK: - A language's page */

.greet--one { display: grid; justify-items: center; gap: 2px; color: var(--ci); font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); }
.greet__roman { color: var(--soft); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em; }

.first-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 112px);
  align-items: center;
}
.first-story__text p {
  max-width: 30em;
  margin-top: 18px;
  color: var(--soft);
  font-size: var(--t-lead);
  line-height: 1.5;
  text-wrap: pretty;
}
.first-story__text p + p { margin-top: 12px; }
.first-story__phone { justify-self: center; width: min(76vw, 320px); }
@media (max-width: 860px) {
  .first-story__grid { grid-template-columns: 1fr; }
}

/* The other ten, each a door to its page, in its colour: five across, or
   two, so no row is left with one. */
.langs {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}
.langs__item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 4px;
  padding: 22px 24px;
  border-radius: 22px;
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.25s var(--ease);
}
.langs__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle 220px at 100% 0, color-mix(in srgb, var(--c) 22%, transparent), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.langs__item:hover { transform: translateY(-2px); }
.langs__item:hover::before { opacity: 1; }
.langs__hello { justify-self: start; color: var(--ci); font-size: 1.5rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.langs__name { font-weight: 500; }
@media (max-width: 899px) {
  .langs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* MARK: - A note from the maker */

.note__card {
  position: relative;
  max-width: 42rem;
  margin-inline: auto;
  padding: clamp(32px, 4.4vw, 60px);
  border-radius: 32px;
  background: var(--card);
}
.note__label {
  color: var(--amber-ink);
  font: 600 0.75rem/1.2 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.note__body { margin-top: 20px; }
.note__body > :first-child { margin-top: 0; }
.note__body h2 { font: 600 var(--t-h3)/1.2 var(--sans); letter-spacing: -0.02em; }
.note__body p {
  margin-top: 1em;
  color: #2A2B30;
  font-size: clamp(1.125rem, 1.04rem + 0.35vw, 1.3125rem);
  line-height: 1.6;
  text-wrap: pretty;
}
.note__body a { color: var(--ink); text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }
/* The sign-off: a short last line, signed beside a small lit mark. */
.note__body .note__sign {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 1.6em;
  color: var(--ink);
  font-weight: 600;
}
.note__sign .mark { width: 34px; flex: none; }

/* MARK: - The teacher */

.teacher__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 112px);
  align-items: center;
}
.teacher .section__head { margin-bottom: 0; }
.teacher .section__head p.teacher__langs { margin-top: 18px; font-size: var(--t-body); line-height: 1.6; }
.line-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 3.4vw, 44px);
  border-radius: 32px;
  background: var(--card);
}
.line-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    circle 440px at 100% 0,
    color-mix(in srgb, var(--c) 20%, transparent),
    color-mix(in srgb, var(--c) 8%, transparent) 45%,
    transparent 80%
  );
}
.line-card__target {
  font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.line-card__english { margin-top: 6px; color: var(--soft); font: 400 1.25rem/1.4 var(--serif); }
.hear {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  color: var(--ci);
  font-size: var(--t-small);
  font-weight: 600;
}
.hear svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.hear svg path:first-child { fill: currentColor; }
/* Hear it, for real: a button like the language pages' teachers, playing
   the teacher's walkthrough of the line, its bars moving while it plays. */
.hear-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 22px; }
.hear-chip { box-shadow: inset 0 0 0 1.5px var(--ci); }
.hear-chip .chip__speaker { color: var(--ci); }
.hear-row__who { color: var(--soft); font-size: var(--t-small); }
.no-js .hear-row { display: none; }
.voice { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line-strong); }
.voice__label {
  color: var(--soft);
  font: 600 0.75rem/1.2 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.voice__words {
  margin-top: 12px;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
  text-wrap: pretty;
}
.voice__words span[lang] { color: var(--ci); font-weight: 600; }
@media (max-width: 899px) {
  .teacher__grid { grid-template-columns: 1fr; }
}

/* MARK: - Questions */

.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr);
  gap: 28px clamp(32px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 960px) {
  .faq__grid { grid-template-columns: 1fr; }
}

.faq__head p { margin-top: 14px; color: var(--soft); }
.faq__list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  position: relative;
  padding: 26px 60px 26px 0;
  list-style: none;
  cursor: pointer;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
/* A plus in a soft disc, turning to a minus when open. */
.faq summary::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  border-radius: 50%;
  background: var(--card) linear-gradient(var(--ink), var(--ink)) center / 13px 1.75px no-repeat;
  transition: background-color 0.2s ease;
}
.faq summary::after {
  content: "";
  position: absolute;
  right: 17.125px;
  top: 50%;
  width: 1.75px;
  height: 13px;
  margin-top: -6.5px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(90deg) scaleY(0); }
.faq summary:hover::before { background-color: #ECEAE5; }
.faq details p { max-width: 40em; padding: 0 60px 28px 0; color: var(--soft); text-wrap: pretty; }
.faq details a { color: var(--ink); text-underline-offset: 0.2em; text-decoration-color: var(--amber); text-decoration-thickness: 2px; }

/* MARK: - Getting the app
   The page closes on the mark, saying its sentence, over a warm light like
   the film's, and on the question every story starts from, set in the serif
   the app sets it in. */

.cta { padding-top: clamp(40px, 5vw, 72px); }
.cta__inner {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  text-align: center;
}
.cta__inner::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -12%;
  z-index: -1;
  width: min(900px, 120%);
  aspect-ratio: 1.6;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgb(255 179 36 / 0.16), rgb(255 179 36 / 0.05) 55%, transparent);
  pointer-events: none;
}
.cta__mark { width: clamp(112px, 10vw, 148px); margin-bottom: clamp(28px, 3.4vw, 44px); }
.cta__title {
  max-width: 13em;
  font: 500 clamp(2.5rem, 1.3rem + 4.2vw, 4.75rem)/1.04 var(--serif);
  letter-spacing: -0.025em;
  text-wrap: balance;
  font-variation-settings: "opsz" 72;
}
.cta__line {
  max-width: 30em;
  margin-top: 18px;
  color: var(--soft);
  font-size: var(--t-lead);
  line-height: 1.5;
  text-wrap: balance;
}
.cta .store { margin-top: 22px; }

/* MARK: - Footer: the app's own canvas */

.site-footer {
  padding-block: 56px calc(40px + env(safe-area-inset-bottom));
  background: var(--charcoal);
  color: var(--charcoal-muted);
  font-size: var(--t-small);
}
.site-footer :focus-visible { outline-color: var(--charcoal-ink); }
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px 40px;
}
.site-footer__brand p { margin-top: 12px; color: var(--charcoal-soft); }
.site-footer__nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; }
.site-footer__nav a {
  display: block;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--charcoal-ink);
  font-weight: 500;
  text-decoration: none;
}
.site-footer__nav a:hover { background: rgb(255 255 255 / 0.08); }
.site-footer__languages { list-style: none; display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 36px; font-weight: 500; }
/* At least 24px tall to tap (WCAG 2.2), with the rows as close as before. */
.site-footer__languages a { display: inline-block; padding-block: 4px; color: var(--ct); text-decoration: none; text-underline-offset: 0.25em; }
.site-footer__languages a:hover, .site-footer__languages a[aria-current] { text-decoration: underline; }
.site-footer__legal {
  display: grid;
  gap: 6px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgb(255 255 255 / 0.11);
  font-size: 0.8125rem;
}
@media (max-width: 639px) {
  .site-footer__nav ul { margin-left: -12px; }
}

/* MARK: - Privacy, Terms, Support */

.legal { padding-block: clamp(48px, 8vw, 104px) clamp(80px, 10vw, 144px); }
.prose {
  max-width: 42rem;
  margin-inline: auto;
  color: #3A3B41;
  font-size: var(--t-body);
  line-height: 1.7;
}
.prose h1 {
  color: var(--ink);
  font: 600 clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem)/1.04 var(--sans);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.prose h1 + p { margin-top: 14px; color: var(--soft); font-size: var(--t-small); }
.prose h1 + p + p { margin-top: 2em; color: var(--ink); font-size: 1.1875rem; line-height: 1.6; }
.prose h2 {
  margin-top: 2.4em;
  color: var(--ink);
  font: 600 clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem)/1.2 var(--sans);
  letter-spacing: -0.025em;
  text-wrap: balance;
  scroll-margin-top: calc(var(--header) + 24px);
}
.prose h3 { margin-top: 1.8em; color: var(--ink); font-size: var(--t-body); font-weight: 600; line-height: 1.4; }
.prose p, .prose ul, .prose ol { margin-top: 1em; }
.prose p { text-wrap: pretty; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--amber-ink); }
.prose a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.22em;
  overflow-wrap: anywhere;
}
.prose a:hover { text-decoration-color: var(--ink); }
.prose hr { margin-block: 2.4em; border: 0; border-top: 1px solid var(--line); }
.prose table { width: 100%; margin-top: 1.4em; border-collapse: collapse; font-size: var(--t-small); }
.prose th, .prose td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { color: var(--ink); font-weight: 600; }

/* A long page's sections: beside the text on wide screens, where the
   list stays in view and marks the section being read; folded before the
   first section on narrower ones. */
.legal__grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.toc--side { display: none; }
.toc__label,
.toc--inline summary {
  color: var(--soft);
  font: 600 0.75rem/1.2 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.toc ol, .prose .toc ol { list-style: none; display: grid; gap: 0; margin: 12px 0 0; padding: 0; }
.prose .toc li + li { margin-top: 0; }
.toc a, .prose .toc a {
  display: block;
  padding: 6px 0 6px 14px;
  border-left: 2px solid var(--line);
  color: var(--soft);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.toc a:hover, .prose .toc a:hover { color: var(--ink); }
.toc a[aria-current] { color: var(--ink); border-left-color: var(--amber); }
.toc--inline {
  margin-top: 2em;
  padding: 0 20px;
  border-radius: 18px;
  background: var(--card);
}
.toc--inline summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 52px;
  cursor: pointer;
  list-style: none;
}
.toc--inline summary::-webkit-details-marker { display: none; }
.toc--inline summary::after { content: "+"; color: var(--ink); font-size: 1.25rem; font-weight: 400; letter-spacing: 0; }
.toc--inline[open] summary::after { content: "−"; }
.toc--inline ol { margin: 0 0 18px; }
@media (min-width: 1180px) {
  .legal__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 42rem) minmax(0, 1fr);
    column-gap: 56px;
    align-items: start;
  }
  .legal__grid .prose { grid-column: 2; grid-row: 1; margin-inline: 0; }
  .toc--side {
    display: block;
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    position: sticky;
    top: calc(var(--header) + 40px);
    width: 100%;
    max-width: 15rem;
    max-height: calc(100vh - var(--header) - 80px);
    margin-top: 12px;
    overflow-y: auto;
    scrollbar-width: none;
  }
  .toc--inline { display: none; }
}

.lost__inner { max-width: 32rem; margin-inline: auto; padding-block: clamp(32px, 8vh, 96px); text-align: center; }
.lost__mark { width: 120px; margin: 0 auto 36px; }
.lost h1 { font: 600 clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem)/1.04 var(--sans); letter-spacing: -0.035em; }
.lost p { margin-top: 14px; color: var(--soft); }
.lost .link { display: inline-block; margin-top: 10px; }