/* ════════════════════════════════════════════════════════════════════════
   oscar landing — talktooscar.lol
   Warm-paper Swiss minimalism. HelveticaNeue, ink on #f5f3f0, accent green,
   and one loud living thing: the orange pixel mascot.
   Mirrors the app's design tokens (styles.css light theme).
   ════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'HelveticaNeue'; src: url('fonts/HelveticaNeueCyr Thin.ttf') format('truetype');   font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'HelveticaNeue'; src: url('fonts/HelveticaNeueCyr Light.ttf') format('truetype');  font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'HelveticaNeue'; src: url('fonts/HelveticaNeueCyr Roman.ttf') format('truetype');  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'HelveticaNeue'; src: url('fonts/HelveticaNeueCyr Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'HelveticaNeue'; src: url('fonts/HelveticaNeueCyr Bold.ttf') format('truetype');   font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'HNBOLD';        src: url('fonts/HelveticaNeueLTW1G-75Bold.ttf') format('truetype'); font-display: swap; }

/* ── accented Latin + Greek, at bold ────────────────────────────────────────
   The five HelveticaNeueCyr faces above are ASCII + Cyrillic ONLY: no ä ö å,
   no é ñ í ¿, and no Greek whatsoever. Every one of those characters was
   silently falling back to Arial, and Arial Bold next to HelveticaNeue Bold
   reads noticeably heavier and wider — which is why Swedish "är" and Spanish
   "Mañana" looked like they were set in a different font. They were.

   HelveticaNeueLTW1G-75Bold IS the real Helvetica Neue and covers W1G (Latin
   Ext + Greek + Cyrillic), so it's mapped into the family here for exactly the
   ranges the Cyr faces lack. Declared last so it wins the overlap; the narrow
   unicode-range keeps it away from ASCII and Cyrillic.

   Caveat, deliberate: this file only exists at Bold. Regular-weight accented
   text still falls to Arial (a far milder mismatch at 400 than at 700). A
   regular-weight W1G cut would close the gap completely. */
@font-face {
  font-family: 'HelveticaNeue';
  src: url('fonts/HelveticaNeueLTW1G-75Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
  unicode-range: U+00A0-00FF, U+0100-017F, U+0180-024F, U+0370-03FF, U+1F00-1FFF;
}

:root {
  --paper:   #f5f3f0;
  --ink:     #111;
  --dim:     #7a7770;
  --line:    #d6d4d0;
  --card:    #ffffff;
  --green:   #2a7a3b;      /* app light-theme accent-green */
  --oscar:   #cd5b28;      /* mascot orange */
  --dark:    #0d0d0d;      /* app dark surface — used for the subtitle bar */
  --i1-high: #2e7d32;      /* i+1 underline colours (app light theme) */
  --i1-mid:  #c49000;
  --i1-low:  #8e24aa;
  --learn:   rgba(245, 195, 0, .8);
  --radius:  16px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  /* Arial / Liberation Sans named explicitly: they're metric-compatible with
     Helvetica, so the glyphs the brand font lacks land somewhere predictable
     instead of on whatever the platform calls "sans-serif". */
  font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* the hero language roller resizes inline content; never let the browser
     "helpfully" re-anchor scroll position around it */
  overflow-anchor: none;
  /* faint paper grain via layered radial dots */
  background-image: radial-gradient(rgba(0,0,0,.022) 1px, transparent 1px);
  background-size: 22px 22px;
}

::selection { background: var(--oscar); color: #fff; }

.lp-wordmark { font-family: 'HNBOLD', 'HelveticaNeue', sans-serif; letter-spacing: -0.02em; }

/* ─── mascot (ported from app styles.css) ──────────────────────────────── */
.oscar-face {
  position: relative;
  display: inline-block;
  aspect-ratio: 1 / 1;
  flex: none;
  line-height: 0;
  user-select: none;
}
.oscar-face .oscar-body { display: block; width: 100%; height: 100%; object-fit: contain; }
.oscar-eye { position: absolute; animation: oscarLook 9s ease-in-out infinite; will-change: transform; }
.oscar-eye--l { left: 38.67%; top: 26.66%; width: 12.01%; height: 23.63%; }
.oscar-eye--r { left: 61.62%; top: 26.66%; width: 12.11%; height: 23.63%; }
.oscar-eye-ball {
  display: block; width: 100%; height: 100%;
  background: center / 100% 100% no-repeat;
  transform-origin: center center;
  animation: oscarBlink 5.6s ease-in-out infinite;
  will-change: transform;
}
.oscar-eye--l .oscar-eye-ball { background-image: url('images/oscar-eye-l.png'); }
.oscar-eye--r .oscar-eye-ball { background-image: url('images/oscar-eye-r.png'); }
@keyframes oscarBlink {
  0%, 38%, 44%, 86%, 92%, 100% { transform: scaleY(1); }
  41%, 89%                     { transform: scaleY(0.06); }
}
@keyframes oscarLook {
  0%, 16%, 88%, 100% { transform: translate(0, 0); }
  24%, 38%           { transform: translate(-25%, 5%); }
  46%, 60%           { transform: translate(25%, 5%); }
  68%, 80%           { transform: translate(0, -14%); }
}
.oscar-hat { position: absolute; inset: 0; pointer-events: none; }
.oscar-hat svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* ─── subtitle word mechanics (ported, paper + dark-bar variants) ──────── */
.subtitle-text .word { cursor: pointer; transition: opacity .15s; }
.subtitle-text .word.known    { color: rgba(0,0,0,.42); }
.subtitle-text .word.learning {
  color: rgba(0,0,0,.72);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2.5px;
  text-decoration-color: var(--learn);
}
.subtitle-text .word.unknown {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2.5px;
}
.subtitle-text .word.unknown.i1-high { text-decoration-color: var(--i1-high); }
.subtitle-text .word.unknown.i1-mid  { text-decoration-color: var(--i1-mid); }
.subtitle-text .word.unknown.i1-low  { text-decoration-color: var(--i1-low); }
.subtitle-text .punct { color: rgba(0,0,0,.42); }

.lp-subbar .word:hover { opacity: .75; }

/* ─── nav ──────────────────────────────────────────────────────────────── */
.lp-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 28px;
  padding: 18px clamp(20px, 5vw, 56px);
  background: rgba(245,243,240,.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.lp-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.lp-logo .lp-wordmark { font-size: 24px; }
.oscar-face--nav { width: 26px; }
.lp-nav-links { display: flex; gap: 26px; margin-left: auto; }
.lp-nav-links a {
  color: var(--dim); text-decoration: none; font-size: 14.5px; font-weight: 500;
  transition: color .15s;
}
.lp-nav-links a:hover { color: var(--ink); }

/* ─── buttons ──────────────────────────────────────────────────────────── */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-weight: 500; font-size: 15px;
  background: var(--ink); color: var(--paper);
  border: 1.5px solid var(--ink); border-radius: 100px;
  padding: 10px 22px; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background .15s, color .15s, box-shadow .15s;
}
.lp-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.16); }
.lp-btn:active { transform: translateY(0); }
.lp-btn--sm { padding: 8px 18px; font-size: 14px; }
.lp-btn--big { padding: 15px 30px; font-size: 16.5px; }
.lp-btn--ghost { background: transparent; color: var(--ink); }
.lp-btn--ghost:hover { background: rgba(0,0,0,.05); box-shadow: none; }
.lp-btn--grey {
  background: #e9e6e1; border-color: #e9e6e1; color: var(--ink);
}
.lp-btn--grey:hover { background: #e0ddd7; border-color: #e0ddd7; box-shadow: 0 6px 18px rgba(0,0,0,.10); }
/* the not-yet-a-download state: reads as a button, deliberately inert —
   nothing to click until the public build is out */
.lp-btn--soon {
  background: transparent; color: var(--dim);
  border: 1px dashed var(--line); cursor: default;
}
.lp-btn--soon:hover { transform: none; box-shadow: none; background: rgba(0,0,0,.02); }
.lp-soon { font-size: 13px; color: var(--dim); font-weight: 300; letter-spacing: .02em; }

/* language toggle (EN / RU) — ghost pill, current code highlighted */
.lp-lang-toggle {
  border-color: rgba(0,0,0,.16);
  font-weight: 500;
  white-space: nowrap;
  gap: 4px;
}
.lp-lang-toggle [data-lang-code] { color: var(--dim); transition: color .15s; }
.lp-lang-toggle .lp-lang-sep { color: rgba(0,0,0,.22); }
.lp-lang-toggle[data-cur="en"] [data-lang-code="en"],
.lp-lang-toggle[data-cur="ru"] [data-lang-code="ru"] { color: var(--ink); font-weight: 700; }
.lp-lang-toggle:hover [data-lang-code] { color: var(--ink); }
.lp-lang-toggle::before {
  content: ""; display: inline-block;
  width: 15px; height: 15px; margin-right: 7px; vertical-align: -2px;
  opacity: .7;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3c2.6 2.7 2.6 15.3 0 18M12 3c-2.6 2.7-2.6 15.3 0 18'/%3E%3C/svg%3E");
}

/* ─── hero ─────────────────────────────────────────────────────────────── */
/* the hero IS the first screen: nothing else above the fold */
.lp-hero {
  min-height: calc(100vh - 72px);
  min-height: calc(100svh - 72px);
  max-width: 1100px; margin: 0 auto;
  padding: 0 24px 32px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
}
.lp-hero-mascot { position: relative; display: inline-block; margin-bottom: 24px; cursor: pointer; }
.oscar-face--hero {
  width: clamp(104px, 15vh, 148px);
  filter: drop-shadow(0 14px 16px rgba(0,0,0,.22));
}
.lp-shadow {
  width: 58%; height: 12px; margin: 12px auto 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.16), transparent 70%);
  border-radius: 50%;
}
.lp-bubble {
  position: absolute; left: 78%; top: -10%;
  background: var(--ink); color: var(--paper);
  font-size: 15px; font-weight: 500; line-height: 1;
  padding: 9px 14px; border-radius: 14px 14px 14px 3px;
  white-space: nowrap; opacity: 0; transform: scale(.6);
  transform-origin: bottom left; pointer-events: none; z-index: 3;
}

.lp-h1 {
  font-size: clamp(22px, 5vw, 56px);
  font-weight: 700; letter-spacing: -0.035em; line-height: 1.04;
}
/* nowrap: the rotating language name must never change the headline's line
   count — a height pulse here scrolls the whole page under the visitor */
.lp-h1-line { display: block; white-space: nowrap; }
.lp-langword-wrap { display: inline-block; overflow: hidden; vertical-align: bottom; }
.lp-langword {
  display: inline-block; color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--i1-high);
  text-decoration-thickness: 5px;
  text-underline-offset: 8px;
}
.lp-lede {
  max-width: 620px; margin: 22px auto 0;
  font-size: clamp(16px, 2.1vw, 19px); font-weight: 300;
  color: var(--dim); line-height: 1.55;
}

/* the live subtitle demo — a full player frame, just below the fold */
.lp-subdemo {
  text-align: center;
  padding: clamp(56px, 10vh, 110px) 24px 40px;
}
.lp-demo-player {
  max-width: 780px; margin: 0 auto;
  background: var(--dark); border-radius: 18px; padding: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 30px 70px rgba(0,0,0,.22);
}
.lp-demo-screen {
  position: relative; overflow: hidden; cursor: pointer;
  aspect-ratio: 16 / 8; border-radius: 10px;
  background:
    radial-gradient(circle at 28% 30%, rgba(205,91,40,.32), transparent 52%),
    radial-gradient(circle at 74% 72%, rgba(42,122,59,.26), transparent 48%),
    #141414;
}
/* the "movie" scenes — four parody tableaus, one per language */
.lp-demo-stage { position: absolute; inset: 0; overflow: hidden; }
.lp-demo-stage .oscar-face,
.lp-mini-screen .oscar-face { position: absolute; line-height: 0; }
.lp-scene-bubble--light { background: #fff; color: #111; }
/* legibility gradient behind the subtitle line, like every player ever */
.lp-demo-screen::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 38%;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
  pointer-events: none;
}
/* the rotating line lives INSIDE the demo screen, like real subtitles */
.lp-subbar {
  position: absolute; left: 0; right: 0; bottom: 20px; z-index: 2;
  font-size: clamp(17px, 2.7vw, 26px); font-weight: 400;
  letter-spacing: .01em; color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,.55);
  white-space: nowrap;   /* line length may change per language; height may not */
}
.lp-subbar .word { margin: 0 .14em; }
.lp-subbar .punct { margin-left: -.18em; }
/* dark-player word palette (the app's dark mode) */
.lp-subbar.subtitle-text .word.known    { color: rgba(255,255,255,.6); }
.lp-subbar.subtitle-text .word.learning { color: rgba(255,255,255,.8); text-decoration-color: rgba(255,235,59,.75); }
.lp-subbar.subtitle-text .word.unknown  { color: #fff; }
.lp-subbar.subtitle-text .word.unknown.i1-high { text-decoration-color: #81C784; }
.lp-subbar.subtitle-text .word.unknown.i1-mid  { text-decoration-color: #F9A825; }
.lp-subbar.subtitle-text .word.unknown.i1-low  { text-decoration-color: #CE93D8; }
.lp-subbar.subtitle-text .punct { color: rgba(255,255,255,.6); }
.lp-subhint { margin-top: 16px; font-size: 13.5px; color: var(--dim); font-weight: 300; }

.lp-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.lp-micro { margin-top: 14px; font-size: 13px; color: var(--dim); font-weight: 300; letter-spacing: .02em; }

/* ─── the arc — ONE sentence, watched across three months ───────────────── */
.lp-arc {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.5);
  padding: clamp(46px, 8vh, 86px) clamp(20px, 6vw, 80px) clamp(38px, 6vh, 64px);
}
.lp-arc-h2 { text-align: center; margin-bottom: clamp(34px, 5vh, 56px); }
.lp-arc-stage { max-width: 620px; margin: 0 auto; text-align: center; }

/* the timeline the sentence is travelling along */
.lp-arc-track { position: relative; height: 46px; margin-bottom: clamp(26px, 4vh, 40px); }
.lp-arc-rail {
  position: absolute; left: 0; right: 0; top: 5px; height: 2px;
  background: rgba(0,0,0,.09); border-radius: 2px; display: block;
}
.lp-arc-fill {
  position: absolute; left: 0; top: 0; height: 100%; width: 0;
  background: var(--oscar); border-radius: 2px; display: block;
}
.lp-arc-stops { position: absolute; inset: 0; display: block; }
.lp-arc-stop { position: absolute; top: 0; transform: translateX(-50%); }
.lp-arc-stop i {
  display: block; width: 12px; height: 12px; margin: 0 auto;
  background: var(--paper); border: 2px solid rgba(0,0,0,.14);
  border-radius: 50%; transition: border-color .4s ease, background .4s ease;
}
.lp-arc-stop b {
  display: block; margin-top: 9px; white-space: nowrap;
  font-size: 11.5px; font-weight: 500; letter-spacing: .03em;
  color: var(--dim); transition: color .4s ease;
}
.lp-arc-stop.on i { border-color: var(--oscar); background: var(--oscar); }
.lp-arc-stop.on b { color: var(--ink); font-weight: 700; }
/* the playhead riding the rail */
.lp-arc-head {
  position: absolute; top: -1px; left: 0; width: 14px; height: 14px;
  margin-left: -7px; border-radius: 50%;
  background: var(--oscar); box-shadow: 0 0 0 5px rgba(205,91,40,.16);
}

/* the sentence itself — every word keeps its underline slot for the whole
   loop and only the COLOUR changes, so the underline can fade out instead of
   popping off (removing text-decoration outright would kill the transition) */
.lp-arc-sent {
  font-size: clamp(24px, 4.4vw, 40px); line-height: 1.34;
  letter-spacing: -0.015em;
  /* two lines are always reserved and the text sits centred in them: the lines
     differ in length between languages (and wrap on narrow screens), and
     without this the number and caption below hop as the section cycles */
  min-height: 2.68em;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
}
.lp-arc-sent .word {
  display: inline-block; margin: 0 .1em;
  color: rgba(0,0,0,.34); font-weight: 400;
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 7px; text-decoration-thickness: 3px;
  /* at this size skip-ink chops the rule around descenders (у, д, ρ, j) and the
     combining stress marks — the underline is the whole point here, keep it whole */
  text-decoration-skip-ink: none;
  transition: color .55s ease, text-decoration-color .55s ease, font-weight .3s ease;
}
.lp-arc-sent .word.st-unknown  { color: var(--ink); font-weight: 700; text-decoration-color: var(--i1-high); }
.lp-arc-sent .word.st-learning { color: rgba(0,0,0,.7); text-decoration-color: var(--learn); }
.lp-arc-sent .punct { color: rgba(0,0,0,.34); margin-left: -.14em; }

/* the comprehension read-out */
.lp-arc-read { margin-top: clamp(18px, 3vh, 30px); }
.lp-arc-read b {
  font-size: clamp(26px, 4vw, 38px); font-weight: 700; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; color: var(--ink);
  transition: color .5s ease;
}
.lp-arc-read.is-done b { color: var(--green); }
.lp-arc-read i {
  display: block; margin-top: 2px; font-style: normal;
  font-size: 12.5px; font-weight: 300; color: var(--dim); letter-spacing: .04em;
}
.lp-arc-cap {
  margin-top: clamp(30px, 5vh, 48px); text-align: center;
  font-size: clamp(15px, 2vw, 18px); font-weight: 300; color: var(--dim);
}

/* ─── "these cards do something" affordance ────────────────────────────── */
.lp-feat-hint {
  display: flex; align-items: center; gap: 9px;
  margin: -14px 0 26px; font-size: 13.5px; font-weight: 300; color: var(--dim);
}
.lp-feat-hint-dot {
  width: 7px; height: 7px; background: var(--oscar); flex: none;
  animation: hintPulse 2.4s ease-in-out infinite;
}
@keyframes hintPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
/* hover copy on pointers, tap copy on touch */
.lp-hint-tap { display: none; }
@media (hover: none) {
  .lp-hint-hover { display: none; }
  .lp-hint-tap { display: inline; }
}
/* the ▶ chip in each card's corner — the per-card half of the same hint */
.lp-card { position: relative; }
.lp-card-badge {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(205,91,40,.10); color: var(--oscar);
  font-size: 8px; line-height: 1; padding-left: 1px;
  transition: background .2s, transform .2s, opacity .2s;
}
.lp-card:hover .lp-card-badge,
.lp-card.scene-on .lp-card-badge { background: var(--oscar); color: #fff; transform: scale(1.12); }
/* one card demonstrates itself when the section first scrolls in */
.lp-card.is-demo .lp-card-badge { animation: badgeNudge 1.6s ease-in-out 2; }
@keyframes badgeNudge {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(205,91,40,.45); }
  40%      { transform: scale(1.16); box-shadow: 0 0 0 8px rgba(205,91,40,0); }
}

/* ─── sections / headings ──────────────────────────────────────────────── */
section { max-width: 1080px; margin: 0 auto; padding: clamp(70px, 11vh, 130px) 24px; }
.lp-h2 {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 700; letter-spacing: -0.03em; line-height: 1.05;
  margin-bottom: clamp(36px, 6vh, 64px);
}
.lp-h2-dim { color: var(--dim); font-weight: 300; }

/* ─── how it works ─────────────────────────────────────────────────────── */
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.lp-step { display: flex; flex-direction: column; }
.lp-step-art { margin-top: auto; padding-top: 22px; }
.lp-step-art > * { height: 232px; display: flex; flex-direction: column; }
.lp-step-num {
  font-weight: 100; font-size: clamp(54px, 6vw, 76px);
  color: var(--oscar); line-height: 1; margin-bottom: 14px; letter-spacing: -0.04em;
}
.lp-step h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 10px; }
.lp-step p { font-size: 15px; font-weight: 300; color: var(--dim); line-height: 1.6; }

.lp-mini-player {
  background: var(--dark); border-radius: 12px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.lp-mini-screen {
  position: relative;
  flex: 1; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 30% 35%, rgba(205,91,40,.35), transparent 55%),
    radial-gradient(circle at 72% 70%, rgba(42,122,59,.3), transparent 50%),
    #161616;
}
.lp-mini-play {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; padding-left: 3px;
  cursor: pointer; transition: background .15s, transform .15s;
}
.lp-mini-play:hover { background: rgba(255,255,255,.26); transform: scale(1.08); }
.lp-mini-sub { padding: 12px 14px 14px; text-align: center; font-size: 16.5px; }
/* dark-player palette (the app's dark mode) — base rules above are ink-on-paper */
.lp-mini-sub.subtitle-text .word.known    { color: rgba(255,255,255,.55); }
.lp-mini-sub.subtitle-text .word.learning { color: rgba(255,255,255,.78); text-decoration-color: rgba(255,235,59,.7); }
.lp-mini-sub.subtitle-text .word.unknown  { color: #fff; }
.lp-mini-sub.subtitle-text .word.unknown.i1-high { text-decoration-color: #81C784; }
.lp-mini-sub.subtitle-text .word.unknown.i1-mid  { text-decoration-color: #F9A825; }
.lp-mini-sub.subtitle-text .punct { color: rgba(255,255,255,.55); }

.lp-dictcard, .lp-srscard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px; text-align: left;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 28px rgba(0,0,0,.07);
}
.lp-dictcard-word { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.lp-dictcard-pos { font-size: 12px; font-weight: 400; color: var(--dim); margin-left: 8px; }
.lp-dictcard-gloss { font-size: 16px; color: var(--green); font-weight: 500; margin-top: 4px; }
.lp-dictcard-row {
  display: flex; justify-content: space-between; font-size: 14px;
  border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px;
}
.lp-dictcard-dim { color: var(--dim); font-weight: 300; }
.lp-dictcard-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 14px; }
.lp-dictcard-actions span {
  font-size: 12.5px; font-weight: 500; border: 1px solid var(--line);
  border-radius: 100px; padding: 5px 12px; color: var(--dim);
  cursor: pointer; transition: transform .12s, background .15s, color .15s;
}
.lp-dictcard-actions span:hover { transform: translateY(-1px); }
.lp-dictcard-actions span:first-child { background: var(--green); border-color: var(--green); color: #fff; }
.lp-dictcard-actions span.done { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.lp-srscard-sent { font-size: 19px; }
.lp-srscard-meta { font-size: 12.5px; color: var(--dim); margin-top: 10px; font-weight: 300; }
.lp-srscard-note { font-size: 12.5px; color: var(--green); font-weight: 500; margin-top: 10px; min-height: 18px; }
.lp-srscard-btns { display: flex; gap: 10px; margin-top: auto; padding-top: 12px; }
.lp-srscard-btns span {
  flex: 1; text-align: center; font-size: 13.5px; font-weight: 500;
  border-radius: 10px; padding: 9px 0;
  cursor: pointer; transition: transform .12s, filter .15s;
}
.lp-srscard-btns span:hover { transform: translateY(-1px); filter: brightness(.96); }
.lp-srs-fail { background: rgba(0,0,0,.05); color: var(--dim); }
.lp-srs-pass { background: var(--green); color: #fff; }

/* ─── features grid ────────────────────────────────────────────────────── */
.lp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lp-card {
  position: relative; overflow: hidden; min-height: 218px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px 28px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.lp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 16px 40px rgba(0,0,0,.09);
}
.lp-card h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.lp-card h3::before { content: '■ '; color: var(--oscar); font-size: 11px; vertical-align: 2px; }
.lp-card p { font-size: 14.5px; font-weight: 300; color: var(--dim); line-height: 1.6; }
.lp-card em { font-style: normal; font-weight: 500; color: var(--ink); }

/* hover comic: a scene overlay fades in over the card text and plays a loop */
.lp-scene {
  position: absolute; inset: 0; z-index: 2;
  background: var(--card);
  opacity: 0; transition: opacity .28s ease;
  pointer-events: none;
}
.lp-card:hover .lp-scene, .lp-card.scene-on .lp-scene { opacity: 1; }
.lp-scene .oscar-face { position: absolute; line-height: 0; }
.lp-scene-bubble {
  position: absolute;
  background: var(--ink); color: var(--paper);
  font-size: 12.5px; font-weight: 500; line-height: 1.25;
  padding: 6px 10px; border-radius: 11px 11px 11px 2px;
  white-space: nowrap; opacity: 0; transform-origin: bottom left;
}
.lp-scene-bubble.flip { border-radius: 11px 11px 2px 11px; transform-origin: bottom right; }
.lp-scene-think {
  position: absolute;
  background: #fff; color: var(--ink); border: 1.5px solid var(--line);
  font-size: 12.5px; font-weight: 500; padding: 6px 11px; border-radius: 100px;
  white-space: nowrap; opacity: 0; transform-origin: bottom center;
}
.lp-scene-chip {
  font-size: 13px; padding: 4px 9px; border-radius: 8px;
  background: rgba(0,0,0,.05); color: rgba(0,0,0,.5); white-space: nowrap;
}
.lp-scene-chip.hit {
  background: rgba(46,125,50,.10); color: var(--ink); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--i1-high);
  text-decoration-thickness: 2.5px; text-underline-offset: 4px;
}

/* ─── languages ────────────────────────────────────────────────────────── */
/* seven figures (six languages + "yours?") — flex rather than a grid so the
   short second row centres itself instead of hugging the left edge */
.lp-langrow {
  --lgap: clamp(10px, 2.4vw, 26px);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--lgap); text-align: center;
}
.lp-lang { flex: 0 0 calc((100% - 3 * var(--lgap)) / 4); }
.lp-lang { cursor: pointer; padding: 26px 8px 22px; border-radius: var(--radius); transition: background .2s; }
.lp-lang:hover { background: rgba(255,255,255,.8); }
.oscar-face--lang { width: clamp(68px, 8.5vw, 100px); margin-bottom: 30px; }
.lp-lang figcaption strong { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.lp-lang figcaption span { font-size: 13px; color: var(--dim); font-weight: 300; }
/* the fifth, not-yet-coloured oscar — your language */
.lp-lang--you .oscar-face--lang { filter: grayscale(1) opacity(.38); }
.lp-lang--you:hover .oscar-face--lang { filter: grayscale(.4) opacity(.75); transition: filter .3s; }
.lp-langs-note {
  margin-top: clamp(26px, 5vh, 44px); text-align: center;
  font-size: clamp(16px, 2vw, 19px); font-weight: 300; color: var(--dim); line-height: 1.55;
}
.lp-langs-note strong { font-weight: 700; color: var(--ink); }

/* ─── mobile ───────────────────────────────────────────────────────────────
   Copy on the left, a real-looking phone on the right. The phone screen wears
   the MOBILE APP's own dark tokens (src/design.ts Dark) rather than the paper
   palette — it should read as a photograph of the app sitting on the page. */
.lp-mobile { padding: clamp(60px, 10vh, 120px) clamp(20px, 6vw, 80px); }
.lp-mob-inner {
  max-width: 1080px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr minmax(230px, 292px);
  gap: clamp(34px, 6vw, 84px); align-items: center;
}
.lp-mob-copy .lp-h2 { text-align: left; }
.lp-mob-lede {
  max-width: 460px; margin-top: 4px;
  font-size: clamp(15px, 1.7vw, 17px); font-weight: 300; color: var(--dim); line-height: 1.65;
}
.lp-mob-list { list-style: none; margin: 26px 0 30px; max-width: 460px; }
.lp-mob-list li {
  position: relative; padding-left: 24px; margin-bottom: 11px;
  font-size: 15px; font-weight: 300; color: var(--ink); line-height: 1.5;
}
.lp-mob-list li::before {
  content: ''; position: absolute; left: 2px; top: 8px;
  width: 7px; height: 7px; background: var(--oscar);
}
.lp-mob-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
/* ── the handset ───────────────────────────────────────────────────────────
   A DOM rebuild of the actual app, not a generic phone drawing. Palette is
   OscarDark from the mobile repo (src/lib/oscar-theme.ts): bg #0f0e0d, card
   #1a1917, border #2a2825, text #e8e4dc, orange #cd5b28. Two real screens live
   in here — the Home tab and the review player — and the JS cross-fades them. */
.lp-phone { justify-self: center; width: 100%; max-width: 292px; }
.lp-phone-body {
  position: relative; aspect-ratio: 100 / 202;
  padding: 9px; border-radius: 42px;
  background: linear-gradient(160deg, #2c2a27, #141312);
  box-shadow: 0 30px 60px rgba(0,0,0,.24), 0 4px 12px rgba(0,0,0,.14),
              inset 0 0 0 1px rgba(255,255,255,.07);
}
.lp-phone-screen {
  position: relative; height: 100%; overflow: hidden;
  border-radius: 34px; background: #0f0e0d; color: #e8e4dc;
  font-size: 11px;
}
.lp-phone-island {
  position: absolute; z-index: 5; left: 50%; top: 9px; transform: translateX(-50%);
  width: 62px; height: 17px; border-radius: 10px; background: #000;
}
/* both screens stack; JS fades between them */
.lp-ph-view {
  position: absolute; inset: 0 0 50px; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 36px 15px 0;
}
.lp-ph-rev { opacity: 0; }

/* ── Home tab ── */
.lp-ph-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.lp-ph-mark {
  font-family: 'HNBOLD', 'HelveticaNeue', sans-serif;
  font-size: 17px; letter-spacing: -0.02em; color: #f2efe9;
}
.lp-ph-mark i { color: var(--oscar); font-style: normal; }
.lp-ph-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 20px; border: 1px solid #2a2825;
  font-size: 7.5px; font-weight: 700; letter-spacing: .12em; color: #64b482;
}
.lp-ph-pill i { width: 5px; height: 5px; border-radius: 50%; background: #64b482; }

/* mascot + the card he's holding */
.lp-ph-hero { position: relative; height: 106px; display: flex; align-items: center; justify-content: center; }
.lp-ph-oscar { width: 66px; position: relative; z-index: 2; }
.lp-ph-card {
  position: absolute; z-index: 1; left: 56%; top: 20px;
  min-width: 62px; padding: 13px 9px; border-radius: 9px;
  background: #26241f; border: 1px solid #322f2a;
  font-size: 11px; font-weight: 700; color: #e8e4dc; text-align: center;
  transform: rotate(5deg);
}
/* oscar's line — the app's coach copy block */
.lp-ph-say {
  background: #1a1917; border-radius: 13px; padding: 12px 12px;
  font-size: 10.5px; line-height: 1.45; text-align: center; color: #e8e4dc;
}
/* the one paper-coloured button on the screen */
.lp-ph-cta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; padding: 13px 13px; border-radius: 13px;
  background: #efece4; color: #14120f;
}
.lp-ph-cta-l { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.lp-ph-cta-l b { font-weight: 700; }
.lp-ph-ico { width: 12px; height: 12px; fill: #14120f; display: block; }
.lp-ph-cta-r { font-size: 9.5px; color: #6a665e; }
.lp-ph-or { text-align: center; font-size: 9.5px; color: #9a968d; margin: 9px 0 0; }

/* streak strip + the stats line */
.lp-ph-streak {
  display: flex; align-items: center; gap: 7px;
  margin-top: 11px; padding-top: 11px; border-top: 1px solid #211f1c;
}
.lp-ph-pix { display: flex; gap: 2px; flex: none; }
.lp-ph-pix i { width: 5px; height: 5px; border-radius: 1px; background: #2a2825; }
.lp-ph-pix i.on { background: var(--oscar); }
.lp-ph-stats-t { flex: 1; font-size: 8.5px; color: #9a968d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-ph-stats-l { font-size: 8.5px; font-weight: 700; letter-spacing: .06em; color: var(--oscar); }

/* the destination rows */
.lp-ph-rows { margin-top: 6px; }
.lp-ph-r {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 0; border-bottom: 1px solid #1c1a18;
}
.lp-ph-sq { width: 8px; height: 8px; flex: none; }
.lp-ph-sq--g { background: #64b482; }
.lp-ph-sq--a { background: #d4a017; }
.lp-ph-sq--o { background: var(--oscar); }
.lp-ph-thumb {
  position: relative; width: 42px; height: 26px; flex: none; border-radius: 4px;
  background: linear-gradient(135deg, #3b2d4a, #6b3f3a);
  display: flex; align-items: center; justify-content: center;
}
.lp-ph-thumb i {
  width: 0; height: 0; margin-left: 2px;
  border-left: 7px solid rgba(255,255,255,.9);
  border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent;
}
.lp-ph-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lp-ph-rt b { font-size: 12px; font-weight: 700; letter-spacing: -0.01em; color: #f2efe9; }
.lp-ph-rt em { font-style: normal; font-size: 9px; color: #9a968d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-ph-arr { font-size: 11px; color: #56524b; flex: none; }

/* ── review player: paper, like the real one ── */
.lp-ph-rev { background: #ffffff; color: #1a1a1a; padding: 30px 15px 0; }
.lp-ph-rev-top {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 9.5px; color: #8a8a8a; padding-bottom: 9px; border-bottom: 2px solid #ececec;
}
.lp-ph-rev-n { font-weight: 700; color: #555; }
.lp-ph-rev-sent { margin-top: 13px; font-size: 13px; font-weight: 700; line-height: 1.4; color: #1a1a1a; }
.lp-ph-rev-sent .word { margin: 0 .1em; }
.lp-ph-rev-sent .punct { margin-left: -.16em; }
.lp-ph-rev-rule { height: 1px; background: #ececec; margin: 12px 0; }
.lp-ph-rev-pos {
  display: inline-block; align-self: flex-start;
  padding: 3px 8px; border-radius: 20px;
  background: #fbeaf0; border: 1px solid #ed93b1; color: #993556;
  font-size: 7.5px; font-weight: 700; letter-spacing: .08em;
}
.lp-ph-rev-word { margin-top: 9px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.lp-ph-rev-gloss { margin-top: 2px; font-size: 12px; color: #999; }
.lp-ph-rev-ai { margin-top: 12px; padding: 9px 10px; border-radius: 9px; background: rgba(0,0,0,.03); }
.lp-ph-rev-ai-l { display: block; font-size: 7.5px; font-weight: 700; letter-spacing: .08em; color: #185FA5; margin-bottom: 4px; }
.lp-ph-rev-ai-t { font-size: 9.5px; line-height: 1.45; color: #444; }
.lp-ph-rev-btns { display: flex; gap: 8px; margin-top: auto; margin-bottom: 13px; }
.lp-ph-rev-b {
  flex: 1; padding: 8px 0; border-radius: 10px; border: 1px solid #e0e0e0;
  text-align: center; background: #fff;
}
.lp-ph-rev-b b { display: block; font-size: 11.5px; font-weight: 700; }
.lp-ph-rev-b em { font-style: normal; font-size: 8.5px; color: #999; }
.lp-ph-rev-b--p.hit { background: #eafaef; border-color: #64b482; }

/* ── tab bar: the app's seven, with its own 12×12 pixel icons ── */
.lp-ph-tabs {
  position: absolute; z-index: 4; left: 0; right: 0; bottom: 0;
  height: 50px; padding: 8px 2px 0;
  display: flex; justify-content: space-around; align-items: flex-start;
  background: #0b0a09; border-top: 1px solid #1c1a18;
}
.lp-ph-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #d1cec8; }
.lp-ph-tab svg { width: 16px; height: 16px; display: block; shape-rendering: crispEdges; }
.lp-ph-tab span { font-size: 7.5px; letter-spacing: -0.02em; }
.lp-ph-tab.is-on { color: var(--oscar); }

/* ─── beta card ────────────────────────────────────────────────────────── */
/* land the last screen cleanly: beta card centred with the footer sitting
   right at the bottom edge — together ≈ one viewport, so scrolling all the way
   down lands on the card + footer instead of an awkward void above the footer */
.lp-beta {
  min-height: calc(100svh - 116px);
  display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(40px, 6vh, 80px);
  padding-bottom: clamp(20px, 3vh, 36px);
}
.lp-beta-card {
  position: relative;
  background: var(--card); border: 1px solid var(--line); border-radius: 24px;
  padding: clamp(40px, 6vw, 70px) clamp(24px, 5vw, 70px) clamp(36px, 5vw, 56px);
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,.04), 0 24px 60px rgba(0,0,0,.09);
}
.lp-peek {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -58%);
  width: clamp(76px, 9vw, 96px); pointer-events: none;
}
.oscar-face--peek { width: 100%; filter: drop-shadow(0 6px 8px rgba(0,0,0,.18)); }
.lp-bubble--peek { left: 88%; top: -26%; }
.lp-h2--beta { margin-bottom: 14px; }
.lp-hello { display: inline-block; color: var(--ink); }
.lp-beta-dl-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lp-beta-lede { max-width: 480px; margin: 0 auto 30px; font-size: 16px; font-weight: 300; color: var(--dim); line-height: 1.6; }
.lp-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.lp-input {
  font-family: inherit; font-size: 16px; font-weight: 400;
  background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 100px;
  padding: 14px 24px; min-width: min(330px, 80vw); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.lp-input:focus { border-color: var(--green); box-shadow: 0 0 0 4px rgba(42,122,59,.12); }
.lp-input::placeholder { color: var(--dim); font-weight: 300; }
.lp-form-note { min-height: 22px; margin-top: 12px; font-size: 14px; color: var(--green); font-weight: 500; }
.lp-form-note.err { color: #c62828; }
.lp-beta-dl {
  margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.lp-beta-dl .lp-micro { margin-top: 0; }

/* ─── footer ───────────────────────────────────────────────────────────── */
.lp-footer {
  text-align: center; padding: 22px 24px 34px; color: var(--dim);
  font-size: 13.5px; font-weight: 300;
}
.lp-wordmark--ft { display: block; font-size: 20px; color: var(--ink); margin-bottom: 8px; }
.lp-footer a { color: var(--dim); }
.lp-footer a:hover { color: var(--ink); }

/* ─── tooltip ──────────────────────────────────────────────────────────── */
.lp-tip {
  position: fixed; z-index: 200;
  background: var(--ink); color: var(--paper);
  border-radius: 10px; padding: 9px 13px;
  font-size: 14px; line-height: 1.35; max-width: 240px;
  opacity: 0; transform: translateY(4px) scale(.97);
  transition: opacity .12s ease, transform .12s ease;
  pointer-events: none;
}
.lp-tip.show { opacity: 1; transform: translateY(0) scale(1); }
.lp-tip .tip-word { font-weight: 700; }
.lp-tip .tip-pos { color: rgba(245,243,240,.55); font-size: 12px; margin-left: 6px; }
.lp-tip .tip-gloss { color: #9fd8ae; font-weight: 500; }

/* ─── responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .lp-steps { grid-template-columns: 1fr; gap: 44px; }
  .lp-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-lang { flex: 0 0 calc((100% - 2 * var(--lgap)) / 3); }
  /* phone drops under the copy and leads, since it's the whole point here */
  .lp-mob-inner { grid-template-columns: 1fr; gap: 40px; }
  .lp-mob-copy { order: 2; }
  .lp-phone { order: 1; }
  .lp-mob-copy .lp-h2, .lp-mob-lede, .lp-mob-list { text-align: left; }
}
@media (max-width: 640px) {
  .lp-nav { gap: 14px; padding: 14px 18px; }
  .lp-nav-links { display: none; }
  .lp-logo { margin-right: auto; }
  .lp-grid { grid-template-columns: 1fr; }
  .lp-lang { flex: 0 0 calc((100% - var(--lgap)) / 2); }
  .lp-mob-cta { flex-direction: column; align-items: stretch; text-align: center; }
  .lp-mob-cta .lp-btn { width: 100%; }
  .lp-cta .lp-btn--big { width: 100%; }
  .lp-form { flex-direction: column; align-items: stretch; }
  .lp-form .lp-input, .lp-form .lp-btn { width: 100%; }
  .lp-subbar { font-size: 17px; padding: 13px 16px; }
  .lp-bubble { left: 70%; }
}

/* ─── motion safety ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .oscar-eye, .oscar-eye-ball { animation: none !important; }
  .lp-btn, .lp-card { transition: none; }
}