/* Verkoshka Соглашения — публичный лендинг */
:root {
  --teal: #41a3af;
  --teal-dark: #2d8b96;
  --teal-deep: #1f6b74;
  --ink: #1a2233;
  --muted: #5a6578;
  --line: #dbebed;
  --bg: #f4f8f9;
  --bg-soft: #e8f3f5;
  --white: #fff;
  --ok: #2f9e6b;
  --warn: #c47a2c;
  --radius: 16px;
  --shadow: 0 18px 50px rgba(26, 34, 51, 0.08);
  --font: "Manrope", system-ui, sans-serif;
  --display: "Literata", Georgia, serif;
  --max: 1120px;
  /* актуализируется JS по высоте .topbar */
  --anchor-offset: 64px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--anchor-offset);
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/*
 * Uicons: глиф в ::before, а <i> наследует line-height родителя (1.55) →
 * бокс выше глифа, иконка «прилипает» к верху плашки/кнопки.
 * Канон: docs/verkoshka-admin-ui-guide.md §2 «Вертикаль uicons».
 */
i[class^="fi-"],
i[class*=" fi-"],
span[class^="fi-"],
span[class*=" fi-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
  vertical-align: middle;
  flex-shrink: 0;
}
i[class^="fi-"]::before,
i[class*=" fi-"]::before,
span[class^="fi-"]::before,
span[class*=" fi-"]::before {
  display: block;
  line-height: 1 !important;
  margin: 0;
}

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

a {
  color: var(--teal-dark);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover:not(.btn) {
  color: var(--teal-deep);
}

.container {
  width: min(var(--max), calc(100% - 40px));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: 16px;
  top: 16px;
  z-index: 100;
  background: #fff;
  padding: 8px 12px;
}

/* Top bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(244, 248, 249, 0.88);
  border-bottom: 1px solid rgba(219, 235, 237, 0.9);
}

.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  min-height: 64px;
  padding-block: 10px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  flex: 0 1 auto;
  min-width: 0;
  order: 1;
}

.brand__logo {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: 40px;
  max-height: 40px;
  object-fit: contain;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.brand__text span,
.brand__text small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand__text small {
  font-weight: 500;
  color: var(--muted);
  font-size: 12px;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  justify-content: flex-end;
  flex: 1 1 auto;
  order: 2;
  min-width: 0;
}

.nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.2;
}

.nav a:hover {
  color: var(--teal-dark);
}

.topbar__cta {
  order: 3;
  flex: 0 0 auto;
  margin-left: 4px;
}

.nav-toggle {
  display: none;
  order: 4;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  line-height: 1;
}

.nav-toggle i,
.nav-toggle i::before {
  line-height: 1;
  display: inline-flex;
  font-size: 20px;
}

.nav-toggle [data-icon="close"],
.nav-toggle i[hidden] {
  display: none !important;
}

.topbar.is-nav-open .nav-toggle [data-icon="open"] {
  display: none !important;
}

.topbar.is-nav-open .nav-toggle [data-icon="close"] {
  display: inline-flex !important;
}

.nav-toggle:hover {
  border-color: var(--teal);
  color: var(--teal-dark);
}

.nav-toggle:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Primary CTA as <a>: never inherit menu/link colors */
a.btn.btn--primary,
a.btn.btn--primary:link,
a.btn.btn--primary:visited,
a.btn.btn--primary:hover,
a.btn.btn--primary:focus,
a.btn.btn--primary:focus-visible,
a.btn.btn--primary:active,
.topbar a.btn.btn--primary,
.topbar a.btn.btn--primary:hover {
  color: #fff !important;
  text-decoration: none;
}

a.btn.btn--primary i,
a.btn.btn--primary:hover i,
a.btn.btn--primary:focus i,
.topbar a.btn.btn--primary i {
  color: #fff !important;
}

@media (max-width: 959px) {
  .topbar__inner {
    row-gap: 0;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .topbar__cta {
    margin-left: auto;
  }

  .nav {
    display: none;
    flex: 1 1 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 8px;
    padding: 8px 0 4px;
    border-top: 1px solid var(--line);
    order: 5;
  }

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

  .nav a {
    padding: 12px 4px;
    border-radius: 10px;
    white-space: normal;
  }

  .nav a:hover {
    background: rgba(65, 163, 175, 0.08);
  }
}

@media (max-width: 420px) {
  .brand__text small {
    display: none;
  }

  .topbar__cta {
    padding-inline: 14px;
    font-size: 13px;
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  border: 2px solid transparent;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  transition: 0.18s ease;
}

.btn i {
  font-size: 18px;
  line-height: 1 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn--primary {
  background: var(--teal);
  color: #fff;
  box-shadow: 0 8px 18px rgba(65, 163, 175, 0.22);
}

.btn--primary:hover {
  background: var(--teal-dark);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
  /* поверх тени primary, когда кнопки встают столбиком */
  position: relative;
  z-index: 1;
}

.btn--ghost:hover {
  border-color: var(--teal);
  color: var(--teal-deep);
}

.btn--soft {
  background: var(--bg-soft);
  color: var(--teal-deep);
  border-color: transparent;
}

.btn--soft:hover,
.btn--soft:focus-visible {
  background: rgba(65, 163, 175, 0.22);
  color: var(--teal-deep);
  border-color: rgba(65, 163, 175, 0.35);
}

a.btn.btn--soft,
a.btn.btn--soft:link,
a.btn.btn--soft:visited,
a.btn.btn--soft:hover,
a.btn.btn--soft:focus,
a.btn.btn--soft:active {
  color: var(--teal-deep);
  text-decoration: none;
}

.btn--block {
  width: 100%;
}

.btn--sm {
  min-height: 40px;
  padding: 0 16px;
  font-size: 14px;
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  padding: 48px 0 72px;
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(65, 163, 175, 0.22), transparent 60%),
    radial-gradient(800px 400px at 0% 80%, rgba(45, 139, 150, 0.12), transparent 55%),
    linear-gradient(180deg, #eef6f7 0%, var(--bg) 100%);
}

.hero__grid {
  display: grid;
  gap: 28px;
  align-items: start;
}

@media (min-width: 960px) {
  .hero__grid {
    /* Ближе колонки: mock шире, меньше пустоты */
    grid-template-columns: minmax(0, 1fr) minmax(360px, 1.08fr);
    gap: 28px;
    align-items: start;
  }
  .hero--stack .mbl-form-mock {
    justify-self: stretch;
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--teal-deep);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
}

.eyebrow i {
  font-size: 16px;
  line-height: 1 !important;
  width: 16px;
  height: 16px;
}
.eyebrow i::before {
  line-height: 1 !important;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2.15rem, 5vw, 3.85rem);
  line-height: 1.2;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

/* v20: eyebrow + H1 в левой колонке рядом с текстом */
.hero--stack .hero__copy .eyebrow {
  margin-bottom: 12px;
}
.hero--stack .hero__copy h1 {
  margin: 0 0 18px;
  max-width: none;
  font-size: clamp(2.25rem, 4.8vw, 3.75rem);
  line-height: 1.18;
  letter-spacing: -0.035em;
}
.hero--stack .hero__sub {
  margin: 0 0 16px;
  max-width: 34rem;
}

.hero__lead {
  display: inline-block;
  box-sizing: border-box;
  margin: 0 0 10px;
  padding: 10px 16px;
  max-width: 22.5rem;
  border-radius: 12px;
  background: rgba(65, 163, 175, 0.14);
  color: var(--ink);
  font-size: clamp(1.18rem, 1.7vw, 1.4rem);
  font-weight: 700;
  line-height: 1.35;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  row-gap: 18px;
  margin-bottom: 22px;
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.hero__trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero__trust i {
  color: var(--teal);
  line-height: 1 !important;
  width: 1em;
  height: 1em;
}
.hero__trust i::before {
  line-height: 1 !important;
}

/* Mock UI */
.mock {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.mock__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: #f7fafb;
  border-bottom: 1px solid var(--line);
}

.mock__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d5dee3;
}

.mock__title {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.mock__body {
  padding: 18px;
  display: grid;
  gap: 14px;
}

.mock-split {
  display: grid;
  gap: 12px;
}

@media (min-width: 520px) {
  .mock-split {
    grid-template-columns: 1fr 1fr;
  }
}

.mock-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  background: #fafcfc;
}

.mock-card--bad {
  background: #fff4f1;
  border-color: #ebc4ba;
}

.mock-card--good {
  border-color: rgba(47, 158, 107, 0.45);
  background: linear-gradient(180deg, #eef9f3, #fff);
}

.mock-card__label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.mock-card--bad .mock-card__label {
  color: #7a2418;
}

.mock-card--good .mock-card__label {
  color: #145232;
}

.mock-card--bad .mock-check i {
  color: #c2412d;
}
.mock-card--good .mock-check i {
  color: #2f9e6b;
}

.mock-line {
  height: 10px;
  border-radius: 6px;
  background: #e7eef0;
  margin-bottom: 8px;
}

.mock-line--short {
  width: 62%;
}

.mock-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  margin-top: 8px;
  line-height: 1.4;
}

.mock-check i {
  color: var(--teal);
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.2em; /* по первой строке, не по центру блока */
  line-height: 1 !important;
}
.mock-check i::before {
  line-height: 1 !important;
}

.mock-journal {
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 12px;
  font-size: 12px;
}

.mock-journal > strong {
  display: block;
  margin: 0 0 8px;
  line-height: 1.35;
  font-size: 13px;
  color: var(--ink);
}
.mock-journal > strong + strong,
.mock-journal .mock-row + strong {
  margin-top: 12px;
}

/* Строки журнала: email | документ | статус */
.mock-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px solid #eef3f4;
  color: var(--muted);
  line-height: 1.4;
}
.mock-journal .mock-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.85fr);
  column-gap: 12px;
  gap: 0;
}
.mock-journal > .mock-row:first-of-type {
  border-top: 0;
  padding-top: 0;
}
.mock-row > span {
  min-width: 0;
}
.mock-journal .mock-row > span:first-child {
  text-align: left;
}
.mock-journal .mock-row > span:nth-child(2) {
  text-align: center;
}
.mock-journal .mock-row > span:last-child {
  text-align: right;
}

@media (max-width: 560px) {
  .mock-journal .mock-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 10px 0;
  }
  .mock-journal .mock-row > span:first-child {
    width: 100%;
    font-weight: 700;
    color: var(--ink);
    text-align: left;
  }
  .mock-journal .mock-row > span:nth-child(2),
  .mock-journal .mock-row > span:last-child {
    text-align: left;
  }
  .mock-journal .mock-row > span:last-child {
    font-weight: 600;
    color: var(--teal-deep);
  }
}

/* Список: ✓ / номер слева по первой строке */
.mock-row--list {
  display: flex;
  gap: 10px;
}
.mock-row--list > span:first-child {
  flex: 0 0 auto;
  width: 1.25rem;
  text-align: center;
  font-weight: 700;
  color: var(--teal-deep);
  white-space: nowrap;
  margin-top: 0.05em;
  line-height: 1.4;
}
.mock-row--list > span:last-child {
  flex: 1 1 auto;
  text-align: left;
  white-space: normal;
}

/* Sections */
.section {
  padding: 72px 0;
}

.section--alt {
  background: var(--white);
  border-block: 1px solid var(--line);
}

/* Соседние белые секции — один фон без границ, отступы как у обычных section */
.section--join-after {
  padding-bottom: 72px;
  border-bottom: none;
}
.section--joined {
  padding-top: 0;
  padding-bottom: 72px;
  border-block: none;
}
.section--join-before {
  padding-top: 0;
  border-top: none;
}

.section--no-bottom-line {
  border-bottom: none !important;
}
.section--no-top-line {
  border-top: none !important;
}

.section--lawyer {
  background: linear-gradient(180deg, #e8f3f5 0%, #f4f8f9 45%, #eef8f9 100%);
  border-block: 1px solid rgba(65, 163, 175, 0.28);
}

.section__head {
  max-width: none; /* не сжимать H2/лид — иначе ломаются на полфраз при пустом месте справа */
  margin-bottom: 36px;
}

/* Нет контента после шапки (как блок CCP) — нижний отступ не нужен */
.section__head:last-child {
  margin-bottom: 0;
}

.section__head h2 {
  font-family: var(--display);
  font-size: clamp(2rem, 3.8vw, 3.45rem);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  max-width: none;
  line-height: 1.25;
}

.section__head p {
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 48rem; /* лид чуть короче строки для чтения; заголовок на всю ширину */
}

.pills {
  display: grid;
  gap: 16px;
}

@media (min-width: 800px) {
  .pills {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pill {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}

.section--alt .pill {
  background: var(--bg);
}

.pill__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--bg-soft);
  color: var(--teal-deep);
  font-size: 22px;
  margin-bottom: 14px;
}

.pill h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.pill p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Features */
.features {
  display: grid;
  gap: 18px;
}

@media (min-width: 900px) {
  .features {
    grid-template-columns: 1fr 1fr;
  }
}

.feature {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  padding: 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--white);
}

.feature__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(160deg, var(--teal), var(--teal-deep));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.feature__icon i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1 !important;
  font-size: inherit;
}

.feature h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
}

.feature p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Steps */
.steps {
  counter-reset: step;
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.step {
  position: relative;
  padding: 22px 18px 18px;
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(26, 34, 51, 0.04);
}

.step::before {
  counter-increment: step;
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 12px;
}

.step h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.step p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

/* Compare tables */
.compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  font-size: 0.95rem;
}

.compare th,
.compare td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  vertical-align: top;
  background: transparent;
  color: var(--ink);
}

.compare th:last-child,
.compare td:last-child {
  border-right: 0;
}

.compare th {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 800;
}

.compare th:first-child {
  width: 22%;
  background: #f7fafb;
}

.compare td:first-child {
  font-weight: 700;
  width: 22%;
  background: #f7fafb;
}

.compare th:nth-child(2),
.compare th:nth-child(3) {
  width: 39%;
}

.compare th i {
  margin-right: 6px;
}

.compare tr:last-child td {
  border-bottom: 0;
}

.compare-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px rgba(26, 34, 51, 0.04);
}

/* Юрист → система: янтарь vs зелёный */
.compare--roles {
  --roles-lawyer: #c47a2c;
  --roles-lawyer-bg: #fbf3e6;
  --roles-system: #2f9e6b;
  --roles-system-bg: #e7f6ee;
}
.compare--roles th.compare__lawyer,
.compare--roles th:nth-child(2) {
  background: var(--roles-lawyer-bg);
  color: var(--roles-lawyer);
}
.compare--roles th.compare__lawyer i,
.compare--roles th:nth-child(2) i {
  color: var(--roles-lawyer);
}
.compare--roles th.compare__system,
.compare--roles th:nth-child(3) {
  background: var(--roles-system-bg);
  color: var(--roles-system);
}
.compare--roles th.compare__system i,
.compare--roles th:nth-child(3) i {
  color: var(--roles-system);
}

/* MEMBERLUX → Соглашения: ограничение vs возможность */
.compare--vs th.compare__bad,
.compare--vs th:nth-child(2) {
  background: #f8e4df;
  color: #7a2418;
}
.compare--vs th.compare__bad i,
.compare--vs th:nth-child(2) i {
  color: #c2412d;
}
.compare--vs th.compare__good,
.compare--vs th:nth-child(3) {
  background: #d8f0e4;
  color: #145232;
}
.compare--vs th.compare__good i,
.compare--vs th:nth-child(3) i {
  color: #2f9e6b;
}
.compare--vs td:nth-child(2)::before,
.compare--vs td.compare__bad::before {
  content: "✕";
  display: inline-block;
  margin-right: 8px;
  font-weight: 800;
  color: #c2412d;
  line-height: 1;
}
.compare--vs td:nth-child(3)::before,
.compare--vs td.compare__good::before {
  content: "✓";
  display: inline-block;
  margin-right: 8px;
  font-weight: 800;
  color: #2f9e6b;
  line-height: 1;
}

/* Карточки по строкам — без горизонтального скролла */
@media (max-width: 740px) {
  .compare-wrap {
    overflow: visible;
    box-shadow: none;
  }
  .compare {
    display: block;
    border: none;
    background: transparent;
    overflow: visible;
    border-radius: 0;
  }
  .compare thead {
    display: none;
  }
  .compare tbody {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .compare tbody tr {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
  }
  .compare tbody td {
    display: block;
    width: 100% !important;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    box-sizing: border-box;
    background: transparent;
  }
  .compare tbody td:first-child,
  .compare tbody td.compare__topic {
    background: #f7fafb;
  }
  .compare tbody tr td:last-child {
    border-bottom: 0;
  }
  td.compare__topic {
    white-space: normal;
  }

  /* Подписи колонок внутри карточки — легенда уезжает при скролле */
  .compare--roles td:nth-child(2),
  .compare--roles td:nth-child(3),
  .compare--vs td:nth-child(2),
  .compare--vs td:nth-child(3) {
    padding-left: 14px;
    border-left: 3px solid transparent;
  }
  .compare--roles td:nth-child(2) {
    border-left-color: var(--roles-lawyer);
  }
  .compare--roles td:nth-child(2)::before {
    content: "Юрист говорит";
    display: block;
    margin: 0 0 6px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--roles-lawyer);
    line-height: 1.2;
  }
  .compare--roles td:nth-child(3) {
    border-left-color: var(--roles-system);
  }
  .compare--roles td:nth-child(3)::before {
    content: "Система должна";
    display: block;
    margin: 0 0 6px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--roles-system);
    line-height: 1.2;
  }
  .compare--vs td:nth-child(2) {
    border-left-color: #c2412d;
  }
  .compare--vs td:nth-child(2)::before {
    content: "✕  MEMBERLUX";
    display: block;
    margin: 0 0 6px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #c2412d;
    line-height: 1.2;
  }
  .compare--vs td:nth-child(3) {
    border-left-color: #2f9e6b;
  }
  .compare--vs td:nth-child(3)::before {
    content: "✓  Соглашения";
    display: block;
    margin: 0 0 6px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #2f9e6b;
    line-height: 1.2;
  }
}

.audience {
  display: grid;
  gap: 16px;
}

@media (min-width: 800px) {
  .audience {
    grid-template-columns: 1fr 1fr;
  }
}

.audience__box {
  border-radius: var(--radius);
  padding: 24px;
  border: 1px solid var(--line);
}

.audience__box--yes {
  background: linear-gradient(180deg, #f0faf6, #fff);
  border-color: rgba(47, 158, 107, 0.28);
}

.audience__box--no {
  background: #fff;
}

.audience__box h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.audience__box ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
}

.audience__box li + li {
  margin-top: 8px;
}

/* Pricing */
.pricing-note {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  align-items: center;
  margin: -12px 0 28px;
  color: var(--muted);
  font-size: 14px;
}

.pricing-note .tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff7e8;
  color: #8a5a18;
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 700;
  font-size: 12px;
}

.pricing-block {
  margin-bottom: 40px;
}

.pricing-block[hidden] {
  display: none !important;
}

.pricing-block__title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.pricing-block__title h3 {
  margin: 0;
  font-size: 1.15rem;
}

.pricing-block__title span {
  color: var(--muted);
  font-size: 13px;
}

.price-grid {
  display: grid;
  gap: 16px;
}

@media (min-width: 800px) {
  .price-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .price-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.price-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 8px 28px rgba(26, 34, 51, 0.04);
}

.price-card--featured {
  border-color: rgba(65, 163, 175, 0.55);
  box-shadow: 0 16px 40px rgba(65, 163, 175, 0.12);
}

.price-card__badge {
  position: absolute;
  top: -11px;
  right: 18px;
  background: var(--teal);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
}

.price-card h3,
.price-card h4 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2vw, 1.55rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.price-card__desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.price-card__amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.price-card__amount strong {
  font-family: var(--display);
  font-size: 2.2rem;
  letter-spacing: -0.03em;
}

.price-card__amount .old {
  color: var(--muted);
  text-decoration: line-through;
  font-size: 1rem;
}

.price-card__amount .old[hidden],
.price-card li[hidden] {
  display: none !important;
}

.price-card__period {
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 600;
}

.price-card__rub {
  color: var(--muted);
  font-size: 13px;
}

.price-card--soft {
  background: #f7fafb;
  box-shadow: none;
}

.price-card li.is-bonus {
  color: var(--teal-deep);
  font-weight: 700;
}

.price-card li.is-bonus i {
  color: var(--teal);
}

/* Акция запуска */
.pricing-promo {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
  gap: 16px 24px;
  margin: 0 0 28px;
  padding: 16px 18px;
  border-radius: 16px;
  background: linear-gradient(160deg, #e8f4f6, #f4fbfc 70%);
  border: 1px solid rgba(65, 163, 175, 0.35);
}

.pricing-promo[hidden] {
  display: none !important;
}

.pricing-promo__text {
  flex: 1 1 240px;
  min-width: 0;
}

.pricing-promo__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(65, 163, 175, 0.18);
  color: var(--teal-deep);
  font-size: 12px;
  font-weight: 800;
}

.pricing-promo__label .fi {
  line-height: 1 !important;
}

.pricing-promo__note {
  margin: 0;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 40rem;
}

.pricing-promo__warn {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 0;
  max-width: 40rem;
  color: #8a5a18;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.4;
}

.pricing-promo__warn .fi {
  flex-shrink: 0;
  margin-top: 0.15em;
  line-height: 1 !important;
  color: #c48a2a;
}

.pricing-promo__warn .fi::before {
  line-height: 1 !important;
}

.pricing-promo__timer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.pricing-promo__timer-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--teal-deep);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pricing-promo__digits {
  display: flex;
  gap: 10px;
}

.pricing-promo__digits > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
  min-height: 4.75rem;
  padding: 12px 10px 10px;
  border-radius: 16px;
  background: var(--white);
  border: 1px solid rgba(65, 163, 175, 0.35);
  box-shadow: 0 8px 22px rgba(26, 34, 51, 0.06);
}

.pricing-promo__digits strong {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3.2vw, 2.35rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-weight: 600;
}

.pricing-promo__digits small {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

@media (max-width: 640px) {
  .pricing-promo__timer {
    align-items: stretch;
    width: 100%;
  }
  .pricing-promo__digits {
    width: 100%;
  }
  .pricing-promo__digits > span {
    flex: 1 1 0;
    min-width: 0;
  }
}

.price-card__founder {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--teal-deep);
  background: var(--bg-soft);
  border-radius: 10px;
  padding: 8px 10px;
}

body.show-founder .price-card__founder {
  display: inline-flex;
}

.price-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1;
}

.price-card li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.92rem;
  color: var(--muted);
  padding: 5px 0;
}

.price-card li i {
  color: var(--ok);
  margin-top: 2px;
  line-height: 1 !important;
  flex-shrink: 0;
}

.price-card .btn--block {
  width: 100%;
  justify-content: center;
  margin-top: auto;
}

.compare-prices {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  font-size: 0.95rem;
}

.compare-prices th,
.compare-prices td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.compare-prices th {
  background: #f7fafb;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.compare-prices tr:last-child td {
  border-bottom: 0;
}

.founder-col {
  display: none;
}

body.show-founder .founder-col {
  display: table-cell;
}

/* FAQ */
.faq {
  display: grid;
  gap: 10px;
  /* на всю ширину .container — не сжимать до 800px */
}

.faq details {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 4px 16px;
}

.faq summary {
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  padding: 14px 0;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}

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

.faq__q {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  flex: 1;
  line-height: 1.4;
}

.faq__q-icon {
  flex-shrink: 0;
  margin-top: 0.18em;
  color: var(--teal-deep);
  font-size: 1.1rem;
  line-height: 1 !important;
}

.faq__q-icon::before {
  line-height: 1 !important;
}

.faq__chevron {
  flex-shrink: 0;
  margin-top: 0.05em;
  color: var(--teal);
  font-size: 1.45rem;
  line-height: 1 !important;
  transition: transform 0.2s ease;
}

.faq__chevron::before {
  line-height: 1 !important;
}

.faq details[open] summary .faq__chevron {
  transform: rotate(180deg);
}

.faq details p {
  margin: 0 0 16px;
  color: var(--muted);
}

.faq details .faq__contact-link {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--teal-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
}

.faq details .faq__contact-link:hover {
  color: var(--teal-deep);
}

/* Final CTA */
.final {
  padding: 80px 0;
  background:
    radial-gradient(700px 280px at 12% 0%, rgba(65, 163, 175, 0.18), transparent 65%),
    linear-gradient(180deg, #eaf4f6, var(--bg));
  text-align: left;
}

.final h2 {
  font-family: var(--display);
  font-size: clamp(2rem, 3.8vw, 3.45rem);
  margin: 0 0 14px;
  max-width: none;
  line-height: 1.25;
  padding-inline: 0;
}

.final p {
  color: var(--muted);
  max-width: 46rem;
  margin: 0 0 24px;
  padding-inline: 0;
  font-size: 1.05rem;
  line-height: 1.55;
}

.final__actions {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  row-gap: 18px;
}

/* Footer */
.footer {
  padding: 48px 0 40px;
  border-top: 1px solid var(--line);
  background: #f4f8f9;
  color: var(--muted);
  font-size: 14px;
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
}

.footer__top {
  display: grid;
  gap: 32px 48px;
  margin-bottom: 28px;
}

@media (min-width: 800px) {
  .footer__top {
    grid-template-columns: 1.1fr 1fr;
    align-items: start;
  }
}

.footer__logo {
  display: inline-block;
  line-height: 0;
  margin-bottom: 14px;
}

.footer__logo img {
  display: block;
  height: 40px;
  width: auto;
}

.footer__brand {
  max-width: 36rem;
}

.footer__invite {
  margin: 0;
  color: var(--ink);
  line-height: 1.45;
  font-size: 0.95rem;
}

.footer__invite a {
  color: var(--teal-deep);
  font-weight: 700;
}

/* Telegram-канал экосистемы — сразу под FAQ, один белый блок */
#faq.section--join-after {
  padding-bottom: 28px;
}
#ecosystem.section--join-before {
  padding-top: 0;
  padding-bottom: 72px;
}
.ecosystem-invite {
  display: grid;
  gap: 18px;
  padding: 28px 24px;
  border-radius: 20px;
  border: 1px solid rgba(65, 163, 175, 0.35);
  background:
    radial-gradient(600px 220px at 100% 0%, rgba(65, 163, 175, 0.18), transparent 55%),
    linear-gradient(160deg, #eef8f9, #fff 60%);
  box-shadow: var(--shadow);
}
@media (min-width: 720px) {
  .ecosystem-invite {
    grid-template-columns: auto 1fr;
    gap: 22px 28px;
    align-items: center;
    padding: 32px 36px;
  }
}
.ecosystem-invite__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(65, 163, 175, 0.16);
  color: var(--teal-deep);
  flex-shrink: 0;
}
.ecosystem-invite__icon .fi {
  font-size: 1.45rem;
  line-height: 1 !important;
}
.ecosystem-invite__icon .fi::before {
  line-height: 1 !important;
}
.ecosystem-invite__eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
.ecosystem-invite h2 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.ecosystem-invite p:not(.ecosystem-invite__eyebrow) {
  margin: 0 0 18px;
  max-width: 40rem;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.5;
  font-weight: 600;
}
.ecosystem-invite__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  row-gap: 14px;
}
.ecosystem-invite .btn {
  display: inline-flex;
}
.ecosystem-invite .btn .fi {
  line-height: 1 !important;
}
.ecosystem-invite .btn .fi::before {
  line-height: 1 !important;
}

/* Экосистема · с карточками постов канала */
.ecosystem-invite--posts {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 22px;
  padding: 28px 24px;
}
@media (min-width: 720px) {
  .ecosystem-invite--posts {
    grid-template-columns: none;
    padding: 32px 36px;
  }
}
.ecosystem-invite--posts .ecosystem-invite__top {
  display: grid;
  gap: 16px;
  align-items: start;
  width: 100%;
}
@media (min-width: 720px) {
  .ecosystem-invite--posts .ecosystem-invite__top {
    grid-template-columns: auto 1fr;
    gap: 22px 28px;
    align-items: center;
  }
}
.ecosystem-invite--posts .ecosystem-invite__main p:not(.ecosystem-invite__eyebrow) {
  margin-bottom: 0;
}
.ecosystem-posts {
  display: grid;
  gap: 12px;
  width: 100%;
}
@media (min-width: 800px) {
  .ecosystem-posts {
    grid-template-columns: repeat(3, 1fr);
  }
}
.ecosystem-post {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 100%;
  padding: 16px 16px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  text-decoration: none;
  color: var(--ink);
  box-shadow: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.ecosystem-post:hover,
.ecosystem-post:focus-visible {
  border-color: rgba(65, 163, 175, 0.45);
  box-shadow: 0 10px 24px rgba(31, 107, 116, 0.1);
  transform: translateY(-1px);
  color: var(--ink);
}
.ecosystem-post__meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
.ecosystem-post__meta .fi {
  font-size: 14px;
  line-height: 1 !important;
}
.ecosystem-post__meta .fi::before {
  line-height: 1 !important;
}
.ecosystem-post strong {
  display: block;
  flex: 1 1 auto;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.ecosystem-post__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--teal-deep);
}
.ecosystem-post__go .fi {
  font-size: 13px;
  line-height: 1 !important;
}
.ecosystem-post__go .fi::before {
  line-height: 1 !important;
}
.ecosystem-invite--posts .ecosystem-invite__actions {
  margin-top: 0;
}

.footer__lab {
  margin: 14px 0 0;
  font-size: 12px;
}

.footer__h {
  margin: 0 0 8px;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800;
}

.footer__care-lead {
  margin: 0 0 6px;
  font-weight: 700;
}

.footer__care-lead a {
  color: var(--teal-deep);
  text-decoration: none;
}

.footer__care-lead a:hover {
  text-decoration: underline;
}

.footer__care-hint {
  margin: 0 0 12px;
  font-size: 13px;
}

.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
}

.social-row--modal {
  margin: 0 0 14px;
  justify-content: flex-start;
}

.social-btn {
  position: relative;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 50%;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.social-btn:hover {
  transform: translateY(-1px);
}

.social-btn img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.social-btn__color {
  opacity: 0;
}

.social-btn:hover .social-btn__color,
.social-btn:focus-visible .social-btn__color {
  opacity: 1;
}

.social-btn:hover .social-btn__mono,
.social-btn:focus-visible .social-btn__mono {
  opacity: 0;
}

.social-btn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.btn__soc {
  width: 17px;
  height: 14px;
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
}

.footer__email {
  margin: 0 0 10px;
  font-weight: 700;
}

.footer__email a {
  color: var(--ink);
  text-decoration: none;
}

.footer__hours {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  max-width: 28rem;
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.footer__legal a {
  color: var(--muted);
  text-decoration: none;
}

.footer__legal a:hover {
  color: var(--teal-deep);
}

.footer__copy {
  margin-left: auto;
  color: var(--muted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Lawyer contact modal */
body.lp-modal-open {
  overflow: hidden;
}

.lp-modal[hidden] {
  display: none !important;
}

.lp-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.lp-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 34, 51, 0.45);
}

.lp-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  background: var(--white);
  border-radius: 18px;
  padding: 24px 22px 20px;
  box-shadow: 0 24px 60px rgba(26, 34, 51, 0.2);
}

.lp-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  padding: 6px;
  line-height: 1;
}

.lp-modal__close .fi {
  line-height: 1 !important;
  font-size: 1.25rem;
}

.lp-modal__dialog h3 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 1.35rem;
  line-height: 1.25;
  padding-right: 28px;
}

.lp-modal__lead {
  margin: 0 0 16px;
  color: var(--muted);
  line-height: 1.45;
}

.lp-modal__actions {
  margin: 0 0 14px;
}

.lp-modal__actions .btn {
  gap: 10px;
}

.lp-modal__note {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}

.lawyer-cta__actions .btn {
  cursor: pointer;
}

/* Preview panel */
.preview-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  width: min(320px, calc(100% - 32px));
  background: #1a2233;
  color: #fff;
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
  font-size: 13px;
}

.preview-panel[hidden] {
  display: none !important;
}

.preview-panel h4 {
  margin: 0 0 10px;
  font-size: 13px;
}

.preview-panel label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  cursor: pointer;
}

.preview-panel .row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.preview-panel button {
  flex: 1;
  border: 0;
  border-radius: 10px;
  padding: 8px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  background: var(--teal);
  color: #fff;
}

.preview-panel .ghost {
  background: #2d3748;
}

/* Screens needed */
.shots {
  display: grid;
  gap: 14px;
}

@media (min-width: 800px) {
  .shots {
    grid-template-columns: repeat(3, 1fr);
  }
}

.shot {
  border: 1px dashed rgba(65, 163, 175, 0.45);
  border-radius: 16px;
  background: repeating-linear-gradient(
    -45deg,
    #f7fafb,
    #f7fafb 10px,
    #eef5f6 10px,
    #eef5f6 20px
  );
  min-height: 180px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.shot strong {
  display: block;
  margin-bottom: 4px;
}

.shot span {
  color: var(--muted);
  font-size: 13px;
}

/* —— Selling blocks: stakes, stories, bridge, lawyer —— */
.section__head--wide {
  max-width: none;
}
.section__head--wide p {
  max-width: 52rem;
}

.section--danger {
  background: linear-gradient(180deg, #fff8f3 0%, #fff 55%);
  border-block: 1px solid #f0e0d4;
}

.stakes {
  display: grid;
  gap: 16px;
}
@media (min-width: 900px) {
  .stakes { grid-template-columns: repeat(3, 1fr); }
}

.stake {
  background: #fff;
  border: 1px solid #f0e0d4;
  border-radius: var(--radius);
  padding: 22px;
}

.stake__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #fff1e6;
  color: #b45309;
  font-size: 22px;
  margin-bottom: 12px;
}

.stake h3 { margin: 0 0 12px; font-size: 1.05rem; }
.stake p { margin: 0; color: var(--muted); font-size: 0.95rem; }

.stakes__note {
  margin: 28px 0 0;
  padding: 16px 18px;
  border-radius: 14px;
  background: #f7fafb;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 52rem;
}
.stakes__note i { color: var(--teal); margin-right: 6px; }

.stories {
  display: grid;
  gap: 16px;
}
@media (min-width: 900px) {
  .stories { grid-template-columns: repeat(3, 1fr); }
}

.story {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.section--alt .story { background: #fff; }

.story__num {
  display: inline-block;
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--teal);
  font-weight: 600;
  margin-bottom: 8px;
}
.story h3 { margin: 0 0 12px; font-size: 1.05rem; line-height: 1.35; }
.story p { margin: 0; color: var(--muted); font-size: 0.95rem; }

.bridge {
  display: grid;
  gap: 28px;
  align-items: start;
}
@media (min-width: 900px) {
  .bridge { grid-template-columns: 1.2fr 0.8fr; gap: 40px; }
}
.bridge h2 { font-family: var(--display); font-size: clamp(1.45rem, 2.4vw, 2rem); margin: 0 0 14px; letter-spacing: -0.02em; }
.bridge p { color: var(--muted); margin: 0 0 14px; font-size: 1.02rem; }
.bridge__actions { display: flex; flex-wrap: wrap; gap: 12px; row-gap: 18px; margin-top: 8px; }

.bridge__list {
  list-style: none;
  margin: 0;
  padding: 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}
.bridge__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid #eef3f4;
  font-size: 0.95rem;
}
.bridge__list li:last-child { border-bottom: 0; }
.bridge__list i { color: var(--ok); margin-top: 2px; }

.quote {
  margin: 0 0 24px;
  padding: 28px 28px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  position: relative;
}
.quote__mark {
  font-family: var(--display);
  font-size: 4rem;
  line-height: 0.8;
  color: rgba(65, 163, 175, 0.35);
  margin-bottom: 8px;
}
.quote p {
  margin: 0 0 20px;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ink);
}
.quote p:last-child {
  margin-bottom: 0;
}
.quote__who {
  display: flex;
  gap: 12px;
  align-items: center;
}
.quote__avatar {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--bg-soft);
  color: var(--teal-deep);
  display: grid;
  place-items: center;
  font-size: 22px;
}
.quote__who strong { display: block; }
.quote__who span { color: var(--muted); font-size: 13px; }

.lawyer-cta {
  display: grid;
  gap: 22px;
  padding: 24px;
  border-radius: 20px;
  border: 1px solid rgba(65, 163, 175, 0.35);
  background: linear-gradient(160deg, #eef8f9, #fff 55%);
  align-items: stretch;
}
@media (min-width: 860px) {
  .lawyer-cta {
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.9fr);
    gap: 28px;
    align-items: center;
  }
}
.lawyer-cta__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.lawyer-cta h3 { margin: 0 0 8px; }
.lawyer-cta p { margin: 0 0 10px; color: var(--muted); }
.lawyer-cta__list {
  margin: 0 0 16px;
  padding: 0 0 0 1.15rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}
.lawyer-cta__list li {
  margin: 0 0 6px;
}
.lawyer-cta__list li:last-child {
  margin-bottom: 0;
}
.lawyer-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  row-gap: 16px;
  margin: 0 0 14px;
  padding-top: 0;
}
.lawyer-cta__note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}
.lawyer-cta__note--under > .fi {
  flex-shrink: 0;
  margin-top: 0.2em;
  color: var(--teal);
  line-height: 1 !important;
}
.lawyer-cta__note--under > span {
  flex: 1;
  min-width: 0;
}
.lawyer-cta__visual {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(65, 163, 175, 0.22);
  box-shadow: 0 10px 28px rgba(26, 34, 51, 0.06);
}
.lawyer-cta__visual img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 859px) {
  .lawyer-cta__visual {
    order: -1;
    max-width: 28rem;
    margin-inline: auto;
  }
}

.pricing-legal {
  color: var(--muted);
  font-size: 13px;
  max-width: 44rem;
  margin: 8px 0 0;
}

.dev-only { display: none !important; }
body.preview-mode .dev-only { display: inline !important; }

.hero__lead em { font-style: italic; color: var(--ink); }

/* —— Hero checks (Master of Offers) —— */
.hero-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.hero-checks li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.45;
}
.hero-checks i {
  color: var(--ok);
  margin-top: 0.22em;
  flex-shrink: 0;
  line-height: 1 !important;
  width: 1em;
  height: 1em;
}
.hero-checks i::before {
  line-height: 1 !important;
}

.hero__product {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(65, 163, 175, 0.12);
  color: var(--teal-deep);
  font-size: 13px;
  font-weight: 700;
}

/* —— Anticipated questions along the path —— */
.path {
  display: grid;
  gap: 14px;
  margin: 0 0 28px;
}
@media (min-width: 900px) {
  .path { grid-template-columns: repeat(3, 1fr); }
}
.path-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.path-item__q {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--teal-deep);
  line-height: 1.35;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.path-item__q i {
  margin: 0.18em 0 0;
  flex-shrink: 0;
  width: 1.15em;
  height: 1.15em;
  font-size: 1.05em;
  line-height: 1 !important;
}
.path-item__q i::before {
  line-height: 1 !important;
}
.path-item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.mechanism {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.mechanism li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
}
.mechanism li i { color: var(--teal); }
.mechanism__arrow {
  color: var(--muted);
  font-size: 14px;
  padding: 0 2px;
}

/* —— Flow scheme (how it works / hero) —— */
.flow-scheme {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .flow-scheme { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .flow-scheme { grid-template-columns: repeat(6, 1fr); gap: 10px; }
}

.flow-scheme__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 20px 14px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(26, 34, 51, 0.04);
  min-width: 0;
}
.section--alt .flow-scheme__step,
.hero .flow-scheme__step {
  background: #fff;
}

.flow-scheme__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(65, 163, 175, 0.12);
  color: var(--teal-deep);
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.flow-scheme__icon i {
  font-size: inherit;
  line-height: 1 !important;
}

.flow-scheme__title {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.flow-scheme__cap {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--muted);
}

@media (min-width: 1000px) {
  .flow-scheme__step:not(:last-child)::after {
    content: "→";
    position: absolute;
    right: -11px;
    top: 42px;
    z-index: 1;
    font-size: 16px;
    font-weight: 700;
    color: var(--teal);
    line-height: 1;
    pointer-events: none;
  }
}

/* Compact row for hero — one line on desktop (legacy; prefer .flow-rail) */
.flow-scheme--row {
  margin: 28px 0 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: stretch;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
  scrollbar-width: thin;
}
.flow-scheme--row .flow-scheme__step {
  flex: 1 1 0;
  min-width: 120px;
  padding: 16px 10px 14px;
}
.flow-scheme--row .flow-scheme__icon {
  width: 42px;
  height: 42px;
  font-size: 20px;
  border-radius: 12px;
}
.flow-scheme--row .flow-scheme__title {
  font-size: 0.95rem;
}
.flow-scheme--row .flow-scheme__cap {
  font-size: 0.78rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 1000px) {
  .flow-scheme--row .flow-scheme__step:not(:last-child)::after {
    right: -10px;
    top: 34px;
  }
}

/* Hero rail: иконка слева от текста; макс. 3 колонки — иначе узко */
.flow-rail {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  counter-reset: flow-step;
  overflow: visible;
}
@media (min-width: 560px) {
  .flow-rail {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
@media (min-width: 900px) {
  .flow-rail {
    grid-template-columns: repeat(3, 1fr);
  }
}

.flow-rail__step {
  counter-increment: flow-step;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: start;
  align-content: start; /* не растягивать ряды при высокой иконке / выравнивании карточек */
  min-width: 0;
  padding: 14px 36px 14px 14px; /* справа место под номер */
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line);
  border-radius: 14px;
}

.flow-rail__step::before {
  content: counter(flow-step);
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(65, 163, 175, 0.7);
  line-height: 1;
  pointer-events: none;
}

.flow-rail__icon {
  grid-row: 1 / span 2;
  grid-column: 1;
  width: 40px;
  height: 40px;
  margin-top: 1px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(65, 163, 175, 0.14);
  color: var(--teal-deep);
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.flow-rail__title {
  grid-column: 2;
  grid-row: 1;
  display: block;
  margin: 0;
  padding: 0;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

.flow-rail__cap {
  grid-column: 2;
  grid-row: 2;
  display: block;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* Развёрнутые подписи (блок «Как это работает» на v4) */
.flow-rail--rich .flow-rail__cap {
  font-size: 0.88rem;
  line-height: 1.45;
}
.flow-rail--rich .flow-rail__title {
  font-size: 1rem;
}
.flow-rail--rich .flow-rail__step {
  padding: 16px 36px 16px 16px;
  row-gap: 4px;
}

/* После схемы — один поток, без двухколоночной «дыры» */
.flow-after {
  margin-top: 28px;
  max-width: 40rem;
}
.flow-after__lead {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.55;
}
.flow-after__lead strong {
  color: var(--ink);
  font-weight: 700;
}
.flow-after__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Узкий экран: одна колонка, иконка всё ещё слева — нормальная ширина текста */
@media (max-width: 380px) {
  .flow-rail__step {
    padding-right: 28px;
    column-gap: 10px;
  }
  .flow-rail__icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
}

.hero__after {
  margin-top: 8px;
}
.hero__after .hero__actions {
  margin-top: 22px;
  justify-content: flex-start;
}
.hero__after .hero__trust {
  margin-top: 14px;
}

/* —— Several lawyer quotes —— */
.quotes {
  display: grid;
  gap: 16px;
  margin: 0 0 24px;
}
@media (min-width: 900px) {
  .quotes { grid-template-columns: 1fr 1fr; }
}
.quotes .quote {
  margin: 0;
  height: 100%;
}
.quotes .quote p { font-size: 1rem; }
.quotes .quote--wide {
  grid-column: 1 / -1;
}

.lawyer-partner {
  margin: 0 0 20px;
  padding: 22px 24px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.lawyer-partner h3 { margin: 0 0 10px; font-size: 1.1rem; }
.lawyer-partner p { margin: 0 0 10px; color: var(--muted); font-size: 0.98rem; }
.lawyer-partner p:last-child { margin-bottom: 0; }
.lawyer-partner ul {
  margin: 10px 0 0;
  padding: 0 0 0 1.1rem;
  color: var(--muted);
  font-size: 0.95rem;
}
.lawyer-partner li { margin: 0 0 6px; }

.segments {
  display: grid;
  gap: 16px;
}
@media (min-width: 900px) {
  .segments { grid-template-columns: repeat(3, 1fr); }
}
.segment {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.segment__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--bg-soft);
  color: var(--teal-deep);
  font-size: 20px;
  margin-bottom: 12px;
}
.segment h3 { margin: 0 0 12px; font-size: 1.02rem; }
.segment p { margin: 0; color: var(--muted); font-size: 0.92rem; }

/* —— v7: комментарии юриста —— */
.lawyer-comments {
  display: grid;
  gap: 14px;
  margin: 0 0 28px;
}
@media (min-width: 900px) {
  .lawyer-comments {
    grid-template-columns: 1fr 1fr;
  }
  .lawyer-comments .quote--wide {
    grid-column: 1 / -1;
  }
}
.lawyer-comments .quote {
  margin: 0;
}
.lawyer-comments .quote p {
  font-size: 1rem;
  margin: 0;
}
.lawyer-comments .quote__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--teal-deep);
  line-height: 1.2;
}
.lawyer-comments .quote__tag i {
  line-height: 1 !important;
  font-size: 14px;
  width: 14px;
  height: 14px;
}
.lawyer-comments .quote__tag i::before {
  line-height: 1 !important;
}
.lawyer-comments__note {
  margin: -12px 0 28px;
  color: var(--muted);
  font-size: 13px;
  max-width: 46rem;
}

/* —— связка «юрист / плагин» —— */
.roles-bridge {
  margin: 0 0 28px;
  padding: 26px 28px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
}
.roles-bridge__grid {
  display: grid;
  gap: 18px;
  margin: 16px 0 18px;
}
@media (min-width: 760px) {
  .roles-bridge__grid {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
  }
}
.roles-bridge__col h3 {
  margin: 0 0 8px;
  font-size: 1.02rem;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.3;
}
.roles-bridge__col h3 i {
  color: var(--teal-deep);
  line-height: 1 !important;
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.12em;
}
.roles-bridge__col h3 i::before {
  line-height: 1 !important;
}
.roles-bridge__col p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.roles-bridge__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.roles-bridge__list li {
  position: relative;
  padding-left: 1.15em;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}
.roles-bridge__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}
.sides-journal {
  margin-top: 22px;
}
.sides-journal .mock {
  max-width: 40rem;
}
.hero-checkout__cart {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: #fafcfc;
  font-size: 0.92rem;
}
.hero-checkout__cart strong {
  color: var(--ink);
}
.hero-checkout__cart span {
  color: var(--muted);
  font-weight: 600;
}

/* MEMBERLUX-like checkout mock (hero) */
.mbl-form-mock {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
  max-width: 520px;
  margin-inline: auto;
}
.mbl-form-mock__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
  background: #f7fafb;
}
.mbl-form-mock__tab {
  text-align: center;
  padding: 12px 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.mbl-form-mock__tab.is-active {
  color: var(--teal-deep);
  background: #fff;
  box-shadow: inset 0 -2px 0 var(--teal);
}
.mbl-form-mock__fields {
  display: grid;
  gap: 8px;
  padding: 14px 14px 4px;
}
.mbl-form-mock__field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  background: #f2f5f6;
  color: #8a94a3;
  font-size: 13px;
  font-weight: 600;
}
.mbl-form-mock__field i,
.mbl-form-mock__field i::before {
  line-height: 1;
  display: inline-flex;
  font-size: 15px;
  color: #a0aab6;
}
.mbl-form-mock__pay {
  margin: 10px 14px 0;
  padding: 12px;
  border-radius: 12px;
  background: #f7fafb;
  border: 1px solid var(--line);
}
.mbl-form-mock__radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.mbl-form-mock__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--teal);
  box-shadow: inset 0 0 0 3px #fff;
  background: var(--teal);
  flex: 0 0 auto;
}
.mbl-form-mock__pay-note {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.mbl-form-mock__consents {
  padding: 12px 14px 4px;
}
.mbl-form-mock__consents-label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}
.mbl-form-mock__checks {
  list-style: none;
  margin: 0;
  padding: 0 0 0 12px; /* место под звёздочку обязательности слева от чекбокса */
  display: grid;
  gap: 8px;
}
.mbl-form-mock__checks li {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink);
}
/* Звёздочка как на фронте: ::before слева от чекбокса, выходит в поле */
.mbl-form-mock__checks li.is-req::before {
  content: "*";
  position: absolute;
  left: -12px;
  top: 1px;
  color: var(--teal-deep);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
.mbl-form-mock__checks li i {
  position: relative;
  color: var(--muted);
  margin-top: 1px;
  line-height: 1 !important;
  display: inline-flex;
  font-size: 16px;
  overflow: visible;
}
.mbl-form-mock__checks li i::before {
  line-height: 1 !important;
}
.mbl-form-mock__checks li.is-on i {
  color: var(--ok);
}
.mbl-form-mock__checks a {
  color: var(--teal-deep);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  pointer-events: none;
}
.mbl-form-mock__periods {
  margin: 10px 14px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(65, 163, 175, 0.08);
  border: 1px solid rgba(65, 163, 175, 0.18);
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.4;
}
.mbl-form-mock__periods strong {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--teal-deep);
}
.mbl-form-mock__periods ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mbl-form-mock__periods li {
  color: var(--muted);
  font-weight: 600;
}
.mbl-form-mock__submit {
  margin: 12px 14px 0;
  min-height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--teal-deep);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
}
.mbl-form-mock__caption {
  margin: 10px 14px 14px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  text-align: center;
}

.consents-closeup {
  display: grid;
  gap: 28px;
  align-items: center;
}
@media (min-width: 900px) {
  .consents-closeup {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}
.consents-closeup .hero-checkout {
  max-width: 420px;
  margin-inline: auto;
  width: 100%;
}
.roles-bridge__chain {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--bg-soft);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
}
.roles-bridge__chain span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
}
.roles-bridge__chain i {
  color: var(--teal);
  line-height: 1;
  font-size: 12px;
}
.roles-bridge__foot {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: 52rem;
}
.roles-bridge__foot strong {
  color: var(--ink);
}

/* —— v8: интервью —— */
.lawyer-interview {
  display: grid;
  gap: 14px;
  margin: 0 0 28px;
}
.lawyer-interview__item {
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.lawyer-interview__q {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 16px 18px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.lawyer-interview__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.2em;
  color: var(--teal-deep);
  line-height: 1;
}
.lawyer-interview__icon .fi {
  font-size: 1.05rem;
  line-height: 1 !important;
}
.lawyer-interview__icon .fi::before {
  line-height: 1 !important;
}
.lawyer-interview__q p {
  margin: 0;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.4;
  color: var(--ink);
}
.section--lawyer .lawyer-cta {
  margin-top: 8px;
}
.lawyer-interview__a {
  display: block;
  padding: 18px 20px 20px;
}
.lawyer-interview__body {
  min-width: 0;
}
.lawyer-interview__body p {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.55;
}
.lawyer-interview__body p:last-child {
  margin-bottom: 0;
}
.lawyer-interview__body p em {
  font-style: normal;
  font-weight: 700;
  color: var(--teal-deep);
}
@media (max-width: 640px) {
  .lawyer-interview__q {
    flex-direction: column;
    gap: 8px;
  }
}

/* ===== Anthology (v10 comparison draft) ===== */
.anthology-banner {
  background: #fff8e6;
  color: #7a5a10;
  border-bottom: 2px solid rgba(196, 149, 42, 0.45);
  padding: 14px 16px;
  font-size: 14px;
  text-align: center;
  line-height: 1.45;
}
.anthology-banner strong {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
}
.anthology-banner a {
  color: #9a6b12;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.anthology-toc {
  position: relative;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  padding: 10px 16px;
  background: #fffdf5;
  border-bottom: 1px solid rgba(196, 149, 42, 0.35);
  font-size: 13px;
}
.anthology-toc strong {
  color: #7a5a10;
  margin-right: 4px;
}
.anthology-toc a {
  color: #5a6578;
  text-decoration: none;
  font-weight: 600;
}
.anthology-toc a:hover {
  color: #7a5a10;
  text-decoration: underline;
}
.anthology-chapter {
  margin: 48px 0 16px;
  padding: 8px 0 0;
  border-top: 3px solid rgba(196, 149, 42, 0.35);
}
.anthology-block {
  margin: 0 0 40px;
  padding: 20px;
  border: 2px dashed rgba(196, 149, 42, 0.4);
  border-radius: 16px;
  background: rgba(255, 248, 230, 0.25);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.anthology-block.is-picked {
  border-style: solid;
  border-color: rgba(65, 163, 175, 0.65);
  background: rgba(238, 248, 249, 0.55);
  box-shadow: 0 0 0 3px rgba(65, 163, 175, 0.12);
}
body.anthology-filter-picked .anthology-block:not(.is-picked) {
  display: none !important;
}
body.anthology-filter-picked .anthology-chapter.is-empty-filtered {
  display: none !important;
}

.anthology-label {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff8e6;
  border: 1px solid rgba(196, 149, 42, 0.35);
  font-size: 13px;
  font-weight: 700;
  color: #7a5a10;
  line-height: 1.35;
}
.anthology-block.is-picked .anthology-label {
  background: #eef8f9;
  border-color: rgba(65, 163, 175, 0.4);
  color: var(--teal-deep);
}
.anthology-label > .fi:first-child {
  flex-shrink: 0;
  line-height: 1 !important;
  margin-top: 0.12em;
  align-self: flex-start;
}
.anthology-label-tools {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}
.anthology-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(196, 149, 42, 0.4);
  font-size: 12px;
  font-weight: 700;
  color: #7a5a10;
  cursor: pointer;
  user-select: none;
  line-height: 1.2;
}
.anthology-block.is-picked .anthology-pick {
  border-color: rgba(65, 163, 175, 0.55);
  color: var(--teal-deep);
  background: #fff;
}
.anthology-pick input {
  margin: 0;
  width: 15px;
  height: 15px;
  accent-color: var(--teal);
  cursor: pointer;
}
.anthology-copy-one {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  line-height: 1.2;
}
.anthology-copy-one i {
  line-height: 1 !important;
  font-size: 13px;
}
.anthology-copy-one:hover {
  color: var(--teal-deep);
  border-color: rgba(65, 163, 175, 0.45);
}
.anthology-copy-one.is-copied,
#anthology-copy-selected.is-copied {
  color: var(--ok);
  border-color: rgba(47, 158, 107, 0.45);
}

.anthology-picker-bar {
  position: sticky;
  top: 0;
  z-index: 45;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  padding: 10px 16px;
  background: #1a2233;
  color: #e8eef2;
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.anthology-picker-bar strong {
  color: #9fe0e8;
  margin-right: 4px;
}
.anthology-picker-bar .anthology-picker-count {
  font-weight: 700;
  color: #fff;
}
.anthology-picker-bar .btn,
.anthology-picker-bar button.anthology-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.2;
}
.anthology-picker-bar button.anthology-bar-btn i {
  line-height: 1 !important;
}
.anthology-picker-bar button.anthology-bar-btn:hover:not(:disabled) {
  background: rgba(65, 163, 175, 0.35);
  border-color: rgba(159, 224, 232, 0.5);
}
.anthology-picker-bar button.anthology-bar-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.anthology-picker-bar button.anthology-bar-btn--primary {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.anthology-picker-bar button.anthology-bar-btn--primary:hover:not(:disabled) {
  background: var(--teal-dark);
}
.anthology-picker-hint {
  flex: 1 1 200px;
  color: rgba(232, 238, 242, 0.75);
  font-size: 12px;
  line-height: 1.35;
}
@media (max-width: 720px) {
  .anthology-label-tools {
    margin-left: 0;
    width: 100%;
  }
}

.anthology-block.has-draft .anthology-label {
  box-shadow: inset 3px 0 0 var(--ok);
}
.anthology-picker-bar button.anthology-bar-btn.is-active {
  background: rgba(196, 149, 42, 0.45);
  border-color: rgba(255, 220, 140, 0.7);
  color: #fff;
}
.anthology-folder-status.is-bound {
  color: #9fe0e8 !important;
  font-weight: 600;
}

body.anthology-pick-element {
  cursor: crosshair;
}
body.anthology-pick-element .anthology-block :not(.anthology-label):not(.anthology-label *) {
  cursor: crosshair;
}
.anthology-el-hover {
  outline: 2px dashed rgba(65, 163, 175, 0.85) !important;
  outline-offset: 3px;
  background: rgba(65, 163, 175, 0.08) !important;
}
.anthology-el-selected {
  outline: 2px solid rgba(65, 163, 175, 1) !important;
  outline-offset: 3px;
  background: rgba(65, 163, 175, 0.12) !important;
}

.anthology-edit-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(18, 24, 36, 0.55);
  backdrop-filter: blur(2px);
}
.anthology-edit-modal[hidden] {
  display: none !important;
}
.anthology-edit-dialog {
  width: min(820px, 100%);
  max-height: min(90vh, 900px);
  overflow: auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
  padding: 18px 20px 16px;
  border: 1px solid var(--line);
}
.anthology-edit-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.anthology-edit-head h3 {
  margin: 0 0 4px;
  font-size: 1.15rem;
  color: var(--ink);
}
.anthology-edit-meta {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}
.anthology-edit-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  color: var(--muted);
}
.anthology-edit-close i {
  line-height: 1 !important;
  font-size: 18px;
}
.anthology-edit-close:hover {
  color: var(--teal-deep);
  border-color: rgba(65, 163, 175, 0.45);
}
.anthology-edit-field {
  display: block;
  margin: 0 0 12px;
}
.anthology-edit-field > span {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.anthology-edit-field textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 280px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font: 500 14px/1.5 Manrope, system-ui, sans-serif;
  color: var(--ink);
  resize: vertical;
}
.anthology-edit-field textarea:focus {
  outline: 2px solid rgba(65, 163, 175, 0.35);
  border-color: rgba(65, 163, 175, 0.55);
}
.anthology-edit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.anthology-edit-actions .anthology-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.2;
}
.anthology-edit-actions .anthology-bar-btn i {
  line-height: 1 !important;
}
.anthology-edit-actions .anthology-bar-btn:hover {
  border-color: rgba(65, 163, 175, 0.45);
  color: var(--teal-deep);
}
.anthology-edit-actions .anthology-bar-btn--primary {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.anthology-edit-actions .anthology-bar-btn--primary:hover {
  background: var(--teal-dark);
  color: #fff;
}
.anthology-edit-actions .anthology-bar-btn.is-ok {
  color: var(--ok);
  border-color: rgba(47, 158, 107, 0.5);
}
.anthology-edit-hint {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
body.anthology-edit-open {
  overflow: hidden;
}

/* ===== Мои сборки (composer) ===== */
.anthology-chapter--custom {
  border-top-color: rgba(65, 163, 175, 0.55);
  background: linear-gradient(180deg, rgba(238, 248, 249, 0.65), transparent 120px);
  padding-bottom: 48px;
}
.anthology-label-title {
  flex: 1 1 auto;
  min-width: 0;
}
.custom-chapter-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin-bottom: 18px;
}
.custom-chapter-toolbar .anthology-bar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(65, 163, 175, 0.45);
  background: var(--teal);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.2;
}
.custom-chapter-toolbar .anthology-bar-btn i {
  line-height: 1 !important;
}
.custom-active-status {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
}
.custom-active-status.is-on {
  color: var(--teal-deep);
  font-weight: 600;
}
.custom-empty-hint {
  color: var(--muted);
  font-size: 14px;
  margin: 8px 0 0;
}
.anthology-block--custom {
  border-style: solid;
  border-color: rgba(65, 163, 175, 0.5);
  background: rgba(238, 248, 249, 0.4);
}
.anthology-block--custom.is-active-custom {
  box-shadow: 0 0 0 3px rgba(65, 163, 175, 0.2);
}
.anthology-block--custom .anthology-label {
  background: #eef8f9;
  border-color: rgba(65, 163, 175, 0.4);
  color: var(--teal-deep);
}
.custom-parts {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.custom-parts-empty {
  margin: 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff;
  border: 1px dashed rgba(65, 163, 175, 0.4);
  color: var(--muted);
  font-size: 14px;
}
.custom-part {
  border: 1px solid rgba(65, 163, 175, 0.3);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}
.custom-part-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  background: #f3fafb;
  border-bottom: 1px solid rgba(65, 163, 175, 0.2);
  font-size: 12px;
  font-weight: 700;
  color: var(--teal-deep);
}
.custom-part-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.custom-part-source i {
  line-height: 1 !important;
}
.custom-part-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.custom-part-actions button {
  margin: 0;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  line-height: 1.2;
}
.custom-part-actions button:hover {
  color: var(--teal-deep);
  border-color: rgba(65, 163, 175, 0.45);
}
.custom-part-body {
  padding: 12px 14px;
  min-height: 48px;
  outline: none;
  font-size: 14px;
  line-height: 1.45;
}
.custom-part-body:focus {
  background: rgba(65, 163, 175, 0.06);
}
body.anthology-compose-pick {
  cursor: copy;
}
body.anthology-compose-pick .anthology-block:not(.anthology-block--custom) :not(.anthology-label):not(.anthology-label *) {
  cursor: copy;
}
.custom-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 1100;
  padding: 10px 16px;
  border-radius: 999px;
  background: #1a2233;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.custom-toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===== Юристы × программисты (v11/v12) ===== */
.variant-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 56px auto;
  max-width: var(--max);
  padding: 0 20px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.variant-divider::before,
.variant-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.variant-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--bg-soft);
  color: var(--teal-deep);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
.variant-tag i { line-height: 1 !important; }

.roles-duo {
  display: grid;
  gap: 16px;
  margin: 0 0 20px;
}
@media (min-width: 800px) {
  .roles-duo { grid-template-columns: 1fr 1fr; }
}
.roles-duo__col {
  padding: 20px 22px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
}
.roles-duo__col h3 {
  margin: 0 0 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 1.05rem;
  line-height: 1.3;
}
.roles-duo__col h3 i {
  margin-top: 0.12em;
  line-height: 1 !important;
  color: var(--teal-deep);
}
.roles-duo__col p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.roles-duo__foot {
  margin: 0;
  display: block;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(160deg, #eef8f9, #fff 70%);
  border: 1px solid rgba(65, 163, 175, 0.4);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink) !important;
  line-height: 1.4;
}
.roles-duo__foot:has(> .fi) {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.roles-duo__foot > .fi {
  line-height: 1 !important;
  margin-top: 0.2em;
  color: var(--teal-deep);
  flex-shrink: 0;
}

.scene {
  display: grid;
  gap: 12px;
  margin: 0 0 22px;
}
.scene__line {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
}
.scene__who {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--teal-deep);
}
.scene__who i { line-height: 1 !important; }
.scene__text {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}
.scene__twist {
  margin: 4px 0 0;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(196, 122, 44, 0.35);
  background: rgba(255, 248, 230, 0.65);
  color: var(--ink);
  font-weight: 700;
}
.probe-list {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.probe-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.45;
}
.probe-list li strong {
  display: block;
  margin-bottom: 2px;
}
.probe-list li i {
  margin-top: 0.2em;
  color: var(--teal);
  line-height: 1 !important;
  flex-shrink: 0;
}

.checklist {
  display: grid;
  gap: 12px;
  margin: 0 0 20px;
}
.checklist__item {
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #fff;
}
.checklist__q {
  margin: 0 0 12px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
}
.checklist__q span {
  color: var(--teal-deep);
  margin-right: 6px;
}
.checklist__opts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.checklist__opts label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  line-height: 1.2;
  user-select: none;
}
.checklist__opts label:has(input:checked) {
  border-color: rgba(65, 163, 175, 0.55);
  background: #eef8f9;
  color: var(--teal-deep);
}
.checklist__opts input {
  margin: 0;
  accent-color: var(--teal);
}
.checklist__result {
  display: none;
  margin: 0 0 18px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid var(--line);
}
.checklist__result.is-visible { display: block; }
.checklist__result--ok {
  background: rgba(47, 158, 107, 0.1);
  border-color: rgba(47, 158, 107, 0.35);
}
.checklist__result--mid {
  background: rgba(255, 248, 230, 0.9);
  border-color: rgba(196, 149, 42, 0.35);
}
.checklist__result--gap {
  background: rgba(194, 65, 45, 0.08);
  border-color: rgba(194, 65, 45, 0.28);
}
.checklist__result h3 {
  margin: 0 0 8px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 1.05rem;
}
.checklist__result h3 i {
  margin-top: 0.12em;
  line-height: 1 !important;
}
.checklist__result p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}
.checklist__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.ask-dev {
  display: grid;
  gap: 12px;
  margin: 0 0 18px;
}
.ask-dev__item {
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #fff;
}
.ask-dev__item h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.35;
}
.ask-dev__item h3 span {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  color: var(--teal-deep);
  font-size: 12px;
  font-weight: 800;
  margin-top: 0.05em;
}
.ask-dev__item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}
.ask-dev__note {
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.45;
}

.coop-chain {
  display: grid;
  gap: 0;
  margin: 0 0 18px;
  max-width: 40rem;
}
.coop-chain__step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 12px;
  align-items: start;
}
.coop-chain__dot {
  width: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.coop-chain__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--bg-soft);
  color: var(--teal-deep);
  font-size: 18px;
  border: 1px solid var(--line);
}
.coop-chain__icon i { line-height: 1 !important; }
.coop-chain__line {
  width: 2px;
  flex: 1;
  min-height: 18px;
  background: var(--line);
  margin: 4px 0;
}
.coop-chain__step:last-child .coop-chain__line { display: none; }
.coop-chain__body h3 {
  margin: 2px 0 4px;
  font-size: 1rem;
}
.coop-chain__body p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.slogan-strip {
  margin: 0;
  padding: 28px 24px;
  border-radius: 20px;
  border: 1px solid rgba(65, 163, 175, 0.35);
  background: linear-gradient(160deg, #eef8f9, #fff 60%);
  text-align: center;
}
.slogan-strip p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  max-width: 36rem;
  margin-inline: auto;
}

/* ===== Снимаем ограничения MEMBERLUX (v13) ===== */
.checks-mock {
  display: grid;
  gap: 16px;
}
@media (min-width: 800px) {
  .checks-mock { grid-template-columns: 1fr 1.15fr; }
}
.checks-mock__col {
  padding: 18px 18px 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #fff;
}
.checks-mock__col--rich {
  border-color: rgba(65, 163, 175, 0.4);
  background: linear-gradient(160deg, #eef8f9, #fff 55%);
}
.checks-mock__label {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.checks-mock__col--rich .checks-mock__label { color: var(--teal-deep); }
.checks-mock__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.checks-mock__list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink);
}
.checks-mock__list li i {
  margin-top: 0.18em;
  flex-shrink: 0;
  line-height: 1 !important;
  color: var(--teal);
}
.checks-mock__list li.is-off i { color: var(--muted); }
.checks-mock__list li.is-req::after {
  content: "*";
  color: #c2412d;
  font-weight: 800;
  margin-left: 2px;
}
.checks-mock__foot {
  margin: 14px 0 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.45;
}

.opt-in-demo {
  display: grid;
  gap: 14px;
  margin: 0 0 18px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: #fff;
}
.opt-in-demo__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.95rem;
  line-height: 1.4;
}
.opt-in-demo__row i {
  margin-top: 0.18em;
  line-height: 1 !important;
  flex-shrink: 0;
}
.opt-in-demo__row--req i { color: #c2412d; }
.opt-in-demo__row--ok i { color: var(--ok); }
.opt-in-demo__row--off i { color: var(--muted); }
.opt-in-mail {
  margin: 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.opt-in-mail h4 {
  margin: 0 0 8px;
  font-size: 0.92rem;
}
.opt-in-mail ul {
  margin: 0;
  padding: 0 0 0 1.1rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.opt-in-mail li { margin: 0 0 4px; }

.lifecycle {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0 0 16px;
}
.lifecycle span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 0.88rem;
  font-weight: 700;
}
.lifecycle span i {
  color: var(--teal);
  line-height: 1 !important;
}
.lifecycle__arrow {
  color: var(--muted);
  font-weight: 700;
}

.territories {
  display: grid;
  gap: 14px;
}
@media (min-width: 700px) {
  .territories { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .territories { grid-template-columns: repeat(3, 1fr); }
}
.territory {
  padding: 20px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
}
.territory__num {
  display: inline-block;
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--teal-deep);
}
.territory h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.3;
}
.territory h3 i {
  margin-top: 0.12em;
  color: var(--teal-deep);
  line-height: 1 !important;
}
.territory p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.scope-grid {
  display: grid;
  gap: 12px;
}
@media (min-width: 700px) {
  .scope-grid { grid-template-columns: repeat(2, 1fr); }
}
.scope-card {
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
}
.scope-card h3 {
  margin: 0 0 6px;
  font-size: 0.98rem;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.3;
}
.scope-card h3 i {
  margin-top: 0.12em;
  color: var(--teal-deep);
  line-height: 1 !important;
}
.scope-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.offer-stack {
  padding: 24px 26px;
  border-radius: 20px;
  border: 1px solid rgba(65, 163, 175, 0.35);
  background: linear-gradient(160deg, #eef8f9, #fff 55%);
}
.offer-stack h3 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 600;
  line-height: 1.3;
}
.offer-stack p {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.5;
}
.offer-stack p:last-child { margin-bottom: 0; }
.offer-stack__short {
  margin-top: 14px !important;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-weight: 700;
  color: var(--ink) !important;
}


/* ===== v15 selling assemble extras ===== */
.hero__sub {
  margin: 0 0 16px;
  max-width: 36rem;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--muted);
  font-weight: 600;
}
.hero__grid > div:first-child .hero__sub {
  margin-top: 0;
}
.compare-row-label {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 700;
  color: var(--ink);
}
.compare-row-label > .fi {
  flex-shrink: 0;
  line-height: 1 !important;
  margin-top: 0.15em;
  color: var(--teal);
}
.compare-row-label > span {
  line-height: 1.35;
}
td.compare__topic {
  white-space: nowrap;
}
@media (max-width: 740px) {
  td.compare__topic { white-space: normal; }
}
.ccp-banner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 22px 28px;
  align-items: start;
  padding: 28px 28px 26px;
  border-radius: 18px;
  background: linear-gradient(135deg, #eef8f9 0%, #fff 55%, #fff8e6 100%);
  border: 1px solid rgba(65, 163, 175, 0.35);
  box-shadow: 0 10px 28px rgba(26, 34, 51, 0.06);
}
@media (max-width: 640px) {
  .ccp-banner { grid-template-columns: 1fr; }
}
.ccp-banner__icon {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
  color: var(--teal-deep);
  background: none;
  border: none;
}
.ccp-banner__icon .fi {
  font-size: 2rem;
  line-height: 1 !important;
}
.ccp-banner__body h2 {
  margin: 0 0 10px;
}
.ccp-banner__body > p {
  margin: 0 0 16px;
  color: var(--muted);
  max-width: 48rem;
  line-height: 1.5;
}
.ccp-banner__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 720px) {
  .ccp-banner__split { grid-template-columns: 1fr; }
}
.ccp-banner__split > div {
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
}
.ccp-banner__split h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ccp-banner__split h3 .fi {
  line-height: 1 !important;
  color: var(--teal);
}
.ccp-banner__split p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
}
.feature-spotlight {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px 24px;
  align-items: start;
  padding: 8px 0;
}
.feature-spotlight__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef8f9;
  border: 1px solid rgba(65, 163, 175, 0.35);
  color: var(--teal-deep);
}
.feature-spotlight__icon .fi {
  font-size: 24px;
  line-height: 1 !important;
}
.feature-spotlight--teal .feature-spotlight__icon {
  background: #fff8e6;
  border-color: rgba(196, 149, 42, 0.4);
  color: #7a5a10;
}
.feature-spotlight__lead {
  font-size: 1.05rem;
  line-height: 1.5;
  max-width: 44rem;
}
.pricing-wip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #eef8f9;
  border: 1px solid rgba(65, 163, 175, 0.35);
  color: var(--teal-deep);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.pricing-wip .fi {
  line-height: 1 !important;
  margin-top: 0.15em;
}


/* ===== v15 scene blocks + optional/data polish ===== */
.lead-soft {
  max-width: 46rem;
  margin: 0 0 22px;
  color: var(--muted);
  line-height: 1.5;
  font-size: 1.02rem;
}
.how-aside {
  margin: 22px 0 0;
  max-width: 46rem;
  color: var(--muted);
  line-height: 1.5;
  font-size: 0.98rem;
}
.checklist__foot {
  margin: 22px 0 0;
  max-width: 48rem;
  color: var(--muted);
  line-height: 1.5;
  font-size: 0.95rem;
}
.optional-demo {
  display: grid;
  gap: 18px;
}
@media (min-width: 900px) {
  .optional-demo { grid-template-columns: 1.05fr 1fr; align-items: start; }
}
.optional-demo__form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.opt-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-soft);
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--ink);
}
.opt-line .fi { line-height: 1 !important; margin-top: 0.15em; color: var(--teal); flex-shrink: 0; }
.opt-line.is-req { background: #eef8f9; font-weight: 600; }
.opt-line em { color: #c45c5c; font-style: normal; }
.optional-demo__ok {
  margin: 6px 0 0;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--ok);
  font-weight: 700;
  font-size: 0.92rem;
}
.optional-demo__ok .fi { line-height: 1 !important; margin-top: 0.15em; }
.optional-demo__side {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
}
.optional-demo__side h3 {
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
}
.optional-demo__side h3 .fi { line-height: 1 !important; color: var(--teal); }
.optional-demo__side ul { margin: 0 0 14px; padding-left: 1.1rem; color: var(--muted); }
.optional-demo__side li { margin: 0 0 6px; }
.optional-demo__side p { margin: 0 0 10px; color: var(--muted); font-size: 0.95rem; line-height: 1.45; }

.data-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}
.data-flow__step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink);
}
.data-flow__step .fi { line-height: 1 !important; color: var(--teal); }
.data-flow__arrow { color: var(--muted); font-weight: 700; }

.case--erasure .case__head h2,
.case--erasure .case__lead {
  max-width: none;
}
.case--erasure .case__lead {
  margin-bottom: 28px;
}
.case--erasure .data-flow {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  margin: 0 0 20px;
}
.case--erasure .data-flow__arrow {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--teal);
  font-size: 1.1rem;
}
.case--erasure .data-flow__step {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  min-height: 56px;
  box-sizing: border-box;
  padding: 14px 16px;
  background: linear-gradient(160deg, #eef8f9, #fff 70%);
  border: 1px solid rgba(65, 163, 175, 0.4);
  box-shadow: 0 8px 20px rgba(26, 34, 51, 0.04);
}
.case--erasure .data-flow__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  line-height: 1.3;
  text-align: center;
}
.case--erasure .data-flow__inner > span {
  max-width: none;
  min-width: 0;
  text-align: center;
}
.case--erasure .data-flow__inner .fi {
  color: var(--teal-deep);
  font-size: 1.55rem;
}
@media (max-width: 799px) {
  .case--erasure .data-flow {
    flex-direction: column;
    align-items: center;
  }
  .case--erasure .data-flow__arrow {
    display: flex;
    transform: rotate(90deg);
    font-size: 1rem;
    line-height: 1;
    padding: 2px 0;
    align-self: center;
  }
  .case--erasure .data-flow__step {
    width: 100%;
    flex: 0 1 auto;
    justify-content: center;
    padding: 16px 18px;
    font-size: 1.05rem;
  }
  .case--erasure .data-flow__inner {
    flex-direction: row;
    align-items: center;
    gap: 0.55em;
    text-align: left;
  }
  .case--erasure .data-flow__inner > span {
    text-align: left;
  }
  .case--erasure .data-flow__inner .fi {
    font-size: 1.35rem;
  }
}
.case--erasure .case__punch,
.case--erasure .stakes__note {
  max-width: none;
}
.case--erasure .case__punch {
  margin-top: 0 !important;
}
.case--erasure .case__punch--quiet,
.case--erasure .stakes__note--quiet {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  font-weight: 600;
  color: var(--muted) !important;
}
.case--erasure .case__punch--quiet > .fi,
.case--erasure .stakes__note--quiet > .fi {
  flex-shrink: 0;
  margin-top: 0.2em;
  margin-right: 0;
  line-height: 1 !important;
  color: var(--teal);
}
.case--erasure .case__punch--quiet > span,
.case--erasure .stakes__note--quiet > span {
  flex: 1;
  min-width: 0;
}
.case--erasure .case__punch--quiet {
  font-weight: 700;
  color: var(--ink) !important;
  font-size: 1.02rem;
}
.case--erasure .stakes__note--quiet {
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.45;
}

.scene-block {
  display: grid;
  gap: 28px;
  align-items: center;
}
@media (min-width: 900px) {
  .scene-block { grid-template-columns: 1fr 1.15fr; gap: 36px; }
  .scene-block--subs { grid-template-columns: 1.15fr 1fr; }
  .scene-block--legacy { grid-template-columns: 0.95fr 1.2fr; }
}
.scene-block__copy .eyebrow { margin-bottom: 10px; }
.scene-block__copy h2 { margin: 0 0 12px; }
.scene-block__lead {
  margin: 0 0 14px;
  font-size: 1.08rem;
  line-height: 1.5;
  max-width: 38rem;
}
.scene-block__copy > p { margin: 0 0 14px; color: var(--muted); line-height: 1.5; max-width: 40rem; }
.scene-block__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.scene-block__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.4;
}
.scene-block__list .fi {
  line-height: 1 !important;
  margin-top: 0.18em;
  color: var(--ok);
  flex-shrink: 0;
}
.scene-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.scene-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(65, 163, 175, 0.35);
  font-size: 12px;
  font-weight: 700;
  color: var(--teal-deep);
}
.scene-pill .fi { line-height: 1 !important; }

.scene-docs {
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(160deg, #fff8e6, #eef8f9);
  border: 1px solid rgba(196, 149, 42, 0.28);
}
.scene-docs__card {
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.scene-docs__card .fi { line-height: 1 !important; color: var(--teal); }
.scene-docs__card.is-dim {
  opacity: 0.55;
  text-decoration: line-through;
  font-weight: 600;
  color: var(--muted);
}
.scene-docs__card.is-active {
  border-color: rgba(65, 163, 175, 0.45);
  box-shadow: 0 6px 16px rgba(65, 163, 175, 0.12);
}

.scene-sub-mock {
  background: #1a2233;
  color: #e8eef2;
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: 0 16px 36px rgba(26, 34, 51, 0.22);
}
.scene-sub-mock__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9fe0e8;
  margin-bottom: 12px;
}
.scene-sub-mock__line {
  font-weight: 700;
  margin-bottom: 12px;
}
.scene-sub-mock__warn {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 248, 230, 0.12);
  border: 1px solid rgba(255, 220, 140, 0.35);
  font-size: 0.9rem;
  margin-bottom: 12px;
  line-height: 1.35;
}
.scene-sub-mock__warn .fi { line-height: 1 !important; margin-top: 0.15em; color: #ffdc8c; }
.scene-sub-mock__check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-weight: 700;
  font-size: 0.95rem;
}
.scene-sub-mock__check .fi { line-height: 1 !important; margin-top: 0.12em; color: #9fe0e8; }

.scene-timeline {
  display: grid;
  gap: 12px;
  padding: 8px 0;
}
.scene-timeline__item {
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.scene-timeline__item span { font-weight: 800; }
.scene-timeline__item small { color: var(--muted); font-size: 0.88rem; }
.scene-timeline__item.is-past { opacity: 0.7; }
.scene-timeline__item.is-now {
  border-color: rgba(65, 163, 175, 0.5);
  background: #eef8f9;
}
.scene-timeline__item.is-next {
  border-color: rgba(47, 158, 107, 0.4);
  background: rgba(47, 158, 107, 0.08);
}


/* ===== Optional block variants (A/B) ===== */
.lp-variant-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff8e6;
  border: 1px solid rgba(196, 149, 42, 0.4);
  color: #7a5a10;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
.lp-variant-tag .fi { line-height: 1 !important; }
.lp-variant-tag--pick {
  background: #eef8f9;
  border-color: rgba(65, 163, 175, 0.45);
  color: var(--teal-deep);
}

.optional-story {
  display: grid;
  gap: 18px;
  max-width: 52rem;
}
.optional-story__form {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(26, 34, 51, 0.05);
}
.optional-story__form-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #f4f7f8;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.optional-story__form-bar .mock__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d5dde3;
}
.optional-story__rows { padding: 8px; display: grid; gap: 8px; }
.optional-story__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--bg-soft);
}
.optional-story__row.is-req {
  background: #eef8f9;
  border: 1px solid rgba(65, 163, 175, 0.28);
}
.optional-story__row > .fi {
  line-height: 1 !important;
  margin-top: 0.2em;
  color: var(--teal);
  font-size: 18px;
}
.optional-story__row strong {
  display: block;
  font-size: 0.98rem;
  margin-bottom: 2px;
}
.optional-story__row strong em { color: #c45c5c; font-style: normal; }
.optional-story__row span {
  display: block;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.35;
}
.optional-story__result {
  margin: 0;
  padding: 12px 16px 14px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: var(--ok);
  font-weight: 700;
  font-size: 0.95rem;
  border-top: 1px solid var(--line);
  background: rgba(47, 158, 107, 0.06);
}
.optional-story__result .fi { line-height: 1 !important; margin-top: 0.15em; }

.optional-story__mail {
  padding: 18px 18px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #eef8f9 0%, #fff 70%);
  border: 1px solid rgba(65, 163, 175, 0.3);
}
.optional-story__mail-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.optional-story__mail-head > .fi {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid rgba(65, 163, 175, 0.35);
  color: var(--teal-deep);
  line-height: 1 !important;
  font-size: 18px;
}
.optional-story__mail-head strong { display: block; margin-bottom: 4px; }
.optional-story__mail-head p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.4;
}
.optional-story__chips {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.optional-story__chips li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
.optional-story__chips .fi { line-height: 1 !important; color: var(--teal); }
.optional-story__note {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.45;
}
.optional-story__closing {
  margin: 0;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(160deg, #eef8f9, #fff 70%);
  border: 1px solid rgba(65, 163, 175, 0.4);
  color: var(--ink);
  font-size: 0.98rem;
  line-height: 1.4;
  font-weight: 600;
}
.optional-story__closing .fi {
  line-height: 1 !important;
  margin-top: 0.2em;
  color: var(--teal-deep);
  flex-shrink: 0;
}
.optional-story__closing strong { color: var(--teal-deep); }


/* optional B on white section */
.section#optional .optional-story__mail {
  background: #f7fafb;
  border-color: var(--line);
}
.section#optional .optional-story__form {
  box-shadow: 0 8px 24px rgba(26, 34, 51, 0.04);
}


/* ===== v18 case blocks (school situations) ===== */
.cases-toc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
@media (min-width: 800px) {
  .cases-toc { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
.cases-toc a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.35;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cases-toc a:hover {
  border-color: rgba(65, 163, 175, 0.5);
  box-shadow: 0 8px 20px rgba(65, 163, 175, 0.1);
  color: var(--teal-deep);
}
.cases-toc span {
  flex-shrink: 0;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}

.case { max-width: 56rem; }
.case--wide { max-width: none; }
.case--wide .case__copy {
  max-width: 44rem;
  margin-bottom: 28px;
}
.case--wide .case__copy .case__punch { margin-bottom: 0; }

/* Задача 01: текст слева, плотное сравнение справа */
.case--scale .case__head,
.case--scale .case__problem {
  max-width: 48rem;
}
.case--scale .case__copy {
  max-width: none;
  margin-bottom: 0;
}
.case-scale-layout {
  display: grid;
  gap: 22px;
  margin-top: 4px;
  align-items: start;
}
@media (min-width: 960px) {
  .case-scale-layout {
    grid-template-columns: minmax(240px, 0.9fr) minmax(340px, 1.25fr);
    gap: 28px 32px;
  }
}
.case-scale-layout .case__punch {
  margin-top: 16px;
}

.checks-mock--split {
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 28px rgba(26, 34, 51, 0.05);
}
@media (min-width: 640px) {
  .checks-mock--split {
    grid-template-columns: minmax(132px, 0.72fr) 1.35fr;
  }
}
.checks-mock--split .checks-mock__col {
  border: none;
  border-radius: 0;
  background: #f4f8f9;
  padding: 16px 16px 14px;
}
.checks-mock--split .checks-mock__col--rich {
  background: linear-gradient(160deg, #eef8f9, #fff 50%);
  border-left: 1px solid var(--line);
}
.checks-mock--split .checks-mock__label { margin-bottom: 10px; }
.checks-mock--split .checks-mock__list { gap: 8px; }
.checks-mock--split .checks-mock__list li {
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-size: 0.9rem;
}
.checks-mock--split .checks-mock__col--rich .checks-mock__list {
  grid-template-columns: 1fr;
  gap: 8px;
}
.case-scale-layout .roles-duo__foot {
  margin-top: 14px;
}

/* Один белый раздел: intro + 6 задач */
.section--tasks-head {
  padding-bottom: 72px;
  border-bottom: none;
}
.section--task {
  background: var(--white);
  border-top: 1px solid var(--line);
  padding: 72px 0;
}
.section--tasks-end {
  border-bottom: 1px solid var(--line);
  padding-bottom: 72px;
}

/* Задача 02: пары текст↔визуал (на мобиле чередуются) */
.case--optional > .case__num {
  margin-bottom: 14px;
}
.case-optional-pair {
  display: grid;
  gap: 22px;
  align-items: start;
  margin: 0 0 28px;
}
.case-optional-pair:last-child {
  margin-bottom: 0;
}
@media (min-width: 900px) {
  .case-optional-pair {
    grid-template-columns: 1fr 1fr;
    gap: 28px 36px;
  }
}
.case-optional-pair__visual {
  display: grid;
  gap: 12px;
  align-content: start;
}
.case-optional-pair__visual .case__punch {
  margin-top: 0 !important;
}
.case-optional-pair__text h2 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 0 0 14px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.case-optional-pair__text > p {
  margin: 0 0 14px;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink);
}
.case-optional-pair__text > p:last-of-type {
  margin-bottom: 0;
  color: var(--muted);
}
.case-optional-pair .case__copy > p:not(.case__punch):not(.optional-story__closing) {
  color: var(--muted);
}
.case--optional .optional-story__mail {
  background: #f7fafb;
  border-color: var(--line);
}
.case--optional .optional-story__form {
  box-shadow: 0 8px 24px rgba(26, 34, 51, 0.04);
}
.case__num {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef8f9;
  border: 1px solid rgba(65, 163, 175, 0.35);
  color: var(--teal-deep);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.case__head h2 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin: 0 0 12px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.case__lead {
  margin: 0 0 16px;
  font-size: 1.08rem;
  line-height: 1.5;
  color: var(--ink);
  max-width: 44rem;
}
.case__problem {
  margin: 0 0 28px;
  max-width: 44rem;
  color: var(--muted);
  line-height: 1.5;
  font-size: 1.02rem;
}
.case__grid {
  display: grid;
  gap: 28px;
  align-items: start;
}
@media (min-width: 900px) {
  .case__grid { grid-template-columns: 1.1fr 0.95fr; gap: 36px; }
  .case__grid--flip { grid-template-columns: 1fr 1.05fr; }
  .case__grid--flip .case__visual { order: 0; }
  .case__grid--flip .case__copy { order: 1; }
}
.case__copy h3 {
  margin: 0 0 10px;
  font-size: 1.15rem;
}
.case__copy > p {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.5;
}
.case__map {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.case__map li {
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink);
}
.case__bullets {
  margin: 0 0 14px;
  padding-left: 1.15rem;
  color: var(--muted);
  line-height: 1.45;
}
.case__bullets li { margin: 0 0 6px; }
.case__punch {
  margin: 16px 0 0 !important;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(160deg, #eef8f9, #fff 70%);
  border: 1px solid rgba(65, 163, 175, 0.4);
  color: var(--ink) !important;
  font-weight: 700;
  font-size: 0.98rem;
  line-height: 1.4;
}
.case__punch > .fi {
  line-height: 1 !important;
  margin-top: 0.2em;
  color: var(--teal-deep);
  flex-shrink: 0;
}
.case__punch > span { flex: 1; min-width: 0; }
.case__copy > .case__punch + .optional-story__closing {
  margin-top: 10px;
}

.case-order {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(26, 34, 51, 0.06);
}
.case-order__bar {
  padding: 12px 16px;
  background: #eef8f9;
  border-bottom: 1px solid rgba(65, 163, 175, 0.25);
  font-size: 0.95rem;
}
.case-order__docs {
  list-style: none;
  margin: 0;
  padding: 12px;
  display: grid;
  gap: 8px;
}
.case-order__docs li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-soft);
  font-weight: 700;
  font-size: 0.92rem;
}
.case-order__docs .fi {
  line-height: 1 !important;
  margin-top: 0.15em;
  color: var(--teal);
}
.case-order__bad {
  margin: 0;
  padding: 12px 16px 14px;
  border-top: 1px dashed var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}
.case-order__bad span {
  text-decoration: line-through;
  opacity: 0.75;
}

.case-ba {
  display: grid;
  gap: 12px;
}
@media (min-width: 560px) {
  .case-ba { grid-template-columns: 1fr 1fr; }
}
.case-ba__col {
  border-radius: 14px;
  padding: 14px 14px 12px;
  border: 1px solid var(--line);
  background: #fff;
}
.case-ba__col.is-bad { background: #faf7f7; }
.case-ba__col.is-good {
  border-color: rgba(65, 163, 175, 0.45);
  background: #eef8f9;
}
.case-ba__label {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.case-ba__col.is-good .case-ba__label { color: var(--teal-deep); }
.case-ba__price { margin: 0 0 8px; font-weight: 700; line-height: 1.35; }
.case-ba__next {
  margin: 0 0 10px;
  font-size: 0.88rem;
  color: var(--teal-deep);
  font-weight: 600;
  line-height: 1.35;
}
.case-ba__check {
  margin: 0 0 6px;
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: 0.9rem;
  font-weight: 600;
}
.case-ba__check .fi { line-height: 1 !important; margin-top: 0.15em; color: var(--teal); }
.case-ba__void {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  font-style: italic;
}
.case-ba__link {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: var(--teal-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.case-restore {
  width: min(100%, 22rem);
  max-width: 22rem;
  margin-inline: auto;
  background: linear-gradient(160deg, #eef8f9, #fff 65%);
  color: var(--ink);
  border-radius: 16px;
  padding: 16px 16px 14px;
  border: 1px solid rgba(65, 163, 175, 0.4);
  box-shadow: 0 10px 28px rgba(26, 34, 51, 0.05);
}
.case-restore__who {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.case-restore__who strong { font-size: 1.05rem; }
.case-restore__who span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--teal-deep);
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(65, 163, 175, 0.35);
}
.case-restore ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.case-restore li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9rem;
  line-height: 1.35;
}
.case-restore li span { color: var(--muted); }
.case-restore li em {
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}

/* v20 · простое трио «Собирает / Хранит / Показывает» */
.simple-trio {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  max-width: 52rem;
  margin: 0 auto;
}
@media (min-width: 560px) {
  .simple-trio { grid-template-columns: repeat(3, 1fr); }
}
.simple-trio__item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 6px 18px rgba(26, 34, 51, 0.04);
}
.simple-trio__ico {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-soft);
  color: var(--teal-deep);
  margin-bottom: 4px;
}
.simple-trio__ico i,
.simple-trio__ico i::before {
  line-height: 1;
  display: inline-flex;
  font-size: 20px;
}
.simple-trio__item strong {
  font-size: 1.05rem;
}
.simple-trio__item > span:last-child {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

/* ===== v19 · 6 задач роста школы ===== */
.growth-path {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) {
  .growth-path { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .growth-path { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}
.growth-path__stage {
  padding: 16px 16px 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
}
.growth-path__when {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal-deep);
}
.growth-path__stage ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.growth-path__stage a {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.35;
}
.growth-path__stage a:hover { color: var(--teal-deep); }
.growth-path__stage a span {
  flex-shrink: 0;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}

.case-scale {
  padding: 18px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 28px rgba(26, 34, 51, 0.05);
}
.case-scale__rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.case-scale__rail span {
  min-width: 2.4rem;
  padding: 8px 10px;
  border-radius: 999px;
  text-align: center;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: #eef8f9;
  border: 1px solid rgba(65, 163, 175, 0.35);
  color: var(--teal-deep);
}
.case-scale__rail span.is-inf {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
  font-size: 1.15rem;
}
.case-scale__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.case-scale__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f7fafb;
  border: 1px solid var(--line);
  font-weight: 600;
  font-size: 0.92rem;
}
.case-scale__list .fi { line-height: 1 !important; color: var(--teal); }
.case-scale__list li.is-more {
  color: var(--muted);
  background: transparent;
  border-style: dashed;
}

.case-comms {
  display: grid;
  gap: 12px;
}
@media (min-width: 560px) {
  .case-comms { grid-template-columns: 1fr 1.15fr; }
}
.case-comms__col {
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
}
.case-comms__col.is-tech {
  background: #eef8f9;
  border-color: rgba(65, 163, 175, 0.35);
}
.case-comms__label {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}
.case-comms__col.is-tech .case-comms__label { color: var(--teal-deep); }
.case-comms__check {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: 700;
}
.case-comms__check .fi { line-height: 1 !important; margin-top: 0.2em; color: var(--teal); }
.case-comms__hint {
  margin: 8px 0 0;
  font-size: 0.88rem;
  color: var(--muted);
}
.case-comms__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.case-comms__col li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
}
.case-comms__col li .fi {
  line-height: 1 !important;
  margin-top: 0.15em;
  color: var(--ok);
}

.case-erasure {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.case-erasure li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  font-weight: 700;
  position: relative;
}
.case-erasure li .fi {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef8f9;
  color: var(--teal-deep);
  line-height: 1 !important;
  flex-shrink: 0;
}
.case-erasure li:not(:last-child)::after {
  content: "↓";
  position: absolute;
  left: 28px;
  bottom: -14px;
  color: var(--teal);
  font-weight: 800;
  z-index: 1;
}

.case-products {
  display: grid;
  gap: 12px;
}
@media (min-width: 560px) {
  .case-products { grid-template-columns: 1fr 1fr; }
}
.case-products__card {
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
}
.case-products__card.is-vip {
  background: #eef8f9;
  border-color: rgba(65, 163, 175, 0.4);
}
.case-products__card strong {
  display: block;
  margin-bottom: 10px;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}
.case-products__card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.9rem;
}
.case-products__card ul li::before {
  content: "→ ";
  color: var(--teal);
  font-weight: 800;
}
.case-products__bridge {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  text-align: center;
  font-weight: 800;
  color: var(--teal-deep);
  font-size: 0.95rem;
}

/* Задача 4 · вариант B (v16-стиль) */
.case-variant-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #eef8f9;
  border: 1px solid rgba(65, 163, 175, 0.35);
  color: var(--teal-deep);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.case-variant-label .fi { line-height: 1 !important; }
.case-products--blend {
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(160deg, #fff8e6, #eef8f9);
  border: 1px solid rgba(196, 149, 42, 0.28);
}
.case-products__reject {
  margin: 0;
  padding: 12px 14px;
  border-radius: 12px;
  text-align: center;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(219, 235, 237, 0.95);
  color: var(--muted);
  font-weight: 600;
  text-decoration: line-through;
  opacity: 0.72;
}
.case-products__cols {
  display: grid;
  gap: 12px;
}
@media (min-width: 560px) {
  .case-products__cols { grid-template-columns: 1fr 1fr; }
}
.case-products--blend .case-products__card strong {
  display: flex;
  align-items: center;
  gap: 8px;
}
.case-products--blend .case-products__card strong .fi {
  line-height: 1 !important;
  color: var(--teal);
  flex-shrink: 0;
}
.case-products--blend .case-products__bridge {
  grid-column: auto;
  margin-top: 2px;
}

.case-sub-checkout {
  padding: 18px 18px 16px;
  border-radius: 16px;
  background: linear-gradient(160deg, #eef8f9, #fff 65%);
  border: 1px solid rgba(65, 163, 175, 0.4);
  box-shadow: 0 10px 28px rgba(26, 34, 51, 0.05);
}
.case-sub-checkout__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}
.case-sub-checkout__consent .fi {
  line-height: 1 !important;
  margin-top: 0.2em;
  color: var(--teal);
  flex-shrink: 0;
}
.case-sub-checkout__consent em {
  font-style: normal;
  color: var(--teal-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.case-sub-checkout__periods {
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
}
.case-sub-checkout__periods strong {
  display: block;
  margin-bottom: 8px;
  font-size: 0.88rem;
  color: var(--ink);
}
.case-sub-checkout__periods ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.case-sub-checkout__periods li {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
}