/* ==========================================================================
   1. RESET
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* отключаем компенсацию прокрутки браузером (scroll anchoring):
		иначе при «Показать ещё» браузер прибивает низ на месте
		и страница уезжает вверх, вместо того чтобы нижняя часть
		естественно поехала вниз */
  overflow-anchor: none;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

button {
  cursor: pointer;
  background: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

blockquote,
q {
  quotes: none;
}

/* ==========================================================================
   2. ROOT — ПЕРЕМЕННЫЕ И БАЗОВЫЕ НАСТРОЙКИ
   ========================================================================== */

:root {
  /* --- Цвета --- */
  --color-text: #202224;
  --color-accent: #f9cd45;
  --color-gray: #7f868e;
  --color-lgray: #edeff5;
  --color-white: #ffffff;

  /* --- Типографика --- */
  --font-family-base: "Inter Tight", sans-serif;
  --font-family-second: "Merriweather", serif;

  --light: 300;
  --regular: 400;
  --medium: 500;
  --semibold: 600;
  --bold: 700;

  /* --- Радиусы, рамки, тени, переходы --- */
  --radius-lg: 40px;
  --radius-md: 30px;
  --radius-sm: 20px;
  --radius-xs: 14px;
  --radius-pill: 100px;
  --border-light: 1px solid var(--color-lgray);
  --shadow-accent: 0 8px 20px rgba(249, 205, 69, 0.4);
  --transition-base: 0.3s ease-in-out;
}

/* --- Базовые настройки --- */

html {
  background-color: var(--color-white);
  color: var(--color-text);
}

body {
  max-width: 1440px;
  margin: auto;
  padding-left: 20px;
  padding-right: 20px;
  font-family: var(--font-family-base);
}

.container {
  max-width: 1240px;
  margin: auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 60px;
  padding-bottom: 60px;
}

/* ==========================================================================
   3. ОБЩИЕ / ПЕРЕИСПОЛЬЗУЕМЫЕ КЛАССЫ
   ========================================================================== */

.btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: var(--color-accent);
  border-radius: var(--radius-pill);
  font-size: 16px;
  line-height: 140%;
  height: 48px;
  padding-left: 25px;
  padding-right: 25px;
  font-weight: var(--medium);
}

.btn > svg {
  width: 16px;
  height: 16px;
}

.btn-2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  font-size: 16px;
  line-height: 140%;
  height: 48px;
}

.btn-sm {
  height: 38px;
  font-size: 12px;
}

.btn-xl {
  font-size: 18px;
  line-height: 140%;
  height: 62px;
  max-width: 285px;
  width: 100%;
}

.accent-text,
.text-accent {
}

.nav-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.nav-item {
}

.nav-item a {
  transition: 0.2s ease-in-out;
  font-size: 14px;
  font-weight: var(--medium);
}

.nav-item a:hover {
  color: var(--color-accent);
}

/* активный пункт меню «где мы находимся»;
   .current-menu-item — класс нативного WP-меню, is-active — классов фолбэка и JS */
.nav-item.is-active a,
.nav-item.current-menu-item > a {
  color: var(--color-accent);
}

.icon-cnt {
  border-radius: var(--radius-xs);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
}

.icon-cnt > svg {
  width: 20px;
  height: 20px;
}

.h1 {
  font-size: 71px;
  line-height: 110%;
  font-weight: var(--semibold);
  margin-bottom: 18px;
}

.h2 {
  font-size: clamp(30px, 3.4vw, 49px);
  line-height: 120%;
  font-weight: var(--semibold);
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.p1-text {
  color: var(--color-gray);
  font-size: 20px;
  line-height: 140%;
}

.accent-text {
  font-family: var(--font-family-second);
  font-style: italic;
}

/* ==========================================================================
   4. HEADER
   ========================================================================== */

.site {
}

.skip-link {
}

.screen-reader-text {
}

.site-header {
  background-color: var(--color-white);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 20px;
}

.header-cnt {
  max-width: 1240px;
  margin: auto;
  padding-left: 20px;
  padding-right: 20px;
  display: grid;
  grid-template-columns: 25% 50% 25%;
  justify-content: space-between;
  align-items: center;
}

.site-header .site-branding {
  max-width: 148px;
  width: 100%;
}

.site-header .site-branding > svg {
  width: 100%;
}

.header-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: end;
  gap: 20px;
}

.sign-up-btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: var(--medium);
}

.sign-up-btn > svg {
  width: 16px;
  height: 16px;
}

.mob-btn {
  display: none;
}
.mob-popup {
  display: contents;
}

.overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 0px;
  height: 0px;
  opacity: 0;
  z-index: 90;
  background-color: rgba(32, 34, 36, 0.4);
  transition: opacity 0.3s ease;
}

.burger span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background-color: var(--color-text);
  transition: transform var(--transition-base);
}

/* ==========================================================================
   5. FOOTER
   ========================================================================== */

.site-footer {
  max-width: 1240px;
  margin: auto;
  padding-left: 20px;
  padding-right: 20px;
}

.site-footer-cnt {
  background-color: var(--color-text);
  color: var(--color-white);
  border-radius: var(--radius-md);
  padding: 30px;
  margin-bottom: 20px;
}

.footer-top {
  display: grid;
  grid-template-columns: 25% 50% 25%;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-gray);
}

.site-footer .site-branding {
  max-width: 148px;
  width: 100%;
}

.site-footer .site-branding > svg {
  width: 100%;
}

.site-footer .btn-cnt {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: end;
  color: var(--color-text);
}

.footer-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.footer-bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding-top: 20px;
}

.footer-link {
  text-decoration: underline;
  color: var(--color-gray);
  font-size: 12px;
  font-weight: var(--medium);
  line-height: 140%;
}

/* ==========================================================================
   6. HERO
   ========================================================================== */

.hero-block {
  padding-top: 53px;
}

.hero-content-cnt {
  max-width: 956px;
  margin: auto;
}

.hero-title {
  text-align: center;
  letter-spacing: 0;
}

.hero-text {
  text-align: center;
  max-width: 700px;
  margin: auto;
  margin-bottom: 30px;
}

.buttons-cnt {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 46px;
}

.hero-bg {
  background-image: url("/wp-content/themes/intent/images/bg-1.webp");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100%;
}

.cta-block {
  background-image: url("/wp-content/themes/intent/images/bg-2.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.enterprise-cnt {
  background-image: url("/wp-content/themes/intent/images/bg-5.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.form-block {
  background-image: url("/wp-content/themes/intent/images/bg-6.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.site-footer-cnt {
  background-image: url("/wp-content/themes/intent/images/bg-7.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.hero-img-cnt {
  position: relative;
}

.hero-img {
  max-width: 996px;
  width: 100%;
  margin: auto;
  object-fit: contain;
}

.hero-cards {
}

.hero-card {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--color-white);
  padding: 10px;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
  box-shadow: 0px 0px 24px rgba(13, 13, 13, 0.12);
}

.hero-card:nth-child(1) {
  top: 86px;
  z-index: 1;
}

.hero-card:nth-child(3) {
  top: 403px;
  z-index: 2;
  left: 25px;
}

.hero-card:nth-child(4) {
  top: 184px;
  z-index: 2;
  left: auto;
  right: 20px;
}

.hero-card:nth-child(5) {
  top: 284px;
  z-index: 2;
  left: auto;
  right: 0px;
}

.hero-card-cnt {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.hero-card-body {
}

.hero-card-title {
  font-size: 14px;
  font-family: var(--font-family-second);
  font-style: italic;
  font-weight: var(--regular);
  line-height: 120%;
  margin-bottom: 4px;
}

.hero-card-subtitle {
  font-size: 12px;
  font-weight: var(--medium);
  line-height: 140%;
  color: var(--color-gray);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  gap: 7px;
}

.hero-card-dot {
  background-color: var(--color-gray);
  border-radius: 10px;
  width: 4px;
  height: 4px;
}

.hero-card-badge {
  font-weight: var(--regular);
}

.hero-card-score {
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-xs);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-family: var(--font-family-second);
  font-style: italic;
}

.hero-widget {
  position: absolute;
  top: 185px;
  z-index: 1;
  left: 106px;
  background-color: var(--color-white);
  padding: 20px;
  border-radius: var(--radius-sm);
  box-shadow: 0px 0px 24px rgba(13, 13, 13, 0.12);
}

.hero-widget-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 170px;
  margin-bottom: 10px;
}

.hero-widget-title {
  font-size: 18px;
  font-family: var(--font-family-second);
  font-style: italic;
  font-weight: var(--medium);
  line-height: 120%;
  margin-bottom: 4px;
}

.hero-widget-period {
  font-size: 14px;
  font-weight: var(--medium);
  line-height: 140%;
  color: var(--color-gray);
}

.hero-widget-value {
  font-size: 20px;
  font-family: var(--font-family-second);
  font-style: italic;
  font-weight: var(--medium);
  line-height: 120%;
  margin-bottom: 4px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
}

.hero-widget-chart {
  border-radius: 10px;
  height: 4px;
  width: 100%;
  background: var(--color-lgray);
}

.hero-widget-chart > div {
  width: 70%;
  height: 100%;
  background-color: var(--color-accent);
  border-radius: 10px;
}

.hero-widget-revenue {
  left: auto;
  right: 80px;
  top: 414px;
  flex-direction: row;
  display: flex;
  gap: 32px;
}

.hero-widget-revenue .hero-widget-period {
  font-size: 12px;
}


/* ==========================================================================
   8. CTA
   ========================================================================== */

.cta-block {
  background-color: var(--color-text);
  border-radius: 40px;
  text-align: center;
  color: var(--color-white);
  margin-top: 60px;
  margin-bottom: 60px;
}

.cta-cnt {
  max-width: 900px;
}

#cta.cta-block {
  padding: 72px 40px;
}

#cta .cta-cnt {
  padding: 0;
}

.cta-title {
  margin-bottom: 0;
}

.cta-title .accent-text {
  color: var(--color-accent);
}



/* ==========================================================================
   10. SIGNAL
   ========================================================================== */

.signal-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.signal-media {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  background-color: var(--color-lgray);
  border-radius: var(--radius-lg);
}
.signal-media img {
  max-width: 386px;
  width: 100%;
  border-radius: var(--radius-md);
  margin: auto;
}

.signal-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.signal-title {
  font-size: clamp(30px, 3.4vw, 49px);
}

.signal-text {
  margin-bottom: 30px;
}

.signal-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.signal-item {
  font-size: 16px;
  line-height: 140%;
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-lgray);
}

.signal-item > svg {
  flex-shrink: 0;
}



/* ==========================================================================
   14. ROLES
   ========================================================================== */

.roles-block {
}

.roles-title {
  text-align: center;
}

.roles-text {
  text-align: center;
  margin-bottom: 50px;
}

.roles-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin-bottom: 30px;
}

.role-card {
  display: flex;
  flex-direction: column;
  border: var(--border-light);
  border-radius: var(--radius-md);
  padding: 10px;
}

.role-card-content {
  padding: 10px 10px 18px;
}

.role-card-icon {
  border-radius: var(--radius-xs);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  flex-shrink: 0;
  margin-bottom: 20px;
}

.role-card-title {
  font-family: var(--font-family-second);
  font-style: italic;
  font-size: 20px;
  font-weight: var(--semibold);
  line-height: 120%;
  margin-bottom: 15px;
}

.role-card-text {
  color: var(--color-gray);
  font-size: 16px;
  line-height: 140%;
  font-weight: var(--light);
}

.role-card-img {
  margin-top: auto;
  border-radius: var(--radius-md);
  aspect-ratio: 267 / 191;
  object-fit: cover;
}

.roles-subtitle {
  text-align: center;
  font-family: var(--font-family-second);
  font-style: italic;
  font-size: 25px;
  font-weight: var(--semibold);
  line-height: 120%;
  margin-bottom: 15px;
}

.roles-subtext {
  text-align: center;
  color: var(--color-gray);
  font-size: 16px;
  line-height: 140%;
  font-weight: var(--light);
  max-width: 450px;
  margin: 0px auto 18px;
}

.roles-list {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  justify-content: center;
}

.roles-item {
  font-size: 16px;
  line-height: 140%;
  font-weight: var(--light);
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 8px;
}

.roles-item {
  flex-shrink: 0;
}


/* ==========================================================================
   16. CHANNELS
   ========================================================================== */

.channels-block {
}

.channels-title {
  text-align: center;
}

.channels-text {
  text-align: center;
  margin-bottom: 50px;
}

.channels-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
}

.channel-card {
  border-radius: var(--radius-md);
  padding: 30px 24px;
  border: var(--border-light);
}

.channel-card-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.channel-card-name {
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  font-family: var(--font-family-second);
  font-style: italic;
  font-size: 20px;
  font-weight: var(--semibold);
  line-height: 120%;
}

.channel-card-icon {
  border-radius: var(--radius-xs);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-lgray);
  flex-shrink: 0;
}

.channel-card-status {
  border-radius: var(--radius-pill);
  height: 28px;
  padding: 2px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 140%;
  font-weight: var(--medium);
  background-color: var(--color-lgray);
  color: var(--color-gray);
}

.channel-card-text {
  font-size: 16px;
  line-height: 140%;
  font-weight: var(--light);
  color: var(--color-gray);
}

.channel-card:nth-child(6n + 1) {
  background: var(--color-text);
  border: none;
  grid-column: span 2;
}

.channel-card:nth-child(6n + 1) .channel-card-icon {
  background-color: var(--color-accent);
}

.channel-card:nth-child(6n + 1) .channel-card-status {
  background-color: var(--color-accent);
  color: var(--color-text);
  padding: 2px 25px;
}

.channel-card:nth-child(6n + 1) .channel-card-name {
  color: var(--color-white);
}

.channel-card:nth-child(6n + 1) .channel-card-text {
  color: var(--color-lgray);
}

.channel-card:nth-child(6n) {
  background: var(--color-lgray);
  border: none;
  grid-column: span 2;
}

.channel-card:nth-child(6n) .channel-card-icon {
  background-color: var(--color-accent);
}

.channel-card:nth-child(6n) .channel-card-status {
  background-color: var(--color-accent);
  color: var(--color-text);
  padding: 2px 25px;
}

.channel-card:nth-child(6n) .channel-card-text {
  color: var(--color-text);
}

/* ==========================================================================
   17. DATABASE / BUILDER (#builder, front-page.php)
   Мокап поиска компаний по референсу saleintent.ru.
   Размеры внутри экрана — в cqw, как в блоке «Как это работает».
   ========================================================================== */

#builder {
  --line: #e3e6ee;
  --light: var(--color-lgray);
  --muted: var(--color-gray);
  --black: var(--color-text);
  --white: var(--color-white);
  --yellow: var(--color-accent);
  --yellow-soft: #fdf0c4;
  --body: #45494e;
  --ink: var(--color-text);
  --sans: var(--font-family-base);

  position: relative;
  overflow: hidden;
  margin: 60px 0;
  border-radius: var(--radius-lg);
  background: var(--color-text);
  color: var(--color-white);
  text-align: center;
}

#builder .database-cnt {
  padding-top: 64px;
  padding-bottom: 60px;
}

#builder .rs-head {
  max-width: 996px;
  margin: 0 auto 50px;
  text-align: center;
}

#builder .rs-head .h2 {
  margin-bottom: 0;
  font-size: clamp(28px, 3.4vw, 49px);
}

#builder .rs-lead {
  max-width: 880px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.4;
}

#builder .rs-builder-frame {
  max-width: 1000px;
  margin-inline: auto;
  padding: 14px;
  border-radius: var(--radius-md);
  background: rgb(255 255 255 / 8%);
  overflow: hidden;
  container-type: inline-size;
}

#builder .rs-builder-preview {
  display: block;
}

#builder .scr {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-sm);
  background: var(--light);
}

#builder .scr-search {
  aspect-ratio: 16 / 9;
}

#builder .scr .feed {
  height: 100%;
}

#builder .feed {
  display: flex;
  height: 100%;
  background: var(--light);
  color: var(--ink);
  text-align: left;
}

#builder .feed-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2cqw;
  width: 7.5cqw;
  padding: 2cqw 0;
  background: var(--white);
  border-right: 1px solid var(--line);
}

#builder .feed-side img {
  width: 3.4cqw;
  height: auto;
  object-fit: cover;
  object-position: left;
  aspect-ratio: 1;
}

#builder .feed-side i {
  width: 2.6cqw;
  height: 2.6cqw;
  border-radius: .8cqw;
  background: var(--light);
}

#builder .feed-side i.is-on {
  background: var(--yellow);
}

#builder .feed-main {
  flex: 1;
  min-width: 0;
  padding: 2.4cqw 2.8cqw;
}

#builder .feed-top {
  display: flex;
  align-items: baseline;
  gap: 1.2cqw;
  font-size: 1.5cqw;
}

#builder .feed-top b {
  font: 600 2.1cqw/1.2 var(--sans);
}

#builder .feed-top span {
  color: var(--muted);
}

#builder .scr-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1cqw;
  margin: 1.8cqw 0 1.6cqw;
}

#builder .scr-filter {
  display: grid;
  gap: .2cqw;
  padding: .8cqw 1.6cqw;
  border: 1px solid var(--line);
  border-radius: 1.2cqw;
  background: var(--white);
  font-size: 1.35cqw;
  font-weight: 500;
}

#builder .scr-filter small {
  color: var(--muted);
  font-size: 1.1cqw;
  font-weight: 400;
}

#builder .scr-table {
  display: grid;
  gap: .6cqw;
}

#builder .scr-th,
#builder .scr-tr {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 1fr .8fr;
  gap: 1cqw;
  align-items: center;
  padding: 1cqw 1.6cqw;
  font-size: 1.3cqw;
}

#builder .scr-th {
  color: var(--muted);
  font-size: 1.15cqw;
}

#builder .scr-tr {
  border-radius: 1.2cqw;
  background: var(--white);
  color: var(--body);
}

#builder .scr-tr b {
  color: var(--ink);
  font-weight: 600;
}

#builder .scr-tr-1 {
  animation: builder-row-1 10s infinite;
}

#builder .scr-tr-2 {
  animation: builder-row-2 10s infinite;
}

#builder .scr-tr-3 {
  animation: builder-row-3 10s infinite;
}

#builder .scr-tr-4 {
  animation: builder-row-4 10s infinite;
}

#builder .scr-tr-5 {
  animation: builder-row-5 10s infinite;
}

@keyframes builder-row-1 {
  0%, 72% { opacity: 0; transform: translateY(1cqw); }
  75%, 96% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

@keyframes builder-row-2 {
  0%, 75% { opacity: 0; transform: translateY(1cqw); }
  78%, 96% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

@keyframes builder-row-3 {
  0%, 78% { opacity: 0; transform: translateY(1cqw); }
  81%, 96% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

@keyframes builder-row-4 {
  0%, 81% { opacity: 0; transform: translateY(1cqw); }
  84%, 96% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

@keyframes builder-row-5 {
  0%, 84% { opacity: 0; transform: translateY(1cqw); }
  87%, 96% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

#builder .scr-chip-1 {
  animation: builder-chip-1 10s infinite;
}

#builder .scr-chip-2 {
  animation: builder-chip-2 10s infinite;
}

#builder .scr-chip-3 {
  animation: builder-chip-3 10s infinite;
}

#builder .scr-chip-4 {
  animation: builder-chip-4 10s infinite;
}

@keyframes builder-chip-1 {
  0%, 52% { background: var(--white); border-color: var(--line); }
  55%, 96% { background: var(--yellow); border-color: var(--yellow); }
}

@keyframes builder-chip-2 {
  0%, 57% { background: var(--white); border-color: var(--line); }
  60%, 96% { background: var(--yellow); border-color: var(--yellow); }
}

@keyframes builder-chip-3 {
  0%, 62% { background: var(--white); border-color: var(--line); }
  65%, 96% { background: var(--yellow); border-color: var(--yellow); }
}

@keyframes builder-chip-4 {
  0%, 67% { background: var(--white); border-color: var(--line); }
  70%, 96% { background: var(--yellow); border-color: var(--yellow); }
}

#builder .scr-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.4cqw;
  font-size: 1.35cqw;
}

#builder .scr-btn {
  display: inline-grid;
  place-items: center;
  height: 4cqw;
  padding: 0 3cqw;
  border-radius: 99px;
  background: var(--yellow);
  color: var(--black);
  font-size: 1.4cqw;
  font-weight: 500;
}

#builder .scr-search .scr-btn {
  animation: builder-press 10s infinite;
}

@keyframes builder-press {
  0%, 76% { transform: none; box-shadow: none; }
  80% { transform: scale(.96); box-shadow: 0 0 0 .6cqw var(--yellow-soft); }
  84%, 100% { transform: none; box-shadow: none; }
}

@media (max-width: 768px) {
  #builder {
    margin: 40px 0;
    border-radius: var(--radius-md);
  }

  #builder .database-cnt {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  #builder .rs-head {
    margin-bottom: 30px;
  }
}

@media (max-width: 640px) {
  #builder .rs-lead {
    font-size: 14px;
  }

  #builder .scr {
    border-radius: 10px;
  }

  #builder .scr .feed-side {
    display: none;
  }

  #builder .scr-search {
    aspect-ratio: 4 / 3.6;
  }

  #builder .scr-filter,
  #builder .scr-th,
  #builder .scr-tr,
  #builder .scr-total {
    font-size: 2.3cqw;
  }

  #builder .scr-th,
  #builder .scr-tr {
    grid-template-columns: 1.5fr 1fr 1fr;
  }

  #builder .scr-th span:nth-child(n+4),
  #builder .scr-tr span:nth-child(n+4) {
    display: none;
  }

  #builder .scr-btn {
    height: 7cqw;
    font-size: 2.6cqw;
  }
}

@media (prefers-reduced-motion: reduce) {
  #builder .scr-tr-1,
  #builder .scr-tr-2,
  #builder .scr-tr-3,
  #builder .scr-tr-4,
  #builder .scr-tr-5 {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  #builder .scr-chip-1,
  #builder .scr-chip-2,
  #builder .scr-chip-3,
  #builder .scr-chip-4,
  #builder .scr-search .scr-btn {
    animation: none !important;
  }
}

/* ==========================================================================
   18. PRICING
   ========================================================================== */

.pricing-block {
}

.pricing-title {
  text-align: center;
}

.pricing-text {
  text-align: center;
  max-width: 812px;
  margin: 0 auto 50px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.pricing-card {
  border: var(--border-light);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.pricing-card-head {
}

.pricing-card-name {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.pricing-card-icon {
  border-radius: var(--radius-xs);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  flex-shrink: 0;
}

.pricing-card-title {
  font-size: 25px;
  line-height: 120%;
  font-weight: var(--semibold);
}

.pricing-card-subtitle {
  font-size: 16px;
  line-height: 140%;
  font-weight: var(--light);
  color: var(--color-gray);
}

.pricing-card-price {
  color: var(--color-gray);
  font-size: 16px;
  line-height: 140%;
  font-weight: var(--light);
  padding: 18px 0;
  border-bottom: 1px solid var(--color-lgray);
}
.pricing-card-price > span {
  font-family: var(--font-family-second);
  font-style: italic;
  font-weight: var(--semibold);
  font-size: 39px;
  line-height: 120%;
  color: var(--color-text);
}

.pricing-card-list {
  padding: 20px 0;
  flex-grow: 1;
}

.pricing-card-item {
  font-size: 16px;
  line-height: 140%;
  font-weight: var(--regular);
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 8px;
  padding-bottom: 12px;
}

.pricing-card:nth-child(1) .pricing-card-link {
  background-color: var(--color-lgray);
}

.pricing-card:nth-child(1) .pricing-card-link:hover {
  background-color: var(--color-accent);
}

/* ==========================================================================
   19. ENTERPRISE
   ========================================================================== */

.enterprise-cnt {
  background-color: var(--color-text);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--color-white);
  margin-top: 40px;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
}

.enterprise-title {
  font-size: 39px;
  line-height: 120%;
  font-weight: var(--semibold);
  margin-bottom: 10px;
  font-family: var(--font-family-second);
  font-style: italic;
}

.enterprise-text {
  font-family: var(--font-family-second);
  font-size: 20px;
  line-height: 120%;
  font-weight: var(--semibold);
  margin-bottom: 12px;
  font-style: italic;
}

.enterprise-text2 {
  font-size: 16px;
  line-height: 140%;
  font-weight: var(--light);
  margin-bottom: 20px;
}

.enterprise-list {
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

.enterprise-item {
  font-size: 16px;
  line-height: 140%;
  font-weight: var(--light);
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 8px;
}

.enterprise-link {
  color: var(--color-text);
  max-width: 348px;
  width: 100%;
}

.enterprise-note {
  font-size: 20px;
  line-height: 140%;
  text-align: center;
}

/* ==========================================================================
   21. FORM
   ========================================================================== */

.form-block {
  display: flex;
  flex-direction: row;
  gap: 122px;
  align-items: center;
}

.form-content {
  min-width: 0;
}

.form-title {
  font-size: clamp(28px, 3.4vw, 49px);
  text-wrap: balance;
}

.form-text {
  margin-bottom: 0;
}

.form-points {
  display: grid;
  gap: 16px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

.form-points li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: var(--semibold);
}

.form-point-num {
  display: grid;
  place-items: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-xs);
  background: var(--color-accent);
  color: var(--color-text);
  font-size: 20px;
  line-height: 1;
  font-weight: var(--semibold);
}

.form-aside {
  border-radius: var(--radius-lg);
  background: var(--color-text);
  color: var(--color-white);
  padding: 30px;
  max-width: 488px;
  width: 100%;
  min-width: 0;
  flex-shrink: 1;
}

.form-aside-title {
  text-align: center;
  font-size: 25px;
  line-height: 120%;
  font-weight: var(--semibold);
  margin-bottom: 30px;
}
/* ==========================================================================
   22. ANIMATIONS
   ========================================================================== */

/* --- Ховеры интерактивных элементов --- */

.btn,
.btn-2 {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
}

.btn:active,
.btn-2:active {
  transform: translateY(0);
  box-shadow: none;
  transition-duration: 0.1s;
}

.btn-2:hover {
  background-color: var(--color-accent);
  transform: translateY(-2px);
}

.sign-up-btn {
  transition: color 0.2s ease;
}

.sign-up-btn:hover {
  color: var(--color-accent);
}

.sign-up-btn svg path {
  transition: fill 0.2s ease;
}

.sign-up-btn:hover svg path {
  fill: var(--color-accent);
}

/* Карточки статичны — ховер только на реально интерактивных элементах */

/* Футер */

.footer-link {
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: var(--color-white);
}


.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wpcf7-form > p {
  position: relative;
}

.wpcf7-form label {
  position: relative;
  font-size: 16px;
  font-weight: var(--medium);
  letter-spacing: -0.02em;
  width: 100%;
}

.wpcf7-form label > br {
  display: contents;
}

.wpcf7-form label > .text-label {
  position: absolute;
  top: -10px;
  left: 30px;
  z-index: 10;
  transition: all 0.2s ease-in-out;
  user-select: none;
  pointer-events: none;
  color: var(--color-gray);
  white-space: nowrap;
}

.wpcf7-form label.focused > .text-label {
  top: -16px;
  font-size: 12px;
  font-weight: var(--regular);
  line-height: 1;
}

.wpcf7-form .wpcf7-form-control-wrap input,
.wpcf7-form .wpcf7-form-control-wrap select {
  background-color: var(--color-white);
  color: var(--color-text);
  border-radius: 52px;
  width: 100%;
  font-size: 16px;
  font-weight: var(--medium);
  border: 1px solid transparent;
  transition: all 0.2s ease-in-out;
}

.wpcf7-form .wpcf7-form-control-wrap input:focus,
.wpcf7-form .wpcf7-form-control-wrap select:focus {
  border-color: var(--color-accent);
}

.wpcf7-form .wpcf7-form-control-wrap input {
  padding: 28px 30px 8px;
}

.wpcf7-spinner {
  position: absolute;
  z-index: 2;
  top: 22px;
  left: 10px;
  margin: 0;
  background-color: var(--color-accent);
  opacity: 1;
}

.wpcf7-acceptance label {
  display: flex;
  font-size: 14px;
  font-weight: var(--regular);
  line-height: 140%;
  color: var(--color-gray);
  gap: 10px;
}

.wpcf7-form .wpcf7-list-item {
  margin-left: 0;
}

.wpcf7-form .wpcf7-form-control-wrap input[type="radio"] {
  width: 16px;
  height: 16px;
}

/* кастомный чекбокс согласия: скрытая нативная галка,
   аккуратный квадрат с анимацией залива и галочкой */

.wpcf7-form .wpcf7-form-control-wrap input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 18px;
  height: 18px;
  padding: 0;
  flex-shrink: 0;
  margin: 2px 0 0;
  border: 1px solid var(--color-gray);
  border-radius: 6px;
  cursor: pointer;
  transition:
    background-color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
}

.wpcf7-form .wpcf7-form-control-wrap input[type="checkbox"]:hover {
  border-color: var(--color-white);
}

.wpcf7-form .wpcf7-form-control-wrap input[type="checkbox"]:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

.wpcf7-form .wpcf7-form-control-wrap input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--color-text);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.wpcf7-form .wpcf7-form-control-wrap input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.wpcf7-form
  .wpcf7-form-control-wrap
  input[type="checkbox"][aria-invalid="true"] {
  border-color: #dc3232;
}

.wpcf7-acceptance label {
  cursor: pointer;
}

.wpcf7-acceptance label:hover {
  color: var(--color-white);
}

.wpcf7-form .wpcf7-form-control-wrap select {
  padding: 18px 30px 18px;
}

.wpcf7-form label .wpcf7-not-valid-tip {
  font-size: 12px;
  position: absolute;
  bottom: -17px;
  right: 26px;
  background-color: #dc3232;
  padding: 0px 9px;
  border-radius: var(--radius-pill);
  color: var(--color-white);
}

.wpcf7-form label select + .wpcf7-not-valid-tip {
  bottom: -26px;
}

.wpcf7-form .wpcf7-form-control-wrap input[aria-invalid="true"],
.wpcf7-form .wpcf7-form-control-wrap select[aria-invalid="true"] {
  border: 1px solid #dc3232;
}

.wpcf7-form input[type="submit"],
form.cf7mls input.wpcf7-form-control.wpcf7-submit {
  background: var(--color-accent);
  color: var(--color-text);
  padding: 18px 20px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: var(--medium);
  line-height: 140%;
  width: fit-content;
  position: relative;
  transition: all 0.2s ease-out;
  border: 0px;
  width: 100%;
  margin-top: 4px;
  margin-bottom: 14px;
}

.wpcf7-form input[type="submit"]:hover {
  background: var(--color-lgray);
}

/* --- Попап «Вход и регистрация» (native <dialog>) --- */

.signup-dialog {
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-text);
  color: var(--color-white);
  padding: 40px;
  max-width: 488px;
  width: calc(100% - 32px);
  text-align: center;
  /* глобальный reset * { margin: 0 } перебивает штатное UA-центрирование
     native <dialog> — центр выставляем явно */
  position: fixed;
  inset: 0;
  margin: auto;
  height: fit-content;
  /* сервисные стили native dialog по умолчанию прячут окно некрасиво */
  opacity: 0;
  transform: translateY(16px);
}

.signup-dialog[open] {
  opacity: 1;
  transform: none;
  animation: dialog-in 0.25s ease-out;
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

.signup-dialog::backdrop {
  background: rgba(32, 34, 36, 0.65);
}

.signup-dialog .dialog-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-out;
}

/* SVG-иконка крестика: центр ровный по геометрии, без шрифтовых метрик глифа */
.signup-dialog .dialog-close svg {
  flex-shrink: 0;
}

.signup-dialog .dialog-close:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: rotate(90deg);
}

.signup-dialog .brand-mark {
  display: block;
  color: var(--color-accent);
  font-size: 32px;
  line-height: 1;
  margin-bottom: 16px;
}

.signup-dialog .signup-title {
  font-size: 25px;
  line-height: 120%;
  font-weight: var(--semibold);
  margin: 0 0 12px;
}

.signup-dialog .signup-text {
  font-size: 15px;
  line-height: 150%;
  color: var(--color-lgray);
  margin: 0 0 24px;
}

.signup-dialog .signup-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.signup-dialog .button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 20px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: var(--medium);
  line-height: 140%;
  transition: all 0.2s ease-out;
}

.signup-dialog .button-primary {
  background: var(--color-accent);
  color: var(--color-text);
}

.signup-dialog .button-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
}

.signup-dialog .button-secondary {
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-white);
}

.signup-dialog .button-secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

@media (max-width: 768px) {
  .signup-dialog {
    border-radius: var(--radius-md);
    padding: 24px 20px;
  }
}

/* блокировка скролла страницы под открытым попапом */
.dialog-open {
  overflow: hidden;
}

/* --- Куки-баннер (в стиле попапа: тёмный, радиус 40px, акцентная кнопка) --- */

.cookie-banner {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 90;
  max-width: 560px;
  background: var(--color-text);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 28px 28px 28px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  box-shadow: 0 20px 50px rgba(32, 34, 36, 0.3);
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.3s ease-out,
    transform 0.3s ease-out;
}

/* вкупе с display:flex авторский стиль перекрывает дефолтный [hidden] — дублируем */
.cookie-banner[hidden] {
  display: none;
}

.cookie-banner.is-shown {
  opacity: 1;
  transform: none;
}

.cookie-banner.is-hiding {
  opacity: 0;
  transform: translateY(16px);
}

.cookie-text {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
}

.cookie-text a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cookie-text a:hover {
  color: var(--color-white);
}

.cookie-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

/* свои размеры кнопок: компактнее универсальных .btn/.btn-2 */
/* фон акцентный — текст тёмный (--color-text), а не белый баннера */
.cookie-banner .btn,
.cookie-banner .btn-2 {
  height: 44px;
  font-size: 14px;
  padding-left: 20px;
  padding-right: 20px;
  white-space: nowrap;
  color: var(--color-text);
}

/* вторая кнопка-контур на тёмном фоне: рамка светлее, текст белый */
.cookie-banner .btn-2 {
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--color-white);
  background: transparent;
}

.cookie-banner .btn-2:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.cookie-banner .btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
}

@media (max-width: 768px) {
  .cookie-banner {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
    border-radius: var(--radius-md);
    padding: 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .cookie-actions {
    flex-direction: row;
  }

  .cookie-actions > * {
    flex: 1;
  }
}

/* --- Анимации появления при загрузке (hero) --- */

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade-down {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* --- Reveal-анимации при скролле (элементы с data-anim) --- */

html.js-anim [data-anim],
html.js-anim [data-anim-stagger] > * {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

html.js-anim [data-anim].is-visible,
html.js-anim [data-anim-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}

/* Отключение анимаций при системной настройке «уменьшить движение» */

@media (prefers-reduced-motion: reduce) {
  html.js-anim [data-anim],
  html.js-anim [data-anim-stagger] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .site-header {
    animation: fade-down 0.5s ease both;
  }

  .hero-title {
    animation: rise-in 0.7s ease both;
  }

  .hero-text {
    animation: rise-in 0.7s ease both 0.15s;
  }

  .buttons-cnt {
    animation: rise-in 0.7s ease both 0.3s;
  }

  .hero-img {
    animation: rise-in 0.9s ease both 0.4s;
  }
}

@media (max-width: 768px) {
  body {
    padding-left: 0px;
    padding-right: 0px;
  }
  .container {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .header-cnt {
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 0;
  }

  .site-header .site-branding {
    max-width: 102px;
  }

  .mob-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    line-height: 140%;
    font-weight: var(--medium);
    transition: background-color 0.25s ease;
  }

  .mob-btn .burger {
    border-radius: var(--radius-pill);
    background-color: var(--color-lgray);
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 9px;
    flex-shrink: 0;
    flex-direction: column;
    gap: 2px;
  }

  .mob-btn.is-open .burger span:first-child {
    transform: translateY(2px) rotate(45deg);
  }

  .mob-btn.is-open .burger span:last-child {
    transform: translateY(-2px) rotate(-45deg);
  }

  .mob-popup {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--color-white);
    padding: 0px 20px 20px;
    border-radius: 0 0 30px 30px;
    box-shadow: 0 16px 24px rgba(13, 13, 13, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition:
      opacity 0.3s ease,
      transform 0.3s ease,
      visibility 0s linear 0.3s;
  }

  body.menu-open .mob-popup {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .nav-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 17px 0;
    border-top: 1px solid var(--color-lgray);
    gap: 6px 16px;
  }

  .header-actions {
    flex-direction: column-reverse;
    gap: 12px;
  }

  .header-actions .btn {
    width: 100%;
  }

  .sign-up-btn {
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-pill);
    height: 38px;
    font-size: 12px;
    justify-content: center;
    width: 100%;
  }

  .overlay {
    pointer-events: none;
  }

  body.menu-open .overlay {
    width: 100%;
    height: 100%;
    opacity: 1;
    pointer-events: auto;
  }

  body.menu-open {
    overflow: hidden;
  }

  .hero-cards {
    display: none;
  }

  .h1 {
    font-size: 38px;
    line-height: 120%;
    margin-bottom: 14px;
  }
  .p1-text {
    font-size: 14px;
    line-height: 140%;
    font-weight: var(--light);
  }

  .buttons-cnt,
  .roles-list,
  .enterprise-list,
  .form-block {
    flex-direction: column;
  }

  .signal-block,
  .roles-grid,
  .channels-grid,
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .channel-card {
    grid-column: span 1 !important;
  }

  .hero-block {
    padding-top: 12px;
  }

  .hero-text {
    margin-bottom: 20px;
  }

  .btn-xl {
    font-size: 16px;
    height: 52px;
    max-width: 100%;
  }
  .buttons-cnt {
    gap: 18px;
    margin-bottom: 30px;
  }


  .footer-bottom,
  .footer-top {
    display: flex;
    flex-direction: column;
  }

  .cta-block {
    margin-top: 40px;
    margin-bottom: 40px;
    border-radius: var(--radius-md);
    padding: 30px 20px;
  }
  .cta-cnt {
    padding: 0px;
  }


  .signal-block {
    gap: 30px;
  }
  .signal-media {
    order: 2;
    border-radius: var(--radius-sm);
    padding: 16px;
  }
  .signal-media img {
    max-width: 210px;
    border-radius: var(--radius-sm);
  }
  .signal-content {
    order: 1;
  }
  .signal-text {
    margin-bottom: 20px;
  }
  .signal-list {
    gap: 14px;
  }
  .signal-item {
    font-size: 14px;
    align-items: start;
    padding-bottom: 10px;
  }

  .roles-text {
    margin-bottom: 30px;
  }

  .role-card {
    padding: 16px;
  }

  .role-card-content {
    padding: 0;
  }

  .role-card-title {
    font-size: 17px;
    margin-bottom: 8px;
  }

  .role-card-text {
    font-size: 14px;
  }
  .roles-grid {
    gap: 16px;
  }

  .role-card-img {
    display: none;
  }
  .roles-subtitle {
    text-align: start;
    font-size: 21px;
  }

  .roles-subtext {
    text-align: start;
    font-size: 14px;
    margin: 0 auto 16px;
  }

  .roles-item {
    font-size: 14px;
  }

  .roles-list {
    gap: 12px;
    align-items: start;
  }


  .channels-text {
    margin-bottom: 30px;
  }

  .channels-grid {
    gap: 16px;
  }

  .channel-card {
    padding: 16px;
    order: 3;
  }
  .channel-card:nth-child(6n + 1) {
    order: 1;
  }
  .channel-card:nth-child(6n) {
    order: 2;
  }

  .channel-card-status {
    padding: 2px 20px;
    margin-top: 7px;
  }
  .channel-card:nth-child(6n + 1) .channel-card-status,
  .channel-card:nth-child(6n) .channel-card-status {
    padding: 2px 20px;
  }

  .channel-card-name {
    flex-direction: column;
    gap: 19px;
    align-items: start;
    font-size: 17px;
  }

  .channel-card-head {
    align-items: start;
    margin-bottom: 8px;
  }

  .channel-card-text {
    font-size: 14px;
  }

  .pricing-text {
    margin: 0 auto 30px;
  }

  .pricing-card {
    padding: 16px;
  }

  .pricing-card-icon {
    width: 42px;
    height: 42px;
  }

  .pricing-card-name {
    gap: 10px;
  }

  .pricing-card-title {
    font-size: 21px;
  }

  .pricing-card-price > span {
    font-size: 26px;
  }

  .pricing-card-price {
    font-size: 14px;
    padding: 12px 0;
  }
  .pricing-grid {
    gap: 16px;
  }

  .enterprise-cnt {
    border-radius: var(--radius-md);
    margin-top: 16px;
    align-items: start;
    padding: 16px;
    text-align: start;
    margin-bottom: 32px;
  }

  .enterprise-title {
    font-size: 26px;
  }

  .enterprise-text {
    font-size: 17px;
  }

  .enterprise-text2 {
    color: var(--color-gray);
    margin-bottom: 16px;
  }

  .enterprise-list {
    gap: 12px;
    border-top: 1px solid var(--color-gray);
    padding-top: 15px;
    margin-bottom: 38px;
    align-items: start;
  }

  .enterprise-item > svg {
    flex-shrink: 0;
  }

  .form-points {
    gap: 12px;
    margin-top: 24px;
  }

  .form-points li {
    gap: 16px;
    font-size: 18px;
  }

  .form-point-num {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    font-size: 17px;
  }

  .form-block {
    gap: 30px;
  }

  .form-aside {
    border-radius: var(--radius-md);
    padding: 16px;
  }

  .form-aside-title {
    font-size: 21px;
    margin-bottom: 20px;
  }

  .wpcf7-form .wpcf7-form-control-wrap input {
    padding: 20px 30px 6px;
  }

  .wpcf7-form input[type="submit"],
  form.cf7mls input.wpcf7-form-control.wpcf7-submit {
    padding: 15px 20px;
  }
  .wpcf7-acceptance label {
    font-size: 12px;
  }

  .site-footer {
    padding-left: 0;
    padding-right: 0;
    margin-top: 40px;
  }

  .site-footer .site-branding {
    max-width: 102px;
    order: 1;
  }

  .site-footer-cnt {
    padding: 20px;
    border-radius: 30px 30px 0 0;
    margin-bottom: 0px;
  }

  .footer-top {
    flex-wrap: wrap;
    flex-direction: inherit;
    border: none;
    padding-bottom: 0;
  }

  .btn-cnt {
    order: 2;
  }

  .btn-cnt .btn {
    height: 32px;
  }

  .footer-nav {
    order: 3;
    width: 100%;
    margin-top: 20px;
  }

  .footer-bottom {
    padding-top: 0;
    flex-direction: inherit;
    flex-wrap: wrap;
    align-items: start;
    gap: 10px;
    justify-content: start;
  }
}

/* ==========================================================================
   30. PAGE / EDITOR CONTENT — .page-content
   Стили для контента, который набирается в редакторе страниц.
   ВСЕ селекторы ограничены классом .page-content, чтобы не задеть
   сверстанные блоки остального сайта (hero, cards, формы и т.д.).
   Здесь удобно править типографику страниц.
   ========================================================================== */

.page-container {
  /* внешняя оболочка страницы — сама по себе дополнительных стилей не требует */
}

.page-header {
  margin-bottom: 32px;
  text-align: center;
}

.page-title {
  font-size: 49px;
  line-height: 120%;
  font-weight: var(--semibold);
  margin-bottom: 18px;
  overflow-wrap: break-word;
}

.page-thumbnail {
  border-radius: var(--radius-xs);
  margin-bottom: 24px;
  margin-left: auto;
  margin-right: auto;
}

.page-footer {
  margin-top: 24px;
}
.page-footer .edit-link {
  font-size: 14px;
  color: var(--color-gray);
}
.page-footer .edit-link a:hover {
  color: var(--color-accent);
}

/* --- Контент из редактора --- */

.page-content {
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  font-family: var(--font-family-base);
  color: var(--color-text);
  font-size: 18px;
  line-height: 1.65;
  word-wrap: break-word;
}

/* Заголовки */
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content h5,
.page-content h6 {
  font-family: var(--font-family-base);
  font-weight: var(--semibold);
  color: var(--color-text);
  line-height: 1.25;
  margin-bottom: 18px;
}

.page-content h1 {
  font-size: 40px;
  margin-top: 24px;
}
.page-content h2 {
  font-size: 36px;
  margin-top: 48px;
}
.page-content h3 {
  font-size: 28px;
  margin-top: 40px;
}
.page-content h4 {
  font-size: 23px;
  margin-top: 32px;
}
.page-content h5 {
  font-size: 19px;
  margin-top: 24px;
}
.page-content h6 {
  font-size: 16px;
  margin-top: 24px;
}

/* Первый заголовок и первая строка после заголовка — без отступа сверху */
.page-content h2:first-child,
.page-content h3:first-child,
.page-content h4:first-child,
.page-content p:first-child {
  margin-top: 0;
}

/* Серфитные слова-акценты (как .accent-text на главной) */
.page-content .accent-text,
.page-content .text-accent {
  font-family: var(--font-family-second);
  font-style: italic;
  font-weight: var(--regular);
}

/* Абзацы */
.page-content p {
  margin-bottom: 20px;
}

.page-content p.intro,
.page-content .p1 {
  color: var(--color-gray);
  font-size: 20px;
}

/* Ссылки */
.page-content a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition:
    color 0.2s ease-in-out,
    text-decoration-color 0.2s ease-in-out;
}

.page-content a:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

.page-content .btn {
  display: inline-flex;
  text-decoration: none;
}

/* Выделение текста */
.page-content strong {
  font-weight: var(--bold);
}

.page-content em {
  font-style: italic;
}

.page-content mark {
  background-color: var(--color-accent);
  color: var(--color-text);
  border-radius: 4px;
  padding: 0 4px;
}

/* Списки */
.page-content ul,
.page-content ol {
  margin-bottom: 22px;
  padding-left: 1.5em;
}

.page-content ul {
  list-style: disc;
}

.page-content ol {
  list-style: decimal;
}

.page-content ul ul {
  list-style: circle;
}

.page-content ol ol {
  list-style: lower-alpha;
}

.page-content ul ul ul {
  list-style: square;
}

.page-content li {
  margin-bottom: 8px;
  line-height: 1.6;
}

.page-content li::marker {
  color: var(--color-accent);
}

/* Цитаты (blockquote в редакторе / wp-block-quote) */
.page-content blockquote,
.page-content .wp-block-quote {
  margin: 28px 0;
  padding: 24px 28px;
  border-left: 4px solid var(--color-accent);
  background-color: var(--color-lgray);
  border-radius: 0 14px 14px 0;
  font-family: var(--font-family-second);
  font-style: italic;
  font-size: 21px;
  line-height: 1.55;
  color: var(--color-text);
}

.page-content blockquote p,
.page-content .wp-block-quote p {
  margin-bottom: 12px;
}

.page-content blockquote p:last-child,
.page-content .wp-block-quote p:last-child {
  margin-bottom: 0;
}

/* Источник/автор цитаты */
.page-content blockquote cite,
.page-content blockquote footer,
.page-content .wp-block-quote cite,
.page-content .wp-block-quote footer,
.page-content .wp-block-quote__citation {
  display: block;
  font-family: var(--font-family-base);
  font-style: normal;
  font-size: 14px;
  font-weight: var(--medium);
  color: var(--color-gray);
  margin-top: 14px;
}

/* Изображения и подписи */
.page-content img {
  height: auto;
  border-radius: var(--radius-xs);
}

.page-content figure {
  margin: 24px 0;
}

.page-content figcaption,
.page-content .wp-caption-text,
.page-content .wp-caption .wp-caption-text {
  font-family: var(--font-family-base);
  font-style: normal;
  font-size: 14px;
  color: var(--color-gray);
  margin-top: 10px;
  margin-bottom: 0;
}

/* Таблицы */
.page-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 16px;
}

.page-content th,
.page-content td {
  border: var(--border-light);
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
}

.page-content th {
  background-color: var(--color-lgray);
  font-weight: var(--semibold);
}

.page-content tr:nth-child(even) td {
  background-color: #fafbfe;
}

/* Код */
.page-content code,
.page-content kbd,
.page-content samp {
  font-family: "SF Mono", Consolas, Monaco, "Courier New", monospace;
  font-size: 15px;
  background-color: var(--color-lgray);
  border-radius: 6px;
  padding: 2px 6px;
}

.page-content pre {
  background-color: var(--color-lgray);
  border-radius: var(--radius-xs);
  padding: 24px;
  overflow-x: auto;
  margin: 24px 0;
  line-height: 1.5;
}

.page-content pre code {
  background: none;
  padding: 0;
  font-size: 15px;
}

/* Горизонтальный разделитель */
.page-content hr {
  border: none;
  border-top: 1px solid var(--color-lgray);
  margin: 40px 0;
}

/* Блок "страницы" при разбивке на части (wp_link_pages) */
.page-content .page-links {
  margin-top: 24px;
  font-size: 16px;
}
.page-content .page-links a {
  margin: 0 4px;
}

/* Выравнивания WordPress */
.page-content .alignleft,
.page-content img.alignleft {
  float: left;
  margin: 0 24px 16px 0;
}

.page-content .alignright,
.page-content img.alignright {
  float: right;
  margin: 0 0 16px 24px;
}

.page-content .aligncenter,
.page-content img.aligncenter,
.page-content figure.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.page-content .alignnone {
  margin: 24px 0;
}

.page-content .wp-caption {
  max-width: 100%;
}

.page-content .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.page-content .gallery-columns-3 .gallery-item {
  max-width: none;
}

/* Отзывчивость */
@media (max-width: 768px) {
  .page-title {
    font-size: 38px;
  }

  .page-content {
    font-size: 17px;
  }

  .page-content h1 {
    font-size: 32px;
  }
  .page-content h2 {
    font-size: 28px;
  }
  .page-content h3 {
    font-size: 24px;
  }
  .page-content h4 {
    font-size: 20px;
  }

  .page-content blockquote,
  .page-content .wp-block-quote {
    font-size: 19px;
    padding: 20px;
  }

  .page-content .alignleft,
  .page-content .alignright {
    float: none;
    display: block;
    margin: 20px auto;
  }
}

/* Кнопки Gutenberg (wp:buttons) внутри контента — как фирменные .btn */
.page-content .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-content .wp-block-button .wp-block-button__link,
.page-content .wp-block-button.is-style-outline > .wp-block-button__link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 25px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
  color: var(--color-text);
  font-family: var(--font-family-base);
  font-size: 16px;
  font-weight: var(--medium);
  line-height: 140%;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.page-content .wp-block-button.is-style-outline > .wp-block-button__link {
  background-color: transparent;
}

.page-content .wp-block-button .wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-accent);
}

.page-content .wp-block-button.is-style-outline > .wp-block-button__link:hover {
  background-color: var(--color-accent);
}

.page-content .wp-block-button .wp-block-button__link:active {
  transform: translateY(0);
  box-shadow: none;
  transition-duration: 0.1s;
}

/* ==========================================================================
   31. БЛОГ — страница «Блог», категории, статья, сайдбар
   Сетка сделана по мотивам блока «Получайте сигналы там, где удобно»:
   те же 4 колонки, карточки с радиусом 30 и n-ные «фичеред»-карточки.
   ========================================================================== */

/* --- Общие: страница блога и категории --- */

.blog-page-head {
  text-align: center;
  margin-bottom: 50px;
}

.blog-page-title {
  font-size: 49px;
}

.blog-page-text {
  margin-bottom: 0;
}

/* --- Страница «Карта сайта» — простые списки ссылок по разделам --- */

.sitemap-page-head {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-bottom: 46px;
  text-align: center;
}

.sitemap-section:not(:last-child) {
  margin-bottom: 40px;
}

.sitemap-section-title {
  font-size: 18px;
  margin-bottom: 14px;
}

.sitemap-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sitemap-list a {
  font-size: 16px;
  font-weight: var(--medium);
  transition: color 0.25s ease;
}

.sitemap-list a:hover {
  color: var(--color-accent);
}

/* вспомогательный текст: дата записи, число статей в рубрике */
.sitemap-note {
  color: var(--color-gray);
  font-size: 13px;
  padding-left: 8px;
}

@media (max-width: 768px) {
  .sitemap-section:not(:last-child) {
    margin-bottom: 32px;
  }

  .sitemap-section-title {
    font-size: 16px;
    margin-bottom: 12px;
  }
}

/* --- Страница /legal/: список юридических страниц --- */

.legal-page-head {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-bottom: 46px;
  text-align: center;
}

.legal-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  list-style: none;
  margin: 0 auto;
  max-width: 720px;
  padding: 0;
}

.legal-item {
  background-color: var(--color-white);
  border: var(--border-light);
  border-radius: var(--radius-sm);
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 26px 32px;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.legal-item:hover {
  background-color: var(--color-lgray);
  border-color: var(--color-accent);
}

.legal-item-title {
  color: var(--color-text);
  font-size: 20px;
  font-weight: var(--semibold);
  line-height: 130%;
}

.legal-item-text {
  color: var(--color-gray);
  font-size: 14px;
  line-height: 150%;
}

.legal-item-doc {
  align-items: center;
  color: var(--color-text);
  display: inline-flex;
  font-size: 13px;
  font-weight: var(--medium);
  gap: 8px;
  margin-top: 10px;
  transition: color 0.2s ease;
}

.legal-item:hover .legal-item-doc {
  color: var(--color-accent);
}

.legal-item-doc::after {
  content: "→";
  font-size: 15px;
  transition: transform 0.2s ease;
}

.legal-item:hover .legal-item-doc::after {
  transform: translateX(4px);
}

.legal-empty {
  color: var(--color-gray);
  text-align: center;
}

.blog-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
}

.blog-empty {
  color: var(--color-gray);
  font-size: 18px;
}

/* --- Сайдбар --- */

.blog-sidebar {
  position: sticky;
  top: 110px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.blog-sidebar-block {
  border-radius: var(--radius-sm);
  padding: 20px;
  border: var(--border-light);
}

.blog-sidebar-title {
  font-size: 14px;
  font-weight: var(--medium);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gray);
  margin-bottom: 14px;
}


/* --- Шапка страницы статьи: «Все статьи · рубрика · дата» вместо основной --- */

.site-header--article {
  position: sticky;
  top: 0;
  padding: 18px 20px;
  border-bottom: 0;
}

.site-header--article .header-cnt {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.site-header--article .article-back {
  margin-bottom: 0;
}

/* категория + дата в шапке статьи */
.article-topbar-meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}


.blog-nav-btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border: var(--border-light);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: var(--medium);
  color: var(--color-text);
  transition:
    background-color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;
}

.blog-nav-btn:hover {
  background-color: var(--color-lgray);
}

/* выдвижная панель слева (drawer): не центрированный попап, а окошко,
   выезжающее из-под левого края; белое, радиус только справа, на всю высоту */
.blog-popup {
  border: 0;
  border-radius: 0 30px 30px 0;
  background: var(--color-white);
  color: var(--color-text);
  padding: 20px;
  margin: 0;
  height: 100%;
  max-height: none;
  width: min(360px, 86vw);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* стартовая точка анимации: панель спрятана за левым краем */
  opacity: 0;
  transform: translateX(-100%);
}

.blog-popup[open] {
  opacity: 1;
  transform: none;
  display: flex;
  animation: blog-drawer-in 0.32s cubic-bezier(0.32, 0.72, 0, 1);
}

/* подложка приглушает страницу */
.blog-popup::backdrop {
  background: rgba(32, 34, 36, 0.45);
}

.blog-popup[open]::backdrop {
  animation: blog-drawer-backdrop-in 0.32s ease-out;
}

@keyframes blog-drawer-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes blog-drawer-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* шапка панели не скроллится, объёмное тело листается отдельно */
.blog-popup-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.blog-popup-title {
  font-size: 16px;
  font-weight: var(--semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-gray);
  margin: 0;
}

.blog-popup-close {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  border: var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: var(--color-text);
  transition: all 0.2s ease-out;
}

.blog-popup-close:hover {
  background-color: var(--color-lgray);
}

.blog-popup-body {
  overflow-y: auto;
  overscroll-behavior: contain;
}



/* --- Кнопка «Показать ещё» --- */

.blog-more-cnt {
  display: flex;
  justify-content: center;
  margin-top: 44px;
}

.blog-more-btn {
  min-width: 220px;
}

.blog-more-btn.is-loading {
  pointer-events: none;
  opacity: 0.6;
}

.blog-more-btn.is-loading::after {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid rgba(32, 34, 36, 0.25);
  border-top-color: var(--color-text);
  border-radius: 50%;
  animation: intent-spin 0.7s linear infinite;
}

@keyframes intent-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- Статья (single) --- */

.article-content {
  min-width: 0;
}

.article-back {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: var(--medium);
  color: var(--color-gray);
  margin-bottom: 24px;
  transition: color 0.2s ease-in-out;
}

.article-back svg {
  width: 16px;
  height: 16px;
}

.article-back:hover {
  color: var(--color-accent);
}

.article-head {
  margin-bottom: 24px;
}


.article-cat {
  border-radius: var(--radius-pill);
  height: 28px;
  padding: 2px 15px;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  line-height: 140%;
  font-weight: var(--medium);
  background-color: var(--color-accent);
  color: var(--color-text);
  transition: opacity 0.2s ease-in-out;
}

.article-cat:hover {
  opacity: 0.8;
}

.article-date {
  font-size: 14px;
  color: var(--color-gray);
}

.article-title {
  font-size: 49px;
}

/* intro (первый абзац статьи) — между заголовком и фотографией */
.article-intro {
  margin-top: 20px;
  font-size: 20px;
  line-height: 1.45;
  color: var(--color-gray);
}

.article-intro p {
  margin-bottom: 0;
}

.article-thumb-cnt {
  margin-bottom: 24px;
}

.article-thumb {
  border-radius: var(--radius-sm);
  width: 100%;
  height: auto;
  /* главное изображение не должно превращаться в простыню:
     вертикальные картинки обрезаются до этой высоты */
  max-height: 480px;
  object-fit: cover;
}





/* --- Планшеты и мобильные --- */

@media (max-width: 1024px) {
  .blog-layout {
    grid-template-columns: 210px 1fr;
    gap: 28px;
  }

  .blog-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .blog-card:nth-child(6n + 1),
  .blog-card:nth-child(6n) {
    grid-column: span 2;
  }

  .article-title,
  .blog-page-title {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .blog-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .blog-sidebar {
    position: static;
    order: 2;
    margin-top: 40px;
  }


  .blog-grid {
    grid-template-columns: 1fr 1fr;
  }

  .blog-card:nth-child(6n + 1),
  .blog-card:nth-child(6n) {
    grid-column: span 2;
  }


  .article-title,
  .blog-page-title {
    font-size: 34px;
  }
}

/* ==========================================================================
   32. БЛОГ v2 — новые карточки статей
   Переопределяет секцию 31: сетка 3 колонки (не выходит за контейнер),
   карточки-в-стиле с фото-превью, без иконок, вся карточка кликабельна.
   ========================================================================== */

/* --- Сетка: 3 колонки, minmax(0,1fr) чтобы не переполнять контейнер --- */

.blog-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* Контент-колонка блога должна уметь сжиматься (иначе сетка вылезает) */
.blog-layout {
  grid-template-columns: 240px minmax(0, 1fr);
}

.blog-content {
  min-width: 0;
}

/* --- Карточка v2 --- */

.blog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--color-white);
  border-radius: 24px;
  border: var(--border-light);
  padding: 0;
  overflow: hidden;
  transition: border-color 0.2s ease-in-out;
}

/* минималистичный ховер: без «подпрыгивания» и тени — только рамка
   (transform/box-shadow явно сбрасываем: в ранних секциях CSS остались
   старые hover-правила с подъёмом и тенью) */
.blog-card:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(32, 34, 36, 0.18);
}

/* stretched-ссылка: вся карточка кликабельна */
.blog-card-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  color: transparent;
  text-decoration: none;
  font: inherit;
}

.blog-card-media {
  position: relative; /* чип категории поверх изображения */
  aspect-ratio: 16 / 10;
  background-color: var(--color-lgray);
  overflow: hidden;
}

.blog-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-card-media-empty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-family-second);
  font-style: italic;
  font-weight: var(--medium);
  font-size: 18px;
  color: var(--color-gray);
}

.blog-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  padding: 22px 24px 24px;
}

/* категория — плашка поверх изображения (дата из карточек удалена) */
.blog-card-cat {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  pointer-events: none;
  border-radius: var(--radius-pill);
  padding: 4px 11px;
  background-color: var(--color-white);
  color: var(--color-text);
  font-size: 12px;
  font-weight: var(--semibold);
  line-height: 140%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 24px);
  box-shadow: 0 2px 8px rgba(32, 34, 36, 0.08);
}

.blog-card-title {
  font-family: var(--font-family-base);
  font-size: 20px;
  line-height: 130%;
  font-weight: var(--semibold);
  color: var(--color-text);
  margin-bottom: 10px;
  overflow-wrap: break-word;
}

.blog-card-text {
  font-size: 14px;
  line-height: 150%;
  font-weight: var(--light);
  color: var(--color-gray);
  margin-bottom: 16px;
  flex-grow: 1;
}


/* --- Содержание (сайдбар статьи) --- */

.blog-sidebar-toc-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.blog-sidebar-toc-item a {
  display: block;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 135%;
  color: var(--color-text);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.blog-sidebar-toc-item a:hover {
  background-color: var(--color-lgray);
}

.blog-sidebar-toc-item.is-sub a {
  font-size: 13px;
  color: var(--color-gray);
}

/* активный пункт содержания: подсвечивается scroll-spy при прокрутке статьи */

.blog-sidebar-toc-item.is-active a {
  background-color: var(--color-lgray);
  color: var(--color-text);
  font-weight: var(--medium);
  position: relative;
}

.blog-sidebar-toc-item.is-active a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 3px;
  background-color: var(--color-accent);
}

/* отступ при якорной прокрутке под липкую шапку */
.page-content h2,
.page-content h3,
.page-content h4,
.article-body h2,
.article-body h3,
.article-body h4 {
  scroll-margin-top: 130px;
}

/* --- Таблетки и мобильные --- */

@media (max-width: 1024px) {
  .blog-layout {
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 28px;
  }

  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .blog-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .blog-sidebar {
    position: static;
    order: 2;
    /* на мобиле сайдбар = кнопки «Категории»/«Содержание» в тулбаре + попапы */
    margin-top: 0;
  }

  .blog-sidebar-block {
    display: none;
  }


  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .blog-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   33. МЕНЮ ФУТЕРА (юр. ссылки выводится как wp_nav_menu)
   ========================================================================== */

.footer-bottom {
  list-style: none;
  margin: 0;
}

.footer-bottom li {
  margin: 0;
}

.footer-bottom a,
.footer-bottom .footer-link a {
  display: inline-block;
  text-decoration: underline;
  color: var(--color-gray);
  font-size: 12px;
  font-weight: var(--medium);
  line-height: 140%;
  transition: color 0.2s ease;
}

.footer-bottom a:hover,
.footer-bottom .footer-link a:hover {
  color: var(--color-white);
}


/* ==========================================================================
   35. АДАПТИВ: промежуточные брейкпоинты 769–1239
   Десктоп (≥1240) и мобайл (≤768) финальные: их дизайн не меняется.
   Правила ниже действуют только в диапазоне между ними.
   ========================================================================== */

/* --- 769–1239: анти-переполнение ---
   У grid-элементов по умолчанию min-width: auto — контент «распирает»
   треки (.channels-grid давал постоянный горизонтальный сдвиг страницы
   до 1047px от 1024 и ниже). Разрешаем контенту сжиматься; на десктопе
   (≥1240) треки и так рассыпаются равномерно — визуальных изменений нет. */
@media (min-width: 769px) and (max-width: 1239px) {
  .roles-grid > *,
  .channels-grid > *,
  .pricing-grid > * {
    min-width: 0;
  }

  .channel-card-text {
    overflow-wrap: break-word;
  }
}

/* --- 769–1024: «переходный планшет» ---
   4-колоночные сетки десктопа тесны (карточки ~150–220px), поэтому
   раскрываем их в 2 колонки; цена — 2 колонки; блок «О нас» — стек.
   Мобильный дизайн (≤768) ниже по каскаду не пересекается с диапазоном. */
@media (min-width: 769px) and (max-width: 1024px) {
  .roles-grid,
  .channels-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


  /* hero-заголовок 71px → 56px крупным на узких десктопах не по ширине */
  .hero-title {
    font-size: 56px;
  }

}
/* ==========================================================================
   37. ЧИПСЫ КАТЕГОРИЙ БЛОГА (template-parts/blog-cats.php)
   Строка пилюль в шапках «Блога» и рубрик — после подзаголовка.
   ========================================================================== */

.blog-cats {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 8px;
  column-gap: 8px;
  margin-top: 18px;
}

/* счётчик статей в рубрике — приглушённый.helper внутри пилюли */
.blog-cats-count {
  color: var(--color-gray);
  font-size: 12px;
  font-weight: var(--medium);
  padding-left: 6px;
}

/* активная рубрика — акцентная заливка */
.blog-cats .blog-nav-btn.is-active {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  white-space: nowrap;
}

/* --- Статья (single.php): шапка статьи липкая, «Содержание» вынесено
   в нижнюю плавающую панель (см. секцию внизу файла) --- */
@media (max-width: 768px) {
  .site-header--article {
    padding: 14px 16px;
  }

  .site-header--article .header-cnt {
    gap: 8px 12px;
  }

  .site-header--article .article-back {
    font-size: 14px;
    gap: 6px;
    white-space: nowrap;
  }

  .site-header--article .article-back svg {
    width: 14px;
    height: 14px;
  }

  .article-intro {
    margin-top: 16px;
    font-size: 17px;
  }
}

/* ==========================================================================
   38. АРХИВНЫЕ СТРАНИЦЫ БЛОГА БЕЗ САЙДБАРА (home, page-blog, category)
   Сетка в одну колонку — sidebar остаётся только в single.php (статья).
   Специфичность выше .blog-layout, правило в конце файла перекрывает и
   адаптивные 200px-блоки.
   ========================================================================== */

.blog-layout.is-wide {
  grid-template-columns: minmax(0, 1fr);
}

/* ==========================================================================
   39. СЕТКА АРХИВА БЛОГА: ПЕРВАЯ КАРТОЧКА — БОЛЬШАЯ ОБЛОЖКА
   Первая карточка занимает 2 колонки: изображение на всю площадь карточки,
   снизу градиент, поверх него — заголовок и текст (белые). Остальные карточки
   обычные. Мобильная (<=768) вёрстка без изменений — там всё равномерно.
   ========================================================================== */

/* --- гасим старые span-правила, чтобы широкой была только первая --- */
@media (max-width: 1024px) {
  .blog-grid > .blog-card {
    grid-column: auto;
  }
}

@media (min-width: 769px) {
  .blog-grid > .blog-card:first-child {
    grid-column: span 2;
    min-height: 420px;
  }

  /* фото на всю карточку */
  .blog-grid > .blog-card:first-child .blog-card-media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    height: 100%;
  }

  /* затемнение снизу, чтобы белый текст читался на любом фото */
  .blog-grid > .blog-card:first-child .blog-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(32, 34, 36, 0) 30%,
      rgba(32, 34, 36, 0.55) 62%,
      rgba(32, 34, 36, 0.9) 100%
    );
    pointer-events: none;
  }

  /* заглушка без фото тоже держит высоту обложки */
  .blog-grid > .blog-card:first-child .blog-card-media-empty {
    height: 100%;
  }

  /* текст поверх нижней части фото */
  .blog-grid > .blog-card:first-child .blog-card-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 32px;
  }

  .blog-grid > .blog-card:first-child .blog-card-title {
    color: var(--color-white);
    font-size: 32px;
    line-height: 1.15;
    max-width: 92%;
  }

  .blog-grid > .blog-card:first-child .blog-card-text {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0;
    max-width: 92%;
  }
}

/* ==========================================================================
   40. МОБИЛЬНОЕ «СОДЕРЖАНИЕ» СТАТЬИ: НИЖНЯЯ ПАНЕЛЬ + BOTTOM-SHEET
   Верхний sticky-тулбар убран. Внизу экрана — плавающая панель, в ней
   текущий (активный) раздел статьи; тап открывает список содержания
   шторкой снизу. Только <=768, десктопный сайдбар TOC не меняется.
   ========================================================================== */

.article-toc-bar {
  display: none;
}

@media (max-width: 768px) {
  /* нижняя панель фиксирована — оставляем место, чтобы она не перекрывала конец статьи */
  .article-content {
    padding-bottom: 72px;
  }

  /* заголовкам статьи достаточно отступа под шапку (тулбара больше нет) */
  .article-body h2,
  .article-body h3,
  .article-body h4 {
    scroll-margin-top: 96px;
  }

  .article-toc-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70; /* ниже шапки (100) и куки-баннера (90) */
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
    background-color: var(--color-white);
    border: 0;
    border-top: 1px solid var(--color-lgray);
    border-radius: 0;
    box-shadow: 0 -8px 24px rgba(32, 34, 36, 0.06);
    font-size: 13px;
    line-height: 1.3;
    color: var(--color-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .article-toc-bar[hidden] {
    display: none;
  }

  .article-toc-bar-label {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: var(--semibold);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-gray);
  }

  .article-toc-bar-current {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: var(--medium);
  }

  .article-toc-bar svg {
    flex-shrink: 0;
    color: var(--color-gray);
  }

  /* «Содержание» на мобилке — шторка снизу, а не выезжающая слева панель */
  .blog-popup--sheet {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: 72vh;
    margin: 0;
    padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: 24px 24px 0 0;
    opacity: 0;
    transform: translateY(100%);
  }

  .blog-popup--sheet[open] {
    opacity: 1;
    transform: none;
    animation: blog-sheet-in 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .blog-popup--sheet .blog-popup-body {
    overflow-y: auto;
  }

  @keyframes blog-sheet-in {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
}

/* ==========================================================================
   41. ГЛАВНАЯ: «В B2B ВСЁ РЕШАЕТ МОМЕНТ» (front-page.php)
   Слева — пункты-переключатели, справа — сцена активного пункта.
   Десктоп (>=961): табы + автопереключение каждые 4 с (js/scripts.js).
   Планшет/мобильный (<=960): все пункты раскрыты, сцены идут под ними.
   ========================================================================== */

.problem-layout {
  display: block;
}

.problem-title {
  max-width: 590px;
  margin-bottom: 0;
}

.problem-grid {
  display: grid;
  gap: 20px;
  margin-top: 24px;
}

.problem-head {
  margin: 0;
  font: inherit;
  letter-spacing: 0;
}

.problem-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font: 600 21px/1.2 var(--font-family-base);
  color: var(--color-text);
  cursor: default;
}

.problem-tab:focus-visible {
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}

.problem-num {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background-color: var(--color-accent);
  color: var(--color-text);
  font: 600 21px/1 var(--font-family-base);
  transition:
    background-color 0.2s,
    color 0.2s;
}

.problem-desc {
  margin-top: 16px;
  color: #45494e;
  font-size: 14px;
  line-height: 1.4;
}

/* сцена: волны + сообщения/контакты */
.problem-scene {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  min-height: 438px;
  margin-top: 16px;
  max-width: 590px;
  padding: 40px 50px;
  border-radius: var(--radius-lg);
  background-color: var(--color-lgray);
}

.problem-scene-waves {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 50%;
  width: 100%;
  height: auto;
  transform: translateY(-50%);
  pointer-events: none;
}

.problem-bubble {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border-radius: var(--radius-sm);
}

.problem-bubble p {
  font-size: 20px;
  line-height: 1.4;
}

.problem-bubble-in {
  align-self: flex-start;
  padding-right: 42px;
  border-bottom-left-radius: 0;
  background-color: var(--color-white);
  color: var(--color-text);
}

.problem-bubble-in p {
  max-width: 350px;
}

.problem-bubble-out {
  align-self: flex-end;
  border-bottom-right-radius: 0;
  background-color: var(--color-text);
  color: var(--color-white);
}

.problem-bubble-out p {
  max-width: 434px;
}

.problem-bubble-meta,
.problem-contact-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.problem-bubble-meta {
  font: 400 16px/1.2 var(--font-family-base);
}

.problem-bubble-meta b,
.problem-contact-name b {
  font-weight: 400;
}

.problem-bubble-meta span,
.problem-contact-name span {
  color: var(--color-gray);
}

.problem-bubble-meta span::before,
.problem-contact-name span::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 8px;
  border-radius: 50%;
  background-color: var(--color-gray);
  vertical-align: middle;
}

.problem-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 42px 20px 20px;
  border-radius: 20px 20px 20px 0;
  background-color: var(--color-white);
}

.problem-contact-name {
  font-size: 20px;
  line-height: 1.4;
}

.problem-contact-status {
  color: #f94545;
  font: 400 16px/1.2 var(--font-family-base);
}

.problem-footer {
  margin-top: 30px;
  text-align: center;
  font: 600 20px/1.2 var(--font-family-base);
  color: var(--color-text);
}

/* компактная версия сцены */
@media (max-width: 640px) {
  .problem-title {
    font-size: 30px;
  }

  .problem-scene {
    min-height: 238px;
    gap: 10px;
    padding: 24px 27px;
    border-radius: 22px;
  }

  .problem-bubble,
  .problem-contact {
    gap: 4px;
    padding: 11px;
    border-radius: 11px;
  }

  .problem-bubble-in,
  .problem-contact {
    padding-right: 22px;
    border-bottom-left-radius: 0;
  }

  .problem-bubble-out {
    border-bottom-right-radius: 0;
  }

  .problem-bubble p,
  .problem-contact-name {
    font-size: 12px;
  }

  .problem-bubble-in p {
    max-width: 190px;
  }

  .problem-bubble-out p {
    max-width: 236px;
  }

  .problem-bubble-meta,
  .problem-contact-status {
    font-size: 10px;
  }

  .problem-bubble-meta,
  .problem-contact-name {
    gap: 4px;
  }

  .problem-bubble-meta span::before,
  .problem-contact-name span::before {
    width: 2px;
    height: 2px;
    margin-right: 4px;
  }

  .problem-footer {
    font-size: 17px;
  }
}

/* десктоп: сетка «пункты слева — сцена справа» + табы */
@media (min-width: 961px) {
  .problem-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 80px;
    grid-template-rows: auto auto auto auto auto auto auto 1fr auto;
  }

  .problem-grid,
  .problem-item {
    display: contents;
  }

  .problem-title {
    grid-area: 1 / 1;
    margin-bottom: 56px;
  }

  .problem-head {
    grid-column: 1;
  }

  .problem-item:nth-child(1) .problem-head {
    grid-row: 2;
  }

  .problem-item:nth-child(2) .problem-head {
    grid-row: 4;
    margin-top: 24px;
  }

  .problem-item:nth-child(3) .problem-head {
    grid-row: 6;
    margin-top: 24px;
  }

  .problem-tab {
    gap: 20px;
    font-size: 25px;
    cursor: pointer;
  }

  .problem-num {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-xs);
    background-color: var(--color-text);
    color: var(--color-white);
    font-size: 25px;
  }

  .problem-item.is-active .problem-num,
  .problem-tab:hover .problem-num {
    background-color: var(--color-accent);
    color: var(--color-text);
  }

  .problem-desc {
    position: relative;
    box-sizing: border-box;
    grid-column: 1;
    max-height: 24px;
    overflow: hidden;
    margin-top: 0;
    padding: 0 0 24px 72px;
    border-bottom: 1px solid var(--color-lgray);
    color: transparent;
    font-size: 18px;
    transition:
      max-height 0.35s ease-in-out,
      color 0.35s ease-in-out,
      padding-top 0.35s ease-in-out;
  }

  .problem-item:nth-child(1) .problem-desc {
    grid-row: 3;
  }

  .problem-item:nth-child(2) .problem-desc {
    grid-row: 5;
  }

  .problem-item:nth-child(3) .problem-desc {
    grid-row: 7;
  }

  .problem-item.is-active .problem-desc {
    max-height: 10em;
    padding-top: 12px;
    color: #45494e;
  }

  /* невидимая полоса: её animationend переключает следующий пункт */
  .problem-grid.is-auto .problem-item.is-active .problem-desc::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    opacity: 0;
    animation: problem-progress 4s linear both;
  }

  .problem-grid.is-paused .problem-item.is-active .problem-desc::after {
    animation-play-state: paused;
  }

  .problem-scene {
    grid-area: 1 / 2 / 9;
    align-self: center;
    margin-top: 0;
    transition:
      opacity 0.6s,
      visibility 0.6s;
  }

  .problem-item:not(.is-active) .problem-scene {
    opacity: 0;
    visibility: hidden;
  }

  .problem-footer {
    grid-area: 9 / 2;
    margin-top: 32px;
  }
}

@keyframes problem-progress {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .problem-desc,
  .problem-scene {
    transition: none;
  }
}

/* ==========================================================================
   42. БЛОК «КТО ОТКРЫТ К РАЗГОВОРУ» (#who, front-page.php)
   Типы сигналов + источники. Логика сворачивания — scripts.js.
   ========================================================================== */

#who {
  --rs-line: #e3e6ee;
  --rs-light: var(--color-lgray);
  --rs-muted: var(--color-gray);
  --rs-black: var(--color-text);
  --rs-white: var(--color-white);
  --rs-yellow: var(--color-accent);
}

#who .rs-head {
  max-width: 860px;
  margin: 0 auto 48px;
  text-align: center;
}

#who .rs-head .h2 {
  margin-bottom: 0;
}

#who .rs-lead {
  max-width: 760px;
  margin: 16px auto 0;
  color: var(--rs-muted);
  font-size: 18px;
  line-height: 1.4;
}

/* --- сетка карточек --- */

#who .rs-types-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

#who .rs-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: var(--rs-white);
  border: 1px solid var(--rs-light);
  border-radius: var(--radius-sm);
}

#who .rs-types-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

#who .rs-types-head strong {
  font: 600 20px/1.2 var(--font-family-base);
  color: var(--rs-black);
}

#who .rs-types-grid .rs-card > p {
  margin-top: 12px;
  color: var(--rs-muted);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}

#who .rs-ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--rs-yellow);
}

#who .rs-ic svg {
  width: 20px;
  height: 20px;
  stroke: var(--rs-black);
}

/* --- «что входит»: всплывающие теги над ссылкой --- */

#who .rs-more {
  position: relative;
  margin-top: auto;
  padding-top: 14px;
  font-size: 14px;
}

#who .rs-more summary {
  width: fit-content;
  color: var(--rs-muted);
  cursor: pointer;
  list-style: none;
  border-bottom: 1px dashed currentColor;
}

#who .rs-more summary::-webkit-details-marker {
  display: none;
}

#who .rs-more summary:hover {
  color: var(--rs-black);
}

#who .rs-more[open] summary {
  color: var(--rs-black);
}

#who .rs-types-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

#who .rs-more .rs-types-tags {
  position: absolute;
  left: -8px;
  bottom: calc(100% + 10px);
  z-index: 5;
  width: max-content;
  max-width: min(300px, calc(100vw - 48px));
  margin: 0;
  padding: 12px;
  border: 1px solid var(--rs-line);
  border-radius: var(--radius-xs);
  background: var(--rs-white);
  box-shadow: 0 12px 32px rgb(32 34 36 / 0.14);
}

#who .rs-more .rs-types-tags::after {
  content: "";
  position: absolute;
  left: 20px;
  bottom: -6px;
  width: 10px;
  height: 10px;
  border: solid var(--rs-line);
  border-width: 0 1px 1px 0;
  background: var(--rs-white);
  transform: rotate(45deg);
}

#who .rs-ltag {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--rs-light);
  font-size: 13px;
  line-height: 1.3;
}

/* --- «Скоро»: то, что сервис ещё не собирает --- */

#who .rs-ltag.is-soon,
#who .rs-sources-list li.is-soon {
  border: 1px dashed #c3c8d2;
  background: var(--rs-white);
}

#who .rs-ltag.is-soon small,
#who .rs-sources-list li.is-soon small {
  margin-left: 6px;
  color: #5f666e;
  font-size: 12px;
}

#who .rs-soon {
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--rs-light);
  color: var(--rs-black);
  font-size: 12px;
  font-weight: 500;
}

/* --- «Показать ещё»: свёрнутый список с затуханием --- */

#who [data-collapsible].is-collapsed {
  overflow: hidden;
}

#who [data-collapsible].is-collapsed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(rgb(255 255 255 / 0), var(--rs-white));
  pointer-events: none;
}

#who .rs-types-grid.is-collapsed {
  max-height: 440px;
}

#who .rs-more-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px auto 0;
  padding: 8px 12px;
  border: 0;
  background: none;
  color: var(--rs-black);
  font-size: 16px;
  cursor: pointer;
}

#who .rs-more-toggle[hidden] {
  display: none;
}

#who .rs-more-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border: solid var(--rs-yellow);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* --- источники --- */

#who .rs-sources {
  margin-top: 48px;
}

#who .rs-sources-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}

#who .rs-sources-top strong {
  font: 600 20px/1.2 var(--font-family-base);
}

#who .rs-sources-top span {
  color: var(--rs-muted);
  font-size: 14px;
}

#who .rs-sources-list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
  list-style: none;
}

#who .rs-sources-list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px solid var(--rs-light);
  border-radius: 999px;
  background: var(--rs-white);
  font-size: 14px;
  line-height: 1.2;
}

#who .rs-sources-list img {
  flex: none;
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 50%;
}

@media (max-width: 1100px) {
  #who .rs-types-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #who .rs-types-grid.is-collapsed {
    max-height: 640px;
  }
}

@media (max-width: 640px) {
  #who .rs-head {
    margin-bottom: 36px;
  }

  #who .rs-types-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  #who .rs-types-grid.is-collapsed {
    max-height: 880px;
  }

  #who .rs-types-head {
    gap: 24px;
  }

  #who .rs-types-head strong {
    font-size: 18px;
  }

  #who .rs-types-grid .rs-card > p {
    font-size: 14px;
  }

  #who .rs-sources {
    margin-top: 32px;
  }

  #who .rs-sources-top {
    flex-direction: column;
    gap: 8px;
  }

  #who .rs-sources-list.is-collapsed {
    max-height: 248px;
  }

  #who .rs-sources-list li {
    min-height: 38px;
    padding: 8px 14px;
  }
}

/* ==========================================================================
   43. БЛОК «КАК ЭТО РАБОТАЕТ» (#how-work, front-page.php)
   Табы-шаги + анимированные экраны. Логика — initHowTabs в scripts.js.
   ========================================================================== */

#how-work {
  --line: #e3e6ee;
  --light: var(--color-lgray);
  --muted: var(--color-gray);
  --black: var(--color-text);
  --white: var(--color-white);
  --yellow: var(--color-accent);
  --yellow-soft: #fdf0c4;
  --body: #45494e;
  --ink: var(--color-text);
  --sans: var(--font-family-base);

  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#how-work .rs-head {
  max-width: 860px;
  margin: 0 auto 40px;
  text-align: center;
}

#how-work .rs-head .h2 {
  margin-bottom: 0;
}

#how-work .rs-lead {
  max-width: 760px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.4;
}

#how-work .b-num {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-xs);
  background: var(--yellow);
  color: var(--black);
  font: 600 25px/1.2 var(--sans);
  letter-spacing: 0;
}

#how-work .b-how-steps {
  position: relative;
  display: grid;
  gap: 24px;
}

/* Волны на фоне: full-bleed, начинаются от шагов. */
#how-work .b-how-steps::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: max(1440px, 100vw);
  aspect-ratio: 1440 / 582;
  transform: translateX(-50%);
  background: url("images/how/how-waves.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

#how-work .b-how-step {
  margin: 0;
  font-size: inherit;
  letter-spacing: 0;
}

#how-work .b-how-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin: 0 auto;
  padding: 4px 8px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--black);
  text-align: center;
  font: inherit;
}

#how-work .b-how-name {
  font: 600 20px/1.2 var(--sans);
}

#how-work .b-how-tab:focus-visible {
  outline: 2px solid var(--black);
  outline-offset: 3px;
  border-radius: 12px;
}

#how-work .b-how-tab[aria-expanded="false"] .b-num {
  background: var(--light);
  color: var(--muted);
}

#how-work .b-how-tab:hover .b-num {
  box-shadow: 0 0 0 4px var(--yellow-soft);
}

#how-work .b-how-panel {
  display: grid;
  gap: 24px;
  justify-items: center;
}

#how-work .b-how-screen {
  width: 100%;
  max-width: 920px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: #f8f4ec;
  container-type: inline-size;
}

#how-work .b-how-desc {
  max-width: 640px;
  text-align: center;
  font-size: 18px;
  line-height: 1.4;
}

/* С JS: шаги — переключатель, под ними один экран. */
@media not all and (max-width: 640px) {
  #how-work .b-how-steps.is-ready {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 20px;
  }

  #how-work .b-how-steps.is-ready::before {
    content: "";
    position: absolute;
    top: 30px;
    left: calc(100% / 6);
    right: calc(100% / 6);
    border-top: 1px dashed var(--line);
  }

  #how-work .is-ready .b-how-step {
    position: relative;
    grid-row: 1;
  }

  #how-work .is-ready .b-how-step-1 {
    grid-column: 1;
  }

  #how-work .is-ready .b-how-step-2 {
    grid-column: 2;
  }

  #how-work .is-ready .b-how-step-3 {
    grid-column: 3;
  }

  #how-work .is-ready .b-how-tab .b-num {
    position: relative;
    outline: 10px solid var(--white);
  }

  #how-work .is-ready .b-how-panel {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  #how-work .is-ready .b-how-panel:not(.is-active) {
    display: none;
  }
}

/* --- экраны-мокапы --- */

#how-work .scr {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-sm);
  background: var(--light);
}

#how-work .scr .feed {
  height: 100%;
}

/* --- лента сигналов --- */

#how-work .feed {
  display: flex;
  height: 100%;
  background: var(--light);
  color: var(--ink);
  text-align: left;
}

#how-work .feed-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2cqw;
  width: 7.5cqw;
  padding: 2cqw 0;
  background: var(--white);
  border-right: 1px solid var(--line);
}

#how-work .feed-side img {
  width: 3.4cqw;
  height: auto;
  object-fit: cover;
  object-position: left;
  aspect-ratio: 1;
}

#how-work .feed-side i {
  width: 2.6cqw;
  height: 2.6cqw;
  border-radius: .8cqw;
  background: var(--light);
}

#how-work .feed-side i.is-on {
  background: var(--yellow);
}

#how-work .feed-main {
  flex: 1;
  min-width: 0;
  padding: 2.4cqw 2.8cqw;
}

#how-work .feed-top {
  display: flex;
  align-items: baseline;
  gap: 1.2cqw;
  font-size: 1.5cqw;
}

#how-work .feed-top b {
  font: 600 2.1cqw/1.2 var(--sans);
}

#how-work .feed-top span {
  color: var(--muted);
}

#how-work .feed-top .feed-count {
  margin-left: auto;
}

#how-work .feed-top mark {
  padding: .2cqw .8cqw;
  border-radius: 99px;
  background: var(--yellow);
  color: var(--ink);
}

#how-work .feed-tabs {
  display: flex;
  gap: .8cqw;
  margin: 1.6cqw 0 1.8cqw;
  font-size: 1.35cqw;
}

#how-work .feed-tabs span {
  padding: .55cqw 1.4cqw;
  border-radius: 99px;
  background: var(--white);
  color: var(--body);
}

#how-work .feed-tabs .is-on {
  background: var(--black);
  color: var(--white);
}

#how-work .feed-list {
  display: grid;
  gap: 1cqw;
  list-style: none;
}

#how-work .feed-row {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  padding: 1.25cqw 1.6cqw;
  border-radius: 1.6cqw;
  background: var(--white);
}

#how-work .feed-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 4.4cqw;
  height: 4.4cqw;
  border-radius: 1.3cqw;
}

#how-work .feed-ic img {
  width: 2.2cqw;
  height: 2.2cqw;
}

#how-work .feed-ic-y {
  background: var(--yellow);
}

#how-work .feed-ic-l {
  background: var(--light);
}

#how-work .feed-ic-d {
  background: var(--black);
}

#how-work .feed-text {
  display: grid;
  gap: .25cqw;
  min-width: 0;
}

#how-work .feed-text b {
  font-size: 1.6cqw;
  font-weight: 600;
  line-height: 1.25;
}

#how-work .feed-text span,
#how-work .feed-text small {
  overflow: hidden;
  color: var(--muted);
  font-size: 1.3cqw;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#how-work .feed-text em {
  color: var(--ink);
  font-style: normal;
  font-weight: 500;
}

#how-work .feed-text small {
  font-size: 1.15cqw;
  color: #a5abb2;
}

#how-work .feed-score {
  display: grid;
  place-items: center;
  flex: none;
  width: 4.2cqw;
  height: 4.2cqw;
  margin-left: auto;
  border: 1px solid var(--yellow);
  border-radius: 1.3cqw;
  font: 400 1.75cqw/1 var(--sans);
}

/* 1. Онбординг ICP */

#how-work .scr-form {
  display: flex;
  flex-direction: column;
  gap: 1.5cqw;
  padding: 2.6cqw 6cqw 2.6cqw 4cqw;
}

#how-work .scr-steps {
  display: flex;
  align-items: center;
  gap: .8cqw;
}

#how-work .scr-steps span {
  width: 5cqw;
  height: .5cqw;
  border-radius: 1cqw;
  background: var(--line);
}

#how-work .scr-steps .is-on {
  background: var(--black);
}

#how-work .scr-steps small {
  margin-left: .6cqw;
  color: var(--muted);
  font-size: 1.2cqw;
}

#how-work .scr-title {
  font: 600 2.6cqw/1.2 var(--sans);
}

#how-work .scr-hint {
  max-width: 60cqw;
  color: var(--muted);
  font-size: 1.35cqw;
  line-height: 1.4;
}

#how-work .scr-field {
  display: grid;
  gap: .6cqw;
  min-width: 0;
}

#how-work .scr-field > span {
  font-size: 1.3cqw;
  font-weight: 600;
}

#how-work .scr-field > i {
  display: block;
  padding: 1cqw 1.4cqw;
  border: 1px solid var(--line);
  border-radius: 1.2cqw;
  background: var(--white);
  font-size: 1.35cqw;
  font-style: normal;
  color: var(--body);
}

#how-work .scr-row {
  display: flex;
  align-items: flex-end;
  gap: 1.2cqw;
}

#how-work .scr-row .scr-field {
  flex: 1;
}

#how-work .scr-area > i {
  display: grid;
  gap: .3cqw;
  min-height: 7.4cqw;
  border-color: var(--yellow);
  box-shadow: 0 0 0 .35cqw var(--yellow-soft);
}

#how-work .scr-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .8cqw;
}

#how-work .scr-chip {
  padding: .6cqw 1.4cqw;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--white);
  font-size: 1.3cqw;
}

#how-work .scr-btn,
#how-work .scr-btn-ghost {
  display: inline-grid;
  place-items: center;
  align-self: flex-start;
  height: 4cqw;
  padding: 0 3cqw;
  border-radius: 99px;
  background: var(--yellow);
  font-size: 1.4cqw;
  font-weight: 500;
}

#how-work .scr-btn-ghost {
  height: 3.9cqw;
  border: 1px solid var(--yellow);
  background: var(--white);
  white-space: nowrap;
}

/* Печать строк: каждая строка «проявляется» слева направо. */

#how-work .scr-type {
  display: block;
  overflow: hidden;
  width: 0;
  font-style: normal;
  white-space: nowrap;
}

#how-work .scr-type-1 {
  animation: scr-type-1 10s steps(36) infinite;
}

#how-work .scr-type-2 {
  animation: scr-type-2 10s steps(36) infinite;
}

#how-work .scr-type-3 {
  animation: scr-type-3 10s steps(36) infinite;
}

@keyframes scr-type-1 {
  0%, 4% { width: 0; }
  18%, 96% { width: 100%; }
  100% { width: 0; }
}

@keyframes scr-type-2 {
  0%, 18% { width: 0; }
  32%, 96% { width: 100%; }
  100% { width: 0; }
}

@keyframes scr-type-3 {
  0%, 32% { width: 0; }
  46%, 96% { width: 100%; }
  100% { width: 0; }
}

#how-work .scr-chip-1 {
  animation: scr-chip-1 10s infinite;
}

#how-work .scr-chip-2 {
  animation: scr-chip-2 10s infinite;
}

#how-work .scr-chip-3 {
  animation: scr-chip-3 10s infinite;
}

#how-work .scr-chip-4 {
  animation: scr-chip-4 10s infinite;
}

@keyframes scr-chip-1 {
  0%, 52% { background: var(--white); border-color: var(--line); }
  55%, 96% { background: var(--yellow); border-color: var(--yellow); }
}

@keyframes scr-chip-2 {
  0%, 57% { background: var(--white); border-color: var(--line); }
  60%, 96% { background: var(--yellow); border-color: var(--yellow); }
}

@keyframes scr-chip-3 {
  0%, 62% { background: var(--white); border-color: var(--line); }
  65%, 96% { background: var(--yellow); border-color: var(--yellow); }
}

@keyframes scr-chip-4 {
  0%, 67% { background: var(--white); border-color: var(--line); }
  70%, 96% { background: var(--yellow); border-color: var(--yellow); }
}

#how-work .scr-icp .scr-btn {
  animation: scr-press 10s infinite;
}

@keyframes scr-press {
  0%, 76% { transform: none; box-shadow: none; }
  80% { transform: scale(.96); box-shadow: 0 0 0 .6cqw var(--yellow-soft); }
  84%, 100% { transform: none; box-shadow: none; }
}

/* 2. Лента: новые сигналы появляются по очереди сверху вниз. */

#how-work .scr-feed .feed-row {
  transition: none;
}

#how-work .scr-new-1 {
  animation: scr-new-1 10s infinite;
}

#how-work .scr-new-2 {
  animation: scr-new-2 10s infinite;
}

#how-work .scr-new-3 {
  animation: scr-new-3 10s infinite;
}

#how-work .scr-new-4 {
  animation: scr-new-4 10s infinite;
}

#how-work .scr-new-5 {
  animation: scr-new-5 10s infinite;
}

#how-work .scr-new-6 {
  animation: scr-new-6 10s infinite;
}

@keyframes scr-new-1 {
  0%, 4% { opacity: 0; transform: translateY(-1.5cqw); background: var(--yellow-soft); }
  9% { opacity: 1; transform: none; background: var(--yellow-soft); }
  26%, 96% { opacity: 1; background: var(--white); }
  100% { opacity: 0; }
}

@keyframes scr-new-2 {
  0%, 14% { opacity: 0; transform: translateY(-1.5cqw); background: var(--yellow-soft); }
  19% { opacity: 1; transform: none; background: var(--yellow-soft); }
  36%, 96% { opacity: 1; background: var(--white); }
  100% { opacity: 0; }
}

@keyframes scr-new-3 {
  0%, 24% { opacity: 0; transform: translateY(-1.5cqw); background: var(--yellow-soft); }
  29% { opacity: 1; transform: none; background: var(--yellow-soft); }
  46%, 96% { opacity: 1; background: var(--white); }
  100% { opacity: 0; }
}

@keyframes scr-new-4 {
  0%, 34% { opacity: 0; transform: translateY(-1.5cqw); background: var(--yellow-soft); }
  39% { opacity: 1; transform: none; background: var(--yellow-soft); }
  56%, 96% { opacity: 1; background: var(--white); }
  100% { opacity: 0; }
}

@keyframes scr-new-5 {
  0%, 44% { opacity: 0; transform: translateY(-1.5cqw); background: var(--yellow-soft); }
  49% { opacity: 1; transform: none; background: var(--yellow-soft); }
  66%, 96% { opacity: 1; background: var(--white); }
  100% { opacity: 0; }
}

@keyframes scr-new-6 {
  0%, 54% { opacity: 0; transform: translateY(-1.5cqw); background: var(--yellow-soft); }
  59% { opacity: 1; transform: none; background: var(--yellow-soft); }
  76%, 96% { opacity: 1; background: var(--white); }
  100% { opacity: 0; }
}

/* 3. Оффер: карточка сигнала слева, письмо печатается справа. */

#how-work .scr-offer-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 2cqw;
  align-items: start;
}

#how-work .scr-card,
#how-work .scr-mail {
  display: grid;
  gap: 1.1cqw;
  padding: 2cqw;
  border-radius: 1.8cqw;
  background: var(--white);
}

#how-work .scr-card-top {
  display: flex;
  align-items: center;
  gap: 1.2cqw;
}

#how-work .scr-card-top > span:nth-child(2) {
  display: grid;
  gap: .2cqw;
  min-width: 0;
}

#how-work .scr-card-top b {
  font-size: 1.5cqw;
  line-height: 1.25;
}

#how-work .scr-card small,
#how-work .scr-mail-to {
  color: var(--muted);
  font-size: 1.2cqw;
}

#how-work .scr-label {
  color: var(--muted);
  font-size: 1.15cqw;
  text-transform: uppercase;
  letter-spacing: .06em;
}

#how-work .scr-card p {
  font: 400 1.45cqw/1.45 var(--sans);
}

#how-work .scr-person {
  display: flex;
  align-items: center;
  gap: 1cqw;
}

#how-work .scr-person > span:last-child {
  display: grid;
  gap: .2cqw;
}

#how-work .scr-person b {
  font-size: 1.4cqw;
}

#how-work .scr-avatar {
  display: grid;
  place-items: center;
  width: 4cqw;
  height: 4cqw;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  font-size: 1.25cqw;
  font-weight: 600;
}

#how-work .scr-mail-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#how-work .scr-mail-top b {
  font: 600 1.8cqw/1.2 var(--sans);
}

#how-work .scr-ai {
  padding: .4cqw 1cqw;
  border-radius: 99px;
  background: var(--yellow);
  font-size: 1.15cqw;
  font-weight: 500;
}

#how-work .scr-mail-body {
  display: grid;
  gap: .35cqw;
  min-height: 8cqw;
  padding: 1.3cqw 1.4cqw;
  border: 1px solid var(--line);
  border-radius: 1.2cqw;
  font-size: 1.4cqw;
  line-height: 1.4;
}

#how-work .scr-mail-foot {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  min-height: 4cqw;
}

#how-work .scr-offer .scr-btn {
  animation: scr-press-send 10s infinite;
}

@keyframes scr-press-send {
  0%, 56% { transform: none; box-shadow: none; }
  60% { transform: scale(.96); box-shadow: 0 0 0 .6cqw var(--yellow-soft); }
  64%, 100% { transform: none; box-shadow: none; }
}

#how-work .scr-sent {
  padding: .7cqw 1.4cqw;
  border-radius: 99px;
  background: var(--black);
  color: var(--white);
  font-size: 1.2cqw;
  white-space: nowrap;
  opacity: 0;
  animation: scr-sent 10s infinite;
}

#how-work .scr-sent::before {
  content: "✓ ";
  color: var(--yellow);
}

@keyframes scr-sent {
  0%, 62% { opacity: 0; transform: translateY(.6cqw); }
  66%, 94% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

#how-work .scr-offer {
  aspect-ratio: 16 / 7.6;
}

#how-work .scr-offer .scr-offer-grid {
  align-content: center;
  height: 100%;
}

@media (max-width: 640px) {
  #how-work .b-how-steps {
    gap: 20px;
  }

  #how-work .b-how-steps::after {
    top: -24px;
    width: 900px;
    opacity: .7;
  }

  #how-work .b-how-tab {
    flex-direction: row;
    gap: 12px;
    cursor: default;
  }

  #how-work .b-how-tab[aria-expanded] .b-num {
    background: var(--yellow);
    color: var(--black);
  }

  #how-work .b-how-tab:hover .b-num {
    box-shadow: none;
  }

  #how-work .b-how-panel {
    margin-bottom: 12px;
    gap: 16px;
  }

  #how-work .b-how-screen {
    padding: 8px;
    border-radius: 16px;
  }

  #how-work .b-how-desc {
    font-size: 16px;
  }

  #how-work .scr {
    border-radius: 10px;
    aspect-ratio: 4 / 3.4;
  }

  #how-work .scr .feed-side {
    display: none;
  }

  #how-work .scr-form {
    padding: 3cqw 4cqw;
    gap: 2cqw;
  }

  #how-work .scr-title {
    font-size: 4cqw;
  }

  #how-work .scr-hint,
  #how-work .scr-field > span,
  #how-work .scr-field > i,
  #how-work .scr-chip {
    font-size: 2.4cqw;
  }

  #how-work .scr-row {
    display: none;
  }

  #how-work .scr-offer-grid {
    grid-template-columns: 1fr;
  }

  #how-work .scr-offer .scr-card {
    display: none;
  }

  #how-work .scr-mail {
    font-size: 2.6cqw;
  }

  #how-work .scr-mail-body,
  #how-work .scr-card p {
    font-size: 2.6cqw;
  }

  #how-work .scr-mail-top b {
    font-size: 3.4cqw;
  }

  #how-work .scr-ai,
  #how-work .scr-mail-to,
  #how-work .scr-sent {
    font-size: 2.2cqw;
  }

  #how-work .scr-btn {
    height: 7cqw;
    font-size: 2.6cqw;
  }

  #how-work .scr-feed .feed-row:nth-child(n+5) {
    display: none;
  }

  #how-work .scr-offer {
    aspect-ratio: 4 / 3.2;
  }
}

@media (prefers-reduced-motion: reduce) {
  #how-work .scr-type {
    width: 100% !important;
    animation: none !important;
  }

  #how-work .scr-new,
  #how-work .scr-sent {
    opacity: 1 !important;
    animation: none !important;
  }
}

/* ==========================================================================
   44. БЛОК «КАК ИСПОЛЬЗОВАТЬ ИНТЕНТ» (#use, front-page.php)
   Плиточная сетка по референсу saleintent.ru. Без Swiper.
   ========================================================================== */

#use {
  --use-line: #e3e6ee;
  --use-light: var(--color-lgray);
  --use-muted: var(--color-gray);
  --use-black: var(--color-text);
  --use-white: var(--color-white);
  --use-yellow: var(--color-accent);
  --use-yellow-soft: #fdf0c4;
  --use-body: #45494e;
}

#use .b-use-head {
  max-width: 860px;
  margin: 0 auto 40px;
  text-align: center;
}

#use .b-use-head .h2 {
  margin-bottom: 0;
}

#use .b-use-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

#use .b-use-tile {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  padding: 28px;
  border-radius: var(--radius-md);
  background: #f6f7fa;
}

#use .b-use-tile h3 {
  font-size: clamp(20px, 1.7vw, 25px);
  font-weight: var(--semibold);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

#use .b-use-tile p {
  color: var(--use-muted);
  font-size: 16px;
  line-height: 1.4;
}

#use .b-use-tile .b-num {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-xs);
  background: var(--use-yellow);
  color: var(--use-black);
  font: 600 21px/1.2 var(--font-family-base);
}

#use .b-use-tile-wide {
  grid-column: span 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  background: #f8f4ec;
}

#use .b-use-copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#use .b-use-media {
  display: grid;
  justify-items: center;
}

#use .b-use-tile-soft {
  background: var(--use-yellow-soft);
}

#use .b-use-tile-soft p {
  color: var(--use-body);
}

#use .b-use-tile-dark {
  background: var(--use-black);
  color: var(--use-white);
}

#use .b-use-tile-dark h3 {
  color: var(--use-white);
}

#use .b-use-tile-dark p {
  color: var(--use-light);
}

/* Мини-экран в широкой плитке */
#use .u-card {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 440px;
  padding: 20px;
  border-radius: var(--radius-md);
  background: var(--use-white);
}

#use .u-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

#use .u-head b {
  font: 600 18px/1.2 var(--font-family-base);
}

#use .u-head > span {
  color: var(--use-muted);
  font-size: 13px;
  font-weight: var(--light);
  white-space: nowrap;
}

#use .u-list {
  display: grid;
  gap: 8px;
}

#use .u-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 16px;
  background: #f6f7fa;
}

#use .u-ic {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--use-yellow);
  color: var(--use-black);
  font: 600 16px/1 var(--font-family-base);
}

#use .u-txt {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

#use .u-txt b {
  overflow: hidden;
  font-size: 14px;
  font-weight: var(--medium);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#use .u-txt span {
  overflow: hidden;
  color: var(--use-muted);
  font-size: 13px;
  font-weight: var(--light);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#use .u-score {
  flex: none;
  font: 600 18px/1 var(--font-family-base);
}

#use .u-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--use-muted);
  font-size: 13px;
  font-weight: var(--light);
}

#use .u-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--use-yellow);
}

@media (max-width: 960px) {
  #use .b-use-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #use .b-use-tile-wide {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  #use .b-use-head {
    margin-bottom: 24px;
  }

  #use .b-use-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  #use .b-use-tile,
  #use .b-use-tile-wide {
    grid-column: auto;
    padding: 20px;
    border-radius: 22px;
  }

  #use .b-use-tile .b-num {
    width: 40px;
    height: 40px;
    font-size: 19px;
  }

  #use .u-card {
    padding: 16px;
    border-radius: var(--radius-sm);
  }
}

/* ==========================================================================
   45. СТРАНИЦА 404
   ========================================================================== */

.error-404 {
  padding-top: 76px;
  padding-bottom: 76px;
  text-align: center;
}

.error-404-inner {
  max-width: 760px;
  margin: 0 auto;
}

.error-404-code {
  margin-bottom: 18px;
  color: var(--color-accent);
  font-size: clamp(112px, 18vw, 220px);
  font-weight: var(--bold);
  line-height: 0.78;
  letter-spacing: -0.06em;
}

.error-404-title {
  margin-bottom: 18px;
}

.error-404-text {
  max-width: 560px;
  margin: 0 auto 30px;
}

.error-404-actions {
  margin-bottom: 30px;
}

.error-404-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 28px;
  max-width: 640px;
  margin: 0 auto;
  padding-top: 26px;
  border-top: 1px solid var(--color-lgray);
}

.error-404-links a {
  color: var(--color-gray);
  font-size: 15px;
  font-weight: var(--medium);
  line-height: 140%;
  transition: color 0.2s ease-in-out;
}

.error-404-links a:hover {
  color: var(--color-accent);
}

@media (max-width: 768px) {
  .error-404 {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .error-404-code {
    margin-bottom: 12px;
    font-size: clamp(92px, 26vw, 140px);
  }

  .error-404-text {
    margin-bottom: 24px;
  }

  .error-404-actions {
    margin-bottom: 24px;
  }

  .error-404-links {
    gap: 10px 20px;
    padding-top: 20px;
  }

  .error-404-links a {
    font-size: 14px;
  }
}

/* ==========================================================================
   46. ГЛАВНАЯ: HERO (#hero, front-page.php)
   Живая лента сигналов в ноутбуке + карточки-показатели вокруг.
   ========================================================================== */

.hero-bg:has(#hero) {
  background-image: none;
}

#hero {
  --line: #e3e6ee;
  --light: var(--color-lgray);
  --muted: var(--color-gray);
  --black: var(--color-text);
  --white: var(--color-white);
  --yellow: var(--color-accent);
  --yellow-soft: #fdf0c4;
  --body: #45494e;
  --ink: var(--color-text);
  --sans: var(--font-family-base);

  position: relative;
  z-index: 0;
  overflow: hidden;
  padding: 72px 20px 60px;
  text-align: center;
}

/* Фон по макету: серые волны 1372×865 от 84px сверху */
#hero::before {
  content: "";
  position: absolute;
  top: 84px;
  left: 50%;
  z-index: -1;
  width: min(1372px, 100%);
  aspect-ratio: 1372 / 865;
  transform: translateX(-50%);
  background: url("images/landing/hero-bg.jpg") center / contain no-repeat;
  pointer-events: none;
}

#hero .hero-copy {
  max-width: 1100px;
  margin-inline: auto;
}

#hero .hero-title {
  max-width: 1100px;
  margin: 0 auto;
  font-size: clamp(40px, 5.2vw, 71px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

#hero .hero-title .accent-text {
  display: inline-block;
  line-height: 1.1;
}

#hero .hero-text {
  max-width: 640px;
  margin: 24px auto 0;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.4;
  text-wrap: balance;
}

#hero .hero-actions {
  margin: 40px 0 0;
}

@media (min-width: 641px) {
  #hero .hero-actions {
    flex-direction: row;
  }

  #hero .hero-actions .btn-xl {
    max-width: 285px;
    height: 62px;
    font-size: 18px;
  }
}

@media (min-width: 641px) and (max-width: 768px) {
  #cta.cta-block {
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 40px;
  }
}

#hero .hero-stage {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 72px auto 0;
}

#hero .hero-laptop {
  position: relative;
  width: min(996px, 100%);
  margin-inline: auto;
  aspect-ratio: 996 / 624;
}

#hero .hero-screen {
  position: absolute;
  left: 7.43%;
  top: 1.12%;
  width: 85.44%;
  height: 82.6%;
  overflow: hidden;
  border-radius: 6px 6px 0 0;
  background: var(--light);
  container-type: inline-size;
}

/* Лента в ноутбуке слегка размыта: внимание — на карточках сигналов вокруг */
#hero .hero-screen .feed {
  filter: blur(1.6px);
}

/* Лента сигналов на экране ноутбука: размеры в долях ширины экрана (cqw) */
#hero .feed {
  display: flex;
  height: 100%;
  background: var(--light);
  color: var(--ink);
  text-align: left;
}

#hero .feed-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2cqw;
  width: 7.5cqw;
  padding: 2cqw 0;
  background: var(--white);
  border-right: 1px solid var(--line);
}

#hero .feed-side img {
  width: 3.4cqw;
  height: auto;
  object-fit: cover;
  object-position: left;
  aspect-ratio: 1;
}

#hero .feed-side i {
  width: 2.6cqw;
  height: 2.6cqw;
  border-radius: 0.8cqw;
  background: var(--light);
}

#hero .feed-side i.is-on {
  background: var(--yellow);
}

#hero .feed-main {
  flex: 1;
  min-width: 0;
  padding: 2.4cqw 2.8cqw;
}

#hero .feed-top {
  display: flex;
  align-items: baseline;
  gap: 1.2cqw;
  font-size: 1.5cqw;
}

#hero .feed-top b {
  font: 600 2.1cqw/1.2 var(--sans);
}

#hero .feed-top span {
  color: var(--muted);
}

#hero .feed-top .feed-count {
  margin-left: auto;
}

#hero .feed-top mark {
  padding: 0.2cqw 0.8cqw;
  border-radius: 99px;
  background: var(--yellow);
  color: var(--ink);
}

#hero .feed-tabs {
  display: flex;
  gap: 0.8cqw;
  margin: 1.6cqw 0 1.8cqw;
  font-size: 1.35cqw;
}

#hero .feed-tabs span {
  padding: 0.55cqw 1.4cqw;
  border-radius: 99px;
  background: var(--white);
  color: var(--body);
}

#hero .feed-tabs .is-on {
  background: var(--black);
  color: var(--white);
}

#hero .feed-list {
  display: grid;
  gap: 1cqw;
  margin: 0;
  padding: 0;
  list-style: none;
}

#hero .feed-row {
  display: flex;
  align-items: center;
  gap: 1.6cqw;
  padding: 1.25cqw 1.6cqw;
  border-radius: 1.6cqw;
  background: var(--white);
}

#hero .feed-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 4.4cqw;
  height: 4.4cqw;
  border-radius: 1.3cqw;
}

#hero .feed-ic img {
  width: 2.2cqw;
  height: 2.2cqw;
}

#hero .feed-ic-y {
  background: var(--yellow);
}

#hero .feed-ic-l {
  background: var(--light);
}

#hero .feed-ic-d {
  background: var(--black);
}

#hero .feed-text {
  display: grid;
  gap: 0.25cqw;
  min-width: 0;
}

#hero .feed-text b {
  font-size: 1.6cqw;
  font-weight: 600;
  line-height: 1.25;
}

#hero .feed-text span,
#hero .feed-text small {
  overflow: hidden;
  color: var(--muted);
  font-size: 1.3cqw;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#hero .feed-text em {
  color: var(--ink);
  font-style: normal;
  font-weight: 500;
}

#hero .feed-text small {
  color: #a5abb2;
  font-size: 1.15cqw;
}

#hero .feed-score {
  display: grid;
  place-items: center;
  flex: none;
  width: 4.2cqw;
  height: 4.2cqw;
  margin-left: auto;
  border: 1px solid var(--yellow);
  border-radius: 1.3cqw;
  font: 400 1.75cqw/1 var(--sans);
}

#hero .hero-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#hero .hero-signal {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 0 12px rgb(13 13 13 / 12%);
  text-align: left;
}

#hero .hero-signal-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--yellow);
}

#hero .hero-signal-ic img {
  width: 20px;
  height: 20px;
}

#hero .hero-signal-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

#hero .hero-signal-text strong {
  font: 400 14px/1.2 var(--sans);
  white-space: nowrap;
}

#hero .hero-signal-text span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}

#hero .hero-signal-text b {
  font-weight: 500;
}

#hero .hero-signal-score {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  margin-left: 48px;
  border: 1px solid var(--yellow);
  border-radius: 14px;
  font: 400 16px/1 var(--sans);
}

/* Карточки-показатели вокруг ноутбука */
#hero .hero-kpi {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 14px;
  padding: 16px 20px;
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 0 12px rgb(13 13 13 / 12%);
  text-align: left;
}

#hero .hero-kpi small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

#hero .hero-kpi-sales {
  left: 8.8%;
  top: 29.6%;
  width: 300px;
}

#hero .hero-kpi-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

#hero .hero-kpi-head strong {
  font: 600 18px/1.2 var(--sans);
}

#hero .hero-kpi-head > b {
  font: 600 18px/1.2 var(--sans);
  white-space: nowrap;
}

#hero .hero-kpi-head i {
  color: var(--yellow);
  font-style: normal;
}

#hero .hero-kpi-bar {
  display: block;
  height: 4px;
  border-radius: 4px;
  background: var(--light);
}

#hero .hero-kpi-bar span {
  display: block;
  width: 78%;
  height: 100%;
  border-radius: 4px;
  background: var(--yellow);
}

#hero .hero-kpi-revenue {
  left: 65.3%;
  top: 66.5%;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 300px;
}

#hero .hero-kpi-revenue b {
  font: 600 22px/1.2 var(--sans);
  white-space: nowrap;
}

#hero .hero-kpi-chart {
  flex: 1;
  min-width: 0;
  height: auto;
}

#hero .hero-signal-1 {
  left: 0;
  top: 14%;
}

#hero .hero-signal-2 {
  right: 3%;
  top: 30%;
}

#hero .hero-signal-3 {
  right: 0;
  top: 45%;
}

#hero .hero-signal-4 {
  left: 2%;
  top: 64%;
}

@media (max-width: 1100px) {
  #hero .hero-signal-2,
  #hero .hero-signal-3 {
    right: 0;
  }
}

@media (max-width: 960px) {
  #hero .hero-signal {
    transform: scale(0.82);
    transform-origin: left center;
  }

  #hero .hero-signal-2,
  #hero .hero-signal-3 {
    transform-origin: right center;
  }

  #hero .hero-signal-score {
    margin-left: 20px;
  }

  #hero .hero-kpi {
    display: none;
  }
}

@media (max-width: 640px) {
  #hero {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  #hero .hero-title br {
    display: none;
  }

  #hero .hero-text {
    font-size: 17px;
  }

  #hero .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 28px;
  }

  #hero .hero-actions .btn-xl {
    max-width: none;
    height: 56px;
  }

  #hero .hero-stage {
    margin-top: 40px;
  }

  #hero .hero-signal {
    position: static;
    transform: none;
    margin-top: 10px;
  }

  #hero .hero-signal-3,
  #hero .hero-signal-4 {
    display: none;
  }

  #hero .hero-signal-score {
    margin-left: auto;
  }

  #hero .hero-signal-text strong,
  #hero .hero-signal-text span {
    white-space: normal;
  }
}

/* ==========================================================================
   47. ГЛАВНАЯ: СКОРИНГ СИГНАЛА (#signal, front-page.php)
   ========================================================================== */

#signal {
  --line: #e3e6ee;
  --light: var(--color-lgray);
  --muted: var(--color-gray);
  --black: var(--color-text);
  --white: var(--color-white);
  --yellow: var(--color-accent);
  --yellow-soft: #fdf0c4;
  --body: #45494e;
  --ink: var(--color-text);
  --sans: var(--font-family-base);

  position: relative;
  z-index: 0;
  overflow: hidden;
}

#signal .b-score-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: center;
}

#signal .b-score-grid::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: calc(50% - 260px);
  width: 860px;
  height: 541px;
  max-width: calc(50% + 260px);
  background: url("images/landing/score/wave.webp") left top / 860px 541px no-repeat;
  pointer-events: none;
}

#signal .b-score-stage {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 541px;
  padding: 30px;
  border-radius: var(--radius-lg);
  background: var(--light);
}

#signal .b-score-copy {
  grid-column: 2;
  grid-row: 1;
}

#signal .b-score-copy .h2 {
  margin-bottom: 0;
  font-size: clamp(30px, 3.4vw, 49px);
}

#signal .b-score-lead {
  margin-top: 16px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.4;
}

#signal .b-checks {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

#signal .b-checks li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 16px;
  padding: 0 0 15px;
  border-bottom: 1px solid var(--light);
  font-size: 16px;
  font-weight: var(--light);
  line-height: 1.4;
}

#signal .b-checks li:last-child {
  margin-bottom: 0;
}

#signal .b-checks img {
  flex: none;
  margin-top: 1px;
}

#signal .b-tile {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-xs);
  background: var(--yellow);
  color: var(--black);
  font: 600 22px/1 var(--sans);
}

#signal .b-score-card {
  width: 386px;
  max-width: 100%;
  padding: 20px;
  border-radius: var(--radius-md);
  background: var(--white);
}

#signal .b-score-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--light);
}

#signal .b-score-name {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 4px;
}

#signal .b-score-name strong {
  font: 600 20px/1.2 var(--sans);
}

#signal .b-score-name span {
  color: var(--muted);
  font-size: 16px;
  font-weight: var(--light);
  line-height: 1.4;
}

#signal .b-score-total {
  align-self: flex-start;
  margin-top: 8px;
  white-space: nowrap;
}

#signal .b-score-total b {
  font: 600 25px/1.2 var(--sans);
}

#signal .b-score-total span {
  color: var(--muted);
  font-size: 14px;
  font-weight: var(--light);
}

#signal .b-bars {
  display: grid;
  gap: 16px;
  padding: 20px 0;
}

#signal .b-bar-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

#signal .b-bar-top span {
  font: 400 14px/1.2 var(--sans);
}

#signal .b-bar-top b {
  color: var(--muted);
  font-weight: var(--light);
  line-height: 1.2;
}

#signal .b-bar-track {
  position: relative;
  height: 4px;
  margin-top: 11px;
  border-radius: 40px;
  background: var(--light);
  overflow: hidden;
}

#signal .b-bar-track i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 40px;
  background: var(--yellow);
}

#signal .b-w75 {
  width: 75%;
}

#signal .b-w49 {
  width: 49%;
}

#signal .b-w32 {
  width: 32%;
}

#signal .b-w17 {
  width: 17%;
}

#signal .b-note {
  display: grid;
  gap: 8px;
  padding: 12px 16px;
  border: 1px solid var(--light);
  border-radius: var(--radius-sm);
  background: var(--white);
}

#signal .b-note + .b-note {
  margin-top: 12px;
}

#signal .b-note-label {
  color: var(--black);
  font: 400 16px/1.2 var(--sans);
}

#signal .b-note p {
  color: var(--muted);
  font-size: 14px;
  font-weight: var(--light);
  line-height: 1.4;
}

#signal .b-proof-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#signal .b-proof-list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: 60px;
  background: var(--light);
  font-size: 13px;
  line-height: 1.3;
}

#signal .b-proof-list li::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--yellow) url("images/landing/pricing/checkbox-check.svg") center / 9px 9px no-repeat;
}

#signal .b-score-action {
  width: 100%;
  height: 48px;
  margin-top: 16px;
  font-size: 14px;
}

#signal .b-score-sample {
  margin-top: 12px;
  color: #5f666e;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 960px) {
  #signal .b-score-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  #signal .b-score-copy,
  #signal .b-score-stage {
    grid-column: 1;
    grid-row: auto;
  }

  #signal .b-score-stage {
    min-height: 0;
  }

  #signal .b-score-grid::before {
    display: none;
  }
}

@media (max-width: 640px) {
  #signal .b-score-lead {
    font-size: 16px;
  }

  #signal .b-score-stage {
    padding: 20px;
    border-radius: var(--radius-md);
  }

  #signal .b-score-card {
    padding: 16px;
    border-radius: var(--radius-sm);
  }

  #signal .b-checks {
    margin-top: 24px;
  }
}

/* ==========================================================================
   48. ГЛАВНАЯ: РОЛИ (#roles) И ИНТЕГРАЦИИ (#integrations)
   ========================================================================== */

#roles,
#integrations {
  --line: #e3e6ee;
  --light: var(--color-lgray);
  --muted: var(--color-gray);
  --black: var(--color-text);
  --white: var(--color-white);
  --yellow: var(--color-accent);
  --yellow-soft: #fdf0c4;
  --body: #45494e;
  --ink: var(--color-text);
  --sans: var(--font-family-base);
}

#roles .rs-head,
#integrations .rs-head {
  max-width: 996px;
  margin: 0 auto 50px;
  text-align: center;
}

#roles .rs-head .h2,
#integrations .rs-head .h2 {
  margin-bottom: 0;
  font-size: clamp(28px, 3.4vw, 49px);
}

#roles .rs-lead,
#integrations .rs-lead {
  max-width: 880px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.4;
}

#roles .rs-roles-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

#roles .rs-role {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 385px;
  padding: 20px 20px 9px;
  background: var(--white);
  border: 1px solid var(--light);
  border-radius: var(--radius-md);
}

#roles .rs-role-ic,
#integrations .rs-channel-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-xs);
  background: var(--yellow);
}

#roles .rs-role-ic img {
  display: block;
  width: 20px;
  height: 20px;
}

/* Роль и её задача: задача — главное в карточке */
#roles .rs-role h3 {
  margin-top: 20px;
  color: var(--muted);
  font: 500 15px/1.2 var(--sans);
  letter-spacing: 0;
}

#roles .rs-role .rs-role-task {
  margin: 10px 0 20px;
  color: var(--black);
  font-size: 21px;
  font-weight: var(--semibold);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

#roles .rs-role-photo {
  display: block;
  width: calc(100% + 24px);
  max-width: none;
  height: 191px;
  margin: auto -12px 0;
  border-radius: var(--radius-md);
  object-fit: cover;
}

/* «Кому подходит» — выделенная плашка: светлый фон, знак Интента, пункты-таблетки */
#roles .rs-fit {
  position: relative;
  margin: 40px auto 0;
  padding: 48px 48px 44px;
  border-radius: 32px;
  background: var(--light);
  text-align: center;
}

#roles .rs-fit::before {
  content: "";
  display: block;
  width: 38px;
  height: 38px;
  margin: 0 auto 16px;
  background: url("images/landing/logo.svg") left center / auto 100% no-repeat;
}

#roles .rs-fit h3 {
  font-size: 30px;
  font-weight: var(--semibold);
  line-height: 1.2;
  letter-spacing: 0;
}

#roles .rs-fit p {
  max-width: 640px;
  margin: 12px auto 0;
  color: var(--body);
  font-size: 17px;
  font-weight: var(--regular);
  line-height: 1.4;
}

#roles .rs-fit-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

#roles .rs-fit-list li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--white);
  font-size: 16px;
  font-weight: var(--medium);
  line-height: 1.4;
}

#roles .rs-fit-list li::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background: url("images/landing/roles/ic-check.svg") center / 20px 20px no-repeat;
}

#integrations .rs-channels {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

#integrations .rs-channel {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  grid-template-areas: "ic name tag" "text text text";
  align-items: center;
  column-gap: 12px;
  row-gap: 20px;
  align-content: start;
  min-height: 160px;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--light);
  border-radius: var(--radius-md);
}

#integrations .rs-channel-wide {
  grid-column: span 2;
}

#integrations .rs-channel-ic {
  grid-area: ic;
  background: var(--light);
}

#integrations .rs-channel-ic img {
  display: block;
  width: 20px;
  height: 20px;
}

#integrations .rs-channel-ic-yellow {
  background: var(--yellow);
}

#integrations .rs-channel strong {
  grid-area: name;
  min-width: 0;
  font: 600 20px/1.2 var(--sans);
}

#integrations .rs-channel-tag {
  grid-area: tag;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--light);
  color: var(--black);
  font-size: 12px;
  font-weight: var(--medium);
  white-space: nowrap;
}

#integrations .rs-channel-tag.is-on {
  background: var(--yellow);
}

#integrations .rs-channel p {
  grid-area: text;
  align-self: start;
  color: var(--muted);
  font-size: 16px;
  font-weight: var(--light);
  line-height: 1.4;
}

#integrations .rs-channel-dark {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

#integrations .rs-channel-dark p {
  color: var(--white);
}

#integrations .rs-channel-soft {
  background: var(--light);
  border-color: var(--light);
}

#integrations .rs-channel-soft p {
  color: var(--black);
}

@media (max-width: 960px) {
  #roles .rs-roles-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #integrations .rs-channels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #integrations .rs-channel-tg {
    order: 1;
  }

  #integrations .rs-channel-mail {
    order: 2;
  }

  #integrations .rs-channel-bx,
  #integrations .rs-channel-amo,
  #integrations .rs-channel-api,
  #integrations .rs-channel-mcp {
    order: 3;
  }
}

@media (max-width: 640px) {
  #roles .rs-head,
  #integrations .rs-head {
    margin-bottom: 32px;
  }

  #roles .rs-head .h2,
  #integrations .rs-head .h2 {
    font-size: 28px;
  }

  #roles .rs-lead,
  #integrations .rs-lead {
    font-size: 14px;
    font-weight: var(--light);
  }

  #roles .rs-roles-grid,
  #integrations .rs-channels {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  #roles .rs-role {
    min-height: 0;
    padding: 16px;
  }

  #roles .rs-role h3 {
    font-size: 17px;
  }

  #roles .rs-role .rs-role-task {
    margin-bottom: 0;
    font-size: 18px;
  }

  #roles .rs-role-photo {
    display: none;
  }

  #roles .rs-fit {
    margin-top: 32px;
    padding: 32px 20px;
    border-radius: 24px;
    text-align: left;
  }

  #roles .rs-fit::before {
    margin-left: 0;
  }

  #roles .rs-fit h3 {
    font-size: 24px;
  }

  #roles .rs-fit p {
    margin: 12px 0 0;
    font-size: 15px;
  }

  #roles .rs-fit-list {
    align-items: stretch;
  }

  #roles .rs-fit-list li {
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
  }

  #integrations .rs-channel {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    grid-template-areas: "ic . tag" "name name name" "text text text";
    row-gap: 0;
    min-height: 0;
    padding: 16px;
  }

  #integrations .rs-channel-wide {
    grid-column: auto;
  }

  #integrations .rs-channel strong {
    margin-top: 20px;
    font-size: 17px;
  }

  #integrations .rs-channel p {
    margin-top: 8px;
    font-size: 14px;
  }
}

/* ==========================================================================
   49. ТАРИФЫ (.rs-pricing, template-parts/section-pricing.php)
   ========================================================================== */

.rs-pricing {
  --line: #e3e6ee;
  --light: var(--color-lgray);
  --muted: var(--color-gray);
  --black: var(--color-text);
  --white: var(--color-white);
  --yellow: var(--color-accent);
  --yellow-soft: #fdf0c4;
  --body: #45494e;
  --ink: var(--color-text);
  --sans: var(--font-family-base);
}

.rs-pricing .rs-head {
  max-width: 996px;
  margin: 0 auto 51px;
  text-align: center;
}

.rs-pricing .rs-head .h2 {
  margin-bottom: 0;
  font-size: clamp(30px, 3.4vw, 49px);
}

.rs-pricing .rs-lead {
  max-width: 820px;
  margin: 16px auto 0;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.4;
}

/* Enterprise — тёмная плашка во всю ширину с линиями на фоне */
.rs-plan-strip {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: 40px;
  padding: 30px;
  border-radius: var(--radius-lg);
  background: var(--black);
  color: var(--white);
  text-align: center;
}

.rs-plan-strip::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 1200px;
  height: 513px;
  transform: translate(-50%, -50%);
  background: url("images/landing/pricing/enterprise-lines.svg") center / 1200px 513px no-repeat;
  pointer-events: none;
}

.rs-plan-strip-head {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rs-plan-strip h3 {
  color: var(--white);
  font-family: var(--sans);
  font-style: normal;
  font-weight: var(--semibold);
  font-size: 39px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.rs-plan-strip-price {
  margin-top: 10px;
  font-family: var(--sans);
  font-style: normal;
  font-weight: var(--semibold);
  font-size: 20px;
  line-height: 1.2;
}

.rs-plan-strip-limit {
  margin-top: 10px;
  color: var(--yellow);
  font-size: 18px;
  font-weight: var(--semibold);
  line-height: 1.4;
}

.rs-plan-strip-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.rs-plan-strip-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}

.rs-plan-strip-list li::before {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background: url("images/landing/pricing/check-yellow.svg") center / 20px 20px no-repeat;
}

.rs-plan-strip-cta {
  display: inline-flex;
  width: 347px;
  max-width: 100%;
  min-height: 48px;
  height: 48px;
  margin: 30px auto 0;
  padding-left: 36px;
  padding-right: 36px;
  color: var(--color-text);
  font-size: 16px;
}

@media (max-width: 960px) {
  .rs-plan-strip {
    max-width: 560px;
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  .rs-pricing .rs-head {
    margin-bottom: 32px;
  }

  .rs-pricing .rs-head .h2 {
    font-size: 30px;
  }

  .rs-pricing .rs-lead {
    font-size: 16px;
  }

  .rs-plan-strip {
    margin-top: 20px;
    padding: 30px 16px;
    border-radius: 24px;
  }

  .rs-plan-strip h3 {
    font-size: 32px;
  }

  .rs-plan-strip-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    text-align: left;
  }

  .rs-plan-strip-list li {
    align-items: flex-start;
    font-size: 15px;
  }

  .rs-plan-strip-cta {
    width: 100%;
  }
}

/* Мобильные отступы контента как в макете (16px вместо 20px) */
@media (max-width: 640px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  #hero {
    padding-left: 16px;
    padding-right: 16px;
  }

  #cta.cta-block {
    padding: 40px 20px;
    border-radius: 24px;
  }

  .cta-title {
    font-size: 28px;
  }

  #cta .cta-cnt {
    max-width: none;
    padding: 0;
  }
}

/* ==========================================================================
   50. ШАПКА И ПОДВАЛ — вёрстка saleintent.ru
   ========================================================================== */

/* ---------- Шапка ---------- */

.site-header.site-header--main {
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-right: -20px;
  padding: 0;
  background-color: rgb(255 255 255 / 92%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

@media (max-width: 768px) {
  .site-header.site-header--main {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

.site-header--main .header-cnt {
  display: flex;
  align-items: center;
  gap: 32px;
  height: 78px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

.site-header--main .site-branding {
  flex: none;
  width: 148px;
  max-width: 148px;
}

.site-header--main .site-branding > svg {
  width: 148px;
  height: 38px;
}

.site-header--main .main-nav {
  display: flex;
  margin-inline: auto;
  font-size: 14px;
  font-weight: 500;
}

.site-header--main .main-nav .nav-header {
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 0;
  padding: 0;
}

.site-header--main .nav-item a {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.site-header--main .nav-item a:hover {
  color: var(--color-gray);
}

/* у донора активный пункт визуально не выделяется —
   оставляем разметку/aria для скролл-спая, но цвет как у остальных */
.site-header--main .nav-item.is-active a,
.site-header--main .nav-item.current-menu-item > a {
  color: var(--color-text);
}

.site-header--main .nav-item.is-active a:hover,
.site-header--main .nav-item.current-menu-item > a:hover {
  color: var(--color-gray);
}

.site-header--main .header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
}

.site-header--main .sign-up-btn {
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}

.site-header--main .header-actions .btn {
  min-height: 38px;
  height: 38px;
  padding: 0 28px;
  font-size: 13px;
}

.site-header--main .mob-btn {
  display: none;
}

/* ---------- Подвал ---------- */

.site-footer {
  max-width: 1240px;
  margin: 60px auto 24px;
  padding: 0 20px;
}

.site-footer .site-footer-cnt {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin: 0;
  padding: 28px 40px 22px;
  border-radius: 32px;
  background-color: var(--color-text);
  background-image: none;
  color: var(--color-white);
  font-size: 14px;
}

.site-footer .site-footer-cnt::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -169px;
  left: 0;
  width: 100%;
  min-width: 900px;
  aspect-ratio: 1200 / 513;
  background: url("images/landing/footer-waves.svg") center / 100% 100% no-repeat;
  pointer-events: none;
}

.site-footer .footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 0;
  border-bottom: 0;
}

.site-footer .footer-top .site-branding {
  order: 0;
  flex: none;
  width: 128px;
  max-width: 128px;
}

.site-footer .footer-top .site-branding > svg {
  width: 128px;
  height: 33px;
}

.site-footer .footer-nav {
  order: 0;
  display: flex;
  flex: 0 0 auto;
  width: fit-content;
}

.site-footer .footer-nav ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 32px;
  margin: 0;
  padding: 0;
}

.site-footer .footer-nav li {
  margin: 0;
}

.site-footer .footer-nav a,
.site-footer .footer-nav .nav-item a {
  color: #e3e6ea;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer .footer-nav a:hover,
.site-footer .footer-nav .nav-item a:hover {
  color: var(--color-accent);
}

.site-footer .btn-cnt {
  order: 0;
  display: flex;
  justify-content: flex-end;
  color: var(--color-text);
}

.site-footer .btn-cnt .btn {
  min-height: 38px;
  height: 38px;
  padding: 0 24px;
  font-size: 13px;
}

.site-footer .footer-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid #3a3d41;
  font-size: 12.5px;
}

.site-footer .footer-bottom li {
  margin: 0;
}

.site-footer .footer-bottom a,
.site-footer .footer-bottom .footer-link a {
  display: inline;
  color: #9aa0a7;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  text-decoration: underline;
}

.site-footer .footer-bottom a:hover,
.site-footer .footer-bottom .footer-link a:hover {
  color: var(--color-white);
}

@media (max-width: 1100px) {
  .site-header--main .main-nav .nav-header {
    gap: 24px;
  }

  .site-header--main .header-actions {
    gap: 16px;
  }
}

@media (max-width: 960px) {
  body.menu-open {
    overflow: hidden;
  }

  body.menu-open .overlay {
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: auto;
  }

  .site-header--main .header-cnt {
    gap: 16px;
    height: 64px;
  }

  .site-header--main .site-branding {
    width: 148px;
    max-width: 148px;
  }

  .site-header--main .mob-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border-radius: 12px;
    background-color: var(--color-lgray);
  }

  .site-header--main .mob-btn .burger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 0;
    background: none;
  }

  .site-header--main .mob-btn .burger span {
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background-color: var(--color-text);
    transition: transform 0.2s ease;
  }

  .site-header--main .mob-btn.is-open .burger span:first-child {
    transform: translateY(3px) rotate(45deg);
  }

  .site-header--main .mob-btn.is-open .burger span:last-child {
    transform: translateY(-3px) rotate(-45deg);
  }

  .site-header--main .mob-popup {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: block;
    padding: 8px 20px 20px;
    border-radius: 0;
    background-color: var(--color-white);
    box-shadow: 0 12px 24px rgb(0 0 0 / 8%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity 0.25s ease,
      transform 0.25s ease,
      visibility 0s linear 0.25s;
  }

  body.menu-open .site-header--main .mob-popup {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .site-header--main .main-nav {
    display: block;
    margin: 0;
  }

  .site-header--main .main-nav .nav-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 0;
  }

  .site-header--main .nav-item a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-lgray);
    font-size: 18px;
    line-height: 1.4;
  }

  .site-header--main .header-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px 0 4px;
  }

  .site-header--main .sign-up-btn {
    display: inline-flex;
    justify-content: flex-start;
    width: auto;
    height: auto;
    padding: 8px 0;
    border: 0;
    border-radius: 0;
    font-size: 16px;
    line-height: 1.4;
  }

  .site-header--main .header-actions .btn {
    width: 100%;
    min-height: 52px;
    height: 52px;
    padding: 0 24px;
    font-size: 16px;
  }
}

/* донор не затемняет страницу под открытым меню — оверлей оставляем
   только как прозрачную область для закрытия по клику */
body.menu-open .overlay {
  opacity: 0;
}

@media (max-width: 640px) {
  .site-header--main .header-cnt {
    padding: 0 16px;
  }

  .site-header--main .mob-popup {
    padding: 8px 16px 20px;
  }

  .site-footer {
    margin: 40px auto 24px;
    padding: 0 16px;
  }

  .site-footer .site-footer-cnt {
    padding: 24px 20px 18px;
    border-radius: 24px;
  }

  .site-footer .footer-top {
    gap: 24px;
  }

  .site-footer .footer-top .site-branding {
    width: 128px;
    max-width: 128px;
  }

  .site-footer .footer-nav {
    display: none;
  }

  .site-footer .btn-cnt {
    justify-content: flex-start;
  }
}

/* Author profiles and article metadata. */
.intent-article-meta { display:flex; align-items:center; justify-content:space-between; gap:20px 32px; margin-top:28px; padding:0 0 8px; }
.intent-author-byline { display:inline-flex; align-items:center; gap:16px; min-width:0; color:var(--color-text); border-radius:8px; }
.intent-author-avatar { display:block; flex:0 0 72px; width:72px; height:72px; object-fit:cover; border-radius:50%; background:var(--color-lgray); }
.intent-author-avatar--fallback { display:grid; place-items:center; font-size:28px; font-weight:600; }
.intent-author-details { display:grid; gap:4px; min-width:0; }
.intent-author-name { font-size:20px; font-weight:600; line-height:1.25; overflow-wrap:anywhere; }
.intent-author-role { color:#626a73; font-size:16px; line-height:1.4; }
.intent-author-byline:hover .intent-author-name { text-decoration:underline; text-underline-offset:4px; }
.intent-author-byline:focus-visible,.intent-author-social:focus-visible { outline:2px solid var(--color-text); outline-offset:5px; }
.intent-article-facts { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 20px; color:#626a73; font-size:14px; line-height:1.5; }
.intent-article-facts time,.intent-article-facts span { white-space:nowrap; }
.intent-author-page { padding-top:48px; }
.intent-author-hero { display:flex; align-items:flex-start; gap:36px; margin:12px 0 64px; padding:40px; border-radius:30px; background:var(--color-lgray); }
.intent-author-hero .intent-author-avatar { flex-basis:160px; width:160px; height:160px; }
.intent-author-intro { min-width:0; max-width:760px; }
.intent-author-eyebrow { color:#626a73; font-size:14px; margin-bottom:12px; }
.intent-author-hero .h1 { font-size:clamp(32px,4vw,56px); line-height:1.15; margin:0 0 10px; overflow-wrap:anywhere; }
.intent-author-position { font-size:20px; line-height:1.4; }
.intent-author-bio { font-size:18px; line-height:1.55; margin-top:20px; max-width:680px; }
.intent-author-social { display:inline-block; margin-top:20px; text-decoration:underline; text-underline-offset:4px; }
.intent-author-posts > .h2 { margin-bottom:28px; }
.intent-author-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.blog-grid.intent-author-grid > .blog-card { grid-column:auto; min-height:0; }
.blog-grid.intent-author-grid > .blog-card:first-child { grid-column:auto; min-height:0; }
.blog-grid.intent-author-grid > .blog-card:first-child .blog-card-media { position:relative; inset:auto; aspect-ratio:16/10; height:auto; }
.blog-grid.intent-author-grid > .blog-card:first-child .blog-card-media::after { content:none; }
.blog-grid.intent-author-grid > .blog-card:first-child .blog-card-body { position:static; padding:22px 24px 24px; }
.blog-grid.intent-author-grid > .blog-card:first-child .blog-card-title { color:var(--color-text); font-size:20px; line-height:1.3; max-width:none; }
.blog-grid.intent-author-grid > .blog-card:first-child .blog-card-text { color:var(--color-gray); margin-bottom:16px; max-width:none; }
.intent-author-page .pagination { margin-top:32px; }
.intent-author-page .nav-links { display:flex; flex-wrap:wrap; gap:12px; }
.intent-author-page .page-numbers { padding:8px 14px; border-radius:12px; background:var(--color-lgray); }
.intent-author-page .page-numbers.current { background:var(--color-accent); }
@media (max-width:960px) { .intent-author-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px) {
 .intent-article-meta { flex-direction:column; align-items:flex-start; gap:18px; margin-top:24px; }
 .intent-author-avatar { flex-basis:60px; width:60px; height:60px; }
 .intent-author-byline { gap:12px; }
 .intent-author-name { font-size:18px; }
 .intent-author-role { font-size:15px; }
 .intent-article-facts { justify-content:flex-start; gap:8px 20px; font-size:13px; }
 .intent-author-hero { flex-direction:column; gap:24px; padding:24px; margin-bottom:40px; border-radius:24px; }
 .intent-author-hero .intent-author-avatar { flex-basis:120px; width:120px; height:120px; }
 .intent-author-bio { font-size:17px; }
 .intent-author-position { font-size:18px; }
 .intent-author-grid { grid-template-columns:minmax(0,1fr); }
}