/* Лендинг DZENCRM. Токены сняты с frontend/assets/css/main.css: акцент «Синий»
   (44,95,137) — дефолт stores/main.js, лестница тёмных поверхностей считается
   от него тем же color-mix, что в :root.dark приложения.
   Скруглений у кнопок и полей нет — это решение проекта, а не недоделка. */

@font-face {
   font-family: 'Gilroy';
   src: url('../fonts/Gilroy-Regular.woff2') format('woff2');
   font-weight: 400;
   font-display: swap;
}
@font-face {
   font-family: 'Gilroy';
   src: url('../fonts/Gilroy-Medium.woff2') format('woff2');
   font-weight: 500;
   font-display: swap;
}
@font-face {
   font-family: 'Gilroy';
   src: url('../fonts/Gilroy-SemiBold.woff2') format('woff2');
   font-weight: 600;
   font-display: swap;
}
@font-face {
   font-family: 'Gilroy';
   src: url('../fonts/Gilroy-Bold.woff2') format('woff2');
   font-weight: 700;
   font-display: swap;
}

:root {
   --accent: rgb(44, 95, 137);
   --accent-hover: color-mix(in srgb, var(--accent), #fff 7%);
   --accent-light: color-mix(in srgb, var(--accent), #fff 50%);
   --accent-wash: color-mix(in srgb, var(--accent), transparent 92%);

   --surface-0: #ffffff;
   --surface-50: #f8fafc;
   --surface-100: #f1f5f9;
   --surface-200: #e2e8f0;
   --surface-300: #cbd5e1;
   --surface-400: #94a3b8;
   --surface-500: #64748b;
   --surface-700: #334155;
   --surface-900: #0f172a;

   /* Тёмные поверхности — тем же способом, что в :root.dark приложения. */
   --dark-900: color-mix(in srgb, var(--accent) 20%, #171717);
   --dark-800: color-mix(in srgb, var(--accent) 20%, #252525);
   --dark-700: color-mix(in srgb, var(--accent) 20%, #2e2e2e);
   --dark-500: color-mix(in srgb, var(--accent) 20%, #363636);

   --text: var(--surface-700);
   --text-strong: var(--surface-900);
   --text-muted: var(--surface-500);
   --line: var(--surface-200);

   --container: 1200px;
   --gutter: 20px;
   --section-y: clamp(56px, 7vw, 104px);
}

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

html {
   scroll-behavior: smooth;
   /* Липкая шапка перекрывает якорь, если не отодвинуть цель прокрутки. */
   scroll-padding-top: 88px;
}

/* Видимый фокус: без него по странице нельзя ходить с клавиатуры (WCAG 2.4.7). */
:focus-visible {
   outline: 3px solid var(--accent-light);
   outline-offset: 3px;
}

.header :focus-visible,
.hero :focus-visible,
.cta :focus-visible,
.footer :focus-visible {
   outline-color: #fff;
}

.skip {
   position: absolute;
   left: -9999px;
   top: 0;
   z-index: 100;
   padding: 12px 20px;
   background: var(--accent);
   color: #fff;
   font-weight: 600;
   text-decoration: none;
}

.skip:focus {
   left: 0;
}

body {
   margin: 0;
   font-family: 'Gilroy', system-ui, -apple-system, 'Segoe UI', sans-serif;
   font-size: 17px;
   line-height: 1.6;
   color: var(--text);
   background: var(--surface-0);
   -webkit-font-smoothing: antialiased;
}

img {
   max-width: 100%;
   display: block;
}

a {
   color: inherit;
}

h1,
h2,
h3,
h4 {
   color: var(--text-strong);
   line-height: 1.15;
   margin: 0;
   font-weight: 700;
   letter-spacing: -0.02em;
}

h1 {
   font-size: clamp(32px, 4.6vw, 56px);
}

h2 {
   font-size: clamp(27px, 3.2vw, 40px);
}

h3 {
   font-size: clamp(19px, 1.6vw, 22px);
   font-weight: 600;
}

h4 {
   font-size: clamp(19px, 1.6vw, 22px);
   font-weight: 600;
}

p {
   margin: 0;
}

.container {
   max-width: var(--container);
   margin: 0 auto;
   padding: 0 var(--gutter);
}

.section {
   padding: var(--section-y) 0;
}

.section--soft {
   background: var(--surface-50);
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
}

.section__head {
   max-width: 760px;
   margin-bottom: clamp(32px, 4vw, 56px);
}

.section__lead {
   margin-top: 16px;
   font-size: clamp(17px, 1.5vw, 19px);
   color: var(--text-muted);
}

.eyebrow {
   display: inline-block;
   margin-bottom: 16px;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--accent);
}

/* ---------- Кнопки ---------- */

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 14px 26px;
   font: inherit;
   font-weight: 600;
   text-decoration: none;
   border: 1px solid transparent;
   cursor: pointer;
   transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.btn--primary {
   background: var(--accent);
   color: #fff;
}

.btn--primary:hover {
   background: var(--accent-hover);
}

.btn--ghost {
   background: transparent;
   border-color: rgba(255, 255, 255, 0.28);
   color: #fff;
}

.btn--ghost:hover {
   border-color: rgba(255, 255, 255, 0.6);
   background: rgba(255, 255, 255, 0.06);
}

.btn--outline {
   background: transparent;
   border-color: var(--accent);
   color: var(--accent);
}

.btn--outline:hover {
   background: var(--accent-wash);
}

/* ---------- Шапка ---------- */

.header {
   position: sticky;
   top: 0;
   z-index: 50;
   background: var(--dark-900);
   border-bottom: 1px solid rgba(255, 255, 255, 0.08);
   color: #fff;
}

.header__inner {
   display: flex;
   align-items: center;
   gap: 28px;
   height: 72px;
}

.logo {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   font-weight: 700;
   font-size: 20px;
   letter-spacing: -0.02em;
   text-decoration: none;
   color: #fff;
   flex: none;
}

.logo__mark {
   width: 32px;
   height: 32px;
   display: grid;
   place-items: center;
   background: var(--accent);
   font-size: 17px;
   font-weight: 700;
}

.nav {
   display: flex;
   gap: 24px;
   margin-right: auto;
   font-size: 15px;
}

.nav a {
   text-decoration: none;
   color: rgba(255, 255, 255, 0.72);
   padding: 6px 0;
   border-bottom: 2px solid transparent;
   transition: color 0.15s, border-color 0.15s;
}

.nav a:hover {
   color: #fff;
   border-color: var(--accent-light);
}

.nav a.is-current {
   color: #fff;
   border-color: var(--accent-light);
}

.header__phone {
   font-weight: 600;
   text-decoration: none;
   white-space: nowrap;
}

.burger {
   display: none;
   width: 44px;
   height: 44px;
   margin-left: auto;
   background: transparent;
   border: 1px solid rgba(255, 255, 255, 0.25);
   color: #fff;
   cursor: pointer;
   padding: 0;
}

.burger span,
.burger span::before,
.burger span::after {
   display: block;
   width: 18px;
   height: 2px;
   background: currentColor;
   margin: 0 auto;
   content: '';
   position: relative;
}

.burger span::before {
   top: -6px;
   position: absolute;
}

.burger span::after {
   top: 6px;
   position: absolute;
}

/* ---------- Первый экран ---------- */

.hero {
   background: var(--dark-900);
   color: #fff;
   padding: clamp(48px, 6vw, 88px) 0 0;
   overflow: hidden;
}

.hero h1 {
   color: #fff;
   max-width: 15ch;
}

.hero__lead {
   margin-top: 22px;
   max-width: 58ch;
   font-size: clamp(17px, 1.6vw, 20px);
   color: rgba(255, 255, 255, 0.72);
}

.hero__actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 32px;
}

.hero__note {
   margin-top: 18px;
   font-size: 15px;
   color: rgba(255, 255, 255, 0.5);
}

.hero__shot {
   margin-top: clamp(40px, 5vw, 64px);
   /* Снимок уходит под нижнюю границу экрана — верх приложения виден целиком,
      низ обрезается полосой фактов. */
   margin-bottom: -1px;
}

/* ---------- Рамка браузера вокруг снимка ---------- */

.frame {
   background: var(--dark-700);
   border: 1px solid rgba(255, 255, 255, 0.12);
   box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.frame__bar {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 10px 14px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.frame__dot {
   width: 10px;
   height: 10px;
   border-radius: 999px;
   background: rgba(255, 255, 255, 0.22);
}

.frame__url {
   margin-left: 10px;
   font-size: 13px;
   /* 0.5, а не 0.45: на 0.45 контраст был 4,41 при норме 4,5. */
   color: rgba(255, 255, 255, 0.5);
}

.frame__body {
   background: var(--surface-100);
}

.frame__body img {
   width: 100%;
}

/* Заглушка под снимок: держит пропорции до того, как приедет картинка. */
.shot-placeholder {
   aspect-ratio: 16 / 9;
   display: grid;
   place-items: center;
   background: repeating-linear-gradient(
      -45deg,
      var(--surface-100),
      var(--surface-100) 12px,
      var(--surface-200) 12px,
      var(--surface-200) 24px
   );
   color: var(--surface-500);
   font-size: 15px;
   text-align: center;
   padding: 24px;
}

/* ---------- Полоса фактов ---------- */

.facts {
   background: var(--dark-800);
   color: #fff;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.facts__grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
}

.fact {
   padding: 28px 28px 30px;
   border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.fact:first-child {
   border-left: 0;
   padding-left: 0;
}

.fact__value {
   font-size: clamp(20px, 2vw, 26px);
   font-weight: 700;
   letter-spacing: -0.02em;
}

.fact__label {
   margin-top: 6px;
   font-size: 15px;
   color: rgba(255, 255, 255, 0.55);
}

/* ---------- Заглушки секций (снимаются по мере наполнения) ---------- */

.stub {
   border: 1px dashed var(--surface-300);
   background: var(--surface-50);
   color: var(--text-muted);
   padding: 40px 24px;
   text-align: center;
   font-size: 15px;
}

/* ---------- Подвал ---------- */

.footer {
   background: var(--dark-900);
   color: rgba(255, 255, 255, 0.7);
   padding: clamp(48px, 5vw, 72px) 0 32px;
}

.footer__grid {
   display: grid;
   grid-template-columns: 1.4fr 1fr 1fr;
   gap: 40px;
}

.footer__about {
   margin-top: 18px;
   max-width: 42ch;
   font-size: 15px;
   color: rgba(255, 255, 255, 0.5);
}

.footer__title {
   color: #fff;
   font-size: 15px;
   font-weight: 600;
   margin-bottom: 14px;
}

.footer__list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   gap: 10px;
   font-size: 15px;
}

.footer__list a {
   text-decoration: none;
}

.footer__list a:hover {
   color: #fff;
}

.footer__bottom {
   margin-top: 40px;
   padding-top: 24px;
   border-top: 1px solid rgba(255, 255, 255, 0.08);
   display: flex;
   flex-wrap: wrap;
   gap: 12px 24px;
   justify-content: space-between;
   font-size: 14px;
   /* 0.55, а не 0.4: на 0.4 контраст был 3,66 при норме 4,5. */
   color: rgba(255, 255, 255, 0.55);
}

/* ---------- Адаптив ---------- */

@media (max-width: 1024px) {
   .facts__grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .fact {
      border-left: 0;
      padding: 22px 0;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
   }

   .fact:nth-child(2) {
      border-left: 1px solid rgba(255, 255, 255, 0.08);
      padding-left: 24px;
   }

   .fact:nth-child(4) {
      border-left: 1px solid rgba(255, 255, 255, 0.08);
      padding-left: 24px;
   }

   .fact:first-child,
   .fact:nth-child(2) {
      border-top: 0;
   }

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

   .footer__about {
      grid-column: 1 / -1;
   }
}

@media (max-width: 860px) {
   .nav {
      position: fixed;
      inset: 72px 0 auto;
      flex-direction: column;
      gap: 0;
      background: var(--dark-800);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding: 8px var(--gutter) 16px;
      margin: 0;
      display: none;
   }

   .nav.is-open {
      display: flex;
   }

   .nav a {
      padding: 12px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.07);
   }

   .header--light .nav {
      background: #fff;
      border-bottom-color: var(--line);
   }

   .header--light .nav a {
      border-bottom-color: var(--line);
   }

   .header__phone {
      margin-left: auto;
   }

   .burger {
      display: block;
      margin-left: 0;
   }
}

@media (max-width: 560px) {
   body {
      font-size: 16px;
   }

   .header__phone {
      display: none;
   }

   /* Номер скрыт — бургер сам уходит к правому краю. */
   .burger {
      margin-left: auto;
   }

   .hero__actions .btn {
      width: 100%;
   }

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

/* ---------- Карточки болей ---------- */

.cards {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1px;
   background: var(--line);
   border: 1px solid var(--line);
}

.card {
   display: flex;
   flex-direction: column;
   background: var(--surface-0);
   padding: 28px 24px 30px;
}

.card__mark {
   width: 36px;
   height: 36px;
   display: grid;
   place-items: center;
   margin-bottom: 18px;
   background: var(--accent-wash);
   color: var(--accent);
   font-weight: 700;
   font-size: 15px;
}

.card h3 {
   margin-bottom: 10px;
}

.card p {
   font-size: 16px;
   color: var(--text-muted);
}

/* Ответ прижат к низу: строки ответов в ряду стоят на одной высоте. */
.card__answer {
   margin-top: auto;
   padding-top: 16px;
   font-size: 15px;
   font-weight: 600;
   color: var(--accent);
   text-decoration: none;
}

.card__answer:hover {
   text-decoration: underline;
}

/* ---------- Цепочка «путь объекта» ---------- */

.flow {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 1px;
   background: var(--line);
   border: 1px solid var(--line);
}

.flow__step {
   position: relative;
   background: var(--surface-0);
   padding: 22px 22px 24px;
}

.flow__num {
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.08em;
   color: var(--accent);
}

.flow__title {
   margin-top: 8px;
   font-weight: 600;
   color: var(--text-strong);
}

.flow__text {
   margin-top: 6px;
   font-size: 15px;
   color: var(--text-muted);
}

.flow__note {
   margin-top: 20px;
   font-size: 15px;
   color: var(--text-muted);
}

/* ---------- Текст и снимок внутри вкладки возможностей ---------- */

.feature__text h3 {
   font-size: clamp(22px, 2vw, 28px);
   font-weight: 700;
   letter-spacing: -0.02em;
}

.feature__text p {
   margin-top: 14px;
   color: var(--text-muted);
}

.feature__list {
   margin: 20px 0 0;
   padding: 0;
   list-style: none;
   display: grid;
   gap: 10px;
   font-size: 16px;
}

.feature__list li {
   position: relative;
   padding-left: 26px;
}

.feature__list li::before {
   content: '';
   position: absolute;
   left: 0;
   top: 9px;
   width: 12px;
   height: 2px;
   background: var(--accent);
}

.feature__media .frame {
   box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
   border-color: var(--surface-300);
   background: var(--surface-200);
}

.feature__media .frame__bar {
   border-bottom-color: var(--surface-300);
}

.feature__media .frame__dot {
   background: var(--surface-400);
}

.feature__media .frame__url {
   color: var(--surface-500);
}

.shot {
   display: block;
   width: 100%;
   height: auto;
   cursor: zoom-in;
}

/* Снимок открывается по клику, поэтому он же должен браться в фокус. */
.shot[role='button']:focus-visible {
   outline: 3px solid var(--accent);
   outline-offset: -3px;
}

/* ---------- Телефоны ---------- */

.phones {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: clamp(20px, 3vw, 40px);
   max-width: 900px;
   margin: 0 auto;
}

.phone {
   background: var(--dark-900);
   padding: 10px 10px 14px;
   border: 1px solid var(--surface-300);
   box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
}

.phone__notch {
   width: 56px;
   height: 4px;
   margin: 4px auto 10px;
   background: rgba(255, 255, 255, 0.3);
   border-radius: 999px;
}

.phone__label {
   margin-top: 12px;
   text-align: center;
   font-size: 14px;
   color: rgba(255, 255, 255, 0.55);
}

/* ---------- Приложения клиента и мастера: нарисованные экраны ----------
   Макет, а не снимок: пропорции телефона 390×844, цвета — токены страницы.
   Кегль задан от ширины рамки телефона (`cqw`), поэтому экран масштабируется целиком:
   контейнер — рамка, а не сам `.app`, иначе его собственные размеры считались бы от окна. */

.apps {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 40px);
   margin-top: clamp(48px, 6vw, 80px);
   padding-top: clamp(40px, 5vw, 64px);
   border-top: 1px solid var(--line);
}

.apps__text {
   grid-column: 1 / -1;
   max-width: 760px;
}

.apps__text p {
   margin-top: 12px;
   color: var(--text-muted);
}

.apps__note {
   font-size: 14px;
}

.apps__title {
   margin-bottom: 14px;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--accent);
}

.phones.phones--2 {
   grid-template-columns: repeat(2, minmax(0, 1fr));
   max-width: none;
   gap: clamp(14px, 2vw, 24px);
}

.stores {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-top: 20px;
}

.store {
   display: inline-flex;
   flex-direction: column;
   min-width: 140px;
   padding: 7px 16px 8px;
   font-size: 17px;
   font-weight: 600;
   line-height: 1.1;
   color: #fff;
   background: var(--surface-900);
   border-radius: 8px;
}

.store small {
   font-size: 11px;
   font-weight: 500;
   opacity: 0.7;
}

.phones--2 .phone {
   container-type: inline-size;
}

.app {
   aspect-ratio: 390 / 844;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   gap: 3cqw;
   padding: 0 4cqw 4cqw;
   font-size: 4cqw;
   line-height: 1.35;
   color: var(--text);
   background: var(--surface-100);
}

.app b {
   color: var(--text-strong);
   font-weight: 600;
}

.app__status {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: 0 -4cqw;
   padding: 2.5cqw 6cqw 1cqw;
   font-size: 3.4cqw;
   font-weight: 600;
   color: var(--text-strong);
   background: var(--surface-0);
}

.app__signal {
   width: 9cqw;
   height: 3cqw;
   border-radius: 1cqw;
   background: linear-gradient(90deg, var(--text-strong) 70%, var(--surface-300) 70%);
}

.app__head {
   display: flex;
   flex-direction: column;
   gap: 0.5cqw;
   margin: 0 -4cqw;
   padding: 2cqw 6cqw 4cqw;
   background: var(--surface-0);
   border-bottom: 1px solid var(--line);
}

.app__head b {
   font-size: 5.2cqw;
}

.app__brand {
   align-self: flex-start;
   margin-bottom: 1.5cqw;
   padding: 0.6cqw 2.4cqw;
   font-size: 3cqw;
   font-weight: 600;
   color: var(--accent);
   border: 1px dashed var(--accent-light);
   border-radius: 1.5cqw;
}

.app__muted {
   font-size: 3.4cqw;
   color: var(--text-muted);
}

.app__card {
   display: flex;
   flex-direction: column;
   gap: 1.5cqw;
   padding: 3.5cqw 4cqw;
   background: var(--surface-0);
   border-radius: 3.5cqw;
   box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.app__card--accent {
   background: var(--accent-wash);
   box-shadow: inset 0 0 0 1px var(--accent-light);
}

.app__row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 2cqw;
}

.app__chip {
   flex-shrink: 0;
   padding: 0.4cqw 2.4cqw;
   font-size: 3cqw;
   color: var(--text);
   background: var(--surface-100);
   border-radius: 99px;
}

.app__chip--warn {
   color: #fff;
   background: #f59e0b;
}

.app__chip--ok {
   color: #047857;
   background: #d1fae5;
}

.app__bar {
   height: 2cqw;
   overflow: hidden;
   background: var(--surface-100);
   border-radius: 99px;
}

.app__bar span {
   display: block;
   height: 100%;
   background: #10b981;
}

.app__list {
   margin: 0;
   padding: 0;
   list-style: none;
   background: var(--surface-0);
   border-radius: 3.5cqw;
}

.app__list li {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 2cqw;
   padding: 3cqw 4cqw;
   border-top: 1px solid var(--surface-100);
}

.app__list li:first-child {
   border-top: 0;
}

.app__dot {
   min-width: 5cqw;
   padding: 0 1.4cqw;
   font-size: 3cqw;
   font-weight: 600;
   text-align: center;
   color: #fff;
   background: var(--accent);
   border-radius: 99px;
}

/* Фото в отчёте — плашки с градиентом: снимков объекта в демо нет. */
.app__photos {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5cqw;
   margin-top: 1cqw;
}

.app__photos span {
   aspect-ratio: 1;
   border-radius: 2cqw;
   background: linear-gradient(135deg, #d6d3d1, #a8a29e 60%, #e7e5e4);
}

.app__photos span:nth-child(2) {
   background: linear-gradient(135deg, #e2e8f0, #94a3b8 55%, #cbd5e1);
}

.app__photos span:nth-child(3) {
   background: linear-gradient(135deg, #f5f5f4, #d6d3d1 50%, #a8a29e);
}

.app__input {
   padding: 1cqw 3cqw;
   font-weight: 600;
   color: var(--text-strong);
   border: 1px solid var(--surface-300);
   border-radius: 2cqw;
}

.app__btn {
   margin-top: auto;
   padding: 3.5cqw;
   font-weight: 600;
   text-align: center;
   color: #fff;
   background: var(--accent);
   border-radius: 3cqw;
}

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


/* ---------- Просмотр снимка во весь экран ---------- */

.lightbox {
   position: fixed;
   inset: 0;
   z-index: 100;
   display: none;
   place-items: center;
   padding: 24px;
   background: rgba(2, 6, 23, 0.9);
   cursor: zoom-out;
}

.lightbox.is-open {
   display: grid;
}

.lightbox img {
   max-width: min(1400px, 100%);
   max-height: 90vh;
   width: auto;
   box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.lightbox__hint {
   position: absolute;
   bottom: 18px;
   left: 0;
   right: 0;
   text-align: center;
   font-size: 14px;
   color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 1024px) {
   .flow {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 640px) {
   .cards,
   .flow {
      grid-template-columns: 1fr;
   }

   .phones {
      grid-template-columns: 1fr;
      max-width: 320px;
   }
}

/* ---------- Цена ---------- */

.pricing {
   display: grid;
   grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
   gap: 1px;
   background: var(--line);
   border: 1px solid var(--line);
}

.price {
   background: var(--surface-0);
   padding: clamp(28px, 3vw, 40px);
}

.price--side {
   background: var(--surface-50);
}

.price__value {
   font-size: clamp(34px, 4vw, 46px);
   font-weight: 700;
   letter-spacing: -0.03em;
   color: var(--text-strong);
   line-height: 1.1;
}

.price__note {
   margin-top: 8px;
   color: var(--text-muted);
}

.price__list {
   margin: 24px 0 0;
   padding: 0;
   list-style: none;
   display: grid;
   gap: 12px;
}

.price__list li {
   position: relative;
   padding-left: 28px;
}

.price__list li::before {
   content: '✓';
   position: absolute;
   left: 0;
   top: 0;
   color: var(--accent);
   font-weight: 700;
}

.price__actions {
   margin-top: 28px;
}

.price__line {
   padding: 18px 0;
   border-top: 1px solid var(--line);
}

.price__line:first-of-type {
   border-top: 0;
   padding-top: 0;
}

.price__line b {
   display: block;
   color: var(--text-strong);
   font-size: 18px;
}

.price__line span {
   display: block;
   margin-top: 4px;
   font-size: 15px;
   color: var(--text-muted);
}

/* ---------- Вопросы ---------- */

.faq {
   border-top: 1px solid var(--line);
}

.faq__item {
   border-bottom: 1px solid var(--line);
}

.faq__item summary {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 20px;
   padding: 20px 0;
   font-size: clamp(17px, 1.6vw, 19px);
   font-weight: 600;
   color: var(--text-strong);
   cursor: pointer;
   list-style: none;
}

.faq__item summary::-webkit-details-marker {
   display: none;
}

.faq__item summary::after {
   content: '+';
   flex: none;
   font-size: 22px;
   font-weight: 400;
   color: var(--accent);
   line-height: 1;
}

.faq__item[open] summary::after {
   content: '−';
}

.faq__answer {
   padding: 0 0 22px;
   max-width: 76ch;
   color: var(--text-muted);
}

/* ---------- Финальный призыв ---------- */

.cta {
   background: var(--dark-900);
   color: #fff;
   padding: clamp(56px, 6vw, 88px) 0;
}

.cta h2 {
   color: #fff;
   max-width: 20ch;
}

.cta__lead {
   margin-top: 18px;
   max-width: 60ch;
   color: rgba(255, 255, 255, 0.72);
   font-size: clamp(17px, 1.5vw, 19px);
}

.cta__actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 30px;
}

.cta__industry {
   margin-top: clamp(36px, 4vw, 56px);
   padding-top: clamp(28px, 3vw, 40px);
   border-top: 1px solid rgba(255, 255, 255, 0.12);
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   gap: 24px 40px;
   align-items: start;
}

.cta__industry h3 {
   color: #fff;
   font-size: clamp(19px, 1.8vw, 22px);
}

.cta__industry p {
   color: rgba(255, 255, 255, 0.6);
   font-size: 16px;
}

@media (max-width: 860px) {
   .pricing,
   .cta__industry {
      grid-template-columns: 1fr;
   }

   .price__actions .btn {
      width: 100%;
   }
}

/* ---------- Место под ролик в первом экране ---------- */

.video {
   position: relative;
   background: var(--dark-800);
}

.video__poster {
   width: 100%;
   height: auto;
   /* Постер приглушён: он фон под кнопкой, а не снимок для разглядывания. */
   opacity: 0.35;
   filter: saturate(0.6);
}

.video__play {
   position: absolute;
   inset: 0;
   display: grid;
   place-content: center;
   justify-items: center;
   gap: 6px;
   text-align: center;
   color: #fff;
   text-decoration: none;
   padding: 24px;
}

.video__btn {
   width: 76px;
   height: 76px;
   margin-bottom: 10px;
   display: grid;
   place-items: center;
   border-radius: 999px;
   background: var(--accent);
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
   transition: background-color 0.15s, transform 0.15s;
}

.video__btn svg {
   width: 34px;
   height: 34px;
   margin-left: 4px;
}

.video__play:hover .video__btn {
   background: var(--accent-hover);
   transform: scale(1.05);
}

.video__title {
   font-size: clamp(18px, 2vw, 24px);
   font-weight: 700;
   letter-spacing: -0.02em;
}

.video__meta {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.6);
}

/* Заглушка под снимок, которого ещё нет: ключ в data-shot совпадает с кадром screenshots.mjs. */
.shot-placeholder {
   gap: 6px;
   align-content: center;
   color: var(--text-muted);
}

.shot-placeholder__name {
   font-size: clamp(17px, 1.6vw, 20px);
   font-weight: 600;
   color: var(--text-strong);
}

/* ---------- Демо: текст слева, три шага справа ---------- */

.demo {
   display: grid;
   grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
   gap: clamp(32px, 5vw, 72px);
   align-items: start;
}

.demo__actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 28px;
}

.demo__steps {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   gap: 1px;
   background: var(--line);
   border: 1px solid var(--line);
}

.demo__step {
   display: grid;
   grid-template-columns: 44px 1fr;
   gap: 16px;
   padding: 20px 22px;
   background: var(--surface-0);
}

.demo__num {
   width: 44px;
   height: 44px;
   display: grid;
   place-items: center;
   background: var(--accent-wash);
   color: var(--accent);
   font-weight: 700;
   font-size: 18px;
}

.demo__step b {
   display: block;
   color: var(--text-strong);
   font-size: 17px;
}

.demo__step p {
   margin-top: 4px;
   font-size: 15px;
   color: var(--text-muted);
}

/* ---------- Возможности: облако тегов сверху, снимок и тезисы под ним ---------- */

.tabs {
   display: grid;
   gap: clamp(28px, 3.5vw, 48px);
}

/* Теги переносятся строками и собираются к центру; размер и вес — по data-size:
   3 — ядро пути объекта, 2 — рабочие разделы, 1 — справочники и компания. */
.tabs__cloud {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   gap: 10px 8px;
   max-width: 960px;
   margin: 0 auto;
}

.tabs__tag {
   margin: 0;
   padding: 0.42em 0.95em;
   font: inherit;
   font-size: 15px;
   font-weight: 500;
   line-height: 1.2;
   color: var(--text);
   background: var(--surface-50);
   border: 1px solid var(--line);
   cursor: pointer;
   transition: color 0.15s, border-color 0.15s, background-color 0.15s, transform 0.15s;
}

.tabs__tag[data-size='2'] {
   font-size: 18px;
   color: var(--text-strong);
}

.tabs__tag[data-size='3'] {
   font-size: 23px;
   font-weight: 600;
   letter-spacing: -0.01em;
   color: var(--text-strong);
   background: var(--surface-0);
}

.tabs__tag:hover {
   color: var(--accent);
   border-color: var(--accent-light);
   background: var(--accent-wash);
   transform: translateY(-1px);
}

.tabs__tag[aria-selected='true'] {
   color: #fff;
   border-color: var(--accent);
   background: var(--accent);
}

.tabs__panel {
   display: grid;
   grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
   gap: clamp(24px, 3vw, 40px);
   align-items: start;
}

.tabs__panel[hidden] {
   display: none;
}

/* Плашка над заголовком панели: раздел подключается под заказчика, в демо его нет. */
.feature__badge {
   display: inline-block;
   margin-bottom: 10px;
   padding: 4px 10px;
   font-size: 13px;
   font-weight: 600;
   color: var(--accent);
   background: var(--accent-wash);
}

.tabs__panel .feature__text h3 {
   font-size: clamp(21px, 1.9vw, 26px);
   font-weight: 700;
   letter-spacing: -0.02em;
}

.tabs__panel .feature__text p {
   margin-top: 12px;
   font-size: 16px;
   color: var(--text-muted);
}

.tabs__panel .feature__list {
   margin-top: 16px;
   font-size: 15px;
}

/* ---------- Две колонки: сами / мы ---------- */

.split {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1px;
   background: var(--line);
   border: 1px solid var(--line);
}

.split__col {
   background: var(--surface-0);
   padding: clamp(24px, 3vw, 36px);
}

.split__col--soft {
   background: var(--surface-50);
}

.split__title {
   margin-bottom: 18px;
   font-size: clamp(19px, 1.7vw, 22px);
}

.ticks {
   margin: 0;
   padding: 0;
   list-style: none;
   display: grid;
   gap: 12px;
   font-size: 16px;
}

.ticks li {
   position: relative;
   padding-left: 28px;
}

.ticks li::before {
   content: '✓';
   position: absolute;
   left: 0;
   top: 0;
   color: var(--accent);
   font-weight: 700;
}

.ticks--plus li::before {
   content: '+';
   font-size: 19px;
   line-height: 1.3;
}


/* Пометка у пункта «мы»: что уже оплачено внедрением, остальное — по расчёту. */
.split__tag {
   display: inline-block;
   margin-left: 6px;
   padding: 1px 8px;
   font-size: 13px;
   font-weight: 600;
   white-space: nowrap;
   color: var(--accent);
   background: var(--accent-wash);
}

/* ---------- Пять шагов роста ---------- */

.flow--5 {
   grid-template-columns: repeat(5, 1fr);
}

/* ---------- Сравнение ---------- */

.compare {
   overflow-x: auto;
   border: 1px solid var(--line);
}

.compare__table {
   width: 100%;
   min-width: 720px;
   border-collapse: collapse;
   font-size: 15px;
}

.compare__table th,
.compare__table td {
   padding: 14px 18px;
   text-align: left;
   vertical-align: top;
   border-top: 1px solid var(--line);
   border-left: 1px solid var(--line);
}

.compare__table th:first-child,
.compare__table td:first-child {
   border-left: 0;
}

.compare__table thead th {
   border-top: 0;
   background: var(--surface-50);
   font-size: 14px;
   font-weight: 600;
   color: var(--text-muted);
}

.compare__table tbody th {
   font-weight: 600;
   color: var(--text-strong);
   white-space: nowrap;
}

.compare__table td {
   color: var(--text-muted);
}

.compare__table .compare__ours {
   background: var(--accent-wash);
   color: var(--text-strong);
   font-weight: 500;
}

.compare__table thead .compare__ours {
   color: var(--accent);
}

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

   .flow--5 {
      grid-template-columns: repeat(3, 1fr);
   }
}

@media (max-width: 860px) {
   .demo,
   .split {
      grid-template-columns: 1fr;
   }

   /* Облако на узком экране: ступени сжимаются, крупные теги не ломают строку. */
   .tabs__cloud {
      gap: 8px 6px;
   }

   .tabs__tag {
      font-size: 14px;
      padding: 0.4em 0.8em;
   }

   .tabs__tag[data-size='2'] {
      font-size: 15px;
   }

   .tabs__tag[data-size='3'] {
      font-size: 18px;
   }
}

@media (max-width: 640px) {
   .flow--5 {
      grid-template-columns: 1fr;
   }

   .demo__actions .btn {
      width: 100%;
   }
}

/* ---------- Недельный спринт — под шагами внедрения в «Как растёт» ---------- */

.sprint {
   margin-top: clamp(40px, 5vw, 64px);
}

.sprint__head {
   max-width: 760px;
   margin-bottom: 24px;
}

.sprint__head p {
   margin-top: 10px;
   color: var(--text-muted);
}
/* ==========================================================================
   Главная (index.html): тёмный первый экран, белые шаги показа, синие секции бенто
   с белыми карточками-коллажами. Скруглений нет, как во всём лендинге.
   Блоки выше нужны ещё презентации — их не трогаем.
   ========================================================================== */

/* ---------- Первый экран ---------- */

/* Главная — светлая: белая шапка и белый первый экран, коллаж на подложке цвета акцента.
   Тёмные `.header` и `.hero` выше остаются презентации. */
.header--light {
   background: #fff;
   color: var(--text-strong);
   border-bottom-color: var(--line);
}

.header--light .logo {
   color: var(--text-strong);
}

.header--light .nav a {
   color: var(--text);
}

.header--light .nav a:hover,
.header--light .nav a.is-current {
   color: var(--accent);
   border-color: var(--accent);
}

.header--light .burger {
   border-color: var(--line);
   color: var(--text-strong);
}

.header--light :focus-visible,
.hero--book :focus-visible {
   outline-color: var(--accent-light);
}

/* Логотип словом, как в шапке приложения: «dzen» цветом текста, «CRM» — акцентом. */
.logo--word {
   gap: 0;
   font-size: 24px;
}

.logo--word b {
   font-weight: 700;
   color: var(--accent);
}

.footer .logo--word b {
   color: var(--accent-light);
}

.hero--book {
   background: #fff;
   color: var(--text-strong);
   border-bottom: 1px solid var(--line);
   padding-bottom: clamp(48px, 6vw, 88px);
}

.hero--book h1 {
   color: var(--text-strong);
}

.hero--book .hero__lead {
   color: var(--text-muted);
}

.hero__grid {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
   gap: clamp(32px, 4vw, 64px);
   align-items: center;
}

.hero--book .stage {
   background: var(--accent-wash);
}

/* ---------- Как пройдёт показ ---------- */

.meet {
   list-style: none;
   margin: clamp(32px, 3.5vw, 48px) 0 0;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   border-top: 1px solid var(--line);
}

.meet__step {
   padding: 28px 28px 0;
   border-left: 1px solid var(--line);
}

.meet__step:first-child {
   padding-left: 0;
   border-left: 0;
}

.meet__num {
   display: grid;
   place-items: center;
   width: 40px;
   height: 40px;
   background: var(--accent);
   color: #fff;
   font-weight: 700;
}

.meet__step h3 {
   margin-top: 18px;
}

.meet__step p {
   margin-top: 10px;
   color: var(--text-muted);
}

.meet__note {
   margin-top: 10px;
   font-size: 15px;
   color: var(--text-muted);
}

/* ---------- Синие секции с бенто ---------- */

.section--accent {
   background: var(--accent);
   color: #fff;
}

.section--accent h2 {
   color: #fff;
}

.section--accent .eyebrow {
   color: rgba(255, 255, 255, 0.75);
}

.section--accent .section__lead {
   color: rgba(255, 255, 255, 0.8);
}

.section--accent :focus-visible {
   outline-color: #fff;
}

.section__head--next {
   margin-top: clamp(64px, 7vw, 104px);
}

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

.bento__card {
   display: flex;
   flex-direction: column;
   background: #fff;
   color: var(--text);
}

/* На синей секции карточку отделяет фон, на светлой — рамка: без неё на телефоне подпись
   повисает между своей картинкой и следующей. */
.section:not(.section--accent) .bento__card {
   border: 1px solid var(--line);
}

.bento__card--2 {
   grid-column: span 2;
}

.bento__card--3 {
   grid-column: span 3;
}

.bento__card--4 {
   grid-column: span 4;
}

.bento__card--6 {
   grid-column: span 6;
}

/* Широкая карточка лежит на боку: коллаж слева, текст справа; `--flip` — наоборот.
   Сцена в разметке всегда первая. Она тянется на высоту карточки, если текст выше неё,
   а ниже своих пропорций не сжимается. */
.bento__card--wide {
   display: grid;
   grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.bento__card--flip {
   grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}

.bento__card--flip .stage {
   order: 2;
}

/* У элемента сетки с aspect-ratio выравнивание по умолчанию — к началу: тянем явно,
   иначе под коллажем остаётся белая полоса, когда текст выше сцены. Ширина — по колонке:
   без неё пропорция выведет ширину из растянутой высоты и сцена налезет на текст. */
.bento__card--wide .stage {
   align-self: stretch;
   width: 100%;
}

.bento__card--wide .bento__text {
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.bento__card--wide .bento__text > .badge {
   align-self: flex-start;
}

.bento__text {
   padding: 24px clamp(22px, 2.4vw, 32px) clamp(26px, 2.6vw, 34px);
}

.bento__card--wide .bento__text {
   padding: clamp(28px, 3vw, 44px);
}

.bento__text h3 {
   font-size: clamp(21px, 1.7vw, 23px);
   font-weight: 700;
}

.bento__card--wide h3 {
   font-size: clamp(23px, 2.2vw, 30px);
   letter-spacing: -0.02em;
}

.bento__text p {
   margin-top: 10px;
   font-size: 16px;
   color: var(--text-muted);
}

.bento__card--wide .bento__text p {
   font-size: 17px;
}

.bento__text .bento__note {
   font-size: 15px;
}

.bento__list {
   margin: 18px 0 0;
   padding-left: 20px;
   display: grid;
   gap: 10px;
   font-size: 16px;
}

.bento__list b {
   color: var(--text-strong);
}

.badge {
   display: inline-block;
   padding: 3px 9px;
   margin-bottom: 12px;
   background: var(--accent-wash);
   color: var(--accent);
   font-size: 13px;
   font-weight: 600;
}

.bento__note .badge {
   margin: 0 8px 0 0;
}

/* ---------- Коллаж: куски снимков внахлёст ----------
   Сцена держит пропорции через --ar, куски стоят процентами от её сторон,
   высота куска — от самой картинки. Лишнее уходит под край сцены. */

.stage {
   position: relative;
   aspect-ratio: var(--ar, 4 / 3);
   overflow: hidden;
   background:
      linear-gradient(160deg, var(--accent-wash), transparent 55%),
      var(--surface-50);
}

.piece {
   position: absolute;
   display: block;
   height: auto;
   max-width: none;
   background: #fff;
   border: 1px solid var(--surface-200);
   box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
}

/* Коллаж одной картинкой: сцена collages.html с прозрачным фоном. Вписывается целиком —
   высокая карточка лишь добавляет поля, а не режет край. */
.stage__img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: contain;
}

/* Экран телефона — кадр целиком в тёмной рамке. */
.piece--phone {
   border: 5px solid var(--surface-900);
   border-radius: 18px;
   box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3);
}

.hero--book .piece {
   border-color: rgba(255, 255, 255, 0.12);
   box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
}

/* ---------- Призыв ---------- */

.cta__channels {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 30px;
}

/* ---------- Адаптив ---------- */

@media (max-width: 1024px) {
   .bento__card--2 {
      grid-column: span 3;
   }

   .bento__card--4 {
      grid-column: span 6;
   }
}

@media (max-width: 860px) {
   .hero__grid,
   .meet {
      grid-template-columns: 1fr;
   }

   .meet__step,
   .meet__step:first-child {
      padding: 24px 0;
      border-left: 0;
      border-bottom: 1px solid var(--line);
   }

   .bento__card--2,
   .bento__card--3 {
      grid-column: span 6;
   }

   .bento__card--wide {
      display: flex;
   }

   .bento__card--flip .stage {
      order: 0;
   }

   .bento__card--wide .bento__text {
      padding: 24px clamp(22px, 2.4vw, 32px) clamp(26px, 2.6vw, 34px);
   }

   .bento__card--wide h3 {
      font-size: clamp(21px, 1.7vw, 23px);
      letter-spacing: normal;
   }

   .bento__card--wide .bento__text p {
      font-size: 16px;
   }
}

@media (max-width: 560px) {
   .hero__actions .btn,
   .cta__channels .btn {
      width: 100%;
   }

   /* Текст и номер на кнопке звонка — двумя строками */
   .hero__actions .btn {
      flex-direction: column;
      gap: 2px;
   }
}

/* Ссылки под кнопкой первого экрана: презентация в PDF, пример сборки */
.hero__links {
   display: flex;
   flex-wrap: wrap;
   gap: 10px 28px;
   margin-top: 18px;
}

.hero__file {
   display: inline-flex;
   font-size: 15px;
   font-weight: 600;
   color: var(--accent);
   text-decoration: underline;
   text-underline-offset: 4px;
}

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

/* ---------- Общий лендинг (index.html, dzencrm.ru) ---------- */

/* Этапы работы: шесть колонок — номер, назначение, инструменты */
.flow {
   list-style: none;
   margin: clamp(32px, 3.5vw, 48px) 0 0;
   padding: 0;
   display: grid;
   grid-template-columns: repeat(6, minmax(0, 1fr));
   gap: 1px;
   background: rgba(255, 255, 255, 0.18);
   border: 1px solid rgba(255, 255, 255, 0.18);
}

.flow__step {
   background: var(--accent);
   padding: 24px 20px 26px;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.flow__num {
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 0.08em;
   color: rgba(255, 255, 255, 0.6);
}

.flow__step h3 {
   color: #fff;
   font-size: 20px;
}

.flow__goal {
   min-height: 3em;
   font-size: 15px;
   color: rgba(255, 255, 255, 0.72);
}

.flow__tools {
   list-style: none;
   margin: 6px 0 0;
   padding: 12px 0 0;
   border-top: 1px solid rgba(255, 255, 255, 0.18);
   display: grid;
   gap: 8px;
   font-size: 15px;
   color: #fff;
}

.flow__tools li {
   position: relative;
   padding-left: 14px;
}

.flow__tools li::before {
   content: '';
   position: absolute;
   left: 0;
   top: 0.6em;
   width: 6px;
   height: 2px;
   background: rgba(255, 255, 255, 0.6);
}

.flow__more {
   margin-top: 18px;
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   align-items: center;
   font-size: 15px;
   color: rgba(255, 255, 255, 0.72);
}

.flow__more .badge {
   margin: 0;
   background: #fff;
   color: var(--accent);
}

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

/* Действующая сборка: коллаж и отраслевые разделы */
.build {
   display: grid;
   grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
   gap: clamp(28px, 4vw, 56px);
   align-items: center;
   margin-top: clamp(32px, 3.5vw, 48px);
}

.build .stage {
   background: rgba(255, 255, 255, 0.08);
}

.build__list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
   gap: 10px;
}

.build__list li {
   padding-top: 12px;
   border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.build__list b {
   display: block;
   color: #fff;
   font-weight: 600;
}

.build__list span {
   font-size: 15px;
   color: rgba(255, 255, 255, 0.72);
}

.build .btn {
   margin-top: 24px;
}

/* «Устройство»: две группы бенто — ядро и готовые модули. */
.parts__group {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-bottom: 20px;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-strong);
}

.parts__group::after {
   content: '';
   flex: 1;
   height: 1px;
   background: var(--line);
}

.bento + .parts__group {
   margin-top: clamp(48px, 5vw, 72px);
}

.parts__lead {
   max-width: 760px;
   margin: -8px 0 20px;
   color: var(--text-muted);
}

@media (max-width: 1100px) {
   .flow {
      grid-template-columns: repeat(3, minmax(0, 1fr));
   }
}

@media (max-width: 860px) {
   .meet--4 {
      grid-template-columns: 1fr;
   }

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

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

   .flow__goal {
      min-height: 0;
   }
}