/* =========================================================================
   Lamha landing page
   Loaded after /app/assets/app.css and built only on its tokens: every
   colour, radius, shadow, space and font below is one of its custom
   properties. This file adds the layouts a marketing page needs and nothing
   that competes with the design system. Logical properties throughout, so
   Arabic (the default) and English lay out from the same rules.
   ========================================================================= */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.lp { font-size: 16px; }
.lp main { display: block; }

/* The dashboard hides the wordmark on phones to make room for its tabs.
   The landing nav has no tabs there, so the name stays. */
.lp .brand-word { display: inline; }
.lp .brand-mark { color: #fff; }       /* the play glyph reads white on the gradient, as in the favicon */

/* Primary buttons take the logo's own blue-to-violet. brand-600 rather than the
   logo's lighter brand-500 at the start, so white text stays above 5:1 all along. */
.lp .btn-primary {
  background: linear-gradient(135deg, var(--brand-600) 0%, #5b4cf0 52%, var(--violet) 100%);
  box-shadow: 0 8px 22px -6px rgba(91,76,240,.5);
}
.lp .btn-primary:hover {
  background: linear-gradient(135deg, var(--brand-700) 0%, #4f3fe0 52%, #6d28d9 100%);
}
html[dir="rtl"] .lp .btn-primary { background: linear-gradient(225deg, var(--brand-600) 0%, #5b4cf0 52%, var(--violet) 100%); }
html[dir="rtl"] .lp .btn-primary:hover { background: linear-gradient(225deg, var(--brand-700) 0%, #4f3fe0 52%, #6d28d9 100%); }

/* =========================================================================
   Section scaffolding
   ========================================================================= */

.lp-section {
  position: relative;
  padding-block: 92px;
  scroll-margin-block-start: var(--nav-h);
}

.lp-section-soft {
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.72) 18%, rgba(255,255,255,.72) 82%, rgba(255,255,255,0) 100%);
}

.lp-head {
  max-width: 740px;
  margin-inline: auto;
  margin-block-end: 56px;
  text-align: center;
}

.lp-kicker {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 5px 14px; margin-block-end: 18px;
  border-radius: var(--r-pill);
  background: var(--brand-50); border: 1px solid var(--brand-100);
  color: var(--brand-700);
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
html[dir="rtl"] .lp-kicker { letter-spacing: 0; }

.lp-h2 {
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -0.028em;
  color: var(--ink);
}
html[dir="rtl"] .lp-h2 { line-height: 1.42; letter-spacing: 0; }

.lp-sub {
  margin-block: 16px 0;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-2);
}

/* =========================================================================
   Navigation (reuses .nav, .brand, .lang-switch and .btn from app.css)
   ========================================================================= */

.lp .nav-inner { gap: var(--s4); }

.lp-navlinks { display: flex; align-items: center; gap: 2px; margin-inline-start: var(--s3); }
.lp-navlinks .nav-link { font-size: 14.5px; }

.lp .nav-right { gap: var(--s2); }
.lp-signin-ico { display: none; }

/* =========================================================================
   Hero
   ========================================================================= */

.lp-hero {
  position: relative;
  padding-block: 76px 56px;
  overflow: hidden;
}

/* a faint drafting grid that fades out towards the edges */
.lp-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 72% 64% at 50% 34%, #000 22%, transparent 74%);
          mask-image: radial-gradient(ellipse 72% 64% at 50% 34%, #000 22%, transparent 74%);
  pointer-events: none;
}

/* The brand ribbons (public/assets/brand/hero-bg). The art is airy in the
   middle and heavy at two corners, so it is laid out for the heavy corner to
   sit behind the mock-up, never behind the headline: as drawn in Arabic, where
   the mock-up is on the left, and mirrored in English, where it is on the right.

   It is multiplied, not pasted: the art's near-white ground drops out against
   the page tint and the drafting grid, so only the ribbons show and the hero
   keeps the page's own colour at its edges. The mask fades it to a trace under
   the copy column, so the headline and the lead stay on near-white, and to
   nothing at the foot, so the hero melts into the section below.
   The url()s are relative to this file. */
.lp-hero::after {
  content: "";
  position: absolute; inset: 0;
  /* Screened over the logo's own blue-to-violet, the art's near-black depth
     strokes come out as brand indigo instead of slate, so the page never reads
     dark; its whites stay white and still drop out under the multiply. */
  background-image: url("assets/brand/hero-bg.jpg"), linear-gradient(135deg, #3b5bdb, #7c3aed);
  background-image: image-set(url("assets/brand/hero-bg.webp") type("image/webp"), url("assets/brand/hero-bg.jpg") type("image/jpeg")),
                    linear-gradient(135deg, #3b5bdb, #7c3aed);
  background-blend-mode: screen;
  background-size: cover, 100% 100%;
  background-position: center top, center;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  opacity: .7;
  -webkit-mask-image:
    linear-gradient(180deg, #000 0%, #000 70%, transparent 100%),
    radial-gradient(ellipse 44% 64% at 77% 50%, rgba(0,0,0,.14) 0%, rgba(0,0,0,.3) 55%, #000 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(180deg, #000 0%, #000 70%, transparent 100%),
    radial-gradient(ellipse 44% 64% at 77% 50%, rgba(0,0,0,.14) 0%, rgba(0,0,0,.3) 55%, #000 100%);
          mask-composite: intersect;
  pointer-events: none;
}
html[dir="ltr"] .lp-hero::after { transform: scaleX(-1); }

.lp-hero-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 64px;
  align-items: center;
}

.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding-block: 5px; padding-inline: 5px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-1);
  font-size: 13.5px; font-weight: 650; color: var(--ink-2);
}
.lp-eyebrow-ico {
  width: 26px; height: 26px; border-radius: var(--r-pill);
  display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, var(--brand-500), var(--violet));
  color: #fff;
}
.lp-eyebrow-ico svg { width: 14px; height: 14px; }

.lp-h1 {
  margin-block: 24px 0;
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -0.038em;
  color: var(--ink);
}
html[dir="rtl"] .lp-h1 {
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.34;
  letter-spacing: 0;
}

.lp-mark {
  background-image: linear-gradient(105deg, var(--brand-600) 0%, var(--violet) 78%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  padding-block-end: .04em;
}
html[dir="rtl"] .lp-mark { background-image: linear-gradient(255deg, var(--brand-600) 0%, var(--violet) 78%); }

.lp-lead {
  max-width: 34em;
  margin-block: 24px 0;
  font-size: 19px;
  line-height: 1.75;
  color: var(--ink-2);
}

.lp-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block-start: 34px; }
.lp-actions .btn-lg { padding: 15px 28px; }

/* ink-2, not ink-3: at 14px ink-3 is under 3:1 even on the plain page, and the
   ribbons' trace behind the copy column takes it lower still. */
.lp-note {
  display: flex; align-items: center; gap: var(--s2);
  margin-block: 18px 0;
  font-size: 14px; color: var(--ink-2);
}
.lp-note svg { width: 17px; height: 17px; flex: none; color: var(--mint); }

.lp-points {
  list-style: none; padding: 0;
  margin-block: 30px 0; margin-inline: 0;
  display: flex; flex-wrap: wrap; gap: 12px 24px;
}
.lp-points li {
  display: flex; align-items: center; gap: 9px;
  font-size: 14.5px; font-weight: 550; color: var(--ink-2);
}
.lp-tick {
  width: 22px; height: 22px; border-radius: var(--r-pill); flex: none;
  display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-600);
}
.lp-tick svg { width: 13px; height: 13px; stroke-width: 2.4; }

/* ------------------------------------------------------ hero mock-up */

.lp-stage {
  position: relative;
  padding-block: 34px;
  padding-inline: 26px;
}
.lp-stage::before {
  content: "";
  position: absolute; inset: 4% 2% 0;
  background:
    radial-gradient(closest-side at 30% 40%, rgba(59,108,246,.22), rgba(59,108,246,0)),
    radial-gradient(closest-side at 72% 64%, rgba(124,58,237,.18), rgba(124,58,237,0));
  filter: blur(8px);
  pointer-events: none;
}

.lp-window {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3), 0 40px 80px -36px rgba(37,99,235,.38);
  overflow: hidden;
}

.lp-window-bar {
  direction: ltr;               /* browser chrome does not mirror */
  display: flex; align-items: center; gap: var(--s3);
  padding: 11px 16px;
  background: var(--surface-2);
  border-block-end: 1px solid var(--line-soft);
}
.lp-dots { display: flex; gap: 6px; flex: none; }
.lp-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.lp-dots i:nth-child(1) { background: var(--rose); opacity: .55; }
.lp-dots i:nth-child(2) { background: var(--amber); opacity: .55; }
.lp-dots i:nth-child(3) { background: var(--mint); opacity: .55; }
.lp-url {
  flex: 1 1 auto; min-width: 0;
  padding: 4px 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3);
  text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.lp-player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(150deg, var(--brand-50) 0%, var(--surface-3) 50%, var(--violet-soft) 100%);
  overflow: hidden;
}

/* the screen being recorded: a small dashboard */
.lp-scene {
  position: absolute; inset: 7% 6% 19%;
  display: grid; grid-template-columns: 22% minmax(0, 1fr);
  background: var(--surface);
  border-radius: var(--r);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.lp-scene-side {
  display: flex; flex-direction: column; gap: 9px;
  padding: 14px 12px;
  background: var(--surface-2);
  border-inline-end: 1px solid var(--line-soft);
}
.lp-scene-side i { display: block; height: 6px; border-radius: 3px; background: var(--line); }
.lp-scene-side i:first-child { width: 70%; height: 8px; margin-block-end: 6px; background: var(--brand-200); }
.lp-scene-side i:nth-child(3) { width: 80%; }
.lp-scene-side i:nth-child(5) { width: 60%; }

.lp-scene-main {
  display: grid; grid-template-rows: auto auto minmax(0, 1fr);
  gap: 9px;
  padding: 12px 16px 10px;
  min-width: 0;
}
.lp-scene-title {
  font-size: clamp(9px, 1.05vw, 12.5px); font-weight: 750; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.lp-kpis span {
  height: clamp(18px, 2.6vw, 30px);
  border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--line-soft);
}
.lp-kpis span:first-child { background: var(--brand-50); border-color: var(--brand-100); }
.lp-kpis span:nth-child(2) { background: var(--mint-soft); border-color: var(--mint-soft); }

.lp-bars {
  direction: ltr;               /* a chart reads left to right in both languages */
  display: flex; align-items: flex-end; gap: 6%;
  padding-block-start: 14%;
  min-height: 0;
}
.lp-bars i {
  position: relative;
  flex: 1 1 0;
  border-radius: 5px 5px 2px 2px;
  background: var(--brand-100);
}
.lp-bars i:nth-child(1) { height: 36%; }
.lp-bars i:nth-child(2) { height: 54%; }
.lp-bars i:nth-child(3) { height: 44%; }
.lp-bars i:nth-child(4) { height: 70%; }
.lp-bars i:nth-child(5) { height: 58%; }
.lp-bars i:nth-child(6) { height: 82%; }
.lp-bars i:nth-child(7) { height: 64%; }

.lp-bars i.is-hot { background: linear-gradient(180deg, var(--brand-500), var(--violet)); }
.lp-bars i.is-hot::after {                 /* the annotation drawn while recording */
  content: "";
  position: absolute; inset: -6px -6px -4px;
  border: 2px solid var(--rose);
  border-radius: 9px;
  animation: lp-draw 5s ease-in-out infinite;
}
.lp-bars i.is-hot::before {
  content: attr(data-label);
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%);
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--rose); color: #fff;
  font-family: var(--font-ar); font-size: clamp(8.5px, .95vw, 11px); font-weight: 700;
  white-space: nowrap;
  animation: lp-draw 5s ease-in-out infinite;
}
html[dir="ltr"] .lp-bars i.is-hot::before { font-family: var(--font); }

.lp-cursor {
  position: absolute; top: 34%; left: 78%;
  width: clamp(14px, 1.7vw, 20px); height: clamp(14px, 1.7vw, 20px);
  color: var(--ink);
  filter: drop-shadow(0 2px 3px rgba(15,23,42,.25));
  animation: lp-cursor 5s ease-in-out infinite;
}
.lp-cursor svg { width: 100%; height: 100%; fill: #fff; }

.lp-hero-cta {
  position: absolute; inset-block-end: 23%; inset-inline-end: 8%;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--brand-600); color: #fff;
  font-size: clamp(10px, 1.1vw, 13px); font-weight: 700;
  box-shadow: var(--sh-brand), 0 0 0 4px rgba(255,255,255,.7);
  white-space: nowrap;
}
.lp-hero-cta svg { width: 14px; height: 14px; }

.lp-controls {
  direction: ltr;               /* a timeline is not a sentence, same as the real player */
  position: absolute; inset-inline: 0; inset-block-end: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-block-start: 1px solid var(--line-soft);
}
.lp-play {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--brand-600); color: #fff;
}
.lp-play svg { width: 12px; height: 12px; margin-left: 1px; }
.lp-track { position: relative; flex: 1 1 auto; height: 5px; border-radius: var(--r-pill); background: var(--surface-3); }
.lp-track b {
  position: absolute; inset-block: 0; left: 0; width: 46%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-500), var(--violet));
}
.lp-pin {
  position: absolute; top: 50%;
  width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px;
  border-radius: 50%; border: 2px solid #fff;
  box-shadow: var(--sh-1);
}
.lp-pin.is-a { left: 21%; background: var(--amber); }
.lp-pin.is-b { left: 46%; background: var(--mint); }
.lp-time { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); white-space: nowrap; }

.lp-comment {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: 14px 18px 16px;
  border-block-start: 1px solid var(--line-soft);
}
.lp-av {
  width: 32px; height: 32px; border-radius: var(--r-pill); flex: none;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--mint), var(--sky));
  color: #fff; font-size: 14px; font-weight: 700;
}
.lp-comment-b { min-width: 0; }
.lp-comment-t { display: flex; align-items: center; gap: var(--s2); font-size: 13.5px; }
.lp-comment-t strong { color: var(--ink); font-weight: 700; }
.lp-comment-t .time-link { cursor: default; }
.lp-comment p { margin: 3px 0 0; font-size: 14px; color: var(--ink); }

.lp-float {
  position: absolute; z-index: 2;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-3);
  animation: lp-bob 7s ease-in-out infinite;
}

.lp-float-rec {
  inset-block-start: 4px; inset-inline-end: 0;
  display: flex; align-items: center; gap: 9px;
  padding-block: 7px; padding-inline: 14px 7px;
  border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 650; color: var(--ink);
}
.lp-rec-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--rose);
  box-shadow: 0 0 0 4px var(--rose-soft);
  animation: pulse 1.4s ease-in-out infinite;     /* keyframes from app.css */
}
.lp-rec-time { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2); direction: ltr; unicode-bidi: isolate; }
.lp-rec-btn {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--ink-2);
}
.lp-rec-btn svg { width: 14px; height: 14px; }

/* sits over the player's edge, never over the comment it is illustrating */
.lp-float-stats {
  inset-block-start: 40%; inset-inline-start: 0;
  min-width: 206px;
  padding: 14px 16px 12px;
  border-radius: var(--r-lg);
  animation-delay: -3.5s;
}
.lp-stat-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  padding-block: 3px;
  font-size: 13px; color: var(--ink-2);
}
.lp-stat-row b { color: var(--ink); font-weight: 750; font-size: 14.5px; direction: ltr; unicode-bidi: isolate; }
.lp-mini-bar { height: 6px; margin-block: 3px 8px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.lp-mini-bar i { display: block; width: 82%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--mint), var(--sky)); }
html[dir="rtl"] .lp-mini-bar i { background: linear-gradient(-90deg, var(--mint), var(--sky)); }

@keyframes lp-bob    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes lp-draw   { 0%, 18% { opacity: 0; } 28%, 86% { opacity: 1; } 100% { opacity: 0; } }
@keyframes lp-cursor {
  0%   { transform: translate(34px, 30px); }
  22%  { transform: translate(0, 0); }
  80%  { transform: translate(0, 0); }
  100% { transform: translate(34px, 30px); }
}

/* =========================================================================
   How it works
   ========================================================================= */

.lp-steps {
  position: relative;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
  counter-reset: none;
}
.lp-steps::before {            /* the path the three steps sit on */
  content: "";
  position: absolute; inset-inline: 16%; inset-block-start: 52px;
  border-block-start: 2px dashed var(--brand-200);
}

.lp-step {
  position: relative;
  padding: 30px 28px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-1);
  text-align: center;
  transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s ease, border-color .18s ease;
}
.lp-step:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--brand-200); }

.lp-step-top { position: relative; width: 48px; height: 48px; margin-inline: auto; margin-block-end: 22px; }
.lp-step-ico {
  width: 48px; height: 48px; border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-500), var(--violet));
  box-shadow: 0 10px 24px rgba(124,58,237,.28);
  color: #fff;
}
.lp-step-ico svg { width: 23px; height: 23px; }
.lp-step-n {
  position: absolute; inset-block-start: -8px; inset-inline-end: -10px; z-index: 1;
  width: 24px; height: 24px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--brand-100);
  color: var(--brand-700); font-size: 12px; font-weight: 800;
}
.lp-step h3 { font-size: 19px; margin-block-end: 10px; }
.lp-step p { margin: 0; font-size: 15px; line-height: 1.7; }

/* =========================================================================
   Features
   ========================================================================= */

/* Three columns, so the wide spotlight card (two columns) plus the seven
   others fill three rows exactly, with no empty cell. */
.lp-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* ------------------------- spotlight cards (f1, f6, f7) and the wide f8 */

/* f8 spans two columns so three 2-wide spotlights + five cards tile 12 cells. */
.lp-feat.lp-feat-wide { grid-column: span 2; }

.lp-feat.lp-feat-spot {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: 28px;
  align-items: center;
  padding: 26px;
  padding-inline-start: 30px;
  background:
    radial-gradient(420px 260px at 0% 100%, var(--violet-soft), rgba(243,235,255,0)),
    linear-gradient(150deg, var(--brand-50) 0%, var(--surface) 62%);
  border-color: var(--brand-100);
}
.lp-feat-spot .lp-ico { background: var(--surface); box-shadow: var(--sh-1); }
.lp-feat-spot h3 { font-size: 21px; margin-block-end: 10px; }
.lp-feat-spot p { font-size: 15.5px; }

.lp-modes {
  list-style: none; padding: 0;
  margin-block: 20px 0; margin-inline: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.lp-modes li {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 10px;
  background: var(--surface);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-1);
  font-size: 13.5px; font-weight: 650; color: var(--ink);
}
html[dir="rtl"] .lp-modes li { padding: 6px 10px 6px 12px; }
.lp-modes svg { width: 16px; height: 16px; flex: none; color: var(--brand-600); }

/* spot-record.svg is square with a white ground; the frame is white too, so
   cover-cropping to 16:10 trims the empty margin without drawing an edge. */
.lp-spot-art {
  position: relative;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  border-radius: var(--r-lg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  overflow: hidden;
}
.lp-spot-art img {
  display: block;
  width: 100%; height: 100%;
  max-width: 100%;
  object-fit: cover;
  object-position: 55% 56%;
  transform: scale(1.04);
  transform-origin: 55% 56%;
}

.lp-feat, .lp-aud-card {
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s ease, border-color .18s ease;
}
.lp-feat:hover, .lp-aud-card:hover { transform: translateY(-3px); box-shadow: var(--sh-3); border-color: var(--brand-200); }
.lp-feat h3, .lp-aud-card h3 { font-size: 17.5px; margin-block-end: 8px; }
.lp-feat p, .lp-aud-card p { margin: 0; font-size: 14.5px; line-height: 1.7; }

.lp-ico {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  margin-block-end: 18px;
}
.lp-ico svg { width: 22px; height: 22px; }
.lp-ico.is-brand  { background: var(--brand-50);    color: var(--brand-600); }
.lp-ico.is-violet { background: var(--violet-soft); color: var(--violet); }
.lp-ico.is-mint   { background: var(--mint-soft);   color: var(--mint); }
.lp-ico.is-amber  { background: var(--amber-soft);  color: var(--amber); }
.lp-ico.is-rose   { background: var(--rose-soft);   color: var(--rose); }
.lp-ico.is-sky    { background: var(--sky-soft);    color: var(--sky); }

/* =========================================================================
   Video CTA buttons
   ========================================================================= */

.lp-cta-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
  padding: 56px;
  background:
    radial-gradient(520px 320px at 100% 0%, var(--violet-soft), rgba(243,235,255,0)),
    linear-gradient(150deg, var(--brand-50) 0%, var(--surface) 48%, var(--surface-2) 100%);
  border: 1px solid var(--brand-100);
  border-radius: calc(var(--r-xl) + 8px);
  box-shadow: var(--sh-2);
  overflow: hidden;
}

.lp-cta-copy .lp-sub { font-size: 17px; }

.lp-cta-list {
  list-style: none; padding: 0;
  margin-block: 30px 0; margin-inline: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.lp-cta-list li {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-1);
}
.lp-cta-list b { display: block; font-size: 15.5px; font-weight: 750; color: var(--ink); }
.lp-cta-list li > span > span { display: block; margin-block-start: 2px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.lp-cta-ico {
  width: 34px; height: 34px; border-radius: var(--r-sm); flex: none;
  display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-600);
}
.lp-cta-ico svg { width: 18px; height: 18px; }

.lp-cta-go { margin-block-start: 30px; }

.lp-demo { position: relative; }

.lp-demo-player {
  direction: ltr;               /* corners are physical positions on the video */
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 22% 28%, rgba(255,255,255,.9), rgba(255,255,255,0) 42%),
    linear-gradient(135deg, var(--sky-soft) 0%, var(--brand-100) 52%, var(--violet-soft) 100%);
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.lp-demo-slide {
  position: absolute; inset: 30% 30%;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 0 6%;
  background: rgba(255,255,255,.62);
  border-radius: var(--r);
}
.lp-demo-slide i { display: block; height: 6px; border-radius: 3px; background: var(--brand-200); }
.lp-demo-slide i:nth-child(1) { width: 70%; height: 8px; background: var(--brand-300); }
.lp-demo-slide i:nth-child(3) { width: 54%; }

.lp-demo-play {
  position: absolute; top: 50%; left: 50%;
  width: 50px; height: 50px; margin: -25px 0 0 -25px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-600); color: #fff;
  box-shadow: var(--sh-brand), 0 0 0 8px rgba(255,255,255,.55);
}
.lp-demo-play svg { width: 22px; height: 22px; margin-left: 3px; }

.lp-slot {
  position: absolute;
  min-width: 27%; min-height: 19%;
  display: flex; align-items: center; justify-content: center;
  padding: 6px;
  border: 1.5px dashed rgba(37,99,235,.32);
  border-radius: 12px;
}
.lp-slot-tl { top: 5%;    left: 3.5%; }
.lp-slot-tr { top: 5%;    right: 3.5%; }
.lp-slot-bl { bottom: 5%; left: 3.5%; }
.lp-slot-br { bottom: 5%; right: 3.5%; border-color: transparent; }

.lp-demo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 15px;
  border-radius: var(--r-pill);
  font-size: clamp(10.5px, 1.25vw, 13.5px); font-weight: 700; line-height: 1.3;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(15,23,42,.14);
}
.lp-demo-btn.is-solid   { background: var(--brand-600); color: #fff; box-shadow: var(--sh-brand); }
.lp-demo-btn.is-outline { background: rgba(255,255,255,.95); color: var(--brand-700); border: 1.5px solid var(--brand-600); }
.lp-demo-btn.is-soft    { background: var(--surface); color: var(--violet); border: 1.5px solid var(--violet); box-shadow: var(--sh-1); }

.lp-demo-tag {
  position: absolute; bottom: calc(100% + 4px); right: 6px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--mint); color: #fff;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(14,164,114,.3);
}
.lp-demo-tag svg { width: 12px; height: 12px; }

.lp-demo-below {
  display: flex; justify-content: center;
  margin-block-start: 12px;
  padding: 10px;
  background: rgba(255,255,255,.7);
  border: 1.5px dashed var(--brand-200);
  border-radius: var(--r);
}

.lp-demo-timing {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
  margin-block-start: 16px;
}
.lp-demo-when {
  display: inline-flex; align-items: center; gap: 6px;
  margin-inline-end: var(--s1);
  font-size: 13.5px; font-weight: 650; color: var(--ink-2);
}
.lp-demo-when svg { width: 16px; height: 16px; color: var(--brand-600); }
.lp-demo .chip { cursor: default; }

/* =========================================================================
   Who it is for
   ========================================================================= */

.lp-aud {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}
.lp-aud-card { padding: 26px 22px; }

/* =========================================================================
   Pricing
   ========================================================================= */

/* Column count follows the number of active plans (class set by index.php). */
.lp-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  max-width: 1100px;
  margin-inline: auto;
  align-items: stretch;
}
.lp-plans-1 { grid-template-columns: minmax(0, 1fr); max-width: 440px; }
.lp-plans-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 800px; }
.lp-plans-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1240px; gap: 18px; }

/* Four across is one full row, never three plus an orphan: each card gives up
   a little padding and price size so the limit lines still breathe. Between
   1180px and 640px the four settle into a 2 x 2 grid, below that one column. */
@media (min-width: 1181px) {
  .lp-plans-4 .lp-plan { padding: 30px 22px 24px; }
  .lp-plans-4 .lp-price-amt { font-size: 44px; }
  .lp-plans-4 .lp-plan-list li { font-size: 14.5px; }
}
@media (max-width: 1180px) {
  .lp-plans-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 800px; gap: 22px; }
}

.lp-plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: 32px 28px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-1);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.lp-plan:hover { box-shadow: var(--sh-2); border-color: var(--brand-200); }

.lp-plan.is-rec {
  border: 2px solid var(--brand-500);
  background: linear-gradient(180deg, var(--brand-50) 0%, var(--surface) 42%);
  box-shadow: var(--sh-3), var(--ring);
}

.lp-plan-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.lp-plan-name { font-size: 21px; font-weight: 800; }
.lp-plan-top .badge svg { width: 13px; height: 13px; }

.lp-plan-tag { margin-block: 8px 0; font-size: 14.5px; color: var(--ink-3); }

.lp-price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  margin-block: 22px 24px;
}
.lp-price-amt {
  font-size: 48px; font-weight: 800; line-height: 1; letter-spacing: -0.035em;
  color: var(--ink);
}
.lp-price-per { font-size: 15px; font-weight: 600; color: var(--ink-3); }

.lp-plan-list {
  list-style: none;
  margin-block: 0 28px; margin-inline: 0;
  padding-block: 22px 0; padding-inline: 0;
  border-block-start: 1px solid var(--line-soft);
  display: grid; gap: 12px; align-content: start;
  flex: 1 1 auto;
}
.lp-plan-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--ink-2); }
.lp-plan-list svg {
  width: 20px; height: 20px; flex: none;
  padding: 3px; border-radius: var(--r-pill);
  background: var(--mint-soft); color: var(--mint);
  stroke-width: 2.4;
  margin-block-start: 2px;
}

.lp-price-foot {
  display: flex; align-items: flex-start; gap: var(--s3);
  max-width: 820px;
  margin-block: 34px 0; margin-inline: auto;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  font-size: 14.5px; line-height: 1.75; color: var(--ink-2);
}
.lp-price-foot svg {
  width: 30px; height: 30px; flex: none;
  padding: 6px; border-radius: var(--r-sm);
  background: var(--brand-50); color: var(--brand-600);
}

/* =========================================================================
   FAQ
   ========================================================================= */

.lp-faq { max-width: 840px; margin-inline: auto; display: grid; gap: 12px; }

.lp-q {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lp-q[open] { border-color: var(--brand-200); box-shadow: var(--sh-2); }

.lp-q summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: 20px 24px;
  cursor: pointer;
  font-size: 16.5px; font-weight: 700; color: var(--ink);
  border-radius: var(--r-lg);
}
.lp-q summary::-webkit-details-marker { display: none; }
.lp-q summary::marker { content: ""; }
.lp-q summary:hover { color: var(--brand-700); }

.lp-q-ico {
  width: 30px; height: 30px; border-radius: var(--r-pill); flex: none;
  display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand-600);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.lp-q-ico svg { width: 16px; height: 16px; }
.lp-q[open] .lp-q-ico { transform: rotate(45deg); background: var(--brand-600); color: #fff; }

.lp-q-a { padding-block: 0 22px; padding-inline: 24px; }
.lp-q-a p { margin: 0; font-size: 15.5px; line-height: 1.8; }

/* =========================================================================
   Closing call to action
   ========================================================================= */

.lp-final { padding-block: 8px 96px; }

.lp-final-card {
  position: relative;
  padding: 72px 32px;
  text-align: center;
  border-radius: calc(var(--r-xl) + 8px);
  background:
    radial-gradient(600px 320px at 82% 0%, rgba(255,255,255,.34), rgba(255,255,255,0)),
    linear-gradient(135deg, var(--brand-500) 0%, var(--violet) 72%);
  box-shadow: 0 30px 60px -24px rgba(124,58,237,.5);
  color: #fff;
  overflow: hidden;
}
.lp-final-card::before,
.lp-final-card::after {
  content: "";
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.1);
  pointer-events: none;
}
.lp-final-card::before { width: 380px; height: 380px; inset-block-end: -200px; inset-inline-start: -120px; }
.lp-final-card::after  { width: 220px; height: 220px; inset-block-start: -90px; inset-inline-end: 8%; }
.lp-final-card > * { position: relative; z-index: 1; }

.lp-final-mark {
  width: 58px; height: 58px; margin-inline: auto; margin-block-end: 22px;
  border-radius: 18px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.35);
}
.lp-final-mark svg { width: 26px; height: 26px; color: #fff; }

/* The app mark over the closing gradient. Its tile is the same gradient, so a
   light ring and a lift separate it from the card. */
.lp-final-logo {
  display: block;
  width: 64px; height: 64px;
  margin-inline: auto; margin-block-end: 22px;
  border-radius: 10px;
  box-shadow: 0 0 0 4px rgba(255,255,255,.22), 0 16px 32px -10px rgba(30,27,75,.45);
}

.lp-final-card .lp-h2 { color: #fff; max-width: 20em; margin-inline: auto; }
.lp-final-card p { max-width: 36em; margin-inline: auto; margin-block: 16px 0; font-size: 18px; color: rgba(255,255,255,.9); }

.lp-final-actions { display: flex; justify-content: center; margin-block-start: 32px; }
.lp-btn-light {
  background: var(--surface); color: var(--brand-700);
  box-shadow: 0 12px 28px rgba(15,23,42,.2);
  padding: 15px 30px;
}
.lp-btn-light:hover { background: var(--brand-50); }

.lp-final-card .lp-final-login { margin-block-start: 20px; font-size: 15px; }
.lp-final-login a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; margin-inline-start: 4px; }

/* =========================================================================
   Footer
   ========================================================================= */

.lp-foot {
  padding-block: 56px 32px;
  background: var(--surface);
  border-block-start: 1px solid var(--line);
}
.lp-foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.lp-foot-brand p { margin-block: 14px 0; font-size: 15px; color: var(--ink-3); }
.lp-foot-h {
  margin-block-end: 14px;
  font-size: 13px; font-weight: 700; color: var(--ink-3);
  letter-spacing: .06em; text-transform: uppercase;
}
html[dir="rtl"] .lp-foot-h { letter-spacing: 0; }
.lp-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lp-foot ul a { color: var(--ink-2); font-size: 15px; }
.lp-foot ul a:hover { color: var(--brand-600); }
.lp-foot ul a.is-current { color: var(--brand-700); font-weight: 650; }

.lp-foot-bottom {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s3);
  margin-block-start: 40px;
  padding-block-start: 22px;
  border-block-start: 1px solid var(--line-soft);
  font-size: 13.5px; color: var(--ink-3);
}

.lp-foot-end { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; }

/* The privacy and terms links sit in this bar. They read as part of it, not as
   two blue interruptions in a line of grey. */
.lp-foot-end a { color: var(--ink-2); font-weight: 600; }
.lp-foot-end a:hover { color: var(--brand-700); }

/* The staff door: present, findable, quiet. (This file is public: where the
   door leads is login.php's business and is not described here.) */
.lp-foot-staff {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ink-2); font-weight: 600;
}
.lp-foot-staff svg { width: 14px; height: 14px; flex: none; }
.lp-foot-staff:hover { color: var(--brand-700); }

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 1180px) {
  .lp-aud { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lp-aud-card { grid-column: span 2; }
  .lp-aud-card:nth-child(4) { grid-column: 2 / span 2; }
  .lp-aud-card:nth-child(5) { grid-column: 4 / span 2; }
}

@media (max-width: 1080px) {
  .lp-hero { padding-block: 56px 80px; }
  .lp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  /* Stacked, the mock-up is below the copy: the ribbons move down behind it
     and stay clear of the headline altogether. */
  .lp-hero::after {
    /* both layers the art's own 1920:1097 box, so the tint never shows past it */
    background-size: max(640px, 118vw) max(366px, 67.4vw);
    background-position: left bottom;
    /* Two masks, intersected (the composite set above still applies). The first
       fades by the hero's height; the second by the art's own box, measured from
       the bottom, so the art is fully transparent at its top edge. Without it the
       art's heavy top corner starts as a hard horizontal line on phones, where the
       box's top falls below the 54% point of the first mask. */
    -webkit-mask-image:
      linear-gradient(180deg, transparent 0%, transparent 54%, #000 80%, #000 92%, transparent 100%),
      linear-gradient(0deg, #000 0, #000 calc(max(366px, 67.4vw) * .6), transparent max(366px, 67.4vw));
            mask-image:
      linear-gradient(180deg, transparent 0%, transparent 54%, #000 80%, #000 92%, transparent 100%),
      linear-gradient(0deg, #000 0, #000 calc(max(366px, 67.4vw) * .6), transparent max(366px, 67.4vw));
  }
  .lp-hero-copy { max-width: 680px; }
  .lp-stage { max-width: 680px; width: 100%; margin-inline: auto; }

  .lp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the spotlight fills the first row; the last card closes the grid evenly */
  .lp-features > .lp-feat:last-child { grid-column: 1 / -1; }

  .lp-cta-panel { grid-template-columns: minmax(0, 1fr); gap: 44px; padding: 44px 36px; }

  .lp-plans-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 800px; }
}

@media (max-width: 900px) {
  .lp-navlinks { display: none; }

  .lp-aud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-aud-card, .lp-aud-card:nth-child(4) { grid-column: auto; }
  .lp-aud-card:nth-child(5) { grid-column: 1 / -1; }

  .lp-steps { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; gap: 16px; }
  .lp-steps::before { display: none; }

  .lp-plans-3 { grid-template-columns: minmax(0, 1fr); max-width: 520px; }

  .lp-foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .lp-plans-2, .lp-plans-4 { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
}

@media (max-width: 720px) {
  .lp-section { padding-block: 72px; }
  .lp-head { margin-block-end: 38px; }
  .lp-sub { font-size: 16.5px; }

  .lp-hero { padding-block: 36px 64px; }
  .lp-lead { font-size: 17px; }
  .lp-actions { margin-block-start: 28px; }

  .lp-stage { padding-block: 30px 44px; padding-inline: 4px; }
  .lp-window { border-radius: var(--r-lg); }
  .lp-scene { inset: 6% 5% 21%; grid-template-columns: minmax(0, 1fr); }
  .lp-scene-side { display: none; }
  .lp-scene-main { padding: 8px 10px 6px; gap: 6px; }
  .lp-controls { padding: 6px 10px; gap: 8px; }
  .lp-hero-cta { inset-block-end: 25%; padding: 5px 10px; }
  .lp-hero-cta svg { width: 11px; height: 11px; }
  .lp-comment { padding: 12px 14px; }
  .lp-float-rec { font-size: 12.5px; padding-inline: 12px 6px; gap: 7px; }
  .lp-rec-btn { width: 24px; height: 24px; }
  .lp-float-stats { min-width: 0; padding: 10px 12px 8px; }
  .lp-stat-row { font-size: 12px; gap: var(--s3); }
  .lp-stat-row b { font-size: 13px; }

  .lp-features { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .lp-feat, .lp-aud-card { padding: 22px 20px; }
  .lp-feat.lp-feat-spot { grid-column: auto; grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px 20px; }
  .lp-features > .lp-feat:last-child { grid-column: auto; }
  /* one column: a span of 2 here would invent a phantom second column */
  .lp-feat.lp-feat-wide { grid-column: auto; }
  .lp-feat-spot h3 { font-size: 19px; }

  .lp-cta-panel { padding: 30px 18px; border-radius: var(--r-xl); gap: 34px; }
  .lp-slot { min-width: 0; padding: 3px; border-radius: 9px; }
  .lp-demo-btn { padding: 6px 10px; }
  .lp-demo-play { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .lp-demo-play svg { width: 18px; height: 18px; }
  .lp-demo-tag { font-size: 10.5px; padding: 2px 7px; }

  .lp-plan { padding: 28px 22px 22px; }
  .lp-price-amt { font-size: 42px; }

  .lp-q summary { padding: 17px 18px; font-size: 15.5px; }
  .lp-q-a { padding-inline: 18px; padding-block-end: 18px; }
  .lp-q-a p { font-size: 15px; }

  .lp-final { padding-block-end: 72px; }
  .lp-final-card { padding: 52px 20px; border-radius: var(--r-xl); }
  .lp-final-card p { font-size: 16.5px; }

  .lp-foot { padding-block: 44px 28px; }
  .lp-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
}

@media (max-width: 560px) {
  .lp-signin-text { display: none; }
  .lp-signin-ico { display: inline-grid; }

  .lp-actions .btn { flex: 1 1 100%; }
  .lp-points { flex-direction: column; gap: 10px; }

  .lp-cta-list { grid-template-columns: minmax(0, 1fr); }
  .lp-cta-go { width: 100%; }

  .lp-aud { grid-template-columns: minmax(0, 1fr); }
  .lp-aud-card:nth-child(5) { grid-column: auto; }

  .lp-final-actions .btn { width: 100%; }
}

@media (max-width: 440px) {
  .lp .nav-inner { gap: var(--s2); }
  .lp .lang-switch a { padding: 5px 10px; }

  .lp-float-stats { display: none; }
  .lp-stage { padding-block-end: 12px; }
  .lp-kpis span { height: 16px; }
  .lp-url { font-size: 10.5px; }

  .lp-foot-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-float, .lp-cursor, .lp-bars i.is-hot::before, .lp-bars i.is-hot::after { animation: none; }
}

@media print {
  .lp .nav, .lp-stage, .lp-demo, .lp-final { display: none !important; }
  .lp-section { padding-block: 24px; }
}