/* ───────────────────────────────────────────────────────────────────
   APPLEPIE — общие стили внутренних страниц (услуги, журнал, кейсы).
   Токены те же, что в index.html. Главная остаётся самодостаточной:
   у неё свой инлайн-CSS, этот файл её не касается.

   Правила доступности зашиты в токены и не подлежат «подкручиванию на глаз»:
     --muted  = 61% от --fg  → 4.52 на beige, 6.67 на black
     --red    = #E60000      → 4.53 на beige
     olive    НЕ фон под текст, только акцент на чёрном (8.78)
   ─────────────────────────────────────────────────────────────────── */

@font-face{font-family:"Zalando Sans";src:url("/fonts/ZalandoSans.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/Inter-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/Inter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --olive:#BFC200; --black:#1D1D1C; --beige:#FEF8E4; --red:#E60000;
  --head:"Zalando Sans", ui-sans-serif, system-ui, sans-serif;
  --body:"Inter", ui-sans-serif, system-ui, sans-serif;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;
  --pad:clamp(20px,3vw,56px);
  --maxw:1180px;
  --bg:var(--beige); --fg:var(--black); --accent:var(--red);
  --muted:color-mix(in srgb, var(--fg) 65%, transparent);  /* 61% = 4.52 — запас 0.02, слишком тонко */
  --rule:color-mix(in srgb, var(--fg) 15%, transparent);
  --rule-2:color-mix(in srgb, var(--fg) 30%, transparent);
}
.t-ink{--bg:var(--black); --fg:var(--beige); --accent:var(--olive);
  --muted:color-mix(in srgb, var(--fg) 65%, transparent);  /* 61% = 4.52 — запас 0.02, слишком тонко */
  --rule:color-mix(in srgb, var(--fg) 15%, transparent);
  --rule-2:color-mix(in srgb, var(--fg) 30%, transparent);}

*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{background:var(--beige); color:var(--black); font-family:var(--body);
  font-weight:300; line-height:1.6; -webkit-font-smoothing:antialiased}
img{display:block; max-width:100%; height:auto}
::selection{background:var(--red); color:var(--beige)}

/* ── фокус: виден всегда, это не косметика ── */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:2px}

.skip{position:fixed; top:8px; left:8px; z-index:100; transform:translateY(-200%);
  background:var(--black); color:var(--beige); font-family:var(--mono); font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; padding:12px 18px; border-radius:999px; text-decoration:none}
.skip:focus{transform:translateY(0)}

/* ── оболочка ── */
.shell{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.sec{background:var(--bg); color:var(--fg); padding-block:clamp(48px,7vw,104px); border-top:1px solid var(--rule)}
.sec--tight{padding-block:clamp(32px,4vw,56px)}
.sec--first{border-top:0}

/* ── шапка: один в один с главной ──
   Нумерация, венские часы, переключатель языка и CTA. Цвета берутся
   из --nav-fg с запасным значением: на внутренних страницах шапка всегда
   светлая, но переменная оставлена ради совместимости с главной. */
.nav{position:sticky; top:0; z-index:40; background:var(--beige);
  border-bottom:1px solid color-mix(in srgb, var(--black) 14%, transparent); padding-block:0}
.nav .shell{max-width:1720px}
.nav-in{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; height:60px}
.brand{display:flex; align-items:center; color:var(--black)}
.brand svg{height:clamp(26px,3.2vw,34px); width:auto; display:block}

.nav-links{display:flex; gap:26px; justify-content:center}
.nav-links a{font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--black); text-decoration:none; transition:color .2s}
.nav-links a:hover{color:var(--red)}
.nav-links a i{color:color-mix(in srgb, var(--black) 61%, transparent);
  font-style:normal; margin-right:5px; transition:color .2s}   /* 4.52 ✅ */
.nav-links a:hover i{color:var(--red)}
.nav-links a[aria-current="page"]{color:var(--red)}
.nav-links a[aria-current="page"] i{color:var(--red)}

.nav-right{display:flex; justify-content:flex-end; align-items:center; gap:14px}
.clock{font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:color-mix(in srgb, var(--black) 61%, transparent)}
.nav-cta{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid currentColor; padding:9px 15px; border-radius:999px;
  text-decoration:none; color:var(--black); transition:.2s; white-space:nowrap}
.nav-cta:hover{background:var(--black); color:var(--beige)}
.nav-lang{padding-inline:11px; border-color:color-mix(in srgb, var(--black) 34%, transparent)}
.nav-lang:hover{border-color:currentColor}

@media (max-width:940px){
  .nav-links{display:none}
  .clock{display:none}
  .nav-in{grid-template-columns:1fr auto}
  .nav-cta{font-size:10px; letter-spacing:.08em; padding:8px 12px}
  .nav-lang{padding-inline:9px}
}

/* ── хлебные крошки ── */
.crumbs{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.crumbs a{color:var(--muted); text-decoration:underline; text-underline-offset:3px}
.crumbs a:hover{color:var(--black)}
.crumbs li+li::before{content:"/"; margin-right:8px; color:var(--rule-2)}

/* ── типографика ── */
.tick{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
h1{font-family:var(--head); font-weight:800; text-transform:uppercase; letter-spacing:-.03em;
  line-height:.9; font-size:clamp(38px,6.4vw,86px); margin-block:12px 20px}
h2{font-family:var(--head); font-weight:800; text-transform:uppercase; letter-spacing:-.02em;
  line-height:1; font-size:clamp(24px,3.2vw,40px); margin-block:0 16px}
h3{font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(16px,1.6vw,20px); margin-block:0 10px}
p,li{max-width:68ch}
p{margin-block:0 16px}
.lead{font-size:clamp(17px,1.5vw,21px); line-height:1.5; max-width:56ch; color:var(--fg)}
strong{font-weight:400}
a{color:inherit}
.prose a:not(.btn){color:var(--accent); text-decoration:underline; text-underline-offset:3px}
/* .prose a перекрашивал кнопки в акцент поверх тёмной заливки: красный
   на чёрном = 4.22, ниже нормы. Кнопки исключены из правила. */
.prose ul,.prose ol{margin:0 0 16px 20px}
.prose li{margin-bottom:7px}
.prose h2{margin-top:clamp(32px,4vw,52px)}
.prose h3{margin-top:24px}

/* ── кнопки ── */
.btn{display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; padding:15px 26px; border-radius:999px; text-decoration:none;
  border:1px solid currentColor; background:var(--black); color:var(--beige); transition:opacity .2s}
.btn:hover{opacity:.85}
.btn--ghost{background:transparent; color:var(--fg)}
.t-ink .btn{background:var(--beige); color:var(--black)}
.t-ink .btn--ghost{background:transparent; color:var(--beige)}
.btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}
@media (max-width:560px){ .btns{flex-direction:column; align-items:stretch} .btn{text-align:center} }

/* ── сетки и карточки ── */
.grid{display:grid; gap:18px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){ .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .grid--2,.grid--3,.grid--4{grid-template-columns:1fr} }

.card{border:1px solid var(--rule-2); border-radius:14px; padding:clamp(18px,2vw,26px); background:transparent}
.card p:last-child{margin-bottom:0}
.card .tick{display:block; margin-bottom:10px}

/* ── ступени услуги ── */
.tier{border:1px solid var(--rule-2); border-radius:14px; padding:clamp(18px,2vw,26px); display:flex; flex-direction:column}
.tier--lead{border-color:var(--fg); border-width:2px}
.tier .step{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:10px}
.tier ul{list-style:none; margin:14px 0 0}
.tier li{position:relative; padding-left:18px; margin-bottom:8px; font-size:15px; max-width:none}
.tier li::before{content:""; position:absolute; left:0; top:.62em; width:7px; height:1px; background:var(--accent)}
.tier .price{margin-top:auto; padding-top:16px; border-top:1px solid var(--rule); font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}

/* ── цифры исследования ── */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px}
.stat{border:1px solid var(--rule-2); border-radius:14px; padding:20px}
.stat b{display:block; font-family:var(--head); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(34px,4.6vw,58px); line-height:.95; margin-bottom:6px}
.stat span{font-size:14px; color:var(--muted); display:block; max-width:none}

/* ── таблица ── */
.tw{overflow-x:auto; margin-bottom:18px}
table{border-collapse:collapse; width:100%; min-width:480px; font-size:15px}
th,td{text-align:left; padding:11px 12px; border-bottom:1px solid var(--rule)}
th{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:400}
td{max-width:none}

/* ── FAQ ── */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer; padding:18px 0; font-family:var(--head); font-weight:700;
  text-transform:uppercase; letter-spacing:-.01em; font-size:clamp(15px,1.5vw,18px);
  list-style:none; display:flex; justify-content:space-between; gap:16px; align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--mono); color:var(--accent); flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq .a{padding-bottom:18px}
.faq .a p:last-child{margin-bottom:0}

/* ── заметка / дисклеймер ── */
.note{border:1px dashed var(--rule-2); border-radius:12px; padding:16px 18px; font-size:14px; color:var(--muted)}
.note strong{color:var(--fg)}

/* ── список статей ── */
.posts{list-style:none; border-top:1px solid var(--rule)}
.posts li{border-bottom:1px solid var(--rule); max-width:none}
.posts a{display:grid; grid-template-columns:120px 1fr; gap:20px; padding:22px 0; text-decoration:none}
.posts a:hover h2{color:var(--red)}
.posts time{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.posts h2{font-size:clamp(18px,2vw,24px); margin-bottom:6px; transition:color .2s}
.posts p{margin:0; font-size:15px; color:var(--muted)}
@media (max-width:640px){ .posts a{grid-template-columns:1fr; gap:8px} }

.empty{border:1px dashed var(--rule-2); border-radius:14px; padding:clamp(24px,4vw,44px); text-align:center}
.empty p{margin-inline:auto}

/* ── подвал ── */
.foot{background:var(--black); color:var(--beige); padding-block:clamp(40px,6vw,72px)}
.foot .mk{font-family:var(--head); font-weight:800; text-transform:uppercase; letter-spacing:-.02em;
  line-height:.95; font-size:clamp(24px,3.4vw,44px); max-width:18ch}
.foot-mail{display:inline-block; margin-top:22px; font-family:var(--mono);
  font-size:clamp(14px,1.4vw,17px); color:var(--beige); text-decoration:underline;
  text-underline-offset:4px; transition:color .2s}
.foot-mail:hover{color:var(--olive)}
.foot .legal{margin-top:clamp(28px,4vw,48px); padding-top:18px; border-top:1px solid color-mix(in srgb,var(--beige) 22%,transparent);
  display:flex; flex-wrap:wrap; gap:8px 20px; font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:color-mix(in srgb,var(--beige) 72%,transparent)}
.foot .legal a{color:inherit; text-decoration:underline; text-underline-offset:3px}
.foot .legal a:hover{color:var(--olive)}

/* ═══════════════ ГРАФИЧЕСКИЙ ЯЗЫК ГЛАВНОЙ ═══════════════
   Внутренние страницы были суше главной: карточки, таблицы, текст.
   Здесь переносим три приёма, которыми держится главная —
   нумерованная плашка с линией, бегущая строка и крупные цифры. */

/* ── плашка секции: номер + подпись + линия во всю ширину ── */
.eyebrow{display:flex; align-items:center; gap:16px; font-family:var(--mono);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:clamp(20px,3vw,36px)}
.eyebrow .idx{color:var(--fg)}
.eyebrow .line{flex:1; height:1px; background:var(--rule-2)}
.t-ink .eyebrow .idx{color:var(--olive)}   /* olive-on-black = 8.78 ✅ */

/* ── бегущая строка как разделитель, ровно как на главной ── */
.marquee{background:var(--black); color:var(--beige); overflow:hidden; padding-block:16px}
.marquee-row{display:flex; width:max-content; animation:slide 40s linear infinite}
.marquee:hover .marquee-row{animation-play-state:paused}
.marquee span{font-family:var(--head); font-weight:700; text-transform:uppercase;
  font-size:clamp(18px,2vw,28px); letter-spacing:-.01em; padding-inline:28px;
  white-space:nowrap; display:flex; align-items:center; gap:28px}
.marquee em{font-style:normal; color:var(--olive)}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){ .marquee-row{animation:none} }

/* ── график: горизонтальные полосы в брендовых цветах ── */
.chart{margin-block:clamp(20px,3vw,32px)}
.chart-row{display:grid; grid-template-columns:minmax(140px,26%) 1fr auto;
  gap:14px; align-items:center; padding-block:9px; border-bottom:1px solid var(--rule)}
.chart-row:last-child{border-bottom:0}
.chart-label{font-size:14px; line-height:1.3; max-width:none}
.chart-track{height:14px; background:color-mix(in srgb,var(--fg) 9%,transparent); border-radius:999px; overflow:hidden}
.chart-bar{height:100%; border-radius:999px; background:var(--fg)}
.chart-bar--accent{background:var(--accent)}
.chart-val{font-family:var(--mono); font-size:13px; letter-spacing:.04em; min-width:4.2em; text-align:right}
.chart-legend{display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:14px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.chart-legend i{display:inline-block; width:16px; height:8px; border-radius:999px;
  background:var(--fg); margin-right:7px; vertical-align:middle; font-style:normal}
.chart-legend .accent i{background:var(--accent)}
@media (max-width:640px){
  .chart-row{grid-template-columns:1fr auto; row-gap:6px}
  .chart-track{grid-column:1 / -1; order:3}
}

/* ── крупная цифра-акцент ── */
.figure-big{font-family:var(--head); font-weight:800; letter-spacing:-.04em;
  line-height:.88; font-size:clamp(56px,9vw,132px)}
.figure-big em{font-style:normal; color:var(--accent)}

/* ─────────────────────────  ИНСТРУМЕНТ ПРОВЕРКИ  ─────────────────────
   Самопроверка по BaFG. Страница работает без JS: без него видны все
   вопросы и пояснения, просто без подсчёта. Это не запасной вариант,
   а обязательное условие — мы продаём доступность.              */

.tool{margin:clamp(28px,4vw,48px) 0}
.tool-step{border:1px solid var(--rule-2); padding:clamp(18px,2.6vw,30px); margin-bottom:18px; background:color-mix(in srgb, var(--fg) 3%, transparent)}
.tool-step > legend{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); padding:0 8px; margin-left:-8px}
.tool-q{margin:0 0 clamp(20px,2.4vw,28px)}
.tool-q:last-child{margin-bottom:0}
.tool-q h3{font-family:var(--head); font-weight:800; text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(16px,1.5vw,20px); line-height:1.15; margin:0 0 6px}
.tool-rate{font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--accent); margin:0 0 8px}
.tool-q p{margin:0 0 12px; color:var(--muted); font-size:clamp(14px,1.05vw,15px); line-height:1.6}
.tool-opts{display:flex; flex-wrap:wrap; gap:8px}
.tool-opts label{display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border:1px solid var(--rule-2); padding:8px 14px; font-family:var(--mono); font-size:12px;
  letter-spacing:.06em; text-transform:uppercase; line-height:1}
.tool-opts label:hover{border-color:var(--fg)}
/* Фокус рисуем на самой рамке: обводка вокруг спрятанного input не видна. */
.tool-opts input{position:absolute; opacity:0; width:1px; height:1px}
.tool-opts input:focus-visible + span{outline:2px solid var(--accent); outline-offset:3px}
.tool-opts label:has(input:checked){background:var(--fg); color:var(--bg); border-color:var(--fg)}

.tool-out{border:1px solid var(--fg); padding:clamp(20px,3vw,34px); margin-top:24px}
.tool-out h2{margin-top:0}
.tool-verdict{font-family:var(--head); font-weight:800; text-transform:uppercase;
  font-size:clamp(22px,3.4vw,38px); line-height:1.05; letter-spacing:-.02em; margin:0 0 10px}
.tool-verdict em{font-style:normal; color:var(--accent)}
.tool-note{font-size:clamp(14px,1.05vw,15px); color:var(--muted); line-height:1.65}
.tool-list{list-style:none; padding:0; margin:18px 0 0}
.tool-list li{padding:10px 0; border-top:1px solid var(--rule); font-size:clamp(14px,1.05vw,15px)}
.tool-list li b{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); display:block; margin-bottom:3px}
.tool-consent{display:flex; gap:10px; align-items:flex-start; margin:20px 0 16px;
  font-size:13px; line-height:1.55; color:var(--muted)}
.tool-consent input{margin-top:3px; flex:0 0 auto; width:16px; height:16px; accent-color:var(--accent)}
@media (max-width:600px){ .tool-opts label{flex:1 1 auto; justify-content:center} }

/* ─────────────────────────────  КЕЙСЫ  ─────────────────────────────── */
.case-meta{display:flex; flex-wrap:wrap; gap:0 clamp(24px,3vw,44px); margin:clamp(24px,3vw,36px) 0 0;
  padding-top:18px; border-top:1px solid var(--rule-2)}
.case-meta div{padding:6px 0}
.case-meta dt{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:3px}
.case-meta dd{margin:0; font-size:clamp(14px,1.05vw,15px)}
.case-ba{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1px;
  background:var(--rule-2); border:1px solid var(--rule-2); margin:clamp(24px,3vw,36px) 0}
.case-ba > div{background:var(--bg); padding:clamp(16px,2vw,24px)}
.case-ba dt{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.case-ba dd{margin:0; font-family:var(--head); font-weight:800; font-size:clamp(20px,2.6vw,30px); line-height:1; letter-spacing:-.02em}
.case-ba dd s{text-decoration:none; color:var(--muted); font-size:.58em; display:block; margin-bottom:5px; font-weight:400}
.case-ba dd em{font-style:normal; color:var(--accent)}
.case-ba p{margin:8px 0 0; font-size:12px; color:var(--muted); line-height:1.5}
.cases{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:clamp(16px,2vw,26px); margin-top:clamp(24px,3vw,38px)}
.case-card{display:block; text-decoration:none; color:inherit; border:1px solid var(--rule-2); padding:clamp(20px,2.4vw,30px)}
.case-card:hover{border-color:var(--fg)}
.case-card .k{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:10px}
.case-card h3{font-family:var(--head); font-weight:800; text-transform:uppercase; letter-spacing:-.015em;
  font-size:clamp(18px,2vw,24px); line-height:1.08; margin:0 0 8px}
.case-card p{margin:0; color:var(--muted); font-size:clamp(13px,1vw,14px); line-height:1.6}
.case-card .n{display:block; margin-top:14px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:var(--fg)}
.case-soon{border:1px dashed var(--rule-2); padding:clamp(20px,2.4vw,30px); color:var(--muted); font-size:14px; line-height:1.6}