/* КОМПАС v2 (редизайн 2026-08) — дополнение к tokens.css.
   Формула: full-bleed кино-сцены + overlay-словарь + seams + grain + антиква-дисплей.
   Подключается ПОСЛЕ tokens.css. Не трогает боевые классы. */

:root {
  --kv2-dark: #171B21;
  --kv2-dark-2: #1F252D;
  --kv2-cream-on-dark: #E9E4D7;
}

/* ===== Типографика: антиква-дисплей ===== */
.kv2-serif { font-family: 'Playfair Display', 'Prata', Georgia, serif !important; letter-spacing: -0.01em !important; }
.kv2-h1 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 600; font-size: 66px; line-height: 1.07;
  letter-spacing: -0.012em !important; margin: 0; text-wrap: balance;
}
.kv2-h2 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 600; font-size: 46px; line-height: 1.1;
  letter-spacing: -0.012em !important; margin: 0; text-wrap: balance;
}
.kv2-h2-sm { font-size: 38px; }
.kv2-price {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 600; letter-spacing: -0.01em !important;
}
.kv2-hand { font-family: 'Caveat', cursive; font-weight: 600; }

/* Мобильные размеры (страница mobile-v2 имеет фикс. ширину 390) */
.kv2-h1-m { font-size: 38px; line-height: 1.1; }
.kv2-h2-m { font-size: 30px; line-height: 1.12; }

.kv2-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--teal-3);
  display: inline-flex; align-items: center; gap: 12px;
}
.kv2-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--teal); flex-shrink: 0; }
.kv2-eyebrow.on-dark { color: #8FD4CE; }
.kv2-eyebrow.on-dark::before { background: rgba(143,212,206,.55); }
.kv2-eyebrow.no-dash::before { display: none; }

/* Мono-строка фактов вместо pill-бейджей */
.kv2-facts {
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.04em; color: var(--ink-3); line-height: 2;
}
.kv2-facts b { color: var(--ink-2); font-weight: 500; }
.kv2-facts .sep { margin: 0 10px; color: var(--line-2); }
.on-dark .kv2-facts, .kv2-facts.on-dark { color: rgba(233,228,215,.55); }
.kv2-facts.on-dark .sep { color: rgba(233,228,215,.25); }

/* ===== Full-bleed сцена секции ===== */
.kv2-secbg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.kv2-secbg picture { display: contents; }
.kv2-secbg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.kv2-secbg .kv2-ov { position: absolute; inset: 0; }
.kv2-secbg .kv2-seam { position: absolute; left: 0; right: 0; height: 110px; z-index: 2; pointer-events: none; }
.kv2-secbg .kv2-seam-top { top: 0; background: linear-gradient(180deg, var(--bg), transparent); }
.kv2-secbg .kv2-seam-bottom { bottom: 0; background: linear-gradient(0deg, var(--bg), transparent); }
.kv2-secbg.dark .kv2-seam-top { background: linear-gradient(180deg, var(--kv2-dark), transparent); }
.kv2-secbg.dark .kv2-seam-bottom { background: linear-gradient(0deg, var(--kv2-dark), transparent); }

/* Контент поверх сцены — обязателен z-index */
.kv2-over { position: relative; z-index: 2; }

/* Зерно (статичное, Reduce-Motion-safe) */
.kv2-grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Ряды-факты с тонкими линиями (вместо карточек) ===== */
.kv2-rows { display: grid; }
.kv2-row {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline;
  padding: 13px 2px; border-top: 1px solid var(--line);
}
.kv2-row:last-child { border-bottom: 1px solid var(--line); }
.kv2-row .t { font-family: 'Onest', sans-serif; font-weight: 600; font-size: 16px; color: var(--ink); }
.kv2-row .d { font-size: 13.5px; color: var(--ink-3); line-height: 1.45; }

/* Чек-строка (тонкая, без плашек) */
.kv2-check { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; }

/* ===== Карточки только там, где интеракция ===== */
.kv2-card {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 14px;
}
.kv2-card-reco { border-top: 3px solid var(--teal); }

/* Тарифы */
.kv2-tariff { padding: 30px 28px; display: flex; flex-direction: column; position: relative; }
.kv2-tariff .fmt { font-family: 'Onest', sans-serif; font-weight: 700; font-size: 22px; }
.kv2-tariff .val { font-size: 40px; margin-top: 14px; color: var(--ink); }
.kv2-tariff .val .rub { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 500; color: var(--ink-3); margin-left: 6px; letter-spacing: 0; }

/* Аккордеон-заголовки чуть крупнее */
.kv2-faq-q { font-family: 'Onest', sans-serif; font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }

/* Цитата с тонкой линией (вместо карточки-callout) */
.kv2-quote { border-left: 2px solid var(--teal); padding: 6px 0 6px 24px; }

/* Фото-триптих встык */
.kv2-triptych { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3px; border-radius: 10px; overflow: hidden; }

/* Подпись под/на фото */
.kv2-caption {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3);
}

/* Тёмные секции */
.kv2-dark-sec { background: var(--kv2-dark); color: var(--kv2-cream-on-dark); }
.kv2-dark-sec .kv2-row { border-color: rgba(233,228,215,.14); }
.kv2-dark-sec .kv2-row .t { color: #F5F1E6; }
.kv2-dark-sec .kv2-row .d { color: rgba(233,228,215,.55); }

/* Карандашные пометки */
.kv2-pencil { color: #5A6168; }
.kv2-pencil.chalk { color: rgba(233,228,215,.75); }
.kv2-note {
  font-family: 'Caveat', cursive; font-weight: 600; color: #5A6168;
  transform: rotate(-2deg); display: inline-block; line-height: 1.1;
}
.kv2-note.chalk { color: rgba(233,228,215,.7); }
.kv2-note.teal { color: var(--teal-3); }

/* Прогр. карточка v2 — возраст на фото */
.kv2-agechip {
  position: absolute; left: 16px; bottom: 14px; z-index: 2;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: #fff;
}
.kv2-photoseat {
  position: absolute; left: 0; right: 0; bottom: 0; height: 45%; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(23,27,33,.62), transparent);
}

/* Шаги-строка (вместо flow-карточек) */
.kv2-steps {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: 0.03em; color: var(--ink-2);
}
.kv2-steps .arr { color: var(--teal); }

/* Reveal для v2 использует общую систему [data-anim] из tokens.css */

/* Reduce Motion: сцены и зерно статичны по построению — дополнительных правил не требуется */