@font-face {
  font-family:Nunito;
  src:url('../fonts/nunito/Nunito-Regular.woff2') format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:block
}

@font-face {
  font-family:Nunito;
  src:url('../fonts/nunito/Nunito-Bold.woff2') format('woff2');
  font-style:normal;
  font-weight:700;
  font-display:block
}

@font-face {
  font-family:Nunito;
  src:url('../fonts/nunito/Nunito-ExtraBold.woff2') format('woff2');
  font-style:normal;
  font-weight:800;
  font-display:block
}

@font-face {
  font-family:Nunito;
  src:url('../fonts/nunito/Nunito-ExtraBoldItalic.woff2') format('woff2');
  font-style:italic;
  font-weight:800;
  font-display:block
}

/* Public landing styles stay independent from the account and legal pages. */
:root {
  /* MemorioSDK/DesignSystem/Palette/Palette.swift — light appearance. */
  --paper:#fff8ce; /* backgroundPrimary */
  --ink:#201e1c; /* contentPrimary */
  --muted:#374957; /* contentSecondary */
  --line:#201e1c26;
  --coral:#ff9269; /* accentQuaternary */
  --accent-ink:#d9583e; /* masteryLearningInk; large display accents */
  --peach:#ffc59c; /* accentTertiary */
  --lavender:#d8bfff; /* accentPrimary */
  --lavender-ink:#685587; /* accentLavenderInk */
  --surface:#efe1e2; /* backgroundTertiary */
  --surface-card:#fffcf5; /* surfaceCard */
  --mint:#b5e0ca; /* accentOctonary; learning feedback */
  --ease:cubic-bezier(.2,.8,.2,1)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:28px
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Nunito,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased
}

main {
  /* The rotated background shapes are decorative and may extend beyond the viewport. */
  overflow:clip;
}

button,select,a {
  -webkit-tap-highlight-color:transparent
}

button,select {
  font:inherit;
  color:inherit
}

button,a,select {
  touch-action:manipulation
}

button {
  cursor:pointer
}

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

button {
  border:0
}

button:disabled {
  cursor:default
}

button,a,select,summary {
  outline-offset:5px
}

button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible {
  outline:2px solid var(--lavender-ink)
}

button:disabled {
  opacity:.65
}

::selection {
  background:var(--lavender);
  color:var(--ink)
}

[hidden] {
  display:none!important
}

.svg-definitions {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden
}

.icon {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0
}

.container {
  width:min(1280px,calc(100% - 112px));
  margin-inline:auto
}

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

.skip-link {
  position:fixed;
  left:20px;
  top:-100px;
  z-index:100;
  padding:15px 24px;
  border-radius:8px;
  background:var(--ink);
  color:white
}

.skip-link:focus {
  top:15px
}

.site-header {
  height:108px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}

.wordmark {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:27px;
  font-weight:800;
  letter-spacing:-1.3px
}

.wordmark img {
  border-radius:11px;
  object-fit:cover
}

.wordmark-dot {
  color:var(--lavender-ink)
}

.navigation {
  display:flex;
  align-items:center;
  gap:34px;
  font-size:13px;
  font-weight:500
}

.navigation a {
  transition:color .2s
}

.navigation a:hover {
  color:var(--lavender-ink)
}

.nav-signin {
  display:flex;
  align-items:center;
  gap:20px;
  border:1px solid #201e1c40;
  border-radius:100px;
  padding:11px 17px
}

.nav-signin .icon {
  width:17px;
  height:17px
}

.locale-menu {
  position:relative;
  font-size:12px;
  z-index:10
}

.locale-menu summary {
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  gap:7px;
  min-height:44px
}

.locale-menu summary::-webkit-details-marker {
  display:none
}

.locale-menu summary span {
  font-size:17px
}

.locale-options {
  position:absolute;
  top:42px;
  right:-10px;
  min-width:142px;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 8px 30px #201e1c10;
  border-radius:14px;
  padding:7px
}

.locale-options a {
  display:block;
  padding:10px;
  border-radius:8px
}

.locale-options a:hover,.locale-options a[aria-current] {
  background:var(--surface)
}

.hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:20px;
  min-height:750px;
  padding-top:30px;
  padding-bottom:56px;
  align-items:center
}

.hero-copy {
  padding:8px 0 16px;
  position:relative;
  z-index:2
}

.eyebrow {
  font-size:10px;
  line-height:1.6;
  letter-spacing:1.6px;
  font-weight:650;
  display:flex;
  gap:10px;
  align-items:center;
  margin:0 0 25px
}

.status-dot {
  width:6px;
  height:6px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--coral);
  box-shadow:0 0 0 4px #ff926933
}

.hero h1 {
  font-size:clamp(52px,5.25vw,79px);
  letter-spacing:-3.8px;
  font-weight:800;
  line-height:1.07;
  margin:0 0 32px;
  white-space:nowrap
}

.greeting-wrap {
  display:inline-block;
  position:relative;
  color:var(--accent-ink);
  font-family:Nunito,system-ui,sans-serif;
  font-weight:800;
  font-style:italic;
  font-size:1.19em;
  letter-spacing:-4px;
  line-height:1.1;
  padding-right:10px;
  padding-bottom:7px
}

.greeting-underline {
  position:absolute;
  left:0;
  bottom:-2px;
  width:100%;
  height:16px;
  fill:none;
  stroke:var(--coral);
  stroke-width:3;
  stroke-linecap:round
}

.hero-description {
  font-size:16px;
  line-height:1.75;
  color:var(--muted);
  max-width:350px;
  margin:0 0 30px
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:54px;
  padding:15px 21px;
  border-radius:100px;
  font-size:13px;
  font-weight:550;
  transition:transform .25s var(--ease),background .2s,box-shadow .25s
}

.button-dark {
  background:var(--coral);
  color:#211712
}

.button:hover {
  background:var(--peach);
  transform:translateY(-3px);
  box-shadow:0 7px 16px #201e1c15
}

.button:active {
  transform:translateY(0) scale(.98)
}

.button .icon {
  width:21px;
  height:21px
}

.button .button-arrow {
  width:18px;
  margin-left:8px
}

.demo-link {
  font-size:12px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px
}

.demo-link .icon {
  width:18px;
  height:18px;
  fill:currentColor;
  stroke:none
}

.demo-link:hover {
  text-decoration:underline;
  text-underline-offset:4px
}

.compatibility {
  font-size:10px;
  color:var(--muted);
  margin-top:15px
}

.hero-footnote {
  display:flex;
  align-items:center;
  gap:11px;
  margin-top:63px;
  color:var(--muted);
  font-size:11px
}

.tiny-spark {
  color:var(--accent-ink);
  font-size:25px
}

.playground {
  height:704px;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  isolation:isolate;
  outline:none;
  padding-top:2px
}

.phone-halo {
  position:absolute;
  background:var(--surface);
  width:475px;
  height:490px;
  top:72px;
  left:50%;
  transform:translateX(-50%) rotate(-16deg);
  border-radius:46% 54% 51% 49% / 45% 42% 58% 55%;
  z-index:-1
}

.phone {
  position:relative;
  width:294px;
  height:610px;
  flex-shrink:0;
  background:#201e1c;
  padding:7px;
  border-radius:49px;
  box-shadow:inset 0 0 0 1px #464343,inset 0 0 0 3px #a4a09a,0 35px 45px -28px #201e1c40,0 7px 10px #201e1c12;
  transform:rotate(5deg);
  transition:transform .7s var(--ease);
  --wall-light:#eef0e8;
  --wall-mid:#cdd1c7;
  --wall-deep:#8e9d98;
  --wall-ink:#374957
}

.phone:hover,.phone:focus-within {
  transform:rotate(0deg) translateY(-3px)
}

.phone[data-wallpaper=peach] {
  --wall-light:#fff8ce;
  --wall-mid:#ffc59c;
  --wall-deep:#d97757
}

.phone[data-wallpaper=lavender] {
  --wall-light:#f3ecff;
  --wall-mid:#d8bfff;
  --wall-deep:#9582b3
}

.phone-screen {
  width:100%;
  height:100%;
  position:relative;
  border-radius:43px;
  overflow:hidden;
  background:var(--wall-mid);
  border:2px solid #151414
}

.wallpaper {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transition:filter .6s
}

.phone-button {
  position:absolute;
  width:3px;
  background:#464343;
  border-radius:2px
}

.phone-button-left {
  top:116px;
  left:-2px;
  height:60px
}

.phone-button-left:before {
  content:"";
  position:absolute;
  top:-29px;
  width:3px;
  height:19px;
  background:inherit;
  border-radius:inherit
}

.phone-button-right {
  right:-2px;
  top:156px;
  height:45px
}

.dynamic-island {
  position:absolute;
  z-index:2;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  width:83px;
  height:24px;
  background:#151414;
  border-radius:20px
}

.dynamic-island span {
  position:absolute;
  right:9px;
  top:8px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#263e4e,#0a1114 55%);
  box-shadow:0 0 0 2px #111611
}

.lock-screen-heading {
  position:absolute;
  top:54px;
  left:0;
  width:100%;
  text-align:center;
  color:var(--wall-ink);
  text-shadow:0 1px 5px #201e1c10
}

.lock-icon {
  width:16px;
  height:16px;
  margin-bottom:7px;
  fill:var(--wall-ink);
  stroke:var(--wall-ink);
  stroke-width:1.1
}

.phone-date {
  font-size:13px;
  font-weight:500
}

.phone-time {
  font-family:-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:76px;
  font-weight:500;
  line-height:1.14;
  letter-spacing:-4px;
  font-variant-numeric:tabular-nums
}

.activity-wrap {
  position:absolute;
  top:291px;
  left:10px;
  right:10px
}

.activity-brand {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:10px;
  color:var(--wall-ink);
  padding:0 8px 7px;
  font-weight:600
}

.activity-brand>span:first-child {
  display:flex;
  align-items:center;
  gap:5px
}

.activity-brand img {
  border-radius:5px
}

.activity-demo {
  font-size:8px;
  letter-spacing:1px;
  opacity:.8
}

.live-activity {
  color:#2a2620;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 8px 24px #201e1c25;
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid #ffffff65;
  transition:box-shadow .3s,transform .3s;
  position:relative
}

.activity-top {
  display:flex;
  align-items:center;
  gap:8px;
  background:#f8f6f0d1;
  padding:12px 11px 11px;
  min-height:82px
}

.word-ornament,.activity-audio {
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0
}

.word-ornament {
  background:#ff9269
}

.word-ornament .icon {
  width:18px;
  height:18px;
  stroke-width:1.4
}

.activity-audio {
  background:#d8bfff;
  transition:transform .2s,background .2s
}

.activity-audio .icon {
  width:18px;
  height:18px
}

.activity-audio:hover {
  background:#d8bfffcc;
  transform:translateX(2px)
}

.activity-word-group {
  flex:1;
  min-width:0;
  text-align:center
}

.activity-prompt {
  margin:0 0 5px;
  font-size:8px;
  line-height:1.2;
  font-weight:600;
  color:#2a2620b3
}

.activity-word {
  font-size:23px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.6px;
  margin:0;
  overflow-wrap:anywhere
}

.pronunciation {
  font-size:10px;
  color:#2a262099;
  margin:5px 0 0
}

.activity-bottom {
  min-height:94px;
  padding:9px 12px 12px;
  background:#f6e2dc8c;
  text-align:center
}

.translation {
  font-size:13px;
  line-height:1.3;
  margin:6px 0 0;
  min-height:17px;
  font-weight:400;
  color:#2a262099
}

.translation.is-hidden {
  letter-spacing:4px
}

.reveal-button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:36px;
  width:100%;
  border-radius:30px;
  background:#ffffffa8;
  font-size:12px;
  font-weight:600;
  transition:background .2s,transform .2s
}

.reveal-button:hover {
  background:white;
  transform:scale(1.02)
}

.reveal-button .icon {
  width:15px;
  height:15px
}

.revealed-actions {
  display:flex;
  gap:5px
}

.revealed-actions button {
  min-height:36px;
  border-radius:24px;
  font-size:10px;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:7px 5px
}

.revealed-actions .icon {
  width:14px;
  height:14px
}

.know-button {
  background:#fff9
}

.quiz-button {
  background:var(--coral);
  color:#211712
}

.know-button:hover {
  background:white
}

.quiz-button:hover {
  background:var(--peach)
}

.quiz-options {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px
}

.quiz-option {
  min-height:35px;
  border-radius:18px;
  background:#ffffffa8;
  font-size:10px;
  line-height:1.2;
  padding:5px;
  transition:background .2s,transform .2s
}

.quiz-option:hover {
  background:white
}

.quiz-option.wrong {
  background:#d97757;
  color:#211712
}

.result-message {
  margin:2px 0 8px;
  font-size:13px;
  font-weight:600;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px
}

.result-message .icon {
  width:18px;
  height:18px
}

.live-activity[data-mode=result] .activity-bottom {
  background:#b5e0cae6
}

.demo-progress {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:9px;
  margin-top:10px;
  font-size:8px;
  color:var(--wall-ink);
  font-variant-numeric:tabular-nums
}

.progress-track {
  display:flex;
  gap:3px
}

.progress-track i {
  height:3px;
  width:19px;
  border-radius:5px;
  background:#37495733;
  transition:background .3s
}

.progress-track i.is-complete {
  background:var(--lavender-ink)
}

.phone-bottom {
  position:absolute;
  bottom:20px;
  left:22px;
  right:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--wall-ink)
}

.phone-bottom>span:not(.home-indicator) {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:#ffffff59;
  backdrop-filter:blur(10px)
}

.phone-bottom .icon {
  width:16px;
  height:16px
}

.home-indicator {
  position:absolute;
  width:90px;
  height:4px;
  border-radius:3px;
  background:var(--wall-ink);
  bottom:-12px;
  left:50%;
  transform:translateX(-50%)
}

.floating-word {
  position:absolute;
  z-index:2;
  font-family:Nunito,system-ui,sans-serif;
  font-weight:800;
  font-style:italic;
  font-size:33px;
  letter-spacing:-1.7px;
  padding:13px 22px 16px;
  border:1px solid #201e1c0b;
  box-shadow:0 8px 12px #201e1c05;
  border-radius:18px
}

.word-one {
  top:128px;
  left:-6px;
  transform:rotate(-12deg);
  background:var(--peach);
  color:var(--ink)
}

.word-two {
  right:-13px;
  top:33px;
  background:var(--lavender);
  color:var(--lavender-ink);
  transform:rotate(10deg)
}

.floating-spark {
  position:absolute;
  right:7px;
  top:383px;
  color:var(--accent-ink);
  transform:rotate(12deg);
  z-index:-1
}

.floating-spark .icon {
  width:61px;
  height:61px;
  stroke-width:1.2
}

.tap-note {
  position:absolute;
  z-index:3;
  right:-32px;
  top:451px;
  transform:rotate(-9deg);
  display:flex;
  align-items:center;
  pointer-events:none
}

.tap-note svg {
  width:66px;
  height:54px;
  fill:none;
  stroke:var(--lavender-ink);
  stroke-width:1.5;
  stroke-linecap:round
}

.tap-note span {
  max-width:94px;
  font-family:Nunito,system-ui,sans-serif;
  font-weight:800;
  font-style:italic;
  font-size:14px;
  line-height:1.3;
  color:var(--lavender-ink)
}

.playground-controls {
  display:flex;
  align-items:center;
  gap:23px;
  margin-top:25px;
  position:relative;
  z-index:3
}

.language-select {
  position:relative;
  display:flex;
  align-items:center;
  border:1px solid var(--line);
  background:var(--paper);
  border-radius:30px;
  min-height:38px
}

.language-globe {
  font-size:23px;
  position:absolute;
  left:11px;
  pointer-events:none;
  color:var(--lavender-ink)
}

.language-select select {
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  border:0;
  padding:10px 28px 10px 37px;
  max-width:168px;
  font-size:11px;
  cursor:pointer;
  border-radius:30px
}

.select-chevron {
  position:absolute;
  right:12px;
  pointer-events:none;
  top:7px
}

.wallpaper-options {
  display:flex;
  gap:5px
}

.wallpaper-choice {
  width:26px;
  height:26px;
  border:4px solid var(--paper);
  border-radius:50%;
  position:relative;
  transition:transform .2s
}

.wallpaper-choice:hover {
  transform:scale(1.16)
}

.wallpaper-choice[aria-pressed=true] {
  outline:1px solid var(--ink);
  outline-offset:1px
}

.wallpaper-choice.mint {
  background:#b5e0ca
}

.wallpaper-choice.peach {
  background:var(--peach)
}

.wallpaper-choice.lavender {
  background:var(--lavender)
}

.demo-status {
  font-size:10px;
  line-height:1.5;
  color:var(--muted);
  text-align:center;
  margin:13px 0 0;
  max-width:340px;
  min-height:15px
}

.confetti-layer {
  position:absolute;
  inset:0;
  pointer-events:none
}

.confetti-piece {
  position:absolute;
  top:55%;
  left:50%;
  width:6px;
  height:9px;
  border-radius:2px;
  animation:confetti 950ms var(--ease) forwards
}

.noscript-message {
  font-size:12px;
  position:relative;
  background:var(--paper);
  padding:10px;
  margin:4px 0
}

.demo-highlight {
  animation:highlight 1s ease 2
}

.how-section {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:82px 0 72px;
  background:var(--surface-card)
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
  margin-bottom:54px
}

.section-heading .eyebrow {
  padding-top:13px;
  max-width:230px
}

.section-heading h2 {
  width:58%;
  margin:0
}

h2 {
  font-size:46px;
  font-weight:800;
  line-height:1.13;
  letter-spacing:-2px
}

.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:60px
}

.step-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:25px;
  padding-bottom:19px;
  border-bottom:1px solid var(--line)
}

.step-number {
  font-size:11px;
  font-variant-numeric:tabular-nums;
  letter-spacing:1px;
  color:var(--muted)
}

.step-icon {
  height:43px;
  width:43px;
  display:grid;
  place-items:center;
  border-radius:14px;
  transform:rotate(-6deg)
}

.step-icon-1 {
  background:var(--peach)
}

.step-icon-2 {
  background:var(--lavender);
  transform:rotate(5deg)
}

.step-icon-3 {
  background:var(--coral)
}

.step-icon .icon {
  width:21px;
  height:21px
}

.step h3 {
  font-size:20px;
  letter-spacing:-.6px;
  font-weight:800;
  margin:0 0 12px
}

.step>p {
  font-size:14px;
  color:var(--muted);
  line-height:1.75;
  margin:0;
  max-width:310px
}

.languages-section {
  text-align:center;
  padding-top:100px;
  padding-bottom:94px
}

.languages-section>.eyebrow {
  justify-content:center
}

.languages-section h2 {
  margin:0 0 15px
}

.section-description {
  font-size:14px;
  color:var(--muted);
  line-height:1.7;
  margin:0
}

.language-garden {
  display:flex;
  justify-content:center;
  gap:11px;
  margin-top:43px;
  flex-wrap:wrap
}

.language-card {
  background:var(--surface);
  border:1px solid transparent;
  border-radius:18px;
  padding:23px 19px 17px;
  text-align:left;
  min-width:135px;
  flex:1;
  transition:transform .3s var(--ease),background .3s,border-color .3s;
  max-width:172px
}

.language-card:nth-child(3n + 2) {
  background:#ffc59c66
}

.language-card:nth-child(3n) {
  background:#d8bfff66
}

.language-card:hover {
  transform:translateY(-7px) rotate(-3deg);
  border-color:var(--lavender-ink)
}

.language-card[aria-pressed=true] {
  background:var(--peach);
  border-color:var(--accent-ink)
}

.language-greeting {
  display:block;
  font:italic 800 29px/1.2 Nunito,system-ui,sans-serif;
  letter-spacing:-1.3px;
  margin-bottom:18px
}

.language-name {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  font-size:10px;
  color:var(--muted)
}

.language-name .icon {
  width:14px;
  height:14px
}

.closing-section {
  padding-bottom:80px
}

.closing-panel {
  position:relative;
  overflow:hidden;
  background:var(--surface);
  padding:62px 40px 59px;
  border-radius:26px;
  text-align:center
}

.closing-panel>.eyebrow {
  justify-content:center;
  letter-spacing:2px;
  font-size:10px;
  margin-bottom:17px
}

.closing-panel h2 {
  font-size:51px;
  margin:0 0 16px
}

.closing-panel>p:not(.eyebrow) {
  font-size:14px;
  color:var(--muted);
  line-height:1.6;
  margin:0 0 25px
}

.closing-spark {
  position:absolute;
  left:-29px;
  bottom:-36px;
  color:var(--coral);
  transform:rotate(13deg)
}

.closing-spark .icon {
  width:190px;
  height:190px;
  stroke-width:.9
}

.closing-panel .button {
  position:relative
}

.site-footer {
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:27px;
  padding-top:28px;
  padding-bottom:38px
}

.site-footer .wordmark {
  font-size:21px;
  letter-spacing:-1px;
  gap:8px
}

.site-footer .wordmark img {
  border-radius:8px
}

.site-footer p {
  font-size:10px;
  color:var(--muted)
}

.site-footer nav {
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:22px;
  margin-left:auto;
  font-size:10px;
  color:var(--muted)
}

.site-footer nav a:hover {
  text-decoration:underline;
  text-underline-offset:4px
}

@keyframes float-one {
  0%,100% {
    transform:translateY(0) rotate(-12deg)
  }
  50% {
    transform:translateY(-9px) rotate(-8deg)
  }
}

@keyframes float-two {
  0%,100% {
    transform:translateY(0) rotate(10deg)
  }
  50% {
    transform:translateY(7px) rotate(14deg)
  }
}

@keyframes confetti {
  0% {
    transform:translate(0,0) rotate(0);
    opacity:1
  }
  100% {
    transform:translate(var(--x),var(--y)) rotate(var(--spin));
    opacity:0
  }
}

@keyframes highlight {
  50% {
    box-shadow:0 0 0 6px #ffc59c88,0 0 40px #ffc59c66;
    transform:scale(1.025)
  }
}

@media(min-width:1500px) {
  .hero {
    gap:65px
  }
  .hero h1 {
    font-size:83px
  }
  .playground {
    height:730px;
    padding-top:14px
  }
  .phone {
    width:308px;
    height:638px
  }
  .activity-wrap {
    top:315px
  }
  .phone-time {
    font-size:80px
  }
  .tap-note {
    top:478px
  }
  .phone-halo {
    top:90px
  }
  .hero {
    padding-top:46px;
    padding-bottom:64px
  }
  .hero-footnote {
    margin-top:73px
  }
}

@media(max-width:1190px) {
  .container {
    width:calc(100% - 72px)
  }
  .hero {
    gap:5px;
    min-height:740px
  }
  .hero h1 {
    font-size:58px;
    letter-spacing:-3.5px
  }
  .hero-actions {
    gap:9px
  }
  .button {
    font-size:12px;
    padding-inline:17px
  }
  .demo-link {
    font-size:11px
  }
  .hero-description {
    font-size:15px;
    max-width:320px
  }
  .phone-halo {
    width:395px;
    height:465px
  }
  .word-one {
    left:-5px;
    top:140px;
    font-size:27px;
    padding:12px 16px
  }
  .word-two {
    right:-1px;
    font-size:27px
  }
  .tap-note {
    right:-20px;
    top:470px
  }
  .tap-note span {
    max-width:78px;
    font-size:12px
  }
  .tap-note svg {
    width:46px
  }
  .floating-spark {
    right:0
  }
  .navigation {
    gap:24px
  }
  .language-card {
    min-width:120px;
    max-width:none
  }
  .language-greeting {
    font-size:26px
  }
  .language-garden {
    gap:8px
  }
  .language-card {
    padding-inline:15px
  }
  .steps {
    gap:40px
  }
}

@media(max-width:960px) and (min-width:761px) {
  .container {
    width:calc(100% - 48px)
  }
  .hero h1 {
    font-size:49px;
    letter-spacing:-2.7px
  }
  .hero .eyebrow {
    font-size:8px;
    letter-spacing:1px
  }
  .hero {
    grid-template-columns:1fr 1fr;
    gap:0
  }
  .phone {
    width:267px;
    height:565px
  }
  .phone-screen {
    border-radius:40px
  }
  .phone {
    border-radius:46px
  }
  .phone-time {
    font-size:68px
  }
  .activity-wrap {
    top:262px
  }
  .activity-word {
    font-size:21px
  }
  .phone-halo {
    width:325px;
    height:435px
  }
  .playground {
    height:660px;
    padding-top:25px
  }
  .word-one {
    left:-4px;
    top:151px;
    font-size:24px;
    padding:9px 11px
  }
  .word-two {
    font-size:24px;
    top:37px;
    padding:9px 11px
  }
  .tap-note {
    right:-4px;
    top:473px
  }
  .tap-note span {
    max-width:64px;
    font-size:11px
  }
  .tap-note svg {
    width:33px
  }
  .floating-spark {
    top:376px;
    right:-9px
  }
  .floating-spark .icon {
    width:45px
  }
  .hero-actions {
    gap:8px;
    flex-direction:column;
    align-items:flex-start
  }
  .hero-description {
    max-width:290px
  }
  .hero-footnote {
    margin-top:35px
  }
  .hero {
    min-height:700px;
    padding-top:15px;
    padding-bottom:25px
  }
  .navigation {
    gap:19px
  }
  .nav-section {
    font-size:12px
  }
  .language-card {
    flex-basis:21%;
    max-width:185px
  }
  .section-heading h2,h2 {
    font-size:39px
  }
  .section-heading .eyebrow {
    font-size:9px
  }
  .steps {
    gap:28px
  }
}

@media(max-width:760px) {
  .container {
    width:calc(100% - 44px)
  }
  .site-header {
    height:84px;
    gap:15px
  }
  .wordmark {
    font-size:24px;
    gap:8px
  }
  .wordmark img {
    width:31px;
    height:31px;
    border-radius:10px
  }
  .navigation {
    gap:18px
  }
  .nav-section {
    display:none
  }
  .nav-signin {
    font-size:11px;
    padding:10px 12px;
    gap:11px
  }
  .nav-signin .icon {
    width:15px;
    height:15px
  }
  .hero {
    display:flex;
    flex-direction:column;
    gap:23px;
    padding-top:32px;
    padding-bottom:36px
  }
  .hero-copy {
    text-align:center;
    padding:0;
    width:100%
  }
  .hero .eyebrow {
    justify-content:center;
    font-size:8px;
    letter-spacing:1.2px;
    margin-bottom:22px
  }
  .hero h1 {
    font-size:clamp(42px,8.7vw,66px);
    letter-spacing:-2.8px;
    line-height:1.08;
    margin-bottom:25px
  }
  .greeting-wrap {
    letter-spacing:-2.7px
  }
  .hero-description {
    font-size:14px;
    max-width:330px;
    margin:0 auto 23px;
    line-height:1.7
  }
  .hero-actions {
    justify-content:center;
    gap:18px
  }
  .button {
    min-height:51px;
    font-size:12px
  }
  .demo-link {
    font-size:11px
  }
  .compatibility {
    font-size:9px;
    margin-top:12px
  }
  .hero-footnote {
    display:none
  }
  .playground {
    width:100%;
    max-width:470px;
    height:693px;
    padding-top:20px
  }
  .phone-halo {
    width:365px;
    max-width:calc(100vw - 37px);
    height:440px;
    top:114px
  }
  .phone {
    width:278px;
    height:577px;
    border-radius:46px;
    transform:rotate(3deg)
  }
  .phone-screen {
    border-radius:40px
  }
  .phone:hover,.phone:focus-within {
    transform:rotate(0)
  }
  .activity-wrap {
    top:276px
  }
  .phone-time {
    font-size:74px
  }
  .floating-word {
    font-size:27px;
    border-radius:14px
  }
  .word-one {
    top:142px;
    left:3px;
    padding:11px 14px
  }
  .word-two {
    right:0;
    top:39px;
    padding:11px 14px
  }
  .floating-spark {
    right:0;
    top:340px
  }
  .floating-spark .icon {
    width:48px;
    height:48px
  }
  .tap-note {
    right:-6px;
    top:472px
  }
  .tap-note span {
    max-width:77px;
    font-size:12px
  }
  .tap-note svg {
    width:42px
  }
  .playground-controls {
    margin-top:25px
  }
  .how-section {
    padding:53px 0 45px
  }
  .section-heading {
    display:block;
    margin-bottom:38px
  }
  .section-heading .eyebrow {
    padding:0;
    max-width:none;
    font-size:9px;
    margin-bottom:20px
  }
  .section-heading h2 {
    width:auto;
    font-size:37px;
    letter-spacing:-1.7px
  }
  .steps {
    gap:30px;
    grid-template-columns:1fr
  }
  .step {
    display:grid;
    grid-template-columns:56px 1fr;
    column-gap:18px;
    align-items:start
  }
  .step-top {
    grid-row:span 2;
    display:flex;
    flex-direction:column-reverse;
    gap:12px;
    border:0;
    padding:0;
    margin:0
  }
  .step h3 {
    font-size:20px;
    margin:3px 0 7px
  }
  .step>p {
    max-width:440px;
    font-size:13px;
    line-height:1.7
  }
  .step-number {
    font-size:9px
  }
  .step-icon {
    width:42px;
    height:42px
  }
  .languages-section {
    padding-top:58px;
    padding-bottom:53px
  }
  .languages-section .eyebrow {
    font-size:9px;
    margin-bottom:18px
  }
  h2,.languages-section h2 {
    font-size:34px;
    letter-spacing:-1.5px
  }
  .section-description {
    font-size:13px;
    max-width:280px;
    margin:auto
  }
  .language-garden {
    margin-top:28px;
    gap:9px
  }
  .language-card {
    flex:0 1 calc(33.333% - 6px);
    min-width:0;
    max-width:150px;
    padding:20px 12px 13px;
    border-radius:15px
  }
  .language-greeting {
    font-size:26px;
    letter-spacing:-1.4px;
    margin-bottom:13px
  }
  .language-name {
    font-size:9px;
    gap:2px
  }
  .language-name .icon {
    width:12px;
    height:12px
  }
  .closing-section {
    padding-bottom:45px
  }
  .closing-panel {
    padding:45px 24px 39px;
    border-radius:23px
  }
  .closing-panel h2 {
    font-size:38px;
    letter-spacing:-1.6px;
    max-width:360px;
    margin:0 auto 15px
  }
  .closing-panel>p:not(.eyebrow) {
    font-size:13px;
    max-width:270px;
    margin:0 auto 23px
  }
  .closing-spark {
    left:-40px;
    bottom:-35px
  }
  .closing-spark .icon {
    width:140px;
    height:140px
  }
  .site-footer {
    gap:16px;
    flex-wrap:wrap;
    padding-top:25px;
    padding-bottom:28px
  }
  .site-footer p {
    margin-left:auto
  }
  .site-footer nav {
    margin:3px 0 0;
    justify-content:flex-start;
    gap:15px;
    width:100%;
    font-size:9px;
    line-height:1.5
  }
}

@media(max-width:370px) {
  .container {
    width:calc(100% - 32px)
  }
  .hero h1 {
    font-size:39px;
    letter-spacing:-2.6px
  }
  .hero-actions {
    gap:3px;
    flex-direction:column
  }
  .hero .eyebrow {
    font-size:7px;
    letter-spacing:.9px
  }
  .phone {
    width:261px;
    height:554px
  }
  .activity-wrap {
    top:261px;
    left:8px;
    right:8px
  }
  .activity-top {
    padding:13px 8px 10px;
    gap:5px
  }
  .activity-word {
    font-size:21px
  }
  .activity-bottom {
    padding-inline:9px
  }
  .playground {
    height:665px
  }
  .word-one {
    font-size:23px;
    left:-3px;
    padding:8px 12px
  }
  .word-two {
    font-size:23px;
    right:-2px;
    padding:8px 12px
  }
  .tap-note {
    right:-5px;
    top:473px
  }
  .tap-note span {
    font-size:10px;
    max-width:64px
  }
  .tap-note svg {
    width:30px
  }
  .floating-spark {
    right:-2px
  }
  .language-card {
    padding-inline:10px
  }
  .language-greeting {
    font-size:23px
  }
  .site-header .wordmark {
    font-size:22px
  }
  .navigation {
    gap:12px
  }
  .nav-signin {
    gap:8px
  }
  .closing-panel h2 {
    font-size:33px
  }
}

html[lang=ru] .hero h1 {
  font-size:clamp(43px,4.6vw,68px);
  letter-spacing:-3px
}

html[lang=ru] .hero-actions {
  gap:15px
}

html[lang=ru] .hero .eyebrow {
  letter-spacing:1.2px
}

html[lang=ru] .activity-word {
  font-size:22px
}

html[lang=ru] .revealed-actions button {
  font-size:9px
}

html[lang=ru] .navigation {
  gap:23px
}

html[lang=ru] .language-name {
  font-size:9px
}

@media(max-width:760px) {
  html[lang=ru] .hero h1 {
    font-size:clamp(37px,8vw,59px);
    letter-spacing:-2.5px
  }
  html[lang=ru] .hero .eyebrow {
    font-size:7px
  }
  html[lang=ru] .navigation {
    gap:14px
  }
  html[lang=ru] .hero-actions {
    gap:7px
  }
  html[lang=ru] .language-greeting {
    font-size:24px
  }
  html[lang=ru] .language-name {
    font-size:8px
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important
  }
  .phone,.phone:hover,.phone:focus-within {
    transform:none
  }
  .confetti-layer {
    display:none
  }
}

/* App-faithful controls and small, deliberate motion. */
.live-activity[data-mode=word] .activity-prompt {
  display:none
}

.example {
  font-size:12px;
  font-weight:700;
  line-height:1.4;
  margin:0 0 10px;
  min-height:18px
}

.example em {
  font-style:normal;
  color:#d9583e
}

.example-translation {
  margin:-5px 0 9px;
  color:#2a262099;
  font-size:10px;
  line-height:1.3;
}

.revealed-actions .skip-button {
  flex:0 0 28px;
  background:#fff8;
  padding:0
}

.revealed-actions .skip-button .icon {
  width:12px
}

.word-ornament {
  transition:transform .25s,background .25s
}

.word-ornament:hover {
  transform:rotate(-10deg);
  background:var(--peach)
}

.activity-audio .icon {
  width:18px;
  height:18px
}

.activity-audio.is-speaking {
  animation:speaker-pulse .75s ease-in-out infinite
}

.demo-options {
  position:absolute;
  inset:80px 0 0;
  background:var(--surface);
  display:grid;
  grid-template-columns:1fr;
  gap:4px;
  padding:8px 12px;
  z-index:4;
  border-top:1px solid var(--line)
}

.demo-options button {
  font-size:10px;
  min-height:23px;
  border-radius:20px;
  background:#fff9;
  font-weight:700
}

.demo-options button:hover {
  background:white
}

.landing-ready .hero-copy>.eyebrow {
  animation:enter-up .8s var(--ease) .05s backwards
}

.landing-ready .hero-copy>h1 {
  animation:enter-up .9s var(--ease) .13s backwards
}

.landing-ready .hero-description {
  animation:enter-up .9s var(--ease) .24s backwards
}

.landing-ready .hero-actions,.landing-ready .compatibility {
  animation:enter-up .9s var(--ease) .34s backwards
}

.landing-ready .hero-footnote {
  animation:enter-up .9s var(--ease) .44s backwards
}

.landing-ready .phone {
  animation:phone-enter 1.15s var(--ease) .2s backwards
}

/* Match the phone entrance, then drift from the same resting transform. */
.landing-ready .word-one {
  animation:phone-enter 1.15s var(--ease) .2s backwards,float-one 8s ease-in-out 1.35s infinite backwards
}

.landing-ready .word-two {
  animation:phone-enter 1.15s var(--ease) .2s backwards,float-two 9s ease-in-out 1.35s infinite backwards
}

.landing-ready .playground-controls,.landing-ready .demo-status {
  animation:enter-up 1s var(--ease) .6s backwards
}

.landing-ready .greeting-underline {
  transform-origin:left;
  animation:draw-underline 1s var(--ease) .5s backwards
}

.scroll-reveal {
  opacity:0;
  translate:0 20px;
  transition:opacity .75s var(--ease) var(--reveal-delay,0ms),translate .75s var(--ease) var(--reveal-delay,0ms),transform .3s var(--ease),background .3s,border-color .3s
}

.scroll-reveal.is-visible {
  opacity:1;
  translate:0 0
}

.language-card:active {
  transform:translateY(-2px) scale(.97)
}

.quiz-option:active,.know-button:active,.quiz-button:active,.activity-audio:active {
  transform:scale(.94)
}

.quiz-option.wrong {
  animation:wrong-answer .35s ease
}

.live-activity[data-mode=result] .result-message .icon {
  animation:check-pop .5s var(--ease)
}

@keyframes enter-up {
  from {
    opacity:0;
    translate:0 18px
  }
  to {
    opacity:1;
    translate:0 0
  }
}

@keyframes phone-enter {
  from {
    opacity:0;
    translate:0 45px;
    scale:.94
  }
  to {
    opacity:1;
    translate:0 0;
    scale:1
  }
}

@keyframes draw-underline {
  from {
    transform:scaleX(0)
  }
  to {
    transform:scaleX(1)
  }
}

@keyframes speaker-pulse {
  50% {
    box-shadow:0 0 0 5px #d8bfff45;
    transform:scale(1.07)
  }
}

@keyframes wrong-answer {
  25% {
    translate:-3px 0
  }
  75% {
    translate:3px 0
  }
}

@keyframes check-pop {
  0% {
    scale:.5;
    rotate:-15deg
  }
  65% {
    scale:1.2;
    rotate:5deg
  }
  100% {
    scale:1;
    rotate:0deg
  }
}

@media(max-width:760px) {
  .tap-note {
    display:none;
    right:0;
    top:590px;
    transform:rotate(-5deg)
  }
  .tap-note svg {
    display:none
  }
  .tap-note span {
    font-size:10px;
    max-width:90px
  }
  .phone .example {
    font-size:11px
  }
  .phone .activity-word {
    font-size:22px
  }
  .demo-status {
    padding-inline:12px
  }
  .playground {
    height:710px
  }
  .language-greeting {
    font-size:24px;
    letter-spacing:-1px
  }
}

@media(max-width:370px) {
  .tap-note {
    top:567px;
    right:-2px
  }
  .tap-note span {
    font-size:9px;
    max-width:70px
  }
  .playground {
    height:686px
  }
  .language-greeting {
    font-size:21px
  }
}

@media(prefers-reduced-motion:reduce) {
  .scroll-reveal {
    opacity:1;
    translate:none
  }
  .hero-copy>*,.phone,.playground-controls,.demo-status,.greeting-underline {
    animation:none!important
  }
  .phone {
    scale:1;
    translate:none
  }
  .confetti-layer {
    display:none
  }
}

/* Interactive motion: the controls stay anchored while their details respond. */
.activity-bottom {
  overflow:hidden;
  transition:background .45s var(--ease)
}

.wallpaper stop {
  transition:stop-color .8s var(--ease)
}

.phone-screen {
  transition:background-color .8s var(--ease)
}

#hero-greeting {
  display:inline-block
}

.button {
  position:relative;
  overflow:hidden;
  isolation:isolate
}

.button::after {
  content:"";
  position:absolute;
  inset:-50% auto -50% -65%;
  width:40%;
  background:linear-gradient(90deg,transparent,#ffffff50,transparent);
  transform:skewX(-20deg);
  pointer-events:none
}

.button-arrow,.language-name .icon,.demo-link .icon,.reveal-button .icon,
.revealed-actions .icon,.wordmark img,.step-icon,.language-greeting {
  transition:transform .4s var(--ease)
}

.navigation a,.site-footer nav a {
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:0 1px;
  transition:color .2s,background-size .3s var(--ease)
}

.revealed-actions button,.demo-options button,.language-select {
  transition:background .25s,transform .3s var(--ease),box-shadow .3s
}

.word-ornament[aria-expanded=true] .icon {
  transform:rotate(90deg)
}

.word-ornament .icon {
  transition:transform .4s var(--ease)
}

.wallpaper-choice {
  transition:transform .3s var(--ease),box-shadow .3s
}

.floating-word {
  transition:scale .4s var(--ease),box-shadow .4s
}

@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .button:hover::after,.button:focus-visible::after {
    animation:button-glint .75s var(--ease)
  }
  .button:hover .button-arrow,.button:focus-visible .button-arrow,
  .language-card:hover .language-name .icon {
    transform:translateX(4px)
  }
  .demo-link:hover .icon {
    transform:translateX(3px) scale(1.15)
  }
  .navigation a:hover,.site-footer nav a:hover {
    background-size:100% 1px;
    text-decoration:none
  }
  .wordmark:hover img {
    transform:rotate(-9deg) scale(1.07)
  }
  .step:hover .step-icon {
    transform:translateY(-5px) rotate(10deg) scale(1.08)
  }
  .step:nth-child(2):hover .step-icon {
    transform:translateY(-5px) rotate(-10deg) scale(1.08)
  }
  .language-card:hover .language-greeting {
    transform:translateY(-3px) rotate(2deg)
  }
  .floating-word:hover {
    animation-play-state:running,paused;
    scale:1.08;
    box-shadow:0 12px 22px #201e1c12
  }
  .reveal-button:hover .icon {
    transform:rotate(90deg)
  }
  #continue-word:hover .icon,.quiz-button:hover .icon,.skip-button:hover .icon {
    transform:translateX(3px)
  }
  .know-button:hover .icon {
    transform:scale(1.18) rotate(-8deg)
  }
  .quiz-option:not(:disabled):hover,.demo-options button:hover {
    transform:translateY(-2px);
    box-shadow:0 3px 6px #201e1c10
  }
  .language-select:hover {
    transform:translateY(-2px);
    background:#fffcf5
  }
  .phone-halo {
    animation:halo-breathe 12s ease-in-out infinite
  }
  .floating-spark .icon,.closing-spark .icon {
    animation:spark-turn 24s linear infinite
  }
}

.reveal-button:active,.demo-options button:active,.word-ornament:active {
  transform:scale(.95)
}

@keyframes button-glint {
  to { left:135% }
}

@keyframes halo-breathe {
  50% {
    border-radius:54% 46% 42% 58% / 53% 51% 49% 47%;
    scale:1.025
  }
}

@keyframes spark-turn {
  to { rotate:360deg }
}

@media(prefers-reduced-motion:reduce) {
  .button::after { display:none }
}

/* A timed-out font must not swap in later and shift already visible content. */
html.fonts-fallback body,html.fonts-fallback .greeting-wrap,
html.fonts-fallback .floating-word,html.fonts-fallback .tap-note span,
html.fonts-fallback .language-greeting {
  font-family:system-ui,sans-serif
}