/* Zenniz Lite home (index.html #lite). Classes start with lh-. Uses the brand tokens from styles.css. */

/* hero: the ad's own footage, muted and looping, under a navy shade */
.lh-hero { padding-block: 8px 0; }
.lh-hero__card { position: relative; overflow: hidden; border-radius: 26px; background: var(--navy); color: #fff; min-height: clamp(380px, 38vw, 500px); display: grid; align-items: end; }
.lh-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lh-hero__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,30,66,.9) 0%, rgba(0,30,66,.62) 45%, rgba(0,30,66,.05) 80%), linear-gradient(0deg, rgba(0,30,66,.55) 0%, rgba(0,30,66,0) 45%); }
[dir="rtl"] .lh-hero__shade { background: linear-gradient(270deg, rgba(0,30,66,.9) 0%, rgba(0,30,66,.62) 45%, rgba(0,30,66,.05) 80%), linear-gradient(0deg, rgba(0,30,66,.55) 0%, rgba(0,30,66,0) 45%); }
.lh-hero__copy { position: relative; display: grid; gap: 14px; justify-items: start; padding: clamp(24px, 4vw, 52px); max-width: 640px; }
.lh-hero__logo { width: clamp(96px, 9vw, 124px); height: auto; }
.lh-hero h1 { color: #fff; font: italic 800 clamp(36px, 5vw, 64px)/1 var(--f-display); letter-spacing: -.015em; }
:lang(ar) .lh-hero h1, :lang(ko) .lh-hero h1 { font-style: normal; }
.lh-hero__sub { color: var(--inv-text); font-size: clamp(15.5px, 1.5vw, 19px); line-height: 1.5; max-width: 46ch; }
.lh-hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.lh-hero__cta .pill svg { width: 16px; height: 16px; flex: none; }
.lh-hero__cta button.pill { cursor: pointer; font: inherit; font-weight: 600; }

/* sections */
.lh-sec { padding-top: clamp(40px, 5vw, 64px); }
.lh-h2 { font-size: clamp(26px, 3vw, 38px); margin-bottom: clamp(14px, 2vw, 22px); }

/* Scan · Play · Review */
.lh-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lh-step { background: var(--card); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); }
.lh-step figure { margin: 0; aspect-ratio: 4 / 3; background: #dfe6f3; }
.lh-step img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lh-step > div { padding: 14px 18px 18px; display: grid; gap: 6px; }
.lh-step b { display: flex; align-items: center; gap: 10px; font: 700 19px/1.2 var(--f-display); color: var(--ink); }
.lh-step b i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 13px/1 var(--f-mono); font-style: normal; }
.lh-step p { color: var(--muted); font-size: 15px; line-height: 1.5; }

/* Every shot tracked */
.lh-track { background: var(--navy); color: #fff; border-radius: 24px; padding: clamp(20px, 3vw, 36px); display: grid; gap: 18px; }
.lh-track__hd { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 8px 40px; align-items: end; }
.lh-track .lh-h2 { color: #fff; margin: 0; }
.lh-track__hd p { color: var(--inv-text); font-size: clamp(15px, 1.4vw, 17px); line-height: 1.5; max-width: 60ch; }
.lh-track__v { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 1; background: #0b1424; }
.lh-track__v video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* guides */
.lh-guides-w { padding-bottom: clamp(40px, 5vw, 64px); scroll-margin-top: 80px; }
.lh-guides { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lh-guide { display: grid; grid-template-rows: auto 1fr; height: 100%; background: var(--card); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.lh-guide:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.lh-guide:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.lh-guide figure { margin: 0; aspect-ratio: 16 / 9; background: #dfe6f3; overflow: hidden; }
.lh-guide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.lh-guide__b { position: relative; display: grid; gap: 4px; align-content: start; padding: 14px 52px 18px 18px; }
[dir="rtl"] .lh-guide__b { padding: 14px 18px 18px 52px; }
.lh-guide__b small { font: 600 12.5px/1.2 var(--f-body); color: var(--primary); }
.lh-guide__b b { font: 700 19px/1.2 var(--f-display); }
.lh-guide__b > span:not(.lh-guide__go) { color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.lh-guide__go { position: absolute; inset-inline-end: 16px; top: 16px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; }
.lh-guide__go svg { width: 16px; height: 16px; }
[dir="rtl"] .lh-guide__go svg { transform: scaleX(-1); }
.lh-later { margin-top: 16px; color: var(--muted); font-size: 14.5px; }

/* the film */
.lh-film { padding: 0; border: 0; background: transparent; width: min(1100px, 92vw); max-width: none; overflow: visible; }
.lh-film.is-upright { width: min(420px, 92vw); }
.lh-film::backdrop { background: rgba(0, 10, 26, .82); }
.lh-film video { display: block; width: 100%; max-height: 86vh; border-radius: 16px; background: #000; }
.lh-film__x { position: absolute; top: -46px; inset-inline-end: 0; width: 38px; height: 38px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); font-size: 17px; cursor: pointer; }

@media (max-width: 860px) {
  .lh-steps, .lh-guides { grid-template-columns: minmax(0, 1fr); }
  .lh-step { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; }
  .lh-step figure { aspect-ratio: 1 / 1; height: 100%; }
  .lh-step > div { padding: 12px 14px; }
  .lh-guide { grid-template-rows: none; grid-template-columns: 112px minmax(0, 1fr); }
  .lh-guide figure { aspect-ratio: auto; height: 100%; }
  .lh-track__hd { grid-template-columns: minmax(0, 1fr); }
  .lh-track__v { aspect-ratio: 2 / 1; }   /* on phones: the near court only (left half of the showcase) */
  .lh-track__v video { object-position: 0 50%; }
  [dir="rtl"] .lh-track__v video { object-position: 0 50%; }
}
@media (max-width: 560px) {
  .lh-hero__card { min-height: 440px; }
  .lh-hero__shade { background: linear-gradient(0deg, rgba(0,30,66,.94) 0%, rgba(0,30,66,.7) 55%, rgba(0,30,66,.2) 100%); }
  .lh-hero__cta .pill { padding: 10px 15px; font-size: 14px; }
}
/* the Zenniz App card: a phone screenshot, framed on the Performance Rating */
.lh-guide--app figure { background: #eef2f8; }
.lh-guide--app img { object-position: 50% 42%; }
@media (max-width: 860px) { .lh-guide--app img { object-fit: contain; } }