/* VLINGO 官网首页 V3 — product-first homepage revision.
   Scope: .vlingo-home-v3 only. Deliberately separate from the shared
   stylesheets because components.css is already past the 3000-line project
   gate; nothing here may leak into other pages. */

.vlingo-home-v3 {
  --vh-bg: #fbf8f3;
  --vh-bg-alt: #f5f1ea;
  --vh-surface: #ffffff;
  --vh-ink: #14171c;
  --vh-ink-soft: #454d58;
  --vh-muted: #737d8a;
  --vh-line: #ece5da;
  --vh-line-strong: #dbd1c3;
  --vh-orange: #ff6a00;
  --vh-orange-ink: #a54100;
  --vh-orange-soft: #fff2e7;
  --vh-ok: #1f7a4d;
  --vh-ok-soft: #e9f7ef;
  --vh-bad: #b3261e;
  --vh-bad-soft: #fdeceb;
  --vh-radius: 14px;
  --vh-radius-lg: 20px;
  --vh-shadow: 0 14px 34px rgba(20, 23, 28, 0.07);
  --vh-shadow-card: 0 18px 40px rgba(20, 23, 28, 0.09);
  /* One full card at a time. A narrower slide leaked 55px of the neighbour,
     which cut its heading mid-word and, because the cards differ in height,
     left its rounded bottom edge hanging in the middle of the sliver — it read
     as a broken half card rather than as "there is more to swipe". */
  --vh-peek: 100%;
  --vh-gutter: 20px;
  --vh-viewport-pad: 0px;

  background: var(--vh-bg);
  color: var(--vh-ink);
}

body.vlingo-home-page {
  background: var(--vh-bg, #fbf8f3);
}

/* Scoped restatement of the `hidden` attribute: several card parts below are
   flex/grid containers whose own `display` would otherwise outrank the user
   agent's `[hidden]` rule and leave collapsed panels visible. */
.vlingo-home-v3 [hidden] {
  display: none !important;
}

/* base.css carries a document-wide `li + li { margin-top: 6px }`. Inside the
   homepage's own lists every item after the first was therefore pushed 6px
   down — visible as a stair-stepped progress bar and a carousel whose second
   card sat lower than the first. Spacing here comes from `gap` instead. */
.vlingo-home-v3 li + li {
  margin-top: 0;
}

.vlingo-home-v3 .vh-container {
  width: min(100% - (var(--vh-gutter) * 2), 1080px);
  margin-inline: auto;
}

.vlingo-home-v3 .vh-section {
  padding: 64px 0;
}

.vlingo-home-v3 .vh-section-alt {
  background: var(--vh-bg-alt);
}

.vlingo-home-v3 .vh-label {
  margin: 0 0 12px;
  color: var(--vh-orange-ink);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.vlingo-home-v3 .vh-heading {
  margin: 0 0 14px;
  color: var(--vh-ink);
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  font-weight: 780;
  line-height: 1.2;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.vlingo-home-v3 .vh-lead {
  margin: 0;
  max-width: 640px;
  color: var(--vh-ink-soft);
  line-height: 1.68;
}

/* ---------------------------------------------------------------- 1. hero -- */

.vlingo-home-v3 .vh-hero {
  padding: 34px 0 46px;
  background: var(--vh-bg);
}

.vlingo-home-v3 .vh-hero-copy {
  max-width: 700px;
  margin-inline: auto;
  text-align: center;
}

.vlingo-home-v3 .vh-hero h1 {
  margin: 0 0 12px;
  color: var(--vh-ink);
  font-size: clamp(1.66rem, 5.4vw, 2.62rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.vlingo-home-v3 .vh-hero h1 span {
  display: block;
}

.vlingo-home-v3 .vh-hero-lead {
  margin: 0 auto 20px;
  max-width: 520px;
  color: var(--vh-ink-soft);
  font-size: 0.96rem;
  line-height: 1.6;
}

.vlingo-home-v3 .vh-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.vlingo-home-v3 .vh-cta {
  min-height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 800;
}

.vlingo-home-v3 .vh-cta-login {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 6px;
  color: var(--vh-ink-soft);
  font-size: 0.94rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--vh-line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.vlingo-home-v3 .vh-cta-login:hover,
.vlingo-home-v3 .vh-cta-login:focus-visible {
  color: var(--vh-orange-ink);
  text-decoration-color: currentColor;
}

/* ------------------------------------------------------ 2. showcase frame -- */

.vlingo-home-v3 .vh-showcase {
  width: min(100%, 660px);
  margin: 26px auto 0;
}

.vlingo-home-v3 .vh-showcase-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0 0 12px;
  padding: 0;
}

.vlingo-home-v3 .vh-showcase-nav button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--vh-muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
}

.vlingo-home-v3 .vh-showcase-nav button .vh-nav-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vh-line-strong);
}

.vlingo-home-v3 .vh-showcase-nav button[aria-selected="true"] {
  border-color: var(--vh-line);
  background: var(--vh-surface);
  color: var(--vh-ink);
  box-shadow: 0 2px 8px rgba(20, 23, 28, 0.05);
}

.vlingo-home-v3 .vh-showcase-nav button[aria-selected="true"] .vh-nav-dot {
  background: var(--vh-orange);
}

.vlingo-home-v3 .vh-showcase-nav button:focus-visible {
  outline: 2px solid var(--focus-ring, #005fcc);
  outline-offset: 2px;
}

/* `scroll-padding` mirrors the inline padding so that snapping lines every card
   up with the gutter instead of the raw screen edge. */
.vlingo-home-v3 .vh-showcase-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  /* The browser owns this gesture, on both axes: horizontal panning stays inside
     the viewport, vertical panning still bubbles up so the page keeps scrolling
     under the thumb. Leaving `touch-action` at its default is deliberate — a
     partially-supported value here lets the engine cancel the pointer mid-drag,
     and the animation runs on the compositor only when the browser is the one
     scrolling. */
  scroll-snap-type: x mandatory;
  scroll-behavior: auto;
  scroll-padding-inline: var(--vh-viewport-pad);
  padding-inline: var(--vh-viewport-pad);
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* The script pins this height to the card that is on screen, so a shorter
     card never leaves a strip of page background under it. */
  transition: height 220ms ease;
}

.vlingo-home-v3 .vh-showcase-viewport::-webkit-scrollbar {
  display: none;
}

.vlingo-home-v3 .vh-showcase-track {
  display: flex;
  /* Top-align every slide so the cards share one baseline; the default
     `stretch` let the first slide sit 6px higher than the rest. */
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vlingo-home-v3 .vh-slide {
  flex: 0 0 var(--vh-peek);
  max-width: var(--vh-peek);
  scroll-snap-align: start;
  /* One gesture, one card: a hard flick still has to stop at the next snap
     point instead of sailing past two or three of them. */
  scroll-snap-stop: always;
}

.vlingo-home-v3 .vh-slide-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 3px;
}

.vlingo-home-v3 .vh-slide-index {
  color: var(--vh-orange);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.vlingo-home-v3 .vh-slide-title {
  margin: 0;
  color: var(--vh-ink);
  font-size: 1rem;
  font-weight: 780;
}

.vlingo-home-v3 .vh-slide-lead {
  margin: 0 0 10px;
  color: var(--vh-muted);
  font-size: 0.84rem;
  line-height: 1.5;
}

.vlingo-home-v3 .vh-card {
  --vh-visual-h: 152px;
  padding: 14px;
  border: 1px solid var(--vh-line);
  border-radius: var(--vh-radius-lg);
  background: var(--vh-surface);
  box-shadow: var(--vh-shadow-card);
}

/* The published vocabulary art is a 1024x1024 frame with the subject sitting
   somewhere inside it, so the box has to keep the artwork's own square ratio:
   any other ratio makes `cover` slice the illustration. Height drives the size
   and the box is centred, which keeps the text below left aligned. */
.vlingo-home-v3 .vh-visual {
  position: relative;
  width: auto;
  height: var(--vh-visual-h);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--vh-radius);
}

.vlingo-home-v3 .vh-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vlingo-home-v3 .vh-word-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
}

.vlingo-home-v3 .vh-word {
  color: var(--vh-ink);
  font-size: clamp(1.9rem, 7.4vw, 2.6rem);
  font-weight: 830;
  line-height: 0.98;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.vlingo-home-v3 .vh-audio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 106, 0, 0.92);
  border-radius: 50%;
  background: var(--vh-orange);
  color: #fff;
}

.vlingo-home-v3 .vh-audio:disabled {
  background: var(--vh-line-strong);
  cursor: not-allowed;
}

.vlingo-home-v3 .vh-audio svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}

.vlingo-home-v3 .vh-audio:focus-visible {
  outline: 2px solid var(--focus-ring, #005fcc);
  outline-offset: 2px;
}

.vlingo-home-v3 .vh-phonetic {
  width: fit-content;
  min-height: 28px;
  /* block-level on purpose: `margin: auto` is ignored on an inline-level box,
     which left the pill pinned to the card's left edge. */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px auto 0;
  padding: 3px 14px 4px;
  border: 1px solid rgba(220, 231, 238, 0.94);
  border-radius: 999px;
  background: var(--vh-surface);
  color: var(--vh-muted);
  font-size: 0.86rem;
  text-align: center;
}

.vlingo-home-v3 .vh-meaning {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  color: #1d2731;
  font-size: 1.1rem;
  font-weight: 780;
  line-height: 1.45;
  text-align: center;
}

.vlingo-home-v3 .vh-meaning-tag {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 22px;
  padding: 0 9px;
  border: 1px solid rgba(238, 116, 28, 0.22);
  border-radius: 999px;
  background: rgba(255, 245, 235, 0.92);
  color: var(--vh-orange-ink);
  font-size: 0.76rem;
  font-weight: 800;
}

.vlingo-home-v3 .vh-familiarity {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.vlingo-home-v3 .vh-familiarity button {
  min-height: 42px;
  border: 1px solid var(--vh-line-strong);
  border-radius: 12px;
  background: var(--vh-surface);
  color: var(--vh-ink-soft);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 760;
}

.vlingo-home-v3 .vh-familiarity button:hover {
  border-color: var(--vh-orange);
  color: var(--vh-orange-ink);
}

.vlingo-home-v3 .vh-familiarity button[aria-pressed="true"] {
  color: #fff;
  box-shadow: 0 10px 22px rgba(20, 23, 28, 0.16);
}

.vlingo-home-v3 .vh-familiarity button:focus-visible {
  outline: 2px solid var(--focus-ring, #005fcc);
  outline-offset: 2px;
}

/* ------------------------------------------------------ 3. image recall --- */

.vlingo-home-v3 .vh-recall-cue {
  margin: 12px 0 0;
  color: var(--vh-ink);
  font-size: 0.94rem;
  font-weight: 700;
  text-align: center;
}

/* -------------------------------------------------------- 4. spelling ----- */

.vlingo-home-v3 .vh-spelling-cue {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.vlingo-home-v3 .vh-spelling-cue .vh-meaning {
  margin: 0;
}

.vlingo-home-v3 .vh-letter-row {
  display: grid;
  grid-template-columns: repeat(var(--vh-letter-count, 8), minmax(0, 1fr));
  gap: 5px;
  width: min(100%, 320px);
  margin: 14px auto 0;
}

.vlingo-home-v3 .vh-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 36px;
  padding: 0 2px;
  border-bottom: 2px solid rgba(116, 158, 125, 0.54);
  color: var(--vh-ink);
  font-size: 1.02rem;
  font-weight: 800;
  user-select: none;
}

.vlingo-home-v3 .vh-letter.is-filled {
  border-bottom-color: #18864b;
  color: #18864b;
}

.vlingo-home-v3 .vh-letter.is-empty {
  color: transparent;
}

/* ---------------------------------------------------- 5. comprehensive ---- */

.vlingo-home-v3 .vh-test-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vlingo-home-v3 .vh-test-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(220, 231, 238, 0.94);
  border-radius: 12px;
  background: var(--vh-surface);
  color: var(--vh-ink-soft);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}

.vlingo-home-v3 .vh-test-option .vh-test-mark {
  flex: 0 0 auto;
  width: 14px;
  font-weight: 800;
}

.vlingo-home-v3 .vh-test-option:hover:not(:disabled) {
  border-color: var(--vh-orange);
}

.vlingo-home-v3 .vh-test-option.is-correct {
  border-color: #167942;
  background: #d5f1de;
  color: #075f32;
  box-shadow: 0 6px 14px rgba(10, 108, 56, 0.12);
}

.vlingo-home-v3 .vh-test-option.is-wrong {
  border-color: rgba(190, 77, 54, 0.58);
  background: #fff0ed;
  color: #a44935;
}

.vlingo-home-v3 .vh-test-option:disabled {
  cursor: default;
  opacity: 1;
}

.vlingo-home-v3 .vh-test-option:focus-visible {
  outline: 2px solid var(--focus-ring, #005fcc);
  outline-offset: 2px;
}

.vlingo-home-v3 .vh-test-status {
  min-height: 1.2em;
  margin: 10px 0 0;
  color: var(--vh-ink-soft);
  font-size: 0.82rem;
  font-weight: 700;
}

/* ------------------------------------------------------ 6. sentence ------- */

.vlingo-home-v3 .vh-sentence-word {
  /* One centred row per part: word, then the audio control, then the meaning.
     A wrapping flex row kept distributing the free space to whichever item it
     felt like, so the pair drifted to the two ends of the card. */
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.vlingo-home-v3 .vh-sentence-word .vh-meaning {
  margin: 0 0 0 auto;
}

/* The sentence audio control sits where the old arrow + mode caption used to
   be: between the meaning and the sentence, centred on its own row. */
.vlingo-home-v3 .vh-card-content > .vh-audio {
  display: flex;
  width: fit-content;
  margin: 6px auto 0;
}

.vlingo-home-v3 .vh-sentence-line {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 0 0 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
}

.vlingo-home-v3 .vh-sentence-text {
  margin: 0;
  color: #1f2937;
  font-size: 1.06rem;
  font-weight: 780;
  line-height: 1.45;
  text-align: center;
}

.vlingo-home-v3 .vh-sentence-text mark {
  padding: 0 2px;
  border-radius: 4px;
  background: rgba(255, 106, 0, 0.2);
  color: var(--vh-orange-ink);
  font-weight: 800;
}

/* Tokens stay inside the sentence flow: the raw spacing and punctuation are
   preserved, so this reads as one sentence with underlines, not as boxes. */
.vlingo-home-v3 .vh-token {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: bottom;
  gap: 1px;
  padding: 0 2px 1px;
  border-bottom: 2px solid rgba(255, 106, 0, 0.35);
}

.vlingo-home-v3 .vh-token .vh-token-text mark {
  padding: 0 2px;
  border-radius: 4px;
  background: rgba(255, 106, 0, 0.2);
  color: var(--vh-orange-ink);
  font-weight: 800;
}

.vlingo-home-v3 .vh-token-role {
  color: #8a97a5;
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* The verb blank keeps its place in the sentence; clicking reveals it. */
.vlingo-home-v3 .vh-gap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  vertical-align: bottom;
  gap: 1px;
  padding: 0 6px 1px;
  border: 0;
  border-bottom: 2px solid rgba(255, 106, 0, 0.55);
  border-radius: 6px 6px 0 0;
  background: rgba(255, 106, 0, 0.08);
  color: var(--vh-orange-ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.vlingo-home-v3 .vh-gap .vh-gap-hint {
  letter-spacing: 0.14em;
}

.vlingo-home-v3 .vh-gap .vh-token-role {
  color: var(--vh-orange-ink);
}

.vlingo-home-v3 .vh-gap.is-revealed {
  background: rgba(255, 106, 0, 0.16);
}

.vlingo-home-v3 .vh-sentence-translation {
  margin: 0;
  color: #788391;
  font-size: 0.92rem;
  font-style: normal;
  line-height: 1.5;
  text-align: center;
}

/* ------------------------------------------------------- 7. controls ------ */

.vlingo-home-v3 .vh-showcase-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}

.vlingo-home-v3 .vh-showcase-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--vh-line-strong);
  border-radius: 50%;
  background: var(--vh-surface);
  color: var(--vh-ink-soft);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1;
}

.vlingo-home-v3 .vh-showcase-controls button:hover {
  border-color: var(--vh-orange);
  color: var(--vh-orange-ink);
}

.vlingo-home-v3 .vh-showcase-controls button:focus-visible {
  outline: 2px solid var(--focus-ring, #005fcc);
  outline-offset: 2px;
}

.vlingo-home-v3 .vh-showcase-progress {
  display: flex;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vlingo-home-v3 .vh-showcase-progress li {
  width: 20px;
  height: 3px;
  border-radius: 999px;
  background: var(--vh-line-strong);
}

.vlingo-home-v3 .vh-showcase-progress li.is-active {
  background: var(--vh-orange);
}

/* ------------------------------------- 8. why VLINGO (the second screen) -- */

/* The first screen answers "how does VLINGO teach?"; this one answers "why
   VLINGO?". It is deliberately static — no carousel, no auto-advance — so it
   never competes with the showcase above it. Nothing here repeats the learning
   demo: each card is an icon, one figure or keyword, a title and a single line,
   which is what lets a visitor scan all six in a few seconds. */

.vlingo-home-v3 .vh-features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.vlingo-home-v3 .vh-feature {
  /* The icon and the figure share one row. Stacked, they cost ~100px of a
     198px card — a 44px tile, a 14px gap and a 44px figure box — which read as
     an empty band between the tile and the number. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
  padding: 20px 18px;
  border: 1px solid var(--vh-line);
  border-radius: var(--vh-radius-lg);
  background: var(--vh-surface);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

/* The orange surface is a hover state, not a permanent badge: at rest all six
   cards look identical, and pointing at one is what lights it up. Card 01 is
   distinguished by its figure alone, not by carrying a different background. */
.vlingo-home-v3 .vh-feature:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 106, 0, 0.34);
  background: linear-gradient(180deg, var(--vh-orange-soft), var(--vh-surface) 68%);
  box-shadow: var(--vh-shadow);
}

.vlingo-home-v3 .vh-feature-icon {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 106, 0, 0.28);
  border-radius: 13px;
  background: var(--vh-orange-soft);
  color: var(--vh-orange);
  transition: background 180ms ease, color 180ms ease;
}

/* The icons carry several strokes each (a picture inside a card, a globe beside
   a bubble), so they need a slightly larger box than a single-glyph set would;
   at 18px the busier ones read as a smudge. */
.vlingo-home-v3 .vh-feature-icon svg {
  width: 24px;
  height: 24px;
}

.vlingo-home-v3 .vh-feature:hover .vh-feature-icon {
  background: var(--vh-orange);
  color: #fff;
}

/* Card 01's figure is the largest text in the section, so it leads the row next
   to the icon; the other cards show a keyword in the same slot. The tile sets
   the row height either way, which keeps the titles of a row on one line. */
.vlingo-home-v3 .vh-feature-metric,
.vlingo-home-v3 .vh-feature-kicker {
  grid-area: 1 / 2;
  margin: 0;
  color: var(--vh-orange-ink);
  line-height: 1.1;
}

.vlingo-home-v3 .vh-feature-metric {
  font-size: clamp(2rem, 4.6vw, 2.5rem);
  font-weight: 830;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

/* The unit hangs off the figure at label size: Chinese needs a measure word
   (张), Indonesian needs none, so there the noun itself carries the meaning. */
.vlingo-home-v3 .vh-feature-metric small {
  margin-left: 4px;
  color: var(--vh-muted);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0;
}

.vlingo-home-v3 .vh-feature-kicker {
  font-size: 0.78rem;
  font-weight: 800;
}

.vlingo-home-v3 .vh-feature-title {
  grid-area: 2 / 1 / 3 / -1;
  margin: 0;
  color: var(--vh-ink);
  font-size: 1.02rem;
  font-weight: 780;
}

.vlingo-home-v3 .vh-feature-text {
  grid-area: 3 / 1 / 4 / -1;
  margin: 0;
  color: var(--vh-muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

/* ------------------------------------------------------------ 10. journey -- */

.vlingo-home-v3 .vh-journey {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}

.vlingo-home-v3 .vh-journey li {
  padding: 16px 14px;
  border: 1px solid var(--vh-line);
  border-left: 3px solid var(--vh-orange);
  border-radius: var(--vh-radius);
  background: var(--vh-surface);
}

.vlingo-home-v3 .vh-journey-index {
  display: block;
  color: var(--vh-orange-ink);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.vlingo-home-v3 .vh-journey strong {
  display: block;
  margin-top: 4px;
  color: var(--vh-ink);
  font-size: 0.95rem;
}

.vlingo-home-v3 .vh-journey p {
  margin: 6px 0 0;
  color: var(--vh-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}


/* ----------------------------------------------------------- 11. progress -- */

.vlingo-home-v3 .vh-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.vlingo-home-v3 .vh-stat {
  padding: 18px;
  border: 1px solid var(--vh-line);
  border-radius: var(--vh-radius);
  background: var(--vh-surface);
}

.vlingo-home-v3 .vh-stat-label {
  margin: 0;
  color: var(--vh-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.vlingo-home-v3 .vh-stat-value {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 8px 0 0;
  color: var(--vh-ink);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.vlingo-home-v3 .vh-stat-value small {
  color: var(--vh-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.vlingo-home-v3 .vh-sample-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 16px 0 0;
  padding: 5px 12px;
  border: 1px solid var(--vh-line-strong);
  border-radius: 999px;
  color: var(--vh-muted);
  font-size: 0.76rem;
  font-weight: 700;
}

/* ------------------------------------------------------------- 12. device -- */

.vlingo-home-v3 .vh-device {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
}

.vlingo-home-v3 .vh-device-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.vlingo-home-v3 .vh-device-flow li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--vh-line);
  border-radius: 999px;
  background: var(--vh-surface);
  color: var(--vh-ink-soft);
  font-size: 0.84rem;
  font-weight: 700;
}

.vlingo-home-v3 .vh-device-flow li:not(:last-child)::after {
  content: "→";
  color: var(--vh-orange);
  font-weight: 800;
}

.vlingo-home-v3 .vh-device-media {
  overflow: hidden;
  /* The V07 shell is white, so a plain surface card behind it read as a white
     slab pasted onto the warm page. The plate is tinted a shade deeper than
     the section it sits in, which gives the white device something to sit
     against instead of fighting it. */
  padding: 18px 22px;
  border: 1px solid rgba(120, 88, 48, 0.16);
  border-radius: var(--vh-radius-lg);
  background:
    radial-gradient(112% 82% at 50% 6%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 58%),
    linear-gradient(158deg, #efe8dc 0%, #e2d8c6 100%);
  box-shadow: 0 16px 36px -26px rgba(64, 44, 20, 0.45);
}

.vlingo-home-v3 .vh-device-media img {
  width: 100%;
  height: auto;
}

.vlingo-home-v3 .vh-device .button {
  margin-top: 20px;
}

/* --------------------------------------------------------- 13. final cta -- */

.vlingo-home-v3 .vh-final {
  padding: 72px 0 80px;
  text-align: center;
}

.vlingo-home-v3 .vh-final h2 {
  margin: 0 0 20px;
  color: var(--vh-ink);
  font-size: clamp(1.6rem, 4.4vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ------------------------------------------------------------ 14. motion --- */

.vlingo-home-v3 .vh-slide .vh-letter.is-filled,
.vlingo-home-v3 .vh-slide .vh-sentence-line {
  transition: color 200ms ease, border-color 200ms ease, opacity 200ms ease;
}

.vlingo-home-v3 .vh-slide:not(.is-active) .vh-sentence-line {
  opacity: 0.5;
}

@media (prefers-reduced-motion: reduce) {
  .vlingo-home-v3 .vh-slide .vh-letter.is-filled,
  .vlingo-home-v3 .vh-slide .vh-sentence-line,
  .vlingo-home-v3 .vh-showcase-viewport {
    transition: none;
  }

  /* The feature cards only lift on hover; without motion they must stay put
     rather than jump. */
  .vlingo-home-v3 .vh-feature,
  .vlingo-home-v3 .vh-feature-icon {
    transition: none;
  }

  .vlingo-home-v3 .vh-feature:hover {
    transform: none;
  }
}

/* --------------------------------------------------------- 15. conversion -- */

/* The V3 completion prompt reuses the shared
   `.learning-preview-completion-modal*` classes so the overlay, panel and
   action buttons stay consistent with the rest of the site; only the close
   affordance is new. */
.vlingo-home-v3 .learning-preview-completion-modal__panel {
  position: relative;
}

.vlingo-home-v3 .vh-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--vh-muted);
  font: inherit;
  font-size: 1.3rem;
  line-height: 1;
}

.vlingo-home-v3 .vh-modal-close:hover {
  background: var(--vh-bg-alt);
  color: var(--vh-ink);
}

.vlingo-home-v3 .vh-modal-close:focus-visible {
  outline: 2px solid var(--focus-ring, #005fcc);
  outline-offset: 2px;
}

/* -------------------------------------------------------- 16. breakpoints -- */

@media (max-width: 900px) {
  .vlingo-home-v3 .vh-section {
    padding: 52px 0;
  }

  .vlingo-home-v3 .vh-journey {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vlingo-home-v3 .vh-features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vlingo-home-v3 .vh-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vlingo-home-v3 .vh-device {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .vlingo-home-v3 .vh-device-media {
    order: -1;
  }
}

@media (max-width: 620px) {
  .vlingo-home-v3 {
    --vh-gutter: 18px;
  }

  .vlingo-home-v3 .vh-section {
    padding: 42px 0;
  }

  /* The first screen has to hold the hero plus the first learning card without
     scrolling, so every block above the card is tightened here. */
  .vlingo-home-v3 .vh-hero {
    padding: 20px 0 34px;
  }

  .vlingo-home-v3 .vh-hero h1 {
    margin-bottom: 10px;
    font-size: clamp(1.6rem, 5.6vw, 1.9rem);
  }

  .vlingo-home-v3 .vh-hero-lead {
    margin-bottom: 14px;
    font-size: 0.92rem;
  }

  .vlingo-home-v3 .vh-showcase {
    width: auto;
    margin-top: 18px;
  }

  .vlingo-home-v3 .vh-showcase-nav {
    gap: 3px;
    margin-bottom: 10px;
  }

  .vlingo-home-v3 .vh-showcase-nav button {
    gap: 4px;
    min-height: 28px;
    padding: 0 7px;
    font-size: 0.76rem;
  }

  .vlingo-home-v3 .vh-showcase-nav button .vh-nav-dot {
    width: 6px;
    height: 6px;
  }

  .vlingo-home-v3 .vh-card {
    padding: 12px;
  }

  /* The site-wide mobile rule makes every `.button` full width, which pushed the
     secondary login entry onto a second row and cost ~58px of first-screen
     height. A content-sized primary pill keeps both entries on one row while
     still separating their weight. */
  .vlingo-home-v3 .vh-cta {
    width: auto;
    flex: 0 0 auto;
    padding: 0 24px;
  }

  .vlingo-home-v3 .vh-hero-actions {
    gap: 6px 14px;
  }

  .vlingo-home-v3 .vh-cta-login {
    min-height: 40px;
  }

  .vlingo-home-v3 .vh-slide-lead {
    margin-bottom: 8px;
  }

  .vlingo-home-v3 .vh-familiarity {
    margin-top: 12px;
  }

  .vlingo-home-v3 .vh-familiarity button {
    min-height: 38px;
  }

  .vlingo-home-v3 .vh-showcase-controls button {
    display: none;
  }

  .vlingo-home-v3 .vh-showcase-controls {
    margin-top: 10px;
  }

  .vlingo-home-v3 .vh-card {
    --vh-visual-h: 104px;
  }

  /* Eight full-width cards made this the longest section on the page. A two-up
     tile grid keeps the same eight steps in well under half the height. */
  .vlingo-home-v3 .vh-journey {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 20px;
  }

  .vlingo-home-v3 .vh-journey li {
    padding: 11px 11px 11px 12px;
  }

  .vlingo-home-v3 .vh-journey-index {
    font-size: 0.64rem;
  }

  .vlingo-home-v3 .vh-journey strong {
    margin-top: 2px;
    font-size: 0.9rem;
  }

  .vlingo-home-v3 .vh-journey p {
    margin-top: 4px;
    font-size: 0.76rem;
    line-height: 1.42;
  }

  /* Six stacked cards would make this the longest section on the page, so on a
     phone the features stay a two-up tile grid: icon and title are readable at
     a glance while swiping, and the description is trimmed rather than the
     figure. */
  .vlingo-home-v3 .vh-features-grid {
    gap: 8px;
    margin-top: 20px;
  }

  .vlingo-home-v3 .vh-feature {
    column-gap: 8px;
    row-gap: 4px;
    padding: 12px 11px;
    border-radius: var(--vh-radius);
  }

  .vlingo-home-v3 .vh-feature-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
  }

  .vlingo-home-v3 .vh-feature-icon svg {
    width: 20px;
    height: 20px;
  }

  .vlingo-home-v3 .vh-feature-metric {
    font-size: 1.45rem;
  }

  .vlingo-home-v3 .vh-feature-metric small {
    margin-left: 3px;
    font-size: 0.7rem;
  }

  .vlingo-home-v3 .vh-feature-kicker {
    font-size: 0.72rem;
  }

  .vlingo-home-v3 .vh-feature-title {
    font-size: 0.94rem;
  }

  .vlingo-home-v3 .vh-feature-text {
    font-size: 0.77rem;
    line-height: 1.45;
  }

  .vlingo-home-v3 .vh-final {
    padding: 54px 0 62px;
  }
}

@media (max-width: 380px) {
  .vlingo-home-v3 .vh-hero h1 {
    font-size: clamp(1.5rem, 6.2vw, 1.72rem);
  }

  .vlingo-home-v3 .vh-card {
    --vh-visual-h: 108px;
  }

  .vlingo-home-v3 .vh-letter {
    min-width: 22px;
    height: 30px;
    font-size: 0.94rem;
  }

  .vlingo-home-v3 .vh-test-options {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Taller phones can afford a bigger illustration without pushing the first card
   below the fold; short ones keep the compact height. */
@media (max-width: 620px) and (min-height: 780px) {
  .vlingo-home-v3 .vh-card {
    --vh-visual-h: 168px;
  }
}

@media (max-width: 620px) and (min-height: 900px) {
  .vlingo-home-v3 .vh-card {
    --vh-visual-h: 196px;
  }
}

@media (min-width: 901px) {
  .vlingo-home-v3 .vh-showcase {
    /* 640px + 10%: the cards were noticeably narrower than the hero copy.
       Set as the width, not a max-width — a cap cannot widen the 660px base. */
    width: min(100%, 704px);
  }

  .vlingo-home-v3 .vh-showcase-track {
    gap: 0;
  }

  /* On a wide card the illustration sits beside the text instead of on top of
     it, which keeps it legible without stretching the box. */
  .vlingo-home-v3 .vh-card {
    --vh-visual-h: 262px;
    display: grid;
    /* `auto`, not a fixed 210px track: the illustration is height-driven
       (262px square), so a narrower track just let it spill under/over the
       title column. The track now hugs the artwork. */
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "media head"
      "media lead"
      "media content";
    grid-template-rows: auto auto 1fr;
    align-content: start;
    column-gap: 22px;
  }

  .vlingo-home-v3 .vh-slide-head {
    grid-area: head;
  }

  .vlingo-home-v3 .vh-slide-lead {
    grid-area: lead;
  }

  .vlingo-home-v3 .vh-visual {
    grid-area: media;
    align-self: start;
  }

  .vlingo-home-v3 .vh-card-content {
    grid-area: content;
    min-width: 0;
  }

}

/* --------------------------------------------- 17. real learning-page parity -- */

/* Values copied from WEB/learn/vocabulary/vocabulary-runtime.css and
   vocabulary-responsive.css, scaled for the homepage carousel. */

/* 不熟 / 认识 / 熟悉 — the real control is red / orange / green. */
.vlingo-home-v3 .vh-familiarity button[data-vh-familiarity="difficult"] {
  border-color: #efb2ab;
  background: #fff1ef;
  color: #a64239;
}

.vlingo-home-v3 .vh-familiarity button[data-vh-familiarity="known"] {
  border-color: #f1c58d;
  background: #fff4e5;
  color: #ff6a00;
}

.vlingo-home-v3 .vh-familiarity button[data-vh-familiarity="familiar"] {
  border-color: #afd6c0;
  background: #edf8f2;
  color: #246b49;
}

.vlingo-home-v3 .vh-familiarity button[data-vh-familiarity="difficult"][aria-pressed="true"] {
  border-color: #c94f45;
  background: #c94f45;
  color: #ffffff;
}

.vlingo-home-v3 .vh-familiarity button[data-vh-familiarity="known"][aria-pressed="true"] {
  border-color: #ff6a00;
  background: #ff6a00;
  color: #ffffff;
}

.vlingo-home-v3 .vh-familiarity button[data-vh-familiarity="familiar"][aria-pressed="true"] {
  border-color: #357b57;
  background: #357b57;
  color: #ffffff;
}

/* Image recall: the real card asks for the word, not for a reveal. */
.vlingo-home-v3 .vh-recall-cue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

.vlingo-home-v3 .vh-recall-meaning {
  margin: 0;
  color: var(--vh-ink);
  font-size: 1.06rem;
  font-weight: 800;
  text-align: center;
}

.vlingo-home-v3 .vh-recall-cue .vh-audio {
  width: 42px;
  height: 42px;
}

.vlingo-home-v3 .vh-recall-actions {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.vlingo-home-v3 .vh-recall-option {
  display: inline-flex;
  align-items: center;
  /* Centred like the test card: the word is the only thing on show until an
     answer is picked, so left-aligning it just looked lopsided. */
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(220, 231, 238, 0.94);
  border-radius: 12px;
  background: var(--vh-surface);
  color: var(--vh-ink-soft);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 760;
  text-align: center;
}

.vlingo-home-v3 .vh-recall-option:disabled {
  cursor: default;
  opacity: 1;
}

.vlingo-home-v3 .vh-recall-option.is-correct {
  border-color: #167942;
  background: #d5f1de;
  color: #075f32;
  box-shadow: 0 6px 14px rgba(10, 108, 56, 0.12);
}

.vlingo-home-v3 .vh-recall-option.is-wrong {
  border-color: rgba(190, 77, 54, 0.58);
  background: #fff0ed;
  color: #a44935;
}

.vlingo-home-v3 .vh-recall-word {
  flex: 0 0 auto;
}

.vlingo-home-v3 .vh-recall-meaning-inline {
  min-width: 0;
  overflow: hidden;
  color: currentColor;
  font-size: 0.86em;
  font-weight: 680;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vlingo-home-v3 .vh-recall-meaning-inline::before {
  content: "·";
  margin-right: 6px;
  opacity: 0.72;
}

.vlingo-home-v3 .vh-option-icon {
  font-size: 1.08em;
  font-weight: 900;
  line-height: 1;
}

/* Empty until an answer is picked; drop it so its flex gap stops nudging the
   word a few pixels off centre. */
.vlingo-home-v3 .vh-option-icon:empty {
  display: none;
}

/* Comprehensive test: the real question head carries the task label + index. */
.vlingo-home-v3 .vh-test-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  color: var(--vh-muted);
}

.vlingo-home-v3 .vh-test-head span {
  color: var(--vh-orange-ink);
  font-size: 0.82rem;
  font-weight: 800;
}

.vlingo-home-v3 .vh-test-head small {
  font-size: 0.82rem;
  font-weight: 700;
}

.vlingo-home-v3 .vh-test-options {
  margin-top: 10px;
}

/* Spelling practice: the real cue carries a prompt line above the audio row. */
.vlingo-home-v3 .vh-spelling-prompt {
  margin: 10px 0 0;
  color: var(--vh-muted);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.vlingo-home-v3 .vh-spelling-translation {
  margin: 0;
  color: var(--vh-ink);
  font-size: 0.98rem;
  font-weight: 780;
  line-height: 1.45;
  text-align: center;
}

/* The moved-out sentence audio control keeps the real card's small size. */
.vlingo-home-v3 .vh-card-content > .vh-audio {
  width: 34px;
  height: 34px;
}

.vlingo-home-v3 .vh-card-content > .vh-audio svg {
  width: 18px;
  height: 18px;
}

/* A long headword takes its own row so it never breaks mid-word; the audio
   control and the meaning sit next to each other, centred beneath it. Both are
   pinned to their content width or one of them absorbs the free space and the
   pair drifts apart. */
/* The example card already shows the word inside the breakdown below, so the
   standalone word stays smaller than the flashcard headline. */
.vlingo-home-v3 .vh-sentence-word .vh-word {
  max-width: 100%;
  font-size: clamp(1.15rem, 4.2vw, 1.45rem);
}

/* The meaning is a block-level <p>, so collapsing it to its content width and
   centring it with auto margins works no matter how it is nested. */
.vlingo-home-v3 [data-vh-slide="structure"] [data-vh-meaning],
.vlingo-home-v3 [data-vh-slide="cloze"] [data-vh-meaning] {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}