/* Направление «Чистый» — швейцарская сетка.
   Только гротеск, плоские поверхности без теней, линии 1 px, радиус ~10, акцент — экономно
   (кнопки и линия пульса). Раздел решения: строка-шапка над окном приложения на всю ширину.
   Движение короткое и точное (~200 мс), без декора. Цвета — только токены: Пергамент и Ночь. */

[data-dir="chisty"] {
  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --display-w: 600;
  --display-track: -0.04em;
  --display-lh: 1.02;
  --display-scale: .9;
  --hero-scale: .94;
  --eyebrow-track: .14em;
  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 12px;
  --shadow: 0 0 0 0 transparent;
  --shadow-lg: 0 0 0 0 transparent;
  --glass-bg: var(--surface);
  --glass-line: var(--line);
  --glass-blur: 0px;
  --top-bg: var(--bg);
  --ease: cubic-bezier(.3, 0, .2, 1);
}
[data-dir="chisty"] body { background: var(--bg); }
/* em — как в base.css: прямой, цветом акцента (своё правило перебило бы .badge) */

/* ── Типографика ─────────────────────────────────────────────────── */
[data-dir="chisty"] .eyebrow { color: var(--muted); font: 500 11.5px/1.2 var(--font-mono); letter-spacing: .08em; }
[data-dir="chisty"] .eyebrow .ic { display: none; }
[data-dir="chisty"] .kpi-v, [data-dir="chisty"] .plate-v, [data-dir="chisty"] .mp-v { letter-spacing: -.03em; }
[data-dir="chisty"] .plate-v { font-weight: 600; }
[data-dir="chisty"] .plate-l, [data-dir="chisty"] .kpi-l, [data-dir="chisty"] .cn-n { font-family: var(--font-mono); font-weight: 500; letter-spacing: .06em; }

/* ── Кнопки и мелкие элементы: плоско ──────────────────────────── */
[data-dir="chisty"] .btn { font-weight: 600; box-shadow: none; }
[data-dir="chisty"] .btn:hover { border-color: var(--text); }
[data-dir="chisty"] .btn-pri:hover { background: color-mix(in srgb, var(--accent) 86%, var(--text)); border-color: transparent; }
[data-dir="chisty"] .btn:active { transform: none; }
[data-dir="chisty"] .chip:hover, [data-dir="chisty"] .chip.on { border-color: var(--text); background: transparent; }
[data-dir="chisty"] .mtog { background: transparent; }
[data-dir="chisty"] .mtog button.on { background: var(--surface-2); box-shadow: none; color: var(--text); }
[data-dir="chisty"] .glass { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ── Шапка: сплошная, линия 1 px ───────────────────────────────── */
[data-dir="chisty"] .top { -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid var(--line); }
[data-dir="chisty"] .top-links a:hover { background: transparent; color: var(--text); }

/* ── Движение: ~200 мс, без сдвигов ────────────────────────────── */
[data-dir="chisty"] .reveal { transform: none; transition: opacity .2s var(--ease); }
[data-dir="chisty"] .plate, [data-dir="chisty"] .outcome { animation: none; }
[data-dir="chisty"] .slide, [data-dir="chisty"] .slide[data-step="prev"] { transform: none; transition: opacity .2s var(--ease); }
[data-dir="chisty"] .case-card, [data-dir="chisty"] .pain, [data-dir="chisty"] .mini-case { transition: border-color .2s var(--ease), background-color .2s var(--ease); }

/* ═══ Главная ════════════════════════════════════════════════════ */
[data-dir="chisty"] .hero { padding: 64px 0 96px; }
[data-dir="chisty"] .hero-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 56px; align-items: end; }
[data-dir="chisty"] .hero-pulse { opacity: 1; height: 110px; }
[data-dir="chisty"] .hero-pulse .run { display: none; }
[data-dir="chisty"] .hero-pulse .base { opacity: .55; stroke-width: 1.5; }
[data-dir="chisty"] .qa-q::before { content: "→"; }
[data-dir="chisty"] .qa-a { font-weight: 600; letter-spacing: -.01em; }
[data-dir="chisty"] .qa-dots button { height: 2px; border-radius: 0; }
/* плашки героя — строгая колонка */
[data-dir="chisty"] .hero-plates { gap: 10px; }
[data-dir="chisty"] .hero-plates .plate {
  margin: 0 !important; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: none; padding: 16px 18px;
}
[data-dir="chisty"] .hp-ic { width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-2); }
[data-dir="chisty"] .hp-ic .ic { width: 16px; height: 16px; }

/* разделы главной: подпись в левой колонке, заголовок — в правых девяти */
[data-dir="chisty"] .sec { padding: 112px 0; }
[data-dir="chisty"] .sec-alt { background: var(--bg-2); }
[data-dir="chisty"] .sec-head {
  max-width: none; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: 32px; margin-bottom: 56px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
[data-dir="chisty"] .sec-head .eyebrow { grid-column: 1; grid-row: 1 / span 2; margin: 6px 0 0; align-self: start; }
[data-dir="chisty"] .sec-head .sec-title, [data-dir="chisty"] .sec-head .sec-lead { grid-column: 2; }
[data-dir="chisty"] .sec-lead { margin-top: 18px; }

[data-dir="chisty"] .pains { gap: 10px; }
[data-dir="chisty"] .pain { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
[data-dir="chisty"] .pain:hover { transform: none; border-color: var(--text); }
[data-dir="chisty"] .pain.on { background: var(--surface); border-color: var(--accent); }
[data-dir="chisty"] .pain-n { color: var(--muted); font-weight: 500; }
[data-dir="chisty"] .pain b { font-weight: 600; letter-spacing: -.01em; }
[data-dir="chisty"] .pain-check { border-width: 1.5px; }

[data-dir="chisty"] .svcs { gap: 10px; }
[data-dir="chisty"] .svc { background: var(--surface); border: 1px solid var(--line); box-shadow: none; padding: 28px; }
[data-dir="chisty"] .svc-i { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); }
[data-dir="chisty"] .svc-i .ic { width: 20px; height: 20px; }
[data-dir="chisty"] .svc-n { font-family: var(--font-mono); font-weight: 500; letter-spacing: .06em; font-size: 12px; }
[data-dir="chisty"] .svc-s { letter-spacing: -.03em; line-height: 1.1; }
[data-dir="chisty"] .svc li .ic { color: var(--text-2); }
[data-dir="chisty"] .svc-demo { background: var(--bg); }

[data-dir="chisty"] .cases { gap: 10px; }
[data-dir="chisty"] .case-card { background: var(--surface); box-shadow: none; }
[data-dir="chisty"] .case-card:hover { transform: none; box-shadow: none; border-color: var(--text); }
[data-dir="chisty"] .cc-kind { color: var(--muted); font-family: var(--font-mono); font-weight: 500; letter-spacing: .06em; }
[data-dir="chisty"] .cc-kind .ic { display: none; }
[data-dir="chisty"] .cc-name { letter-spacing: -.035em; }
[data-dir="chisty"] .cc-prev { background: var(--bg); }
[data-dir="chisty"] .cc-go { color: var(--text); }

/* шаги — без карточек, с линией сверху */
[data-dir="chisty"] .steps { gap: 32px; }
[data-dir="chisty"] .step { background: transparent; border: 0; border-top: 2px solid var(--text); border-radius: 0; box-shadow: none; padding: 18px 0 0; }
[data-dir="chisty"] .step-n { font: 500 12px var(--font-mono); letter-spacing: .06em; color: var(--muted); margin-bottom: 26px; }

/* последний шаг — по левому краю */
[data-dir="chisty"] .final { text-align: left; }
[data-dir="chisty"] .final .sec-title { margin: 0; max-width: 980px; }
[data-dir="chisty"] .final .sec-lead { margin: 20px 0 32px; }
[data-dir="chisty"] .final .hero-cta { justify-content: flex-start; }
[data-dir="chisty"] .foot { border-top: 1px solid var(--line); }

/* ═══ Страницы решения ═══════════════════════════════════════════ */
/* навигация по разделам — подчёркнутые вкладки */
[data-dir="chisty"] .case-nav { background: var(--bg); border-bottom: 1px solid var(--line); }
[data-dir="chisty"] .case-nav-in { gap: 0; padding-block: 0; }
[data-dir="chisty"] .cn-item {
  border: 0; border-radius: 0; background: transparent; box-shadow: none;
  padding: 15px 2px 13px; margin-right: 22px; border-bottom: 2px solid transparent; color: var(--muted);
}
[data-dir="chisty"] .cn-item:hover { background: transparent; color: var(--text); }
[data-dir="chisty"] .cn-item.on { background: transparent; box-shadow: none; border: 0; border-bottom: 2px solid var(--text); color: var(--text); }
[data-dir="chisty"] .cn-item.on .cn-n { color: var(--text); }
[data-dir="chisty"] .cn-item.done .cn-n { color: var(--muted); opacity: 1; }
[data-dir="chisty"] .case-foot { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); border-top: 1px solid var(--line); }
[data-dir="chisty"] .case-prog { gap: 2px; }
[data-dir="chisty"] .case-prog a { height: 2px; border-radius: 0; }
[data-dir="chisty"] .case-prog a.on { background: var(--text); }

/* обложка — плоские плашки ровной сеткой */
[data-dir="chisty"] .plates { gap: 10px; }
[data-dir="chisty"] .plates .plate { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
[data-dir="chisty"] .plates .plate:nth-child(2) { grid-row: auto; }

/* раздел: шапка-строка (заголовок слева, вводный абзац справа), под ней окно на всю ширину */
@media (min-width: 1081px) {
  [data-dir="chisty"] .slide-sec .sec-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 0; align-items: start;
  }
  [data-dir="chisty"] .slide-sec .slide-text { display: contents; }
  [data-dir="chisty"] .slide-sec .slide-text > * { min-width: 0; }
  [data-dir="chisty"] .slide-sec .eyebrow { grid-column: 1 / 8; grid-row: 1; margin-bottom: 14px; }
  [data-dir="chisty"] .slide-sec .slide-title { grid-column: 1 / 8; grid-row: 2; margin: 0; }
  [data-dir="chisty"] .slide-sec .slide-lead { grid-column: 8 / 13; grid-row: 1 / 3; align-self: end; margin: 0; font-size: 16px; }
  [data-dir="chisty"] .slide-sec .slide-points {
    grid-column: 1 / 10; grid-row: 3; margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--line);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: 24px; row-gap: 10px;
  }
  [data-dir="chisty"] .slide-sec .try { grid-column: 10 / 13; grid-row: 3; margin-top: 26px; align-self: start; }
  [data-dir="chisty"] .slide-sec .slide-device { grid-column: 1 / -1; grid-row: 4; margin-top: 28px; }
  [data-dir="chisty"] .slide-sec .app { height: clamp(560px, calc(100vh - 170px), 720px); }
}
[data-dir="chisty"] .slide-points .ic { color: var(--text-2); }
[data-dir="chisty"] .slide-points li { font-size: 14.5px; }
[data-dir="chisty"] .try { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: 13.5px; }
[data-dir="chisty"] .try b { color: var(--text); }
[data-dir="chisty"] .try-dot { width: 8px; height: 8px; }

/* окно приложения — плоское, 1 px */
[data-dir="chisty"] .app { border-radius: var(--radius-lg); box-shadow: none; border-color: var(--line); }
[data-dir="chisty"] .app.flash { animation: none; border-color: var(--accent); }
[data-dir="chisty"] .app-bar { background: var(--bg); }
[data-dir="chisty"] .app-dots { display: none; }
[data-dir="chisty"] .app-title { text-align: left; font: 500 11.5px var(--font-mono); letter-spacing: .04em; }
[data-dir="chisty"] .app-live { color: var(--muted); font-family: var(--font-mono); font-weight: 500; letter-spacing: .06em; }
[data-dir="chisty"] .app-live i { background: var(--accent); animation: none; }
[data-dir="chisty"] .app-side { background: var(--bg); }
/* пункты меню окна: перенос по слогам, а не посреди слова (в base.css — overflow-wrap: anywhere) */
[data-dir="chisty"] .app-nav-i { gap: 8px; padding: 8px; font-size: 13px; }
[data-dir="chisty"] .app-nav-i span { overflow-wrap: normal; -webkit-hyphens: auto; hyphens: auto; }
[data-dir="chisty"] .app-nav-i.on { box-shadow: none; background: var(--surface-2); font-weight: 600; }
[data-dir="chisty"] .app-nav-i.on .ic { color: var(--text); }

/* итог */
[data-dir="chisty"] .outcomes { gap: 32px; }
[data-dir="chisty"] .outcome { background: transparent; border: 0; border-top: 2px solid var(--text); border-radius: 0; box-shadow: none; padding: 18px 0 0; }
[data-dir="chisty"] .outcome-i { width: auto; height: auto; background: transparent; color: var(--accent); border-radius: 0; margin-bottom: 14px; }
[data-dir="chisty"] .mini-case { box-shadow: none; }
[data-dir="chisty"] .mini-case:hover { transform: none; border-color: var(--text); }
[data-dir="chisty"] .mc-i { background: var(--surface-2); color: var(--text); }
[data-dir="chisty"] .final-next .muted { font-family: var(--font-mono); font-weight: 500; letter-spacing: .06em; }

/* ═══ Узкие экраны ═══════════════════════════════════════════════ */
@media (max-width: 900px) {
  [data-dir="chisty"] .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  [data-dir="chisty"] .sec-head { grid-template-columns: minmax(0, 1fr); }
  [data-dir="chisty"] .sec-head .eyebrow, [data-dir="chisty"] .sec-head .sec-title, [data-dir="chisty"] .sec-head .sec-lead { grid-column: 1; grid-row: auto; }
  [data-dir="chisty"] .sec-head .eyebrow { margin-bottom: 14px; }
  [data-dir="chisty"] .steps { gap: 28px 24px; }
}
@media (max-width: 600px) {
  [data-dir="chisty"] .sec { padding: 72px 0; }
  [data-dir="chisty"] .outcomes { gap: 24px; }
}