/* Amiko website — shared styles for all generated pages.
   Palette matches the Flutter app (primary #8B4513, cream #F5E6D3, ink #3E2723)
   so the site and the app read as one product. */

:root {
  --cream: #FBF7F2;
  --cream-warm: #F5E6D3;
  --surface: #FFFFFF;
  --primary: #8B4513;
  --primary-dark: #6B3410;
  --accent: #CD853F;
  --ink: #3E2723;
  --ink-soft: #5D4037;
  --ink-faint: #8D6E63;
  --line: #E8DCCF;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 3px rgba(62, 39, 35, .06), 0 4px 14px rgba(62, 39, 35, .05);
  --shadow-md: 0 8px 30px rgba(139, 69, 19, .10);
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI',
          'Hiragino Sans', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans TC',
          'Microsoft JhengHei', 'Apple SD Gothic Neo', sans-serif;
  --font-display: 'Outfit', var(--font);
  --wrap: 1120px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--primary-dark); }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; color: var(--ink); }
h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 .6rem; }
h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 700; letter-spacing: -.01em; margin: 2.6rem 0 .5rem; }
h3 { font-size: 1.12rem; font-weight: 700; margin: 1.6rem 0 .35rem; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.2rem; }

.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: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--primary); color: #fff; padding: .6rem 1rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

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

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* ------------------------------------------------------------------ header */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 247, 242, .88);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 1rem; height: 62px; }

.brand {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
  color: var(--ink); text-decoration: none;
}
.brand img { border-radius: 9px; }


.site-nav { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.site-nav > a, .nav-drop > summary {
  display: inline-block; padding: .45rem .7rem; border-radius: 999px;
  font-size: .95rem; font-weight: 600; color: var(--ink-soft);
  text-decoration: none; cursor: pointer; list-style: none;
}
.site-nav > a:hover, .nav-drop > summary:hover { background: var(--cream-warm); color: var(--ink); }
.nav-cta {
  background: var(--primary); color: #fff !important;
}
.nav-cta:hover { background: var(--primary-dark); }

.nav-drop, .locale-switch { position: relative; }
.nav-drop summary::-webkit-details-marker,
.locale-switch summary::-webkit-details-marker { display: none; }

.nav-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  min-width: 190px; padding: .4rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
}
.nav-panel-right { left: auto; right: 0; }
.nav-panel a {
  padding: .5rem .65rem; border-radius: 8px; font-size: .95rem;
  color: var(--ink-soft); text-decoration: none;
}
.nav-panel a:hover { background: var(--cream-warm); color: var(--ink); }
.nav-panel a[aria-current] { color: var(--primary); font-weight: 700; }
.nav-more { border-top: 1px solid var(--line); margin-top: .25rem; padding-top: .55rem !important; }

.locale-switch > summary {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 999px;
  font-size: .85rem; font-weight: 700; color: var(--ink-soft);
  cursor: pointer; list-style: none;
}
.chev { width: 0; height: 0; border: 4px solid transparent; border-top-color: var(--ink-faint); margin-top: 3px; }

/* ------------------------------------------------------------- components */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .7rem 1.15rem; border-radius: 999px; border: 1px solid transparent;
  font-family: var(--font); font-size: 1rem; font-weight: 700;
  text-decoration: none; cursor: pointer; transition: transform .12s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); color: #fff; }
.btn-ghost { background: var(--surface); border-color: var(--line); color: var(--primary); }
.btn-lg { padding: .9rem 1.6rem; font-size: 1.05rem; }

.kicker {
  font-size: .82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 .5rem;
}
.lede { font-size: 1.12rem; color: var(--ink-soft); max-width: 62ch; }
.sub { color: var(--ink-soft); max-width: 68ch; margin-top: -.1rem; }
.hint {
  display: inline-block; background: var(--cream-warm); color: var(--ink-soft);
  padding: .5rem .8rem; border-radius: var(--radius-sm); font-size: .92rem;
}
.note {
  border-left: 3px solid var(--accent); background: var(--cream-warm);
  padding: .8rem 1rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--ink-soft);
}
.stat { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: var(--primary); }

.page-head { padding: 2.2rem 20px 1.2rem; }
.band {
  background: var(--cream-warm); border-radius: var(--radius);
  padding: 1.6rem 1.6rem 2rem; margin: 2.4rem auto;
  max-width: var(--wrap);
}
.band > h2:first-child { margin-top: .4rem; }

.crumbs { padding: 1rem 0 0; font-size: .88rem; color: var(--ink-faint); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; }
.crumbs li + li::before { content: '/'; margin-right: .4rem; color: var(--line); }
.crumbs a { color: var(--ink-faint); }

/* ------------------------------------------------------------------- hero */

.hero { padding: 2rem 0 1rem; }
.hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.5rem; align-items: center; }
.hero h1 em { font-style: normal; color: var(--primary); display: block; }
.hero-cta { margin: 1.4rem 0 .4rem; }

/* --- the three-line headline, staggered in ------------------------------- */

.hero-h1 { margin-bottom: .9rem; }
/* The home headline is two full sentences rather than a phrase, so it needs a
   smaller ceiling than a normal H1 — at 3.1rem the first sentence broke after
   "Stop studying a", orphaning "language." on its own line. `text-wrap: balance`
   evens out the remaining breaks where the browser supports it. */
.hero-home .hero-h1 { font-size: clamp(1.75rem, 3.3vw, 2.5rem); text-wrap: balance; }
.hero-h1 .hl {
  display: block;
  opacity: 0;
  animation: heroLine .7s cubic-bezier(.2, .8, .2, 1) forwards;
}
.hero-h1 .hl-1 { color: var(--ink); animation-delay: .05s; }
.hero-h1 .hl-2 { color: var(--primary); animation-delay: .25s; }
.hero-h1 .hl-3 { color: var(--accent); animation-delay: .45s; }


@keyframes heroLine {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- support + chat = progress ------------------------------------------ */

.hero-eq {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 600;
  color: var(--ink-soft); line-height: 1.45; margin-bottom: .9rem;
}
/* The equals sign must never strand at the end of a line, away from its result. */
.hero-eq .eq-sym.d4, .hero-eq .eq-res { display: inline; }
.hero-eq .eq-tail { display: inline-flex; align-items: center; gap: .5rem; }
.hero-eq .eq-part { opacity: 0; animation: eqPart .6s cubic-bezier(.2, .8, .2, 1) forwards; }
.hero-eq .eq-sym {
  color: var(--accent); font-weight: 800; font-size: 1.15em;
  opacity: 0; animation: eqPop .45s cubic-bezier(.175, .885, .32, 1.275) forwards;
}
.hero-eq .eq-res {
  font-weight: 800; font-size: 1.1em;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; animation: eqGlow .8s cubic-bezier(.2, .8, .2, 1) forwards;
}
.hero-eq .d1 { animation-delay: .75s; }
.hero-eq .d2 { animation-delay: 1.15s; }
.hero-eq .d3 { animation-delay: 1.4s; }
.hero-eq .d4 { animation-delay: 1.8s; }
.hero-eq .d5 { animation-delay: 2.05s; }

@keyframes eqPart { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes eqPop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
@keyframes eqGlow {
  from { opacity: 0; transform: translateY(8px) scale(.97); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

.hero-sub {
  font-size: 1.14rem; line-height: 1.6; color: var(--ink-soft); max-width: 52ch;
  margin-top: 1rem;
  opacity: 0; animation: heroLine .8s ease-out .7s forwards;
}
/* The keyword clause leads the paragraph in the ink colour — prominent without
   being a separate block of text. */
.hero-sub strong { color: var(--ink); font-weight: 700; }
.manifesto-sub span { display: block; }

/* --- the brand statement, as its own section --------------------------- */

.manifesto {
  background: linear-gradient(160deg, var(--cream-warm), #F1DFCB);
  border-block: 1px solid var(--line);
  margin: 3rem 0;
  padding: 3.2rem 0 3.4rem;
}
.manifesto-inner { text-align: center; }
.manifesto .kicker { margin-bottom: 1rem; }

.manifesto-h {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(1.7rem, 4vw, 2.9rem); line-height: 1.18;
  margin: 0 0 1.2rem;
}
.manifesto-h .hl { display: block; }
.manifesto-h .hl-1 { color: var(--ink); }
.manifesto-h .hl-2 { color: var(--primary); }
.manifesto-h .hl-3 { color: var(--accent); }

.manifesto-eq { justify-content: center; font-size: 1.08rem; margin-bottom: 1.3rem; }

.manifesto-sub { font-size: 1.08rem; color: var(--ink-soft); margin: 0; }
.manifesto-sub span { display: block; }

/* Reveal on scroll rather than on load — the section is well below the fold,
   so animating it at load means nobody ever sees it happen. Gated on `.js` so
   that without JavaScript everything is simply visible. */
html.js .manifesto .hl,
html.js .manifesto .eq-part,
html.js .manifesto .eq-sym,
html.js .manifesto .eq-res,
html.js .manifesto-sub { opacity: 0; animation: none; }

html.js .manifesto.in .hl {
  animation: heroLine .7s cubic-bezier(.2, .8, .2, 1) forwards;
}
html.js .manifesto.in .hl-1 { animation-delay: .05s; }
html.js .manifesto.in .hl-2 { animation-delay: .25s; }
html.js .manifesto.in .hl-3 { animation-delay: .45s; }
html.js .manifesto.in .eq-part { animation: eqPart .6s cubic-bezier(.2, .8, .2, 1) forwards; }
html.js .manifesto.in .eq-sym { animation: eqPop .45s cubic-bezier(.175, .885, .32, 1.275) forwards; }
html.js .manifesto.in .eq-res { animation: eqGlow .8s cubic-bezier(.2, .8, .2, 1) forwards; }
html.js .manifesto.in .manifesto-sub { animation: heroLine .8s ease-out 2.5s forwards; }

.hero-langs { font-size: .88rem; margin: 1rem 0 1.2rem; }
.hero-langs-label {
  display: block; color: var(--ink-faint); margin-bottom: .45rem;
  font-weight: 600;
}
/* Sixteen chips: smaller and tighter than the general chip so the set stays
   three rows rather than filling the hero. */
.hero-langs-list { display: flex; flex-wrap: wrap; gap: .3rem; }
.hero-langs a {
  padding: .16rem .55rem; border-radius: 999px; font-size: .83rem;
  border: 1px solid var(--line); background: var(--surface);
  text-decoration: none; color: var(--ink-soft); font-weight: 600;
  white-space: nowrap;
}
.hero-langs a:hover { border-color: var(--accent); color: var(--primary); }
.cta-note { font-size: .9rem; color: var(--ink-faint); }
.hero-shot { display: flex; justify-content: center; }
/* Only a bare hero image gets this treatment. The phone supplies its own frame
   and crop, so it must not be caught by a descendant selector here — an earlier
   `.hero-lang .hero-shot img` rule was forcing 3:4 and a 12%-from-top crop onto
   the phone's artwork, which is why the landing pages sat off-centre. */
.hero-shot > img { border-radius: 22px; box-shadow: var(--shadow-md); }
.proof {
  text-align: center; color: var(--ink-faint); font-size: .92rem;
  border-top: 1px solid var(--line); margin: 2rem auto 0; padding-top: 1rem;
  max-width: var(--wrap);
}

/* A miniature of the app's chat screen, cycling through characters and
   languages. Each slide is real starter copy from the app, so the animation is
   also the clearest explanation of what the product does. */
.phone {
  position: relative; width: 330px; aspect-ratio: 10 / 17;
  border-radius: 30px; overflow: hidden; background: #2b1d18;
  box-shadow: var(--shadow-md); border: 7px solid #201410;
}
.phone-slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .8s ease;
}
.phone-slide.on { opacity: 1; visibility: visible; }
.phone-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  display: flex; align-items: center; gap: .45rem; padding: .75rem .85rem;
  background: linear-gradient(to bottom, rgba(0,0,0,.55), transparent);
  color: #fff; font-size: .95rem;
}
.phone-name {
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
  margin-right: auto; text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}
.pill {
  border: 1px solid rgba(255,255,255,.5); border-radius: 999px;
  padding: .12rem .6rem; font-size: .82rem; font-weight: 600; text-transform: capitalize;
}
.pill-lang { background: rgba(205,133,63,.85); border-color: transparent; }
.phone-msgs {
  /* Clear of the "Chat with …" label, which sits at the foot of the frame. */
  position: absolute; bottom: 4.6rem; left: 0; right: 0; z-index: 2;
  display: flex; flex-direction: column; gap: .5rem; padding: 0 .7rem;
}
/* The bubble arrives just after its slide fades in, the way a reply lands. */
.phone-slide.on .bub { animation: bubIn .55s cubic-bezier(.2, .8, .2, 1) .25s backwards; }
@keyframes bubIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Indicators live under the phone, where they can be pressed without covering
   the conversation they are indicating. */
.hero-phone { display: flex; flex-direction: column; align-items: center; gap: .7rem; }
.phone-dots { display: flex; justify-content: center; gap: 6px; }
.phone-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--line); transition: background .3s ease, width .3s ease;
}
.phone-dots button:hover { background: var(--accent); }
.phone-dots button.on { background: var(--primary); width: 22px; border-radius: 4px; }
.bub { border-radius: 12px; padding: .45rem .6rem; font-size: .8rem; line-height: 1.35; }
.bub-bot { background: rgba(26,18,15,.72); color: #fff; margin-right: 2rem; }
.bub-me { background: rgba(226,214,203,.85); color: #2b1d18; margin-left: 2rem; }
.bub-t { margin: 0; font-weight: 600; }
.bub-x { margin: .15rem 0 0; font-style: italic; opacity: .85; font-size: .74rem; }
.play { font-size: .6rem; opacity: .8; }
/* ------------------------------------------------------------------ tiles */

.tiles { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .7rem;
         grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
.tiles-lang { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.tiles-level { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.tile {
  display: flex; flex-direction: column; gap: .2rem; height: 100%;
  padding: .95rem 1rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-sm); transition: transform .12s ease, border-color .15s ease;
}
.tile:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--ink); }
.tile-emoji { font-size: 1.5rem; line-height: 1; }
.tile-name { font-weight: 700; font-family: var(--font-display); }
.tile-native, .tile-meta { font-size: .86rem; color: var(--ink-faint); }
.tile-badge {
  margin-top: .35rem; align-self: flex-start; font-size: .72rem; font-weight: 700;
  background: var(--cream-warm); color: var(--primary);
  padding: .1rem .5rem; border-radius: 999px;
}
.tile-wide { flex-direction: column; }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 1rem 0; }
.chip {
  display: inline-block; padding: .35rem .8rem; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: .9rem; font-weight: 600; color: var(--ink-soft); text-decoration: none;
}
.chip:hover { border-color: var(--accent); color: var(--primary); }
.chip-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip-more { background: var(--cream-warm); }

.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); margin-top: 1rem; }
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem; box-shadow: var(--shadow-sm);
}
.card h3 { margin-top: 0; }
.card h3 a { text-decoration: none; }
.card p { color: var(--ink-soft); font-size: .96rem; margin-bottom: .6rem; }
.card-go { font-size: .9rem; font-weight: 700; text-decoration: none; }

.link-list { list-style: none; padding: 0; }
.link-list li { padding: .5rem 0; border-bottom: 1px solid var(--line); }

.steps { list-style: none; padding: 0; display: grid; gap: 1.2rem;
         grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 1rem; }
.steps li { position: relative; padding-top: 2.4rem; }
.step-n {
  position: absolute; top: 0; left: 0;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-family: var(--font-display);
}
.steps h3 { margin-top: 0; }
.steps p { color: var(--ink-soft); font-size: .97rem; }

.level-list { list-style: none; padding: 0; display: grid; gap: .8rem; margin-top: 1rem; }
.level-list li { display: flex; gap: 1rem; align-items: flex-start; }
.level-code {
  flex: 0 0 46px; text-align: center; font-family: var(--font-display); font-weight: 800;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .35rem 0; color: var(--primary);
}
.level-list h3 { margin: 0; font-size: 1rem; }
.level-list p { margin: .1rem 0 0; color: var(--ink-soft); font-size: .95rem; }

/* -------------------------------------------------------------- scenarios */

/* A full-width segmented control, not two small chips. */
.cast-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: .3rem;
  background: var(--cream-warm); border-radius: 999px; padding: .3rem;
  margin: 1.1rem 0 1.2rem;
}
.cast-tab {
  font: inherit; font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  cursor: pointer; padding: .6rem 1rem; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-soft);
}
.cast-tab:hover { color: var(--ink); }
.cast-tab.on { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }

.scene-grid { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scene {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .14s ease;
}
.scene:hover { transform: translateY(-3px); }
.scene a { text-decoration: none; color: inherit; display: block; }
.scene-media { position: relative; }
.scene-media img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center center; width: 100%; }

/* The opening line over the character, as in the app. */
.scene-bubble {
  position: absolute; left: .5rem; right: .5rem; bottom: .5rem;
  background: rgba(24, 16, 13, .74); backdrop-filter: blur(3px);
  border-radius: 12px; padding: .5rem .6rem; color: #fff;
}
.scene-bubble .play { background: rgba(255, 255, 255, .22); }
.scene-line { margin: 0; font-size: .92rem; font-weight: 600; line-height: 1.4; }
.scene-trans { margin: .2rem 0 0; font-size: .8rem; font-style: italic; opacity: .85; }

.scene-body { padding: .8rem .9rem 1rem; }
.scene-body h3 { margin: 0; font-size: 1rem; }
.scene-sub { margin: .15rem 0 .5rem; color: var(--accent); font-size: .85rem; font-weight: 600; }
.scene-cast { margin: 0 0 .35rem; font-size: .8rem; color: var(--ink-faint); }
.scene-go { font-size: .85rem; font-weight: 700; color: var(--primary); }

@media (max-width: 1000px) { .scene-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .scene-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ vocabulary */

.vlist { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: .7rem; }
.vrow {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .95rem 1.1rem; box-shadow: var(--shadow-sm);
}
.vhead { display: flex; align-items: baseline; flex-wrap: wrap; gap: .55rem; }
.vword { font-size: 1.3rem; font-weight: 700; font-family: var(--font-display); }
.vread { color: var(--ink-faint); font-size: .95rem; }
.vrom { color: var(--accent); font-size: .88rem; font-style: italic; }
.vmean { color: var(--ink-soft); margin-top: .1rem; }
.vvar { margin-top: .4rem; font-size: .92rem; color: var(--ink-soft); }
.vtag {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--cream-warm); color: var(--primary);
  padding: .1rem .45rem; border-radius: 999px; margin-right: .4rem;
}
.vex { margin-top: .65rem; padding-top: .6rem; border-top: 1px dashed var(--line); }
.vex-t { margin: 0; font-weight: 600; }
.vex-r { margin: .1rem 0 0; color: var(--ink-faint); font-size: .88rem; }
.vex-x { margin: .2rem 0 0; color: var(--ink-soft); font-style: italic; font-size: .95rem; }

.pager { display: flex; justify-content: space-between; gap: 1rem; margin: 2rem auto; }
.pager a {
  display: flex; flex-direction: column; gap: .1rem; max-width: 46%;
  padding: .8rem 1rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none;
}
.pager a span { font-size: .8rem; color: var(--ink-faint); }
.pager-next { text-align: right; margin-left: auto; }

/* ----------------------------------------------------------------- charts */

.chart-section { margin-bottom: 2rem; }
.chart-scroll { overflow-x: auto; max-width: 100%; margin: .8rem 0 1.6rem; -webkit-overflow-scrolling: touch; }
.chart { border-collapse: separate; border-spacing: 6px; min-width: 100%; }
.chart th { font-size: .78rem; font-weight: 700; color: var(--ink-faint); padding: 0 0 .2rem; }
.chart .rowlab { width: 2.2rem; color: var(--primary); font-size: .9rem; }
.chart td { padding: 0; }
.chart td.empty { background: transparent; }

.cell {
  width: 100%; min-width: 62px; display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .55rem .3rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); cursor: pointer; font-family: var(--font);
  transition: transform .1s ease, background .15s ease, border-color .15s ease;
}
.cell:hover { border-color: var(--accent); background: var(--cream-warm); }
.cell.playing { background: var(--primary); border-color: var(--primary); transform: scale(1.06); }
.cell.playing .cell-glyph, .cell.playing .cell-rom { color: #fff; }
.cell-glyph { font-size: 1.5rem; line-height: 1.1; font-weight: 600; }
.cell-rom { font-size: .72rem; color: var(--ink-faint); }

.letter-grid { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); margin: .8rem 0 1rem; }
.letter-names { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem;
                font-size: .85rem; color: var(--ink-faint); margin-bottom: 1.4rem; }

.traps { margin: 1rem 0; }
.traps dt { font-size: 1.3rem; font-weight: 700; margin-top: 1rem; }
.traps dd { margin: .2rem 0 0; color: var(--ink-soft); }

/* ---------------------------------------------------------------- grammar */

.swap-frame { margin: 2rem 0; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.swap-noun { font-size: 1.7rem; margin: 0 0 .6rem; }
.swap-noun small { font-size: .85rem; color: var(--ink-faint); font-weight: 400; margin-left: .5rem; }
.swap-list { list-style: none; padding: 0; display: grid; gap: .6rem; }
.swap-list li {
  display: flex; gap: .9rem; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .8rem 1rem;
}
.swap-particle {
  flex: 0 0 2.4rem; text-align: center; font-size: 1.4rem; font-weight: 700;
  color: var(--primary); background: var(--cream-warm); border-radius: var(--radius-sm);
  padding: .1rem 0;
}
.swap-sentence { margin: 0; font-size: 1.08rem; font-weight: 600; }
.swap-reading { margin: .1rem 0 0; font-size: .85rem; color: var(--ink-faint); }
.swap-trans { margin: .25rem 0 0; color: var(--ink-soft); }
.swap-fn { margin: .15rem 0 0; font-size: .85rem; color: var(--accent); font-weight: 600; }

.data-table { border-collapse: collapse; width: 100%; min-width: 460px; }
.data-table th, .data-table td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--line); }
.data-table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.data-table tbody tr:hover { background: var(--surface); }
.note-row td { font-size: .88rem; color: var(--ink-soft); background: var(--cream-warm); }

.mw-list { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-top: 1rem; }
.mw-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.mw-card h3 { margin: 0 0 .3rem; display: flex; align-items: baseline; gap: .5rem; }
.mw-glyph { font-size: 1.8rem; }
.mw-pinyin { font-size: .9rem; color: var(--accent); font-style: italic; }
.mw-for { margin: 0 0 .5rem; color: var(--ink-soft); font-size: .95rem; }
.mw-ex { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; font-size: .93rem; }
.mw-ex li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.mw-gloss { color: var(--ink-faint); }

/* -------------------------------------------------------------------- faq */

.faq { max-width: var(--wrap); margin: 2.6rem auto; padding: 0 20px; }
.faq-list { display: grid; gap: .5rem; margin-top: 1rem; }
.faq-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: .3rem 1.1rem;
}
.faq-item summary { cursor: pointer; list-style: none; padding: .7rem 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { display: inline; margin: 0; font-size: 1.02rem; }
.faq-item summary::after { content: '+'; float: right; color: var(--accent); font-weight: 700; }
.faq-item[open] summary::after { content: '–'; }
.faq-answer { padding-bottom: .5rem; color: var(--ink-soft); }
.faq-answer p { margin: 0; }

/* ------------------------------------------------------------------- prose */

.prose { max-width: 74ch; }
.prose h2 { margin-top: 2.4rem; }
.prose p, .prose li { color: var(--ink-soft); }
.prose strong { color: var(--ink); }
.prose ul { margin-bottom: 1.4rem; }

.post-head { padding: 2rem 20px 1rem; max-width: 74ch; margin: 0 auto; }
.post-head h1 { font-size: clamp(1.8rem, 3.8vw, 2.7rem); }
.post-meta { font-size: .88rem; color: var(--ink-faint); }
.toc {
  max-width: 74ch; background: var(--cream-warm); border-radius: var(--radius);
  padding: 1rem 1.3rem; margin-bottom: 1.6rem;
}
.toc h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .4rem; color: var(--ink-faint); }
.toc ol { margin: 0; font-size: .95rem; }
.toc a { color: var(--ink-soft); }

.post-list { list-style: none; padding: 0; display: grid; gap: 1.6rem; }
.post-list li { border-bottom: 1px solid var(--line); padding-bottom: 1.4rem; }
.post-list h2 { margin: 0 0 .2rem; font-size: 1.35rem; }
.post-list h2 a { text-decoration: none; }
.post-list p { color: var(--ink-soft); }

/* -------------------------------------------------------------------- cta */

.cta-band {
  max-width: var(--wrap); margin: 3rem auto; padding: 2.2rem 1.5rem;
  background: linear-gradient(140deg, var(--cream-warm), #F0E0CE);
  border-radius: 22px; text-align: center;
}
.cta-band h2 { margin-top: 0; }
.cta-band p { color: var(--ink-soft); max-width: 58ch; margin-inline: auto; }
/* Both vendors supply badges at different aspect ratios; normalising on height
   is the only way to make them sit level. Google's PNG has built-in padding,
   so it needs a little more height to look the same size as Apple's. */
.store-row { display: flex; gap: .5rem; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
.store-row-sm { justify-content: flex-start; }
.store-link { display: inline-block; }
.store-row img { width: auto; }
.store-row .store-link:first-child img { height: 44px; }
.store-row .store-link:last-child img { height: 64px; }
.store-row-sm .store-link:first-child img { height: 50px; }
.store-row-sm .store-link:last-child img { height: 73px; }

/* Google's badge bakes a transparent border into the PNG itself — the artwork
   sits 41px inside a 646x250 file — while Apple's fills its frame. Left
   untouched, the Google badge looks indented when the two stack, and the gap
   between them looks wider than it is. Pull it back by that border: 41/250 of
   whatever height is set above (73px -> 12px, 64px -> 10px). Recompute these
   if the heights change. */
.store-row .store-link:last-child img { margin-inline: -10px; }
.store-row-sm .store-link:last-child img { margin-inline: -12px; }

/* Social profiles, under the store badges. Same list as the Organization's
   sameAs, so the page states in HTML what the schema states in JSON-LD. */
.socials { margin-top: 1.2rem; }
.socials h3 { margin: 0 0 .5rem; }
.socials ul {
  display: flex; flex-wrap: wrap; gap: .4rem .5rem;
  list-style: none; margin: 0; padding: 0;
}
.socials a {
  display: inline-flex; align-items: center; gap: .38rem;
  padding: .3rem .6rem .3rem .45rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: .82rem; font-weight: 600; color: var(--ink-soft); text-decoration: none;
}
.socials a:hover { color: var(--primary); border-color: var(--primary); }
.socials svg { flex: none; fill: currentColor; }

/* ----------------------------------------------------------------- footer */

.site-footer { border-top: 1px solid var(--line); background: var(--cream-warm); margin-top: 3rem; padding: 2.4rem 0 1.2rem; }
.footer-grid { display: grid; gap: 1.8rem; grid-template-columns: 1.6fr 1fr 1fr 1fr; }
.footer-about p { color: var(--ink-soft); font-size: .93rem; margin-top: .6rem; }
.site-footer h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin: 0 0 .5rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .35rem; }
.site-footer a { color: var(--ink-soft); text-decoration: none; font-size: .93rem; }
.site-footer a:hover { color: var(--primary); text-decoration: underline; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line); margin-top: 1.8rem; padding-top: 1rem;
  font-size: .85rem; color: var(--ink-faint);
}
.footer-bottom p { margin: 0; }
.footer-locales { display: flex; flex-wrap: wrap; gap: .5rem .8rem; }
.footer-locales [aria-current] { color: var(--primary); font-weight: 700; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  /* Headline first on narrow screens — the phone is the hook, but pushing the
     H1 below the fold to show it is a bad trade. */
  .hero-shot { margin-top: .5rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  .site-nav .nav-drop, .site-nav > a:not(.nav-cta) { display: none; }
  .band { border-radius: 0; margin-inline: 0; }
  .pager { flex-direction: column; }
  .pager a { max-width: none; }
  .pager-next { text-align: left; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  /* Killing the animations must not leave the staggered copy invisible. */
  .hero-h1 .hl, .hero-eq .eq-part, .hero-eq .eq-sym, .hero-eq .eq-res, .hero-sub,
  html.js .manifesto .hl, html.js .manifesto .eq-part, html.js .manifesto .eq-sym,
  html.js .manifesto .eq-res, html.js .manifesto-sub {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
}

/* ------------------------------------------------- "learn by chatting" demos
   Three feature cards, each with a working demo rather than a screenshot. */

.demo { margin-top: 3rem; }
.demo-grid {
  display: grid; gap: 1.1rem; margin-top: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}
.demo-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.3rem 1.3rem 1rem;
  box-shadow: var(--shadow-sm);
}
.demo-icon { font-size: 1.7rem; line-height: 1; margin-bottom: .5rem; }
.demo-card h3 { margin: 0 0 .3rem; font-size: 1.12rem; }
.demo-card > p { color: var(--ink-soft); font-size: .95rem; margin-bottom: 1rem; }

.demo-stage {
  margin-top: auto; background: var(--cream-warm);
  border-radius: var(--radius-sm); padding: .9rem 1rem;
}
.demo-sentence { margin: 0; font-size: 1.08rem; font-weight: 600; line-height: 1.7; }
.demo-reading { margin: .15rem 0 0; font-size: .82rem; color: var(--ink-faint); font-style: italic; }
.demo-translation { margin: .3rem 0 0; font-size: .92rem; color: var(--ink-soft); font-style: italic; }
.demo-hint {
  display: block; margin-top: .6rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--accent);
}

/* --- tap to translate --- */

.tapw {
  font: inherit; color: inherit; cursor: pointer;
  background: transparent; border: 0; border-bottom: 2px dashed var(--accent);
  padding: 0 .05rem; border-radius: 3px;
}
.tapw:hover { background: rgba(205, 133, 63, .22); }
.tapw.on { background: var(--primary); color: #fff; border-bottom-color: transparent; }
.tapp { padding: 0; }
.tap-out {
  margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed var(--line);
  min-height: 3.1rem; font-size: .92rem;
}
.tap-empty { color: var(--ink-faint); }
.tap-word { font-weight: 700; font-size: 1.05rem; }
.tap-read { color: var(--accent); font-style: italic; margin-left: .4rem; font-size: .85rem; }
.tap-gloss { display: block; color: var(--ink-soft); margin-top: .15rem; }

/* --- realistic voice --- */

.demo-stage-voice { display: flex; flex-direction: column; align-items: flex-start; }
.play-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--primary); color: #fff; border: 0; cursor: pointer;
  border-radius: 999px; padding: .45rem 1rem .45rem .8rem; margin-bottom: .7rem;
}
.play-btn:hover { background: var(--primary-dark); }
.play-ico { font-size: .8rem; }
.play-wave { display: inline-flex; align-items: center; gap: 2px; height: 18px; }
.play-wave i { width: 3px; height: 5px; border-radius: 2px; background: rgba(255, 255, 255, .75); }
.play-btn.playing .play-wave i { animation: wave .9s ease-in-out infinite; }
.play-btn.playing .play-wave i:nth-child(2) { animation-delay: .1s; }
.play-btn.playing .play-wave i:nth-child(3) { animation-delay: .2s; }
.play-btn.playing .play-wave i:nth-child(4) { animation-delay: .3s; }
.play-btn.playing .play-wave i:nth-child(5) { animation-delay: .15s; }
.play-btn.playing .play-wave i:nth-child(6) { animation-delay: .25s; }
.play-btn.playing .play-wave i:nth-child(7) { animation-delay: .05s; }
@keyframes wave { 0%, 100% { height: 5px; } 50% { height: 16px; } }

/* --- context matters --- */

.ctx-tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .8rem; }
.ctx-tab {
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: .22rem .6rem;
}
.ctx-tab:hover { border-color: var(--accent); }
.ctx-tab.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.ctx-panel { display: none; }
.ctx-panel.on { display: block; animation: ctxIn .35s ease-out; }
@keyframes ctxIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.ctx-who { margin: 0 0 .25rem; font-size: .78rem; font-weight: 700; color: var(--accent);
           text-transform: uppercase; letter-spacing: .05em; }

/* ------------------------------------------------- study tools, by language */

.lang-bar-wrap {
  position: sticky; top: 62px; z-index: 20;
  background: rgba(251, 247, 242, .92); backdrop-filter: saturate(160%) blur(10px);
  border-block: 1px solid var(--line); margin-bottom: 1.4rem;
}
.lang-bar {
  display: flex; gap: .35rem; overflow-x: auto; padding-block: .6rem;
  scrollbar-width: none;
}
.lang-bar::-webkit-scrollbar { display: none; }
.lang-pill {
  flex: none; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: .3rem .8rem;
  white-space: nowrap;
}
.lang-pill:hover { border-color: var(--accent); color: var(--primary); }
.lang-pill.on { background: var(--primary); border-color: var(--primary); color: #fff; }

.lang-block { padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); margin-bottom: 1.6rem; }
.lang-block:last-child { border-bottom: 0; }
.lang-block-h {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  margin: 1.4rem 0 .2rem; font-size: clamp(1.3rem, 2.4vw, 1.7rem);
}
.lang-block-go { font-family: var(--font); font-size: .85rem; font-weight: 700; text-decoration: none; }
.res-h {
  font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); margin: 1.1rem 0 .1rem;
}
.res-sub { color: var(--ink-soft); font-size: .93rem; margin: .2rem 0 .2rem; }

/* Even tiles inside a language block, whatever the label length. */
.lang-block .tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 190px)); }
.lang-block .tile { min-height: 96px; }

/* Writing system and grammar share a row so their headings line up. */
.res-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
@media (max-width: 720px) { .res-row { grid-template-columns: 1fr; } }

.lvl-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 1rem; }
.lvl-tabs .chip { cursor: pointer; font-family: var(--font); }

/* Components below set display:grid/flex, which would otherwise beat the
   `hidden` attribute used to toggle level panels and the lock dialog. */
[hidden] { display: none !important; }

/* The one lesson card, shared by level pages, landing pages and the demo. */
.lesson-grid {
  list-style: none; padding: 0; margin: .6rem 0 1.4rem;
  display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.lesson-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
  min-height: 150px; height: 100%;
  padding: .85rem .95rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm);
  transition: border-color .14s ease, transform .12s ease;
}
.lesson-card:hover { border-color: var(--accent); transform: translateY(-2px); color: var(--ink); }
.lesson-card.locked { background: var(--cream-warm); border-style: dashed; }
.lesson-head { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.lesson-no {
  font-size: .7rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--primary);
}
.lesson-card.locked .lesson-no { color: var(--ink-faint); }
.lesson-free {
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: #DFF0DB; color: #2F5D2A; border-radius: 999px; padding: .05rem .45rem;
}
.lesson-lock { font-size: .8rem; opacity: .55; }
.lesson-emoji { font-size: 1.7rem; line-height: 1.5; }
.lesson-name { font-weight: 700; font-size: .96rem; line-height: 1.3; }
.lesson-count { margin-top: auto; font-size: .8rem; color: var(--ink-faint); }
/* Every list on the site is free; this is a footnote about the app, not a gate.
   The .locked rules below still serve the in-browser demo, where lessons 3+
   really are app-only. */
.lesson-inapp { font-size: .68rem; color: var(--ink-faint); opacity: .8; }

.lock-modal {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; padding: 1.5rem;
  background: rgba(30, 20, 16, .55); backdrop-filter: blur(3px);
}
.lock-card {
  position: relative; max-width: 440px; text-align: center;
  background: var(--surface); border-radius: 20px; padding: 2rem 1.8rem 1.6rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
.lock-card img { margin: 0 auto 1rem; border-radius: 14px; }
.lock-card h2 { margin: 0 0 .5rem; font-size: 1.3rem; }
.lock-card p { color: var(--ink-soft); margin-bottom: 1.2rem; }
.lock-x {
  position: absolute; top: .6rem; right: .8rem;
  background: none; border: 0; font-size: 1rem; cursor: pointer; color: var(--ink-faint);
}

/* "Try the chat" stays reachable on phones even though the rest of the nav
   collapses — it is the whole point of the site. */
.nav-try {
  display: inline-block; padding: .45rem .7rem; border-radius: 999px;
  font-size: .95rem; font-weight: 600; color: var(--ink-soft); text-decoration: none;
}
.nav-try:hover { background: var(--cream-warm); color: var(--ink); }
@media (max-width: 700px) {
  .site-nav > .nav-try { display: inline-block; padding-inline: .4rem; }
  .site-nav { gap: .1rem; }

  /* On a phone the landing hero led with a 550px-tall character image, which
     pushed the h1 — the thing the visitor searched for — below the fold. Put
     the words first and the picture after. */
  /* A table wider than the phone belongs to its own scroller, never to the
     page. Anything that forgets its wrapper is caught here. */
  .prose table, .data-table { display: block; overflow-x: auto; max-width: 100%; }
}

/* All 15 learnable languages fit as two columns rather than a long scroll. */
.nav-panel-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 .2rem;
  min-width: 340px;
}
.nav-panel-cols a { white-space: nowrap; }

/* The hero phone matches the demo at /app: no dim over the character, and the
   top bar keeps only enough gradient to hold the name legible. */
.phone-demo .phone-bg { object-position: center center; }
.phone-demo .phone-top { background: linear-gradient(to bottom, rgba(0,0,0,.5), transparent 90%); }

/* The phone is a link into the demo; the label appears on hover or focus so it
   does not sit permanently over the conversation. */
.phone-link { position: absolute; inset: 0; z-index: 6; display: block; }
.phone-cta {
  position: absolute; left: 50%; bottom: 1.5rem; transform: translate(-50%, 6px);
  background: var(--primary); color: #fff; font-size: .82rem; font-weight: 700;
  padding: .3rem .85rem; border-radius: 999px; white-space: nowrap;
  opacity: 0; transition: opacity .18s ease, transform .18s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.phone-link:hover .phone-cta,
.phone-link:focus-visible .phone-cta { opacity: 1; transform: translate(-50%, 0); }
.phone-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 24px; }

/* ---------------------------------------------- taller hero + bigger bubbles */

/* The first screen fills the browser so the phone has room to be a real
   phone rather than a thumbnail. */
.hero-home { min-height: calc(100vh - 62px); display: flex; flex-direction: column; justify-content: center; }
.hero-home .phone { width: 360px; }
.hero-lang .hero-inner-flip .hero-shot { order: -1; }
.hero-lang .phone { width: 330px; }

/* Speech bubbles read at conversation size, not caption size. */
.bub { border-radius: 16px; padding: .7rem .85rem; line-height: 1.45; }
.bub-t { font-size: 1.2rem; font-weight: 600; line-height: 1.4; }
/* The translation was white at 85% and read as a shadow of the line above it;
   near-full white plus a size bump makes it a second readable line. */
.bub-x { margin: .35rem 0 0; font-size: 1rem; color: rgba(255, 255, 255, .93); opacity: 1; }

/* The play control matches the app's: a filled circle, not a bare glyph. */
.play {
  float: left; margin: .12rem .45rem .1rem 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  display: grid; place-items: center;
  font-size: .6rem; color: #fff; opacity: 1;
}

@media (max-width: 900px) {
  .hero-home { min-height: 0; }
  .hero-home .phone, .hero-lang .phone { width: min(330px, 92vw); }
  .hero-lang .hero-inner-flip .hero-shot { order: 0; }
}

/* On a phone the landing hero opened with a 550px-tall character image, which
   pushed the h1 — the phrase the visitor actually searched for — below the
   fold. Words first, picture second. Needs the same three-class specificity as
   the flip rule above, or it loses. */
@media (max-width: 700px) {
  .hero-lang .hero-inner-flip { display: flex; flex-direction: column; }
  .hero-lang .hero-inner-flip .hero-copy { order: 1; }
  .hero-lang .hero-inner-flip .hero-shot { order: 2; margin-top: 1.2rem; }
}

/* A locked lesson should look locked and say what unlocks it. */
.lesson-card.locked { position: relative; }
.lesson-card.locked .lesson-emoji { filter: grayscale(.7); opacity: .65; }
.lesson-card.locked .lesson-name { color: var(--ink-soft); }
.lesson-unlock {
  margin-top: auto; font-size: .74rem; font-weight: 700;
  color: var(--primary); letter-spacing: .01em;
}
.lesson-card.locked:hover {
  border-color: var(--primary); border-style: solid;
  background: #F3E3D0;
}
.lesson-card.locked:hover .lesson-unlock { text-decoration: underline; }

/* "Chat with <name>" over the artwork on hover, matching the hero phone. */
.scene-cta {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, 6px);
  background: var(--primary); color: #fff; font-size: .85rem; font-weight: 700;
  padding: .35rem .9rem; border-radius: 999px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
  max-width: calc(100% - 1.6rem); overflow: hidden; text-overflow: ellipsis;
}
.scene a:hover .scene-cta,
.scene a:focus-visible .scene-cta { opacity: 1; transform: translate(-50%, 0); }
.scene a:hover .scene-media img { transform: scale(1.03); }
.scene-media img { transition: transform .3s ease; }
.scene-media { overflow: hidden; }

/* ------------------------------------------------- vocabulary study modes */

.study-bar {
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between;
  align-items: center; margin: 1.2rem 0 1rem;
  padding-bottom: .8rem; border-bottom: 1px solid var(--line);
}
.type-tabs, .mode-tabs { display: flex; gap: .35rem; }
.type-tabs .chip { cursor: pointer; font-family: var(--font); }
.tab-n { opacity: .6; font-size: .85em; margin-left: .2rem; }
.mode-btn {
  font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
  background: var(--surface); color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: .32rem .8rem;
}
.mode-btn:hover { border-color: var(--accent); }
.mode-btn.on { background: var(--primary); border-color: var(--primary); color: #fff; }

.study-stage { padding: 1rem 0 2rem; }

/* Flashcards */
.flashcard {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; width: 100%; max-width: 520px; min-height: 240px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow-md); cursor: pointer; font-family: var(--font);
  padding: 2rem 1.5rem; text-align: center;
}
.fc-word { font-family: var(--font-display); font-size: 2.1rem; font-weight: 800; color: var(--ink); }
.fc-read { font-size: .95rem; color: var(--accent); font-style: italic; }
.fc-hint { font-size: .8rem; color: var(--ink-faint); margin-top: .6rem; }
.fc-mean { display: none; font-size: 1.15rem; color: var(--ink-soft); margin-top: .4rem; }
.flashcard.revealed .fc-hint { display: none; }
.flashcard.revealed .fc-mean { display: block; }
.fc-nav {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin: 1rem auto 0; max-width: 520px;
}
.fc-count { font-size: .9rem; color: var(--ink-faint); font-weight: 600; }

/* Quiz */
.quiz-prompt { text-align: center; color: var(--ink-faint); font-size: .9rem; margin-bottom: .3rem; }
.quiz-mean {
  text-align: center; font-family: var(--font-display); font-size: 1.5rem;
  font-weight: 800; color: var(--ink); margin-bottom: 1.2rem;
}
.quiz-options {
  /* Always 2 × 2: four options in a row reads as a list, in a square it reads
     as a choice. */
  display: grid; gap: .5rem; grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 560px; margin: 0 auto;
}
.quiz-opt {
  font: inherit; font-size: 1.05rem; font-weight: 600; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .9rem 1rem;
}
.quiz-opt:hover { border-color: var(--accent); }
.quiz-options.answered .quiz-opt { cursor: default; }
.quiz-opt.right { background: #DFF0DB; border-color: #2F5D2A; color: #2F5D2A; }
.quiz-opt.wrong { background: #F6DCD8; border-color: #8A2E22; color: #8A2E22; }
.quiz-progress { text-align: center; color: var(--ink-faint); font-size: .85rem; margin-top: 1rem; }
.quiz-done { text-align: center; padding: 2rem 0; }
.quiz-score { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; margin-bottom: 1rem; }