/* Shared by both mock-ups: the frames that hold the moving scenes, the example tabs and the films row.
   Uses the page's own colour variables (--ink --muted --hair --core --bg2 --accent --accent-soft). */
.kit { display: block; width: 100%; border: 0; background: transparent; }
.kit[data-scene="hero"] { aspect-ratio: 1600 / 1000; }
.kit[data-scene="examples"] { aspect-ratio: 1500 / 820; }
.kit[data-scene="genius"] { aspect-ratio: 1400 / 940; }
.kit[data-scene="hero2"] { aspect-ratio: 1600 / 940; }
.kit[data-scene="genius2"] { aspect-ratio: 1400 / 1080; }
.kit[data-scene="hero3"] { aspect-ratio: 1600 / 940; }
.kit[data-scene="genius3"] { aspect-ratio: 1600 / 1100; }
.kit[data-scene="hero4"] { aspect-ratio: 1600 / 972; }
.kit[data-scene="vocab4"] { aspect-ratio: 1600 / 1000; }
.kit[data-scene="smartedits"] { aspect-ratio: 1600 / 1000; }
@media (max-width: 640px) {
  .kit[data-scene="hero"] { aspect-ratio: 1080 / 1200; }
  .kit[data-scene="examples"] { aspect-ratio: 1080 / 1260; }
  .kit[data-scene="genius"] { aspect-ratio: 1080 / 1240; }
  .kit[data-scene="hero2"] { aspect-ratio: 1080 / 1130; }
  .kit[data-scene="genius2"] { aspect-ratio: 1080 / 1400; }
  .kit[data-scene="hero3"] { aspect-ratio: 1080 / 1130; }
  .kit[data-scene="genius3"] { aspect-ratio: 1080 / 1400; }
  .kit[data-scene="hero4"] { aspect-ratio: 1080 / 1190; }
  .kit[data-scene="vocab4"] { aspect-ratio: 1080 / 1190; }
  .kit[data-scene="smartedits"] { aspect-ratio: 1080 / 1340; }
}
/* Example tabs */
.ex-tabs { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 5px; border-radius: 999px; border: 1px solid var(--hair); background: var(--bg2); }
.ex-tabs button { height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 600 14.5px var(--font); cursor: pointer; transition: background .2s, color .2s; }
.ex-tabs button span { font-weight: 500; opacity: .7; }
.ex-tabs button.on { background: var(--ink); color: var(--bg2); }
.ex-said { max-width: 760px; margin: 18px auto 0; font-size: 15px; color: var(--muted); text-align: center; }
.ex-said b { font-weight: 600; color: var(--ink); margin-right: 6px; font-style: normal; }
.ex-said span { font-style: italic; }
/* Films */
.films { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 48px; text-align: left; }
.film { position: relative; margin: 0; cursor: pointer; }
.film video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 22px; background: #111; border: 1px solid var(--hair);
  box-shadow: 0 30px 60px -36px rgba(10,14,30,.45); }
.film .snd { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(12,15,24,.62); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: none; }
.film .snd svg { width: 18px; height: 18px; }
.film .snd .on { display: none; } .film.sound .snd .on { display: block; } .film.sound .snd .off { display: none; }
.film figcaption { margin-top: 12px; font-weight: 600; font-size: 16px; letter-spacing: -.01em; }
.film figcaption span { display: block; margin-top: 2px; font-weight: 400; font-size: 14px; color: var(--muted); }
@media (max-width: 860px) {
  .films { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 36px -20px 0; padding: 0 20px 6px; scrollbar-width: none; }
  .films::-webkit-scrollbar { display: none; }
  .film { flex: 0 0 62%; scroll-snap-align: center; }
}
@media (max-width: 480px) { .ex-tabs button span { display: none; } .ex-tabs button { padding: 0 14px; } }