@import url('assets/colors_and_type.css');

/* ----------------------------------------------------------------------
   Faceplastika Sales Landing — RE:FACE / Новая Архитектура Лица
---------------------------------------------------------------------- */

html, body {
  background: var(--linen);
  color: var(--choco);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }

/* =========================================================================
   CONTAINER — 1280 max, responsive padding
   ========================================================================= */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 48px;
  padding-right: 48px;
  --container-pad: 48px;
}
@media (max-width: 1023px) {
  .container { padding-left: 32px; padding-right: 32px; --container-pad: 32px; }
}
@media (max-width: 767px) {
  .container { padding-left: 20px; padding-right: 20px; --container-pad: 20px; }
}

/* =========================================================================
   HEADER — sticky, full-bleed bg, content aligned to .container
   ========================================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: 68px;
  background: transparent;
  transition: background-color 240ms var(--ease-soft),
              box-shadow 240ms var(--ease-soft),
              border-color 240ms var(--ease-soft);
  border-bottom: 0.5px solid transparent;
}
.site-header .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header.is-scrolled {
  background: var(--milk);
  box-shadow: 0 1px 0 rgba(61,51,43,0.04), 0 8px 24px rgba(61,51,43,0.06);
  border-bottom-color: var(--line);
}
.site-header .logo { display: flex; align-items: center; gap: 10px; height: 100%; }
.site-header .logo img { height: 30px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav-links a {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--choco);
  transition: color 150ms var(--ease-soft);
}
.site-nav-links a:hover { color: var(--terra); }

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--terra);
  color: var(--milk);
  border: none;
  border-radius: 999px;
  padding: 11px 22px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms var(--ease-soft), transform 150ms var(--ease-soft);
  white-space: nowrap;
  line-height: 1.2;
}
.btn-pill:hover  { background: var(--garnet); }
.btn-pill:active { transform: scale(0.98); }
.btn-pill.lg     { padding: 16px 30px; font-size: 15.5px; }
.btn-pill.inverted {
  background: var(--milk);
  color: var(--terra);
}
.btn-pill.inverted:hover { background: var(--linen); }

/* burger */
.burger {
  display: none;
  width: 40px; height: 40px;
  border: 0.5px solid var(--line-strong);
  border-radius: 999px;
  background: var(--milk);
  align-items: center; justify-content: center;
  cursor: pointer;
}
.burger span,
.burger span::before,
.burger span::after {
  display: block;
  width: 16px; height: 1.5px;
  background: var(--choco);
}
.burger span { position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -5px; }
.burger span::after  { top:  5px; }

/* mobile menu overlay */
.mobile-menu {
  display: none;
  position: fixed; inset: 0; z-index: 60;
  background: var(--linen);
  padding: 88px 32px 32px;
  flex-direction: column;
  gap: 20px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 500;
  color: var(--choco);
  border-bottom: 0.5px solid var(--line);
  padding: 12px 0;
}
.mobile-menu a:hover { color: var(--terra); }
.mobile-menu .close {
  position: absolute;
  top: 18px; right: 24px;
  width: 40px; height: 40px;
  border: 0.5px solid var(--line-strong);
  background: var(--milk);
  border-radius: 999px;
  font-size: 20px;
  color: var(--choco);
  cursor: pointer;
}
.mobile-menu .cta-mobile { margin-top: 12px; align-self: flex-start; }

/* =========================================================================
   HERO — block I
   Full-bleed split background: linen left / choco right (50/50 from
   the container's centerline). Content lives in .container as two
   equal columns.
   ========================================================================= */
.hero {
  position: relative;
  background: var(--linen);
  padding-top: 68px;            /* clear fixed header */
  isolation: isolate;
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero-left {
  width: 50%;
  padding: 64px 56px 72px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--sand);
  color: var(--choco);
  border-radius: 999px;
  padding: 11px 22px;
  margin-bottom: 22px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
.hero-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--terra);
  flex: 0 0 auto;
}
.hero-badge-sep {
  color: var(--taupe);
  margin: 0 2px;
  opacity: 0.7;
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(38px, 3.6vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.005em;
  color: var(--choco);
  margin: 0 0 22px;
  max-width: 14ch;
  text-wrap: balance;
}
.hero h1 .nowrap { white-space: nowrap; }
.hero h1 em {
  font-style: italic;
  color: var(--terra);
  font-weight: 500;
}
.hero h1 em.hl {
  background: transparent;
  color: var(--terra);
  padding: 0;
  border-radius: 0;
  display: inline;
  line-height: inherit;
  font-style: italic;
  font-weight: 500;
}

.hero-time {
  display: inline-block;
  background: var(--sand);
  border-radius: 999px;
  padding: 9px 22px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--choco);
  margin-bottom: 26px;
}

.hero-lead {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
  color: var(--choco);
  margin: 0 0 24px;
  max-width: 56ch;
  text-wrap: pretty;
}

.hero-eyebrow {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 18px;
}

.hero-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.hero-pills .pill {
  display: inline-block;
  background: var(--milk);
  border: 0.5px solid rgba(61,51,43,0.18);
  border-radius: 999px;
  padding: 8px 18px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--choco);
}

.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 22px;
}
.hero-cta-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.3;
  color: var(--choco);
  opacity: 0.7;
  max-width: 160px;
}

/* ----------- right dark choco column — absolutely positioned to span
   from container centerline to right edge of viewport ----------- */
.hero-right {
  position: absolute;
  top: 64px;
  bottom: 72px;
  left: 50%;
  right: 0;
  background: var(--choco);
  color: var(--linen);
  overflow: hidden;
  isolation: isolate;
}

.hero-right::before {
  /* radial clay glow behind figure */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    62% 55% at 50% 58%,
    rgba(217,183,154,0.22) 0%,
    rgba(217,183,154,0.10) 35%,
    rgba(217,183,154,0) 70%
  );
  z-index: 0;
  pointer-events: none;
}

.hero-right .photo {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  max-width: none;
  z-index: 1;
}

.hero-quote {
  position: absolute;
  top: 36px;
  right: 36px;
  z-index: 2;
  text-align: right;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  color: var(--clay);
  opacity: 0.55;
  max-width: 240px;
  letter-spacing: 0.005em;
}

.hero-right .corner-mark {
  position: absolute;
  bottom: 28px;
  left: 28px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--clay);
  opacity: 0.7;
}
.hero-right .corner-mark .rule {
  width: 28px; height: 0.5px;
  background: var(--clay);
  opacity: 0.5;
}

/* =========================================================================
   PLACEHOLDER blocks (II–XIII) — light scaffolding
   ========================================================================= */
.placeholder-section {
  padding: 56px 0;
}
.placeholder-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.placeholder-row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 0.5px solid var(--line);
}
.placeholder-row .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--terra);
  width: 64px;
  flex-shrink: 0;
}
.placeholder-row .title {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--choco);
  flex: 1;
}
.placeholder-row .status {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--taupe);
}

/* =========================================================================
   II · УЗНАВАНИЕ — Скорбящий · узнавание боли
   ========================================================================= */
.recog {
  position: relative;
  background: var(--beige);
  padding: 65px 0 78px;
  isolation: isolate;
}
.recog::before {
  /* gentle topline that visually separates from hero */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0.5px;
  background: var(--line);
}

.recog-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 40px 80px;
  align-items: end;
  margin-bottom: 58px;
}
.recog-eyebrow {
  grid-column: 1 / -1;
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 24px;
}
.recog-h {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 3.6vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.005em;
  color: var(--choco);
  margin: 0;
  white-space: nowrap;
}
.recog-h em {
  font-style: italic;
  color: var(--terra);
}
.recog-lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.45;
  color: var(--choco);
  opacity: 0.78;
  margin: 0;
  max-width: 38ch;
  padding-bottom: 6px;
}
.recog-lead-bottom {
  margin: 64px auto 0;
  max-width: 64ch;
  text-align: center;
  padding: 0;
  opacity: 0.85;
  font-size: clamp(21px, 1.7vw, 24px);
}

/* the 12 statements — pill cards (matching hero pills) */
.recog-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 20px;
}
.recog-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 16px 26px 15px;
  background: var(--milk);
  border: 0.5px solid rgba(61,51,43,0.18);
  border-radius: 999px;
}
.recog-list .ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--terra);
  flex: 0 0 auto;
}
.recog-list .ico svg { width: 100%; height: 100%; display: block; }
.recog-list .t {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.45;
  color: var(--choco);
  text-wrap: pretty;
}


/* =========================================================================
   Responsive
   ========================================================================= */

/* tablet & narrower desktops: tighten hero text padding */
@media (max-width: 1023px) {
  .hero-left { padding: 40px 32px 56px 0; }
  .hero h1   { font-size: clamp(36px, 4.6vw, 46px); }

  .recog { padding: 41px 0 54px; }
  .recog-head { grid-template-columns: 1fr; gap: 28px; margin-bottom: 34px; }
  .recog-list { column-gap: 56px; }
}


/* under 840px → Hero stacks: text on linen, choco below full-bleed */
@media (max-width: 839px) {
  .hero { padding-top: 64px; }
  .hero .container { min-height: 0; }
  .hero-left {
    width: 100%;
    padding: 32px 0 48px;
    min-height: 0;
    justify-content: flex-start;
  }

  /* full-bleed choco panel under the text — restored to flow */
  .hero-right {
    position: relative;
    top: auto; bottom: auto; left: auto; right: auto;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    min-height: 560px;
    height: auto;
    padding: 0;
  }
  .hero-quote { top: 24px; right: 24px; font-size: 20px; max-width: 220px; }
}

@media (max-width: 767px) {
  .site-header { height: 64px; }
  .site-nav-links, .site-nav .btn-pill { display: none; }
  .burger { display: inline-flex; }

  .hero { padding-top: 64px; }
  .hero h1            { font-size: 35px; max-width: 100%; }
  .hero-badge         { font-size: 14.5px; padding: 9px 16px; gap: 8px; white-space: normal; }
  .hero-badge-sep     { margin: 0; }
  .hero-time          { font-size: 16px; }
  .hero-lead          { font-size: 18.5px; }
  .hero-eyebrow       { font-size: 14.5px; }
  .hero-pills .pill   { font-size: 18px; padding: 8px 18px; }
  .hero-cta-row       { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hero-cta-sub       { font-size: 15px; max-width: 100%; }
  .btn-pill           { font-size: 10px; padding: 10px 20px; }
  .btn-pill.lg        { font-size: 13.5px; padding: 16px 28px; }

  .hero-right         { min-height: 520px; }
  .hero-quote         { top: 20px; right: 20px; font-size: 18px; max-width: 200px; }

  /* mobile burger menu typography */
  .mobile-menu a      { font-size: 28px; }
  .mobile-menu .cta-mobile { font-size: 16px; padding: 18px 34px; letter-spacing: 1.8px; }

  /* II · Узнавание */
  .recog              { padding: 17px 0 30px; }
  .recog-eyebrow      { font-size: 11px; margin-bottom: 18px; }
  .recog-h            { font-size: 33px; }
  .recog-lead         { font-size: 17px; }
  .recog-lead-bottom  { margin-top: 36px; }
  .recog-head         { margin-bottom: 44px; gap: 20px; }
  .recog-list         { grid-template-columns: 1fr; gap: 10px; }
  .recog-list li      { gap: 14px; padding: 14px 20px; border-radius: 24px; }
  .recog-list .ico    { width: 24px; height: 24px; }
  .recog-list .t      { font-size: 16px; }
}

/* =========================================================================
   III · РЕШЕНИЕ — Воин · переход к решению (3-col layout)
   ========================================================================= */
.solution {
  position: relative;
  background: var(--linen);
  padding: 88px 0 54px;
  isolation: isolate;
}
.solution::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0.5px;
  background: var(--line);
}

.solution-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.sol-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.sol-col--media {
  align-self: stretch;
}
.sol-col--media .sol-cta {
  align-self: center;
  margin-top: 4px;
}
.sol-col--media .sol-pill--brand {
  text-align: center;
  margin-top: 4px;
}

/* LEFT */
.solution-h {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(38px, 3.6vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.005em;
  color: var(--choco);
  margin: 0 0 6px;
  text-wrap: pretty;
}
.solution-h em {
  font-style: italic;
  color: var(--garnet);
  font-weight: 500;
}
.solution-lead {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--choco);
  margin: 0 0 8px;
  max-width: 38ch;
}
.solution-lead strong {
  font-weight: 600;
  color: var(--choco);
}

/* generic pill */
.sol-pill {
  display: inline-block;
  align-self: flex-start;
  padding: 12px 22px;
  background: rgba(61,51,43,0.08);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  color: var(--choco);
  letter-spacing: 0.02em;
  margin: 0;
  max-width: 100%;
}
.sol-pill--eyebrow {
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: 1.4px;
  font-weight: 500;
  padding: 11px 22px;
}
.sol-pill--brand {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.55;
  padding: 16px 24px;
  align-self: stretch;
  background: var(--sage);
  color: var(--milk);
  border: 0.5px solid rgba(61,51,43,0.18);
  border-radius: 22px;
  box-shadow: 0 1px 0 rgba(61,51,43,0.04), 0 18px 40px -32px rgba(61,51,43,0.35);
  position: relative;
  isolation: isolate;
}
.sol-pill--brand::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 8px;
  height: 0.5px;
  background: rgba(255,252,247,0.28);
  pointer-events: none;
}
.sol-pill--brand::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 8px;
  height: 0.5px;
  background: rgba(255,252,247,0.28);
  pointer-events: none;
}
.sol-pill--brand strong {
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--milk);
}
.sol-pill--soft {
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  padding: 14px 22px;
  align-self: stretch;
  line-height: 1.45;
}

/* bullets card — elegant unified frame */
.sol-bullets-card {
  position: relative;
  margin-top: 4px;
  padding: 22px 26px 24px;
  background: var(--bg-paper);
  border: 0.5px solid rgba(61,51,43,0.14);
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(61,51,43,0.03), 0 18px 40px -32px rgba(61,51,43,0.18);
}
.sol-bullets-card::before {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  top: 0;
  height: 0.5px;
  background: linear-gradient(90deg, transparent, var(--terra), transparent);
}
.sol-bullets-eyebrow {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 14px;
}

/* deep card (right) — wraps "Мы идём глубже" pillar */
.sol-deep-card {
  position: relative;
  margin-top: 4px;
  padding: 22px 26px 24px;
  background: var(--bg-paper);
  border: 0.5px solid rgba(61,51,43,0.14);
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(61,51,43,0.03), 0 18px 40px -32px rgba(61,51,43,0.18);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sol-deep-card::before {
  content: "";
  position: absolute;
  left: 26px;
  right: 26px;
  top: 0;
  height: 0.5px;
  background: linear-gradient(90deg, transparent, var(--terra), transparent);
}
.sol-deep-card .sol-bullets-eyebrow { margin-bottom: 0; }
.sol-deep-card .sol-pill--soft { align-self: flex-start; }
.sol-deep-card .sol-arrows { margin: 0; }
.sol-deep-card .sol-foot { margin: 0; }

/* bullet list (left) */
.sol-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sol-bullets li {
  position: relative;
  padding-left: 20px;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--choco);
}
.sol-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terra);
}

.sol-brand {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.sol-brand-eyebrow {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--choco);
  font-weight: 500;
}
.sol-brand-name {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--choco);
}

/* Unified club card — banner inside grid, spans cols 1 + 2 */
.sol-club-wrap {
  grid-column: 1 / span 2;
  display: flex;
  align-self: start;
  justify-content: stretch;
  margin-top: -200px;
}
.sol-club-card {
  position: relative;
  isolation: isolate;
  width: 100%;
  padding: 26px 36px 28px;
  background: var(--sage);
  color: var(--milk);
  border: 0.5px solid rgba(61,51,43,0.18);
  border-radius: 22px;
  box-shadow: 0 1px 0 rgba(61,51,43,0.04), 0 22px 50px -34px rgba(61,51,43,0.4);
}
.sol-club-card--split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
}
.sol-club-col { min-width: 0; }
.sol-club-col--left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.sol-club-col--right {
  display: flex;
  align-items: center;
}
.sol-club-rule {
  display: block;
  width: 0.5px;
  align-self: stretch;
  background: rgba(255,252,247,0.35);
  margin: 4px 0;
}
.sol-club-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--milk);
  opacity: 0.78;
}
.sol-club-name {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: 21px;
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: var(--milk);
}
.sol-club-desc {
  margin: 0;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--milk);
}
.sol-club-desc strong {
  font-weight: 700;
  letter-spacing: 0.07em;
}
.sol-cta {
  align-self: center;
  margin-top: 4px;
}

/* CENTER media */
.sol-media {
  margin: -10px 0 0;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(61,51,43,0.06);
  aspect-ratio: 2 / 3;
  max-height: 620px;
  box-shadow: 0 1px 0 rgba(61,51,43,0.04), 0 24px 48px -32px rgba(61,51,43,0.22);
}
.sol-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}

/* RIGHT */
.sol-neg-card {
  position: relative;
  padding: 22px 26px 22px 28px;
  background: var(--beige);
  border: 0.5px solid rgba(61,51,43,0.16);
  border-radius: 22px;
  box-shadow: 0 1px 0 rgba(61,51,43,0.03), 0 18px 40px -28px rgba(61,51,43,0.18);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sol-neg-card::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 0;
  width: 2px;
  background: var(--terra);
  border-radius: 2px;
}
.sol-neg-eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--terra);
  font-weight: 500;
}
.sol-neg {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.sol-neg li {
  position: relative;
  padding: 10px 0 10px 22px;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(61,51,43,0.78);
  border-top: 0.5px solid rgba(61,51,43,0.1);
}
.sol-neg li:first-child { border-top: 0; padding-top: 4px; }
.sol-neg li:last-child  { padding-bottom: 4px; }
.sol-neg li::before {
  content: "×";
  position: absolute;
  left: 0;
  top: 11px;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1;
  color: var(--terra);
  opacity: 0.7;
}
.sol-neg li:first-child::before { top: 5px; }
.sol-neg .cw {
  color: var(--choco);
  font-weight: 500;
}

.sol-eyebrow {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--choco);
  margin-top: 8px;
}

.sol-arrows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sol-arrows li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 6px;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--choco);
}
.sol-arrows .arr {
  font-family: var(--sans);
  color: var(--choco);
  font-size: 15px;
  line-height: 1.55;
}

.sol-foot {
  margin: 8px 0 0;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--choco);
  max-width: 42ch;
}

/* RESULT — closing statement card */
.sol-result-wrap {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}
.sol-result-card {
  position: relative;
  margin: 0;
  max-width: none;
  padding: 18px 36px 18px;
  background: var(--clay);
  color: var(--choco);
  border: 0.5px solid rgba(61,51,43,0.18);
  border-radius: 999px;
  text-align: center;
  isolation: isolate;
  box-shadow: 0 1px 0 rgba(61,51,43,0.03), 0 18px 40px -32px rgba(61,51,43,0.22);
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 16px;
  white-space: nowrap;
}
.sol-result-card::before,
.sol-result-card::after { content: none; }
.sol-result-tag {
  display: inline-block;
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--choco);
  opacity: 0.7;
}
.sol-result-quote {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.32;
  color: var(--choco);
  letter-spacing: -0.005em;
}

/* inline variant — sits inside deep-card under .sol-foot */
.sol-result-card--inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px 22px 18px;
  border-radius: 18px;
  white-space: normal;
  margin: 4px 0 0;
}
.sol-result-card--inline .sol-result-tag {
  font-size: 11.5px;
}
.sol-result-card--inline .sol-result-quote {
  font-size: 17px;
  line-height: 1.3;
  text-wrap: balance;
  text-align: center;
}

/* responsive */
@media (max-width: 1023px) {
  .solution { padding: 72px 0 88px; }
  .solution-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px 36px;
  }
  .sol-col--media {
    grid-column: 1 / -1;
    order: 3;
  }
  .sol-col--right { order: 2; }
  .sol-media { aspect-ratio: 3 / 4; max-height: 480px; }
  .sol-club-wrap { margin-top: 0; order: 4; }
}
.sol-mobile-cta { display: none; }

@media (max-width: 767px) {
  .solution { padding: 56px 0 72px; }
  .sol-mobile-cta { display: flex; justify-content: center; margin-top: 18px; grid-column: auto; order: 5; }
  .sol-mobile-cta .btn-pill.lg { font-size: 15.5px; }
  .solution-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .sol-col--left  { order: 1; }
  .sol-col--media { order: 2; grid-column: auto; }
  .sol-col--right { order: 3; }
  .sol-club-wrap  { order: 2; }
  .solution-h { font-size: 36px; }
  .solution-lead { font-size: 17px; }
  .sol-pill { font-size: 14px; padding: 11px 18px; }
  .sol-pill--eyebrow { font-size: 13px; }
  .sol-pill--brand { font-size: 13.5px; padding: 12px 18px; }
  .sol-club-wrap { grid-column: auto; margin-top: 8px; }
  .sol-club-card { padding: 18px 18px 20px; border-radius: 18px; }
  .sol-club-card--split {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .sol-club-col--left { text-align: center; align-items: center; }
  .sol-club-rule {
    width: 44px;
    height: 0.5px;
    align-self: center;
    margin: 0 auto;
  }
  .sol-club-eyebrow { font-size: 13px; }
  .sol-club-name { font-size: 16px; }
  .sol-club-desc { font-size: 13.5px; text-align: center; }
  .sol-pill--soft { font-size: 15px; padding: 12px 18px; }
  .sol-bullets-card { padding: 18px 18px 20px; border-radius: 14px; }
  .sol-bullets-card::before { left: 18px; right: 18px; }
  .sol-bullets-eyebrow { font-size: 14px; margin-bottom: 10px; }
  .sol-deep-card { padding: 18px 18px 20px; border-radius: 14px; gap: 12px; }
  .sol-deep-card::before { left: 18px; right: 18px; }
  .sol-bullets li, .sol-neg li, .sol-arrows li, .sol-foot { font-size: 16px; }
  .sol-media { aspect-ratio: 3 / 4; max-height: 420px; }
  .sol-result-wrap { margin-top: 36px; }
  .sol-result-card {
    padding: 14px 22px;
    border-radius: 22px;
    flex-direction: column;
    gap: 6px;
    white-space: normal;
    text-align: center;
  }
  .sol-result-tag { font-size: 12.5px; }
  .sol-result-quote { font-size: 17.5px; }
}

/* =========================================================================
   IV · RESULT — Любовник · обещание результата
   ========================================================================= */
.result {
  position: relative;
  background: var(--linen);
  padding: 0 0 112px;
  margin-top: -4px;
  isolation: isolate;
}

.result-eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--terra);
  font-weight: 500;
  margin-bottom: 22px;
}

.result-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--choco);
  margin: 0 0 56px;
  text-wrap: balance;
  max-width: 920px;
}
.result-h em {
  font-style: italic;
  color: var(--terra);
  font-weight: 500;
}

.result-sub {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--choco);
  opacity: 0.78;
  margin: 0 0 56px;
  max-width: 760px;
}
.result-sub-rule {
  display: inline-block;
  width: 36px;
  height: 0.5px;
  background: var(--terra);
  flex: 0 0 auto;
}

/* Result tiles — 8 plates, sand neutral + choco accents */
.result-tiles {
  list-style: none;
  margin: 0 0 96px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.result-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px 24px 24px;
  min-height: 168px;
  background: var(--sand);
  border: 0.5px solid rgba(61,51,43,0.12);
  border-radius: 18px;
  color: var(--choco);
}
.result-tile--accent {
  background: var(--choco);
  border-color: rgba(61,51,43,0.35);
  color: var(--linen);
}
.result-tile .tile-key {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: inherit;
}
.result-tile--accent .tile-key {
  color: var(--clay);
}
.result-tile .tile-text {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: inherit;
  opacity: 0.82;
}

/* Pillars header */
.result-pillars-head {
  margin: 0 0 32px;
  text-align: center;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.result-pillars-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--choco);
  margin: 0;
}
.result-pillars-h em {
  font-style: italic;
  color: var(--terra);
  font-weight: 500;
}

/* Pillars row */
.result-pillars {
  list-style: none;
  margin: 0 0 72px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  counter-reset: pillar;
}
.result-pillar {
  position: relative;
  padding: 32px 28px 30px;
  background: var(--milk);
  border: 0.5px solid rgba(61,51,43,0.14);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 0 rgba(61,51,43,0.03);
}
.result-pillar::before {
  content: "";
  position: absolute;
  left: 28px;
  right: 28px;
  top: 0;
  height: 0.5px;
  background: linear-gradient(90deg, transparent, var(--terra), transparent);
  opacity: 0.7;
}
.result-pillar-num {
  display: inline-block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 32px;
  line-height: 1;
  color: var(--terra);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.result-pillar-title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--choco);
  margin: 0;
}
.result-pillar-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--choco);
  opacity: 0.84;
  margin: 0;
}

/* CTA */
.result-cta-wrap .btn-pill.lg { font-size: 16px; }
.result-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.result-cta-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.3;
  color: var(--choco);
  text-align: center;
  position: relative;
  padding: 0 36px;
}
.result-cta-note::before,
.result-cta-note::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 22px;
  height: 0.5px;
  background: var(--terra);
  opacity: 0.6;
}
.result-cta-note::before { left: 0; }
.result-cta-note::after  { right: 0; }

/* Tablet */
@media (max-width: 1023px) {
  .result { padding: 72px 0 88px; }
  .result-h { font-size: clamp(34px, 5vw, 48px); }
  .result-sub { font-size: 18px; margin-bottom: 40px; }
  .result-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 64px; }
  .result-tile { min-height: 150px; padding: 22px 20px 22px; gap: 12px; }
  .result-tile .tile-key { font-size: 25px; }
  .result-tile .tile-text { font-size: 16px; }
  .result-pillars-h { font-size: 30px; }
  .result-pillars { grid-template-columns: 1fr; gap: 14px; margin-bottom: 56px; }
  .result-pillar { padding: 26px 24px 26px; }
  .result-pillar::before { left: 24px; right: 24px; }
  .result-cta-note { font-size: 20px; }
}

/* Mobile */
@media (max-width: 767px) {
  .result { padding: 26px 0 72px; }
  .result-eyebrow { font-size: 10px; margin-bottom: 16px; letter-spacing: 1.4px; }
  .result-h { font-size: 32px; line-height: 1.08; margin-bottom: 16px; }
  .result-sub {
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: 32px;
    gap: 10px;
    align-items: flex-start;
  }
  .result-sub-rule { width: 22px; margin-top: 11px; }
  .result-tiles { grid-template-columns: 1fr; gap: 10px; margin-bottom: 44px; }
  .result-tile { min-height: 0; padding: 20px 18px 20px; gap: 10px; border-radius: 16px; }
  /* mobile-only invert: tiles 5 & 7 dark, tiles 6 & 8 light */
  .result-tiles .result-tile:nth-child(5),
  .result-tiles .result-tile:nth-child(7) {
    background: #3e332b;
    border-color: rgba(61,51,43,0.35);
    color: var(--linen);
  }
  .result-tiles .result-tile:nth-child(5) .tile-key,
  .result-tiles .result-tile:nth-child(7) .tile-key {
    color: var(--clay);
  }
  .result-tiles .result-tile:nth-child(6),
  .result-tiles .result-tile:nth-child(8) {
    background: #ebdfca;
    border-color: rgba(61,51,43,0.12);
    color: var(--choco);
  }
  .result-tiles .result-tile:nth-child(6) .tile-key,
  .result-tiles .result-tile:nth-child(8) .tile-key {
    color: var(--choco);
  }
  .result-tile .tile-key { font-size: 24px; }
  .result-tile .tile-text { font-size: 15.5px; }
  .result-pillars-eyebrow { font-size: 10px; }
  .result-pillars-h { font-size: 24px; line-height: 1.15; }
  .result-pillars-head { margin-bottom: 18px; }
  .result-pillars { gap: 12px; margin-bottom: 40px; }
  .result-pillar {
    padding: 22px 22px 22px;
    border-radius: 14px;
  }
  .result-pillar::before { left: 22px; right: 22px; }
  .result-pillar-num { font-size: 29px; }
  .result-pillar-title { font-size: 19px; }
  .result-pillar-text { font-size: 16.5px; }
  .result-cta-wrap { gap: 18px; }
  .result-cta-wrap .btn-pill.lg { font-size: 17.5px; }
  .result-cta-note { font-size: 17px; padding: 0 28px; }
  .result-cta-note::before,
  .result-cta-note::after { width: 18px; }
}

/* ============================================================
   VI · ПРОГРАММА — Доктор · структура и план
   Tabs/slider layout: 7 week-pills + active panel.
   ============================================================ */
.program {
  position: relative;
  background: var(--linen);
  padding: 0 0 128px;
  margin-top: -30px;
  isolation: isolate;
}
.program .container {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* Head */
.program-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: end;
  gap: 32px 64px;
  text-align: left;
  max-width: none;
  margin: 0;
}
.program-head .program-h { margin: 0; }
.program-head .program-lead { margin: 0; max-width: 52ch; padding-bottom: 6px; }
.program-eyebrow {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terra);
}
.program-h {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--choco);
  margin: 0;
}
.program-h em {
  font-style: italic;
  color: var(--terra);
  font-weight: 500;
}
.program-lead {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--choco);
  margin: 0;
  max-width: 60ch;
  text-wrap: pretty;
}

/* Slider container */
.program-slider {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Tabs row */
.program-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.prog-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid rgba(184,137,94,0.45);
  border-radius: 999px;
  background: var(--milk);
  color: var(--choco);
  font-family: var(--sans);
  cursor: pointer;
  transition: all 0.18s ease;
  appearance: none;
  -webkit-appearance: none;
}
.prog-tab:hover {
  border-color: var(--terra);
  background: rgba(255,252,247,0.85);
  transform: translateY(-1px);
}
.prog-tab.is-active {
  background: var(--terra);
  border-color: var(--terra);
  color: var(--milk);
  box-shadow: 0 6px 18px -8px rgba(184,137,94,0.55);
}
.prog-tab-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.01em;
  opacity: 0.7;
}
.prog-tab.is-active .prog-tab-num {
  opacity: 1;
}
.prog-tab-label {
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
.prog-tab--ext .prog-tab-num {
  font-size: 14.5px;
}

/* Stage: photo (left) + panels (right) */
.program-stage {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  gap: 28px;
  align-items: stretch;
}

/* Photo column — static across all weeks */
.program-photo {
  position: relative;
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--choco);
  min-height: 480px;
  isolation: isolate;
}
.program-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}
.program-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(61,51,43,0) 45%, rgba(61,51,43,0.55) 100%);
  pointer-events: none;
}
.program-photo-cap {
  position: absolute;
  left: 28px;
  bottom: 24px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--milk);
}
.program-photo-cap-eyebrow {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 232, 207, 0.85);
}
.program-photo-cap-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.005em;
}

/* Panels */
.program-panels {
  position: relative;
  background: var(--milk);
  border: 1px solid rgba(61,51,43,0.08);
  border-radius: 18px;
  padding: 56px 56px 52px;
  min-height: 320px;
  box-shadow: 0 1px 0 rgba(61,51,43,0.04), 0 24px 48px -32px rgba(61,51,43,0.18);
  overflow: hidden;
}
.prog-panel {
  display: flex;
  flex-direction: column;
  gap: 36px;
  animation: progFade 0.28s ease;
}
.prog-panel[hidden] { display: none; }
@keyframes progFade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Panel head */
.prog-panel-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(184,137,94,0.22);
}
.prog-panel-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.prog-panel-week {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  color: var(--terra);
  letter-spacing: -0.005em;
}
.prog-panel-tariff {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
  padding: 6px 12px;
  border: 1px solid rgba(184,137,94,0.4);
  border-radius: 999px;
  background: var(--linen);
}
.prog-panel-tariff--full {
  color: var(--milk);
  background: var(--terra);
  border-color: var(--terra);
}
.prog-panel-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 2.6vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--choco);
  margin: 0;
  max-width: 28ch;
}

/* Panel body — Тело / Лицо */
.prog-panel-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 56px;
  position: relative;
}
.prog-panel-body::before {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 50%;
  width: 1px;
  background: rgba(184,137,94,0.22);
  transform: translateX(-50%);
}
.prog-panel-body--single { grid-template-columns: minmax(0, 1fr); max-width: 64ch; }
.prog-panel-body--single::before { display: none; }
.prog-cell {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prog-cell-label {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terra);
}
.prog-cell p {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--choco);
  margin: 0;
  text-wrap: pretty;
}

/* Foot */
.program-foot {
  margin: 0;
  padding: 36px 36px 32px;
  background: var(--milk);
  border: 1px solid rgba(61,51,43,0.08);
  border-radius: 14px;
}
.program-foot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 32px;
  align-items: start;
}
.program-foot-cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.program-foot-label {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terra);
}
.program-foot-cell p {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--choco);
  margin: 0;
}
.program-foot-cell strong { font-weight: 600; }
.program-foot-cell--note p {
  font-style: italic;
  color: var(--taupe);
  font-size: 14.5px;
  border-left: 1px solid rgba(184,137,94,0.35);
  padding-left: 24px;
}

/* Tablet */
@media (max-width: 1023px) {
  .program { padding: 0 0 96px; margin-top: -30px; }
  .program .container { gap: 44px; }
  .program-head { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .program-head .program-lead { padding-bottom: 0; }
  .program-tabs { justify-content: flex-start; gap: 8px; flex-wrap: nowrap; overflow-x: auto; padding: 4px 4px 12px; margin: 0 -4px; scroll-snap-type: x mandatory; }
  .program-tabs::-webkit-scrollbar { display: none; }
  .program-tabs { scrollbar-width: none; }
  .prog-tab { flex: 0 0 auto; scroll-snap-align: start; padding: 10px 16px; }
  .prog-tab-num { font-size: 16px; }
  .prog-tab-label { font-size: 11.5px; letter-spacing: 0.1em; }
  .program-panels { padding: 36px 32px 32px; border-radius: 14px; }
  .program-stage { grid-template-columns: 1fr; gap: 18px; }
  .program-photo { min-height: 320px; max-height: 380px; }
  .program-photo img { object-position: center 22%; }
  .program-photo-cap { left: 22px; bottom: 18px; }
  .program-photo-cap-name { font-size: 22px; }
  .prog-panel { gap: 28px; }
  .prog-panel-head { gap: 12px; padding-bottom: 18px; }
  .prog-panel-week { font-size: 19px; }
  .prog-panel-title { font-size: 26px; }
  .prog-panel-body { grid-template-columns: 1fr; gap: 22px; }
  .prog-panel-body::before { display: none; }
  .program-foot { padding: 28px; }
  .program-foot-grid { grid-template-columns: 1fr 1fr; gap: 24px 28px; }
  .program-foot-cell--note { grid-column: 1 / -1; }
  .program-foot-cell--note p { border-left: none; padding-left: 0; padding-top: 16px; border-top: 1px solid rgba(184,137,94,0.35); }
}

/* Mobile */
@media (max-width: 767px) {
  .program { padding: 0 0 72px; margin-top: -30px; }
  .program .container { gap: 32px; }
  .program-h { font-size: 35px; }
  .program-lead { font-size: 17px; }
  .program-eyebrow { font-size: 12.5px; }
  .prog-tab { padding: 9px 14px; gap: 8px; }
  .prog-tab-num { font-size: 17px; }
  .prog-tab-label { font-size: 13px; letter-spacing: 0.08em; }
  .program-panels { padding: 28px 22px 26px; }
  .program-photo { min-height: 280px; max-height: 320px; border-radius: 14px; }
  .program-photo-cap-name { font-size: 22px; }
  .program-stage { display: flex; flex-direction: column; gap: 18px; }
  .program-stage .program-panels { order: 1; }
  .program-stage .program-photo { order: 2; }
  .prog-panel { gap: 22px; }
  .prog-panel-head { padding-bottom: 16px; }
  .prog-panel-week { font-size: 19px; }
  .prog-panel-tariff { font-size: 11.5px; padding: 5px 10px; }
  .prog-panel-title { font-size: 24px; }
  .prog-cell p { font-size: 16.5px; }
  .program-foot { padding: 22px 20px; }
  .program-foot-grid { grid-template-columns: 1fr; gap: 22px; }
  .program-foot-cell--note p { border-top: 1px solid rgba(184,137,94,0.35); padding-top: 16px; }
}


/* ============================================================
   V · СОСТАВ — ДОКТОР · что внутри
   ============================================================ */
.compose {
  position: relative;
  background: var(--linen);
  padding: 0 0 112px;
  isolation: isolate;
}
.compose .container { display: flex; flex-direction: column; gap: 56px; }

/* Head */
.compose-head { display: flex; flex-direction: column; gap: 22px; max-width: 1100px; }
.compose-eyebrow {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--terra);
  font-weight: 500;
}
.compose-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.005em;
  color: var(--choco);
  margin: 0;
  text-wrap: balance;
}

/* === GRID: featured + 3 cards === */
.compose-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}

/* Featured card */
.compose-feat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 38px 40px 36px;
  background: var(--choco);
  color: var(--linen);
  border-radius: 24px;
  border: 0.5px solid rgba(61,51,43,0.35);
  isolation: isolate;
  overflow: hidden;
}
.compose-feat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 0.5px;
  background: linear-gradient(90deg, transparent, var(--clay), transparent);
  opacity: 0.55;
}
.compose-feat-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 6px 14px;
  border: 0.5px solid rgba(235,223,202,0.32);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
  opacity: 0.92;
}
.compose-feat-tag::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--terra);
}
.compose-feat-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--linen);
  margin: 0;
  text-wrap: balance;
}
.compose-feat-h em {
  font-style: italic;
  color: var(--terra);
  font-weight: 500;
  font-size: 1.08em;
}
.compose-feat-lead {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.45;
  color: var(--clay);
  margin: 0;
  font-weight: 500;
}
.compose-feat-body {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--linen);
  opacity: 0.78;
  margin: 0 0 4px;
  max-width: 44ch;
}

/* Chips inside featured */
.compose-feat-chips {
  list-style: none;
  margin: auto 0 0;
  padding: 22px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  border-top: 0.5px solid rgba(235,223,202,0.18);
}
.compose-feat-chips li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.compose-feat-chips .chip-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(235,223,202,0.08);
  border: 0.5px solid rgba(235,223,202,0.22);
  color: var(--clay);
}
.compose-feat-chips .chip-ico svg { width: 20px; height: 20px; }
.compose-feat-chips .chip-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 4px;
}
.compose-feat-chips .chip-text b {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--linen);
}
.compose-feat-chips .chip-text span {
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--clay);
  opacity: 0.78;
}

/* Right stack: 3 cards */
.compose-stack {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 14px;
}
.compose-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 18px;
  padding: 22px 26px 22px 22px;
  background: var(--milk);
  border: 0.5px solid rgba(61,51,43,0.14);
  border-radius: 18px;
  align-items: start;
}
.compose-card-ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(196,87,55,0.08);
  border: 0.5px solid rgba(196,87,55,0.25);
  color: var(--terra);
  margin-top: 2px;
}
.compose-card-ico svg { width: 28px; height: 28px; }
.compose-card-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 36px;
  line-height: 1;
  color: var(--terra);
  letter-spacing: 0.01em;
  padding-top: 2px;
}
.compose-card-body { display: flex; flex-direction: column; gap: 6px; }
.compose-card-h {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--choco);
  margin: 0;
}
.compose-card-body p {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--choco);
  opacity: 0.82;
  margin: 0;
  max-width: 46ch;
}

/* === Sage band (split — like sol-club) === */
.compose-band {
  display: flex;
  width: 100%;
}
.compose-band-card {
  position: relative;
  isolation: isolate;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  padding: 26px 36px 28px;
  background: var(--sage);
  color: var(--milk);
  border: 0.5px solid rgba(61,51,43,0.18);
  border-radius: 22px;
  box-shadow: 0 1px 0 rgba(61,51,43,0.04), 0 22px 50px -34px rgba(61,51,43,0.4);
}
.compose-band-col { min-width: 0; }
.compose-band-col--left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.compose-band-col--right {
  display: flex;
  align-items: center;
}
.compose-band-rule {
  display: block;
  width: 0.5px;
  align-self: stretch;
  background: rgba(255,252,247,0.35);
  margin: 4px 0;
}
.compose-band-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--milk);
  opacity: 0.78;
}
.compose-band-name {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: 21px;
  line-height: 1.18;
  letter-spacing: 0.005em;
  color: var(--milk);
}
.compose-band-text {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--milk);
}
.compose-band-text strong {
  font-weight: 700;
  letter-spacing: 0.07em;
}

/* Zones wrap + decorative bracket */
.compose-zones-wrap { position: relative; padding-bottom: 56px; }
.compose-zones-bracket {
  position: absolute;
  left: -8px;
  right: -8px;
  bottom: -10px;
  width: calc(100% + 16px);
  height: 86px;
  pointer-events: none;
  opacity: 0.92;
}

/* === Zones grid === */
.compose-zones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 36px;
  row-gap: 0;
  counter-reset: zone;
}
.compose-zones li {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 22px;
  padding: 22px 0;
  border-top: 0.5px solid rgba(61,51,43,0.14);
  align-items: baseline;
}
.compose-zones li:nth-child(1),
.compose-zones li:nth-child(2) { border-top: 0; }
@media (min-width: 1024px) {
  .compose-zones li:nth-child(2) { border-top: 0.5px solid transparent; }
}
.zone-num {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--terra);
  padding-top: 4px;
}
.zone-body { display: flex; flex-direction: column; gap: 4px; }
.zone-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--choco);
  margin: 0;
}
.zone-body p {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--choco);
  opacity: 0.74;
  margin: 0;
  max-width: 36ch;
}

.compose-cta .btn-pill.lg { font-size: 16px; }

/* CTA */
.compose-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}
.compose-cta-sub {
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--choco);
  opacity: 0.7;
  text-align: center;
  max-width: 38ch;
}

/* ====== Tablet ====== */
@media (max-width: 1023px) {
  .compose { padding: 72px 0 88px; }
  .compose .container { gap: 44px; }
  .compose-grid { grid-template-columns: 1fr; gap: 14px; }
  .compose-feat { padding: 32px 30px 30px; }
  .compose-feat-h { font-size: clamp(26px, 3.6vw, 34px); }
  .compose-stack { grid-template-rows: none; }
  .compose-zones { column-gap: 28px; }
  .zone-h { font-size: 21px; }
}

/* ====== Mobile ====== */
@media (max-width: 767px) {
  .compose { padding: 56px 0 72px; }
  .compose .container { gap: 36px; }
  .compose-head { gap: 16px; }
  .compose-eyebrow { font-size: 12px; letter-spacing: 1.4px; }
  .compose-h { font-size: clamp(34px, 9vw, 44px); margin-top: -30px; }

  .compose-feat { padding: 26px 22px 24px; gap: 16px; border-radius: 20px; }
  .compose-feat-tag { font-size: 11.5px; padding: 5px 12px; }
  .compose-feat-h { font-size: 26px; }
  .compose-feat-lead { font-size: 17.5px; }
  .compose-feat-body { font-size: 16.5px; }
  .compose-feat-chips { grid-template-columns: 1fr; gap: 12px; padding-top: 16px; }
  .compose-feat-chips .chip-ico { width: 32px; height: 32px; }
  .compose-feat-chips .chip-ico svg { width: 18px; height: 18px; }

  .compose-card { grid-template-columns: 48px 1fr; gap: 12px; padding: 18px 20px; border-radius: 16px; }
  .compose-card-num { font-size: 28px; }
  .compose-card-ico { width: 44px; height: 44px; }
  .compose-card-ico svg { width: 22px; height: 22px; }
  .compose-card-h { font-size: 13.5px; letter-spacing: 0.12em; }
  .compose-card-body p { font-size: 16.5px; }

  .compose-band-card { padding: 18px 18px 20px; border-radius: 18px; grid-template-columns: 1fr; gap: 14px; }
  .compose-band-col--left { text-align: center; align-items: center; }
  .compose-band-rule { width: 44px; height: 0.5px; align-self: center; margin: 0 auto; }
  .compose-band-eyebrow { font-size: 15px; }
  .compose-band-name { font-size: 18px; }
  .compose-band-text { font-size: 18.5px; text-align: center; }

  .compose-zones { grid-template-columns: 1fr; column-gap: 0; }
  .compose-zones-wrap { padding-bottom: 44px; }
  .compose-zones-bracket { height: 60px; bottom: -6px; }
  .compose-zones li { grid-template-columns: 44px 1fr; gap: 14px; padding: 18px 0; }
  .compose-zones li:nth-child(2) { border-top: 0.5px solid rgba(61,51,43,0.14); }
  .zone-num { font-size: 13px; padding-top: 5px; }
  .zone-h { font-size: 22px; }
  .zone-body p { font-size: 16.5px; }

  .compose-cta-sub { font-size: 15px; max-width: 32ch; }
  .compose-cta .btn-pill.lg { font-size: 19.5px; }
}


/* ============================================================
   VII · ФОРМАТ — Воин · клуб vs курс
   Dark choco section with vs-comparison + 6 pillars.
   ============================================================ */
.versus {
  position: relative;
  background: var(--choco);
  color: var(--milk);
  padding: 128px 0 136px;
  isolation: isolate;
  overflow: hidden;
}
.versus .container {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* Subtle texture overlay (optional) */
.versus::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(184,137,94,0.18), transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(184,137,94,0.10), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.versus .container { position: relative; z-index: 1; }

/* Head */
.versus-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: end;
  gap: 32px 64px;
  text-align: left;
}
.versus-h {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 4.4vw, 64px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--milk);
  margin: 0;
}
.versus-h em {
  font-style: italic;
  color: var(--terra);
  font-weight: 500;
}
.versus-lead {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.4;
  color: var(--milk);
  margin: 0;
  max-width: none;
  text-wrap: pretty;
  position: relative;
  padding-left: 24px;
  border-left: 2px solid var(--terra);
}
.versus-lead strong {
  font-weight: 500;
  color: var(--terra);
  font-style: italic;
}

/* Compare card */
.versus-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  background: var(--milk);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 80px -40px rgba(0,0,0,0.45);
}
.versus-side {
  padding: 44px 48px 48px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  color: var(--choco);
}
.versus-side--course {
  background: var(--linen);
  color: var(--taupe);
}
.versus-side--club {
  background: var(--milk);
}
.versus-side-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.versus-side-label {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--choco);
}
.versus-side--course .versus-side-label {
  color: var(--taupe);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(120,99,82,0.45);
}
.versus-side-tag {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
  padding: 6px 12px;
  border: 1px solid rgba(184,137,94,0.35);
  border-radius: 999px;
}
.versus-side-tag--accent {
  background: var(--terra);
  border-color: var(--terra);
  color: var(--milk);
}
.versus-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.versus-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  align-items: start;
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--choco);
}
.versus-side--course .versus-list li { color: var(--taupe); }
.versus-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  margin-top: 1px;
}
.versus-mark--no {
  background: rgba(120,99,82,0.12);
  color: var(--taupe);
}
.versus-mark--yes {
  background: var(--terra);
  color: var(--milk);
}

/* Divider with vs */
.versus-divider {
  position: relative;
  width: 1px;
  background: rgba(184,137,94,0.22);
}
.versus-divider-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--milk);
  color: var(--terra);
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.01em;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(184,137,94,0.35);
  box-shadow: 0 8px 24px -10px rgba(0,0,0,0.25);
}

/* Pillars 3x2 */
.versus-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgba(245, 232, 207, 0.10);
  border-radius: 14px;
  overflow: hidden;
}
.versus-pillar {
  background: var(--choco);
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.versus-pillar-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1;
  color: var(--terra);
  letter-spacing: -0.005em;
}
.versus-pillar-h {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--milk);
  margin: 0;
}
.versus-pillar p {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(245, 232, 207, 0.72);
  margin: 0;
  text-wrap: pretty;
}

/* Closing italic quote */
.versus-close {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
}
.versus-close-quote {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--milk);
  margin: 0;
  max-width: 32ch;
  text-align: center;
}
.versus-close-quote em {
  font-style: italic;
  color: var(--terra);
  font-weight: 500;
}

/* Tablet */
@media (max-width: 1023px) {
  .versus { padding: 88px 0 96px; }
  .versus .container { gap: 48px; }
  .versus-head { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .versus-lead { padding-bottom: 0; }
  .versus-compare { grid-template-columns: 1fr; border-radius: 18px; }
  .versus-side { padding: 36px 32px 36px; gap: 22px; }
  .versus-side-label { font-size: 30px; }
  .versus-divider { width: auto; height: 1px; background: rgba(184,137,94,0.22); }
  .versus-divider-mark { font-size: 18px; width: 48px; height: 48px; }
  .versus-pillars { grid-template-columns: repeat(2, 1fr); }
  .versus-pillar { padding: 28px 26px 26px; }
  .versus-pillar-h { font-size: 20px; }
}

/* Mobile */
@media (max-width: 767px) {
  .versus { padding: 64px 0 72px; }
  .versus .container { gap: 36px; }
  .versus-h { font-size: 38px; }
  .versus-lead { font-size: 17px; }
  .versus-side { padding: 28px 22px 28px; gap: 18px; }
  .versus-side-label { font-size: 28px; }
  .versus-side-tag { font-size: 11.5px; padding: 5px 10px; }
  .versus-list li { font-size: 16.5px; gap: 12px; }
  .versus-pillars { grid-template-columns: 1fr; }
  .versus-pillar { padding: 24px 22px 22px; gap: 10px; }
  .versus-pillar-h { font-size: 21px; }
  .versus-pillar p { font-size: 17px; }
  .versus-close-quote { font-size: 24px; max-width: 24ch; }
}


/* ============================================================
   VIII · АВТОР — ЗАЩИТНИК · легитимация
   "Тренер, который сделал это сам"
   ============================================================ */
.author {
  position: relative;
  background: var(--linen);
  padding: 128px 0 136px;
  isolation: isolate;
}
.author .container {
  display: grid;
  gap: 56px;
}
.author-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 72px;
  align-items: start;
}

/* === LEFT: photo collage === */
.author-collage {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  gap: 14px;
  margin: 0;
  position: sticky;
  top: 100px;
}
.author-pcard {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(184,137,94,0.08);
  isolation: isolate;
  box-shadow: 0 1px 0 rgba(61,51,43,0.04), 0 18px 40px -28px rgba(61,51,43,0.35);
}
.author-pcard--wide { grid-column: 1 / -1; min-height: 280px; }
.author-pcard--single { grid-column: 1 / -1; }
.author-pcard--photo {
  aspect-ratio: 3 / 4;
  background: #1a1612;
}
.author-pcard-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.author-pcard-tag {
  position: absolute;
  top: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 12px 7px 12px;
  background: rgba(247,243,232,0.94);
  color: var(--choco);
  border: 1px solid rgba(184,137,94,0.35);
  border-radius: 999px;
  box-shadow: 0 6px 18px -10px rgba(61,51,43,0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.author-pcard-tag--before { left: 14px; }
.author-pcard-tag--after  { right: 14px; }
.author-pcard-tag-eye {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(61,51,43,0.65);
}
.author-pcard-tag-year {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1;
  color: var(--terra);
  letter-spacing: 0.02em;
}

.author-pcard-bands {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.author-pcard-band {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 16px;
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--milk);
  text-align: center;
  box-shadow: 0 8px 22px -14px rgba(61,51,43,0.55);
}
.author-pcard-band--before {
  background: rgba(165,143,121,0.92);
}
.author-pcard-band--after {
  background: rgba(217,196,164,0.94);
  color: var(--choco);
}
  aspect-ratio: 3 / 4;
  background: repeating-linear-gradient(
    135deg,
    rgba(184,137,94,0.07) 0 14px,
    rgba(184,137,94,0.13) 14px 28px
  );
  border: 1px dashed rgba(184,137,94,0.45);
  box-shadow: none;
}
.author-pcard-ph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.author-pcard-ph-frame {
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(184,137,94,0.35);
  border-radius: 8px;
  pointer-events: none;
}
.author-pcard-ph-frame::before,
.author-pcard-ph-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 1px solid rgba(184,137,94,0.25);
  border-bottom: 1px solid rgba(184,137,94,0.25);
}
.author-pcard-ph-frame::before {
  top: 33.333%;
  bottom: 33.333%;
  border-left: 1px solid rgba(184,137,94,0.25);
  border-right: 1px solid rgba(184,137,94,0.25);
}
.author-pcard-ph-frame::after {
  left: 33.333%;
  right: 33.333%;
  border-left: 1px solid rgba(184,137,94,0.25);
  border-right: 1px solid rgba(184,137,94,0.25);
  background: transparent;
}
.author-pcard-ph-meta {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  background: rgba(247,243,232,0.92);
  padding: 18px 22px;
  border-radius: 6px;
  border: 1px solid rgba(184,137,94,0.25);
}
.author-pcard-ph-ratio {
  font-family: var(--serif);
  font-style: italic;
  font-size: 32px;
  line-height: 1;
  color: var(--terra);
  letter-spacing: 0.04em;
}
.author-pcard-ph-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--choco);
  line-height: 1.5;
}
.author-pcard-ph-note {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(61,51,43,0.5);
}
.author-pcard-img {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  filter: saturate(0.92);
}
.author-pcard::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(20,16,12,0.55) 100%);
  pointer-events: none;
  z-index: 1;
}
.author-pcard-cap {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 16px 14px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--milk);
}
.author-pcard-cap .ix {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0;
  color: rgba(247,239,224,0.7);
  text-transform: none;
}
.author-pcard-cap .t {
  font-weight: 600;
  opacity: 0.95;
}
.author-pcard--before .author-pcard-cap {
  color: var(--choco);
  background: linear-gradient(180deg, transparent 0%, rgba(235,223,202,0.85) 50%, rgba(235,223,202,0.95) 100%);
  text-shadow: none;
}
.author-pcard--before .author-pcard-cap .ix { color: rgba(61,51,43,0.55); }
.author-pcard--before::after { display: none; }
.author-pcard--photo::after { display: none; }

/* Decorative arc on wide card */
.author-pcard-arc {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--milk);
  letter-spacing: 0.02em;
}
.author-pcard-arc .from { opacity: 0.7; }
.author-pcard-arc .to { color: #EBDFC9; font-weight: 500; }
.author-pcard-arc .dash {
  display: inline-block;
  width: 36px;
  height: 1px;
  background: rgba(247,239,224,0.5);
  margin: 0 2px;
}

/* === RIGHT: story === */
.author-story {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-top: 8px;
}
.author-eyebrow {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--terra);
  font-weight: 500;
}
.author-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 4.4vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--choco);
  margin: 0;
  text-wrap: balance;
}
.author-h em {
  font-style: italic;
  color: var(--terra);
  font-weight: 400;
}

/* Prose */
.author-prose {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 56ch;
}
.author-prose p {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--choco);
}
.author-prose strong {
  font-weight: 600;
  color: var(--choco);
}
.author-prose em {
  font-style: italic;
  font-family: var(--serif);
  color: var(--terra);
  font-size: 1.25em;
  font-weight: 500;
  line-height: 1;
}

/* Credentials list */
.author-creds {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 56ch;
}
.author-creds li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: baseline;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--choco);
}
.author-creds li strong {
  font-weight: 600;
  color: var(--choco);
}
.cred-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terra);
  align-self: center;
  margin-left: 6px;
}

/* Distinction card */
.author-distinction {
  margin-top: 14px;
  padding: 28px 32px 30px;
  background: var(--choco);
  color: var(--milk);
  border-radius: 16px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.author-distinction::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(184,137,94,0.18), transparent 55%);
  pointer-events: none;
  z-index: -1;
}
.author-distinction-eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--clay);
  font-weight: 600;
  margin-bottom: 14px;
}
.author-distinction p {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.5;
  color: var(--milk);
  text-wrap: pretty;
}
.author-distinction p em {
  color: var(--terra);
  font-style: italic;
  font-weight: 500;
}

/* ====== Tablet ====== */
@media (max-width: 1023px) {
  .author { padding: 88px 0 96px; }
  .author .container { gap: 44px; }
  .author-grid { grid-template-columns: 1fr; gap: 36px; }
  .author-collage {
    position: static;
    grid-template-rows: auto;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
  }
  .author-pcard--photo { aspect-ratio: 3 / 4; min-height: 420px; }
  .author-h { font-size: clamp(34px, 5.4vw, 48px); }
  .author-distinction p { font-size: 18px; }
}

/* ====== Mobile ====== */
@media (max-width: 767px) {
  .author { padding: 64px 0 72px; }
  .author .container { gap: 32px; }
  .author-grid { gap: 28px; }
  .author-collage {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 10px;
    max-width: 420px;
    width: 100%;
    margin: 0 auto;
  }
  .author-pcard--photo { aspect-ratio: 3 / 4; min-height: 360px; }
  .author-pcard-band { font-size: 12.5px; padding: 11px 10px; border-radius: 10px; }
  .author-pcard-bands { left: 10px; right: 10px; gap: 8px; }
  .author-pcard { border-radius: 12px; }
  .author-pcard--wide { min-height: 240px; }
  .author-pcard-cap { padding: 12px 12px 12px; font-size: 10px; gap: 8px; }
  .author-pcard-cap .ix { font-size: 13px; }
  .author-pcard-arc { top: 12px; left: 12px; font-size: 12.5px; }
  .author-pcard-arc .dash { width: 22px; }

  .author-story { gap: 22px; padding-top: 0; }
  .author-eyebrow { font-size: 12.5px; letter-spacing: 1.4px; }
  .author-h { font-size: clamp(30px, 8.4vw, 40px); }
  .author-prose p { font-size: 17px; }
  .author-creds li { font-size: 16px; grid-template-columns: 16px 1fr; gap: 10px; }
  .author-distinction { padding: 22px 22px 24px; border-radius: 14px; }
  .author-distinction-eyebrow { font-size: 11.5px; }
  .author-distinction p { font-size: 17px; }
}


/* =========================================================================
   IX · ВИДЕОИНТЕРВЬЮ — Защитник · доказательство голосом
   Two-col stage: 16:9 video player on left, quote + CTA + about on right.
   ========================================================================= */
.video {
  position: relative;
  background: var(--linen);
  padding: 20px 0 128px;
  isolation: isolate;
}
.video .container {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* Head */
.video-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 920px;
}
.video-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terra);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.video-eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--terra);
}
.video-h {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--choco);
  margin: 0;
  text-wrap: balance;
}
.video-h em {
  font-style: italic;
  color: var(--terra);
  font-weight: 500;
}
.video-lead {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 880px;
  margin: 0;
  text-wrap: balance;
}

/* Stage */
.video-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

/* === LEFT: Video player === */
.video-player {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.video-player-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #1a1612;
  box-shadow: 0 1px 0 rgba(61,51,43,0.06), 0 30px 60px -28px rgba(61,51,43,0.5);
  isolation: isolate;
}
.video-player-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0f0b08;
  display: block;
  z-index: 0;
}
.video-player-frame.is-playing .video-player-thumb,
.video-player-frame.is-playing .video-player-play { display: none; }
.video-player-frame.is-playing .video-player-media { z-index: 4; }
.video-player-thumb {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.video-player-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(15,11,8,0.42) 0%, rgba(15,11,8,0.18) 35%, rgba(15,11,8,0.18) 65%, rgba(15,11,8,0.55) 100%);
}
.video-player-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(0deg, rgba(235,223,202,0.04) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(235,223,202,0.04) 0 1px, transparent 1px 4px);
  opacity: 0.6;
}
.video-player-ratio {
  position: absolute;
  top: 18px;
  left: 20px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(235,223,202,0.55);
  z-index: 2;
}
.video-player-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  border: none;
  border-radius: 50%;
  background: var(--terra);
  color: var(--milk);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  box-shadow:
    0 0 0 1px rgba(235,223,202,0.18),
    0 0 0 12px rgba(196,87,55,0.18),
    0 22px 50px -16px rgba(196,87,55,0.7);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.video-player-play:hover {
  transform: translate(-50%, -50%) scale(1.06);
  background: #b04830;
  box-shadow:
    0 0 0 1px rgba(235,223,202,0.24),
    0 0 0 16px rgba(196,87,55,0.22),
    0 28px 60px -16px rgba(196,87,55,0.8);
}
.video-player-play svg { margin-left: 6px; }
.video-player-duration {
  position: absolute;
  bottom: 18px;
  right: 18px;
  z-index: 2;
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--clay);
  background: rgba(15,11,8,0.55);
  padding: 8px 14px 9px;
  border-radius: 8px;
  border: 0.5px solid rgba(235,223,202,0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.video-player-platform {
  position: absolute;
  bottom: 22px;
  left: 20px;
  z-index: 2;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(235,223,202,0.7);
}
.video-player-cap {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-left: 4px;
  font-family: var(--sans);
}
.video-player-cap-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--terra);
  line-height: 1;
}
.video-player-cap-text {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--taupe);
}

/* === RIGHT: Quote + CTA + About === */
.video-side {
  display: flex;
  flex-direction: column;
  gap: 32px;
  position: sticky;
  top: 100px;
}
.video-quote {
  position: relative;
  margin: 0;
  padding: 6px 0 0 0;
  border-left: 2px solid var(--terra);
  padding-left: 26px;
}
.video-quote-mark {
  position: absolute;
  top: -22px;
  left: 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 96px;
  line-height: 1;
  color: var(--terra);
  opacity: 0.25;
  pointer-events: none;
  user-select: none;
}
.video-quote p {
  position: relative;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.32;
  color: var(--choco);
  margin: 0;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.video-quote p em {
  color: var(--terra);
  font-style: italic;
  font-weight: 500;
}

/* CTA */
.video-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  align-self: flex-start;
  padding: 18px 28px 18px 30px;
  background: var(--terra);
  color: var(--milk);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0.5px solid rgba(61,51,43,0.18);
  box-shadow: 0 1px 0 rgba(61,51,43,0.04), 0 18px 40px -22px rgba(196,87,55,0.7);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.video-cta:hover {
  transform: translateY(-2px);
  background: #b04830;
  box-shadow: 0 1px 0 rgba(61,51,43,0.04), 0 24px 48px -20px rgba(196,87,55,0.8);
}
.video-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 14px;
}

/* About card */
.video-about {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 26px 24px;
  background: var(--bg-paper);
  border: 0.5px solid rgba(61,51,43,0.14);
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(61,51,43,0.03), 0 18px 40px -32px rgba(61,51,43,0.18);
}
.video-about-eyebrow {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
}
.video-about-name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--choco);
  margin: 0;
}
.video-about-text {
  font-family: var(--sans);
  font-size: 17.5px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}

/* ====== Tablet ====== */
@media (max-width: 1023px) {
  .video { padding: 20px 0 96px; }
  .video .container { gap: 44px; }
  .video-stage {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .video-side {
    position: static;
    gap: 28px;
  }
  .video-h { font-size: clamp(36px, 5.4vw, 52px); }
  .video-lead { font-size: 17.5px; }
  .video-quote p { font-size: 24px; }
  .video-player-play { width: 84px; height: 84px; }
  .video-player-duration { font-size: 24px; padding: 7px 12px 8px; }
}

/* ====== Mobile ====== */
@media (max-width: 767px) {
  .video { padding: 16px 0 72px; }
  .video .container { gap: 32px; }
  .video-stage { gap: 28px; }
  .video-eyebrow { font-size: 11.5px; letter-spacing: 1.6px; }
  .video-h { font-size: clamp(30px, 8.4vw, 40px); }
  .video-lead { font-size: 16.5px; }

  .video-player-frame { border-radius: 12px; }
  .video-player-play { width: 64px; height: 64px; }
  .video-player-play svg { width: 24px; height: 28px; margin-left: 4px; }
  .video-player-ratio { top: 12px; left: 14px; font-size: 9.5px; letter-spacing: 1.6px; }
  .video-player-platform { bottom: 14px; left: 14px; font-size: 9.5px; letter-spacing: 1.6px; }
  .video-player-duration { bottom: 12px; right: 12px; font-size: 18px; padding: 5px 9px 6px; border-radius: 6px; }
  .video-player-cap-num { font-size: 19px; }
  .video-player-cap-text { font-size: 12px; }

  .video-quote { padding-left: 20px; }
  .video-quote-mark { font-size: 72px; top: -16px; left: 8px; }
  .video-quote p { font-size: 21px; }

  .video-cta { padding: 16px 22px 16px 24px; font-size: 13px; }

  .video-about { padding: 22px 22px 22px; border-radius: 14px; }
  .video-about-name { font-size: 24px; }
  .video-about-text { font-size: 17px; }
}


/* =========================================================================
   X · КЕЙСЫ — Доктор · социальное доказательство
   Horizontal carousel of before/after diptych cards with snap-scroll.
   ========================================================================= */
.cases {
  position: relative;
  background: var(--cream, #f4ece1);
  padding: 128px 0 128px;
  isolation: isolate;
}
.cases .container {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Head */
.cases-head { display: flex; flex-direction: column; gap: 18px; }
.cases-head-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 32px;
}
.cases-head-text { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.cases-h {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--choco);
  margin: 0;
  text-wrap: balance;
}
.cases-h em { font-style: italic; color: var(--terra); font-weight: 500; }
.cases-lead {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 680px;
  margin: 0;
  text-wrap: balance;
}

/* Controls */
.cases-controls {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  padding-bottom: 6px;
}
.cases-counter {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  color: var(--choco);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
}
.cases-counter-sep { color: var(--taupe); font-weight: 400; }
.cases-counter-total { font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: 0.06em; color: var(--taupe); }
.cases-arrows { display: inline-flex; gap: 10px; }
.cases-arrow {
  appearance: none;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(61,51,43,0.22);
  background: transparent;
  color: var(--choco);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, opacity 0.18s ease;
}
.cases-arrow:hover {
  background: var(--choco);
  border-color: var(--choco);
  color: var(--cream, #f4ece1);
}
.cases-arrow.is-primary {
  background: var(--terra);
  border-color: var(--terra);
  color: #fff;
}
.cases-arrow.is-primary:hover {
  background: var(--choco);
  border-color: var(--choco);
}
.cases-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  background: transparent;
  color: var(--choco);
  border-color: rgba(61,51,43,0.22);
}
.cases-arrow:active { transform: scale(0.96); }

/* Track */
.cases-track-wrap {
  position: relative;
  margin-left: calc(var(--container-pad, 32px) * -1);
  margin-right: calc(var(--container-pad, 32px) * -1);
}
.cases-track {
  list-style: none;
  margin: 0;
  padding: 4px var(--container-pad, 32px) 4px;
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.cases-track::-webkit-scrollbar { display: none; }
.cases-track-fade--right {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 80px;
  background: linear-gradient(90deg, rgba(244,236,225,0) 0%, var(--cream, #f4ece1) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Card */
.cases-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: clamp(278px, 36vw, 518px);
  display: flex;
  flex-direction: column;
}
.cases-card-figure {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cases-card-img {
  display: block;
  width: 100%;
  aspect-ratio: 1.16 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
  background: #2a221d;
  box-shadow: 0 1px 0 rgba(61,51,43,0.04), 0 24px 48px -32px rgba(61,51,43,0.32);
}
.cases-card-caption {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 0 4px;
}
.cases-card-num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  color: var(--terra);
  letter-spacing: -0.01em;
  flex: 0 0 auto;
}
.cases-card-tag {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: 0.01em;
  text-wrap: pretty;
}

/* Foot note */
.cases-foot {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--choco);
  width: 100%;
  margin: 4px 0 0;
  text-align: center;
  text-wrap: pretty;
  font-style: italic;
}

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  .cases { padding: 96px 0 96px; }
  .cases .container { gap: 36px; }
  .cases-head-row { grid-template-columns: 1fr; align-items: start; gap: 22px; }
  .cases-controls { justify-content: flex-end; }
  .cases-card { width: clamp(258px, 56vw, 478px); }
  .cases-track-fade--right { width: 48px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .cases { padding: 80px 0 84px; }
  .cases .container { gap: 28px; }
  .cases-h { font-size: clamp(34px, 9vw, 44px); }
  .cases-lead { font-size: 16.5px; }

  .cases-arrow { width: 40px; height: 40px; }
  .cases-counter { font-size: 19px; }

  .cases-card { width: 82vw; max-width: 380px; }
  .cases-card-img { border-radius: 12px; }
  .cases-card-num { font-size: 19px; }
  .cases-card-tag { font-size: 13.5px; }
  .cases-track-fade--right { width: 32px; }
  .cases-track { gap: 14px; }
}


/* =========================================================================
   XI · ТАРИФЫ — Закрытие сделки
   Two pricing cards, second one accented as Recommended.
   ========================================================================= */
.tarify {
  position: relative;
  background: var(--linen);
  padding: 128px 0 128px;
  isolation: isolate;
}
.tarify .container {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* Head */
.tarify-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
.tarify-h {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--choco);
  margin: 0;
  text-wrap: balance;
}
.tarify-h em { font-style: italic; color: var(--terra); font-weight: 500; }
.tarify-lead {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.tarify-lead-em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--choco);
  font-size: 22px;
}

/* Grid */
.tarify-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

/* Card */
.tarify-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(61,51,43,0.08);
  border-radius: 18px;
  padding: 40px 36px 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 0 1px 0 rgba(61,51,43,0.03), 0 24px 56px -36px rgba(61,51,43,0.18);
}
.tarify-card--featured {
  background: var(--choco);
  color: var(--linen);
  border-color: var(--choco);
  box-shadow: 0 1px 0 rgba(61,51,43,0.06), 0 30px 64px -28px rgba(61,51,43,0.5);
}
.tarify-card-badge {
  position: absolute;
  top: -14px;
  right: 28px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  background: var(--terra);
  padding: 8px 16px;
  border-radius: 999px;
  box-shadow: 0 8px 20px -8px rgba(199,136,106,0.5);
}

/* Card head */
.tarify-card-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(61,51,43,0.08);
}
.tarify-card--featured .tarify-card-head { border-bottom-color: rgba(244,236,225,0.18); }
.tarify-card-tag {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terra);
}
.tarify-card--featured .tarify-card-tag { color: #f0c5ad; }
.tarify-card-dur {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.15;
  color: var(--choco);
  letter-spacing: -0.005em;
}
.tarify-card--featured .tarify-card-dur { color: var(--linen); }

/* Price */
.tarify-card-price {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tarify-card-amount {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--choco);
}
.tarify-card--featured .tarify-card-amount { color: #fff; }
.tarify-card-amount-note {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--taupe);
}
.tarify-card--featured .tarify-card-amount-note { color: rgba(244,236,225,0.7); }
.tarify-card-amount-renew {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed rgba(61,51,43,0.16);
}
.tarify-card-amount-renew b { font-weight: 600; color: var(--terra); }
.tarify-card--featured .tarify-card-amount-renew {
  color: rgba(244,236,225,0.85);
  border-top-color: rgba(244,236,225,0.18);
}
.tarify-card--featured .tarify-card-amount-renew b { color: #f0c5ad; }

/* Description */
.tarify-card-desc {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.tarify-card--featured .tarify-card-desc { color: rgba(244,236,225,0.92); }

/* Feature list */
.tarify-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  flex: 1;
}
.tarify-card-list li {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  align-items: start;
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
}
.tarify-card--featured .tarify-card-list li { color: rgba(244,236,225,0.92); }
.tarify-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--terra);
  margin-top: 8px;
  justify-self: center;
}
.tarify-card--featured .tarify-dot { background: #f0c5ad; }

/* "All included from previous tier" — distinguished row at top of list */
.tarify-card-list-include {
  grid-template-columns: 22px 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px 12px 12px;
  margin: -2px -10px 6px;
  background: rgba(244, 236, 225, 0.10);
  border: 1px solid rgba(244, 236, 225, 0.22);
  border-radius: 10px;
  position: relative;
}
.tarify-include-mark {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--terra);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  justify-self: center;
  box-shadow: 0 0 0 3px rgba(184, 137, 94, 0.18);
}
.tarify-include-text {
  font-weight: 600 !important;
  letter-spacing: 0.005em;
  color: #fff !important;
}
.tarify-card--featured .tarify-card-list .tarify-card-list-include {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}

/* CTA */
.tarify-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--choco);
  background: transparent;
  border: 1px solid var(--choco);
  border-radius: 999px;
  padding: 18px 28px;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  margin-top: 4px;
}
.tarify-card-cta:hover {
  background: var(--choco);
  color: var(--linen);
}
.tarify-card-cta:active { transform: scale(0.98); }
.tarify-card-cta--primary {
  background: var(--terra);
  color: #fff;
  border-color: var(--terra);
}
.tarify-card-cta--primary:hover {
  background: #6F7B45;
  color: #fff;
  border-color: #6F7B45;
}

/* Note */
.tarify-note {
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--taupe);
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  text-wrap: pretty;
}

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  .tarify { padding: 96px 0 96px; }
  .tarify .container { gap: 44px; }
  .tarify-grid { grid-template-columns: 1fr; gap: 22px; }
  .tarify-card { padding: 32px 28px 30px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .tarify { padding: 80px 0 84px; }
  .tarify .container { gap: 32px; }
  .tarify-h { font-size: clamp(32px, 9vw, 42px); }
  .tarify-lead { font-size: 16.5px; }
  .tarify-lead-em { font-size: 19px; }

  .tarify-card { padding: 28px 22px 26px; border-radius: 16px; }
  .tarify-card-dur { font-size: 21px; }
  .tarify-card-amount { font-size: 44px; }
  .tarify-card-cta { padding: 16px 24px; font-size: 12.5px; }
  .tarify-card-list li { font-size: 15px; }
  .tarify-note { font-size: 13.5px; }
}


/* =========================================================================
   XII · FAQ + ФИНАЛЬНЫЙ CTA — Доктор · финальные возражения
   ========================================================================= */
.faq {
  background: var(--linen, #f4ece1);
  padding: 0 0 96px;
  margin-top: -22px;
  position: relative;
  isolation: isolate;
}
.faq .container {
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* Head */
.faq-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 780px;
}
.faq-eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terra);
}
.faq-h {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--choco);
  margin: 0;
  text-wrap: balance;
}
.faq-h em {
  font-style: italic;
  color: var(--terra);
  font-weight: 500;
}
.faq-lead {
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink, var(--choco));
  opacity: 0.78;
  margin: 0;
  text-wrap: pretty;
  max-width: 56ch;
}

/* List */
.faq-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.faq-item {
  border-top: 1px solid rgba(61, 51, 43, 0.16);
}
.faq-item:last-child {
  border-bottom: 1px solid rgba(61, 51, 43, 0.16);
}

.faq-details { padding: 0; }
.faq-details > summary {
  list-style: none;
  cursor: pointer;
}
.faq-details > summary::-webkit-details-marker { display: none; }

.faq-summary {
  display: grid;
  grid-template-columns: 56px 1fr 44px;
  align-items: center;
  gap: 24px;
  padding: 28px 4px 28px 0;
  transition: background 0.2s ease;
}
.faq-num {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  color: var(--terra);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.faq-q {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(19px, 1.55vw, 25px);
  line-height: 1.28;
  letter-spacing: -0.005em;
  color: var(--choco);
  text-wrap: pretty;
  transition: color 0.2s ease;
}
.faq-toggle {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(61, 51, 43, 0.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--choco);
  flex: 0 0 auto;
  justify-self: end;
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.4s var(--ease-soft, cubic-bezier(0.4, 0, 0.2, 1));
}
.faq-toggle svg { width: 16px; height: 16px; display: block; }
.faq-toggle-v {
  transform-origin: 12px 12px;
  transition: transform 0.4s var(--ease-soft, cubic-bezier(0.4, 0, 0.2, 1)), opacity 0.3s ease;
}

.faq-details:hover .faq-q { color: var(--terra); }
.faq-details:hover .faq-toggle {
  border-color: var(--terra);
  color: var(--terra);
}
.faq-details[open] .faq-toggle {
  background: var(--terra);
  border-color: var(--terra);
  color: #fff;
  transform: rotate(180deg);
}
.faq-details[open] .faq-toggle-v {
  transform: scaleY(0);
  opacity: 0;
}

.faq-a {
  display: block;
  padding: 0 4px 32px 0;
  animation: faqFadeIn 0.32s var(--ease-soft, cubic-bezier(0.4, 0, 0.2, 1));
}
.faq-a > p {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--choco);
  margin: 0;
  text-wrap: pretty;
  max-width: none;
}
.faq-a > p + p { margin-top: 14px; }

@keyframes faqFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Final CTA panel */
.faq-final {
  margin-top: 32px;
  padding: 80px clamp(30px, 6vw, 78px) 80px;
  background: var(--choco);
  color: var(--linen, #f4ece1);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.faq-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(184, 137, 94, 0.18), transparent 70%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(184, 137, 94, 0.10), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.faq-final-mark {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.faq-final-rule {
  display: block;
  width: 36px;
  height: 0.5px;
  background: rgba(244, 236, 225, 0.4);
}
.faq-final-eyebrow {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--clay, rgba(244, 236, 225, 0.7));
  opacity: 0.8;
}
.faq-final-quote {
  font-family: var(--serif);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(48px, 5.6vw, 76px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--linen, #f4ece1);
  margin: 0;
  text-wrap: balance;
  max-width: 18ch;
}
.faq-final-quote em {
  font-style: italic;
  color: var(--clay, #c9a78a);
  font-weight: 500;
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.faq-final-cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-top: 4px;
}
.faq-final-cta-row .btn-pill {
  font-size: 14px;
  padding: 20px 38px;
  letter-spacing: 0.06em;
  text-transform: none;
  font-weight: 500;
}
.faq-final-sub {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(244, 236, 225, 0.62);
  max-width: 56ch;
  text-wrap: pretty;
  margin: 0;
  text-align: center;
}

/* Tablet */
@media (max-width: 1023px) {
  .faq { padding: 0 0 72px; margin-top: -38px; }
  .faq .container { gap: 44px; }
  .faq-summary {
    grid-template-columns: 44px 1fr 40px;
    gap: 18px;
    padding: 24px 4px 24px 0;
  }
  .faq-a {
    padding-bottom: 28px;
  }
  .faq-toggle { width: 40px; height: 40px; }
  .faq-num { font-size: 16px; }
  .faq-final {
    padding: 64px clamp(22px, 5vw, 54px) 64px;
    border-radius: 20px;
    margin-top: 24px;
    gap: 28px;
  }
  .faq-final-quote { font-size: clamp(40px, 6vw, 56px); }
}

/* Mobile */
@media (max-width: 720px) {
  .faq { padding: 0 0 56px; margin-top: -42px; }
  .faq .container { gap: 36px; }
  .faq-eyebrow { font-size: 11px; letter-spacing: 0.18em; }
  .faq-h { font-size: clamp(34px, 9vw, 44px); }
  .faq-lead { font-size: 16px; }

  .faq-summary {
    grid-template-columns: 36px 1fr 36px;
    gap: 14px;
    padding: 20px 0 20px 0;
  }
  .faq-a {
    padding-bottom: 24px;
  }
  .faq-a > p { font-size: 15.5px; }
  .faq-toggle { width: 36px; height: 36px; }
  .faq-toggle svg { width: 14px; height: 14px; }
  .faq-num { font-size: 14px; }
  .faq-q { font-size: 17.5px; line-height: 1.3; }

  .faq-final {
    padding: 52px 24px 56px;
    border-radius: 18px;
    gap: 24px;
  }
  .faq-final-quote { font-size: 36px; line-height: 1.16; }
  .faq-final-cta-row .btn-pill { padding: 16px 28px; font-size: 13px; }
  .faq-final-sub { font-size: 13px; }
}

/* =========================================================================
   XIII · ПРОТИВОПОКАЗАНИЯ — Доктор · профессиональная честность
   ========================================================================= */
.contra {
  position: relative;
  background: var(--beige);
  padding: 62px 0 74px;
  isolation: isolate;
}
.contra::before {
  /* hairline divider at the top */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0.5px;
  background: rgba(61,51,43,0.10);
  pointer-events: none;
}

.contra-head {
  max-width: 760px;
  margin: 0 auto 56px;
  text-align: center;
}
.contra-eyebrow {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terra);
  font-weight: 500;
  margin: 0 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}
.contra-eyebrow-mark {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--terra);
  opacity: 0.6;
}
.contra-eyebrow::after {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--terra);
  opacity: 0.6;
}
.contra-h {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5.2vw, 70px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--choco);
  margin: 0 0 22px;
  text-wrap: balance;
}
.contra-lead {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--choco);
  opacity: 0.78;
  margin: 0 auto;
  max-width: 60ch;
  text-wrap: pretty;
}

/* 3 + 2 centered grid of 5 contraindications */
.contra-grid {
  list-style: none;
  margin: 0 0 56px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.contra-card {
  grid-column: span 2;
  position: relative;
  padding: 28px 26px 26px;
  background: var(--milk);
  border: 0.5px solid rgba(61,51,43,0.12);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  isolation: isolate;
  transition: transform 280ms var(--ease-soft),
              box-shadow 280ms var(--ease-soft),
              border-color 280ms var(--ease-soft);
}
/* center the last row (cards 4 & 5 → columns 2-3 and 4-5 of 6) */
.contra-card:nth-child(4) { grid-column: 2 / span 2; }
.contra-card:nth-child(5) { grid-column: 4 / span 2; }
.contra-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 0.5px;
  background: linear-gradient(90deg, transparent, var(--terra), transparent);
  opacity: 0.7;
  pointer-events: none;
}
.contra-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -18px rgba(61,51,43,0.18);
  border-color: rgba(61,51,43,0.18);
}
.contra-card-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 26px;
  line-height: 1;
  color: var(--terra);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.contra-card-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--choco);
  margin: 0;
  text-wrap: pretty;
}
.contra-card-desc {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--choco);
  opacity: 0.82;
  margin: 0;
  text-wrap: pretty;
}

/* Closing note — elegant, no chrome; small ornament + serif italic */
.contra-note {
  position: relative;
  margin: 56px auto 0;
  max-width: 640px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
}
.contra-note::before {
  content: '';
  display: block;
  width: 80px;
  height: 0.5px;
  background: var(--terra);
  opacity: 0.55;
  margin-bottom: 6px;
  position: static;
  inset: auto;
}
.contra-note-text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.32;
  letter-spacing: -0.005em;
  color: var(--choco);
  margin: 0;
  text-wrap: balance;
}
.contra-note-text em,
.contra-note-link {
  font-style: italic;
  color: var(--terra);
  font-weight: 500;
  font-style: normal;
  border-bottom: 0.5px solid rgba(184,137,94,0.5);
  padding-bottom: 1px;
  text-decoration: none;
  transition: color 200ms var(--ease-soft), border-color 200ms var(--ease-soft);
  cursor: pointer;
}
.contra-note-link:hover {
  color: var(--choco);
  border-bottom-color: var(--choco);
}
.contra-note-fine {
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--choco);
  opacity: 0.45;
  margin: 0;
}

/* Tablet — 2 columns */
@media (max-width: 1023px) {
  .contra { padding: 38px 0 46px; }
  .contra-head { margin-bottom: 44px; }
  .contra-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 44px;
  }
  .contra-card { grid-column: span 2; }
  /* reset desktop centering */
  .contra-card:nth-child(4) { grid-column: span 2; }
  .contra-card:nth-child(5) { grid-column: 2 / span 2; }
  .contra-card { padding: 24px 22px 22px; }
  .contra-card-title { font-size: 20px; }
  .contra-note { margin-top: 36px; padding: 0; gap: 14px; }
  .contra-note::before { width: 56px; }
}

/* Mobile — single column */
@media (max-width: 639px) {
  .contra { padding: 22px 0 30px; }
  .contra-head { margin-bottom: 36px; }
  .contra-eyebrow {
    font-size: 10.5px;
    letter-spacing: 0.2em;
    gap: 10px;
  }
  .contra-eyebrow-mark,
  .contra-eyebrow::after { width: 18px; }
  .contra-lead { font-size: 15.5px; }
  .contra-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 36px;
  }
  .contra-card,
  .contra-card:nth-child(4),
  .contra-card:nth-child(5) { grid-column: 1; }
  .contra-card { padding: 22px 20px 20px; }
  .contra-card-num { font-size: 22px; }
  .contra-card-title { font-size: 19px; }
  .contra-card-desc { font-size: 14.5px; }
  .contra-note {
    margin-top: 28px;
    padding: 0;
    gap: 12px;
  }
  .contra-note::before { width: 44px; }
  .contra-note-text { font-size: 21px; }
  .contra-note-fine { font-size: 10.5px; letter-spacing: 0.14em; }
}

/* Wrap final CTA in a section so it can have its own background/padding */
.faq-final-section {
  background: var(--linen);
  padding: 46px 0 120px;
}
@media (max-width: 1023px) {
  .faq-final-section { padding: 22px 0 96px; }
}
@media (max-width: 639px) {
  .faq-final-section { padding: 6px 0 80px; }
}

/* =========================================================================
   FOOTER — серо-бежевый таупе фон, тёмный текст
   ========================================================================= */
.site-footer {
  position: relative;
  background: #B5A89A;
  color: #FFFFFF;
  padding: 72px 0 32px;
  font-family: var(--sans);
}
.site-footer-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 64px;
  align-items: start;
}

/* ── Brand column ────────────────────────── */
.site-footer-col--brand { display: flex; flex-direction: column; gap: 28px; }
.site-footer-logo {
  display: inline-block;
  width: 180px;
  max-width: 100%;
}
.site-footer-logo img {
  width: 100%;
  height: auto;
  display: block;
}
.site-footer-tagline {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FFFFFF;
  font-weight: 600;
  margin: -8px 0 0;
  max-width: 28ch;
}
.site-footer-legal {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.site-footer-legal p { margin: 0; }
.site-footer-legal p.site-footer-legal-club {
  font-size: 14px;
  line-height: 1.4;
  color: #FFFFFF;
  font-weight: 500;
  letter-spacing: 0.005em;
  margin: -10px 0 5px;
  white-space: nowrap;
}
.site-footer-legal-org {
  font-size: 14px;
  letter-spacing: 0.005em;
  color: #FFFFFF;
  font-weight: 500;
  margin-bottom: 6px;
}
.site-footer-legal-addr,
.site-footer-legal-line,
.site-footer-legal-inn {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.01em;
}
.site-footer-legal a {
  color: inherit;
  text-decoration: none;
  transition: color 200ms var(--ease-soft);
}
.site-footer-legal a:hover { color: #FFFFFF; opacity: 0.7; }
.site-footer-legal-tg a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #FFFFFF;
}
.site-footer-legal-tg a svg {
  width: 18px;
  height: 18px;
  display: block;
  flex: none;
}
.site-footer-legal-tg a span {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 0.5px;
}

/* ── Links column ────────────────────────── */
.site-footer-col--links {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
}

.site-footer-socials {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: flex;
  gap: 12px;
}
.site-footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #FFFFFF;
  color: #B5A89A;
  transition: transform 220ms var(--ease-soft), background-color 220ms var(--ease-soft), color 220ms var(--ease-soft);
}
.site-footer-social svg { width: 18px; height: 18px; display: block; }
.site-footer-social:hover { transform: translateY(-2px); }

.site-footer-contact {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #FFFFFF;
  font-size: 16px;
  letter-spacing: 0.005em;
  text-decoration: none;
  transition: opacity 200ms var(--ease-soft);
}
.site-footer-contact:hover { opacity: 0.75; }
.site-footer-contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: #FFFFFF;
}
.site-footer-contact-icon svg { width: 24px; height: 24px; display: block; }

.site-footer-policies {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.site-footer-policies a {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,0.92);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 0.5px;
  transition: opacity 200ms var(--ease-soft);
}
.site-footer-policies a:hover { opacity: 0.7; }

/* ── Footer foot ────────────────────────── */
.site-footer-foot {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 0.5px solid rgba(255,255,255,0.22);
}
.site-footer-copy {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.7);
  margin: 0;
}

/* Tablet */
@media (max-width: 1023px) {
  .site-footer { padding: 56px 0 28px; }
  .site-footer-grid { gap: 44px; }
  .site-footer-logo { width: 160px; }
  .site-footer-tagline { font-size: 12px; }
  .site-footer-foot { margin-top: 44px; }
}

/* Mobile */
@media (max-width: 639px) {
  .site-footer { padding: 48px 0 24px; }
  .site-footer-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .site-footer-col--links { gap: 20px; }
  .site-footer-logo { width: 150px; }
  .site-footer-tagline {
    font-size: 11.5px;
    letter-spacing: 0.14em;
  }
  .site-footer-contact { font-size: 15px; }
  .site-footer-policies a { font-size: 13.5px; }
  .site-footer-foot { margin-top: 32px; padding-top: 20px; }
  .site-footer-copy { font-size: 11.5px; }
}