/* Публичная часть (главная, вход и регистрация, шапка и кнопки SEO-страниц) на языке кабинета: те же токены и шкала
   --sx-*, что в slots.css. Одна главная кнопка - жёлтая, вторичные - мягкие с зелёным текстом; панели и карточки
   сплошные, с тонкой рамкой и без теней; сцены - сплошной изумруд без градиентов. Шапка .lp-top--solid — одна панель, без стекла. */
:root { --sx-panel: var(--surface); }
:root[data-theme="dark"] { --sx-panel: #0D211C; }

/* ---------- Главная: ширина и поля как у «Окна» (1440px, 24/40/16px) ---------- */
body.is-landing > main {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: 10px 24px 96px;
  box-sizing: border-box;
}
body.is-landing .lp {
  max-width: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 760px) {
  body.is-landing > main {
    padding-inline: 16px;
  }
}
@media (min-width: 1280px) {
  body.is-landing > main {
    padding-inline: 40px;
  }
}

/* ---------- Pill .lp-link и родственные: без «просвета» снизу ----------
   styles.css даёт border-bottom 2px; в тёмной теме — только border-bottom-color (белый низ).
   redesign.css — pill с border 1px; низ должен совпадать с рамкой, не светиться. */
.lp-link:not(.lp-play),
.sl-prevnext a,
.lvl-more,
.cert-link {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--accent-soft);
}
.lp-link:not(.lp-play):hover,
.sl-prevnext a:hover,
.lvl-more:hover,
.cert-link:hover {
  border-bottom-color: var(--accent-soft);
}
:root[data-theme="dark"] .lp-link:not(.lp-play),
:root[data-theme="dark"] .sl-prevnext a,
:root[data-theme="dark"] .lvl-more,
:root[data-theme="dark"] .cert-link {
  border-bottom-color: var(--accent-soft);
}
:root[data-theme="dark"] .lp-link:not(.lp-play):hover,
:root[data-theme="dark"] .sl-prevnext a:hover,
:root[data-theme="dark"] .lvl-more:hover,
:root[data-theme="dark"] .cert-link:hover {
  border-bottom-color: var(--accent-soft);
}

/* Текстовые ссылки в формах — подчёрkивание, не pill */
.lt-form-actions .lp-link {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  border-bottom: 2px solid rgba(21, 32, 28, 0.2);
}
.lt-form-actions .lp-link:hover {
  background: none;
  border-bottom-color: var(--ink);
}
:root[data-theme="dark"] .lt-form-actions .lp-link {
  border-bottom: 2px solid rgba(255, 255, 255, 0.25);
}
:root[data-theme="dark"] .lt-form-actions .lp-link:hover {
  border-bottom-color: var(--accent);
}

/* Главная: hero — вторичная кнопка сплошная, не зелёный pill SEO */
body.is-landing .lp-actions .lp-link {
  border: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
}
body.is-landing .lp-actions .lp-link:hover {
  border-color: var(--accent-soft);
  border-bottom-color: var(--accent-soft);
  background: var(--surface-2);
}

/* ---------- Шапка: .lp-top--solid — те же цвета и рамка, что на компьютере; на телефоне — капсула с отступом сверху ---------- */
.lp-top--solid {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  box-sizing: border-box;
  background: var(--sx-panel) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--sx-r-card);
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transition: none;
}
.lp-top--solid::before,
.lp-top--solid::after {
  display: none !important;
  content: none !important;
}
.lp-auth {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
  min-width: 0;
}
@media (min-width: 821px) {
  .lp-top--solid .lp-auth { gap: 10px; }
  .lp-top--solid .site-drop-panel { left: auto; right: 0; }
}
@media (min-width: 761px) {
  .lp-top--solid,
  .lp-top--solid.is-stuck {
    padding: 8px 12px;
    margin-inline: -14px;
  }
}
.seo-page > .lp-top { margin-block: 10px 16px; }
@media (max-width: 760px) {
  .lp-top--solid,
  .lp-top--solid.is-stuck {
    position: sticky;
    top: calc(10px + env(safe-area-inset-top, 0px));
    z-index: 40;
    width: auto;
    margin: 0 -6px;
    padding: 8px 10px;
    border-radius: var(--sx-r-card);
  }
  .lp-top--solid .lp-btn-sm {
    height: 40px;
    min-height: 40px;
    padding-inline: 14px;
  }
  .lp-top--solid .site-menu summary {
    width: 40px;
    height: 40px;
    border-radius: var(--sx-r-inner);
  }
  .lp-top--solid .theme-toggle {
    width: 40px;
    height: 40px;
  }
}

/* ---------- Кнопки ---------- */
.lp-btn { height: 48px; padding: 0 28px; border: 0; border-radius: var(--sx-r-pill); background: var(--butter); color: var(--sx-on-butter); font: 600 var(--sx-t-md) var(--sans); box-shadow: none; transition: background-color var(--sx-dur) var(--sx-ease), color var(--sx-dur) var(--sx-ease), transform var(--sx-dur) var(--sx-ease); }
.lp-btn:hover { background: var(--sx-butter-hover); }
.lp-btn-sm { height: 40px; padding: 0 20px; border-radius: var(--sx-r-pill); font-size: var(--sx-t-sm); }
.lp-hero-new .lp-btn { height: 56px; padding: 0 32px; border-radius: var(--sx-r-pill); font-size: var(--sx-t-md); }
.lp-actions { gap: 12px; }
.lp-actions .lp-link { min-height: 56px; padding: 0 24px; font-size: var(--sx-t-md); }
/* В шапке кнопка вторичная: жёлтая на экране одна - та, что ведёт его. */
.lp-top .lp-btn { height: 40px; padding: 0 16px; border: 1px solid var(--accent-soft); background: var(--accent-softer); color: var(--accent); font: 600 var(--sx-t-sm) var(--sans); }
.lp-top .lp-btn:hover { background: var(--accent-soft); }
.ls-next-btn { padding: 8px 16px; border-radius: var(--sx-r-pill); background: var(--butter); color: var(--sx-on-butter); font: 600 var(--sx-t-sm) var(--sans); }

/* ---------- Заголовки и подписи: крупное слово в плотный интерлиньяж, как «Окна» ---------- */
.lp h1, .lp h2, .lp h3 { font-weight: 600; }
.lp-hero.lp-hero-new h1 { font: 600 clamp(2.5rem, 5vw, var(--sx-t-3xl))/1 var(--display); letter-spacing: -0.04em; }
.lp-hero-new .lp-lead { font-size: var(--sx-t-lg); }
.lp-section h2, .lp-final h2 { font: 600 clamp(1.75rem, 3.4vw, var(--sx-t-2xl))/1.05 var(--display); letter-spacing: -0.03em; text-wrap: balance; }
.lp-step h3, .ch-card b { font: 600 var(--sx-t-lg)/1.2 var(--display); letter-spacing: -0.01em; }
.ft h3 { font: 600 var(--sx-t-md)/1.3 var(--sans); }
.ft p, .ch-card p { font-size: var(--sx-t-sm); }
.lp-step p, .lp-reasons p, .lp-talk-intro p, .lp-faq details p, .lp-cert p { font-size: var(--sx-t-md); }
.lp-kicker, .lp-cert-kicker { display: block; margin-bottom: 12px; padding: 0; border-radius: 0; background: none; font: 400 var(--sx-t-sm)/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.lp-free { color: var(--accent); }
.lp-stroke path { stroke: var(--butter); opacity: 1; }
.lp-section { border-top-color: var(--line); }
.lp-reasons p, .lp-question { border-color: var(--line); }
.lp-hero.lp-hero-new { padding-top: 56px; }
.sf-cols h2 { font: 600 var(--sx-t-sm)/1.4 var(--sans); letter-spacing: 0; text-transform: none; }

/* ---------- Карточки ---------- */
.ft, .ch-card, .lp-dialog, .lp-cert-steps li, .lp-cert-img, .auth-card, .seo-topic, .blog-card { border: 1px solid var(--line); border-radius: var(--sx-r-card); background: var(--surface); box-shadow: none; }
.lp-faq details { border-radius: var(--sx-r-inner); box-shadow: none; }
/* FAQ на главной: «+» в круге, жёлтая палитра (не зелёный accent из styles.css) */
body.is-landing .lp-faq details {
  border: 1px solid var(--line);
  transition:
    background-color var(--sx-dur) var(--sx-ease),
    border-color var(--sx-dur) var(--sx-ease);
}
body.is-landing .lp-faq summary::after {
  content: "+";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: var(--surface-2);
  color: var(--muted-2);
  font: 400 22px/1 var(--sans);
  transform: translateY(-1px);
  transition:
    transform var(--sx-dur) var(--sx-ease),
    background-color var(--sx-dur) var(--sx-ease),
    color var(--sx-dur) var(--sx-ease);
}
body.is-landing .lp-faq details[open] {
  background: var(--butter);
  border-color: var(--butter);
}
body.is-landing .lp-faq details[open] summary {
  color: var(--sx-on-butter);
}
body.is-landing .lp-faq details[open] p {
  color: color-mix(in oklab, var(--sx-on-butter) 88%, transparent);
}
body.is-landing .lp-faq details[open] summary::after {
  transform: rotate(45deg) translateY(-1px);
  background: color-mix(in oklab, var(--sx-on-butter) 16%, transparent);
  color: var(--sx-on-butter);
}
@media (hover: hover) {
  body.is-landing .lp-faq details:not([open]) summary:hover::after {
    background: var(--butter);
    color: var(--sx-on-butter);
    transform: translateY(-1px);
  }
}
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  @media (prefers-reduced-motion: no-preference) {
    body.is-landing .lp-faq details:not([open]) summary:hover::after {
      transform: translateY(-1px) scale(1.08);
    }
  }
}
.ft-ico { border-radius: var(--sx-r-inner); background: var(--accent-softer); color: var(--accent); }
.lp-pills svg { stroke: var(--accent); }
.lp-step-when { padding: 2px 8px; border-radius: var(--sx-r-tag); background: var(--accent-soft); color: var(--accent); font: 400 var(--sx-t-xs)/1.5 var(--sans); }
.mn:not(.is-dark) { color: var(--accent); }
.mn-wrap:not(.is-dark) .mn-arrow path { stroke: var(--accent); }

/* ---------- Сцены: сплошной изумруд, как «Ближайшее окно» ---------- */
.ls, .hw-stage { border-radius: var(--sx-r-card); background: var(--night); box-shadow: none; }
.ls { padding: 24px; }
.ls-card { border-radius: var(--sx-r-inner); background: var(--sx-night-raised); color: var(--sx-on-night); box-shadow: none; }
.ls-eyebrow { color: var(--sx-on-night-2); font: 400 var(--sx-t-xs)/1.4 var(--sans); letter-spacing: 0; text-transform: none; }
.ls-chips i { background: var(--night); color: var(--sx-on-night); font-weight: 400; }
.ls-chips i.is-hint { box-shadow: none; }
.ls-next { border-radius: var(--sx-r-inner); background: var(--sx-night-raised); }
.ls-next:hover { background: var(--sx-night-raised); }
.ls-next-label { color: var(--sx-on-night-2); font: 400 var(--sx-t-xs)/1.3 var(--sans); letter-spacing: 0; text-transform: none; }
.lp-final { border-radius: var(--sx-r-card); }
.hw-card { border: 1px solid var(--line); border-radius: var(--sx-r-inner); background: var(--surface); box-shadow: none; }
.hw-btn { background: var(--butter); color: var(--sx-on-butter); }
.hw-btn.is-done { background: var(--accent-soft); color: var(--accent); }

/* ---------- «Всё, чтобы заговорить»: сетка карточек на главной ---------- */
.ft-lead {
  margin-top: 12px;
  max-width: 42em;
  font-size: var(--sx-t-md);
  line-height: 1.55;
  color: var(--ink-2);
}
body.is-landing .ft-grid-landing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}
body.is-landing .ft-grid-landing .ft {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 100%;
  padding: 18px 18px 20px;
  opacity: 1;
  transform: translateY(0) scale(1);
  transform-origin: 50% 50%;
  box-shadow: none;
  transition:
    transform var(--sx-dur-long) var(--sx-ease),
    border-color var(--sx-dur) var(--sx-ease),
    background-color var(--sx-dur) var(--sx-ease),
    box-shadow var(--sx-dur) var(--sx-ease);
}
body.is-landing .ft-grid-landing .ft-ico {
  width: 44px;
  height: 44px;
  margin: 0;
  transition: transform var(--sx-dur) var(--sx-ease);
}
body.is-landing .ft-grid-landing .ft h3 {
  font: 600 var(--sx-t-md) / 1.25 var(--sans);
}
body.is-landing .ft-grid-landing .ft p {
  margin: 0;
  flex: 1;
  font-size: var(--sx-t-sm);
  line-height: 1.5;
  color: var(--ink-2);
}
@media (max-width: 960px) {
  body.is-landing .ft-grid-landing {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  body.is-landing .ft-grid-landing {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Главная: карточки тем и блога — сетка и отступы как на SEO-страницах ---------- */
body.is-landing .lp-section > h2 + .seo-topics,
body.is-landing .lp-section > .lp-sub + .seo-topics {
  margin-top: 24px;
}
body.is-landing .lp-section .seo-topics {
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
}
body.is-landing .lp-section .seo-topic {
  gap: 8px;
  padding: 20px 22px;
  box-shadow: none;
  transform: translateY(0) scale(1);
  transform-origin: 50% 50%;
  transition:
    transform var(--sx-dur) var(--sx-ease),
    border-color var(--sx-dur) var(--sx-ease),
    background-color var(--sx-dur) var(--sx-ease);
}
body.is-landing .lp-section .seo-topic:hover {
  box-shadow: none;
}
body.is-landing .lp-section .seo-topic .seo-topic-level {
  transition:
    background-color var(--sx-dur) var(--sx-ease),
    color var(--sx-dur) var(--sx-ease);
}
body.is-landing .lp-section .seo-topic.blog-card b {
  font: 600 19px/1.25 var(--display);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.is-landing .lp-section .blog-card > span:not(.seo-topic-level):not(.blog-card-meta) {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.is-landing .lp-section .blog-card-meta {
  margin-top: auto;
  padding-top: 4px;
}

body.is-landing .lp-section > .lp-sub + .lp-slang-chips {
  margin-top: 24px;
}
body.is-landing .lp-slang-chips {
  gap: 10px 12px;
}
body.is-landing .lp-slang-chips a {
  transform: scale(1);
  transform-origin: 50% 50%;
  transition:
    transform var(--sx-dur) var(--sx-ease),
    border-color var(--sx-dur) var(--sx-ease),
    background-color var(--sx-dur) var(--sx-ease),
    color var(--sx-dur) var(--sx-ease),
    box-shadow var(--sx-dur) var(--sx-ease);
}

/* ---------- Вход и регистрация ---------- */
/* Шапка на том же месте и той же ширины, что на главной: переход между ними не дёргается. */
body.is-auth main { max-width: 1200px; padding: 10px 32px 96px; }
@media (max-width: 760px) {
  body.is-auth main { padding: 0 16px 96px; }
}
.auth-card h1 { font: 600 var(--sx-t-2xl)/1 var(--display); letter-spacing: -0.04em; }
.auth-card .page-sub { margin-top: 12px; color: var(--ink-2); }
.auth-card .input, .auth-card .select { height: 48px; }
:root .auth-card .btn-primary { height: 48px; border: 0; background: var(--butter); color: var(--sx-on-butter); font: 600 var(--sx-t-md) var(--sans); box-shadow: none; }
:root .auth-card .btn-primary:hover:not(:disabled) { background: var(--sx-butter-hover); }
@media (max-width: 760px) {
  .auth-card h1 { font-size: 2rem; }
}

/* ---------- Десктоп: тактильный hover как в кабинете (#/slots) ---------- */
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  @media (prefers-reduced-motion: no-preference) {
    :is(body.is-landing, body.is-auth) .lp-btn,
    .seo-page .lp-btn,
    :is(body.is-landing, body.is-auth) .auth-card .btn-primary {
      transform: scale(1);
      transform-origin: 50% 50%;
      transition:
        transform var(--sx-dur) var(--sx-ease),
        background-color var(--sx-dur) var(--sx-ease),
        border-color var(--sx-dur) var(--sx-ease);
    }
    :is(body.is-landing, body.is-auth) .lp-btn:hover,
    .seo-page .lp-btn:hover,
    :is(body.is-landing, body.is-auth) .auth-card .btn-primary:hover:not(:disabled) {
      transform: scale(var(--sx-join-hover-scale, 1.06));
    }
    :is(body.is-landing, body.is-auth) .lp-btn:active,
    .seo-page .lp-btn:active {
      transform: scale(calc(var(--sx-join-hover-scale, 1.06) * 0.97));
    }

    :is(body.is-landing, body.is-auth) .lp-actions .lp-link,
    :is(body.is-landing, body.is-auth) .lp-more .lp-link,
    :is(body.is-landing, body.is-auth) .lp-cert-actions .lp-link,
    .seo-page .lp-link:not(.lp-play),
    .seo-page .cert-link {
      transform: translateY(0) scale(1);
      transform-origin: 50% 50%;
      transition:
        transform var(--sx-dur) var(--sx-ease),
        border-color var(--sx-dur) var(--sx-ease),
        background-color var(--sx-dur) var(--sx-ease);
    }
    :is(body.is-landing, body.is-auth) .lp-actions .lp-link:hover,
    :is(body.is-landing, body.is-auth) .lp-more .lp-link:hover,
    :is(body.is-landing, body.is-auth) .lp-cert-actions .lp-link:hover,
    .seo-page .lp-link:not(.lp-play):hover,
    .seo-page .cert-link:hover {
      transform: translateY(-2px) scale(1.03);
    }

    body.is-landing .ft-grid-landing .ft:hover {
      z-index: 1;
      transform: translateY(-4px) scale(1.018);
      border-color: var(--butter);
      background: var(--butter);
      box-shadow: 0 16px 36px -18px color-mix(in oklab, var(--butter) 45%, transparent);
    }
    body.is-landing .ft-grid-landing .ft:hover :is(h3, p) {
      color: var(--sx-on-butter);
    }
    body.is-landing .ft-grid-landing .ft:hover .ft-ico {
      transform: scale(1.08);
      background: color-mix(in oklab, var(--sx-on-butter) 14%, transparent);
      color: var(--sx-on-butter);
    }
    body.is-landing .ft-grid-landing .ft:active {
      transform: translateY(-1px) scale(1.008);
    }

    body.is-landing .lp-section .seo-topic:hover {
      z-index: 1;
      position: relative;
      transform: translateY(-3px) scale(1.02);
      border-color: var(--butter);
      background: var(--butter);
      box-shadow: 0 14px 32px -16px color-mix(in oklab, var(--butter) 40%, transparent);
    }
    body.is-landing .lp-section .seo-topic:hover :is(b, span:not(.seo-topic-level)) {
      color: var(--sx-on-butter);
    }
    body.is-landing .lp-section .seo-topic:hover .seo-topic-level {
      background: var(--night);
      color: var(--butter);
    }
    body.is-landing .lp-section .seo-topic:hover .blog-card-meta {
      color: color-mix(in oklab, var(--sx-on-butter) 70%, transparent);
    }

    body.is-landing .lp-slang-chips a:hover {
      z-index: 1;
      position: relative;
      transform: scale(1.1);
      border-color: var(--butter);
      background: var(--butter);
      color: var(--sx-on-butter);
      box-shadow: 0 10px 24px -14px color-mix(in oklab, var(--butter) 35%, transparent);
    }
    body.is-landing .lp-slang-chips a:active {
      transform: scale(1.04);
    }

    body.is-landing .lp-pills li {
      transition:
        transform var(--sx-dur) var(--sx-ease),
        border-color var(--sx-dur) var(--sx-ease),
        background-color var(--sx-dur) var(--sx-ease),
        box-shadow var(--sx-dur) var(--sx-ease);
    }
    body.is-landing .lp-pills li:hover {
      transform: translateY(-2px);
      border-color: var(--butter);
      background: var(--butter);
      box-shadow: 0 10px 24px -14px color-mix(in oklab, var(--butter) 35%, transparent);
    }
    body.is-landing .lp-pills li:hover svg {
      transform: scale(1.12) rotate(-6deg);
      stroke: var(--sx-on-butter);
      background: color-mix(in oklab, var(--sx-on-butter) 12%, transparent);
    }
    body.is-landing .lp-pills li:hover span {
      color: var(--sx-on-butter);
    }
    body.is-landing .lp-pills svg {
      transition: transform var(--sx-dur) var(--sx-ease), stroke var(--sx-dur) var(--sx-ease);
    }

    body.is-landing .ch-card {
      transition:
        transform var(--sx-dur) var(--sx-ease),
        border-color var(--sx-dur) var(--sx-ease),
        background-color var(--sx-dur) var(--sx-ease);
      transform: translateY(0) scale(1);
    }
    body.is-landing .ch-card:hover {
      transform: translateY(-4px) scale(1.02);
      border-color: var(--butter);
      background: var(--butter);
    }
    body.is-landing .ch-card:hover :is(b, p) {
      color: var(--sx-on-butter);
    }

    body.is-landing .hw-btn[data-hit] {
      cursor: default;
      transition: transform var(--sx-dur) var(--sx-ease), background-color var(--sx-dur) var(--sx-ease);
    }
    body.is-landing .hw-btn[data-hit]:hover {
      transform: scale(var(--sx-join-hover-scale, 1.06));
    }
    body.is-landing .hw-act span {
      display: inline-block;
      transition:
        transform var(--sx-dur) var(--sx-ease),
        background-color var(--sx-dur) var(--sx-ease),
        color var(--sx-dur) var(--sx-ease);
    }
    body.is-landing .hw-dots button {
      transition:
        transform var(--sx-dur) var(--sx-ease),
        background-color var(--sx-dur) var(--sx-ease);
    }
    body.is-landing .hw-act span:hover {
      transform: scale(1.05);
      background: var(--butter-soft);
      color: var(--butter-ink);
    }
    body.is-landing .hw-dots button:hover {
      transform: scale(1.25);
      background: var(--butter-soft);
    }

    .lp-top--solid .theme-toggle,
    .lp-top--solid .site-menu summary,
    .lp-top--solid .lp-btn-sm {
      transition: transform var(--sx-dur) var(--sx-ease), background-color var(--sx-dur) var(--sx-ease);
    }
    .lp-top--solid .theme-toggle:hover,
    .lp-top--solid .site-menu summary:hover {
      transform: scale(1.08);
    }
    .lp-top--solid .lp-btn-sm:hover {
      transform: scale(1.04);
    }

    .site-nav .site-link,
    .site-nav .site-drop-sum {
      transition: color var(--sx-dur) var(--sx-ease), transform var(--sx-dur) var(--sx-ease);
    }
    .site-nav .site-link:hover,
    .site-nav .site-drop-sum:hover {
      color: var(--accent);
    }
    .site-nav .site-drop-sum:hover {
      transform: translateY(-1px);
    }

    body.is-landing .ls-host .ls-card,
    body.is-landing .ls-next {
      transition: transform var(--sx-dur) var(--sx-ease), border-color var(--sx-dur) var(--sx-ease);
    }
    body.is-landing .ls-host:hover .ls-card,
    body.is-landing a.ls-next:hover {
      transform: scale(1.02);
    }
  }
}