/* ─────────────────────────────────────────────────────────────────────────
   Landing — the public homepage (scripts/landing.js), a fresh signed-out
   visitor's 'home'. Everything is scoped under .landing / .ld-*, plus
   html.landing-chrome (app.js navigate() toggles it, index.html's pre-paint
   script predicts it): the landing brings its own header and footer, so
   the site's header, footer, tab bar and workspace sidebar step aside.
   Deep charcoal + warm off-white, Keelo green as the one accent.
   ───────────────────────────────────────────────────────────────────────── */
html.landing-chrome .topnav,
html.landing-chrome .footer,
html.landing-chrome .tabbar,
html.landing-chrome .mgr-side { display: none; }
/* Dark from the first paint (the hero), and no shared view slide: a
   transformed ancestor would pin the fixed header to the view. */
html.landing-chrome body { background: #0D0F0E; }
html.landing-chrome .view.active { animation: none; }
html.ld-menu-open,
html.ld-menu-open body { overflow: hidden; }

.landing {
  --ld-ink: #0D0F0E;
  --ld-ink-2: #141715;
  --ld-ink-3: #1B1F1C;
  --ld-paper: #F4F1EA;
  --ld-paper-2: #EAE5D9;
  --ld-green: #2FD15B;       /* the accent, on dark */
  --ld-green-hi: #5BEA86;
  --ld-green-deep: #147A3D;  /* brand green, on light (text contrast) */
  --ld-line-dark: rgba(244, 241, 234, 0.13);
  --ld-line-light: rgba(13, 15, 14, 0.13);
  --ld-muted-dark: rgba(244, 241, 234, 0.66);
  --ld-muted-light: rgba(13, 15, 14, 0.64);
  --ld-display: 'Rubik', var(--font-body);
  --ld-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  --ld-gutter: clamp(20px, 5vw, 72px);
  --ld-max: 1320px;
  --ld-nav-h: 72px;
  --ld-ease: cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--ld-ink);
  background: var(--ld-paper);
  font-family: var(--font-body);
  overflow-x: clip;
}
.landing .ld-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.landing :focus-visible { outline: 2px solid var(--ld-green); outline-offset: 3px; border-radius: 6px; }
.landing [tabindex="-1"]:focus { outline: none; }

.ld-wrap { max-width: var(--ld-max); margin-inline: auto; padding-inline: var(--ld-gutter); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.ld-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-family: var(--ld-display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ld-ease);
}
.ld-btn:hover { transform: translateY(-1px); }
.ld-btn:active { transform: none; }
.ld-btn--primary { background: var(--ld-green); color: var(--ld-ink); }
.ld-btn--primary:hover { background: var(--ld-green-hi); }
.ld-btn--ghost { color: var(--ld-paper); box-shadow: inset 0 0 0 1px rgba(244, 241, 234, 0.42); }
.ld-btn--ghost:hover { background: rgba(244, 241, 234, 0.1); box-shadow: inset 0 0 0 1px rgba(244, 241, 234, 0.7); }
.ld-btn--dark { background: var(--ld-ink); color: var(--ld-paper); }
.ld-btn--dark:hover { background: var(--ld-green-deep); }
.ld-btn--lg { height: 58px; padding: 0 32px; font-size: 1.0625rem; }
.ld-btn--sm { height: 40px; padding: 0 18px; font-size: 0.9375rem; }
/* A chevron, pointing forward in the reading direction (or down). */
.ld-btn-arrow {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s var(--ld-ease);
  flex-shrink: 0;
}
[dir="rtl"] .ld-btn-arrow { transform: rotate(-135deg); }
.ld-btn-arrow--down,
[dir="rtl"] .ld-btn-arrow--down { transform: translateY(-2px) rotate(135deg); }
.ld-btn:hover .ld-btn-arrow:not(.ld-btn-arrow--down),
.ld-text-link:hover .ld-btn-arrow { transform: translateX(3px) rotate(45deg); }
[dir="rtl"] .ld-btn:hover .ld-btn-arrow:not(.ld-btn-arrow--down),
[dir="rtl"] .ld-text-link:hover .ld-btn-arrow { transform: translateX(-3px) rotate(-135deg); }
.ld-btn:hover .ld-btn-arrow--down { transform: translateY(1px) rotate(135deg); }

/* ── Header ──────────────────────────────────────────────────────────────── */
.ld-nav {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 60;
  color: var(--ld-paper);
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
}
.ld-nav.is-solid {
  background: rgba(13, 15, 14, 0.9);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  backdrop-filter: saturate(140%) blur(16px);
  border-bottom-color: rgba(244, 241, 234, 0.08);
}
.ld-nav.is-open { background: var(--ld-ink); }
.ld-nav-inner {
  height: var(--ld-nav-h);
  max-width: var(--ld-max);
  margin-inline: auto;
  padding-inline: var(--ld-gutter);
  display: flex;
  align-items: center;
  gap: 28px;
}
.ld-logo {
  display: block;
  height: 34px;
  aspect-ratio: 580 / 240;
  flex-shrink: 0;
  background: url('/assets/brand/keelo-logo-on-dark.png') center / contain no-repeat;
  background-image: image-set(url('/assets/brand/keelo-logo-on-dark.webp') type('image/webp'), url('/assets/brand/keelo-logo-on-dark.png') type('image/png'));
}
.ld-nav-links { display: none; align-items: center; gap: 4px; }
.ld-nav-link {
  position: relative;
  padding: 10px 12px;
  color: rgba(244, 241, 234, 0.78);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.ld-nav-link::after {
  content: '';
  position: absolute;
  inset-inline: 12px;
  bottom: 4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 0.35s var(--ld-ease);
}
.ld-nav-link:hover { color: var(--ld-paper); }
.ld-nav-link:hover::after { transform: scaleX(1); }
.ld-nav-end { display: flex; align-items: center; gap: 18px; margin-inline-start: auto; }
.ld-lang { display: inline-flex; align-items: center; gap: 2px; font-family: var(--ld-display); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; }
.ld-lang-opt { min-width: 34px; height: 34px; padding: 0 6px; border-radius: 8px; color: rgba(244, 241, 234, 0.5); transition: color 0.2s ease; }
.ld-lang-opt:hover { color: var(--ld-paper); }
.ld-lang-opt.is-active { color: var(--ld-paper); }
.ld-lang-opt + .ld-lang-opt { position: relative; }
.ld-lang-opt + .ld-lang-opt::before { content: ''; position: absolute; inset-inline-start: -1px; top: 10px; bottom: 10px; width: 1px; background: rgba(244, 241, 234, 0.25); }
/* The shared "More / עוד" language menu (lang-switch.js), beside HE / EN —
   only rendered while a menu language is pickable (none in production yet).
   Same look as the landing's own buttons; the menu itself keeps the site's
   light popover. */
.ld-lang .lang-more { position: relative; }
.ld-lang .lang-more::before { content: ''; position: absolute; inset-inline-start: -1px; top: 10px; bottom: 10px; width: 1px; background: rgba(244, 241, 234, 0.25); }
.ld-lang .lang-more-btn { min-height: 34px; padding: 0 8px; border-radius: 8px; background: transparent; box-shadow: none; color: rgba(244, 241, 234, 0.5); font: inherit; letter-spacing: inherit; }
.ld-lang .lang-more-btn:hover,
.ld-lang .lang-more-btn.active { color: var(--ld-paper); background: transparent; box-shadow: none; }
.ld-lang .lang-menu { font-family: var(--font-body); letter-spacing: normal; text-align: start; }
/* In the mobile menu the switch sits near the bottom: open upwards. */
.ld-menu-foot .lang-menu { inset-block-start: auto; inset-block-end: calc(100% + 8px); inset-inline-end: auto; inset-inline-start: 0; }
@media (max-width: 1119px) {
  .ld-nav-end .ld-lang .lang-more-name { display: none; }
  .ld-nav-end .ld-lang .lang-more-btn.active .lang-more-short { display: inline; }
  .ld-nav-end .ld-lang .lang-more-btn.active svg { display: none; }
}
.ld-nav-login { font-size: 0.9375rem; font-weight: 500; color: var(--ld-paper); white-space: nowrap; }
.ld-nav-login:hover { color: var(--ld-green-hi); }
.ld-menu-btn {
  position: relative;
  width: 44px;
  height: 44px;
  margin-inline-end: -10px;
  color: var(--ld-paper);
}
.ld-menu-btn span {
  position: absolute;
  inset-inline-start: 12px;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s var(--ld-ease), top 0.3s var(--ld-ease);
}
.ld-menu-btn span:first-child { top: 17px; }
.ld-menu-btn span:last-child { top: 25px; }
.ld-menu-btn[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.ld-menu-btn[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
.ld-nav-end .ld-lang,
.ld-nav-login { display: none; }

.ld-menu {
  position: fixed;
  inset: var(--ld-nav-h) 0 0 0;
  background: var(--ld-ink);
  padding: 12px var(--ld-gutter) calc(32px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  animation: ldMenuIn 0.35s var(--ld-ease);
}
@keyframes ldMenuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.ld-menu-links { display: flex; flex-direction: column; }
.ld-menu-link {
  display: block;
  padding: 18px 0;
  border-bottom: 1px solid var(--ld-line-dark);
  font-family: var(--ld-display);
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ld-paper);
  text-align: start;
  width: 100%;
}
.ld-menu-link:hover { color: var(--ld-green-hi); }
.ld-menu-foot { margin-top: auto; padding-top: 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ld-menu-foot .ld-btn { flex: 1; max-width: 280px; }

@media (min-width: 640px) {
  .ld-nav-end .ld-lang,
  .ld-nav-login { display: inline-flex; }
}
@media (min-width: 1120px) {
  .ld-nav-links { display: flex; }
  .ld-menu-btn,
  .ld-menu { display: none !important; }
}

/* ── Hero ────────────────────────────────────────────────────────────────────
   The clock concept image (landing.js LANDING_HERO_PHOTO) is anchored to the
   hero's bottom edge at its own aspect ratio, so the Keelo clock and the
   board always sit just under the copy: the copy is centred at the top, and
   the hero's bottom padding (a share of the image's width) keeps the clock's
   face clear of the buttons. Taller copy (longer languages) grows the hero
   upwards; the image never moves relative to its bottom. CSS grades it
   darker and frames it — headline, buttons and navigation are real elements. */
.ld-hero {
  --hero-h: clamp(660px, 100svh, 980px);
  --img-w: min(100vw, calc(var(--hero-h) * 1.72));
  position: relative;
  isolation: isolate;
  min-height: var(--hero-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--ld-paper);
  background: #050806;
  overflow: hidden;
  text-align: center;
}
.ld-hero-photo { position: absolute; inset: 0; z-index: -2; }
.ld-hero-photo img {
  position: absolute;
  left: 50%;
  bottom: calc(var(--img-w) * -0.1);
  width: var(--img-w);
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  filter: brightness(0.6) contrast(1.16) saturate(0.88);
  /* Soft edges: the top always, the sides where the screen is wider. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%), linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%), linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-composite: intersect;
}
.ld-hero-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* a soft green light on the clock */
    radial-gradient(20% 16% at 50% 72%, rgba(91, 234, 134, 0.16), transparent 72%),
    /* the copy's backdrop: darkest behind the headline */
    radial-gradient(50% 44% at 50% 24%, rgba(5, 8, 6, 0.85), rgba(5, 8, 6, 0) 100%),
    linear-gradient(to bottom, rgba(5, 8, 6, 0.92) 0%, rgba(5, 8, 6, 0.55) 22%, rgba(5, 8, 6, 0) 48%),
    linear-gradient(to top, rgba(5, 8, 6, 0.75) 0%, rgba(5, 8, 6, 0) 16%),
    radial-gradient(120% 100% at 50% 70%, transparent 58%, rgba(5, 8, 6, 0.7) 100%);
}
.ld-hero-inner {
  width: 100%;
  max-width: 1040px;
  padding: calc(var(--ld-nav-h) + clamp(28px, 6vh, 72px)) var(--ld-gutter) calc(var(--img-w) * 0.3);
}
.ld-hero-title {
  margin: 0 auto;
  font-family: var(--ld-display);
  font-weight: 800;
  font-size: clamp(2.375rem, 5.4vw, 5.25rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
.ld-line { display: block; }
.ld-line--accent { color: var(--ld-green); }
.landing[data-lang="he"] .ld-hero-title { letter-spacing: -0.012em; line-height: 1.1; }
/* Devanagari (marks above and below the line) and Chinese (full-width
   punctuation at the baseline) collide at the Latin display line-height. */
.landing[data-lang="hi"] :is(.ld-hero-title, .ld-h2, .ld-join-title) { line-height: 1.24; }
.landing[data-lang="zh-CN"] :is(.ld-hero-title, .ld-h2, .ld-join-title) { line-height: 1.16; }
.ld-hero-sub {
  margin: clamp(16px, 2.4vh, 26px) auto 0;
  font-size: clamp(1.0625rem, 1.45vw, 1.375rem);
  font-weight: 500;
  line-height: 1.45;
  color: rgba(244, 241, 234, 0.9);
  max-width: 54ch;
  text-wrap: balance;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.5);
}
.ld-hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 16px; margin-top: clamp(22px, 3.6vh, 38px); }
.ld-hero .ld-btn--lg { min-width: 200px; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6); }
.ld-hero .ld-btn--primary { box-shadow: 0 10px 34px -10px rgba(47, 209, 91, 0.55); }

/* Entrance — a fresh mount only (landing.js adds .ld-intro). */
.ld-intro .ld-hero-photo { animation: ldReveal 1.8s var(--ld-ease) both; }
.ld-intro .ld-line { animation: ldRise 1.1s var(--ld-ease) both; animation-delay: calc(140ms + var(--i) * 120ms); }
.ld-intro .ld-hero-sub { animation: ldRise 1s var(--ld-ease) 0.42s both; }
.ld-intro .ld-hero-ctas { animation: ldRise 1s var(--ld-ease) 0.56s both; }
@keyframes ldReveal { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
@keyframes ldRise { from { opacity: 0; transform: translateY(0.45em); } to { opacity: 1; transform: none; } }

/* ── Feature strip ───────────────────────────────────────────────────────── */
.ld-strip { position: relative; background: #07100A; color: var(--ld-paper); border-top: 1px solid rgba(47, 209, 91, 0.18); }
.ld-strip-list {
  margin-block: 0;
  padding-block: clamp(26px, 3.4vw, 40px);
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 0;
}
.ld-strip-item { display: grid; justify-items: center; align-content: start; gap: 6px; padding-inline: clamp(12px, 2vw, 28px); text-align: center; }
.ld-strip-item:nth-child(even) { border-inline-start: 1px solid var(--ld-line-dark); }
.ld-strip-icon { color: var(--ld-green); margin-bottom: 6px; }
.ld-strip-icon .ld-icon { width: 34px; height: 34px; }
.ld-strip-title { font-family: var(--ld-display); font-weight: 700; font-size: clamp(1rem, 1.35vw, 1.1875rem); letter-spacing: -0.005em; }
.ld-strip-text { color: var(--ld-muted-dark); font-size: clamp(0.8125rem, 1vw, 0.9375rem); line-height: 1.45; max-width: 26ch; }
@media (min-width: 900px) {
  .ld-strip-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ld-strip-item + .ld-strip-item { border-inline-start: 1px solid var(--ld-line-dark); }
}

/* ── Sections (shared) ───────────────────────────────────────────────────── */
.ld-section { position: relative; padding-block: clamp(72px, 9vw, 128px); scroll-margin-top: var(--ld-nav-h); }
.ld-dark { background: var(--ld-ink); color: var(--ld-paper); }
.ld-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--ld-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ld-green-deep);
}
.ld-dark .ld-kicker { color: var(--ld-green); }
.ld-kicker-rule { width: 26px; height: 2px; border-radius: 2px; background: currentColor; flex-shrink: 0; }
.landing[data-lang="he"] .ld-kicker { letter-spacing: 0.03em; font-size: 0.875rem; }
.ld-h2 {
  margin: 16px 0 0;
  font-family: var(--ld-display);
  font-weight: 800;
  font-size: clamp(2.125rem, 4.2vw, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  max-width: 18ch;
  text-wrap: balance;
}
.landing[data-lang="he"] .ld-h2 { letter-spacing: -0.01em; line-height: 1.12; }
.ld-h3 { margin: 0; font-family: var(--ld-display); font-weight: 700; font-size: clamp(1.375rem, 2.2vw, 1.75rem); letter-spacing: -0.015em; }
.ld-lead { margin: 20px 0 0; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.6; max-width: 44ch; color: var(--ld-muted-light); }
.ld-dark .ld-lead { color: var(--ld-muted-dark); }
.ld-text-link { display: inline-flex; align-items: center; gap: 12px; font-family: var(--ld-display); font-weight: 600; font-size: 1rem; color: var(--ld-green-deep); }
.ld-text-link:hover { color: var(--ld-ink); }

/* Scroll reveals — hidden only while landing.js observes them. */
.landing [data-reveal] { transition: opacity 0.9s var(--ld-ease), transform 0.9s var(--ld-ease); transition-delay: calc(var(--d, 0) * 90ms); }
.ld-reveal-on [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(28px); }

/* ── How it works (the section "Explore Keelo" lands on) ────────────────────
   The pre-redesign homepage's section 01, restored. Its base kicker and
   headline styles are that version's, scoped to this section, so the
   homepage's other section heads are unchanged. */
.ld-real { background: var(--ld-paper); }
.ld-real .ld-kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-family: var(--ld-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ld-green-deep);
}
.ld-real .ld-kicker-no { display: inline-flex; align-items: center; gap: 14px; }
.ld-real .ld-kicker-no::after { content: ''; width: 32px; height: 1px; background: currentColor; opacity: 0.6; }
.landing[data-lang="he"] .ld-real .ld-kicker { letter-spacing: 0.04em; font-size: 0.875rem; }
.ld-real .ld-h2 {
  margin: 22px 0 0;
  font-family: var(--ld-display);
  font-weight: 800;
  font-size: clamp(2.625rem, 6.4vw, 6rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  max-width: 14ch;
  text-wrap: balance;
}
.landing[data-lang="he"] .ld-real .ld-h2 { text-transform: none; letter-spacing: -0.012em; line-height: 1.05; font-size: clamp(2.375rem, 5.6vw, 5.25rem); }
/*   Section 01's components as they were (7d6931f landing.css), arranged in
   two parts, one above the other: first the headline and the three-step
   flow (centred from 640px wide), then — below the whole diagram — the
   explanatory card with the CTA (from 960px wide its own two columns: the
   explanation and photo, then the capabilities and the button). */
.ld-real { padding-block: clamp(64px, 10vw, 96px); }
.ld-real-grid { display: grid; gap: clamp(56px, 7vw, 104px); }
.ld-real .ld-h2 { max-width: 12ch; }
/* The flow: phones — a vertical list, arrows pointing down. */
.ld-flow { margin: 36px 0 0; padding: 0; list-style: none; display: grid; gap: 36px; }
.ld-flow-step { position: relative; display: grid; grid-template-columns: 84px 1fr; gap: 18px; align-items: center; }
.ld-flow-card {
  display: grid;
  place-items: center;
  height: 84px;
  border-radius: 18px;
  background: #FBFAF7;
  box-shadow: inset 0 0 0 1px var(--ld-line-light), 0 1px 2px rgba(13, 15, 14, 0.04);
}
.ld-flow-icon--clock { width: 78%; }
@media (min-width: 640px) { .ld-flow-icon--clock { width: 64%; } }
.ld-flow-icon--live { width: 48%; color: var(--ld-green-deep); }
.ld-flow-icon--pgn { width: 34%; }
.ld-flow-step--2 .ld-flow-card { background: radial-gradient(circle at 50% 50%, #E3F3E8 0 34%, #FBFAF7 35%); }
.ld-flow-body { display: grid; gap: 4px; }
.ld-flow-title { font-family: var(--ld-display); font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.01em; }
.ld-flow-text { color: var(--ld-muted-light); font-size: 0.9375rem; line-height: 1.45; }
/* The arrow into steps 2 and 3: one green arrow, pointing the reading
   direction (right in English, left in Hebrew) — down on phones. */
.ld-flow-step + .ld-flow-step::before {
  content: '';
  position: absolute;
  width: 26px;
  height: 16px;
  background: var(--ld-green-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 16'%3E%3Cpath d='M1 8h22M16 1.5 23 8l-7 6.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 16'%3E%3Cpath d='M1 8h22M16 1.5 23 8l-7 6.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  inset-inline-start: 29px;
  top: -27px;
  transform: rotate(90deg);
}
/* The card. */
.ld-real-card {
  padding: 26px 22px;
  border-radius: 20px;
  background: #FBFAF7;
  box-shadow: inset 0 0 0 1px var(--ld-line-light), 0 18px 40px -28px rgba(13, 15, 14, 0.25);
}
.ld-real-card-kicker { margin: 0; font-family: var(--ld-display); font-weight: 600; font-size: 0.875rem; color: var(--ld-green-deep); }
.ld-real-card-title { margin: 10px 0 0; font-family: var(--ld-display); font-weight: 800; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; }
.ld-real-card-text { margin: 12px 0 0; color: var(--ld-muted-light); font-size: 1rem; line-height: 1.55; }
/* The card's concept photo: beside the paragraph from 640px wide (a 4:3
   crop — compact, so the card doesn't grow), below it on phones; cropped,
   never stretched, around the clock. */
.ld-real-photo { margin: 16px 0 0; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--ld-paper-2); }
.ld-real-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 51% 50%; }
@media (min-width: 640px) {
  .ld-real-intro { display: grid; grid-template-columns: minmax(0, 1fr) 40%; gap: 20px; align-items: center; }
  .ld-real-photo { margin: 12px 0 0; aspect-ratio: 4 / 3; }
}
.ld-real-features { margin: 18px 0 0; padding: 18px 0 0; list-style: none; display: grid; gap: 16px; border-top: 1px solid var(--ld-line-light); }
.ld-real-features li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; }
.ld-real-feature-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #E3F3E8; color: var(--ld-green-deep); }
.ld-real-feature-icon svg { width: 22px; height: 22px; }
.ld-real-feature-body { display: grid; gap: 2px; }
.ld-real-feature-title { font-family: var(--ld-display); font-weight: 700; font-size: 1.0625rem; }
.ld-real-feature-text { color: var(--ld-muted-light); font-size: 0.9375rem; line-height: 1.45; }
.ld-real-cta { margin-top: 22px; width: 100%; }
.ld-real-cta.ld-btn--lg { height: 56px; }

/* Wider: the flow runs across, cards over captions. */
@media (min-width: 640px) {
  .ld-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
  .ld-flow-step { grid-template-columns: none; align-content: start; gap: 14px; text-align: center; }
  .ld-flow-card { height: 128px; }
  .ld-flow-step + .ld-flow-step::before { inset-inline-start: -35px; top: 56px; transform: none; }
  [dir="rtl"] .ld-flow-step + .ld-flow-step::before { transform: scaleX(-1); }
  .ld-real-card { padding: 32px; }
  /* Part 1, centred: kicker, headline, the three cards side by side. */
  .ld-real-main { text-align: center; }
  .ld-real .ld-kicker { justify-content: center; }
  .ld-real .ld-h2 { margin-inline: auto; }
  .ld-flow { max-width: 960px; margin-inline: auto; }
}
@media (min-width: 960px) {
  .ld-real { padding-block: clamp(64px, 7vw, 112px); }
  .ld-real .ld-h2 { font-size: clamp(2.75rem, min(5.4vw, 9.6vh), 5.75rem); margin-top: clamp(12px, 2vh, 22px); }
  .landing[data-lang="he"] .ld-real .ld-h2 { font-size: clamp(2.5rem, min(5vw, 9vh), 5.25rem); }
  .ld-flow { margin-top: clamp(24px, 4.5vh, 52px); gap: clamp(36px, 3.4vw, 52px); }
  .ld-flow-card { height: clamp(108px, 17vh, 156px); }
  .ld-flow-step + .ld-flow-step::before { inset-inline-start: calc(clamp(36px, 3.4vw, 52px) / -2 - 13px); top: calc(clamp(108px, 17vh, 156px) / 2 - 8px); }
  .ld-flow-text { font-size: clamp(0.875rem, 1.9vh, 1rem); }
  .ld-real-card { padding: clamp(20px, 3vh, 34px) clamp(26px, 2.6vw, 40px); }
  .ld-real-card-title { font-size: clamp(1.375rem, min(2.1vw, 3.7vh), 2.125rem); }
  .ld-real-card-text { margin-top: clamp(8px, 1.4vh, 14px); font-size: clamp(0.9375rem, 2vh, 1.0625rem); }
  .ld-real-photo { margin-top: clamp(8px, 1.4vh, 14px); }
  .ld-real-features { margin-top: clamp(14px, 2.4vh, 24px); padding-top: clamp(14px, 2.4vh, 24px); gap: clamp(10px, 2vh, 20px); }
  .ld-real-features li { grid-template-columns: clamp(40px, 6vh, 52px) 1fr; }
  .ld-real-feature-icon { width: clamp(40px, 6vh, 52px); height: clamp(40px, 6vh, 52px); }
  .ld-real-cta { margin-top: clamp(16px, 3vh, 28px); }
  .ld-real-cta.ld-btn--lg { height: clamp(50px, 7vh, 62px); }
  /* Part 2: the card under the diagram, in two columns — the explanation
     and photo; then the capabilities and the button, after one rule. */
  .ld-real-card {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: clamp(32px, 4vw, 64px);
    width: min(100%, 1080px);
    margin-inline: auto;
    padding: clamp(28px, 3vw, 44px);
  }
  .ld-real-card-kicker,
  .ld-real-card-title { grid-column: 1; }
  .ld-real-intro { grid-column: 1; grid-row: 3 / span 2; align-self: start; }
  .ld-real-features { grid-column: 2; grid-row: 1 / span 3; align-self: start; margin-top: 0; padding: 0 0 0; padding-inline-start: clamp(28px, 3vw, 48px); border-top: 0; border-inline-start: 1px solid var(--ld-line-light); }
  .ld-real-cta { grid-column: 2; grid-row: 4; align-self: end; width: auto; margin-inline-start: clamp(28px, 3vw, 48px); }
}

/* ── Technology (dark) ───────────────────────────────────────────────────── */
.ld-tech {
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 78% 40%, rgba(47, 209, 91, 0.1), transparent 70%),
    linear-gradient(160deg, #0B140E 0%, #070B08 60%, #050806 100%);
}
[dir="rtl"] .ld-tech {
  background:
    radial-gradient(60% 70% at 22% 40%, rgba(47, 209, 91, 0.1), transparent 70%),
    linear-gradient(200deg, #0B140E 0%, #070B08 60%, #050806 100%);
}
.ld-tech-grid { display: grid; gap: 56px; align-items: center; }
.ld-tech-cta { margin-top: 32px; }
.ld-tech-visual { margin: 0; min-width: 0; }
/* A stylised viewer screen: the board and its PGN, side by side. */
.ld-screen {
  border-radius: 18px;
  background: #0F1712;
  box-shadow: inset 0 0 0 1px rgba(244, 241, 234, 0.1), 0 40px 80px -40px rgba(0, 0, 0, 0.9), 0 0 0 8px rgba(244, 241, 234, 0.03);
  overflow: hidden;
}
.ld-screen-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ld-line-dark); }
.ld-screen-dots { display: inline-flex; gap: 6px; }
.ld-screen-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(244, 241, 234, 0.18); }
.ld-screen-body { display: grid; gap: 18px; padding: 18px; }
.ld-screen-board,
.ld-screen-record { min-width: 0; }
@media (min-width: 560px) {
  .ld-screen-body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}
.ld-demo-label {
  display: block;
  margin-bottom: 12px;
  font-family: var(--ld-display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ld-muted-dark);
}
.landing[data-lang="he"] .ld-demo-label { letter-spacing: 0.04em; font-size: 0.8125rem; }
.ld-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  aspect-ratio: 1;
  width: 100%;
  max-width: 420px;
  border-radius: 6px;
  overflow: hidden;
}
.ld-sq { position: relative; background: #E9E4D7; display: grid; place-items: center; }
.ld-sq.is-dark { background: #3C7A53; }
.ld-sq.is-last::before { content: ''; position: absolute; inset: 0; background: rgba(214, 245, 98, 0.55); }
.ld-sq-rank,
.ld-sq-file { position: absolute; font-family: var(--ld-mono); font-size: clamp(0.5rem, 1vw, 0.625rem); font-weight: 600; line-height: 1; color: #3C7A53; z-index: 1; }
.ld-sq.is-dark .ld-sq-rank,
.ld-sq.is-dark .ld-sq-file { color: #E9E4D7; }
.ld-sq-rank { top: 3px; left: 3px; }
.ld-sq-file { bottom: 3px; right: 4px; }
.ld-pc { position: relative; width: 84%; height: 84%; z-index: 1; stroke-linejoin: round; }
.ld-pc--w { fill: #FBFAF6; stroke: #161816; stroke-width: 1.5; }
.ld-pc--b { fill: #161816; stroke: #161816; stroke-width: 1.5; }
.ld-live-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 999px; background: rgba(229, 72, 77, 0.14); color: #FF8A8E; font-family: var(--ld-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.ld-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #E5484D; animation: ldPulse 1.6s ease-in-out infinite; }
@keyframes ldPulse { 50% { opacity: 0.35; } }
.ld-pgn {
  margin: 0;
  font-family: var(--ld-mono);
  font-size: clamp(0.75rem, 0.95vw, 0.875rem);
  line-height: 1.8;
  color: var(--ld-paper);
  text-align: left;
  overflow-wrap: anywhere;
}
.ld-pgn-tag { display: block; color: rgba(244, 241, 234, 0.48); }
.ld-pgn-moves { display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ld-line-dark); }
.ld-pgn-move { white-space: nowrap; }
.ld-pgn-no { color: rgba(244, 241, 234, 0.42); }
.ld-pgn .is-last { padding: 1px 6px; border-radius: 5px; background: var(--ld-green); color: var(--ld-ink); font-weight: 700; }
.ld-pgn-res { color: rgba(244, 241, 234, 0.42); }
/* The four capabilities, as glass chips under the screen. */
.ld-tech-chips { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ld-chip {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(244, 241, 234, 0.04);
  box-shadow: inset 0 0 0 1px rgba(244, 241, 234, 0.1);
}
.ld-chip-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(47, 209, 91, 0.12); color: var(--ld-green); }
.ld-chip-icon .ld-icon { width: 24px; height: 24px; }
.ld-chip-body { display: grid; gap: 2px; min-width: 0; }
.ld-chip-title { font-family: var(--ld-display); font-weight: 600; font-size: 0.9875rem; }
.ld-chip-text { color: var(--ld-muted-dark); font-size: 0.8125rem; line-height: 1.4; }
.ld-demo-caption { margin-top: 12px; font-size: 0.8125rem; color: rgba(244, 241, 234, 0.42); }
@media (min-width: 640px) { .ld-tech-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .ld-tech-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 96px); }
  /* The visual on the reading-start side (the reference's zig-zag). */
  .ld-tech-visual { order: -1; }
}

/* ── Tournament day (light) ──────────────────────────────────────────────── */
.ld-how { background: #FBFAF7; }
.ld-steps { margin: clamp(44px, 5vw, 72px) 0 0; padding: 0; list-style: none; display: grid; gap: 36px; }
.ld-steps li { display: grid; gap: 10px; align-content: start; }
.ld-step-no {
  font-family: var(--ld-display);
  font-weight: 800;
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(20, 122, 61, 0.55);
}
.ld-step-title { margin-top: 12px; font-family: var(--ld-display); font-weight: 700; font-size: 1.3125rem; letter-spacing: -0.01em; }
.ld-step-text { color: var(--ld-muted-light); font-size: 1.0625rem; line-height: 1.55; max-width: 34ch; }
@media (min-width: 900px) { .ld-steps { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.ld-live { margin-top: clamp(56px, 7vw, 96px); padding-top: 36px; border-top: 1px solid var(--ld-line-light); display: grid; gap: 24px; }
.ld-live-sub { margin: 10px 0 0; color: var(--ld-muted-light); }
.ld-live-body { min-height: 72px; }
.ld-live-note { margin: 0; padding: 22px 0; color: var(--ld-muted-light); border-top: 1px solid var(--ld-line-light); border-bottom: 1px solid var(--ld-line-light); }
.ld-live-list { margin: 0; padding: 0; list-style: none; }
.ld-live-row {
  display: grid;
  grid-template-columns: 1fr 24px;
  grid-template-areas: 'status arrow' 'title arrow' 'meta arrow';
  gap: 6px 16px;
  align-items: center;
  padding: 20px 4px;
  border-top: 1px solid var(--ld-line-light);
  transition: background-color 0.25s ease;
}
.ld-live-list li:last-child .ld-live-row { border-bottom: 1px solid var(--ld-line-light); }
.ld-live-row:hover { background: rgba(13, 15, 14, 0.03); }
.ld-live-status { grid-area: status; display: inline-flex; align-items: center; gap: 8px; font-family: var(--ld-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ld-muted-light); }
.ld-live-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: rgba(13, 15, 14, 0.35); }
.ld-live-status--in_progress { color: #C6282D; }
.ld-live-status--in_progress::before { background: #E5484D; }
.ld-live-status--registration_open,
.ld-live-status--check_in_open { color: var(--ld-green-deep); }
.ld-live-status--registration_open::before,
.ld-live-status--check_in_open::before { background: var(--ld-green); }
.landing[data-lang="he"] .ld-live-status { letter-spacing: 0.03em; font-size: 0.8125rem; }
.ld-live-title { grid-area: title; font-family: var(--ld-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ld-live-meta { grid-area: meta; color: var(--ld-muted-light); font-size: 0.9375rem; }
.ld-live-arrow { grid-area: arrow; width: 9px; height: 9px; border-top: 2px solid var(--ld-ink); border-right: 2px solid var(--ld-ink); transform: rotate(45deg); transition: transform 0.3s var(--ld-ease); justify-self: center; }
[dir="rtl"] .ld-live-arrow { transform: rotate(-135deg); }
.ld-live-row:hover .ld-live-arrow { transform: translateX(4px) rotate(45deg); }
[dir="rtl"] .ld-live-row:hover .ld-live-arrow { transform: translateX(-4px) rotate(-135deg); }
.ld-live .ld-text-link { justify-self: start; }
@media (min-width: 900px) {
  .ld-live { grid-template-columns: 4fr 8fr; gap: 24px 72px; }
  .ld-live .ld-text-link { grid-column: 2; }
  .ld-live-row { grid-template-columns: 170px 1fr auto 24px; grid-template-areas: 'status title meta arrow'; padding: 22px 8px; }
}

/* ── Audiences (light) ───────────────────────────────────────────────────── */
.ld-audience { background: var(--ld-paper); }
.ld-audience-head { display: grid; justify-items: center; text-align: center; }
.ld-audience-head .ld-h2 { margin-inline: auto; }
.ld-cards { margin: clamp(36px, 4.5vw, 60px) 0 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.ld-card {
  display: grid;
  height: 100%;
  align-content: start;
  border-radius: 18px;
  overflow: hidden;
  background: #FBFAF7;
  box-shadow: inset 0 0 0 1px var(--ld-line-light), 0 18px 40px -32px rgba(13, 15, 14, 0.35);
  transition: transform 0.35s var(--ld-ease), box-shadow 0.35s ease;
}
.ld-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px var(--ld-line-light), 0 26px 50px -30px rgba(13, 15, 14, 0.45); }
.ld-card-photo { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ld-paper-2); }
.ld-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ld-ease); }
.ld-card:hover .ld-card-photo img { transform: scale(1.04); }
.ld-card-title { padding: 18px 20px 0; font-family: var(--ld-display); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; transition: color 0.25s ease; }
.ld-card:hover .ld-card-title { color: var(--ld-green-deep); }
.ld-card-text { padding: 6px 20px 22px; color: var(--ld-muted-light); font-size: 0.9375rem; line-height: 1.45; }
@media (min-width: 560px) { .ld-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ld-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }

/* ── Final call ──────────────────────────────────────────────────────────── */
.ld-join { overflow: hidden; text-align: center; background: radial-gradient(80% 90% at 50% 100%, #0E1A12 0%, #070B08 55%, #050806 100%); padding-block: clamp(88px, 11vw, 150px); }
.ld-join::before {
  content: '';
  position: absolute;
  inset: auto -20% -55% -20%;
  height: 90%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(47, 209, 91, 0.16), transparent 70%);
  pointer-events: none;
}
.ld-join .ld-wrap { position: relative; z-index: 1; }
.ld-join-title {
  margin: 0 auto;
  font-family: var(--ld-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 4.8vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 17ch;
  text-wrap: balance;
}
.landing[data-lang="he"] .ld-join-title { letter-spacing: -0.012em; line-height: 1.14; }
.ld-join-ctas { margin-top: clamp(28px, 3.6vw, 44px); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.ld-join .ld-btn--lg { min-width: 240px; box-shadow: 0 12px 36px -10px rgba(47, 209, 91, 0.5); }
.ld-join-login { margin: 0; color: var(--ld-muted-dark); }
.ld-join-login a { color: var(--ld-paper); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(244, 241, 234, 0.4); }
.ld-join-login a:hover { color: var(--ld-green-hi); text-decoration-color: currentColor; }
/* Lit pieces at both edges (landing.js landingArtHtml). */
.ld-art { position: absolute; inset: 0; pointer-events: none; }
.ld-art-piece { position: absolute; bottom: -6%; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.65)); aspect-ratio: 100 / 220; }
.ld-art-piece--king { left: 3%; height: 92%; }
.ld-art-piece--pawn { right: 9%; height: 58%; transform: scaleX(-1); }
.ld-art-piece--pawn2 { right: 1%; height: 74%; transform: scaleX(-1); opacity: 0.9; }
@media (max-width: 899px) {
  .ld-art-piece { opacity: 0.35; }
  .ld-art-piece--king { left: -10%; height: 70%; }
  .ld-art-piece--pawn { display: none; }
  .ld-art-piece--pawn2 { right: -8%; height: 56%; }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.ld-footer { background: #050806; color: var(--ld-muted-dark); border-top: 1px solid var(--ld-line-dark); padding-block: 40px calc(40px + env(safe-area-inset-bottom)); }
.ld-footer-inner { display: grid; gap: 18px; align-items: center; }
.ld-logo--footer { height: 30px; }
.ld-footer-tag { margin: 0; font-size: 0.9375rem; }
.ld-footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 0.9375rem; }
.ld-footer-links a { color: var(--ld-paper); }
.ld-footer-links a:hover { color: var(--ld-green-hi); }
.ld-footer-copy { margin: 0; font-size: 0.8125rem; color: rgba(244, 241, 234, 0.42); }
.ld-footer-copy a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(244, 241, 234, 0.3); }
.ld-footer-copy a:hover { color: var(--ld-paper); }
@media (min-width: 900px) {
  .ld-footer-inner { grid-template-columns: auto 1fr auto auto; gap: 40px; }
}

/* ── Phones ──────────────────────────────────────────────────────────────── */
@media (max-width: 699px), (max-aspect-ratio: 4/5) {
  /* Phones and portrait tablets: a closer crop — the image wider than the
     screen, the clock centred — and the copy centred above it. */
  .ld-hero { --hero-h: max(600px, 100svh); --img-w: 140vw; }
  .ld-hero-photo img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 34%);
    -webkit-mask-composite: source-over;
    mask-image: linear-gradient(to bottom, transparent 0, #000 34%);
    mask-composite: add;
  }
  .ld-hero-inner { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--ld-nav-h) + 20px); padding-bottom: calc(var(--img-w) * 0.4); }
  .ld-hero-title, .ld-hero-sub { margin-inline: 0; }
  .ld-hero-title { font-size: clamp(2rem, 9vw, 2.75rem); }
  .ld-hero-shade {
    background:
      radial-gradient(40% 16% at 50% 82%, rgba(91, 234, 134, 0.16), transparent 72%),
      linear-gradient(to top, rgba(5, 8, 6, 0.7) 0%, rgba(5, 8, 6, 0) 14%);
  }
}
@media (max-width: 639px) {
  .ld-nav-inner { gap: 12px; }
  .ld-logo { height: 30px; }
  .ld-nav-end { gap: 8px; }
  .ld-nav-end > .ld-btn--sm { height: 38px; padding: 0 16px; font-size: 0.875rem; }
  .ld-hero-ctas { flex-direction: column; align-items: stretch; max-width: 340px; margin-inline: auto; }
  .ld-hero .ld-btn--lg { min-width: 0; }
}

/* ── Reduced motion: everything in place, no entrances or reveals ───────── */
@media (prefers-reduced-motion: reduce) {
  .landing *,
  .landing *::before,
  .landing *::after { animation: none !important; transition: none !important; }
  .ld-reveal-on [data-reveal]:not(.is-in) { opacity: 1; transform: none; }
}