/* StartReply startreply.pro. Generated by scripts/build.mjs, edit src/styles. */
@font-face {
  font-family: 'Wix Madefor Display';
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url('/assets/fonts/wix-display-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Wix Madefor Display';
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url('/assets/fonts/wix-display-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Wix Madefor Text';
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url('/assets/fonts/wix-text-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Wix Madefor Text';
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url('/assets/fonts/wix-text-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* Design tokens.
   Palette: neutral off-white page, near-black ink, one brand accent (terracotta) for CTAs and key numbers only.
   Contrast (WCAG): ink on paper 16.9, ink-soft on paper 10.2, muted on paper 5.3,
   on-accent on accent-strong 5.1. #D45C24 on paper is 3.4: never for body text.
   Shape rule: controls 10px, surfaces 14px, small inner elements 8px. Chat quick replies are pills,
   because that is how they look in real messengers. */
:root {
  --paper: #F5F5F2;
  --surface: #FCFCFA;
  --surface-sunk: #EBEBE6;
  --line: #DCDCD5;
  --line-strong: #B4B4AC;
  --ink: #15171B;
  --ink-soft: #3A3E45;
  --muted: #62666E;
  --on-ink: #F5F5F2;

  --accent: #D45C24;
  --accent-strong: #B24A1C;
  --accent-deeper: #963C14;
  --accent-tint: #F7E5D9;
  --on-accent: #FCFAF7;
  --danger: #B42318;

  --font-display: 'Wix Madefor Display', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'Wix Madefor Text', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-xs: 0.8125rem;
  --text-sm: 0.9rem;
  --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --text-h3: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-h2: clamp(1.875rem, 1.35rem + 1.9vw, 2.75rem);
  --text-hero: clamp(2.5rem, 1.7rem + 2.6vw, 3.6rem);
  --text-figure: clamp(1.75rem, 1.4rem + 1.2vw, 2.375rem);

  --gutter: clamp(1rem, 0.4rem + 3vw, 2.5rem);
  --gap: clamp(1rem, 0.6rem + 1vw, 1.5rem);
  --container: 1240px;
  --space-section: clamp(4.5rem, 3rem + 5vw, 8rem);
  --space-head: clamp(1.75rem, 1.3rem + 1.4vw, 2.75rem);

  --radius-control: 10px;
  --radius-surface: 14px;
  --radius-small: 8px;
  --radius-pill: 999px;

  --shadow-soft: 0 1px 2px rgb(24 26 32 / 0.05), 0 8px 24px -14px rgb(24 26 32 / 0.18);
  --shadow-lift: 0 2px 4px rgb(24 26 32 / 0.04), 0 28px 60px -28px rgb(24 26 32 / 0.32);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 160ms;
  --duration-normal: 320ms;

  --z-sticky: 10;
  --z-header: 20;
  --z-skip: 40;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h3 { font-weight: 650; letter-spacing: -0.015em; }
p, dd, figure { margin: 0; }
p, dd { text-wrap: pretty; }
dl { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
b, strong { font-weight: 650; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: 4px;
}

.icon { width: 1.25em; height: 1.25em; flex: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: var(--z-skip);
  padding: 10px 16px;
  border-radius: var(--radius-control);
  background: var(--ink);
  color: var(--on-ink);
  text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; }

main:focus { outline: none; }

.section-title { font-size: var(--text-h2); max-width: 22ch; }
.section-lead { margin-top: 0.9rem; max-width: 56ch; font-size: var(--text-lg); color: var(--ink-soft); }
.section-head { margin-bottom: var(--space-head); }

/* Scroll reveal: only hides content when JS is present to reveal it again. */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  }
  .js .reveal.is-in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}

/* Page frame: sections, header, navigation, buttons, footer. */
main > section {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
  margin-top: var(--space-section);
}
main > .hero { margin-top: 0; }
main > .facts { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }

/* Buttons: 10px corners, the arrow appears only on links that open the app. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.75rem 1.25rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-control);
  font-size: 0.975rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast), transform var(--duration-fast) var(--ease-out);
}
.btn__icon { width: 1.05em; height: 1.05em; transition: transform var(--duration-normal) var(--ease-out); }
.btn:hover .btn__icon { transform: translate(2px, -2px); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent-strong); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-deeper); }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--ink); background: var(--surface); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgb(245 245 242 / 0.88);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
}
@supports (animation-timeline: scroll()) {
  .site-header { animation: header-line linear both; animation-timeline: scroll(); animation-range: 0 120px; }
  @keyframes header-line { to { border-bottom-color: var(--line); } }
}
.site-header__inner {
  width: min(100% - 2 * var(--gutter), var(--container));
  height: 68px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.brand__mark { width: 30px; height: 30px; color: var(--ink); }

.site-nav { display: flex; align-items: center; gap: 1.75rem; margin-left: auto; }
.site-nav ul { display: flex; gap: 1.75rem; }
.site-nav a:not(.btn) { color: var(--ink-soft); text-decoration: none; font-size: 0.95rem; font-weight: 500; }
.site-nav a:not(.btn):hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.site-nav .btn { min-height: 42px; padding: 0.5rem 1rem; font-size: 0.925rem; }

.menu-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: transparent;
}
.menu-toggle .icon { width: 22px; height: 22px; }
.menu-toggle__close { display: none; }
.menu-toggle[aria-expanded='true'] .menu-toggle__open { display: none; }
.menu-toggle[aria-expanded='true'] .menu-toggle__close { display: block; }

@media (max-width: 899px) {
  .menu-toggle { display: inline-flex; }
  .site-nav {
    position: fixed;
    inset: 68px 0 auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 1rem var(--gutter) 1.5rem;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lift);
  }
  .site-nav.is-open { display: flex; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a:not(.btn) { display: block; padding: 0.85rem 0; font-size: 1.125rem; border-bottom: 1px solid var(--line); }
  .site-nav .btn { margin-top: 1rem; min-height: 52px; }
}

/* Footer */
.site-footer { margin-top: var(--space-section); border-top: 1px solid var(--line); }
.site-footer__inner {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
  padding: 2.5rem 0 3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}
.site-footer__links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem; align-content: flex-start; font-size: var(--text-sm); }
.site-footer__links a { color: var(--ink-soft); text-underline-offset: 4px; }
.site-footer__links a:hover { color: var(--ink); }

/* Legal and 404 pages */
.doc {
  width: min(100% - 2 * var(--gutter), 720px);
  margin: clamp(3rem, 2rem + 4vw, 6rem) auto 0;
}
/* "Конфиденциальность" is one long word: the phone size keeps it inside a 320px screen. */
.doc h1 { font-size: clamp(1.75rem, 1.1rem + 2.8vw, 3.25rem); overflow-wrap: break-word; }
.doc__lead { margin-top: 1rem; font-size: var(--text-lg); color: var(--muted); }
.doc h2 { margin-top: 2.5rem; font-size: var(--text-h3); }
.doc p:not(.doc__lead) { margin-top: 0.75rem; color: var(--ink-soft); }
.doc--center { text-align: center; }
.doc--center .btn { margin-top: 2rem; }

/* Hero with the product clips, and the facts strip under it. */
.hero {
  display: grid;
  /* The video gets the wider column, as on Belhard product pages; 6 : 7 keeps both buttons on one line. */
  grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
  gap: clamp(2rem, 1rem + 2.5vw, 3.5rem);
  align-items: center;
  padding-top: clamp(2rem, 1rem + 3vw, 4.5rem);
}
/* Category line over the headline, in sentence case. The dot repeats the one in the favicon. */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.1rem;
  font-size: var(--text-sm);
  font-weight: 650;
  color: var(--accent-deeper);
}
.hero__eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.hero h1 { font-size: var(--text-hero); line-height: 1.03; letter-spacing: -0.04em; }
.hero__lead { margin-top: 1.4rem; max-width: 34ch; font-size: var(--text-lg); line-height: 1.55; color: var(--ink-soft); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
/* Removes the last doubt at the button: what the trial asks for. */
.hero__note { margin-top: 0.9rem; font-size: var(--text-sm); color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .hero__copy > * { animation: rise 800ms var(--ease-out) both; }
  .hero__copy > :nth-child(2) { animation-delay: 60ms; }
  .hero__copy > :nth-child(3) { animation-delay: 120ms; }
  .hero__copy > :nth-child(4) { animation-delay: 180ms; }
  .hero__copy > :nth-child(5) { animation-delay: 240ms; }
  .hero__media { animation: rise 900ms 120ms var(--ease-out) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* Clip tabs over the hero video: a segmented control. */
.hero-video__tabs { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 0.75rem; border-radius: var(--radius-control); background: var(--surface-sunk); }
.hero-video__tab {
  min-height: 40px;
  padding: 0.4rem 0.95rem;
  border: 0;
  border-radius: var(--radius-small);
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 550;
  transition: background-color var(--duration-fast), color var(--duration-fast);
}
.hero-video__tab:hover { color: var(--ink); }
.hero-video__tab[aria-pressed='true'] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-soft); }

/* Facts strip: four numbers a buyer asks about first. */
.facts ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-strong);
}
.facts li { display: grid; gap: 0.35rem; align-content: start; }
.facts strong { font-family: var(--font-display); font-size: var(--text-figure); font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.facts span { max-width: 26ch; font-size: var(--text-sm); color: var(--muted); }

/* Product clips (src/js/video.js): silent 16:9 screen recordings, the window is the video itself. */
.hero-video__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--surface-sunk);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.hero-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Poster with a play button: reduced motion, or a browser that refused autoplay. */
.hero-video__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  border: 0;
  background: rgb(21 23 27 / 0.12);
  cursor: pointer;
}
.hero-video__play span {
  display: grid; place-items: center;
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--accent-strong);
  box-shadow: var(--shadow-lift);
  transition: transform var(--duration-fast) var(--ease-out), background-color var(--duration-fast);
}
.hero-video__play span::before {
  content: '';
  margin-left: 5px;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--on-accent);
}
.hero-video__play:hover span { transform: scale(1.06); background: var(--accent-deeper); }
.hero-video__play:focus-visible span { outline: 3px solid var(--ink); outline-offset: 3px; }
/* Pause and resume, in the corner of the video. Always visible: touch screens have no hover. */
.hero-video__toggle {
  position: absolute; right: 12px; bottom: 12px;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgb(21 23 27 / 0.62);
  color: var(--on-ink);
  cursor: pointer;
  transition: background-color var(--duration-fast);
}
.hero-video__toggle:hover { background: rgb(21 23 27 / 0.85); }
.hero-video__toggle span {
  width: 0; height: 0;
  margin-left: 3px;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent currentColor;
}
.hero-video__toggle.is-playing span { width: 11px; height: 13px; margin-left: 0; border-width: 0 4px; border-color: currentColor; }
.hero-video__play[hidden], .hero-video__toggle[hidden] { display: none; }

/* Home sections between the facts strip and pricing.
   Each section uses its own composition: compare (5 | 7), media pair (7 | 5) over text columns,
   dashboard preview beside a feature list, sticky head beside steps, tinted panel. */

/* What the bot understands: dead search box against a useful answer */
.understand .section-title { margin-bottom: var(--space-head); }
.understand__compare { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); }
.understand__search, .understand__bot { padding: clamp(1.25rem, 0.8rem + 1.6vw, 2rem); border-radius: var(--radius-surface); }
.understand__search { display: flex; flex-direction: column; background: var(--surface-sunk); }
.understand__bot { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.understand__label { font-size: var(--text-sm); font-weight: 600; color: var(--muted); }
.understand__query {
  display: flex; align-items: center; gap: 0.6rem;
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--paper);
  font-size: 0.95rem;
}
.understand__query .icon { color: var(--muted); }
.understand__empty { margin-top: auto; padding-top: 2rem; font-family: var(--font-display); font-size: var(--text-h3); font-weight: 600; color: var(--muted); }
.understand__reply { font-size: var(--text-lg); }
.understand .scene-answer { margin-top: 1rem; }
.picks { margin-top: 1rem; display: grid; }
.picks li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.1rem 1rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--line);
}
.pick__name { font-weight: 600; }
.pick__why { grid-column: 1; color: var(--muted); font-size: var(--text-sm); }
.pick__price { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-family: var(--font-display); font-size: var(--text-h3); font-weight: 700; color: var(--accent-strong); font-variant-numeric: tabular-nums; }

.understand__traits {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  gap: var(--gap);
  margin-top: clamp(2.5rem, 1.5rem + 2.5vw, 4rem);
}
.understand__traits h3 { font-size: var(--text-h3); max-width: 14ch; }
.understand__traits dl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }
.understand__traits dt { font-size: var(--text-sm); color: var(--muted); }
.understand__traits dd { margin-top: 0.35rem; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }

/* Use cases: two cases with a chat preview each, then plain text columns */
.uses .section-title { margin-bottom: var(--space-head); }
.uses__media { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap); margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.use--media {
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: clamp(1.25rem, 0.8rem + 1.4vw, 2rem);
  border-radius: var(--radius-surface);
  background: var(--surface-sunk);
}
.use--media > h3, .use--text > h3 { font-size: var(--text-h3); }
/* Direct children only: the chat bubbles inside the preview keep their own colors. */
.use--media > p, .use--text > p { max-width: 48ch; color: var(--ink-soft); }
.use__preview { margin-top: auto; padding-top: 1.25rem; }
.use__preview figcaption, .cabinet__preview figcaption { margin-top: 0.75rem; font-size: var(--text-sm); color: var(--muted); }

.uses__text { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.uses__text--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.use--text { display: grid; gap: 0.5rem; align-content: start; padding-top: 1.1rem; border-top: 2px solid var(--ink); }
.use__icon { width: 1.75rem; height: 1.75rem; margin-bottom: 0.2rem; color: var(--accent-strong); }

/* Chat pieces of the drawn previews: avatar, bubbles, product cards. */
.chat__avatar {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: var(--radius-small);
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--font-display);
  font-weight: 700;
}
.chat__who { display: flex; flex-direction: column; line-height: 1.25; font-size: 0.925rem; }
.chat__who span { color: var(--muted); font-size: var(--text-xs); }
.msg { max-width: 92%; font-size: 0.925rem; line-height: 1.5; }
.msg p { padding: 0.65rem 0.9rem; border-radius: 14px; }
.msg--user { align-self: flex-end; }
.msg--user p { background: var(--ink); color: var(--on-ink); border-bottom-right-radius: 4px; }
.msg--bot { align-self: flex-start; display: grid; gap: 0.55rem; }
.msg--bot > p { background: var(--paper); border-bottom-left-radius: 4px; }
/* Cards sit in one row; the price stays on the bottom edge even when a long name wraps. */
.pcards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.5rem; }
.pcard { display: grid; grid-template-rows: auto auto 1fr; gap: 0.15rem; padding: 0.7rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface); }
.pcard__name { font-size: 0.85rem; font-weight: 600; line-height: 1.3; }
.pcard__meta { font-size: 0.75rem; color: var(--muted); }
.pcard__price { align-self: end; margin-top: 0.35rem; font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
/* Typing dots of the scenes (src/styles/scenes.css). */
@keyframes blink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

/* Product previews: drawn in the page palette */
.mini-chat, .cab {
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.mini-chat__bar { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); }
.mini-chat__log, .cab__log { display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem; }
.mini-chat .msg, .cab .msg { max-width: 94%; }

/* Dashboard: the Chats screen on the left, the feature list on the right */
.cabinet .section-title { margin-bottom: var(--space-head); }
.cabinet__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }
.cab { position: relative; box-shadow: var(--shadow-lift); }
.cab__head { padding: 0.9rem 1.25rem; border-bottom: 1px solid var(--line); }
.cab__crumb { font-size: var(--text-xs); color: var(--muted); }
.cab__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.cab__body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.cab__sessions { display: grid; align-content: start; gap: 0.35rem; padding: 0.75rem; border-right: 1px solid var(--line); background: var(--paper); }
.cab__sessions li { display: grid; gap: 0.05rem; padding: 0.55rem 0.7rem; border-radius: var(--radius-small); }
.cab__sessions strong { font-size: 0.85rem; font-weight: 600; }
.cab__sessions span { font-size: 0.75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.cab__sessions .is-active { background: var(--surface); box-shadow: inset 2px 0 0 var(--accent-strong), var(--shadow-soft); }
/* The newest conversation carries an unread dot. */
.cab__sessions .is-active strong { display: flex; align-items: center; gap: 0.4rem; }
.cab__sessions .is-active strong::after { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
/* A new request, shown as a notification in the empty right part of the dashboard header. */
.cab__lead {
  position: absolute; top: 0.6rem; right: 0.75rem; z-index: 1;
  display: flex; align-items: center; gap: 0.6rem;
  max-width: min(17rem, calc(100% - 9rem));
  padding: 0.5rem 0.75rem 0.5rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  font-size: 0.8rem; line-height: 1.35;
  color: var(--ink-soft);
}
.cab__lead b { display: block; font-weight: 650; color: var(--ink); }
.cab__lead-icon { flex: none; width: 1.75rem; height: 1.75rem; padding: 0.4rem; border-radius: 50%; background: var(--accent-tint); color: var(--accent-deeper); }
.cab__chat-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line); font-size: 0.75rem; color: var(--muted); }
.cab__tag { padding: 0.2rem 0.55rem; border: 1px solid var(--line); border-radius: var(--radius-small); color: var(--ink-soft); white-space: nowrap; }
.cab .pcard__meta { color: var(--accent-deeper); }

.cabinet__list { display: grid; gap: clamp(0.6rem, 0.4rem + 0.6vw, 1rem); }
/* Padding pulled back by the margin: the text stays aligned and the scene can tint the row. */
.cabinet__list > div { margin: 0 -0.75rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-small); }
/* An icon leads each term; the description lines up with the term text, not with the icon. */
.cabinet__list dt, .limits__list dt { display: flex; align-items: center; gap: 0.6rem; font-weight: 650; }
.cabinet__list dd, .limits__list dd { margin-top: 0.3rem; padding-left: 1.85rem; max-width: 42ch; color: var(--ink-soft); }
.cabinet__icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--accent-strong); }
/* "Not included" reads as a quiet cross, not as an alarm. */
.limits__icon { flex: none; width: 1.25rem; height: 1.25rem; padding: 0.25rem; border-radius: 50%; background: var(--paper); color: var(--muted); }

/* Launch: the head stays in view while the steps scroll past */
.launch { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.launch__head { position: sticky; top: 100px; }
.launch__head .btn { margin-top: 1.75rem; }
.launch__steps { counter-reset: step; }
.launch__steps li {
  position: relative;
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--line-strong);
}
.launch__steps li:last-child { border-bottom: 1px solid var(--line-strong); }
.launch__steps li::before {
  content: counter(step);
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-size: var(--text-figure);
  font-weight: 700;
  line-height: 1;
  color: var(--accent-strong);
}
/* A rule over each step; the launch scene draws them one after another. */
.launch__bar { position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--ink); transform-origin: left; }
.launch__steps h3 { font-size: var(--text-h3); }
.launch__steps p { margin-top: 0.4rem; max-width: 52ch; color: var(--ink-soft); }

/* Limits: a quiet panel in the same paper family; a muted cross marks each missing feature. */
.limits {
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  border-radius: var(--radius-surface);
  background: var(--surface-sunk);
}
.limits .section-title { margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.limits__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 1rem + 1.5vw, 2.25rem) var(--gap); }

/* Pricing comparison table, the two "talk to us" offers, FAQ and the demo request form. */

/* Table: label column plus one column per plan; the recommended plan is a raised column. */
/* position: relative keeps the visually-hidden yes/no labels inside the scroller,
   otherwise they escape the clip and widen the whole page on phones. */
.ptable-wrap { position: relative; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.ptable-wrap:focus-visible { outline-offset: -3px; }
.ptable { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: 0.95rem; }
.ptable th, .ptable td { padding: 0.8rem 1.1rem; text-align: left; vertical-align: middle; }
/* Plan heads align at the top, and the "Recommended" badge sits in the top padding of its column:
   names and prices stay on one line whatever the length of the "for whom" text under them. */
.ptable thead th { position: relative; vertical-align: top; padding-top: 2.9rem; padding-bottom: 1.25rem; }
.ptable thead .plan__badge { position: absolute; top: 1.1rem; left: 1.1rem; margin: 0; }
.ptable__corner, .ptable tbody th[scope='row'] { width: 28%; }
.ptable tbody th { font-weight: 500; color: var(--ink-soft); }
.ptable tbody tr:not(.ptable__group) > * { border-top: 1px solid var(--line); }
.ptable__group th {
  padding-top: 2rem;
  padding-bottom: 0.6rem;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink);
}
.ptable tbody td { font-variant-numeric: tabular-nums; font-weight: 550; }
.ptable__yes { width: 1.2em; height: 1.2em; color: var(--accent-strong); }
.ptable__no { color: var(--muted); font-weight: 400; font-size: var(--text-sm); }
.ptable tfoot td { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.ptable tfoot .btn { width: 100%; }

/* Below 1100px the per-plan buttons ("Попробовать бесплатно" does not wrap) would stretch the table
   into a sideways scroll: one button under it instead. */
.pricing__cta { display: none; margin-top: 1.25rem; }

.ptable .is-featured { background: var(--surface); }
.ptable thead .is-featured { border-radius: var(--radius-surface) var(--radius-surface) 0 0; box-shadow: inset 0 3px 0 var(--accent-strong); }
.ptable tfoot .is-featured { border-radius: 0 0 var(--radius-surface) var(--radius-surface); }

.plan__badge { display: block; margin-bottom: 0.5rem; font-size: var(--text-xs); font-weight: 650; color: var(--accent-strong); }
.plan__name { display: block; font-family: var(--font-display); font-size: var(--text-h3); font-weight: 700; letter-spacing: -0.015em; }
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.35rem; margin-top: 0.5rem; }
.plan__amount { font-family: var(--font-display); font-size: clamp(2.25rem, 1.8rem + 1.4vw, 3rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.plan__currency { font-family: var(--font-display); font-size: 1.1rem; font-weight: 650; }
.plan__period { color: var(--muted); font-size: var(--text-sm); font-weight: 400; }
.plan__for { display: block; margin-top: 0.6rem; max-width: 24ch; color: var(--muted); font-size: var(--text-sm); font-weight: 400; line-height: 1.45; }

/* Phone cards: the same plan head as the table, then limits as rows and included features with a check.
   Plain plans sit on the sunk surface like the offers under them; the recommended one is raised. */
.plan-cards { display: none; gap: var(--gap); }
.plan-card { display: grid; align-content: start; padding: 1.5rem 1.25rem; border-radius: var(--radius-surface); background: var(--surface-sunk); }
.plan-card.is-featured { background: var(--surface); border: 1px solid var(--line); box-shadow: inset 0 3px 0 var(--accent-strong), var(--shadow-soft); }
.plan-card__facts { margin-top: 1.25rem; display: grid; }
.plan-card__facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.6rem 0; border-top: 1px solid var(--line); }
.plan-card__facts dt { color: var(--ink-soft); font-size: 0.95rem; }
.plan-card__facts dd { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.plan-card__features { display: grid; gap: 0.5rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.plan-card__features li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; }
.plan-card__check { width: 1.15em; height: 1.15em; flex: none; color: var(--accent-strong); }
.plan-card .btn { margin-top: 1.4rem; width: 100%; }

/* Enterprise and setup: two lines under the table, each with a way to ask */
.pricing__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); }
.pricing__more li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem 1.5rem;
  align-items: baseline;
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius-surface);
  background: var(--surface-sunk);
}
.pricing__more strong { font-family: var(--font-display); font-size: 1.1rem; }
.more__text { grid-column: 1; color: var(--ink-soft); font-size: 0.95rem; }
.more__price { grid-column: 2; grid-row: 1; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; }
.more__action {
  grid-column: 2; grid-row: 2;
  justify-self: end;
  display: inline-flex; align-items: center; gap: 0.35em;
  color: var(--accent-deeper);
  font-weight: 600;
  font-size: 0.95rem;
  text-underline-offset: 4px;
}
.more__action .icon { width: 1em; height: 1em; transition: transform var(--duration-normal) var(--ease-out); }
.more__action:hover { color: var(--ink); }
.more__action:hover .icon { transform: translateX(3px); }

/* FAQ: the title on the left, questions on the right; an answer opens on click. */
.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.5rem, 1rem + 3vw, 5rem); align-items: start; }
.faq__list { border-bottom: 1px solid var(--line-strong); }
.faq__item { border-top: 1px solid var(--line-strong); }
.faq__item summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding: 1.15rem 0;
  font-family: var(--font-display); font-size: var(--text-h3); font-weight: 650; line-height: 1.3; letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--accent-deeper); }
/* A plus drawn from two bars turns into a cross while the answer is open. */
.faq__item summary::after {
  content: '';
  flex: none;
  width: 0.85rem; height: 0.85rem;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  color: var(--accent-strong);
  transition: transform var(--duration-normal) var(--ease-out);
}
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item p { max-width: 56ch; padding-bottom: 1.4rem; color: var(--ink-soft); }

/* Demo request: copy on the left, form panel on the right */
.request { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.request__direct { margin-top: 1.5rem; color: var(--ink-soft); }
.request__direct a { color: var(--accent-deeper); font-weight: 600; text-underline-offset: 4px; }
.request__form {
  display: grid; gap: 1.1rem;
  padding: clamp(1.25rem, 0.8rem + 1.6vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-surface);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.field { display: grid; gap: 0.4rem; }
.field label { font-weight: 600; font-size: 0.95rem; }
.field input {
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: #fff;
  font-size: 1rem;
}
.field input::placeholder { color: var(--muted); }
.field input:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 1px; border-color: var(--accent-strong); }
.field input[aria-invalid='true'] { border-color: var(--danger); }
.field__error { font-size: var(--text-sm); color: var(--danger); font-weight: 550; }
.request__form > .btn { justify-self: start; }
.request__result { display: grid; gap: 0.9rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.request__result-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.request__sent { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.9rem 1rem; border-radius: var(--radius-control); background: var(--accent-tint); color: var(--accent-deeper); font-weight: 600; }
.request__sent-icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; }
.request__form .btn[aria-busy='true'] { opacity: 0.7; cursor: progress; }
.request__copied { font-size: var(--text-sm); color: var(--muted); white-space: pre-line; }

/* Scenes (src/js/scenes.js): blocks that play a short scripted animation once, when they scroll into view.
   The markup holds the final state. Parts are hidden until a scene plays only inside
   prefers-reduced-motion: no-preference and only with the .js class, so without JS or with reduced
   motion every block is shown as it ends. Each scene is over within five seconds and never loops. */

/* Typing dots sit over the place the reply takes, so nothing below moves when the reply appears. */
.scene-answer { position: relative; display: flex; flex-direction: column; }
.scene-typing {
  position: absolute; top: 0; left: 0;
  display: inline-flex; gap: 4px;
  padding: 0.8rem 0.95rem;
  border-radius: 14px;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
}
.scene-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
.understand__bot .scene-typing { background: var(--surface-sunk); }
/* The typed copy of the query exists only for the scene; the real text is .understand__full. */
.understand__text { position: relative; }
.understand__overlay { display: none; position: absolute; inset: 0; }

@keyframes scene-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes scene-drop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes scene-pop { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes scene-blip { 0% { opacity: 0; transform: translateY(6px); } 15%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes scene-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes scene-mark { 0%, 100% { background-color: transparent; } 20%, 80% { background-color: var(--accent-tint); } }
@keyframes scene-caret { 50% { border-right-color: transparent; } }

@media (prefers-reduced-motion: no-preference) {
  .is-playing .scene-typing span { animation: blink 0.9s 4 ease-in-out; }
  .is-playing .scene-typing span:nth-child(2) { animation-delay: 0.15s; }
  .is-playing .scene-typing span:nth-child(3) { animation-delay: 0.3s; }

  /* Facts: the numbers count up from zero (scenes.js), here they only fade in. */
  .js [data-scene='facts'] [data-count] { opacity: 0; }
  .js [data-scene='facts'].is-playing [data-count] { opacity: 1; transition: opacity 300ms var(--ease-out); }

  /* Understand: the site search types the query and finds nothing, then the bot answers with three picks. */
  .js [data-scene='understand'] .understand__empty,
  .js [data-scene='understand'] .understand__reply,
  .js [data-scene='understand'] .picks li { opacity: 0; }
  /* The full query keeps its place, transparent, so the box never changes height while it types:
     the typed copy is laid over it with the same width and wraps the same way. */
  .js [data-scene='understand'] .understand__full { color: transparent; }
  .js [data-scene='understand'] .understand__overlay { display: block; opacity: 0; }
  .js [data-scene='understand'].is-playing .understand__overlay { opacity: 1; }
  /* The caret is the right border of the typed text: it moves with the text, nothing else moves. */
  .js [data-scene='understand'].is-playing:not(.is-typed) .understand__typed {
    border-right: 2px solid var(--ink);
    animation: scene-caret 0.8s steps(1) infinite;
  }
  .js [data-scene='understand'].is-playing .understand__empty { animation: scene-in 480ms 1350ms var(--ease-out) forwards; }
  .js [data-scene='understand'].is-playing .scene-typing { animation: scene-blip 950ms 1650ms var(--ease-out) both; }
  .js [data-scene='understand'].is-playing .understand__reply { animation: scene-in 480ms 2550ms var(--ease-out) forwards; }
  .js [data-scene='understand'].is-playing .picks li { animation: scene-in 480ms 2800ms var(--ease-out) forwards; }
  .js [data-scene='understand'].is-playing .picks li:nth-child(2) { animation-delay: 3000ms; }
  .js [data-scene='understand'].is-playing .picks li:nth-child(3) { animation-delay: 3200ms; }

  /* What the bot understands: the five examples come in one by one. */
  .js [data-scene='traits'] dl > div { opacity: 0; }
  .js [data-scene='traits'].is-playing dl > div { animation: scene-in 520ms var(--ease-out) forwards; }
  .js [data-scene='traits'].is-playing dl > div:nth-child(2) { animation-delay: 120ms; }
  .js [data-scene='traits'].is-playing dl > div:nth-child(3) { animation-delay: 240ms; }
  .js [data-scene='traits'].is-playing dl > div:nth-child(4) { animation-delay: 360ms; }
  .js [data-scene='traits'].is-playing dl > div:nth-child(5) { animation-delay: 480ms; }

  /* Use cases: the shopper asks, the bot types, the answer and its product cards arrive. */
  .js [data-scene='chat'] .msg--user,
  .js [data-scene='chat'] .msg--bot > p,
  .js [data-scene='chat'] .pcard { opacity: 0; }
  .js [data-scene='chat'].is-playing .msg--user { animation: scene-in 420ms 150ms var(--ease-out) forwards; }
  .js [data-scene='chat'].is-playing .scene-typing { animation: scene-blip 900ms 650ms var(--ease-out) both; }
  .js [data-scene='chat'].is-playing .msg--bot > p { animation: scene-in 420ms 1500ms var(--ease-out) forwards; }
  .js [data-scene='chat'].is-playing .pcard { animation: scene-in 420ms 1750ms var(--ease-out) forwards; }
  .js [data-scene='chat'].is-playing .pcard:nth-child(2) { animation-delay: 1950ms; }

  /* Dashboard: a new conversation drops into the list, plays, and a request pops up in the header.
     The list on the right tints the feature the preview shows at that moment. */
  .js [data-scene='cabinet'] .cab__sessions .is-active,
  .js [data-scene='cabinet'] .cab__log .msg--user,
  .js [data-scene='cabinet'] .cab__log .msg--bot > p,
  .js [data-scene='cabinet'] .cab__log .pcard,
  .js [data-scene='cabinet'] .cab__lead { opacity: 0; }
  .js [data-scene='cabinet'].is-playing .cab__sessions .is-active { animation: scene-drop 520ms 250ms var(--ease-out) forwards; }
  .js [data-scene='cabinet'].is-playing .cab__log .msg--user { animation: scene-in 420ms 750ms var(--ease-out) forwards; }
  .js [data-scene='cabinet'].is-playing .scene-typing { animation: scene-blip 900ms 1200ms var(--ease-out) both; }
  .js [data-scene='cabinet'].is-playing .cab__log .msg--bot > p { animation: scene-in 420ms 2050ms var(--ease-out) forwards; }
  .js [data-scene='cabinet'].is-playing .cab__log .pcard { animation: scene-in 420ms 2300ms var(--ease-out) forwards; }
  .js [data-scene='cabinet'].is-playing .cab__log .pcard:nth-child(2) { animation-delay: 2500ms; }
  .js [data-scene='cabinet'].is-playing .cab__lead { animation: scene-pop 560ms 3100ms var(--ease-out) forwards; }
  .js [data-scene='cabinet'].is-playing [data-sync='session'] { animation: scene-mark 1800ms 250ms ease-in-out; }
  .js [data-scene='cabinet'].is-playing [data-sync='lead'] { animation: scene-mark 1800ms 3100ms ease-in-out; }

  /* Launch: the rule over each step draws in turn, then its number and text come in. */
  .js [data-scene='launch'] .launch__bar { transform: scaleX(0); }
  .js [data-scene='launch'] li::before,
  .js [data-scene='launch'] li > h3,
  .js [data-scene='launch'] li > p { opacity: 0; }
  .js [data-scene='launch'].is-playing .launch__bar { animation: scene-draw 600ms var(--ease-out) forwards; }
  .js [data-scene='launch'].is-playing li::before,
  .js [data-scene='launch'].is-playing li > h3,
  .js [data-scene='launch'].is-playing li > p { animation: scene-in 520ms 150ms var(--ease-out) forwards; }
  .js [data-scene='launch'].is-playing li:nth-child(2) .launch__bar { animation-delay: 400ms; }
  .js [data-scene='launch'].is-playing li:nth-child(2)::before,
  .js [data-scene='launch'].is-playing li:nth-child(2) > h3,
  .js [data-scene='launch'].is-playing li:nth-child(2) > p { animation-delay: 550ms; }
  .js [data-scene='launch'].is-playing li:nth-child(3) .launch__bar { animation-delay: 800ms; }
  .js [data-scene='launch'].is-playing li:nth-child(3)::before,
  .js [data-scene='launch'].is-playing li:nth-child(3) > h3,
  .js [data-scene='launch'].is-playing li:nth-child(3) > p { animation-delay: 950ms; }
  .js [data-scene='launch'].is-playing li:nth-child(4) .launch__bar { animation-delay: 1200ms; }
  .js [data-scene='launch'].is-playing li:nth-child(4)::before,
  .js [data-scene='launch'].is-playing li:nth-child(4) > h3,
  .js [data-scene='launch'].is-playing li:nth-child(4) > p { animation-delay: 1350ms; }
}

/* Collapse rules for every section, loaded last so they override desktop placement. */
@media (max-width: 1099px) {
  /* One column, the video right under the headline and before the lead and the buttons:
     the copy box dissolves into the grid so its children can be ordered around the video. */
  .hero { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .hero__copy { display: contents; }
  .hero__copy > * { order: 2; }
  .hero__copy > .hero__eyebrow, .hero__copy > h1 { order: 0; }
  .hero__eyebrow { justify-self: start; }
  .hero__media { order: 1; max-width: 760px; margin-top: 1.5rem; }
  .understand__traits { grid-template-columns: minmax(0, 1fr); }
  .understand__traits dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ptable tfoot { display: none; }
  .ptable tbody tr:last-child .is-featured { border-radius: 0 0 var(--radius-surface) var(--radius-surface); }
  .pricing__cta { display: block; }
}
@media (max-width: 959px) {
  .understand__compare, .uses__media, .cabinet__body, .launch, .request { grid-template-columns: minmax(0, 1fr); }
  .cabinet__preview { max-width: 680px; }
  .launch__head { position: static; }
  .cabinet__list, .limits__list, .uses__text { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.75rem; }
  .pricing__more { grid-template-columns: minmax(0, 1fr); }
  .faq { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .cabinet__list, .limits__list, .uses__text, .uses__text--2 { grid-template-columns: minmax(0, 1fr); }
  .understand__traits dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .understand__empty { padding-top: 1.25rem; }
  /* Tall enough for the whole first scenario, cards included, from 340px wide up. */
  /* On phones the Chats preview shows only the open conversation. */
  .cab__body { grid-template-columns: minmax(0, 1fr); }
  .cab__sessions { display: none; }
  /* Product cards become a compact list: every card and price in view, nothing scrolls sideways. */
  .pcards { grid-auto-flow: row; grid-auto-columns: auto; gap: 0.4rem; }
  .pcard { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 0.75rem; padding: 0.6rem 0.75rem; }
  .pcard__price { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: 0; }
  /* Plans: one card each instead of a table that scrolls sideways and hides the recommended plan. */
  .ptable-wrap, .pricing__cta { display: none; }
  .plan-cards { display: grid; }
}
@media (max-width: 479px) {
  .hero__actions .btn, .launch__head .btn, .request__form > .btn { width: 100%; }
  .hero-video__tabs { display: flex; }
  .hero-video__tab { flex: 1; padding-inline: 0.5rem; }
  .msg { max-width: 100%; }
  .pricing__more li { grid-template-columns: minmax(0, 1fr); }
  .more__price, .more__action { grid-column: 1; grid-row: auto; justify-self: start; }
  .more__action { margin-top: 0.4rem; }
}