/* --- Landing buttons «Кнопки · Лендинг» ---
   Figma «Lidfly дизайн-система» → Кнопки · Лендинг (30.09.2026). Capsule on the colours of the
   shared button system; the page markup keeps its own classes. This file owns the palette and
   size of these classes: page CSS may place them, never repaint them (test-button-system).
   Filled is the one main action of a zone, Tinted the second, Gray working actions.
   Dark zones and photos: the main action turns Tinted, the second Glass.
   Selectors start with :root so this layer also wins over inline styles of generated pages. */

:root :is(.cta-btn, .wbtn-primary, .wbtn-glow, .nav-btn, .nav-cta, .cg-nav__cta, .sl-header__cta, .agency-action--dark, .agency-action--aurora, .agtrust-cta, .start-card__cta, .cta-btn-secondary, .tools-banner-btn, .start-connect__cta, .geo-button, .agency-action, .wbtn-light, .agency-action--light, .wbtn-ghost, .agency-action--glass, .geo-button--outline, .lf-header__login, .lf-header__cta, .lf-header__more, .lf-header__promo-link, .lf-page-nav__cta, .lf-bottom-cta__button) {
  --btn-height: 48px;
  --btn-pad-x: 24px;
  --btn-gap: 8px;
  --btn-icon: 20px;
  --btn-font-size: var(--btn-font-l);
}

/* Gray first: modifiers below override the base .agency-action. */
:root :is(
  .agency-action,
  .wbtn-light,
  .agency-action--light
) {
  --btn-fg: var(--btn-gray-fg);
  --btn-top: var(--btn-gray-bg-top);
  --btn-bottom: var(--btn-gray-bg-bottom);
  --btn-border-color: var(--btn-gray-border);
  --btn-shadow: var(--btn-shadow-soft);
  --btn-shadow-hover: var(--btn-shadow-soft);
  --btn-shadow-focus: var(--btn-shadow-soft-focus);
  --btn-hover-overlay: var(--color-state-hover-on-light);
  --btn-pressed-overlay: var(--color-state-pressed-on-light);
}

:root :is(
  .cta-btn,
  .wbtn-primary,
  .wbtn-glow,
  .nav-btn,
  .nav-cta,
  .cg-nav__cta,
  .sl-header__cta,
  .agency-action--dark,
  .agency-action--aurora,
  .agtrust-cta,
  .start-card__cta
) {
  --btn-fg: var(--btn-filled-fg);
  --btn-top: var(--btn-filled-bg-top);
  --btn-bottom: var(--btn-filled-bg-bottom);
  --btn-border-color: var(--btn-filled-border);
  --btn-shadow: var(--btn-shadow-filled);
  --btn-shadow-hover: var(--btn-shadow-filled-hover);
  --btn-shadow-focus: var(--btn-shadow-filled-focus);
  --btn-hover-overlay: var(--color-state-hover-on-dark);
  --btn-pressed-overlay: var(--color-state-pressed-on-dark);
}

:root :is(
  .cta-btn-secondary,
  .tools-banner-btn,
  .start-connect__cta,
  .geo-button
),
:root :is(.cg-band, .sec-dark, .final-panel, .pro-cta, .geo-hero, .geo-section--dark, .agency-hero, .agency-join, .agency-brief-dock, .lf-dark) :is(
  .cta-btn,
  .wbtn-primary,
  .wbtn-glow,
  .nav-btn,
  .nav-cta,
  .cg-nav__cta,
  .sl-header__cta,
  .agency-action--dark,
  .agency-action--aurora,
  .agtrust-cta,
  .start-card__cta,
  .btn-primary,
  .btn-forest,
  .btn-filled
) {
  --btn-fg: var(--btn-tinted-fg);
  --btn-top: var(--btn-tinted-bg-top);
  --btn-bottom: var(--btn-tinted-bg-bottom);
  --btn-border-color: var(--btn-tinted-border);
  --btn-shadow: var(--btn-shadow-soft);
  --btn-shadow-hover: var(--btn-shadow-soft);
  --btn-shadow-focus: var(--btn-shadow-soft-focus);
  --btn-hover-overlay: var(--color-state-hover-on-light);
  --btn-pressed-overlay: var(--color-state-pressed-on-light);
}

:root :is(
  .wbtn-ghost,
  .agency-action--glass,
  .geo-button--outline
),
:root :is(.cg-band, .sec-dark, .final-panel, .pro-cta, .geo-hero, .geo-section--dark, .agency-hero, .agency-join, .agency-brief-dock, .lf-dark) :is(
  .wbtn-ghost,
  .agency-action--glass,
  .geo-button--outline,
  .btn-outline-forest,
  .btn-secondary,
  .btn-tinted,
  .btn-gray
) {
  --btn-fg: var(--btn-glass-fg);
  --btn-top: var(--btn-glass-bg);
  --btn-bottom: var(--btn-glass-bg);
  --btn-border-color: var(--btn-glass-border);
  --btn-shadow: var(--btn-shadow-glass);
  --btn-shadow-hover: var(--btn-shadow-glass);
  --btn-shadow-focus: var(--btn-shadow-glass);
  --btn-hover-overlay: var(--color-state-hover-on-dark);
  --btn-pressed-overlay: var(--color-state-pressed-on-dark);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Sizes: header actions M 40, first-screen actions XL 56, everything else L 48. */
:root :is(.nav-btn, .nav-cta, .cg-nav__cta, .sl-header__cta) {
  --btn-height: 40px;
  --btn-pad-x: 16px;
  --btn-icon: 18px;
  --btn-font-size: var(--btn-font-m);
}

:root :is(.cta-btn, .cta-btn-secondary, .wbtn-lg, .geo-hero .geo-button) {
  --btn-height: 56px;
  --btn-pad-x: 32px;
}

:root :is(.home-sticky-cta, .video-lesson-actions, .article) :is(.cta-btn, .cta-btn-secondary),
:root .agency-hero__actions :is(.agency-action, .geo-button) {
  --btn-height: 48px;
  --btn-pad-x: 24px;
}

:root :is(.agency-card__actions, .agency-brief-dock) .agency-action {
  --btn-height: 40px;
  --btn-pad-x: 16px;
  --btn-icon: 18px;
  --btn-font-size: var(--btn-font-m);
}

/* Site header buttons: the LidFly UI Kit 2026 set (Figma «LidFly — Бренд и UI Kit 2026» → Button; navigation
   spec, section 0). Pill, flat, Medium 500, no shadow. Primary --lf-action-primary, Ghost transparent with
   --lf-bg-hover, Gray --lf-action-gray; hover colours come as an opaque overlay. Sizes S 30 · M 36 · Header 40 ·
   L 48 (modifiers: S on the panel links, --header, --l; M is the default).
   Desktop bar: Войти Ghost Header, Начать бесплатно Primary Header; panel links Ghost S and Primary S.
   Phone: Войти Gray S, Начать бесплатно Primary L in the open menu.
   Section row of landings (page-nav.css): the action Brand S. Bottom CTA bar (bottom-cta.css): Primary L across
   the bar (a second button Gray L); in the documentation offer a compact Primary M. */
:root :is(.lf-header__login, .lf-header__cta, .lf-header__more, .lf-header__promo-link, .lf-page-nav__cta, .lf-bottom-cta__button) {
  --btn-border-color: transparent;
  --btn-shadow: none;
  --btn-shadow-hover: none;
  --btn-shadow-pressed: none;
  --btn-shadow-focus: var(--lf-focus-ring);
  --btn-font-weight: 500;
  --btn-height: 36px;
  --btn-pad-x: 16px;
  --btn-gap: 6px;
  --btn-icon: 20px;
  --btn-font-size: 14px;
  --btn-line-height: 18px;
}

:root :is(.lf-header__cta, .lf-header__promo-link, .lf-bottom-cta__button) {
  --btn-fg: var(--lf-action-on-primary);
  --btn-top: var(--lf-action-primary);
  --btn-bottom: var(--lf-action-primary);
  --btn-hover-overlay: var(--lf-action-primary-hover);
  --btn-pressed-overlay: var(--lf-action-primary-hover);
}

:root :is(.lf-header__login, .lf-header__more) {
  --btn-fg: var(--lf-text-primary);
  --btn-top: transparent;
  --btn-bottom: transparent;
  --btn-hover-overlay: var(--lf-bg-hover);
  --btn-pressed-overlay: var(--lf-bg-hover);
}

:root :is(.lf-header__more, .lf-header__promo-link, .lf-page-nav__cta) {
  --btn-height: 30px;
  --btn-pad-x: 12px;
  --btn-gap: 4px;
  --btn-icon: 16px;
  --btn-font-size: 13px;
  --btn-line-height: 16px;
}

:root :is(.lf-header__cta--l, .lf-bottom-cta__button) {
  --btn-height: 48px;
  --btn-pad-x: 22px;
  --btn-gap: 8px;
  --btn-font-size: 16px;
  --btn-line-height: 20px;
}

/* Size Header (Figma Button, Size=Header): only the bar of the site header on desktop — 40, sides 18, Label/Header
   15/20 Medium. The phone rule below turns «Войти» into Gray S. */
:root :is(.lf-header__login--header, .lf-header__cta--header) {
  --btn-height: 40px;
  --btn-pad-x: 18px;
  --btn-gap: 6px;
  --btn-font-size: 15px;
  --btn-line-height: 20px;
}

/* Bottom CTA bar, documentation offer: the compact «Начать» is Primary M (the kit default size). */
:root .lf-bottom-cta--offer .lf-bottom-cta__button {
  --btn-height: 36px;
  --btn-pad-x: 16px;
  --btn-gap: 6px;
  --btn-font-size: 14px;
  --btn-line-height: 18px;
}

/* A second button of the bottom CTA bar (/geo/: «Цены» and «Написать нам»): Gray L. */
:root .lf-bottom-cta__button--gray {
  --btn-fg: var(--lf-text-primary);
  --btn-top: var(--lf-action-gray);
  --btn-bottom: var(--lf-action-gray);
  --btn-hover-overlay: var(--lf-action-gray-hover);
  --btn-pressed-overlay: var(--lf-action-gray-hover);
}

/* Section-row action: always Brand S of the kit. The header can return above the row, and the screen keeps one
   graphite button — «Начать бесплатно» in the header (the phone bottom panel is graphite, the row hides its action
   there); a lime or tinted pill is lost on the glass. */
:root .lf-page-nav__cta {
  --btn-fg: var(--lf-action-on-primary);
  --btn-top: var(--lf-action-brand);
  --btn-bottom: var(--lf-action-brand);
  --btn-hover-overlay: var(--lf-action-brand-hover);
  --btn-pressed-overlay: var(--lf-action-brand-hover);
}

@media (max-width: 1119.98px) {
  :root .lf-header__login {
    --btn-top: var(--lf-action-gray);
    --btn-bottom: var(--lf-action-gray);
    --btn-hover-overlay: var(--lf-action-gray-hover);
    --btn-pressed-overlay: var(--lf-action-gray-hover);
    --btn-height: 30px;
    --btn-pad-x: 12px;
    --btn-gap: 4px;
    --btn-font-size: 13px;
    --btn-line-height: 16px;
  }
}

/* Paint. States only swap variables; listing them here outranks page hover rules. */
:root :is(.cta-btn, .wbtn-primary, .wbtn-glow, .nav-btn, .nav-cta, .cg-nav__cta, .sl-header__cta, .agency-action--dark, .agency-action--aurora, .agtrust-cta, .start-card__cta, .cta-btn-secondary, .tools-banner-btn, .start-connect__cta, .geo-button, .agency-action, .wbtn-light, .agency-action--light, .wbtn-ghost, .agency-action--glass, .geo-button--outline, .lf-header__login, .lf-header__cta, .lf-header__more, .lf-header__promo-link, .lf-page-nav__cta, .lf-bottom-cta__button),
:root :is(.cta-btn, .wbtn-primary, .wbtn-glow, .nav-btn, .nav-cta, .cg-nav__cta, .sl-header__cta, .agency-action--dark, .agency-action--aurora, .agtrust-cta, .start-card__cta, .cta-btn-secondary, .tools-banner-btn, .start-connect__cta, .geo-button, .agency-action, .wbtn-light, .agency-action--light, .wbtn-ghost, .agency-action--glass, .geo-button--outline, .lf-header__login, .lf-header__cta, .lf-header__more, .lf-header__promo-link, .lf-page-nav__cta, .lf-bottom-cta__button):is(:hover, :active, :focus-visible) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-height: var(--btn-height);
  padding: 6px var(--btn-pad-x);
  border: 1px solid var(--btn-border-color);
  border-radius: var(--radius-pill);
  background-color: transparent;
  background-image:
    linear-gradient(var(--btn-overlay, transparent), var(--btn-overlay, transparent)),
    linear-gradient(180deg, var(--btn-top), var(--btn-bottom));
  color: var(--btn-fg);
  box-shadow: var(--btn-shadow-state, var(--btn-shadow));
  font-family: var(--font-sans);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight, 600);
  line-height: var(--btn-line-height, 1.2);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: none;
  transition-property: transform, box-shadow, background-color, color, border-color;
  transition-duration: var(--btn-release-duration), 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: var(--btn-release-ease), ease, ease, ease, ease;
}

:root :is(.cta-btn, .wbtn-primary, .wbtn-glow, .nav-btn, .nav-cta, .cg-nav__cta, .sl-header__cta, .agency-action--dark, .agency-action--aurora, .agtrust-cta, .start-card__cta, .cta-btn-secondary, .tools-banner-btn, .start-connect__cta, .geo-button, .agency-action, .wbtn-light, .agency-action--light, .wbtn-ghost, .agency-action--glass, .geo-button--outline, .lf-header__login, .lf-header__cta, .lf-header__more, .lf-header__promo-link, .lf-page-nav__cta, .lf-bottom-cta__button) :is(svg, img) {
  width: var(--btn-icon);
  height: var(--btn-icon);
  flex-shrink: 0;
}

@media (hover: hover) {
  :root :is(.cta-btn, .wbtn-primary, .wbtn-glow, .nav-btn, .nav-cta, .cg-nav__cta, .sl-header__cta, .agency-action--dark, .agency-action--aurora, .agtrust-cta, .start-card__cta, .cta-btn-secondary, .tools-banner-btn, .start-connect__cta, .geo-button, .agency-action, .wbtn-light, .agency-action--light, .wbtn-ghost, .agency-action--glass, .geo-button--outline, .lf-header__login, .lf-header__cta, .lf-header__more, .lf-header__promo-link, .lf-page-nav__cta, .lf-bottom-cta__button):hover {
    --btn-overlay: var(--btn-hover-overlay);
    --btn-shadow-state: var(--btn-shadow-hover);
  }
}

:root :is(.cta-btn, .wbtn-primary, .wbtn-glow, .nav-btn, .nav-cta, .cg-nav__cta, .sl-header__cta, .agency-action--dark, .agency-action--aurora, .agtrust-cta, .start-card__cta, .cta-btn-secondary, .tools-banner-btn, .start-connect__cta, .geo-button, .agency-action, .wbtn-light, .agency-action--light, .wbtn-ghost, .agency-action--glass, .geo-button--outline, .lf-header__login, .lf-header__cta, .lf-header__more, .lf-header__promo-link, .lf-page-nav__cta, .lf-bottom-cta__button):active {
  --btn-top: var(--btn-bottom);
  --btn-overlay: var(--btn-pressed-overlay);
  --btn-shadow-state: var(--btn-shadow-pressed);
  transform: scale(var(--btn-press-scale));
  transition-duration: var(--btn-press-duration), 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease-out, ease, ease, ease, ease;
}

:root :is(.cta-btn, .wbtn-primary, .wbtn-glow, .nav-btn, .nav-cta, .cg-nav__cta, .sl-header__cta, .agency-action--dark, .agency-action--aurora, .agtrust-cta, .start-card__cta, .cta-btn-secondary, .tools-banner-btn, .start-connect__cta, .geo-button, .agency-action, .wbtn-light, .agency-action--light, .wbtn-ghost, .agency-action--glass, .geo-button--outline, .lf-header__login, .lf-header__cta, .lf-header__more, .lf-header__promo-link, .lf-page-nav__cta, .lf-bottom-cta__button):focus-visible {
  outline: 3px solid var(--btn-focus-ring);
  outline-offset: 0;
  --btn-shadow-state: var(--btn-shadow-focus);
}

:root :is(.lf-header__login, .lf-header__cta, .lf-header__more, .lf-header__promo-link, .lf-page-nav__cta, .lf-bottom-cta__button):focus-visible {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  :root :is(.cta-btn, .wbtn-primary, .wbtn-glow, .nav-btn, .nav-cta, .cg-nav__cta, .sl-header__cta, .agency-action--dark, .agency-action--aurora, .agtrust-cta, .start-card__cta, .cta-btn-secondary, .tools-banner-btn, .start-connect__cta, .geo-button, .agency-action, .wbtn-light, .agency-action--light, .wbtn-ghost, .agency-action--glass, .geo-button--outline, .lf-header__login, .lf-header__cta, .lf-header__more, .lf-header__promo-link, .lf-page-nav__cta, .lf-bottom-cta__button),
  :root :is(.cta-btn, .wbtn-primary, .wbtn-glow, .nav-btn, .nav-cta, .cg-nav__cta, .sl-header__cta, .agency-action--dark, .agency-action--aurora, .agtrust-cta, .start-card__cta, .cta-btn-secondary, .tools-banner-btn, .start-connect__cta, .geo-button, .agency-action, .wbtn-light, .agency-action--light, .wbtn-ghost, .agency-action--glass, .geo-button--outline, .lf-header__login, .lf-header__cta, .lf-header__more, .lf-header__promo-link, .lf-page-nav__cta, .lf-bottom-cta__button):active {
    transform: none;
    transition-property: box-shadow, background-color, color, border-color;
    transition-duration: 0.2s;
    transition-timing-function: ease;
  }
}