/* ============================================================
   AI Lipsync & Voice-Cloning Showcase
   Interactive case/language switcher + drag-reveal comparison.
   NOTE: this template sets html { font-size: 62.5% } so 1rem = 10px.
   Sizes below are on that scale; fonts use the site tokens
   (--_font-default = Funnel Sans, --_font-accent = Funnel Display).
   ============================================================ */

.ls-showcase {
  --ls-radius: 24px;
  --ls-gap: clamp(1.6rem, 2vw, 2.8rem);
  --ls-stage-ratio: 16 / 9;
  --ls-stage-max: 880px;
  position: relative;
  font-family: var(--_font-default);
}
.ls-showcase * { box-sizing: border-box; }

/* ---- Intro / heading ---- */
.ls-showcase__head {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  margin-bottom: clamp(2.8rem, 4vw, 5.2rem);
  max-width: 72rem;
}
.ls-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  width: fit-content;
  padding: 0.8rem 1.6rem;
  border-radius: 100px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--t-bright);
  font-size: 1.3rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  line-height: 1;
}
.ls-eyebrow::before {
  content: "";
  width: 0.8rem; height: 0.8rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0.4rem rgba(var(--accent-rgb), 0.25);
  animation: ls-pulse 2.4s ease-in-out infinite;
}
@keyframes ls-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(.7)} }

.ls-showcase__title {
  font-family: var(--_font-accent);
  font-size: clamp(3.2rem, 5vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: var(--fw-medium);
  color: var(--t-bright);
  margin: 0;
}
.ls-showcase__title em {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.ls-showcase__lead {
  color: var(--t-muted);
  font-family: var(--_font-default);
  font-size: clamp(1.6rem, 1.4vw, 1.8rem);
  line-height: 1.55;
  margin: 0;
}

/* ---- Case tabs ---- */
.ls-cases {
  display: flex;
  gap: 0.8rem;
  overflow-x: auto;
  /* overflow-x:auto forces overflow-y to auto, which clips anything extending
     below the row — so tabs use an UPWARD lift (into the top padding) and carry
     no downward glow that could be sliced. */
  padding: 0.7rem 0.4rem 0.7rem;
  margin-bottom: calc(var(--ls-gap) - 0.4rem);
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* drag-to-browse + gentle snap for effortless navigation */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  cursor: grab;
  /* edge fades on both sides signal "more to scroll" without a scrollbar */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3.2rem, #000 calc(100% - 4.8rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 3.2rem, #000 calc(100% - 4.8rem), transparent);
  transition: -webkit-mask-image .3s, mask-image .3s;
}
/* when scrolled to the very start, drop the left fade so the active tab is crisp */
.ls-cases[data-at-start="1"] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 4.8rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 4.8rem), transparent);
}
.ls-cases[data-at-end="1"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 3.2rem, #000 100%);
  mask-image: linear-gradient(to right, transparent, #000 3.2rem, #000 100%);
}
.ls-cases.is-grabbing { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.ls-cases.is-grabbing .ls-case-tab { pointer-events: none; }
.ls-cases::-webkit-scrollbar { display: none; }
/* Single-case (inner-page) embeds don't need a tab bar */
.ls-showcase__widget--single .ls-cases { display: none; }
.ls-case-tab {
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.3rem;
  padding: 1.1rem 2rem;
  border-radius: 1.6rem;
  border: 1px solid var(--st-muted);
  background: var(--base-tint);
  color: var(--t-bright);
  cursor: pointer;
  transition: border-color .25s, color .25s, background .3s cubic-bezier(.5,.05,.1,1),
              transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
  white-space: nowrap;
  font-family: var(--_font-accent);
}
.ls-case-tab:hover {
  border-color: rgba(var(--accent-rgb), .55);
  background: rgba(var(--accent-rgb), .06);
  transform: translateY(-2px);   /* lifts UP into the top padding — never clipped */
}
.ls-case-tab:active { transform: translateY(0) scale(.97); }
.ls-case-tab__name { font-weight: var(--fw-medium); font-size: 1.7rem; line-height: 1.2; }
.ls-case-tab__meta {
  font-size: 1.1rem; letter-spacing: .08em; opacity: .6;
  text-transform: uppercase; line-height: 1.2; font-weight: var(--fw-semibold);
}
.ls-case-tab.is-active {
  border-color: transparent;
  background: var(--accent);
  color: #161616;
  /* inset highlight reads as depth without overflowing the clipped row */
  box-shadow: inset 0 0.1rem 0 rgba(255,255,255,.35);
}
.ls-case-tab.is-active:hover { background: var(--accent); }
.ls-case-tab.is-active .ls-case-tab__meta { opacity: .7; }

/* ---- centered interactive column ---- */
.ls-stage,
.ls-caption,
.ls-langs { max-width: var(--ls-stage-max); margin-left: auto; margin-right: auto; }

/* ---- Main stage ---- */
.ls-stage {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ls-stage-ratio);
  border-radius: var(--ls-radius);
  overflow: hidden;
  background: #0b0b0b;
  box-shadow: 0 3rem 8rem -4rem rgba(0,0,0,.7);
  isolation: isolate;
  touch-action: none;
  user-select: none;
}
.ls-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .45s ease;
}
/* crossfade the footage out while a new case/language loads in */
.ls-stage.is-switching .ls-layer { opacity: 0; }
/* output (after) full-frame beneath; original (before) clipped on top,
   revealed from the LEFT edge up to the split line. */
.ls-layer--after  { z-index: 1; }
.ls-layer--before { z-index: 2; }
.ls-stage[data-mode="compare"] .ls-layer--before {
  clip-path: inset(0 calc(100% - var(--ls-split, 50%)) 0 0);
}
.ls-stage[data-mode="single"] .ls-layer--before { display: none; }

/* corner labels */
.ls-tag {
  position: absolute;
  top: 1.6rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1.3rem;
  border-radius: 100px;
  font-size: 1.2rem;
  font-weight: var(--fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.16);
  pointer-events: none;
  line-height: 1;
}
.ls-tag--before { left: 1.6rem; }
.ls-tag--after  { right: 1.6rem; background: rgba(var(--accent-rgb), .9); color: #161616; border-color: transparent; }
.ls-stage[data-mode="single"] .ls-tag--before { display: none; }
.ls-tag i { font-size: 1.4rem; }

/* drag handle */
.ls-handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--ls-split, 50%);
  width: 2px;
  z-index: 5;
  background: rgba(255,255,255,.9);
  transform: translateX(-1px);
  cursor: ew-resize;
}
.ls-stage[data-mode="single"] .ls-handle { display: none; }
.ls-handle::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 6rem; transform: translateX(-50%);
  cursor: ew-resize;
}
.ls-handle__grip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 4.6rem; height: 4.6rem;
  border-radius: 50%;
  background: #fff;
  color: #161616;
  display: grid;
  place-items: center;
  box-shadow: 0 0.6rem 2.4rem rgba(0,0,0,.45);
  font-size: 1.7rem;
}
.ls-handle__grip::after {
  content: "\2039\00a0\203a";
  font-weight: 700;
  letter-spacing: -2px;
}

/* center play / loading overlay */
.ls-stage__overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.ls-stage.is-paused .ls-stage__overlay { opacity: 1; pointer-events: auto; cursor: pointer; }
.ls-stage__play {
  width: 7.2rem; height: 7.2rem;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), .92);
  color: #161616;
  display: grid; place-items: center;
  font-size: 2.8rem;
  border: none;
  cursor: pointer;
}
.ls-spinner {
  position: absolute; top: 50%; left: 50%;
  z-index: 8;
  width: 4.4rem; height: 4.4rem;
  margin: -2.2rem 0 0 -2.2rem;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  animation: ls-spin .8s linear infinite;
}
.ls-stage.is-loading .ls-spinner { opacity: 1; }
@keyframes ls-spin { to { transform: rotate(360deg); } }

/* stage controls (mute / replay) bottom-right */
.ls-stage__controls {
  position: absolute;
  right: 1.6rem; bottom: 3.4rem;
  z-index: 8;
  display: flex;
  gap: 1rem;
}
.ls-ctrl {
  width: 4.4rem; height: 4.4rem;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 1.7rem;
  transition: background .2s, transform .2s, color .2s;
}
.ls-ctrl:hover { background: rgba(var(--accent-rgb), .9); color: #161616; transform: translateY(-2px); }
.ls-ctrl.is-on { background: rgba(var(--accent-rgb), .9); color: #161616; }

/* volume group — slider expands on hover/focus */
.ls-vol { display: flex; align-items: center; gap: 0.8rem; }
.ls-vol__slider {
  width: 0;
  height: 4.4rem;
  display: flex;
  align-items: center;
  cursor: pointer;
  opacity: 0;
  overflow: hidden;
  touch-action: none;
  transition: width .3s cubic-bezier(0.22, 1, 0.36, 1), opacity .25s;
}
.ls-vol:hover .ls-vol__slider,
.ls-vol:focus-within .ls-vol__slider { width: 8rem; opacity: 1; }
.ls-vol__track {
  position: relative;
  width: 100%;
  height: 0.5rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, .28);
}
.ls-vol__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 100%;
  border-radius: 100px;
  background: #fff;
}
.ls-vol__thumb {
  position: absolute;
  top: 50%; left: 100%;
  width: 1.2rem; height: 1.2rem;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .5);
}
@media (max-width: 767px) {
  /* keep the slider open on touch where there's no hover */
  .ls-vol__slider { width: 7rem; opacity: 1; }
}

/* ---- seek bar ---- */
.ls-seek {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 7;
  height: 2.6rem;
  display: flex;
  align-items: flex-end;
  padding: 0 0;
  cursor: pointer;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent);
}
.ls-seek__track {
  position: relative;
  width: 100%;
  height: 0.5rem;
  background: rgba(255,255,255,.25);
  transition: height .15s;
}
.ls-seek:hover .ls-seek__track { height: 0.8rem; }
.ls-seek__fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--accent);
}
.ls-seek__thumb {
  position: absolute;
  top: 50%; left: 0;
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 0.2rem 0.8rem rgba(0,0,0,.5);
  opacity: 0;
  transition: opacity .15s;
}
.ls-seek:hover .ls-seek__thumb,
.ls-stage.is-seeking .ls-seek__thumb { opacity: 1; }

/* ---- caption + voice note ---- */
.ls-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  margin-top: var(--ls-gap);
}
.ls-caption__text {
  flex: 1 1 32rem;
  color: var(--t-muted);
  font-size: 1.6rem;
  line-height: 1.5;
  margin: 0;
}
.ls-caption__text strong { color: var(--t-bright); font-weight: var(--fw-semibold); }
.ls-caption__text.ls-anim { animation: ls-fade-up .5s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes ls-fade-up {
  from { opacity: 0; transform: translateY(0.5rem); }
  to   { opacity: 1; transform: none; }
}
.ls-voice-note {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem 1.6rem;
  border-radius: 100px;
  background: rgba(var(--accent-rgb), .12);
  border: 1px solid rgba(var(--accent-rgb), .3);
  color: var(--t-bright);
  font-size: 1.35rem;
  font-weight: var(--fw-medium);
  white-space: nowrap;
  line-height: 1;
}
.ls-voice-note i { color: var(--accent); font-size: 1.6rem; }

/* ---- language switcher (segmented control with sliding indicator) ---- */
.ls-langs {
  position: relative;
  display: flex;
  flex-wrap: nowrap;            /* single row — scrolls instead of orphaning a chip */
  gap: 0.4rem;
  width: fit-content;          /* hugs content when it fits, caps at the column when it doesn't */
  max-width: min(100%, var(--ls-stage-max));
  margin-top: var(--ls-gap);
  padding: 0.5rem;
  border-radius: 100px;
  border: 1px solid var(--st-muted);
  background: var(--base-tint);
  box-shadow: inset 0 0.1rem 0.2rem rgba(0,0,0,.18);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.ls-langs::-webkit-scrollbar { display: none; }
.ls-langs.is-grabbing { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.ls-langs.is-grabbing .ls-lang { pointer-events: none; }

/* scroll affordance: gradient fades pinned to the rail edges (kept aligned to the
   viewport by JS as the rail scrolls), shown only when there's more to reveal */
.ls-langs__fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 4.4rem;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  display: flex;
  align-items: center;
  transition: opacity .25s ease;
  will-change: transform, opacity;
}
.ls-langs__fade--l {
  left: 0;
  justify-content: flex-start;
  border-radius: 100px 0 0 100px;
  background: linear-gradient(to right, var(--base-tint) 35%, transparent);
}
.ls-langs__fade--r {
  right: 0;
  justify-content: flex-end;
  border-radius: 0 100px 100px 0;
  background: linear-gradient(to left, var(--base-tint) 35%, transparent);
}
.ls-langs__fade.is-on { opacity: 1; }
/* a soft chevron hint inside each fade */
.ls-langs__fade i {
  color: var(--t-bright);
  font-size: 1.6rem;
  opacity: .8;
}
.ls-langs__fade--l i { margin-left: 0.4rem; animation: ls-nudge-l 1.6s ease-in-out infinite; }
.ls-langs__fade--r i { margin-right: 0.4rem; animation: ls-nudge-r 1.6s ease-in-out infinite; }
@keyframes ls-nudge-r { 0%,100%{ transform: translateX(0) } 50%{ transform: translateX(0.3rem) } }
@keyframes ls-nudge-l { 0%,100%{ transform: translateX(0) } 50%{ transform: translateX(-0.3rem) } }
/* the green pill that glides under the active language */
.ls-langs__indicator {
  position: absolute;
  top: 0; left: 0;
  width: var(--w, 0);
  height: var(--h, 3.8rem);
  border-radius: 100px;
  background: var(--accent);
  box-shadow: 0 0.6rem 1.6rem -0.6rem rgba(var(--accent-rgb), .65);
  transform: translate(var(--x, 0), var(--y, 0));
  transition: transform .55s cubic-bezier(.5, .05, .1, 1),
              width .55s cubic-bezier(.5, .05, .1, 1),
              height .55s cubic-bezier(.5, .05, .1, 1);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.ls-langs__indicator.is-ready { opacity: 1; }
.ls-langs.no-anim .ls-langs__indicator { transition: none; }
.ls-lang {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  height: 3.8rem;
  padding: 0 1.6rem;
  border-radius: 100px;
  border: none;
  background: transparent;
  color: var(--t-bright);
  cursor: pointer;
  font-family: var(--_font-accent);
  font-size: 1.5rem;
  font-weight: var(--fw-medium);
  transition: color .35s ease, background .25s ease;
  line-height: 1;
  animation: ls-chip-in .45s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes ls-chip-in {
  from { opacity: 0; transform: translateY(0.7rem) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.ls-lang:hover { background: rgba(var(--accent-rgb), 0.1); }
.ls-lang.is-active { color: #161616; background: transparent; }
.ls-lang.is-active:hover { background: transparent; }
.ls-lang__dot {
  width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: var(--accent);
  transition: background .35s ease;
}
.ls-lang.is-active .ls-lang__dot { background: #161616; }
.ls-lang__type {
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  opacity: .55;
}
.ls-lang.is-active .ls-lang__type { opacity: .7; }

/* ---- feature strip ---- */
.ls-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 1.6rem;
  margin-top: clamp(2.8rem, 4vw, 4.8rem);
}
.ls-feature {
  /* pointer position (px, relative to the card) — set by js/card-spotlight.js */
  --mx: 50%;
  --my: 0%;
  position: relative;
  overflow: hidden;
  padding: 2.6rem;
  border-radius: 2rem;
  border: 1px solid var(--st-muted);
  background: var(--base-tint);
  transition: transform .45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color .45s ease,
              box-shadow .45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* keep content above the spotlight layers */
.ls-feature > * { position: relative; z-index: 1; }
/* hairline border that brightens toward the cursor */
.ls-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(220px circle at var(--mx) var(--my),
              rgba(var(--accent-rgb), .85),
              rgba(var(--accent-rgb), .12) 45%,
              transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
  z-index: 0;
}
/* soft spotlight on the card surface, tracking the cursor */
.ls-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx) var(--my),
              rgba(var(--accent-rgb), .12), transparent 60%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
  z-index: 0;
}
.ls-feature:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), .3);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .18),
    0 14px 30px -10px rgba(0, 0, 0, .5),
    0 30px 64px -24px rgba(var(--accent-rgb), .22);
}
.ls-feature:hover::before,
.ls-feature:hover::after { opacity: 1; }

.ls-feature__icon {
  position: relative;
  display: block;
  color: var(--accent);
  font-size: 3.6rem;
  line-height: 1;
  margin-bottom: 1.4rem;
  transition: transform .3s ease;
}
.ls-feature:hover .ls-feature__icon {
  transform: translateY(-2px);
}
.ls-feature__num {
  position: relative;
  font-family: var(--_font-accent);
  font-size: 2.6rem;
  font-weight: var(--fw-semibold);
  color: var(--t-bright);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.ls-feature__label {
  position: relative;
  font-family: var(--_font-default);
  color: var(--t-muted);
  font-size: 1.7rem;
  font-weight: var(--fw-medium);
  margin: 0.6rem 0 0;
  line-height: 1.35;
}
.ls-feature__detail {
  position: relative;
  margin: 1.6rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--st-muted);
  color: var(--t-muted);
  font-size: 1.6rem;
  line-height: 1.45;
}
.ls-feature__more { color: var(--accent); font-weight: var(--fw-semibold); }

/* ---- how-it-works process ---- */
.ls-process { margin-top: clamp(3.2rem, 5vw, 6rem); }
.ls-process__eyebrow {
  font-family: var(--_font-accent);
  font-size: 1.3rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: var(--fw-semibold);
  margin: 0 0 1.8rem;
}
.ls-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
  gap: 1.6rem;
}
.ls-step {
  position: relative;
  padding: 2.8rem 2.4rem;
  border-radius: 1.8rem;
  border: 1px solid var(--st-muted);
  background: var(--base-tint);
}
.ls-step__num {
  font-family: var(--_font-accent);
  font-size: 1.8rem;
  font-weight: var(--fw-semibold);
  color: var(--accent);
  letter-spacing: .02em;
}
.ls-step__title {
  font-family: var(--_font-accent);
  font-size: 2.2rem;
  font-weight: var(--fw-medium);
  color: var(--t-bright);
  margin: 1rem 0 1.2rem;
  line-height: 1.15;
}
.ls-step__text {
  color: var(--t-muted);
  font-size: 1.55rem;
  line-height: 1.55;
  margin: 0;
}

/* ---- responsive ---- */
@media (max-width: 767px) {
  .ls-tag { font-size: 1.05rem; padding: 0.6rem 1rem; top: 1.2rem; }
  .ls-tag--before { left: 1.2rem; } .ls-tag--after { right: 1.2rem; }
  .ls-handle__grip { width: 4rem; height: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ls-eyebrow::before, .ls-spinner { animation: none; }
  .ls-case-tab, .ls-lang { transition: none; }
  .ls-lang, .ls-caption__text.ls-anim { animation: none; }
  .ls-langs__indicator { transition: none; }
  .ls-langs__fade i { animation: none; }
  .ls-stage video { transition: none; }
  .ls-cases, .ls-langs { scroll-behavior: auto; }
}