/* =========================================================
   ArticleMetricsDaily landing - styles
   Light, single-theme SaaS landing page.
   ========================================================= */

/* ---------- Font ----------
   Inter лежит на нашем сервере (assets/fonts), без Google Fonts: так быстрее
   и не нужно согласие посетителя на передачу данных третьей стороне.
   Лицензия SIL OFL 1.1. */
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations"), url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"), url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root{
  --bg:            #FFFFFF;
  --bg-alt:        #F6F6FA;
  --surface:       #FFFFFF;
  --surface-2:     #F1F1F7;
  --line:          #E5E5EC;
  --line-strong:   #C9C9D6;

  --text:          #111114;
  --text-dim:      #4A4D5C;
  --text-mute:     #656978;   /* не светлее: ниже 4.5:1 на светло-сером фоне */

  --accent:        #4F46E5;
  --accent-2:      #8B5CF6;
  --accent-deep:   #7C3AED;   /* конец градиента кнопок: белый текст на нём читается */
  --accent-soft:   color-mix(in srgb, var(--accent) 10%, transparent);
  --live:          #059669;
  --warn:          #B45309;
  --down:          #DC2626;

  /* tinted overlays - on a light theme these darken instead of lighten */
  --wash:          rgba(17,17,20,.03);
  --wash-2:        rgba(17,17,20,.06);

  --radius-sm:  8px;
  --radius:     14px;
  --radius-lg:  22px;

  --shadow:     0 20px 50px rgba(17,17,20,.10);
  --shadow-sm:  0 8px 22px rgba(17,17,20,.07);

  --wrap: 1200px;
  --header-h: 68px;

  /* Typography scale - keep every section on these sizes */
  --fs-h1:    clamp(2.4rem, 5vw, 3.9rem);   /* hero title only */
  --fs-h2:    clamp(1.8rem, 3.2vw, 2.5rem); /* every section heading */
  --fs-h3:    1.06rem;                       /* card titles */
  --fs-lead:  1.06rem;                       /* intro paragraph under a heading */
  --fs-body:  1rem;                          /* regular body text */
  --fs-small: .93rem;                        /* captions, card text, notes */

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ color-scheme:light; -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 20px); }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
::selection{ background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--text); }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; line-height:1.15; letter-spacing:var(--display-tracking, -.02em); font-weight:var(--display-weight, 650); font-family:var(--font-display, var(--font)); }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }
address{ font-style:normal; }
table{ border-collapse:collapse; width:100%; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  /* бесконечные пульсации и мигающий курсор просто останавливаем */
  .dot-live, .caret, .stories-marquee.is-looping .stories-track{ animation:none !important; }
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:#fff; padding:10px 16px; border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus{ left:0; }

:where(a,button,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;
}

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }

/* ---------- Icons (mask based) ---------- */
[data-ico]{
  display:inline-block; width:20px; height:20px; flex:none;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
}
[data-ico="pulse"]{ -webkit-mask-image:var(--i-pulse); mask-image:var(--i-pulse); }
[data-ico="trend"]{ -webkit-mask-image:var(--i-trend); mask-image:var(--i-trend); }
[data-ico="brain"]{ -webkit-mask-image:var(--i-brain); mask-image:var(--i-brain); }
[data-ico="clock"]{ -webkit-mask-image:var(--i-clock); mask-image:var(--i-clock); }
[data-ico="chat"]{ -webkit-mask-image:var(--i-chat); mask-image:var(--i-chat); }
[data-ico="call"]{ -webkit-mask-image:var(--i-call); mask-image:var(--i-call); }
[data-ico="screen"]{ -webkit-mask-image:var(--i-screen); mask-image:var(--i-screen); }
[data-ico="ads"]{ -webkit-mask-image:var(--i-ads); mask-image:var(--i-ads); }
[data-ico="target"]{ -webkit-mask-image:var(--i-target); mask-image:var(--i-target); }
[data-ico="history"]{ -webkit-mask-image:var(--i-history); mask-image:var(--i-history); }
[data-ico="chart"]{ -webkit-mask-image:var(--i-chart); mask-image:var(--i-chart); }
[data-ico="search"]{ -webkit-mask-image:var(--i-search); mask-image:var(--i-search); }
[data-ico="bell"]{ -webkit-mask-image:var(--i-bell); mask-image:var(--i-bell); }
[data-ico="globe"]{ -webkit-mask-image:var(--i-globe); mask-image:var(--i-globe); }
[data-ico="doc"]{ -webkit-mask-image:var(--i-doc); mask-image:var(--i-doc); }
[data-ico="spike"]{ -webkit-mask-image:var(--i-spike); mask-image:var(--i-spike); }
[data-ico="bulb"]{ -webkit-mask-image:var(--i-bulb); mask-image:var(--i-bulb); }

:root{
  --i-pulse:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l3 8 4-16 3 8h4'/%3E%3C/svg%3E");
  --i-telegram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M21.8 4.3 2.9 11.6c-1 .4-1 1.8.1 2.1l4.6 1.4 1.8 5.4c.3.9 1.4 1.1 2 .4l2.5-2.6 4.6 3.4c.7.5 1.7.1 1.9-.8l3.3-15c.2-1-.8-1.9-1.9-1.6z'/%3E%3C/svg%3E");
  --i-chat:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.4A8 8 0 1 1 21 12z'/%3E%3C/svg%3E");
  --i-call:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
  --i-screen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='13' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E");
  --i-play:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10 8.5l6 3.5-6 3.5z'/%3E%3C/svg%3E");
  --i-arrow:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-trend:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 17l6-6 4 4 8-8'/%3E%3Cpath d='M15 7h6v6'/%3E%3C/svg%3E");
  --i-brain:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.2 5.3L20 10.5l-5.8 2.2L12 18l-2.2-5.3L4 10.5l5.8-2.2z'/%3E%3Cpath d='M18 16l.9 2.1 2.1.9-2.1.9-.9 2.1-.9-2.1-2.1-.9 2.1-.9z'/%3E%3C/svg%3E");
  --i-clock:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --i-ads:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l6 4V5L8 9z'/%3E%3Cpath d='M18 9a4 4 0 0 1 0 6'/%3E%3C/svg%3E");
  --i-target: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --i-history:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpath d='M3 4v5h5'/%3E%3Cpath d='M12 8v4l3 2'/%3E%3C/svg%3E");
  --i-chart:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V11'/%3E%3Cpath d='M10 20V4'/%3E%3Cpath d='M16 20v-7'/%3E%3Cpath d='M21 20H3'/%3E%3C/svg%3E");
  --i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  --i-bell:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 9a6 6 0 1 0-12 0c0 6-2 7-2 7h16s-2-1-2-7z'/%3E%3Cpath d='M10.5 20a2 2 0 0 0 3 0'/%3E%3C/svg%3E");
  --i-globe:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18'/%3E%3Cpath d='M12 3a14 14 0 0 1 0 18 14 14 0 0 1 0-18z'/%3E%3C/svg%3E");
  --i-doc:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E");
  --i-spike:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18l5-8 4 5 3-9 6 12'/%3E%3C/svg%3E");
  --i-bulb:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9c.6.5.9 1.2.9 1.9V16h5.2v-.2c0-.7.3-1.4.9-1.9A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 20px; border-radius:var(--btn-radius, 999px); border:1px solid transparent;
  font-weight:600; font-size:.95rem; letter-spacing:-.01em;
  cursor:pointer; background:var(--btn-bg);
  transition:transform .15s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:scale(.97); transition-duration:.1s; }
.btn--primary{
  /* темы (assets/css/themes.css) меняют заливку, цвет текста и тень кнопки */
  background:var(--btn-primary-bg, linear-gradient(135deg, var(--accent), var(--accent-deep)));
  color:var(--btn-primary-fg, #fff);
  box-shadow:var(--btn-primary-shadow, 0 8px 20px color-mix(in srgb, var(--accent) 24%, transparent));
}
.btn--primary:hover{ box-shadow:var(--btn-primary-shadow-hover, 0 12px 28px color-mix(in srgb, var(--accent) 34%, transparent)); }
.btn--ghost{
  border-color:var(--line-strong); color:var(--text);
  background:var(--wash);
}
.btn--ghost:hover{ border-color:var(--line-strong); background:var(--wash-2); }
.btn--outline{
  border-color:color-mix(in srgb, var(--accent) 45%, transparent); color:var(--accent);
  background:color-mix(in srgb, var(--accent) 6%, transparent);
}
.btn--outline:hover{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); }
.btn--invert{
  background:var(--text); color:var(--bg); border-color:var(--text);
}
.btn--invert:hover{ background:#2A2C38; border-color:#2A2C38; }
.btn--sm{ padding:8px 16px; font-size:.875rem; }
.btn--lg{ padding:14px 26px; font-size:1rem; }
.btn--full{ width:100%; }

/* ---------- Announcement ---------- */
.announce{
  position:relative; z-index:60;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 9%, transparent), color-mix(in srgb, var(--accent-2) 9%, transparent));
  border-bottom:1px solid var(--line);
  font-size:.875rem; color:var(--text-dim);
}
.announce.is-hidden{ display:none; }
.announce__inner{ display:flex; align-items:center; gap:10px; justify-content:center; padding:9px 24px; flex-wrap:wrap; }
.announce__tag{
  background:var(--accent); color:#fff; font-size:.7rem; font-weight:700;
  padding:2px 8px; border-radius:999px; letter-spacing:.04em; text-transform:uppercase;
}
.announce__link{ color:var(--text); font-weight:600; display:inline-flex; align-items:center; gap:4px; }
.announce__link svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
.announce__link:hover svg{ transform:translateX(3px); }
.announce__close{
  position:absolute; right:16px; background:none; border:0; color:var(--text-mute);
  font-size:1.3rem; line-height:1; cursor:pointer; padding:0 4px;
}
.announce__close:hover{ color:var(--text); }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, background .2s ease;
}
.site-header.is-stuck{ border-bottom-color:var(--line); background:color-mix(in srgb, var(--bg) 92%, transparent); }
.header__inner{ display:flex; align-items:center; gap:28px; height:var(--header-h); }

.logo{ display:inline-flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.02em; font-size:1.12rem; font-family:var(--font-display, var(--font)); }
.logo__mark{ width:30px; height:30px; display:block; }
.logo__mark svg{ display:block; }
.logo__mark svg rect{ fill:var(--accent); }
.logo__glyph{ fill:#fff; }

.nav{ display:flex; align-items:center; justify-content:space-between; flex:1; gap:20px; }
.nav__list{ display:flex; align-items:center; gap:2px; }
.nav__item{ position:relative; }
.nav__link{
  display:inline-flex; align-items:center; gap:5px;
  background:none; border:0; cursor:pointer;
  padding:9px 12px; border-radius:10px;
  font-size:.925rem; font-weight:500; color:var(--text-dim);
  transition:color .18s, background .18s;
}
.nav__link:hover, .nav__item.is-open > .nav__link{ color:var(--text); background:var(--wash-2); }
.chev{ width:11px; height:11px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
.nav__item.is-open .chev, .lang.is-open .chev{ transform:rotate(180deg); }

.nav__actions{ display:flex; align-items:center; gap:8px; }

/* Dropdown menus */
.menu{
  position:absolute; top:calc(100% + 8px); left:0; z-index:70;
  min-width:230px; padding:10px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav__item.is-open > .menu, .lang.is-open > .menu{ opacity:1; visibility:visible; transform:translateY(0); }
.menu--right{ left:auto; right:0; }
.menu--narrow{ min-width:150px; }
.menu--wide{ min-width:620px; left:50%; transform:translate(-50%,-6px); }
.nav__item.is-open > .menu--wide{ transform:translate(-50%,0); }
.menu--up{ top:auto; bottom:calc(100% + 8px); }

.menu__grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:8px; }
.menu__col--side{ background:var(--wash); border-radius:var(--radius-sm); padding:10px; }
.menu__label{
  margin:6px 8px 6px; font-size:.7rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-mute);
}
.menu__label--mt{ margin-top:14px; }
.menu__card{
  display:flex; gap:12px; align-items:flex-start; padding:10px; border-radius:var(--radius-sm);
  transition:background .16s;
}
.menu__card:hover{ background:var(--wash-2); }
.menu__ico{ color:var(--accent); margin-top:2px; }
.menu__card strong{ display:block; font-size:.93rem; font-weight:600; }
.menu__card em{ display:block; font-style:normal; font-size:.83rem; color:var(--text-mute); line-height:1.45; }
.menu__row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 10px; border-radius:var(--radius-sm);
  font-size:.9rem; color:var(--text-dim); transition:background .16s, color .16s;
}
.menu__row:hover{ background:var(--wash-2); color:var(--text); }
.menu__row.is-active{ color:var(--accent); }
.pill{ font-size:.68rem; font-weight:700; padding:2px 7px; border-radius:999px; text-transform:uppercase; letter-spacing:.05em; }
.pill--free{ background:rgba(5,150,105,.12); color:var(--live); }

.lang{ position:relative; }
.lang__btn{
  display:inline-flex; align-items:center; gap:5px;
  background:none; border:1px solid var(--line); border-radius:999px;
  padding:6px 12px; font-size:.83rem; color:var(--text-dim); cursor:pointer;
  transition:border-color .18s, color .18s;
}
.lang__btn:hover{ color:var(--text); border-color:var(--line-strong); }

.burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:8px; cursor:pointer; margin-left:auto; }
.burger span{ display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:transform .22s, opacity .22s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Shared section bits ---------- */
.section{ padding:100px 0; position:relative; }
.section--alt{ background:var(--bg-alt); border-block:1px solid var(--line); }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.78rem; font-weight:650; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); margin:0 0 12px;
}
.dot-live{
  width:7px; height:7px; border-radius:50%; background:var(--live); display:inline-block;
  box-shadow:0 0 0 0 rgba(5,150,105,.5); animation:ping 2.2s ease-out infinite;
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(5,150,105,.45); }
  70%{ box-shadow:0 0 0 8px rgba(5,150,105,0); }
  100%{ box-shadow:0 0 0 0 rgba(5,150,105,0); }
}

.sec-head{ max-width:760px; margin:0 auto 56px; text-align:center; }
/* шапка раздела, который есть в меню: его имя - главный заголовок,
   строка под ним - поясняющее сообщение */
.sec-head--major{ margin-bottom:44px; }
.sec-head--major h2{ color:var(--accent); margin-bottom:12px; }
.sec-head--major .sec-head__lead{ font-size:1.18rem; color:var(--text); font-weight:600; letter-spacing:-.015em; }
.sec-head--left{ margin-left:0; text-align:left; }
.sec-head h1,
.sec-head h2{ font-size:var(--fs-h2); margin-bottom:16px; text-wrap:balance; }
.sec-head__lead{ color:var(--text-dim); font-size:var(--fs-lead); margin:0 auto; max-width:64ch; text-wrap:pretty; }
.sec-head--left .sec-head__lead{ margin-left:0; }

.grad{ color:var(--accent); }

.use-cases__note{
  text-align:center; color:var(--text-dim); font-size:var(--fs-small); margin:18px 0 0;
}
.use-cases__note a{ color:var(--accent); font-weight:600; }
.use-cases__note a:hover{ text-decoration:underline; }
.use-cases__note:first-of-type{ margin-top:40px; }
.use-cases__note--cta{
  font-size:clamp(1.05rem, 1.6vw, 1.3rem); color:var(--text); font-weight:600;
}
.use-cases__note--cta a{ font-weight:800; }
.use-cases__note--cta .grad{ font-weight:800; }

.pullquote{
  margin:56px auto 0; max-width:820px; text-align:center;
  font-size:clamp(1.2rem, 2.4vw, 1.7rem); font-weight:600; letter-spacing:-.02em;
  color:var(--text);
}
.pullquote::before, .pullquote::after{ content:""; }
.lead-strong{ font-size:1.2rem; font-weight:600; color:var(--text); }
.muted{ color:var(--text-mute); margin-bottom:10px; }

.split{ display:grid; grid-template-columns:1fr 1.05fr; gap:64px; align-items:center; }
.split--rev .split__copy{ order:2; }
.split--rev .split__visual{ order:1; }
.split__copy h2{ font-size:var(--fs-h2); margin-bottom:18px; }
.split__copy p{ color:var(--text-dim); font-size:var(--fs-lead); }
.sub-h{ font-size:1.15rem; margin:26px 0 10px; }

.ticks{ display:flex; flex-wrap:wrap; gap:8px 10px; margin:0 0 22px; }
.ticks li{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px 6px 10px; border-radius:999px;
  background:var(--wash); border:1px solid var(--line);
  font-size:var(--fs-small); color:var(--text);
}
.ticks li::before{
  content:""; width:14px; height:14px; flex:none; background-color:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ticks--tight li{ padding:4px 11px 4px 8px; font-size:var(--fs-small); }
.ticks--light li{ background:var(--wash-2); }

/* ---------- Hero ---------- */
.hero{ position:relative; padding:66px 0 76px; overflow:hidden; }
.hero__glow{
  position:absolute; inset:-30% -20% auto -20%; height:760px; pointer-events:none;
  background:
    radial-gradient(50% 55% at 22% 32%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    radial-gradient(45% 50% at 78% 22%, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent 70%);
  filter:blur(10px);
}
.hero__inner{ position:relative; display:grid; grid-template-columns:1.04fr 1fr; gap:48px; align-items:center; }
.hero__title{
  font-size:clamp(2.1rem, 3.6vw, 3.25rem); font-weight:700;
  line-height:1.1; margin-bottom:16px; letter-spacing:-.035em;
  /* выравнивает длину строк, чтобы последняя не висела в одно слово */
  text-wrap:balance;
}
/* вторая фраза - отдельный блок: так она переносится сама и строки выходят ровнее */
.hero__title .grad{ display:block; }
.hero__lead{ font-size:var(--fs-lead); color:var(--text-dim); max-width:60ch; margin-bottom:22px; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.btn-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.btn-row--center{ justify-content:center; margin-top:32px; }
.hero__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.hero__chips li{
  font-size:.79rem; color:var(--text-dim);
  padding:5px 12px; border-radius:999px;
  border:1px solid var(--line); background:var(--wash);
}

/* ---------- Hero product tour ---------- */
.tour{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line-strong); background:var(--surface);
  box-shadow:var(--shadow); min-height:408px;
  display:flex; flex-direction:column;
}

/* the blurred product screen behind the cards */
.tour__bg{
  position:absolute; inset:0; padding:18px 20px;
  filter:blur(3.5px); opacity:.6; pointer-events:none; user-select:none;
}
.tour__bg-head{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.tour__bg-head strong{ font-size:1.05rem; letter-spacing:-.02em; }
.tour__bg-periods{ display:flex; gap:5px; margin-left:auto; }
.tour__bg-periods span{
  font-size:.68rem; font-weight:700; padding:4px 9px; border-radius:7px;
  border:1px solid var(--line); color:var(--text-mute);
}
.tour__bg-periods .is-on{ background:var(--text); color:var(--bg); border-color:var(--text); }
.tour__bg-tabs{ display:flex; gap:14px; padding-bottom:9px; border-bottom:1px solid var(--line); margin-bottom:16px; }
.tour__bg-tabs span{ font-size:.6rem; font-weight:700; letter-spacing:.08em; color:var(--text-mute); white-space:nowrap; }
.tour__bg-tabs .is-on{ color:var(--text); border-bottom:2px solid var(--accent); padding-bottom:7px; margin-bottom:-9px; }
.tour__bg-chart{ height:110px; margin-bottom:16px; }
.tour__bg-chart svg{ width:100%; height:100%; display:block; }
.tour__bg-line{ fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.tour__bg-rows{ display:flex; flex-direction:column; gap:10px; }
.tour__bg-rows li{
  display:flex; align-items:center; gap:11px; padding:10px;
  border:1px solid var(--line); border-radius:10px;
}
.ph-img{ width:44px; height:34px; border-radius:6px; background:var(--wash-2); flex:none; }
.ph-lines{ display:flex; flex-direction:column; gap:6px; flex:1; }
.ph-lines i{ display:block; height:8px; border-radius:4px; background:var(--wash-2); }
.ph-lines i.w80{ width:80%; } .ph-lines i.w70{ width:70%; }
.ph-lines i.w60{ width:60%; } .ph-lines i.w50{ width:50%; }
.ph-score{ width:52px; height:26px; border-radius:6px; background:var(--wash-2); flex:none; }

/* stage holding the step cards */
.tour__stage{ position:relative; flex:1; display:grid; place-items:center; padding:20px 20px 6px; z-index:1; }
.tour__step{
  grid-area:1 / 1; width:min(326px, 100%);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:17px 19px 19px;
  box-shadow:0 16px 44px rgba(17,17,20,.14);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.98);
  transition:opacity .45s ease, transform .45s ease, visibility .45s;
}
.tour__step.is-active{ opacity:1; visibility:visible; transform:none; }

.tour__head{ display:flex; align-items:center; gap:10px; margin-bottom:13px; }
.tour__num{
  width:27px; height:27px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; font-size:.8rem; font-weight:800;
}
.tour__head h2{ font-size:1.04rem; letter-spacing:-.02em; }
.tour__demo{ border-top:1px solid var(--line); padding-top:13px; }

/* step 1 - period pills */
.tour__periods{ display:flex; gap:7px; }
.tour__periods span{
  font-size:.76rem; font-weight:700; padding:7px 13px; border-radius:8px;
  border:1px solid var(--line); color:var(--text-mute);
}
.tour__periods .is-on{ background:var(--text); color:var(--bg); border-color:var(--text); }

/* step 2 - filter chips drop in one after another */
.tour__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.tour__chips .chip{ opacity:0; }
.is-active .tour__chips .chip{ animation:tour-pop .45s cubic-bezier(.2,.9,.3,1.2) var(--d, 0s) both; }
@keyframes tour-pop{
  from{ opacity:0; transform:translateY(8px) scale(.9); }
  to{ opacity:1; transform:none; }
}

/* Article thumbnails - real photos, public domain (CC0), see assets/img/ */
.thumb{
  border-radius:7px; flex:none;
  background-size:cover; background-position:center; background-color:var(--wash-2);
}
.thumb--a{ background-image:url("../img/news-bank.jpg"); }
.thumb--b{ background-image:url("../img/news-chart.webp"); }
.thumb--c{ background-image:url("../img/news-funds.jpg"); }

/* step 3 - result rows */
.tour__list{ display:flex; flex-direction:column; gap:9px; }
.tour__row{
  display:grid; grid-template-columns:auto 1fr auto; gap:2px 10px; align-items:center;
  padding:9px 11px; border:1px solid var(--line); border-radius:9px; opacity:0;
}
.is-active .tour__row{ animation:tour-pop .4s ease var(--d, 0s) both; }
.tour__row .thumb{ grid-row:1 / span 2; width:38px; height:38px; }
.tour__row b{ font-size:.79rem; font-weight:650; line-height:1.3; }
.tour__row em{ grid-column:2; font-style:normal; font-size:.7rem; color:var(--text-dim); }
.tour__score{
  grid-row:1 / span 2; font-style:normal; font-size:.86rem; font-weight:800;
  color:var(--live); background:rgba(5,150,105,.10); padding:5px 9px; border-radius:7px;
}

/* step 4 - one article */
.tour__article{ display:flex; gap:12px; }
.tour__article-img{ width:84px; height:84px; border-radius:9px; flex:none; }
.tour__article-main{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.tour__article-main b{ font-size:.83rem; font-weight:650; line-height:1.3; }
.tour__article-main em{ font-style:normal; font-size:.71rem; color:var(--text-dim); }
.tour__facts{ display:flex; gap:14px; margin-top:7px; }
.tour__facts span{ font-size:.86rem; font-weight:800; letter-spacing:-.02em; }
.tour__facts i{ display:block; font-style:normal; font-size:.62rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-dim); }

/* step 5 - payoff */
.tour__final{ display:flex; align-items:center; gap:16px; }
.tour__final svg{ width:130px; height:46px; flex:none; }

/* the global reset only covers <ul>, and this is an <ol> - kill the numbering here */
.tour__dots{
  position:relative; z-index:1; display:flex; gap:7px; justify-content:center;
  margin:0; padding:0 0 14px; list-style:none;
}
.tour__dots li{ display:flex; }
.tour__dots button{
  width:26px; height:5px; border-radius:99px; border:0; padding:0; cursor:pointer;
  background:var(--line-strong); transition:background .25s ease;
}
.tour__dots button.is-on{ background:var(--accent); }

@media (max-width:980px){
  .tour{ min-height:440px; }
}
@media (max-width:560px){
  .tour__step{ padding:17px 16px 18px; }
  .tour__facts{ gap:11px; }
  .tour__final svg{ width:96px; }
}

.hero__preview{ position:relative; }

/* ---------- Trust ---------- */
.trust{ padding:34px 0 6px; }
.trust__label{ text-align:center; font-size:.82rem; color:var(--text-mute); margin-bottom:22px; letter-spacing:.02em; }
.trust__logos{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px 44px; }
.trust__logos li{
  font-weight:700; font-size:1rem; letter-spacing:.14em;
  color:rgba(17,17,20,.13);
}

/* ---------- Stats ---------- */
.stats{ padding:100px 0; }

/* Слева три цифры лесенкой, справа вывод. Порядок цифр намеренный:
   сначала деньги, потом охват, потом доля трафика. */
.stats__split{ display:grid; grid-template-columns:1fr 1fr; gap:26px 40px; align-items:stretch; }
.stat-rows{ display:flex; flex-direction:column; gap:14px; list-style:none; margin:0; padding:0; }
.stat-row{
  display:flex; align-items:center; gap:18px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 24px;
}
.stat-row__ico{
  flex:none; width:64px; height:64px; border-radius:18px;
  background:var(--accent-soft); color:var(--accent);
  display:grid; place-items:center;
}
.stat-row__ico::before{
  content:""; width:22px; height:22px; background-color:currentColor;
  -webkit-mask:inherit; mask:inherit;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
.stat-row__body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.stat-row__num{
  font-size:clamp(1.7rem, 2.6vw, 2.15rem); font-weight:800; letter-spacing:-.035em; line-height:1.1;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
.stat-row__desc{ font-size:var(--fs-small); color:var(--text-dim); line-height:1.4; }

/* General vs personalized feed, side by side */
.compare{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.compare__col{
  margin:0; display:flex; flex-direction:column; gap:16px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-sm);
}
.compare__col--on{
  background:var(--accent-soft);
  border-color:color-mix(in srgb, var(--accent) 24%, transparent);
}
.compare__cap{ display:flex; flex-direction:column; gap:7px; }
.compare__tag{
  align-self:flex-start; padding:6px 12px; border-radius:7px;
  background:var(--wash-2); color:var(--text-dim);
  font-size:.78rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
}
.compare__tag--on{ background:var(--accent); color:#fff; }
.compare__note{ font-size:.92rem; color:var(--text-dim); }

/* six stories, three in view, the rest on scroll (on phones: all six, see below) */
.compare__feed{ position:relative; }
.compare__feed ul{
  list-style:none; margin:0; padding:0 4px 0 0;
  display:flex; flex-direction:column; gap:10px;
  max-height:324px; overflow-y:auto; scrollbar-width:thin;
}
.compare__feed ul::-webkit-scrollbar{ width:5px; }
.compare__feed ul::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:999px; }
.compare__feed::after{
  content:""; position:absolute; left:0; right:4px; bottom:0; height:24px;
  pointer-events:none; border-radius:0 0 10px 10px;
  background:linear-gradient(to bottom, transparent, var(--surface));
}
.compare__col--on .compare__feed::after{
  background:linear-gradient(to bottom, transparent, color-mix(in srgb, var(--accent) 9%, var(--surface)));
}
/* На телефоне колонки идут одна под другой, и прокрутка внутри ленты
   перехватывала прокрутку страницы. Показываем все шесть историй целиком. */
@media (max-width:720px){
  .compare__feed ul{ max-height:none; overflow:visible; padding-right:0; }
  .compare__feed::after{ display:none; }
}
.compare__feed li{
  display:flex; gap:12px; align-items:center;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:12px 14px;
}
/* миниатюры новостей в сравнении лент: фото с Unsplash (лицензия Unsplash, без указания автора),
   список и ссылки - assets/img/feed/CREDITS.md */
.cmp-thumb{ width:56px; height:56px; border-radius:9px; flex:none; background:var(--surface-2) center/cover no-repeat; }
.cmp-txt{ min-width:0; }
.cmp-txt b{ display:block; font-size:.9rem; font-weight:600; color:var(--text); line-height:1.35; }
.cmp-txt em{ display:block; font-style:normal; font-size:.76rem; color:var(--text-mute); margin-top:4px; }

.cmp-thumb--t1{ background-image:url("../img/feed/t1.jpg"); }
.cmp-thumb--t2{ background-image:url("../img/feed/t2.jpg"); }
.cmp-thumb--t3{ background-image:url("../img/feed/t3.jpg"); }
.cmp-thumb--t4{ background-image:url("../img/feed/t4.jpg"); }
.cmp-thumb--t5{ background-image:url("../img/feed/t5.jpg"); }
.cmp-thumb--t6{ background-image:url("../img/feed/t6.jpg"); }
.cmp-thumb--p1{ background-image:url("../img/feed/p1.jpg"); }
.cmp-thumb--p2{ background-image:url("../img/feed/p2.jpg"); }
.cmp-thumb--p3{ background-image:url("../img/feed/p3.jpg"); }
.cmp-thumb--p4{ background-image:url("../img/feed/p4.jpg"); }
.cmp-thumb--p5{ background-image:url("../img/feed/p5.jpg"); }
.cmp-thumb--p6{ background-image:url("../img/feed/p6.jpg"); }

@media (max-width:760px){
  .compare{ grid-template-columns:1fr; gap:18px; }
}

/* ---------- Тарифы: карточки ----------
   Сетка 3 x 2 на компьютере, 2 колонки на планшете, одна на телефоне.
   Выделенный тариф (.tier--featured) - рамка и фон в цвете темы. */
.tiers{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px;
}
.tier{
  position:relative; display:flex; flex-direction:column; gap:14px;
  padding:28px 26px 26px; min-width:0;
  /* рамка с оттенком акцента, чтобы карточка читалась на светлом фоне */
  background:var(--surface); border:1px solid color-mix(in srgb, var(--accent) 20%, var(--line-strong));
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  transition:transform .25s cubic-bezier(.23,1,.32,1), border-color .2s ease, box-shadow .25s ease;
}
@media (hover:hover) and (pointer:fine){
  .tier:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--accent) 40%, var(--line-strong)); box-shadow:var(--shadow); }
}
.tier__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:28px; }
.tier__name{ margin:0; font-size:1.08rem; font-weight:700; letter-spacing:-.01em; }
.tier__badge{
  flex:none; padding:4px 10px; border-radius:999px;
  background:var(--accent); color:#fff;
  font-size:.74rem; font-weight:700; white-space:nowrap;
}
.tier__price{ margin:2px 0 0; display:flex; align-items:baseline; gap:4px; }
.tier__price b{
  font-family:var(--font-display, var(--font)); font-size:clamp(2rem, 3vw, 2.5rem); font-weight:800;
  letter-spacing:-.04em; line-height:1; color:var(--text); font-variant-numeric:tabular-nums;
}
.tier__price span{ font-size:.95rem; font-weight:500; color:var(--text-mute); }
.tier__best{ margin:0; font-size:.95rem; line-height:1.5; color:var(--text-dim); min-height:3em; }
.tier__feats{
  list-style:none; margin:4px 0 6px; padding:16px 0 0; display:grid; gap:10px;
  border-top:1px solid var(--line);
}
.tier__feats li{ position:relative; padding-left:28px; font-size:.93rem; line-height:1.45; color:var(--text); }
.tier__feats li::before{
  content:""; position:absolute; left:0; top:.08em; width:18px; height:18px; border-radius:50%;
  background:var(--accent-soft);
}
.tier__feats li::after{
  content:""; position:absolute; left:4px; top:calc(.08em + 4px); width:10px; height:10px;
  background-color:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.tier > .btn{ margin-top:auto; }

/* выделенный тариф */
.tier--featured{
  border:2px solid var(--accent); padding:27px 25px 25px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, var(--surface)) 0%, var(--surface) 55%);
  box-shadow:0 18px 40px color-mix(in srgb, var(--accent) 16%, transparent);
}
.tier--featured .tier__price b{ color:var(--accent); }

@media (max-width:980px){
  .tiers{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:600px){
  .tiers{ grid-template-columns:1fr; gap:14px; }
  .tier{ padding:22px 20px 20px; gap:12px; }
  .tier--featured{ padding:21px 19px 19px; }
  .tier__best{ min-height:0; }
}

/* Customer quote: its own slim band between sections */
.quoteband{
  padding:54px 0;
  background:var(--accent-soft);
  border-block:1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.pullquote{ margin:0 auto; max-width:860px; text-align:center; }
.pullquote blockquote{
  margin:0 auto 14px; max-width:68ch; font-style:italic; line-height:1.5;
  font-size:clamp(1.04rem, 1.5vw, 1.2rem); color:var(--text); text-wrap:balance;
}
.pullquote figcaption{
  font-size:.74rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--accent);
}
@media (max-width:560px){ .quoteband{ padding:40px 0; } }

.stats__lead-group{ display:grid; gap:20px; }

/* ---------- Подложка справа от цифр ---------- */
.stats__panel{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; gap:28px;
  padding:40px 40px 42px;
  border-radius:var(--radius-lg);
  background:
    radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 70%),
    color-mix(in srgb, var(--accent) 7%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
.stats__points{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.stats__points li{
  display:flex; align-items:center; gap:14px;
  font-size:clamp(1.1rem, 1.6vw, 1.3rem); font-weight:700; letter-spacing:-.015em; color:var(--text);
}
.stats__points li::before{
  content:""; flex:none; width:30px; height:30px; border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5'/%3E%3C/svg%3E") center/14px no-repeat;
}
.stats__punch{
  margin:0; padding-top:26px; border-top:1px solid color-mix(in srgb, var(--accent) 18%, transparent);
  font-family:var(--font-display, var(--font));
  font-size:clamp(1.35rem, 2.2vw, 1.8rem); font-weight:800; line-height:1.3; letter-spacing:-.025em;
  color:var(--text); text-wrap:balance;
}
.stats__punch mark{
  color:var(--accent); background:linear-gradient(transparent 62%, color-mix(in srgb, var(--accent) 16%, transparent) 62%);
  -webkit-box-decoration-break:clone; box-decoration-break:clone; padding:0 2px;
}
@media (max-width:560px){
  .stats__panel{ padding:26px 22px 28px; gap:22px; }
  .stats__points li::before{ width:26px; height:26px; background-size:12px; }
  .stats__punch{ padding-top:20px; }
}
.stats__lead{
  margin:0; font-size:clamp(1.15rem, 1.9vw, 1.5rem); font-weight:700;
  line-height:1.4; letter-spacing:-.02em; color:var(--text); text-wrap:balance;
}
/* перенос после первой строки нужен только там, где абзац стоит сбоку:
   на узком экране три коротких слова и так занимают свою строку */
@media (max-width:560px){ .stats__lead br{ display:none; } }

@media (max-width:900px){
  /* цифры остаются первыми и на узком экране: порядок аргумента важнее */
  .stats__split{ grid-template-columns:1fr; gap:28px; }
}
@media (max-width:560px){
  .stat-row{ padding:16px 18px; gap:14px; }
  .stat-row__ico{ width:54px; height:54px; border-radius:15px; }
}

/* ---------- Publisher lookup result ----------
   Label and number used to sit at opposite edges of the panel, which read as two
   unrelated things. Grouping them in one tinted box with a bar fixes that. */
.result{
  margin-top:16px; padding:13px 15px 14px;
  background:var(--bg-alt); border:1px solid var(--line); border-radius:11px;
  display:flex; flex-direction:column; gap:9px;
}
.result__head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.result__label{ font-size:.8rem; color:var(--text-dim); font-weight:600; }
.result__count{
  display:flex; align-items:baseline; gap:5px;
  font-size:1.45rem; font-weight:800; letter-spacing:-.03em; color:var(--accent);
}
.result__count i{ font-style:normal; font-size:.78rem; font-weight:600; color:var(--text-mute); }
.result__bar{
  display:block; height:8px; border-radius:99px; background:var(--wash-2); overflow:hidden;
}
.result__bar u{
  display:block; height:100%; width:var(--w); border-radius:99px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
}
.result__note{ font-size:.74rem; color:var(--text-mute); }
.result__note b{ color:var(--text); font-weight:800; }

/* ---------- Section frame (Solutions, Pricing) ---------- */
.frame{
  position:relative;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);
  padding:42px 48px 48px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.frame::before{
  content:""; position:absolute; top:0; left:0; right:0; height:4px; z-index:1;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
}
.frame::after{
  content:""; position:absolute; inset:-15% -10% auto -10%; height:420px; pointer-events:none; z-index:0;
  background:
    radial-gradient(50% 60% at 25% 15%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    radial-gradient(45% 55% at 75% 10%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 70%);
  filter:blur(10px);
}
.frame > *{ position:relative; z-index:1; }
.frame-kicker{
  text-align:center; text-transform:uppercase; margin:0 0 4px;
  font-size:clamp(2.4rem, 5vw, 3.9rem); font-weight:700; letter-spacing:-.035em; line-height:1;
}

/* Stronger glow for sections that should stand out more (e.g. Pricing) */
.frame--vivid{
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), var(--surface) 55%);
  border-color:color-mix(in srgb, var(--accent) 28%, transparent);
}
.frame--vivid::after{
  background:
    radial-gradient(55% 70% at 25% 10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(50% 65% at 78% 5%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 70%),
    radial-gradient(45% 55% at 50% 105%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 70%);
  filter:blur(6px);
}

/* ---------- Знак вопроса у каждой строки: справка ----------
   Пока это <span>: адресов видео и инструкций ещё нет, а мёртвая ссылка хуже
   честной заглушки. Как появится адрес - меняем span на <a>, оформление общее. */
.how{
  position:absolute; top:14px; right:14px;
  width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center;
  font-size:.78rem; font-weight:800; line-height:1;
  border:1px solid var(--line); background:var(--surface);
  color:var(--text-mute); text-decoration:none; cursor:default;
}
a.how{ cursor:pointer; color:var(--accent); border-color:var(--accent); background:var(--accent-soft); }
a.how:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* ---------- Первый экран: цитата и живые сигналы ---------- */
.hero__quote{
  margin:0; padding:0 0 0 13px;
  border-left:2px solid var(--accent);
  font-style:italic; font-size:.86rem; line-height:1.5; color:var(--text-mute);
  max-width:62ch;
}

/* слайд-вывод: отличается от пронумерованных шагов рамкой и подписью,
   чтобы его не прочитали как "шаг 1" */
.tour__step--lead{ border-color:var(--accent); }
.tour__lead-cap{
  display:flex; align-items:center; gap:8px; margin:0 0 8px;
  font-size:.66rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--accent);
}
.tour__step--lead .tour__head{ margin-bottom:14px; }
.tour__lead-next{
  margin:13px 0 0; padding-top:12px; border-top:1px solid var(--line);
  font-size:.75rem; font-weight:650; color:var(--text-mute);
}
/* первая полоска в переключателе длиннее - это не шаг, а вывод */
.tour__dots li:first-child button{ width:38px; }

/* первый слайд карусели: что только что изменилось */
.tour__alerts{ display:flex; flex-direction:column; gap:8px; }
.tour__alerts span{
  display:grid; grid-template-columns:auto 1fr; gap:2px 10px; align-items:center;
  padding:9px 11px; border:1px solid var(--line); border-radius:10px;
}
.tour__alerts i{
  grid-row:1 / span 2; width:17px; height:17px; display:block;
  background-color:var(--accent);
}
.tour__alerts b{ font-size:.79rem; font-weight:700; color:var(--text); line-height:1.3; }
.tour__alerts em{ grid-column:2; font-style:normal; font-size:.7rem; color:var(--text-mute); }
/* строки проявляются по очереди при каждом показе слайда */
.is-active .tour__alerts span{ opacity:0; animation:tour-pop .4s ease var(--d,0s) both; }
.is-active .tour__alerts span:nth-child(1){ --d:.05s; }
.is-active .tour__alerts span:nth-child(2){ --d:.35s; }
.is-active .tour__alerts span:nth-child(3){ --d:.65s; }

/* ---------- Как строится профиль аудитории: четыре шага ---------- */
.flow{
  /* Шаги по порядку: крупные номера на общей линии-«рельсе» сверху,
     под каждым номером - карточка: что сделать, пояснение, пример экрана. */
  --flow-gap:24px; --num:48px;
  position:relative; list-style:none; margin:0 0 44px; padding:calc(var(--num) / 2) 0 0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--flow-gap);
}
.flow::before{
  content:""; position:absolute; z-index:0; height:3px; border-radius:3px;
  top:calc(var(--num) / 2 - 1.5px);
  left:calc(22px + var(--num) / 2);
  right:calc((100% - 3 * var(--flow-gap)) / 4 - 22px - var(--num) / 2);
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  opacity:.35;
}
.flow__step{
  position:relative; display:flex; flex-direction:column; gap:12px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:calc(var(--num) / 2 + 20px) 22px 22px;
  box-shadow:var(--shadow-sm);
  transition:transform .25s cubic-bezier(.23,1,.32,1), border-color .2s ease, box-shadow .25s ease;
}
@media (hover:hover) and (pointer:fine){
  .flow__step:hover{ transform:translateY(-4px); border-color:var(--line-strong); box-shadow:var(--shadow); }
}
.flow__head{
  margin:0; min-height:calc(2 * 1.3em);
  font-family:var(--font-display, var(--font));
  font-size:1.14rem; font-weight:700; line-height:1.3; letter-spacing:-.02em; color:var(--text);
  text-wrap:balance;
}
/* номер шага - крупный круг на «рельсе» над карточкой */
.flow__num{
  position:absolute; z-index:1; top:calc(var(--num) / -2); left:22px;
  width:var(--num); height:var(--num); border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:#fff;
  font-size:1.15rem; font-weight:800; font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 6px var(--bg), 0 8px 18px color-mix(in srgb, var(--accent) 30%, transparent);
}
/* три строки резерва, чтобы примеры экранов стартовали на одной высоте */
.flow__desc{ margin:0; font-size:.95rem; color:var(--text-dim); line-height:1.5; min-height:calc(3 * 1.5em); }
@media (max-width:620px){ .flow__desc{ min-height:0; } .flow__head{ min-height:0; } }
.flow__mock{
  flex:1; margin-top:4px; display:flex; flex-direction:column; justify-content:center; gap:10px;
  background:var(--bg-alt); border:1px solid var(--line); border-radius:14px; padding:14px;
}

/* шаг 1 - поля ввода */
.fm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.fm-box{
  display:flex; align-items:center; gap:6px; min-width:0;
  background:var(--surface); border:1px solid var(--line); border-radius:8px;
  padding:9px 9px; font-size:.77rem; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fm-box--wide{ grid-column:1 / -1; }
.fm-box--on{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.fm-box--on b{ font-weight:700; margin-left:auto; }
.fm-box--ghost{ color:var(--text-mute); border-style:dashed; }
.fm-flag{
  flex:none; width:14px; height:14px; border-radius:50%;
  background:linear-gradient(180deg,#111 33%,#D00 33% 66%,#FC0 66%);
}

/* шаг 2 - готовый профиль */
.fm-card{
  background:var(--surface); border:1px solid var(--line); border-radius:9px;
  padding:11px; display:flex; flex-direction:column; gap:7px;
}
.fm-card__top{ display:flex; align-items:center; gap:7px; font-size:.8rem; font-weight:600; color:var(--text); }
.fm-tag{
  margin-left:auto; font-size:.66rem; font-weight:700; color:var(--accent);
  background:var(--accent-soft); padding:3px 7px; border-radius:99px; white-space:nowrap;
}
.fm-card__name{ font-size:.95rem; font-weight:750; color:var(--text); letter-spacing:-.01em; }
.fm-card__desc{ font-size:.78rem; color:var(--text-dim); line-height:1.45; }
.fm-chips{ display:flex; flex-wrap:wrap; gap:5px; }
.fm-chips span{
  font-size:.72rem; font-weight:600; color:var(--accent);
  background:var(--accent-soft); padding:3px 8px; border-radius:6px;
}

/* шаги 3 и 4 - карточки новостей */
.fm-news{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.fm-news li{
  display:flex; align-items:center; gap:9px; min-width:0;
  background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:8px 9px;
}
.fm-news .thumb{ width:34px; height:34px; flex:none; }
.fm-news span{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.fm-news b{ font-size:.8rem; font-weight:650; color:var(--text); line-height:1.3; }
.fm-news em{ font-style:normal; font-size:.7rem; color:var(--text-mute); }

/* шаг 4 - оценка */
.fm-vote{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.fm-vote__btn{
  background:var(--surface); border:1px solid var(--line); border-radius:9px;
  padding:9px 0; text-align:center; font-size:.95rem; line-height:1;
}
.fm-vote__btn--up{ border-color:var(--accent); background:var(--accent-soft); }
.fm-note{
  margin:0; font-size:.68rem; line-height:1.4; color:var(--accent);
  background:var(--accent-soft); border-radius:8px; padding:8px 9px;
}

@media (max-width:1000px){
  /* два ряда по два шага: общая линия не нужна, номера остаются над карточками */
  .flow{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:calc(var(--num) / 2 + 28px); }
  .flow::before{ display:none; }
}
@media (max-width:620px){
  /* телефон: вертикальная линия слева, номера на ней, карточки справа */
  .flow{ --num:40px; grid-template-columns:1fr; row-gap:18px; padding:0; }
  .flow::before{
    display:block; top:20px; bottom:20px; left:calc(var(--num) / 2 - 1.5px); right:auto;
    width:3px; height:auto; background:linear-gradient(180deg, var(--accent), var(--accent-2));
  }
  .flow__step{ margin-left:calc(var(--num) + 14px); padding:18px; }
  .flow__num{ top:14px; left:calc(-1 * (var(--num) + 14px)); font-size:1rem; }
}

/* ---------- Customer stories carousel ---------- */
.stories-marquee{ position:relative; overflow:hidden; padding:4px 0 10px; }
/* soft fade at both edges so cards do not get cut off abruptly */
.stories-marquee::before,
.stories-marquee::after{
  content:""; position:absolute; top:0; bottom:0; width:90px; z-index:2; pointer-events:none;
}
.stories-marquee::before{ left:0;  background:linear-gradient(90deg, var(--bg-alt), transparent); }
.stories-marquee::after{  right:0; background:linear-gradient(270deg, var(--bg-alt), transparent); }

.stories-track{ display:flex; gap:20px; width:max-content; padding:0 24px; }
/* animation only switches on once JS has duplicated the cards */
.stories-marquee.is-looping .stories-track{ animation:story-scroll 110s linear infinite; }
.stories-marquee.is-looping:hover .stories-track,
.stories-marquee.is-looping:focus-within .stories-track{ animation-play-state:paused; }
@keyframes story-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* without JS (or with reduced motion) it stays a plain horizontal scroller */
.stories-marquee:not(.is-looping){ overflow-x:auto; }

.story-card{
  display:flex; flex-direction:column; width:300px; height:100%;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.story-card:hover{ transform:translateY(-4px); border-color:var(--line-strong); box-shadow:var(--shadow-sm); }
.story-card__chart{
  display:block; height:132px; flex:none; border-bottom:1px solid var(--line);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 132' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0%25' stop-color='%23059669' stop-opacity='.28'/%3E%3Cstop offset='100%25' stop-color='%23059669' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0,112 L38,104 L75,108 L112,86 L150,92 L188,62 L225,70 L262,34 L300,22 L300,132 L0,132 Z' fill='url(%23g)'/%3E%3Cpath d='M0,112 L38,104 L75,108 L112,86 L150,92 L188,62 L225,70 L262,34 L300,22' fill='none' stroke='%23059669' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='300' cy='22' r='4.5' fill='%23fff' stroke='%23059669' stroke-width='2.5'/%3E%3C/svg%3E")
    center/cover no-repeat,
    linear-gradient(180deg, rgba(5,150,105,.05), transparent);
}
.story-card__body{ display:flex; flex-direction:column; gap:8px; padding:18px 20px 20px; flex:1; }
.story-card__tag{
  align-self:flex-start; font-size:.66rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft); padding:3px 9px; border-radius:999px;
}
.story-card__title{ font-size:.98rem; font-weight:650; line-height:1.35; color:var(--text); letter-spacing:-.01em; }
.story-card__more{ margin-top:auto; padding-top:6px; font-size:.82rem; font-weight:600; color:var(--accent); }

/* manual mode: the moment someone uses the arrows the loop stops and the
   track becomes a normal scroller they drive themselves */
.stories-marquee.is-manual{ overflow-x:auto; scrollbar-width:none; }
.stories-marquee.is-manual::-webkit-scrollbar{ display:none; }

/* ---------- Customer stories: arrows + link under the carousel ---------- */
/* both centred under the cards - arrows first, the link right below them */
.stories-foot{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  margin-top:26px; text-align:center;
}
.stories-nav{ display:flex; gap:12px; }
.stories-nav__btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; padding:0;
  background:var(--surface); color:var(--text-dim);
  border:1px solid var(--line); border-radius:999px; cursor:pointer;
  transition:border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.stories-nav__btn:hover{ color:var(--accent); border-color:var(--line-strong); box-shadow:var(--shadow-sm); }
.stories-nav__btn:active{ transform:translateY(1px); }
.chev--l{ width:15px; height:15px; stroke-width:1.9; }

.stories-foot__note{ margin:0; font-size:var(--fs-lead); color:var(--text-dim); }
.stories-foot__link{ font-weight:650; color:var(--accent); }
.stories-foot__link:hover{ text-decoration:underline; }

@media (max-width:560px){
  .story-card{ width:250px; }
  .stories-marquee::before, .stories-marquee::after{ width:40px; }
}

/* ---------- Discover Ads Monitoring - the spy card ----------
   The point of the block is the chain: here is the ad, and here is the page it
   sends people to. So the creative and the destination sit in one card, joined
   by a connector, and the rest of the niche is a short list underneath. */
.adspy{
  border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface);
  box-shadow:var(--shadow); padding:16px;
}
.adspy__cap{
  display:flex; align-items:center; gap:9px; margin:0 0 12px;
  font-size:.84rem; font-weight:700; color:var(--text); letter-spacing:-.01em;
}
.adspy__cap b{ margin-left:auto; font-size:.72rem; font-weight:700; color:var(--text-mute); }

.adspy__card{
  border:1px solid var(--line); border-radius:var(--radius); padding:12px;
  background:var(--surface);
}

/* who is running the ad */
.adspy__who{ display:flex; align-items:center; gap:10px; min-width:0; margin-bottom:11px; }
.adspy__logo{
  flex:none; width:32px; height:32px; border-radius:9px; display:grid; place-items:center;
  background:var(--accent); color:#fff; font-size:.88rem; font-weight:800;
}
.adspy__meta{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.adspy__meta b{ font-size:.84rem; font-weight:750; color:var(--text); letter-spacing:-.01em; }
.adspy__meta em{
  font-style:normal; font-size:.71rem; color:var(--text-mute); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.adspy__badge{
  flex:none; font-size:.61rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color:var(--warn); background:rgba(180,83,9,.10); padding:3px 8px; border-radius:5px;
}
.adspy__flag{
  flex:none; font-size:.63rem; font-weight:800; letter-spacing:.05em;
  background:var(--wash-2); color:var(--text-dim); padding:3px 8px; border-radius:5px;
}

/* the ad itself - creative next to its headline, the way it runs in the feed */
.adspy__ad{ display:grid; grid-template-columns:132px 1fr; gap:12px; align-items:center; }
.adspy__creative{
  display:block; height:86px; border-radius:9px; background-color:var(--wash-2);
  background-image:url("../img/news-chart.webp"); background-size:cover; background-position:center;
}
.adspy__copy{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.adspy__headline{
  font-size:.87rem; font-weight:700; line-height:1.35; letter-spacing:-.01em; color:var(--text);
}
/* the ad's own description - plain weight, the way it runs in the feed */
.adspy__desc{ font-size:.76rem; font-weight:400; line-height:1.4; color:var(--text-dim); }

/* connector between the ad and where it sends people */
.adspy__link{
  display:block; width:2px; height:18px; margin:9px auto 0;
  background:linear-gradient(180deg, var(--line-strong), var(--accent));
  position:relative;
}
.adspy__link::after{
  content:""; position:absolute; left:50%; bottom:-1px; width:8px; height:8px;
  transform:translateX(-50%) rotate(45deg); border-right:2px solid var(--accent);
  border-bottom:2px solid var(--accent);
}

/* where it sends people - the half media buyers actually pay for */
.adspy__dest{
  display:flex; flex-direction:column; gap:3px; margin-top:8px;
  padding:10px 12px; border-radius:11px;
  background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.adspy__dest-cap{
  font-size:.61rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--accent);
}
.adspy__dest-url{
  font-size:.83rem; font-weight:750; color:var(--text); letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.adspy__dest-title{ font-style:normal; font-size:.73rem; color:var(--text-dim); line-height:1.35; }

.adspy__facts{ margin:9px 0 0; font-size:.72rem; color:var(--text-mute); }
.adspy__facts b{ color:var(--text-dim); font-weight:700; }

@media (max-width:560px){
  .adspy{ padding:13px; }
  .adspy__ad{ grid-template-columns:104px 1fr; gap:10px; }
  .adspy__creative{ height:74px; }
}

/* ---------- All customer stories page ---------- */
.stories-page{ padding:48px 0 90px; }
.stories-page .sec-head{ margin-bottom:38px; }
.stories-page .story-cta{ max-width:760px; margin-left:auto; margin-right:auto; }
.stories-grid{
  list-style:none; margin:0; padding:0;
  display:grid; gap:20px; grid-template-columns:repeat(3,minmax(0,1fr));
}
/* the carousel pins cards to 300px - in the grid they fill their column */
.stories-grid .story-card{ width:auto; }
@media (max-width:900px){ .stories-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .stories-grid{ grid-template-columns:1fr; } }

/* ---------- Cards ---------- */
.cards{ display:grid; gap:18px; }
.cards--4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
.cards--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.cards--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px; min-width:0;
  display:flex; flex-direction:column;
  transition:transform .22s ease, border-color .22s ease, background .22s ease;
}
.card:hover{ transform:translateY(-4px); border-color:var(--line-strong); background:var(--surface-2); }
.card__ico{
  color:var(--accent); width:24px; height:24px; margin-bottom:16px;
  display:block;
}
.card h3{ font-size:var(--fs-h3); margin-bottom:8px; }
.card p{ margin:0; color:var(--text-dim); font-size:var(--fs-small); }
.card p:not(:last-child){ margin-bottom:16px; }
/* reserve two lines so a longer tagline never pushes one card's widget down */
.card__tag{ min-height:calc(2 * 1.6em); }
.card__head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.card__head .card__ico{ margin-bottom:0; flex:none; }
.card__head h3{ margin-bottom:0; }
/* ---------- Mini widgets inside the audience cards ----------
   One shared frame - caption on top, footer at the bottom, body stretched
   between them - so all four line up. The body itself differs per audience. */
.viz{
  margin-top:auto; min-width:0; min-height:172px;
  display:flex; flex-direction:column; gap:10px;
  border:1px solid var(--line); border-radius:13px; overflow:hidden;
  background:var(--surface); padding:13px 14px 11px;
  box-shadow:0 6px 18px rgba(17,17,20,.07);
}
.viz__cap{
  font-size:.6rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-mute);
}
.viz__body{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:8px; min-width:0; min-height:0; }
.viz__foot{
  padding-top:9px; border-top:1px solid var(--line);
  font-size:.68rem; color:var(--text-mute);
}
.viz__foot b{ color:var(--text-dim); font-weight:700; }

/* Publishers - topics gaining momentum */
.vz-rows span{ display:flex; align-items:baseline; gap:8px; }
.vz-rows b{ font-size:.78rem; font-weight:650; color:var(--text); flex:1; min-width:0; }
.vz-rows i{ font-style:normal; font-size:.76rem; font-weight:800; white-space:nowrap; }
.vz-rows i.up{ color:var(--live); }
.vz-rows i.up::before{ content:"\2197"; margin-right:2px; }

/* Media buyers - rival creatives */
.vz-ads{ flex-direction:row; align-items:center; gap:7px; }
.vz-ads .thumb{
  flex:1; height:56px; border-radius:8px; position:relative; min-width:0;
}
.vz-ads s{
  position:absolute; inset:0; display:grid; place-items:center; text-decoration:none;
  background:rgba(17,17,20,.55); color:#fff; font-size:.76rem; font-weight:800; border-radius:8px;
}

/* Brands - the mention we just found */
.vz-mention{ flex-direction:row; align-items:center; gap:11px; }
.vz-mention .thumb{ width:52px; height:52px; flex:none; }
.vz-mention__txt{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.vz-mention b{ font-size:.79rem; font-weight:700; line-height:1.3; color:var(--text); }
.vz-mention em{ font-style:normal; font-size:.7rem; color:var(--text-dim); line-height:1.35; }

/* SEO - covered vs missing topics */
.vz-gaps span{ display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--text); }
.vz-gaps i{
  width:17px; height:17px; border-radius:5px; flex:none; display:grid; place-items:center;
  font-style:normal; font-size:.7rem; font-weight:800;
  background:rgba(220,38,38,.10); color:var(--down); transform:rotate(45deg);
}
.vz-gaps .is-ok{ color:var(--text-mute); }
.vz-gaps .is-ok i{ background:rgba(5,150,105,.11); color:var(--live); transform:none; }


/* ---------- Three audience feeds (Personalized Discover) ----------
   The whole point of the block is that the same moment looks different to
   different people, so the three columns sit side by side rather than cycling. */
.feeds{
  border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface);
  box-shadow:var(--shadow); padding:18px; overflow:hidden;
}
.feeds__cap{
  display:flex; align-items:center; gap:9px; margin:0 0 16px;
  font-size:.86rem; font-weight:700; color:var(--text); letter-spacing:-.01em;
}
.feeds__cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }

.feed{ display:flex; flex-direction:column; gap:11px; min-width:0; }

/* the profile is the point of this block, so it carries the visual weight */
.feed__head{
  display:flex; align-items:center; gap:9px; min-width:0; min-height:66px;
  background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius:10px; padding:10px 11px;
}
.feed__flag{
  flex:none; font-size:.66rem; font-weight:800; letter-spacing:.05em;
  background:var(--accent); color:#fff; padding:4px 8px; border-radius:6px;
}
.feed__who{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.feed__who b{ font-size:.84rem; font-weight:800; color:var(--text); letter-spacing:-.01em; }
.feed__who em{ font-style:normal; font-size:.72rem; color:var(--accent); font-weight:600; line-height:1.3; }

.feed__img{
  display:block; height:104px; border-radius:9px; background-color:var(--wash-2);
  background-size:cover; background-position:center;
}
.feed__img--tech{  background-image:url("../img/news-tech.webp"); }
.feed__img--fin{   background-image:url("../img/news-chart.webp"); }
.feed__img--sport{ background-image:url("../img/news-sport.jpg"); }
.feed__lead{
  font-size:.8rem; font-weight:700; line-height:1.35; color:var(--text);
  min-height:calc(2 * 1.35em);
}

@media (max-width:560px){
  .feeds__cols{ grid-template-columns:1fr; gap:20px; }
  .feed__img{ height:120px; }
}


/* ---------- Panels / visuals ---------- */
.panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow-sm);
}
.panel__head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px; }
.panel__title{ font-weight:600; }
.panel__meta{ font-size:.78rem; color:var(--text-mute); }
.panel__foot{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  display:flex; align-items:center; gap:10px; font-size:.83rem; color:var(--text-dim); flex-wrap:wrap;
}
.tag{ font-size:.7rem; font-weight:700; padding:3px 9px; border-radius:999px; text-transform:uppercase; letter-spacing:.05em; }
.tag--warn{ background:rgba(180,83,9,.10); color:var(--warn); }
.tag--plan{ background:var(--accent-soft); color:var(--accent); }
.split__badge{ margin:0 0 14px; }

.bars{ display:flex; flex-direction:column; gap:13px; }
.bars li{ display:grid; grid-template-columns:120px 1fr 34px; align-items:center; gap:12px; font-size:.85rem; }
.bars__name{ color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bars__track{ height:8px; border-radius:999px; background:var(--wash-2); overflow:hidden; }
.bars__track i{
  display:block; height:100%; width:var(--w); border-radius:999px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--accent));
  transform-origin:left; animation:grow 1s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes grow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.bars__val{ text-align:right; color:var(--text-mute); font-variant-numeric:tabular-nums; }
.bars .is-you .bars__name{ color:var(--text); font-weight:600; }
.bars .is-you .bars__track i{ background:linear-gradient(90deg, color-mix(in srgb, var(--accent-2) 55%, transparent), var(--accent-2)); }


.profiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.profile{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px;
  transition:transform .25s ease;
}
.profile--mid{ transform:translateY(-18px); border-color:var(--line-strong); box-shadow:var(--shadow-sm); }
.profile header{ display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--text-dim); margin-bottom:14px; }
.profile__flag{
  font-size:.68rem; font-weight:700; letter-spacing:.06em;
  background:var(--accent-soft); color:var(--accent); padding:2px 7px; border-radius:6px;
}
.profile__live{ margin-left:auto; display:inline-flex; }
.profile ul{ display:flex; flex-direction:column; gap:10px; }
.ph{ height:34px; border-radius:8px; background:linear-gradient(100deg, rgba(17,17,20,.08), rgba(17,17,20,.035)); }
.ph.w90{ width:90%; } .ph.w85{ width:85%; } .ph.w80{ width:80%; } .ph.w70{ width:70%; } .ph.w60{ width:60%; }

.searchbar{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  border:1px solid var(--line-strong); border-radius:999px; background:var(--wash);
  margin-bottom:14px; min-height:46px;
}
.searchbar__ico{ color:var(--text-mute); }
.searchbar__q{ font-size:.92rem; color:var(--text); }
.caret{ width:2px; height:16px; background:var(--accent); animation:blink 1.05s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.chip{
  font-size:.78rem; padding:5px 12px; border-radius:999px;
  border:1px solid var(--line); color:var(--text-mute); background:var(--wash);
}
.chip--on{ border-color:color-mix(in srgb, var(--accent) 40%, transparent); color:var(--accent); background:var(--accent-soft); }

.tbl{ font-size:.86rem; }
.tbl th{
  text-align:left; font-weight:600; font-size:.72rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--text-mute); padding:0 10px 10px; border-bottom:1px solid var(--line);
}
.tbl td{ padding:11px 10px; border-bottom:1px solid var(--line); color:var(--text-dim); }
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl td:first-child{ color:var(--text); font-weight:500; }
.tbl td:last-child{ text-align:right; font-weight:600; }

.alerts{ display:flex; flex-direction:column; gap:10px; }
.alerts li{
  display:flex; align-items:center; gap:13px;
  padding:14px 16px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--line);
  transition:border-color .2s, transform .2s;
}
.alerts li:hover{ border-color:var(--line-strong); transform:translateX(3px); }
.alerts__ico{ color:var(--accent); }
.alerts strong{ display:block; font-size:.9rem; }
.alerts em{ display:block; font-style:normal; font-size:.8rem; color:var(--text-mute); }
.alerts time{ margin-left:auto; font-size:.74rem; color:var(--text-mute); flex:none; }

/* Alert rule builder */
.rule{ display:flex; flex-direction:column; gap:14px; }
.rule li{ display:grid; grid-template-columns:76px minmax(0,1fr); gap:12px; align-items:start; }
.rule__key{
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-mute); padding-top:6px;
}
.rule__val{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  font-size:.9rem; color:var(--text); min-width:0;
}
.alerts__txt{ min-width:0; }

/* Role overview above the solution tabs */
.roles{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px;
  list-style:none; margin:0 0 32px; padding:0;
}
.roles li{ display:flex; min-width:0; }
.role{
  width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  padding:18px 20px; text-align:left; cursor:pointer; font:inherit; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.role:hover, .role:focus-visible{
  border-color:var(--accent); transform:translateY(-3px); box-shadow:var(--shadow-sm);
}
.role__ico{ color:var(--accent); }
.role__name{ font-weight:700; font-size:var(--fs-h3); line-height:1.2; }
.role__tag{ font-size:.9rem; color:var(--text-dim); }

/* ---------- Tabs / solutions ---------- */
.tabs__nav{
  display:flex; gap:6px; padding:6px; margin:0 auto 34px; width:max-content; max-width:100%;
  background:var(--surface); border:1px solid var(--line); border-radius:999px; overflow-x:auto;
}
.tabs__btn{
  background:none; border:0; cursor:pointer; white-space:nowrap;
  padding:9px 20px; border-radius:999px; font-size:.92rem; font-weight:550; color:var(--text-dim);
  transition:background .2s, color .2s;
}
.tabs__btn:hover{ color:var(--text); }
.tabs__btn.is-active{ background:var(--accent); color:#fff; }
.tabs__panel[hidden]{ display:none; }
.tabs__panel{ animation:fade .3s ease both; }
@keyframes fade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

/* визуал справа убран - список вопросов занимает всю ширину */
.tabs__panel-body{ display:block; }
.tabs__visual{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--wash); align-self:start; padding:28px;
  display:flex; align-items:center; justify-content:center;
}
.tabs__viz{ width:100%; max-width:360px; min-width:0; }
.tabs__viz-cap{
  margin:0 0 14px; text-align:center; font-weight:600;
  font-size:1rem; color:var(--text);
}

/* Proof band: customer stories and testimonials share one section */
.proof-split{ margin-top:64px; padding-top:56px; border-top:1px solid var(--line); }
/* ---------- Вопросы издателей: карточки «вопрос - ответ» ----------
   Вопрос - крупно, с серой иконкой; ответ ArticleMetricsDaily - на подложке в цвете темы,
   с иконкой-галочкой. Иконки анимируются при наведении на карточку. */
.pains{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:stretch; }
@media (max-width:820px){ .pains{ grid-template-columns:1fr; gap:12px; } }
.pains li{
  display:grid; grid-template-columns:40px minmax(0,1fr); gap:14px; align-content:start;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; height:100%;
  transition:border-color .2s ease, transform .25s cubic-bezier(.23,1,.32,1), box-shadow .25s ease;
}
@media (hover:hover) and (pointer:fine){
  .pains li:hover{ border-color:var(--line-strong); transform:translateY(-3px); box-shadow:var(--shadow-sm); }
}
.qa__ico{ position:relative; display:block; width:40px; height:40px; border-radius:12px; padding:9px; box-sizing:border-box; }
.qa__ico--q{ background:var(--surface-2); color:var(--text-mute); }
.qa__ico--a{ background:var(--accent-soft); color:var(--accent); }
.qa__ico::before{ content:""; position:absolute; inset:10px; background-color:currentColor; }
.qa__ico--q::before{ -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E") center/contain no-repeat; }
.qa__ico--a::before{ -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.3l2.8 2.8L16.2 9.5'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.3l2.8 2.8L16.2 9.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.pain{
  margin:0; align-self:center;
  font-size:1.12rem; font-weight:650; line-height:1.35; letter-spacing:-.01em; color:var(--text);
  text-wrap:pretty;
}
.fix{
  margin:0; padding:12px 16px; border-radius:12px;
  background:var(--accent-soft);
  font-size:.97rem; line-height:1.55; color:var(--text);
}
.fix strong{ font-weight:500; color:inherit; }
@media (max-width:560px){
  /* на телефоне ответ занимает всю ширину карточки, иконка остаётся у вопроса */
  #solutions .frame{ padding-inline:12px; }
  .pains li{ padding:16px; gap:12px; grid-template-columns:32px minmax(0,1fr); }
  .qa__ico{ width:32px; height:32px; padding:7px; border-radius:10px; }
  .qa__ico--a, .qa__ico--a.has-lordicon{ display:none; }
  .fix{ grid-column:1 / -1; padding:12px 14px; }
  .pain{ font-size:1.05rem; }
}

/* ---------- Визуалы трёх блоков про людей и разработку ----------
   Общая оболочка .uvp, внутри - своя начинка под каждый блок. */
.uvp{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:20px; display:flex; flex-direction:column; gap:14px;
}

/* шапка с аватаром - в блоках про аналитика и поддержку */
.uvp__head{ display:flex; align-items:center; gap:11px; }
.uvp__head--tight{ margin-top:2px; }
.uvp__avatar{
  flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff; font-size:.92rem; font-weight:800;
}
.uvp__who{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.uvp__who b{ font-size:.85rem; font-weight:700; color:var(--text); }
.uvp__who em{ font-style:normal; font-size:.72rem; color:var(--text-mute); }

.uvp__foot{ margin:0; }
.uvp__pill{
  display:inline-block; font-size:.71rem; font-weight:700; color:var(--accent);
  background:var(--accent-soft); padding:6px 11px; border-radius:99px;
}

/* блок про кастомную разработку */
.uvp__ask{
  display:flex; flex-direction:column; gap:5px;
  padding:13px 15px; border-radius:12px; background:var(--bg-alt); border:1px solid var(--line);
}
.uvp__ask-cap{
  font-size:.62rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--text-mute);
}
.uvp__ask b{ font-size:.87rem; font-weight:700; color:var(--text); line-height:1.4; }

.uvp__steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
.uvp__steps li{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:12px 6px; border:1px solid var(--line); border-radius:10px;
  font-size:.76rem; font-weight:650; color:var(--text); text-align:center;
}
.uvp__steps span{
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent); font-size:.72rem; font-weight:800;
}

.uvp__done{
  display:flex; align-items:center; gap:12px;
  padding:13px 15px; border-radius:12px;
  background:var(--go-soft, rgba(5,150,105,.08)); border:1px solid rgba(5,150,105,.2);
}
.uvp__done-ico{
  flex:none; width:26px; height:26px; border-radius:50%; background:var(--live);
  position:relative;
}
.uvp__done-ico::after{
  content:""; position:absolute; inset:0; background-color:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center/13px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center/13px no-repeat;
}
.uvp__done b{ display:block; font-size:.84rem; font-weight:700; color:var(--text); }
.uvp__done em{ font-style:normal; font-size:.74rem; color:var(--text-dim); }

/* блок про онбординг: чек-лист внедрения */
.uvp__check{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.uvp__check li{
  position:relative; display:flex; align-items:center; gap:10px;
  padding:11px 13px 11px 40px; border:1px solid var(--line); border-radius:10px;
  font-size:.84rem; font-weight:600; color:var(--text);
}
.uvp__check li::before{
  content:""; position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%;
}
.uvp__check .is-done{ color:var(--text-dim); }
.uvp__check .is-done::before{
  background:var(--live);
  -webkit-mask:none; mask:none;
}
.uvp__check .is-done::after{
  content:""; position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; background-color:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center/10px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center/10px no-repeat;
}
.uvp__check .is-now{ border-color:var(--accent); background:var(--accent-soft); }
.uvp__check .is-now::before{ border:2.5px solid var(--accent); background:transparent; }
/* этап, до которого ещё не дошли */
.uvp__check li:not(.is-done):not(.is-now){ color:var(--text-mute); }
.uvp__check li:not(.is-done):not(.is-now)::before{ border:2px dashed var(--line-strong); }
.uvp__check i{
  margin-left:auto; font-style:normal; font-size:.71rem; font-weight:700;
  color:var(--accent); white-space:nowrap;
}
.uvp__tech{
  margin:0; padding-top:12px; border-top:1px solid var(--line);
  font-size:.78rem; color:var(--text-dim); line-height:1.5;
}

@media (max-width:560px){
  .uvp{ padding:16px; }
  .uvp__steps li, .uvp__ways li{ padding:10px 4px; font-size:.7rem; }
}

/* ---------- Блок про аналитика: интерфейс и окно чата поверх ---------- */
/* окно чата не накрывает интерфейс, а выезжает из-под его нижнего края */
.talk{ display:flex; flex-direction:column; }
.talk__panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow); padding:18px 18px 22px; width:92%;
}
.talk__panel-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
.talk__panel-head b{ font-size:.86rem; font-weight:700; color:var(--text); }
.talk__panel-head em{ font-style:normal; font-size:.72rem; color:var(--text-mute); margin-left:auto; }
.talk__chart{ position:relative; }
.talk__chart svg{ display:block; width:100%; height:96px; }
.talk__area{ fill:color-mix(in srgb, var(--accent) 12%, transparent); }
.talk__line{ fill:none; stroke:var(--accent); stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round; }
.talk__dot{ fill:#fff; stroke:var(--down); stroke-width:2.6; }
.talk__drop{
  position:absolute; left:66%; top:44%; transform:translate(-50%,0);
  font-size:.68rem; font-weight:800; color:var(--down);
  background:var(--surface); border:1px solid var(--line); border-radius:99px; padding:3px 9px;
  white-space:nowrap;
}

.talk__chat{
  position:relative; z-index:2; align-self:flex-end; width:72%; margin-top:-34px;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:14px;
  display:flex; flex-direction:column; gap:9px;
}
.talk__bubble{
  margin:0; padding:11px 13px; border-radius:12px; font-size:.83rem; line-height:1.45;
  background:var(--accent-soft); color:var(--text); border-top-left-radius:4px;
}
.talk__bubble--you{
  align-self:flex-end; max-width:92%;
  background:var(--bg-alt); border:1px solid var(--line);
  border-radius:12px; border-top-right-radius:4px; color:var(--text-dim);
}
.talk__from{ display:flex; align-items:center; gap:9px; }
.talk__from .uvp__avatar{ width:30px; height:30px; font-size:.78rem; }
.talk__card{
  display:flex; align-items:center; gap:10px; margin-top:2px;
  padding:10px 12px; border-radius:11px;
  background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
.talk__card-ico{
  flex:none; width:26px; height:26px; border-radius:8px; background:var(--accent);
  position:relative;
}
.talk__card-ico::after{
  content:""; position:absolute; inset:0; background-color:#fff;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E") center/15px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E") center/15px no-repeat;
}
.talk__card-txt{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.talk__card-txt b{ font-size:.79rem; font-weight:700; color:var(--text); }
.talk__card-txt em{ font-style:normal; font-size:.72rem; color:var(--accent); font-weight:600; }

@media (max-width:860px){
  /* на узком экране перекрытие убираем совсем */
  .talk__panel{ width:100%; }
  .talk__chat{ width:100%; margin-top:14px; }
}

/* ---------- Pricing ----------
   Шесть тарифов для издателей: три в ряд, два ряда. Сетка из файла "Тарифы 4". */
.plans{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:stretch;
}
.plan{
  position:relative; display:flex; flex-direction:column; gap:10px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 22px 24px;
}
.plan--featured{ border-color:var(--accent); box-shadow:var(--shadow-sm); }
.plan__badge{
  position:absolute; top:-11px; left:22px;
  font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  background:var(--accent); color:#fff; padding:4px 10px; border-radius:99px;
}
.plan__name{
  margin:0; font-size:.72rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent);
}
.plan__price{ margin:0; display:flex; align-items:baseline; gap:5px; }
.plan__price strong{
  font-size:clamp(1.6rem,2.4vw,2.05rem); font-weight:800; letter-spacing:-.035em; color:var(--text);
}
.plan__price span{ font-size:.82rem; color:var(--text-mute); font-weight:600; }
.plan__note{ margin:0; font-size:.8rem; color:var(--text-dim); line-height:1.45; min-height:calc(2 * 1.45em); }
.plan__list{
  list-style:none; margin:6px 0 0; padding:0;
  display:flex; flex-direction:column; gap:8px; flex:1;
}
.plan__list li{
  position:relative; padding-left:24px; font-size:.85rem; color:var(--text); line-height:1.4;
}
.plan__list li::before{
  content:""; position:absolute; left:0; top:.28em; width:14px; height:14px;
  background-color:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12l5 5L20 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* строка, которой в тарифе нет: приглушаем текст и меняем галочку на прочерк,
   чтобы состав было видно целиком, а разницу между тарифами - с одного взгляда */
.plan__list li.is-off{ color:var(--text-mute); }
.plan__list li.is-off::before{
  background-color:var(--line-strong);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
}

.plan .btn{ margin-top:16px; }
.btn--full{ width:100%; justify-content:center; }
.plans__fine{
  margin:24px 0 0; text-align:center; font-size:.78rem; color:var(--text-mute); line-height:1.5;
}

@media (max-width:980px){ .plans{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){
  .plans{ grid-template-columns:1fr; }
  .plan__note{ min-height:0; }
}

/* ---------- Quotes ---------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.quotecard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px;
  display:flex; flex-direction:column; justify-content:space-between; gap:22px;
}
.quotecard p{ margin:0; font-size:var(--fs-lead); color:var(--text); line-height:1.55; }
.quotecard footer{ display:flex; align-items:center; gap:12px; }
.avatar{
  width:38px; height:38px; border-radius:50%; flex:none;
  display:grid; place-items:center; font-size:.78rem; font-weight:700; color:#fff;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
}
.quotecard strong{ display:block; font-size:.88rem; }
.quotecard em{ display:block; font-style:normal; font-size:.8rem; color:var(--text-mute); }
.stories__note{ text-align:center; margin:28px 0 0; font-size:.82rem; color:var(--text-mute); }

/* ---------- About ---------- */
.about{ display:grid; grid-template-columns:1.3fr 1fr; gap:56px; align-items:center; }
.about h2{ font-size:clamp(1.7rem,3vw,2.3rem); margin-bottom:18px; }
.about p{ color:var(--text-dim); }
.about__facts{ display:grid; grid-template-columns:1fr; gap:14px; align-content:start; }
.about__facts li{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px 26px;
  box-shadow:var(--shadow-sm);
}
.about__facts strong{
  display:block; font-family:var(--font-display, var(--font));
  font-size:clamp(1.9rem, 3vw, 2.4rem); font-weight:800; letter-spacing:-.035em; line-height:1.1;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
.about__facts span{ display:block; margin-top:4px; font-size:.95rem; color:var(--text-dim); }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; }
.acc details{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); margin-bottom:10px; overflow:hidden;
}
.acc details[open]{ border-color:var(--line-strong); }
.acc summary{
  cursor:pointer; list-style:none; padding:18px 22px;
  font-weight:600; font-size:1rem; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.acc summary::-webkit-details-marker{ display:none; }
.acc summary::after{
  content:""; width:16px; height:16px; flex:none; background-color:var(--text-mute);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .22s;
}
.acc details[open] summary::after{ transform:rotate(45deg); }
.acc details p{ margin:0; padding:0 22px 20px; color:var(--text-dim); font-size:.94rem; }

/* ---------- Final CTA ---------- */
.cta{
  /* clip, а не hidden: иначе левая колонка не сможет «прилипать» при прокрутке */
  position:relative; padding:96px 0; overflow:hidden; overflow:clip;
  background:
    radial-gradient(60% 90% at 20% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 65%),
    radial-gradient(50% 80% at 85% 100%, color-mix(in srgb, var(--accent-2) 9%, transparent), transparent 65%),
    var(--bg-alt);
  border-top:1px solid var(--line);
}
/* Две колонки: слева заголовок и путь «Start for free», справа форма демо.
   Левая колонка прилипает к верху экрана, пока прокручивается длинная форма,
   поэтому рядом с формой не остаётся пустого места. */
.cta__paths{
  display:grid; grid-template-columns:minmax(0, 5fr) auto minmax(0, 6fr);
  gap:32px; align-items:start;
}
.cta__aside{
  position:sticky; top:calc(var(--header-h) + 32px);
  display:flex; flex-direction:column; gap:28px;
}
.cta__paths > .cta__form, .cta__paths > .cta__done{ grid-column:3; grid-row:1; }
.cta__head{ margin:0; text-align:left; }
.cta__head h2{ font-size:clamp(2rem,3.4vw,2.9rem); margin-bottom:18px; text-wrap:balance; line-height:1.08; }
.cta__head p{ color:var(--text-dim); font-size:var(--fs-lead); margin:0; max-width:46ch; }
.cta__path{
  display:flex; flex-direction:column; gap:14px;
  background:var(--accent-soft);
  border:1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius:var(--radius-lg); padding:28px;
}
.cta__path .ticks li{ background:var(--surface); }
/* в блоке демо это простые плашки, без галочек */
.cta .ticks li{ padding-inline:13px; }
.cta .ticks li::before{ content:none; }
.cta__path .btn{ background:var(--surface); }
.cta__path .btn:hover{ background:#fff; border-color:var(--accent); }
.cta__path-title{ margin:0; font-size:1.05rem; font-weight:800; letter-spacing:-.02em; color:var(--text); }
.cta__path .ticks{ margin:0; }
.cta__path .btn{ margin-top:6px; }
.cta__path-note{ margin:0; text-align:center; font-size:.78rem; color:var(--text-mute); }

.cta__form-ticks{ grid-column:1 / -1; margin:0 0 4px; }

/* «or» - вертикальная линия между двумя путями (на телефоне - горизонтальная) */
.cta__or{
  grid-column:2; grid-row:1; align-self:stretch;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-mute);
}
.cta__or i{ font-style:normal; }
.cta__or::before, .cta__or::after{ content:""; flex:1; width:1px; background:var(--line-strong); }
.cta__form{
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--radius-lg); padding:28px; box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
  display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
}
.field{ display:flex; flex-direction:column; gap:6px; }
.field:nth-of-type(1), .field:nth-of-type(2){ grid-column:span 1; }
.field label{ font-size:.78rem; color:var(--text-mute); font-weight:600; letter-spacing:.02em; }
.field input, .field select{
  background:var(--wash); border:1px solid var(--line);
  border-radius:10px; padding:11px 13px; font-size:.92rem; width:100%;
  transition:border-color .18s, background .18s, box-shadow .18s;
}
.field input::placeholder{ color:var(--text-mute); }
.field input:focus, .field select:focus{ outline:2px solid transparent; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); border-color:var(--accent); background:color-mix(in srgb, var(--accent) 5%, transparent); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-color:var(--down); }
.field input[aria-invalid="true"]:focus, .combo__input[aria-invalid="true"]:focus,
.subscribe input[aria-invalid="true"]:focus{ box-shadow:0 0 0 3px rgba(220,38,38,.18); }

/* Текст ошибки под полем. Сам текст - в index.html, в data-error у поля */
.field__err{
  margin:0; font-size:.8rem; line-height:1.4; color:var(--down); font-weight:600;
}
.cta__form > .field__err{ grid-column:1 / -1; margin-top:-6px; padding-left:27px; }
.radios .field__err{ flex-basis:100%; }
.subscribe .field__err{ margin-top:8px; }
.field select{ appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23767A8A' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M3 4.5L6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:12px;
  padding-right:34px;
}
.field select option{ background:var(--surface); color:var(--text); }
.cta__form-title{
  grid-column:1 / -1; margin:0 0 2px;
  font-size:1.05rem; font-weight:800; letter-spacing:-.02em; color:var(--text);
}
.field--wide{ grid-column:1 / -1; }
.field label i{ font-style:normal; color:var(--accent); font-weight:800; }
.field textarea{
  background:var(--wash); border:1px solid var(--line);
  border-radius:10px; padding:11px 13px; font-size:.92rem; width:100%; resize:vertical;
  transition:border-color .18s, background .18s;
}
.field textarea:focus{ outline:2px solid transparent; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); border-color:var(--accent); background:color-mix(in srgb, var(--accent) 5%, transparent); }
.cta__fine i{ font-style:normal; color:var(--accent); font-weight:800; }

/* the free-trial route, kept visually separate from the demo form */
.trial{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin-top:26px; padding:18px 20px;
  border:1px solid var(--line-strong); border-radius:var(--radius);
  background:var(--surface);
}
.trial strong{ display:block; font-size:.95rem; color:var(--text); }
.trial span{ display:block; font-size:.85rem; color:var(--text-dim); }
.trial .btn{ margin-left:auto; }

@media (max-width:560px){
  .trial{ flex-direction:column; align-items:stretch; text-align:center; }
  .trial .btn{ margin-left:0; }
}

/* consent checkboxes - used by both the demo form and the signup page */
.check{
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  font-size:.82rem; line-height:1.45; color:var(--text-dim);
}
.check input{
  width:17px; height:17px; flex:none; margin-top:2px; accent-color:var(--accent); cursor:pointer;
}
.check a{ color:var(--accent); text-decoration:underline; }
.check i{ font-style:normal; color:var(--accent); font-weight:800; }
.check input[aria-invalid="true"]{ outline:2px solid var(--down); outline-offset:2px; border-radius:4px; }

/* ---------- Форма: «You work» - две кнопки выбора ---------- */
/* .field:nth-of-type(1) считает теги, а не классы, и ловит этот fieldset -
   поэтому ширину на всю строку задаём селектором той же силы, но ниже по файлу */
.radios.field--wide{ grid-column:1 / -1; }
.radios{
  border:0; margin:0; padding:0;
  /* .field задаёт колонку - здесь нужна строка, иначе кнопки растянутся */
  display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:10px;
}
.radios legend{
  width:100%; padding:0; margin-bottom:8px;
  font-size:.78rem; color:var(--text-mute); font-weight:600; letter-spacing:.02em;
}
.radios legend i{ font-style:normal; color:var(--accent); font-weight:800; }
.radio{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:9px 14px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); font-size:.88rem; color:var(--text);
  transition:border-color .18s ease, background .18s ease;
}
.radio:hover{ border-color:var(--line-strong); }
.radio input{ accent-color:var(--accent); width:15px; height:15px; margin:0; flex:none; }
.radio:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); }
.radio input[aria-invalid="true"]{ outline:2px solid var(--down); outline-offset:3px; border-radius:50%; }

/* ---------- Форма: выпадающий список отраслей с поиском ----------
   Настоящий <select> остаётся в форме и уезжает с глаз, а человек работает
   с полем поиска: 487 отраслей в обычном списке не пролистать. */
.is-hidden-field{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.combo{ position:relative; }
.combo__input{
  width:100%; padding:11px 13px; border-radius:10px;
  border:1px solid var(--line); background:var(--surface);
  color:var(--text); font:inherit; font-size:.92rem;
}
.combo__input::placeholder{ color:var(--text-mute); }
.combo__input:focus{ outline:2px solid transparent; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); border-color:var(--accent); background:color-mix(in srgb, var(--accent) 5%, transparent); }
.combo__input[aria-invalid="true"]{ border-color:var(--down); }
.combo__list{
  position:absolute; z-index:20; top:calc(100% + 6px); left:0; right:0;
  max-height:278px; overflow-y:auto; overscroll-behavior:contain; margin:0; padding:6px;
  list-style:none; background:var(--surface);
  border:1px solid var(--line-strong); border-radius:12px; box-shadow:var(--shadow);
}
.combo__group{
  padding:9px 10px 5px; font-size:.68rem; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--text-mute);
}
.combo__option{
  padding:8px 10px; border-radius:7px; font-size:.89rem; color:var(--text); cursor:pointer;
}
.combo__option:hover, .combo__option.is-active{ background:var(--accent-soft); color:var(--accent); }
.combo__option[aria-selected="true"]{ font-weight:650; }
.combo__empty{ padding:12px 10px; font-size:.86rem; color:var(--text-mute); }

/* Google button */
.btn--google{
  background:var(--surface); color:var(--text); border-color:var(--line-strong); gap:11px;
}
.btn--google:hover{ background:var(--bg-alt); border-color:var(--text-mute); }
.btn--google svg{ width:18px; height:18px; flex:none; }

/* ---------- Sign-up page ---------- */
.signup{ display:flex; justify-content:center; padding:52px 24px 90px; }
.signup__box{ width:100%; max-width:520px; }
.signup__title{ font-size:clamp(1.7rem,3.4vw,2.2rem); letter-spacing:-.03em; margin:0 0 8px; }
.signup__sub{ color:var(--text-dim); font-size:var(--fs-small); margin:0 0 26px; }
.signup__or{
  display:flex; align-items:center; gap:14px; margin:22px 0;
  font-size:.78rem; color:var(--text-mute);
}
.signup__or::before, .signup__or::after{
  content:""; flex:1; height:1px; background:var(--line);
}
.signup__form{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.signup__form > .btn, .signup__ok{ grid-column:1 / -1; }
.signup__ok{ margin:0; font-size:.86rem; color:var(--live); font-weight:600; text-align:center; }
.signup__foot{ margin:22px 0 0; text-align:center; font-size:.85rem; color:var(--text-dim); }
.signup__foot a{ color:var(--accent); font-weight:600; }

@media (max-width:520px){
  .signup__form{ grid-template-columns:1fr; }
}

.cta__form > .btn, .cta__fine, .cta__err, .cta__tg{ grid-column:1 / -1; }
/* Сообщения «спасибо» и «не отправилось» всегда в разметке (так их зачитывают
   скринридеры), но пустые не занимают строку сетки */
.cta__err:empty, .subscribe__ok:empty, .subscribe__err:empty{ position:absolute; }
.cta__err{ margin:0; font-size:.88rem; color:var(--down); text-align:center; font-weight:600; }
.cta__form .btn[aria-busy="true"], .subscribe .btn[aria-busy="true"]{ opacity:.7; cursor:progress; }
.cta__fine{ margin:0; font-size:.8rem; color:var(--text-mute); text-align:center; }
.cta__fine a{ color:var(--text-dim); text-decoration:underline; }

/* ---------- Footer ---------- */
/* ---------- Подвал ----------
   Три уровня: панель рассылки, бренд с адресом и колонки ссылок,
   нижняя строка с копирайтом. Ссылки крупнее и с зоной нажатия от 24px. */
.site-footer{ background:var(--surface); border-top:1px solid var(--line); padding:56px 0 28px; }
.footer__news{
  display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); gap:24px 40px; align-items:center;
  padding:32px 36px; margin-bottom:56px; border-radius:var(--radius-lg);
  background:
    radial-gradient(70% 120% at 100% 0%, color-mix(in srgb, var(--accent-2) 14%, transparent), transparent 70%),
    color-mix(in srgb, var(--accent) 7%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.footer__news-title{
  margin:0; font-family:var(--font-display, var(--font));
  font-size:clamp(1.4rem, 2.4vw, 1.9rem); font-weight:800; line-height:1.2; letter-spacing:-.03em;
  color:var(--text); text-wrap:balance;
}
.subscribe label{ display:block; font-size:.92rem; font-weight:650; color:var(--text); margin-bottom:10px; }
.subscribe__row{ display:flex; gap:10px; }
.subscribe input{
  flex:1; min-width:0; min-height:48px; background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--btn-radius, 999px); padding:0 18px; font-size:.95rem;
}
.subscribe input:focus{ outline:2px solid transparent; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); border-color:var(--accent); }
.subscribe input[aria-invalid="true"]{ border-color:var(--down); }
.subscribe .btn{ min-height:48px; padding:0 24px; }
.subscribe__ok{ margin:10px 0 0; font-size:.88rem; color:var(--live); font-weight:600; }
.subscribe__err{ margin:10px 0 0; font-size:.88rem; color:var(--down); font-weight:600; }

.footer__top{ display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 2fr); gap:40px; padding-bottom:40px; }
.footer__brand .logo{ margin-bottom:16px; }
.footer__addr{ color:var(--text-dim); font-size:.95rem; line-height:1.65; margin:0; }
/* старая раскладка подвала на других страницах (about, pricing, signup) */
.footer__tagline{ margin:0 0 14px; color:var(--text-dim); font-size:.95rem; }
.footer__brand .subscribe{ margin-top:22px; max-width:360px; }
.footer__cols{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; }
.footer__col h3{
  margin:0 0 12px; font-size:.98rem; font-weight:700; letter-spacing:-.01em;
  text-transform:none; color:var(--text);
}
.footer__col ul{ display:flex; flex-direction:column; gap:2px; }
.footer__col a{
  display:inline-block; padding:6px 0; font-size:.95rem; color:var(--text-dim);
  transition:color .16s ease;
}
.footer__col a:hover{ color:var(--accent); }

.footer__bottom{
  display:flex; align-items:center; flex-wrap:wrap; gap:12px 24px;
  padding-top:24px; border-top:1px solid var(--line);
}
/* справа внизу висит кнопка чата - ссылки не должны уходить под неё */
@media (min-width:721px){ .site-footer .footer__bottom{ padding-right:150px; } }
.footer__copy{ margin:0; font-size:.9rem; color:var(--text-mute); }
.social{ display:flex; gap:8px; }
.social a{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--text-mute); transition:color .16s, border-color .16s, background .16s;
}
.social a:hover{ color:var(--text); border-color:var(--line-strong); background:var(--wash-2); }
.social svg{ width:16px; height:16px; fill:currentColor; }
.footer__mini{ display:flex; gap:6px 22px; margin-left:auto; flex-wrap:wrap; }
.footer__mini a{ display:inline-block; padding:4px 0; font-size:.9rem; color:var(--text-mute); }
.footer__mini a:hover{ color:var(--accent); }

@media (max-width:860px){
  .footer__news{ grid-template-columns:1fr; padding:26px 24px; margin-bottom:44px; }
  .footer__top{ grid-template-columns:1fr; gap:32px; }
}
@media (max-width:560px){
  .site-footer{ padding:44px 0 24px; }
  .footer__news{ padding:22px 18px; }
  .subscribe__row{ flex-direction:column; }
  .subscribe .btn{ width:100%; }
  .footer__cols{ grid-template-columns:repeat(2, 1fr); gap:24px 16px; }
  .footer__mini{ margin-left:0; }
}
.lang--footer .menu{ z-index:20; }

/* ---------- Reveal on scroll ---------- */
/* Hidden only when JS is available to reveal them again. */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none; } }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1120px){
  .cards--4{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .plans{ grid-template-columns:repeat(2,1fr); }
  .menu--wide{ min-width:520px; }
}

@media (max-width:980px){
  .hero__inner{ grid-template-columns:1fr; gap:36px; }
  .hero{ padding:48px 0 56px; }
  .hero__title{ font-size:clamp(1.95rem, 6.4vw, 2.5rem); }
  .hero__lead{ max-width:none; }
  .split, .split--rev, .about, .footer__top{ grid-template-columns:1fr; gap:40px; }
  /* одна колонка: заголовок, карточка «Start for free», «or», форма демо */
  .cta__paths{ grid-template-columns:1fr; gap:24px; }
  .cta__aside{ display:contents; }
  .cta__head{ order:1; text-align:center; }
  .cta__head p{ margin:0 auto; }
  .cta__paths > .cta__form, .cta__paths > .cta__done{ order:4; grid-column:auto; grid-row:auto; }
  .cta__or{ order:3; grid-column:auto; grid-row:auto; flex-direction:row; }
  .cta__or::before, .cta__or::after{ width:auto; height:1px; }
  .cta__path{ order:2; }
  .split--rev .split__copy{ order:0; }
  .split--rev .split__visual{ order:0; }
  .tabs__panel-body{ grid-template-columns:1fr; }
  .tabs__visual{ min-height:220px; }
  .quotes{ grid-template-columns:1fr; }
  .about__facts{ grid-template-columns:repeat(3,1fr); }
  .addon{ flex-direction:column; align-items:flex-start; }
}

/* Mobile nav */
@media (max-width:900px){
  .roles{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .burger{ display:flex; }
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0;
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:0; padding:16px 24px 28px;
    background:var(--bg); border-bottom:1px solid var(--line);
    max-height:calc(100dvh - var(--header-h)); overflow-y:auto; overscroll-behavior:contain;
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav.is-open{ opacity:1; visibility:visible; transform:none; }
  .nav__list{ flex-direction:column; align-items:stretch; gap:0; }
  .nav__link{ width:100%; justify-content:space-between; padding:13px 4px; font-size:1rem; border-radius:0; }
  .nav__item{ border-bottom:1px solid var(--line); }
  .menu, .menu--wide, .menu--right{
    position:static; transform:none !important; min-width:0; width:100%;
    box-shadow:none; border:0; background:transparent; padding:0 0 12px 8px;
    display:none; opacity:1; visibility:visible;
  }
  .nav__item.is-open > .menu, .lang.is-open > .menu{ display:block; }
  .menu__grid{ grid-template-columns:1fr; }
  .menu__col--side{ background:transparent; padding:0; }
  .nav__actions{ flex-direction:column; align-items:stretch; gap:12px; margin-top:18px; }
  .nav__item--login{ border-bottom:0; }
  .lang{ align-self:flex-start; }
  .site-header.is-navopen{ border-bottom-color:transparent; }
}

@media (max-width:720px){
  .section, .stats{ padding:72px 0; }
  .frame{ padding:26px 20px 30px; }
  .hero{ padding:56px 0 72px; }
  .cards--4, .cards--3, .cards--2{ grid-template-columns:1fr; }
  .plans{ grid-template-columns:1fr; }
  .profiles{ grid-template-columns:1fr; }
  .profile--mid{ transform:none; }
  .about__facts{ grid-template-columns:1fr; }
  .cta__form{ grid-template-columns:1fr; }
  .bars li{ grid-template-columns:96px 1fr 30px; font-size:.8rem; }
  .footer__mini{ margin-left:0; }
  /* крестик остаётся справа, а не уходит отдельной строкой: полоска ниже */
  .announce__close{ right:2px; width:40px; height:40px; }
  .announce__inner{ justify-content:flex-start; padding:8px 44px 8px 16px; gap:4px 10px; font-size:.82rem; line-height:1.45; }
  .tabs__nav{ width:100%; justify-content:flex-start; }
}

@media (max-width:420px){
  .wrap{ padding:0 18px; }
  .hero__cta .btn{ width:100%; }
  .trust__logos{ gap:14px 26px; }
  .trust__logos li{ font-size:.85rem; }
}

/* ---------- Chat widget ---------- */
.chat{ position:fixed; right:22px; bottom:22px; z-index:80; transition:opacity .2s ease, transform .2s ease; }
.chat[hidden]{ display:none; }

.chat__bubble{
  position:relative; margin-left:auto; display:grid; place-items:center; text-decoration:none;
  width:56px; height:56px; border-radius:50%; border:0; cursor:pointer;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 10px 26px color-mix(in srgb, var(--accent) 34%, transparent);
  transition:transform .18s ease, box-shadow .2s ease;
}
.chat__bubble:hover{ transform:translateY(-2px); box-shadow:0 14px 32px color-mix(in srgb, var(--accent) 42%, transparent); }
.chat__bubble svg{ width:24px; height:24px; fill:#fff; stroke:none; }
/* строка у формы демо: запасной вход для тех, кто не хочет заполнять анкету */
.cta__tg{ margin:14px 0 0; text-align:center; }

/* Панель «заявка принята» на месте формы */
.cta__done{
  background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--radius-lg); padding:36px 32px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  align-self:center; outline:none;
}
.cta__done[hidden], .cta__form[hidden]{ display:none; }
.cta__done:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.cta__done-ico{
  width:44px; height:44px; border-radius:50%; margin-bottom:4px;
  background:rgba(5,150,105,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/22px no-repeat;
}
.cta__done-title{ margin:0; font-size:1.3rem; font-weight:750; letter-spacing:-.02em; line-height:1.3; color:var(--text); text-wrap:balance; }
.cta__done-text{ margin:0; font-size:.98rem; line-height:1.6; color:var(--text-dim); max-width:46ch; }
.cta__done-text strong{ color:var(--text); font-weight:650; overflow-wrap:anywhere; }
.cta__done-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; margin-top:12px; }
.cta__done-actions .btn{ gap:8px; }
.cta__done-again{
  background:none; border:0; padding:8px 0; cursor:pointer;
  font-size:.92rem; font-weight:600; color:var(--accent);
  text-decoration:underline; text-underline-offset:3px;
}
.cta__done-again:hover{ color:var(--text); }
@media (max-width:560px){
  .cta__done{ padding:28px 22px; }
  .cta__done-actions{ flex-direction:column; align-items:stretch; }
  .cta__done-actions .btn{ width:100%; }
}
.cta__tg a{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.86rem; font-weight:600; color:var(--accent); text-decoration:none;
}
.cta__tg a:hover{ text-decoration:underline; }
.cta__tg-ico{
  width:17px; height:17px; flex:none; background-color:currentColor;
  -webkit-mask:var(--i-chat) center/contain no-repeat;
  mask:var(--i-chat) center/contain no-repeat;
}

.chat__badge{
  position:absolute; top:-3px; right:-3px; width:19px; height:19px; border-radius:50%;
  background:var(--down); color:#fff; font-size:.63rem; font-weight:800;
  display:grid; place-items:center; border:2px solid var(--bg);
}
.chat__badge[hidden]{ display:none; }

.chat__greet{
  position:relative; width:280px; margin-bottom:14px; padding:16px 18px 16px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 16px 42px rgba(17,17,20,.16);
}
.chat__greet[hidden]{ display:none; }
.js .chat__greet{ animation:chat-in .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes chat-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.chat__close{
  position:absolute; top:7px; right:9px; border:0; background:none; cursor:pointer;
  color:var(--text-mute); font-size:1.15rem; line-height:1; padding:2px 4px;
}
.chat__close:hover{ color:var(--text); }

.chat__from{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.chat__avatar{
  width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  color:#fff; font-size:.74rem; font-weight:800;
}
.chat__from strong{ display:block; font-size:.79rem; color:var(--text); }
.chat__from em{ display:block; font-style:normal; font-size:.78rem; color:var(--text-mute); }
.chat__msg{ margin:0 0 14px; font-size:.86rem; line-height:1.5; color:var(--text-dim); }

@media (max-width:560px){
  .chat{ right:max(16px, env(safe-area-inset-right)); bottom:max(16px, calc(env(safe-area-inset-bottom) + 8px)); }
  .chat__greet{ width:min(280px, calc(100vw - 32px)); }
}
/* На телефоне пузырь уходит, пока на экране форма демо или подвал:
   иначе он закрывает кнопку отправки и ссылки (main.js ставит .chat--away) */
@media (max-width:720px){
  .chat--away{ opacity:0; transform:translateY(12px); pointer-events:none; visibility:hidden; }
}

/* ---------- Тач-экраны ----------
   Подъём карточек и кнопок при наведении на телефоне «залипает» после касания */
@media (hover:none){
  .btn:hover, .card:hover, .story-card:hover, .chat__bubble:hover{ transform:none; }
}
a, button, input, select, textarea, label, summary{ touch-action:manipulation; }
html{ -webkit-tap-highlight-color:color-mix(in srgb, var(--accent) 12%, transparent); }

/* ---------- Customer story page ---------- */
.story-main{ max-width:760px; margin:0 auto; padding:56px 24px 100px; }
.story-tag{
  display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft); padding:4px 11px; border-radius:999px; margin:0 0 16px;
}
.story-title{ font-size:clamp(1.9rem,4vw,2.7rem); line-height:1.15; letter-spacing:-.03em; margin:0 0 28px; }

.story-facts{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:0 0 40px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.story-facts li{ background:var(--surface); padding:20px 16px; text-align:center; }
.story-facts strong{
  display:block; font-size:1.3rem; font-weight:800; letter-spacing:-.03em; margin-bottom:4px;
  color:var(--accent); font-variant-numeric:tabular-nums;
}
.story-facts span{ font-size:.76rem; color:var(--text-dim); }

.story-body p, .story-body li{ color:var(--text-dim); font-size:1.02rem; line-height:1.75; margin:0 0 18px; }
.story-body .story-lead{ font-size:1.14rem; color:var(--text); }
.story-body h2{ font-size:1.35rem; margin:44px 0 16px; letter-spacing:-.02em; }
.story-body ul{ padding-left:22px; margin:0 0 18px; list-style:disc; }
.story-body ul li{ margin-bottom:8px; }
.story-body strong{ color:var(--text); }
.story-body a{ color:var(--accent); font-weight:600; }
.story-body a:hover{ text-decoration:underline; }

/* screenshot slots - dashed frames until real images land */
.story-shot{ margin:28px 0 32px; }
.story-shot__frame{
  height:280px; border:1px dashed var(--line-strong); border-radius:var(--radius);
  background:var(--wash);
}
.story-shot figcaption{ margin-top:10px; font-size:.82rem; color:var(--text-mute); text-align:center; }

.story-cta{
  margin-top:56px; padding:36px 32px; text-align:center;
  border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg-alt);
}
.story-cta h2{ font-size:1.4rem; margin:0 0 10px; letter-spacing:-.02em; }
.story-cta p{ color:var(--text-dim); font-size:var(--fs-small); margin:0 0 4px; }

@media (max-width:560px){
  .roles{ grid-template-columns:1fr; gap:10px; }
  .story-facts{ grid-template-columns:1fr; }
  .story-shot__frame{ height:190px; }
}

/* ---------- Legal pages (Terms / Privacy / Cookies / Trust) ---------- */
.legal-main{ max-width:760px; margin:0 auto; padding:64px 24px 100px; }
.legal-back{
  display:inline-flex; align-items:center; gap:6px;
  color:var(--text-mute); font-size:.85rem; margin-bottom:28px;
}
.legal-back:hover{ color:var(--text-dim); }
.legal-title{ font-size:clamp(1.8rem,3.4vw,2.4rem); letter-spacing:-.02em; margin:0 0 8px; }
.legal-updated{ color:var(--text-mute); font-size:.85rem; margin:0 0 28px; }
.legal-draft{
  display:flex; gap:10px; align-items:flex-start;
  background:rgba(180,83,9,.07); border:1px solid rgba(180,83,9,.28);
  border-radius:var(--radius-sm); padding:14px 18px; margin-bottom:40px;
}
.legal-draft strong{ color:var(--warn); }
.legal-draft p{ margin:0; color:var(--text-dim); font-size:.88rem; line-height:1.6; }
.legal-body h2{ font-size:1.15rem; color:var(--text); margin:36px 0 12px; }
.legal-body h2:first-child{ margin-top:0; }
.legal-body p, .legal-body li{ color:var(--text-dim); font-size:var(--fs-small); line-height:1.7; margin:0 0 12px; }
.legal-body ul{ padding-left:20px; margin:0 0 12px; }
.legal-body strong{ color:var(--text); }
.legal-body a{ color:var(--accent); }

/* Документ с оглавлением слева (Terms, Privacy).
   На компьютере меню прилипает при прокрутке и подсвечивает текущую главу,
   на телефоне это раскрывающийся список над текстом. */
.legal-main--doc{ max-width:1180px; }
.legal-head{ max-width:760px; }
.legal-doc{ display:grid; grid-template-columns:300px minmax(0, 1fr); gap:48px; align-items:start; }
/* без своей прокрутки: если меню выше окна, оно едет вместе со страницей и
   прилипает нижним краем (отступ сверху считает main.js, --toc-top) */
.legal-toc{ position:sticky; top:var(--toc-top, calc(var(--header-h, 72px) + 20px)); }
.legal-toc__box{
  padding:18px 14px 14px; border-radius:var(--radius);
  background:var(--surface); border:1px solid color-mix(in srgb, var(--accent) 16%, var(--line-strong));
}
.legal-toc__title{
  list-style:none; cursor:default; padding:0 8px 10px;
  font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-mute);
}
.legal-toc__title::-webkit-details-marker{ display:none; }
.legal-toc__list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.legal-toc__list a{
  display:grid; grid-template-columns:26px 1fr; gap:4px; align-items:baseline;
  padding:4px 8px; border-radius:9px;
  font-size:.86rem; line-height:1.35; color:var(--text-dim);
  transition:background-color .16s ease, color .16s ease;
}
.legal-toc__list a span{ font-variant-numeric:tabular-nums; font-weight:600; color:var(--text-mute); }
/* на компьютере названия глав в одну строку, полное название во всплывающей подсказке */
@media (min-width:901px){
  .legal-toc__list a b{ font-weight:inherit; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}
.legal-toc__list a b{ font-weight:inherit; }
.legal-toc__list a:hover{ background:var(--wash-2, var(--surface-2)); color:var(--text); }
.legal-toc__list a[aria-current="true"]{ background:var(--accent-soft); color:var(--accent); font-weight:600; }
.legal-toc__list a[aria-current="true"] span{ color:var(--accent); }
.legal-toc__other{ margin:12px 8px 0; font-size:.85rem; color:var(--text-mute); }
.legal-toc__other a{ color:var(--accent); font-weight:600; }

.legal-main--doc .legal-body{ max-width:760px; }
.legal-sec{ padding-bottom:12px; }
.legal-sec + .legal-sec{ border-top:1px solid var(--line); padding-top:28px; margin-top:16px; }
.legal-main--doc .legal-body h2{ display:flex; gap:12px; align-items:baseline; margin:0 0 14px; font-size:1.25rem; line-height:1.3; letter-spacing:-.01em; }
.legal-sec__num{
  flex:none; min-width:32px; height:32px; padding:0 8px; border-radius:10px;
  display:inline-grid; place-items:center; transform:translateY(-2px);
  background:var(--accent-soft); color:var(--accent); font-size:.88rem; font-weight:700; font-variant-numeric:tabular-nums;
}
.legal-main--doc .legal-body p, .legal-main--doc .legal-body li{ font-size:1rem; line-height:1.72; color:var(--text-dim); }
.legal-list, .legal-main--doc .legal-body ul{ list-style:disc; margin:0 0 14px; padding-left:22px !important; }
.legal-list li{ margin:0 0 6px !important; }
.legal-list li::marker, .legal-main--doc .legal-body ul li::marker{ color:var(--accent); }
.legal-terms{ margin:4px 0 16px; display:grid; gap:0; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.legal-terms > div{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:16px; padding:12px 16px; }
.legal-terms > div + div{ border-top:1px solid var(--line); }
.legal-terms dt{ font-weight:600; color:var(--text); font-size:.95rem; }
.legal-terms dd{ margin:0; color:var(--text-dim); font-size:.95rem; }
/* поля, которые ещё нужно заполнить */
.legal-ph{
  background:color-mix(in srgb, var(--warn, #B45309) 14%, transparent); color:inherit;
  border-radius:4px; padding:0 3px; font-weight:600; white-space:normal;
}

@media (max-width:900px){
  .legal-doc{ grid-template-columns:1fr; gap:28px; }
  .legal-toc{ position:static; max-height:none; overflow:visible; }
  .legal-toc__title{ cursor:pointer; display:flex; justify-content:space-between; align-items:center; padding:0 8px; }
  .legal-toc__title::after{ content:""; width:10px; height:10px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg) translateY(-3px); transition:transform .2s ease; }
  .legal-toc__box[open] .legal-toc__title{ padding-bottom:10px; }
  .legal-toc__box[open] .legal-toc__title::after{ transform:rotate(-135deg) translateY(-3px); }
}
@media (max-width:560px){
  .legal-terms > div{ grid-template-columns:1fr; gap:2px; }
  .legal-main--doc .legal-body h2{ font-size:1.12rem; }
}

/* ---------- Анимированные иконки Lordicon (assets/js/icons.js) ----------
   Когда файл иконки найден, статичная иконка (маска или ::before/::after)
   отключается, а анимированная берёт цвет текста ячейки. */
.has-lordicon{ -webkit-mask:none !important; mask:none !important; }
i[data-ico].has-lordicon{ background-color:transparent; color:var(--accent); }
.has-lordicon::before, .has-lordicon::after{ display:none !important; }
.has-lordicon{ display:block; box-sizing:border-box; }
.has-lordicon lord-icon{ display:block; width:100%; height:100%; }
.stat-row__ico.has-lordicon{ padding:12px; }
@media (max-width:560px){ .stat-row__ico.has-lordicon{ padding:10px; } }
.rl-ico.has-lordicon{ padding:calc(var(--u) * .65); }
.talk__card-ico.has-lordicon, .uvp__done-ico.has-lordicon{ color:#fff; padding:4px; }
.cta__done-ico.has-lordicon{ background-image:none; color:var(--live); padding:9px; }
.tour__alerts i.has-lordicon{ width:20px; height:20px; }

/* Блок «Explore more with Pro Plan»: кнопка ближе к тексту, как в остальных блоках */
#mid-cta .sec-head{ margin-bottom:0; }
#mid-cta .btn-row{ margin-top:28px; }

/* ---------- Страница тарифов (pricing.html) ---------- */
.pricing-page{ padding:56px 0 100px; }
.pricing-page .legal-title{ margin:0 0 32px; }
.pricing-page__note{ max-width:760px; margin:48px auto 0; }

/* акцентное слово в начале заголовка раздела («Solutions:») */
.sec-head__accent{ color:var(--accent); }