/* Feature landing page live-ai-human-translation only (its mock UI from src/features/live-ai-human-translation.ts).
   Split from the former site.css; rules keep their original order. Page types and files: Base.astro. */
.flv__page { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; align-items: start; padding: 40px 72px 72px 96px; }
.flv .hero__lead { max-width: 600px; }
.flv__src .fhero__actions { justify-content: flex-start; }
.flv__count { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-500); white-space: nowrap; }
.flv__speaker { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 26px; padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--surface-1); }
.flv__speaker > span:nth-child(2) { display: flex; flex-direction: column; font-size: 14px; }
.flv__speaker b { font-weight: 500; }
.flv__speaker small { font-size: 12px; color: var(--ink-450); }
.flv-wave { display: inline-flex; align-items: center; gap: 3px; height: 26px; }
.flv-wave i { width: 3px; height: 30%; border-radius: 2px; background: var(--ink-300); animation: flvWave 1.1s ease-in-out infinite alternate; }
.flv-wave i:nth-child(3n) { animation-duration: .8s; }
.flv-wave i:nth-child(3n+1) { animation-duration: 1.3s; animation-delay: -.4s; }
.flv-wave i:nth-child(4n) { animation-delay: -.7s; }
.flv-wave--blue i, .flv-wave--player i { background: var(--blue-500); }
.flv__phone { position: relative; margin-top: 8px; padding: 18px; border-radius: 30px; background: var(--surface-ink-card); color: #fff; box-shadow: var(--shadow-ink-card); opacity: 0; translate: 0 20px; transition: opacity .8s var(--ease-out) .9s, translate 1s var(--ease-out) .9s; }
.fdoc.is-in .flv__phone { opacity: 1; translate: 0 0; }
.flv__phone-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.flv__phone-top small { font-size: 12.5px; color: var(--ink-300); }
.flv__langs { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .08); }
.flv__langs button { height: 28px; padding: 0 11px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--ink-300); cursor: pointer; transition: background .25s var(--ease-out), color .25s var(--ease-out); }
.flv__langs button.is-on { background: var(--blue-500); color: #fff; }
.flv__out { min-height: 168px; margin: 22px 4px 18px; font-size: 25px; line-height: 1.25; letter-spacing: -0.02em; text-wrap: pretty; }
.flv__caret { display: inline-block; width: 2px; height: 1em; margin-left: 3px; vertical-align: -0.12em; background: var(--blue-500); animation: caret 1s steps(1) infinite; }
.flv__player { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 18px; background: rgba(255, 255, 255, .07); }
.flv__play { width: 36px; height: 36px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--blue-500); color: #fff; }
.flv-wave--player { flex: 1; justify-content: space-between; }
.flv__player small { font-size: 12px; color: var(--ink-300); }
.flv-step__qr { width: 66px; height: 66px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid var(--line-100); color: var(--ink-900); }
.flv-step__langs { display: flex; flex-direction: column; gap: 5px; }
.flv-step__langs i { width: 52px; height: 22px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-style: normal; font-weight: 500; background: #fff; border: 1px solid var(--line-100); color: var(--ink-500); }
.flv-step__langs i.is-on { background: var(--blue-500); border-color: var(--blue-500); color: #fff; }
.flv-bento__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; margin-top: 52px; }
.flv-card { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 32px; border-radius: 28px; background: #fff; border: 1px solid var(--line-100); box-shadow: var(--shadow-soft); }
.flv-card__ico { width: 44px; height: 44px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--surface-1); color: var(--ink-700); }
.flv-card__ico--blue { background: var(--blue-500); color: #fff; }
.flv-prompt { margin-top: auto; padding: 16px 18px; border-radius: 18px; background: var(--surface-0); border: 1px solid var(--line-100); }
.flv-card .flv-prompt { margin-top: 26px; }
.flv-prompt small { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-450); }
.flv-prompt p { min-height: 4.6em; margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-900); }
.flv-neg { margin-top: 26px; display: flex; flex-direction: column; gap: 8px; }
.flv-neg small { font-size: 12.5px; color: var(--ink-450); }
.flv-neg__row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--surface-0); font-size: 15px; color: var(--ink-400); }
.flv-neg__row s { color: var(--negative); text-decoration-thickness: 1.5px; }
.flv-neg__row b { font-weight: 500; color: var(--ink-900); }
.flv-neg__row em { font-style: normal; font-size: 13px; padding: 2px 9px; border-radius: 999px; background: var(--surface-4); color: var(--ink-500); }
.flv-card--dark { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; background: var(--surface-ink-card); border: 0; color: #fff; }
.flv-card--dark .flv-card__copy, .flv-card--dark .flv-voices { position: relative; }
.flv-card--dark .flv-card__text { color: var(--ink-300); }
.flv-voices { display: flex; flex-direction: column; gap: 10px; }
.flv-voice { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 20px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); transition: background .3s var(--ease-out), border-color .3s var(--ease-out); }
.flv-voice.is-playing { background: rgba(37, 99, 235, .16); border-color: rgba(37, 99, 235, .5); }
.flv-voice__av { width: 44px; height: 44px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; color: #fff; }
.flv-voice__av--blue { background: linear-gradient(135deg, #5b97f8, #1d3fb8); }
.flv-voice__av--pink { background: linear-gradient(135deg, #f2b3d3, #c45d86); }
.flv-voice__name { display: flex; flex-direction: column; min-width: 0; font-size: 15px; }
.flv-voice__name b { font-weight: 500; }
.flv-voice__name small { font-size: 12.5px; color: var(--ink-300); }
.flv-wave--voice { flex: 1; justify-content: flex-end; height: 24px; }
.flv-wave--voice i { background: rgba(255, 255, 255, .25); animation-play-state: paused; height: 30%; }
.flv-voice.is-playing .flv-wave--voice i { background: var(--blue-380); animation-play-state: running; }
.flv-voice__btn { width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--ink-900); cursor: pointer; }
.flv-voice.is-playing .flv-voice__btn { background: var(--blue-500); color: #fff; }
.flv-voice__pause, .flv-voice.is-playing .flv-voice__play { display: none; }
.flv-voice.is-playing .flv-voice__pause { display: flex; }
.flv-voice__play { display: flex; }
.flv-hybrid__box { max-width: 980px; margin: 44px auto 0; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.flv-hybrid__switch button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 18px; font-size: 14px; }
.flv-hybrid__cards { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.flv-hcard { padding: 30px; border-radius: 28px; background: #fff; border: 1px solid var(--line-100); cursor: pointer; opacity: .62; transition: opacity .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out), translate .5s var(--ease-out); }
.flv-hcard.is-on { opacity: 1; border-color: var(--blue-500); box-shadow: 0 0 0 1px var(--blue-500), var(--shadow-float); translate: 0 -4px; }
.flv-hcard__list { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; font-size: 15.5px; }
.flv-hcard__list li { display: flex; align-items: center; gap: 12px; }
.flv-formats__list { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 36px; margin-top: 56px; }
.flv-formats .fsec__inner { display: block; }
@media (max-width: 1100px) {
  .flv__page { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 70px 48px 56px; }
  .flv__phone { max-width: 420px; }
  .flv-bento__grid { grid-template-columns: minmax(0, 1fr); }
  .flv-card--dark { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .flv-formats__list { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 720px) {
  .flv__page { padding: 22px 20px 48px; }
  .flv__speaker .flv-wave { display: none; }
  .flv__sep, .flv__place { display: none; }
  .flv__out { min-height: 0; font-size: 21px; }
  .flv-card { padding: 24px 20px; border-radius: 24px; }
  .flv-hybrid__cards { grid-template-columns: minmax(0, 1fr); }
  .flv-hcard { padding: 24px 20px; }
  .flv-wave--voice { display: none; }
  .flv-voice__name { flex: 1; }
}