/* ============================================================
   Wocably — section styles
   nav · hero · phones · ticker · demo · bento · method ·
   stories · cefr · pro · cta · footer · responsive
   ============================================================ */

/* ======================= NAV ======================= */
.nav-sentinel { position: absolute; top: 0; height: 32px; width: 1px; }

.nav {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  translate: -50% 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2.2vw, 1.9rem);
  max-width: calc(100vw - 20px);
  padding: .5rem .6rem .5rem 1.1rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--card) 74%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  transition: box-shadow .35s var(--ease);
}
.nav.scrolled { box-shadow: var(--shadow-lg); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: var(--card); }
}

.nav-brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.nav-logo { width: 26px; height: 26px; }
.nav-word { font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }

.nav-links { display: flex; gap: clamp(.5rem, 1.6vw, 1.35rem); }
.nav-links a {
  text-decoration: none;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--text-2);
  padding: .5em .25em;
  transition: color .2s;
}
.nav-links a:hover { color: var(--text); }

.nav-actions { display: flex; align-items: center; gap: .4rem; }

.theme-toggle {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text-2);
  transition: background-color .2s, color .2s;
}
.theme-toggle:hover { background: var(--dim); color: var(--text); }
.theme-toggle .ic { width: 20px; height: 20px; }

/* toggle icon: show the theme you would switch TO */
.tt-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tt-sun { display: block; }
  :root:not([data-theme="light"]) .tt-moon { display: none; }
}
:root[data-theme="dark"] .tt-sun { display: block; }
:root[data-theme="dark"] .tt-moon { display: none; }
:root[data-theme="light"] .tt-sun { display: none; }
:root[data-theme="light"] .tt-moon { display: block; }

@media (max-width: 679px) {
  .nav-links { display: none; }
  .nav { gap: .75rem; }
}

/* ======================= HERO ======================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(7rem, 15vh, 9.5rem) clamp(3.5rem, 8vh, 5rem);
  overflow: clip;
}

.aurora { position: absolute; inset: 0; pointer-events: none; opacity: var(--aurora-o); }
.au { position: absolute; border-radius: 50%; will-change: transform; }
.au-1 {
  width: 62vmax; height: 62vmax; left: -20vmax; top: -24vmax;
  background: radial-gradient(closest-side, rgb(163 95 236 / .55), transparent 70%);
  animation: drift1 26s ease-in-out infinite alternate;
}
.au-2 {
  width: 54vmax; height: 54vmax; right: -18vmax; top: -12vmax;
  background: radial-gradient(closest-side, rgb(59 174 254 / .5), transparent 70%);
  animation: drift2 22s ease-in-out infinite alternate;
}
.au-3 {
  width: 46vmax; height: 46vmax; left: 28vw; bottom: -28vmax;
  background: radial-gradient(closest-side, rgb(253 201 56 / .4), transparent 70%);
  animation: drift3 30s ease-in-out infinite alternate;
}
@keyframes drift1 { to { transform: translate(9vmax, 7vmax) scale(1.1); } }
@keyframes drift2 { to { transform: translate(-7vmax, 9vmax) scale(1.14); } }
@keyframes drift3 { to { transform: translate(-9vmax, -7vmax) scale(1.06); } }

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-weight: 600;
  font-size: .875rem;
  color: var(--text-2);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 65%, transparent);
  padding: .55em 1.05em;
  border-radius: var(--r-pill);
}
.hero-pill .ic { color: var(--purple); }

.hero-title {
  font-size: var(--fs-hero);
  font-weight: 900;
  line-height: .98;
  letter-spacing: -.03em;
  margin-top: var(--sp-5);
}
.hero-line { display: block; }

.hero-slot {
  display: inline-block;
  position: relative;
  height: 1.04em;
  vertical-align: bottom;
  perspective: 900px;
  white-space: nowrap;
}
.js .hero-slot { transition: width .5s var(--ease); }
.hero-flip {
  position: relative;
  display: block;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.5, .05, .2, 1);
}
.hero-flip.flipped { transform: rotateX(180deg); }
.hero-face {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  line-height: 1.04;
  white-space: nowrap;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.hero-face-b { transform: rotateX(180deg); }

.hero-ipa {
  margin-top: .9rem;
  font-size: clamp(1rem, .9rem + .6vw, 1.25rem);
  min-height: 1.5em;
  transition: opacity .3s;
}
.hero-ipa.fade { opacity: 0; }

.hero-sub {
  margin-top: var(--sp-5);
  font-size: var(--fs-lead);
  color: var(--text-2);
  max-width: 52ch;
}

.store-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: var(--sp-6); }
.store-badge {
  display: inline-block;
  border-radius: 10px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.store-badge svg { width: 162px; height: 48px; border-radius: 10px; }
.store-badge:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -12px rgb(0 0 0 / .4); }

.hero-note { margin-top: var(--sp-4); color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }

.hero-visual { position: relative; display: flex; justify-content: center; }

.chips { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.chip-float {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  display: inline-flex;
  align-items: center;
  gap: .55em;
  background: color-mix(in srgb, var(--card) 90%, transparent);
  border: 1px solid var(--border-2);
  border-radius: var(--r-pill);
  padding: .55em 1em;
  font-weight: 700;
  font-size: .875rem;
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  will-change: transform;
  animation: chipfloat var(--fd, 8s) ease-in-out infinite alternate;
}
.chip-float .ipa { font-size: .82em; }
@keyframes chipfloat {
  from { transform: translate(var(--px, 0px), calc(var(--py, 0px) - 7px)); }
  to   { transform: translate(var(--px, 0px), calc(var(--py, 0px) + 7px)); }
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 20px;
  translate: -50% 0;
  width: 26px;
  height: 42px;
  border: 2px solid var(--muted);
  border-radius: 99px;
  opacity: .45;
}
.hero-scroll span {
  position: absolute;
  left: 50%;
  top: 7px;
  width: 4px;
  height: 9px;
  margin-left: -2px;
  border-radius: 99px;
  background: var(--muted);
  animation: scrollhint 1.9s ease-in-out infinite;
}
@keyframes scrollhint {
  0%, 100% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(13px); opacity: 0; }
}

@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { margin-top: var(--sp-7); }
  .hero-scroll { display: none; }
}
@media (max-width: 899px) {
  .chips { display: none; }
}

/* ======================= PHONE MOCKUPS ======================= */
.phone {
  width: 300px;
  aspect-ratio: 9 / 19.4;
  background: #0B0D1A;
  border-radius: 54px;
  padding: 10px;
  position: relative;
  flex-shrink: 0;
  box-shadow: var(--shadow-lg), inset 0 0 0 2px rgb(255 255 255 / .07);
}
.phone::before,
.phone::after {
  content: "";
  position: absolute;
  width: 3px;
  background: #0B0D1A;
  border-radius: 2px;
}
.phone::before { right: -2.5px; top: 130px; height: 64px; }
.phone::after { left: -2.5px; top: 104px; height: 92px; }

.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bg);
  border-radius: 44px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.phone-island {
  position: absolute;
  top: 10px;
  left: 50%;
  translate: -50% 0;
  width: 86px;
  height: 25px;
  background: #000;
  border-radius: 99px;
  z-index: 5;
}
.app-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 24px 2px;
  font-size: 12px;
  font-weight: 800;
}
.app-sbi { width: 46px; height: 12px; }

.app-body {
  flex: 1;
  padding: 10px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  min-height: 0;
}

/* --- Home screen --- */
.app-head { display: flex; align-items: center; gap: 10px; }
.app-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 16px;
}
.app-head-txt { display: flex; flex-direction: column; line-height: 1.3; }
.app-head-txt b { font-size: 15px; font-weight: 800; }
.app-level {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
}
.app-level .ic { width: 11px; height: 11px; color: var(--orange); }

.app-xp {
  height: 8px;
  border-radius: 99px;
  background: var(--dim);
  border: 1px solid var(--border-2);
  overflow: hidden;
}
.app-xp i { display: block; height: 100%; width: var(--w, 50%); border-radius: inherit; background: var(--grad-brand); }
.app-xp-txt { font-size: 10.5px; color: var(--muted); margin-top: -4px; font-weight: 600; }
.app-xp-txt b { color: var(--purple); font-weight: 800; }

.app-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.app-stat {
  position: relative;
  aspect-ratio: 1;
  border-radius: 13px;
  background: var(--c);
  color: #fff;
  padding: 6px 7px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.app-stat > .ic { width: 12px; height: 12px; color: rgb(0 0 0 / .4); }
.app-stat b { font-size: 15px; font-weight: 800; margin-top: auto; line-height: 1.1; }
.app-stat span { font-size: 7.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; opacity: .8; }
.app-stat .wm {
  position: absolute;
  right: -13px;
  bottom: -13px;
  width: 46px;
  height: 46px;
  color: rgb(255 255 255 / .22);
}

.app-week { display: flex; gap: 5px; }
.app-week span {
  flex: 1;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
  background: var(--dim);
  color: var(--muted);
  border: 1px solid var(--border-2);
}
.app-week .on { background: var(--orange); color: #fff; border-color: transparent; }
.app-week .now {
  background: color-mix(in srgb, var(--orange) 12%, transparent);
  border: 1.5px dashed var(--orange);
  color: var(--orange);
}

.app-cta {
  display: grid;
  place-items: center;
  height: 42px;
  border-radius: 11px;
  background: var(--purple);
  color: #fff;
  font-weight: 800;
  font-size: 13.5px;
  box-shadow: 0 8px 18px -8px rgb(163 95 236 / .6);
}

.app-quests {
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  box-shadow: var(--shadow);
}
.app-quests-head { display: flex; justify-content: space-between; font-size: 12px; }
.app-quests-head b { font-weight: 800; }
.app-quests-head span { color: var(--muted); font-weight: 700; }

.app-quest { display: flex; align-items: center; gap: 9px; }
.app-quest-ico {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  flex-shrink: 0;
}
.app-quest-ico .ic { width: 14px; height: 14px; }
.app-quest-ico::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 12px;
  padding: 1.8px;
  background: conic-gradient(var(--c) var(--p, 50%), color-mix(in srgb, var(--c) 18%, transparent) 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.app-quest-txt { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; }
.app-quest-txt b { font-size: 11.5px; font-weight: 800; }
.app-quest-txt span { font-size: 9.5px; color: var(--muted); font-weight: 600; }
.app-claim {
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: var(--green);
  border-radius: 99px;
  padding: 4px 10px;
}
.app-quest-n { font-size: 10px; font-weight: 800; color: var(--muted); }

.app-tabbar {
  margin-top: auto;
  display: flex;
  gap: 2px;
  padding: 8px 4px 0;
  border-top: 1px solid var(--border-2);
}
.app-tabbar span {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 7.5px;
  font-weight: 700;
  color: var(--muted);
}
.app-tabbar .ic { width: 15px; height: 15px; }
.app-tabbar .on { color: var(--purple); }

.phone-hero {
  rotate: -4deg;
  animation: levitate 7s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes levitate {
  from { transform: translateY(-8px); }
  to { transform: translateY(10px); }
}

/* --- Session screen --- */
.app-session { gap: 12px; padding-top: 12px; }
.app-sess-top { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.app-sess-top .ic { width: 14px; height: 14px; color: var(--muted); }
.app-sess-top b { flex: 1; text-align: center; font-weight: 800; }
.app-sess-top span { color: var(--muted); font-weight: 700; font-size: 11.5px; }

.app-progress {
  height: 6px;
  border-radius: 99px;
  background: var(--dim);
  border: 1px solid var(--border-2);
  overflow: hidden;
}
.app-progress i { display: block; height: 100%; width: var(--w, 30%); border-radius: inherit; background: var(--grad-brand); }

.app-card {
  flex: 1;
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: 18px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px;
  text-align: center;
  position: relative;
}
.app-card-state {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--purple);
  background: color-mix(in srgb, var(--purple) 14%, transparent);
  padding: 3px 9px;
  border-radius: 99px;
}
.app-card-word { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.app-card-ipa { font-size: 11px; }
.app-card-hint { position: absolute; bottom: 14px; font-size: 9.5px; color: var(--muted); font-weight: 600; }

.app-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.app-btn-ghost, .app-btn-fill {
  display: grid;
  place-items: center;
  height: 40px;
  border-radius: 11px;
  font-weight: 800;
  font-size: 12.5px;
}
.app-btn-ghost { border: 1.5px solid var(--border); color: var(--text-2); }
.app-btn-fill { background: var(--purple); color: #fff; }

/* --- Stories screen --- */
.app-stories { gap: 10px; padding-top: 10px; }
.app-title { font-size: 17px; font-weight: 900; letter-spacing: -.02em; }
.app-story-card {
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow);
}
.app-story-top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  color: var(--muted);
  font-weight: 700;
}
.app-badge-new {
  background: var(--amber);
  color: #1E2144;
  font-weight: 800;
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2.5px 8px;
  border-radius: 99px;
}
.app-story-name { font-size: 13.5px; font-weight: 800; }
.app-story-txt { font-size: 10.5px; line-height: 1.55; color: var(--text-2); }
.app-story-txt mark {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}
.app-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.app-chips span {
  font-size: 8.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--purple) 13%, transparent);
  color: var(--purple);
}
.app-story-card.is-dim { opacity: .6; }

@media (max-width: 479px) {
  .phone { width: 256px; }
}

/* ======================= TICKER ======================= */
.ticker {
  border-block: 1px solid var(--border-2);
  background: var(--raise);
  overflow: hidden;
  padding: 1.15rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 52s linear infinite;
  will-change: transform;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker ul { display: flex; list-style: none; margin: 0; }
.ticker li {
  display: flex;
  align-items: baseline;
  gap: .55em;
  white-space: nowrap;
  font-size: 1.0625rem;
  padding-right: 3.2rem;
}
.ticker b { font-weight: 800; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ======================= FLASHCARD DEMO ======================= */
.demo-grid {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.demo-feedback { margin-top: var(--sp-6); min-height: 2.6em; font-weight: 800; font-size: 1.1875rem; }
.demo-feedback .ic { width: 1.15em; height: 1.15em; vertical-align: -.2em; margin-inline-end: .35em; }
.demo-feedback.good .ic { color: var(--mastered); }
.demo-feedback.tough .ic { color: var(--reviewing); }
.demo-feedback-hint { color: var(--muted); font-weight: 600; font-size: .9375rem; }

.demo-timeline { margin-top: var(--sp-4); max-width: 480px; }
.tl-track {
  height: 10px;
  border-radius: 99px;
  background: var(--dim);
  border: 1px solid var(--border-2);
  overflow: hidden;
}
.tl-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--grad-brand);
  transition: width .9s var(--ease);
}
.tl-days {
  display: flex;
  justify-content: space-between;
  margin-top: .45rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--muted);
}

.demo-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 3rem);
}

.fc { width: min(100%, 430px); }
.fc-card {
  display: block;
  width: 100%;
  height: 340px;
  position: relative;
  perspective: 1200px;
  border-radius: var(--r-lg);
  text-align: center;
}
.fc-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 2.2rem 2rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-lg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform .65s cubic-bezier(.45, .05, .2, 1);
}
.fc-front { background: linear-gradient(180deg, var(--card), var(--raise)); }
.fc-back { background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--purple) 8%, var(--card))); transform: rotateY(-180deg); }
.fc[data-state="back"] .fc-front { transform: rotateY(180deg); }
.fc[data-state="back"] .fc-back { transform: rotateY(0); }

.fc-state {
  position: absolute;
  top: 18px;
  inset-inline-start: 18px;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--purple-ink);
  background: color-mix(in srgb, var(--purple) 12%, transparent);
  padding: .35em .9em;
  border-radius: 99px;
}
.fc-word { font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 900; letter-spacing: -.02em; }
.fc-ipa { font-size: 1.0625rem; }
.fc-hint { position: absolute; bottom: 18px; left: 0; right: 0; font-size: .8125rem; color: var(--muted); font-weight: 600; }

.fc-mini { display: flex; align-items: center; gap: .7em; font-size: 1.125rem; }
.fc-mini b { font-weight: 800; }
.fc-pos {
  font-style: normal;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--purple-ink);
  background: color-mix(in srgb, var(--purple) 12%, transparent);
  padding: .3em .8em;
  border-radius: 99px;
}
.fc-def { font-size: 1.1875rem; font-weight: 700; max-width: 30ch; }
.fc-ex { color: var(--text-2); font-style: italic; font-size: .9375rem; max-width: 36ch; }

.fc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: 1.2rem; }
.fc-actions .btn { width: 100%; }

.fc-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
  min-height: 44px;
  color: var(--muted);
  font-weight: 700;
  font-size: .9375rem;
}
.fc-speak {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text-2);
  border: 1px solid var(--border);
  transition: background-color .2s, color .2s;
}
.fc-speak:hover { background: var(--dim); color: var(--text); }
.fc-speak .ic { width: 19px; height: 19px; }
.fc-next {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-weight: 800;
  color: var(--purple-ink);
  padding: .5em .25em;
}
.fc-next:hover .ic { translate: 3px 0; }
.fc-next .ic { transition: translate .2s var(--ease); }

.phone-session { display: none; }
@media (min-width: 1200px) {
  .phone-session { display: block; rotate: 4deg; width: 272px; }
}

@media (max-width: 999px) {
  .demo-grid { grid-template-columns: 1fr; }
  .demo-copy { text-align: start; }
}
@media (max-width: 479px) {
  .fc-card { height: 310px; }
}

/* reduced motion: crossfade instead of 3D flip */
@media (prefers-reduced-motion: reduce) {
  .fc-face { transition: opacity .01ms; }
  .fc-front, .fc-back,
  .fc[data-state="back"] .fc-front,
  .fc[data-state="back"] .fc-back { transform: none; }
  .fc-back { opacity: 0; pointer-events: none; }
  .fc[data-state="back"] .fc-back { opacity: 1; }
  .fc[data-state="back"] .fc-front { opacity: 0; }
}

/* ======================= BENTO ======================= */
/* grid/flex children may never force the page wider than the viewport */
.hero-grid > *, .demo-grid > *, .method-grid > *, .stories-grid > *,
.bento > article, .demo-stage > .fc { min-width: 0; }

.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--sp-4); }
.bento > article {
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: .9rem;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.bento > article:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.bento p { color: var(--text-2); }

.bento-dict { grid-column: span 5; }
.bento-srs { grid-column: span 7; }
.bento-heat { grid-column: span 7; }
.bento-decks { grid-column: span 5; }
.bento-game { grid-column: span 6; }
.bento-avatar { grid-column: span 6; }

/* dictionary entry */
.dict-entry {
  margin-top: auto;
  background: var(--raise);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  padding: 1.05rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.dict-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.dict-top > b { font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em; margin-right: .15rem; }
.dict-chip {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-2);
  background: var(--dim);
  border: 1px solid var(--border-2);
  padding: .32em .75em;
  border-radius: 99px;
}
.dict-cefr { color: #fff; background: var(--purple); border-color: transparent; }
.dict-speak {
  margin-left: auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--grad-brand);
}
.dict-speak .ic { width: 16px; height: 16px; }
.dict-ipa { font-size: .95rem; }
.dict-def { font-weight: 700; }
.dict-ex { color: var(--muted); font-style: italic; font-size: .9375rem; }
.dict-rel { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; margin-top: .25rem; }
.dict-rel-label {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
}
.dict-state {
  display: flex;
  align-items: center;
  gap: .55em;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--text-2);
  margin-top: .35rem;
}

/* SRS engines */
.srs-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: auto; }
.srs-side {
  background: var(--raise);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  padding: 1.05rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.srs-name { font-weight: 800; display: flex; align-items: center; gap: .6em; }
.pro-chip {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-size: .64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #1E2144;
  background: var(--amber);
  padding: .35em .7em;
  border-radius: 99px;
}
.pro-chip .ic { width: .9em; height: .9em; }

.srs-boxes { position: relative; display: flex; align-items: flex-end; gap: 7px; height: 66px; }
.srs-boxes i {
  flex: 1;
  height: var(--h);
  background: color-mix(in srgb, var(--purple) 15%, var(--dim));
  border: 1px solid color-mix(in srgb, var(--purple) 28%, var(--border-2));
  border-radius: 7px 7px 4px 4px;
}
.srs-card-chip {
  position: absolute;
  width: 15%;
  height: 12px;
  border-radius: 4px;
  background: var(--grad-brand);
  box-shadow: 0 3px 8px rgb(163 95 236 / .4);
  animation: hop 8s var(--ease) infinite;
}
@keyframes hop {
  0%, 17%   { left: 2%;  top: 32px; }
  20%, 37%  { left: 22%; top: 24px; }
  40%, 57%  { left: 43%; top: 16px; }
  60%, 77%  { left: 63%; top: 8px; }
  80%, 97%  { left: 84%; top: 0; }
  100%      { left: 2%;  top: 32px; }
}

.srs-curve { width: 100%; height: auto; }
.srs-curve .pulse {
  animation: pulse 2.4s ease-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  70%, 100% { transform: scale(2.4); opacity: 0; }
}
.srs-tag { font-size: .875rem; color: var(--muted); font-weight: 600; }

.card-foot {
  margin-top: .2rem;
  display: flex;
  align-items: center;
  gap: .5em;
  color: var(--muted);
  font-size: .875rem;
  font-weight: 600;
}

/* heatmap */
.hm {
  display: grid;
  grid-template-rows: repeat(7, 13px);
  grid-auto-flow: column;
  grid-auto-columns: 13px;
  gap: 4px;
  margin-top: auto;
  overflow: hidden;
  justify-content: start;
}
.hm i {
  border-radius: 3.5px;
  background: color-mix(in srgb, var(--purple) calc(var(--i, 0) * 1%), var(--dim));
  border: 1px solid color-mix(in srgb, var(--purple) calc(var(--i, 0) * .55%), var(--border-2));
}
.js .hm i { transform: scale(0); }
.js .hm.animate i { transform: scale(1); transition: transform .5s var(--ease) var(--d, 0s); }

/* decks */
.deck-filter { display: flex; gap: .4rem; flex-wrap: wrap; }
.dchip {
  font-size: .78rem;
  font-weight: 800;
  padding: .38em .85em;
  border-radius: 99px;
  background: var(--dim);
  color: var(--text-2);
  border: 1px solid var(--border-2);
}
.dchip.on { background: var(--purple); color: #fff; border-color: transparent; }

.deck-rows { display: flex; flex-direction: column; gap: .5rem; }
.deck-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  background: var(--raise);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  padding: .6rem .75rem;
}
.deck-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  flex-shrink: 0;
}
.deck-ico .ic { width: 17px; height: 17px; }
.deck-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.deck-txt b { font-size: .9375rem; font-weight: 800; }
.deck-txt span { font-size: .78rem; color: var(--muted); font-weight: 600; }
.deck-fork {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-size: .8125rem;
  font-weight: 800;
  color: var(--purple-ink);
  border: 1px solid var(--border);
  padding: .45em .85em;
  border-radius: 99px;
  white-space: nowrap;
}
.deck-fork .ic { width: .95em; height: .95em; }

/* gamification */
.game-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; }
.game-pill {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-weight: 800;
  font-size: .875rem;
  padding: .5em .95em;
  border-radius: 99px;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
}
.game-pill .ic { color: var(--c); }
.game-ink .ic.off { opacity: .25; }

.game-quest {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: var(--raise);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  padding: .75rem .85rem;
}
.game-quest .app-quest-ico { width: 38px; height: 38px; color: #8a6d00; }
.game-quest .app-quest-ico .ic { width: 17px; height: 17px; }
.game-quest .app-quest-txt b { font-size: .9375rem; }
.game-quest .app-quest-txt span { font-size: .8125rem; }
.game-quest .app-claim { font-size: .78rem; padding: .45em 1em; }

/* avatars */
.ava-row { display: flex; align-items: center; margin-top: auto; }
.ava {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 3px solid var(--card);
  margin-inline-start: -12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  background: var(--dim);
}
.ava:first-child { margin-inline-start: 0; }
.ava.more {
  display: grid;
  place-items: center;
  color: var(--text-2);
  font-weight: 800;
  font-size: .95rem;
}

@media (max-width: 979px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento > article { grid-column: auto; }
}
@media (max-width: 699px) {
  .bento { grid-template-columns: 1fr; }
}
@media (max-width: 519px) {
  .srs-split { grid-template-columns: 1fr; }
}

/* ======================= METHOD ======================= */
.method-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.method-points { list-style: none; margin-top: var(--sp-5); display: flex; flex-direction: column; gap: .85rem; }
.method-points li { display: flex; gap: .7em; align-items: baseline; font-weight: 600; color: var(--text-2); }
.method-points .ic { color: var(--mastered); translate: 0 .18em; width: 1.05em; height: 1.05em; }

.method-chart {
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: clamp(.9rem, 2vw, 1.6rem);
}
.method-chart svg { width: 100%; height: auto; }

.chart-grid line { stroke: var(--border); stroke-width: 1.5; }
.chart-grid .faint { stroke: var(--border-2); stroke-width: 1; stroke-dasharray: 4 7; }
.chart-label text {
  fill: var(--muted);
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
}
.chart-legend text { fill: var(--text-2); font-family: var(--font); font-size: 13.5px; font-weight: 700; }
.leg-forget { stroke: var(--muted); stroke-width: 2.5; stroke-dasharray: 5 4; }
.leg-srs { stroke: var(--purple); stroke-width: 3.5; stroke-linecap: round; }

.curve-forget {
  fill: none;
  stroke: var(--muted);
  stroke-width: 2.5;
  stroke-dasharray: .014 .011;
  stroke-linecap: round;
}
.curve-r0, .curve-r1, .curve-r2 {
  fill: none;
  stroke: var(--purple);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
}
.curve-jump { stroke: var(--purple); stroke-width: 2; stroke-dasharray: 4 5; opacity: .55; }
.chart-marks .mark { fill: var(--card); stroke: var(--purple); stroke-width: 3; }
.chart-marks .ring { fill: none; stroke: var(--purple); stroke-width: 2; opacity: 0; }

.js .method-chart .curve-forget { opacity: 0; transition: opacity 1.2s ease .3s; }
.js .method-chart .curve-r0,
.js .method-chart .curve-r1,
.js .method-chart .curve-r2 { stroke-dashoffset: 1; }
.js .method-chart .curve-jump,
.js .method-chart .mark { opacity: 0; }

.js .method-chart.drawn .curve-forget { opacity: .65; }
.js .method-chart.drawn .curve-r0 { stroke-dashoffset: 0; transition: stroke-dashoffset .9s ease-out .15s; }
.js .method-chart.drawn .curve-r1 { stroke-dashoffset: 0; transition: stroke-dashoffset .9s ease-out 1s; }
.js .method-chart.drawn .curve-r2 { stroke-dashoffset: 0; transition: stroke-dashoffset .9s ease-out 1.85s; }
.js .method-chart.drawn .j1 { opacity: .55; transition: opacity .4s .95s; }
.js .method-chart.drawn .j2 { opacity: .55; transition: opacity .4s 1.8s; }
.js .method-chart.drawn .m1 { opacity: 1; transition: opacity .3s 1s; }
.js .method-chart.drawn .m2 { opacity: 1; transition: opacity .3s 1.85s; }
.method-chart.drawn .ring { animation: ringpulse 2.6s ease-out infinite; transform-origin: center; transform-box: fill-box; }
.method-chart.drawn .r1 { animation-delay: 1.1s; }
.method-chart.drawn .r2 { animation-delay: 2s; }
@keyframes ringpulse {
  0% { transform: scale(1); opacity: .8; }
  60%, 100% { transform: scale(2.8); opacity: 0; }
}

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

/* ======================= STORIES (always dark) ======================= */
.stories {
  /* scoped dark palette — stays deep indigo in both themes */
  --bg: #161938;
  --card: #262A51;
  --raise: #1A1D3B;
  --dim: #12142e;
  --input: #2E3360;
  --text: #E9ECF7;
  --text-2: #C8D0EA;
  --muted: #A3AED0;
  --border: #3B4470;
  --border-2: #2E365E;
  --purple-ink: #C8A9F7;
  --shadow: 0 12px 40px -12px rgb(0 0 0 / .5);
  --shadow-lg: 0 24px 70px -24px rgb(0 0 0 / .6);
  color-scheme: dark;

  color: var(--text);
  background:
    radial-gradient(58rem 30rem at 82% -8%, rgb(163 95 236 / .22), transparent 62%),
    radial-gradient(48rem 26rem at 8% 112%, rgb(59 174 254 / .18), transparent 62%),
    var(--bg);
  margin-inline: clamp(0px, 1.5vw, 20px);
  border-radius: clamp(0px, 3vw, var(--r-xl));
}

.stories-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

.story-panel {
  margin-top: var(--sp-6);
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 3vw, 2.1rem);
  box-shadow: var(--shadow-lg);
}
.story-head { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; font-size: .9375rem; flex-wrap: wrap; }
.story-head b { font-weight: 800; }
.story-new {
  background: var(--amber);
  color: #1E2144;
  font-weight: 800;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: .32em .85em;
  border-radius: 99px;
}
.story-day { color: var(--muted); font-weight: 600; margin-inline-start: auto; font-size: .8125rem; }

.story-typed {
  font-size: clamp(1.125rem, 1rem + .8vw, 1.4375rem);
  line-height: 1.75;
  min-height: 8.75em;
}
.story-typed mark {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
  border-bottom: 2px solid rgb(163 95 236 / .5);
}
.story-caret {
  display: inline-block;
  width: 2.5px;
  height: 1.1em;
  background: var(--purple);
  translate: 2px .18em;
  animation: caret 1.1s steps(2, jump-none) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.story-chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.2rem; }
.story-chips span {
  font-size: .8125rem;
  font-weight: 700;
  padding: .4em .95em;
  border-radius: 99px;
  color: #C8A9F7;
  background: rgb(163 95 236 / .14);
  border: 1px solid rgb(163 95 236 / .32);
}

/* no-JS: show the full story statically instead of the typed node */
html:not(.js) .story-typed { display: none; }
html:not(.js) #story-full {
  position: static !important;
  width: auto; height: auto;
  margin: 0; padding: 0;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  font-size: clamp(1.125rem, 1rem + .8vw, 1.4375rem);
  line-height: 1.75;
}

@media (prefers-reduced-motion: reduce) {
  .story-caret { display: none; }
}

.stories-visual { display: none; }
@media (min-width: 1024px) {
  .stories-visual { display: flex; justify-content: center; }
  .phone-stories { rotate: -3deg; }
}
@media (max-width: 1023px) {
  .stories-grid { grid-template-columns: 1fr; }
}

/* ======================= CEFR ======================= */
.cefr-track {
  position: relative;
  height: 7px;
  border-radius: 99px;
  background: var(--dim);
  border: 1px solid var(--border-2);
  max-width: 1080px;
  margin: 0 auto var(--sp-6);
  overflow: hidden;
}
.cefr-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #22C55E, #FDC938, #FF6B35, #A35FEC);
  transform-origin: left;
  transform: scaleX(var(--progress, 0));
}

.cefr-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--sp-4);
  max-width: 1080px;
  margin-inline: auto;
}
.cefr-steps li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .45rem;
  padding: 0 .25rem;
}
.cefr-badge {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 1.1875rem;
  color: #14173A;
  background: var(--c);
  box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--c) 65%, transparent);
}
.cefr-name { font-weight: 800; font-size: .9375rem; }
.cefr-steps p { color: var(--muted); font-size: .8125rem; font-style: italic; line-height: 1.5; }

.cefr-facts { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: var(--sp-7); }
.cefr-facts span {
  font-weight: 800;
  font-size: .9375rem;
  padding: .6em 1.15em;
  border-radius: 99px;
  background: var(--card);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow);
}

@media (max-width: 767px) {
  .cefr-track { display: none; }
  .cefr-steps { grid-template-columns: 1fr; max-width: 440px; gap: var(--sp-5); }
  .cefr-steps li {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 1.1rem;
    text-align: start;
    align-items: start;
  }
  .cefr-badge { grid-row: 1 / 3; }
  .cefr-steps li .cefr-name { align-self: end; }
}

/* ======================= PRO ======================= */
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.pro-card {
  position: relative;
  max-width: 780px;
  margin-inline: auto;
  border-radius: var(--r-xl);
  padding: clamp(1.75rem, 4vw, 3rem);
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    conic-gradient(from var(--angle), #A35FEC, #3BAEFE, #FDC938, #A35FEC) border-box;
  box-shadow: var(--shadow-lg);
  animation: spin-border 8s linear infinite;
}
@keyframes spin-border { to { --angle: 360deg; } }

.pro-head { text-align: center; margin-bottom: var(--sp-6); }
.pro-head .lead { margin-inline: auto; }

.pro-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.pro-list li {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  background: var(--raise);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  padding: .95rem 1.05rem;
}
.pro-list li:last-child { grid-column: 1 / -1; }
.pro-list .ic { width: 22px; height: 22px; color: var(--purple); margin-top: .1em; }
.pro-list b { display: block; font-weight: 800; }
.pro-list span { color: var(--muted); font-size: .9rem; }

.pro-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-top: var(--sp-6);
  flex-wrap: wrap;
}
.pro-note { color: var(--muted); font-weight: 600; font-size: .9375rem; }

@media (max-width: 639px) {
  .pro-list { grid-template-columns: 1fr; }
  .pro-list li:last-child { grid-column: auto; }
}

/* ======================= FINAL CTA ======================= */
.get-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, #A35FEC, #3BAEFE);
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
  color: #fff;
  box-shadow: 0 30px 80px -32px rgb(163 95 236 / .55);
}
.get-mark {
  position: absolute;
  width: 620px;
  height: 620px;
  inset-inline-end: -170px;
  top: -140px;
  rotate: -14deg;
  opacity: .14;
  filter: brightness(0) invert(1);
  pointer-events: none;
}
.get-panel h2 {
  position: relative;
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 3.6rem);
  color: #fff;
}
.get-panel p {
  position: relative;
  margin-top: .9rem;
  font-size: var(--fs-lead);
  font-weight: 600;
  color: #14173A;
}
.get-panel .store-row { position: relative; justify-content: center; margin-top: var(--sp-6); }
.get-panel .store-badge:hover { box-shadow: 0 18px 36px -14px rgb(0 0 0 / .5); }

/* ======================= FOOTER ======================= */
.footer {
  border-top: 1px solid var(--border-2);
  background: var(--raise);
  padding: var(--sp-8) 0 var(--sp-6);
}
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.1fr; gap: var(--sp-6); }
.footer-brand p { color: var(--muted); margin-top: .9rem; font-size: .9375rem; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; font-size: .9375rem; }
.footer-col b { font-weight: 800; margin-bottom: .3rem; }
.footer-col a { color: var(--text-2); text-decoration: none; }
.footer-col a:hover { color: var(--text); text-decoration: underline; }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  justify-content: space-between;
  color: var(--muted);
  font-size: var(--fs-sm);
  border-top: 1px solid var(--border-2);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
}

@media (max-width: 899px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 519px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ======================= SUBPAGES (about / privacy / terms) ======================= */
.page-hero {
  text-align: center;
  padding: clamp(9.5rem, 18vh, 12rem) 0 var(--sp-8);
  background:
    radial-gradient(42rem 20rem at 72% -24%, rgb(163 95 236 / .16), transparent 62%),
    radial-gradient(38rem 18rem at 18% -14%, rgb(59 174 254 / .13), transparent 62%);
}
.page-hero h1 {
  font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.2rem);
  font-weight: 900;
  letter-spacing: -.03em;
}
.page-hero .lead { margin-inline: auto; }

.prose { max-width: 780px; margin-inline: auto; padding-bottom: var(--sect); }
.prose .updated { color: var(--muted); font-size: var(--fs-sm); font-weight: 700; margin-bottom: var(--sp-6); }
.prose h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.85rem); margin: var(--sp-7) 0 var(--sp-3); }
.prose h2:first-of-type { margin-top: 0; }
.prose h3 { font-size: 1.125rem; margin: var(--sp-5) 0 var(--sp-2); }
.prose p { color: var(--text-2); margin-bottom: var(--sp-3); }
.prose ul { padding-inline-start: 1.25em; margin: var(--sp-3) 0 var(--sp-4); display: flex; flex-direction: column; gap: .55rem; }
.prose li { color: var(--text-2); }
.prose li::marker { color: var(--purple); }
.prose a { color: var(--purple-ink); font-weight: 700; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.prose strong { color: var(--text); }
.callout {
  background: var(--card);
  border: 1px solid var(--border-2);
  border-inline-start: 4px solid var(--purple);
  border-radius: var(--r-md);
  padding: 1rem 1.25rem;
  margin: var(--sp-5) 0;
  color: var(--text-2);
  box-shadow: var(--shadow);
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin: var(--sp-6) 0;
}
.about-grid .card { padding: 1.5rem; }
.about-grid .card .ic { width: 26px; height: 26px; color: var(--purple); margin-bottom: .7rem; }
.about-grid .card h3 { margin: 0 0 .5rem; }
.about-grid .card p { margin: 0; font-size: .9375rem; }
@media (max-width: 767px) {
  .about-grid { grid-template-columns: 1fr; }
}

.page-cta {
  text-align: center;
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: clamp(2rem, 5vw, 3rem);
  margin-top: var(--sp-7);
}
.page-cta h2 { margin: 0 0 .6rem; }
.page-cta p { margin: 0 0 var(--sp-5); }

/* ======================= ACCOUNT PAGES (unsubscribe / verify-email / reset-password) ======================= */
.msg-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: clamp(7rem, 16vh, 10rem) 0 var(--sp-8);
  background:
    radial-gradient(42rem 20rem at 72% -24%, rgb(163 95 236 / .16), transparent 62%),
    radial-gradient(38rem 18rem at 18% -14%, rgb(59 174 254 / .13), transparent 62%);
}

.msg-card {
  width: min(100%, 34rem);
  margin-inline: auto;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(2rem, 5vw, 3rem);
}
.msg-card h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.1rem); margin: 0 0 .75rem; }
/* The heading is focused programmatically so keyboard users land on the outcome
   rather than the top of the document. It is never reached by tabbing, so a
   focus ring would only read as a rendering glitch — the card is aria-live, which
   is what actually announces the change. */
.msg-card h1[tabindex="-1"]:focus { outline: none; }
.msg-card p { color: var(--text-2); margin: 0 0 var(--sp-3); }
.msg-card p:last-child { margin-bottom: 0; }
.msg-card a:not(.btn) { color: var(--purple-ink); font-weight: 700; text-underline-offset: 2px; }

/* status glyph — colour is set per state */
.msg-icon {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin: 0 auto var(--sp-4);
  border-radius: 50%;
  background: color-mix(in srgb, var(--msg-accent, var(--purple)) 14%, transparent);
  color: var(--msg-accent, var(--purple));
}
.msg-icon .ic { width: 1.9rem; height: 1.9rem; }
.msg-state[data-state="success"] { --msg-accent: var(--green); }
.msg-state[data-state="error"],
.msg-state[data-state="expired"] { --msg-accent: var(--orange); }
.msg-state[data-state="offline"] { --msg-accent: var(--blue); }

/* spinner */
.msg-spinner {
  width: 2.25rem;
  height: 2.25rem;
  margin: 0 auto var(--sp-4);
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--purple);
  animation: msg-spin .8s linear infinite;
}
@keyframes msg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .msg-spinner { animation-duration: 2.4s; }
}

.msg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-5);
}
.msg-note { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--sp-4); }

/* ---------- form (reset-password only) ---------- */
.msg-form { text-align: left; margin-top: var(--sp-5); }
.msg-field { margin-bottom: var(--sp-4); }
.msg-field label { display: block; font-weight: 700; font-size: var(--fs-sm); margin-bottom: .4rem; }
.msg-input-wrap { position: relative; display: flex; }
.msg-form input {
  flex: 1;
  width: 100%;
  font-family: var(--font);
  font-size: 1rem;
  color: var(--text);
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .85em 3.25em .85em 1em;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.msg-form input:focus-visible {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--purple) 25%, transparent);
}
.msg-reveal {
  position: absolute;
  right: .35rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.msg-reveal:hover { color: var(--text); background: var(--dim); }
.msg-reveal .ic { width: 1.15rem; height: 1.15rem; }

.msg-rules { list-style: none; padding: 0; margin: 0 0 var(--sp-4); display: flex; flex-direction: column; gap: .35rem; }
.msg-rules li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--fs-sm);
  color: var(--muted);
}
.msg-rules li::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
  transition: background-color .2s var(--ease);
}
.msg-rules li[data-ok="true"] { color: var(--text-2); }
.msg-rules li[data-ok="true"]::before { background: var(--green); }

/* Scoped to .msg-card so it outranks `.msg-card p`, which would otherwise win on
   specificity and render the error in ordinary body colour. */
.msg-card .msg-error {
  color: var(--red);
  font-size: var(--fs-sm);
  font-weight: 700;
  margin: 0 0 var(--sp-3);
}
.msg-form .btn { width: 100%; }

@media (max-width: 480px) {
  .msg-card { padding: 1.75rem 1.25rem; }
}

/* ============================================================
   i18n additions — language switcher, FAQ, footer languages,
   RTL fixes and non-Latin typography
   ============================================================ */

/* ---------- language switcher (nav) ---------- */
.lang-switcher { position: relative; }
.lang-switcher summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  height: 38px;
  padding: 0 .75rem;
  border-radius: 99px;
  border: 1px solid var(--border-2);
  background: var(--card);
  color: var(--text-2);
  font-size: .875rem;
  font-weight: 700;
  white-space: nowrap;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.lang-switcher summary::-webkit-details-marker { display: none; }
.lang-switcher summary:hover { color: var(--text); border-color: var(--ring); }
.lang-switcher summary .ic { width: 17px; height: 17px; flex: none; }
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 60;
  min-width: 200px;
  max-height: min(66vh, 460px);
  overflow-y: auto;
  margin: 0;
  padding: .4rem;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.lang-menu a {
  display: block;
  padding: .45rem .65rem;
  border-radius: var(--r-sm);
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
}
.lang-menu a:hover { background: var(--dim); color: var(--text); }
.lang-menu a[aria-current="true"] {
  color: var(--purple-ink);
  background: color-mix(in srgb, var(--purple) 10%, transparent);
}
@media (max-width: 560px) {
  .lang-cur { display: none; }
  .lang-switcher summary { padding: 0 .55rem; }
}

/* ---------- footer language list ---------- */
.footer-langs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .95rem;
  padding-top: var(--sp-4);
  font-size: .84rem;
}
.footer-langs a,
.footer-langs span {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
}
.footer-langs a:hover { color: var(--text); text-decoration: underline; }
.footer-langs span[aria-current="true"] { color: var(--purple-ink); }

/* ---------- FAQ ---------- */
.faq .section-head { margin-bottom: var(--sp-6); }
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.faq-item {
  background: var(--card);
  border: 1px solid var(--border-2);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 1.05rem 3rem 1.05rem 1.3rem;
  padding-inline-start: 1.3rem;
  padding-inline-end: 3rem;
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  position: absolute;
  top: 50%;
  inset-inline-end: 1.15rem;
  width: 10px;
  height: 10px;
  border-inline-end: 2.5px solid var(--muted);
  border-bottom: 2.5px solid var(--muted);
  transform: translateY(-70%) rotate(45deg);
  transition: transform .2s var(--ease);
}
.faq-item[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq-item > p {
  padding: 0 1.3rem 1.15rem;
  color: var(--text-2);
  line-height: 1.65;
  max-width: 68ch;
}

/* ---------- RTL fixes ---------- */
[dir="rtl"] .ic:has(use[href="#i-arrow"]) { transform: scaleX(-1); }
[dir="rtl"] .hero-slot { direction: rtl; }

/* ---------- non-Latin typography ----------
   negative tracking is designed for Overpass Latin; complex scripts
   and CJK render tighter and cleaner without it */
html[lang="ar"] :is(h1, h2, h3, .hero-pill, .eyebrow, .nav-word, .btn),
html[lang="ur"] :is(h1, h2, h3, .hero-pill, .eyebrow, .nav-word, .btn),
html[lang="fa"] :is(h1, h2, h3, .hero-pill, .eyebrow, .nav-word, .btn),
html[lang="hi"] :is(h1, h2, h3, .hero-pill, .eyebrow, .nav-word, .btn),
html[lang="bn"] :is(h1, h2, h3, .hero-pill, .eyebrow, .nav-word, .btn),
html[lang="th"] :is(h1, h2, h3, .hero-pill, .eyebrow, .nav-word, .btn),
html[lang="ja"] :is(h1, h2, h3, .hero-pill, .eyebrow, .nav-word, .btn),
html[lang="zh-Hans"] :is(h1, h2, h3, .hero-pill, .eyebrow, .nav-word, .btn),
html[lang="ko"] :is(h1, h2, h3, .hero-pill, .eyebrow, .nav-word, .btn) {
  letter-spacing: 0;
}
/* Arabic-script and South/Southeast Asian scripts need taller lines */
html[lang="ar"] body, html[lang="ur"] body, html[lang="fa"] body,
html[lang="hi"] body, html[lang="bn"] body, html[lang="th"] body {
  line-height: 1.75;
}

/* SVG <text> inherits page direction; store badges are fixed-layout artwork */
[dir="rtl"] .store-badge svg { direction: ltr; }
/* IPA notation always reads left-to-right, even inside RTL text */
.ipa { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .hero-ipa { text-align: end; }