/* ============================================================
   brony — лендинг
   Ноль сборки: страница и её стили — два файла, чтобы правил их тот,
   кто пишет тексты, а не тот, кто держит тулчейн.

   Макет: Figma «brony-app», узел 65:2239. Палитра оттуда же — серая
   шкала Tailwind, тёмный #030712 как чернила и как фон тёмных полос.

   Имена токенов сохранены от прежней версии: на них опирается справка
   (/docs) и её docs.css. Поменялись значения и компоненты, не контракт.
   ============================================================ */
:root{
  /* цвет */
  --ink:#030712;            /* gray-950 — и текст, и фон тёмных секций */
  --muted:#6b7280;          /* gray-500 — 4.83:1 на белом, годится от 16px */
  --faint:#9ca3af;          /* gray-400 — только крупный или неважный текст */
  --line:#e5e7eb;           /* gray-200 */
  --line-soft:#f3f4f6;      /* gray-100 */
  --dark:#030712;
  --brand:#1d4ed8;          /* 7.0:1 с белым — ссылки и фокус */
  --surface:#fff;
  --wash:#f9fafb;           /* gray-50 */
  --on-dark:#f3f4f6;
  --on-dark-muted:#9ca3af;

  /* отступы */
  --space-xs:4px; --space-sm:8px; --space-md:24px; --space-lg:32px;
  --space-xl:48px; --space-2xl:64px; --space-3xl:96px;

  --r:16px;
  --r-sm:10px;            /* мелкие плитки: у 16px на низкой строке вид пилюли */
  --tap:44px;               /* минимальная зона нажатия */
  --bar:84px;               /* высота шапки — из макета */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--surface);color:var(--ink);
  font-family:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit}

/* Фокус виден всегда и везде. Его не было вовсе — самая серьёзная находка
   первого аудита: страницей нельзя было пользоваться с клавиатуры вслепую. */
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
.dark :focus-visible,.band-dark :focus-visible{outline-color:#fff}

/* Липкая шапка перекрывала бы заголовок, к которому ведёт якорь. */
[id]{scroll-margin-top:calc(var(--bar) + 8px)}

.wrap{max-width:1424px;margin:0 auto}
.pad{padding-left:var(--space-md);padding-right:var(--space-md)}
@media(min-width:768px){.pad{padding-left:var(--space-xl);padding-right:var(--space-xl)}}
.rule{border-top:1px solid var(--line)}
.small{font-size:.8125rem;color:var(--muted)}

/* ── типографика ─────────────────────────────────────────────── */
.display{
  font-size:clamp(2rem,4.6vw,4rem);line-height:1.12;letter-spacing:-.03em;
  font-weight:500;margin:0;text-wrap:balance;
}
.h2{
  font-size:clamp(1.75rem,3.4vw,3rem);line-height:1.15;letter-spacing:-.025em;
  font-weight:500;margin:0;text-wrap:balance;
}
.h3{font-size:1.25rem;line-height:1.3;font-weight:600;margin:0}
.lede{font-size:clamp(1.125rem,1.6vw,1.5rem);line-height:1.5;color:var(--ink);margin:0}
.eyebrow{
  font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);font-weight:500;margin:0;
}

/* ── кнопки ──────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:var(--tap);padding:.75rem 1.25rem;border-radius:10px;
  font-size:.9375rem;font-weight:600;text-decoration:none;border:1px solid transparent;
  white-space:nowrap;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#1f2937}
.btn-light{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-light:hover{background:var(--wash)}
.btn-ghost{background:transparent;color:var(--ink);padding-left:.75rem;padding-right:.75rem}
.btn-ghost:hover{background:var(--wash)}
.btn-sm{min-height:38px;padding:.5rem 1rem;font-size:.875rem}

/* ── шапка ───────────────────────────────────────────────────── */
header{
  position:sticky;top:0;z-index:40;background:rgba(255,255,255,.88);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);
}
.bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);height:var(--bar)}
/* Связка целиком: ширину задаёт сам рисунок, мы указываем только высоту.
   Ссылка остаётся ростом с тап-цель, а не с буквы. */
.logo{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none}
.logo svg{height:30px;width:auto;display:block}
.nav{display:none;gap:var(--space-lg);font-size:.9375rem}
@media(min-width:1024px){.nav{display:flex}}
.nav a{text-decoration:none;color:var(--ink);padding:.25rem 0}
.nav a:hover{color:var(--brand)}
.bar-end{display:flex;align-items:center;gap:.25rem}
/* На телефоне в шапке помещается имя и одна кнопка. Остальное ломалось по
   словам — «Contact / Us» в две строки. Эти две ссылки есть и в подвале. */
@media(max-width:639px){.bar-end .btn-ghost{display:none}}

/* Три языка рядом, а не в выпадающем списке: их три, и выбор виден сразу. */
.lang{display:flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--line);border-radius:999px}
.lang button{
  min-width:40px;min-height:32px;padding:0 .5rem;border:0;border-radius:999px;
  background:transparent;color:var(--muted);font:inherit;font-size:.8125rem;font-weight:600;
  cursor:pointer;
}
.lang button:hover{color:var(--ink)}
.lang button[aria-pressed="true"]{background:var(--ink);color:#fff}
/* Пальцу нужно 44px, мыши хватает 32. Считаем по указателю, а не по
   ширине окна: планшет широкий, а трогают его тем же пальцем. */
@media(pointer:coarse){.lang button{min-width:var(--tap);min-height:var(--tap)}}

/* ── обложка ─────────────────────────────────────────────────── */
.hero{
  position:relative;isolation:isolate;
  min-height:520px;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:var(--space-3xl) 0 var(--space-2xl);
  /* Фотография неба ложится сюда переменной, а не тегом: заголовок читается
     сразу, не дожидаясь мегабайта. Нарисованное небо остаётся под ней — его
     видно ту долю секунды, пока снимок летит, и вместо белой вспышки
     получается небо. */
  --hero-image:url("/img/hero/background.jpg");
  background:
    radial-gradient(120% 90% at 50% 0%,#fff 0%,rgba(255,255,255,0) 55%),
    linear-gradient(180deg,#bfe4f5 0%,#dff0fa 55%,#fff 100%);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:var(--hero-image);background-size:cover;background-position:center;
}
/* Шире, чем в макете: там заголовок был в три строки и 1220px держали
   длину строки. Теперь строка одна, и поле отмеряется по ней. */
.hero-inner{max-width:1320px;margin:0 auto}
/* Строка короткая и должна остаться одной: перенос ставится по ширине, а не
   по смыслу, и «business management» рвалось пополам. Кегль подобран по самой
   длинной из трёх — русской: при 52px ей нужно 1254px, и она не влезала.
   На телефоне строка переносится сама, и там это уже не лозунг в две части,
   а обычный заголовок. */
.hero .display{margin-bottom:var(--space-xl);font-size:clamp(1.75rem,3.4vw,3rem)}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--space-sm);justify-content:center}

/* полоса логотипов клиентов + два счётчика */
.proof{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--space-md);padding:var(--space-md) 0;
}
.proof-logos{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-xl);opacity:.75}
.proof-logos img{height:32px;width:auto}
.proof-stats{display:grid;gap:.25rem;font-size:.8125rem;color:var(--muted)}
.proof-stats span{display:flex;align-items:center;gap:.5rem}
.proof-stats svg{width:16px;height:16px;flex:none}

/* ── широкое заявление ───────────────────────────────────────── */
.statement{padding-block:var(--space-3xl)}
.statement p{max-width:1142px;font-size:clamp(1.25rem,2.2vw,2rem);line-height:1.45;margin:0;letter-spacing:-.01em}

/* ── тёмная полоса ───────────────────────────────────────────── */
.band-dark{background:var(--ink);color:var(--on-dark);padding:var(--space-3xl) 0}
.band-dark .h2{color:#fff}
.band-dark .eyebrow{color:var(--on-dark-muted)}

/* карточки направлений
   В покое все четыре одной ширины; под курсором та, на которую смотрят,
   раздвигает остальные. Растёт flex-grow, а не width, — тогда сумма долей
   всегда равна строке и соседи не выпадают из ряда. */
.cards{display:grid;gap:var(--space-md);margin-top:var(--space-xl);grid-template-columns:1fr}
@media(min-width:700px){.cards{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){
  .cards{display:flex;flex-wrap:nowrap}
  .card{flex:1 1 0;min-width:0;transition:flex-grow .45s cubic-bezier(.22,.61,.36,1)}
  .cards:hover .card{flex-grow:.82}
  .cards .card:hover,.cards .card:focus-within{flex-grow:2.6}
}
@media(prefers-reduced-motion:reduce){.card{transition:none}}
.card{
  position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r);
  min-height:320px;display:flex;flex-direction:column;justify-content:space-between;
  padding:var(--space-md);color:#fff;background:#111827;
}
@media(min-width:1100px){.card{min-height:500px}}
.card img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.card::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(3,7,18,.15) 0%,rgba(3,7,18,.72) 100%);
}
.card h3{
  font-size:clamp(1.25rem,2vw,2rem);font-weight:600;line-height:1.1;margin:0;
  letter-spacing:-.02em;align-self:flex-start;
}
/* Подпись есть у каждой карточки. */
.card-foot{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--space-md);width:100%;
}
/* Подпись раньше проявлялась только на раскрытой карточке — тогда она была
   одна и в узкой карточке не помещалась. Теперь подпись есть у каждой и в
   покое читается, поэтому гасить соседние не за что: при наведении на одну
   три остальных теряли бы текст, и это выглядело бы сбоем, а не замыслом. */
.card-foot b{display:block;font-size:clamp(1rem,1.4vw,1.5rem);font-weight:600}
.card-foot span{display:block;font-size:.8125rem;color:rgba(255,255,255,.72);margin-top:.35rem}
.card-foot a{font-size:.8125rem;font-weight:600;color:#fff;text-underline-offset:4px;white-space:nowrap}

/* ── миссия и видение ────────────────────────────────────────── */
.cols{display:grid;gap:var(--space-xl);padding-block:var(--space-3xl)}
@media(min-width:900px){.cols{grid-template-columns:1fr 1fr;gap:var(--space-2xl)}}
.cols p{margin:var(--space-md) 0 0;font-size:1.125rem;line-height:1.55;color:var(--ink)}

/* ── отзыв ─────────────────────────────────────────────────────
   Во всю ширину окна, как в макете: снимок работает полосой, а не
   картинкой в рамке. А текст внутри остаётся на общей сетке — не своими
   числами, а теми же .wrap и .pad, что у остальных секций: сетка должна
   быть описана в одном месте, иначе она расходится молча. */
.testimonials{padding-block:var(--space-3xl)}
.quote{
  position:relative;isolation:isolate;overflow:hidden;
  background:#111827;color:#fff;padding:var(--space-2xl) 0;
}
@media(min-width:900px){
  .quote{padding:var(--space-3xl) 0}
  /* Во всю ширину полоса вышла слишком плоской: снимок вертикальный, а при
     соотношении 2.5:1 от него остаётся горизонтальная щель. Высота считается
     от окна — 75vh, как в макете на весь экран, — но с полом в 560px: на
     ноутбуке с короткой крышкой vh даёт щель обратно, и полоса перестаёт
     быть полосой. Текст при этом всегда по центру. */
  .quote{min-height:max(560px,75vh);display:flex;flex-direction:column;justify-content:center}
}
/* Снимок вертикальный, а полоса широкая: человек стоит справа, текст идёт
   слева по тёмному. Держим кадр за правый край и чуть выше середины — иначе
   широкая полоса режет портрет по шее. */
.quote img.bg{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:78% 22%;
  opacity:0;transition:opacity .5s ease;
}
.quote img.bg.is-shown{opacity:1}
@media(prefers-reduced-motion:reduce){.quote img.bg{transition:none}}
/* Затемнение под текстом. На широком экране оно идёт слева направо: текст
   стоит в тёмной половине, человек остаётся в светлой — это и есть композиция
   макета. На узком экране делить нечего, строка занимает всю ширину, и тот же
   градиент кладёт слова прямо на лицо. Поэтому там затемнение ровное: снимок
   становится фактурой, а не вторым собеседником. */
.quote::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(3,7,18,.88) 0%,rgba(3,7,18,.94) 100%);
}
@media(min-width:900px){
  .quote::after{
    background:linear-gradient(90deg,rgba(3,7,18,.92) 0%,rgba(3,7,18,.72) 55%,rgba(3,7,18,.35) 100%);
  }
}
.slides{overflow:hidden}
.slides-track{display:flex;transition:translate .5s cubic-bezier(.22,.61,.36,1)}
@media(prefers-reduced-motion:reduce){.slides-track{transition:none}}
.slide{flex:0 0 100%;min-width:0;padding-right:var(--space-md)}
.slides-count{font-size:.875rem;color:var(--on-dark-muted);font-variant-numeric:tabular-nums}
.slides-count b{color:#fff;font-weight:600}
.quote blockquote{
  margin:0;max-width:826px;font-size:clamp(1.25rem,2.4vw,2rem);line-height:1.35;
  font-weight:500;letter-spacing:-.02em;
}
.quote-by{display:flex;align-items:center;gap:var(--space-md);margin-top:var(--space-xl)}
/* Под отзывом стоит марка компании, а не лицо, поэтому логотип показываем
   целиком (contain) на светлом поле — круглая обрезка съела бы ему бока. */
.quote-by .avatar{width:64px;height:64px;border-radius:50%;flex:none;background:#374151}
.quote-by img.mark{
  width:64px;height:64px;flex:none;border-radius:12px;
  object-fit:contain;background:#fff;padding:4px;
}
.quote-by b{display:block;font-size:1rem}
.quote-by span{display:block;font-size:.875rem;color:var(--on-dark-muted);margin-top:.15rem}
.quote-nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-md);margin-top:var(--space-xl)}
.circle{
  width:var(--tap);height:var(--tap);border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:transparent;color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
}
.circle:hover{background:rgba(255,255,255,.12)}
.quote-nav a{font-size:.9375rem;color:#fff;text-underline-offset:4px}

/* ── модули: список с раскрытием ─────────────────────────────── */
/* Между отзывом и этим блоком не было ничего: секция начиналась сразу за
   краем тёмной карточки. */
/* Отступ сверху даёт секция отзывов над ней — здесь он был бы вторым. */
.modules{padding-top:0}
.scale{display:grid;gap:var(--space-xl);padding:var(--space-xl) 0 var(--space-3xl)}
@media(min-width:1000px){.scale{grid-template-columns:448px minmax(0,1fr);gap:var(--space-2xl);align-items:start}}
.scale-head{text-align:center;max-width:732px;margin:0 auto var(--space-2xl)}
.scale-head p{margin:var(--space-md) 0 var(--space-lg);font-size:1.0625rem;color:var(--muted)}
details.mod{border-bottom:1px solid var(--line)}
details.mod summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);
  min-height:69px;cursor:pointer;list-style:none;font-size:1.375rem;letter-spacing:-.015em;
}
details.mod summary::-webkit-details-marker{display:none}
.mod-sign{
  flex:none;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--ink);
  display:inline-flex;align-items:center;justify-content:center;position:relative;
}
details[open] .mod-sign{border-color:var(--faint);color:var(--faint)}
.mod-sign::before,.mod-sign::after{content:"";position:absolute;background:currentColor;border-radius:1px}
.mod-sign::before{width:14px;height:1.5px}
.mod-sign::after{width:1.5px;height:14px}
details[open] .mod-sign::after{display:none}
details.mod p{margin:0 0 var(--space-md);color:var(--muted);line-height:1.55;max-width:56ch}
details.mod .btn{margin-bottom:var(--space-md)}
.scale-shot{
  margin:0;border-radius:var(--r);overflow:hidden;background:var(--wash);
  border:1px solid var(--line);aspect-ratio:3/2;
}
.scale-shot img{
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .35s ease;
}
.scale-shot img.is-shown{opacity:1}
@media(prefers-reduced-motion:reduce){.scale-shot img{transition:none}}
/* Раскрытие само по себе не анимируется у <details>; подъезжает содержимое. */
details.mod[open] > :not(summary){animation:mod-in .3s ease both}
@keyframes mod-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){details.mod[open] > :not(summary){animation:none}}

/* ── цифры ───────────────────────────────────────────────────── */
.stats{display:grid;gap:var(--space-xl);padding-block:var(--space-2xl) var(--space-3xl)}
@media(min-width:760px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat b{display:block;font-size:clamp(2.5rem,5vw,4.5rem);line-height:1;font-weight:500;letter-spacing:-.04em}
.stat span{display:block;margin-top:var(--space-md);font-size:.875rem;color:var(--muted)}

/* ── новости ─────────────────────────────────────────────────── */
.news{padding-bottom:var(--space-3xl)}
.news-grid{display:grid;gap:var(--space-md);margin-top:var(--space-xl)}
@media(min-width:760px){.news-grid{grid-template-columns:repeat(3,1fr)}}
.news-card{display:flex;flex-direction:column;text-decoration:none}
.news-shot{
  position:relative;border-radius:var(--r);overflow:hidden;background:var(--wash);
  border:1px solid var(--line);aspect-ratio:1/1;
}
.news-shot img{width:100%;height:100%;object-fit:cover}
.news-date{
  position:absolute;top:var(--space-md);left:var(--space-md);
  background:rgba(255,255,255,.92);border-radius:999px;padding:.3rem .7rem;
  font-size:.75rem;font-weight:600;
}
.news-card h3{margin:var(--space-md) 0 0;font-size:1.0625rem;font-weight:600}
.news-card span{margin-top:.6rem;font-size:.8125rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.news-more{display:flex;justify-content:center;margin-top:var(--space-xl)}

/* ── подвал ──────────────────────────────────────────────────── */
footer{background:var(--ink);color:var(--on-dark);padding:var(--space-3xl) 0 var(--space-xl)}
.foot{display:grid;gap:var(--space-xl)}
@media(min-width:760px){.foot{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.foot{grid-template-columns:repeat(4,1fr);gap:var(--space-lg)}}
.foot h4{margin:0 0 var(--space-md);font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;font-weight:600}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.875rem}
.foot a{color:var(--on-dark-muted);text-decoration:none;font-size:.875rem}
.foot a:hover{color:#fff}
.foot p{margin:0 0 .875rem;font-size:.875rem;color:var(--on-dark-muted);line-height:1.5}
.foot-social{display:flex;gap:var(--space-md);margin-top:var(--space-md)}
.foot-bottom{
  display:flex;flex-wrap:wrap;gap:var(--space-md);justify-content:space-between;
  margin-top:var(--space-2xl);padding-top:var(--space-md);border-top:1px solid rgba(255,255,255,.12);
  font-size:.8125rem;color:var(--on-dark-muted);
}
.foot-bottom nav{display:flex;flex-wrap:wrap;gap:var(--space-md)}
.foot-bottom a{color:var(--on-dark-muted);text-decoration:none}
.foot-bottom a:hover{color:#fff}

/* ── внутренняя страница ─────────────────────────────────────
   Одна раскладка на страницу модуля и на статью блога: колонка текста
   шириной в чтение, снимок во всю сетку, и ничего из главной — там
   раскладка витринная, здесь читательская. */
/* Шапка внутренней страницы. Не .lede — так уже называется класс размера
   текста выше по файлу, и его margin:0 гасил у .wrap центрирование: блок
   уезжал на восемь пикселей влево от всей остальной страницы. */
.page-head{padding-block:var(--space-2xl) var(--space-xl)}
.crumbs{font-size:.8125rem;color:var(--muted)}
.crumbs a{color:var(--muted);text-underline-offset:3px}
.crumbs a:hover{color:var(--ink)}
.page-head h1{
  margin:var(--space-md) 0 0;max-width:20ch;
  font-size:clamp(2.25rem,5vw,4rem);line-height:1.04;font-weight:700;letter-spacing:-.03em;
  text-wrap:balance;
}
.page-head p{margin:var(--space-lg) 0 0;max-width:62ch;font-size:1.25rem;line-height:1.5;color:var(--muted)}
.shot{margin:0;border-radius:var(--r);overflow:hidden;background:var(--wash);aspect-ratio:3/2}
.shot img{width:100%;height:100%;object-fit:cover;display:block}

/* Возможности: заголовок и одна строка под ним. Не карточки — рамка вокруг
   каждой строки разбила бы список на восемь отдельных предметов. */
.points{display:grid;gap:var(--space-xl);padding-block:var(--space-2xl)}
@media(min-width:760px){.points{grid-template-columns:1fr 1fr;column-gap:var(--space-2xl)}}
.points h3{margin:0;font-size:1.125rem;font-weight:600}
.points p{margin:.5rem 0 0;max-width:52ch;line-height:1.6;color:var(--muted)}

/* Как это устроено: один абзац, который отличает продукт от соседнего. */
.note{
  padding:var(--space-xl);border-radius:var(--r);background:var(--wash);
  border:1px solid var(--line);
}
.note h2{margin:0;font-size:1.0625rem;font-weight:600}
.note p{margin:.75rem 0 0;max-width:68ch;line-height:1.65;color:var(--muted)}
.note a{color:var(--brand)}

/* Соседние модули — ряд ссылок, а не ещё одна витрина. */
.siblings{padding-block:var(--space-2xl) var(--space-3xl)}
.siblings h2{margin:0 0 var(--space-lg);font-size:1.0625rem;font-weight:600}
.siblings ul{display:grid;gap:var(--space-sm);list-style:none;margin:0;padding:0}
@media(min-width:760px){.siblings ul{grid-template-columns:repeat(3,1fr);gap:var(--space-md)}}
.siblings a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);
  min-height:var(--tap);padding:var(--space-md);border:1px solid var(--line);
  border-radius:var(--r-sm);text-decoration:none;color:var(--ink);font-weight:500;
}
.siblings a:hover{border-color:var(--ink)}
.siblings a[aria-current]{background:var(--wash);color:var(--faint);pointer-events:none}
.siblings svg{flex:none;color:var(--faint)}

/* Приглашение в конце страницы. */
.invite{
  padding:var(--space-3xl) var(--space-lg);border-radius:var(--r);
  background:var(--ink);color:var(--on-dark);text-align:center;
}
.invite h2{margin:0;font-size:clamp(1.5rem,3vw,2.25rem);font-weight:700;letter-spacing:-.02em}
.invite p{margin:var(--space-md) auto 0;max-width:52ch;color:var(--on-dark-muted);line-height:1.6}
.invite .cta-row{margin-top:var(--space-xl)}

/* ── блог ────────────────────────────────────────────────────── */
.posts{display:grid;gap:var(--space-xl);padding-block:var(--space-xl) var(--space-3xl)}
@media(min-width:760px){.posts{grid-template-columns:repeat(3,1fr);gap:var(--space-md)}}
.post-card{display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.post-card .shot{aspect-ratio:1/1}
.post-card h2{margin:var(--space-md) 0 0;font-size:1.0625rem;font-weight:600;line-height:1.4}
.post-card time{margin-top:.5rem;font-size:.8125rem;color:var(--muted)}
.post-card:hover h2{color:var(--brand)}

/* Статья: колонка шириной в чтение, но ограничен текст, а не секция. Если
   сузить саму секцию, .wrap отцентрирует её — и абзацы уедут от собственного
   заголовка, который стоит по общей сетке. */
.article{padding-block:var(--space-xl) var(--space-3xl)}
.article > *{max-width:68ch}
.article h2{margin:var(--space-2xl) 0 0;font-size:1.5rem;font-weight:600;letter-spacing:-.01em}
.article h3{margin:var(--space-xl) 0 0;font-size:1.125rem;font-weight:600}
.article p{margin:var(--space-md) 0 0;line-height:1.7}
.article ul,.article ol{margin:var(--space-md) 0 0;padding-left:1.25rem;line-height:1.7}
.article li+li{margin-top:.4rem}
.article a{color:var(--brand)}
.article blockquote{
  margin:var(--space-xl) 0 0;padding-left:var(--space-lg);
  border-left:2px solid var(--line);font-size:1.125rem;line-height:1.6;color:var(--muted);
}
.article .todo{
  margin:var(--space-xl) 0 0;padding:var(--space-lg);border-radius:var(--r-sm);
  border:1px dashed var(--line);background:var(--wash);color:var(--muted);line-height:1.6;
}

/* Вторая кнопка на тёмном: та же форма, что у .btn-ghost, но обводка и текст
   светлые — на чёрном фоне серая рамка не видна. */
.btn-ghost-dark{
  background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35);
}
.btn-ghost-dark:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ── тарифы ──────────────────────────────────────────────────
   Три карточки одной высоты: кнопка внизу у всех на одной линии, иначе
   взгляд считает разную длину списка разной ценой. */
.plans{display:grid;gap:var(--space-md);padding-block:var(--space-xl)}
/* Сколько тарифов в продаже, столько колонок: --plans ставит сборщик. */
@media(min-width:900px){.plans{grid-template-columns:repeat(var(--plans,3),1fr)}}
.plan{
  display:flex;flex-direction:column;
  padding:var(--space-xl);border:1px solid var(--line);border-radius:var(--r);
}
/* Средний — тот, который чаще берут; он и выделен, а не «рекомендован»
   значком поверх. */
.plan.is-pick{border-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.plan h3{margin:0;font-size:1.0625rem;font-weight:600}
.plan .price{
  display:flex;align-items:baseline;gap:.4rem;margin-top:var(--space-md);
  font-variant-numeric:tabular-nums;
}
.plan .price b{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;letter-spacing:-.03em}
.plan .price span{font-size:.875rem;color:var(--muted)}
.plan .who{margin:.75rem 0 0;font-size:.9375rem;line-height:1.55;color:var(--muted)}
.plan ul{margin:var(--space-lg) 0 0;padding:0;list-style:none;display:grid;gap:.6rem}
.plan li{display:flex;gap:.6rem;font-size:.9375rem;line-height:1.5}
.plan li svg{flex:none;margin-top:.15rem;color:var(--faint)}
.plan .btn{margin-top:var(--space-lg)}
.plan .foot-note{margin:.75rem 0 0;font-size:.8125rem;color:var(--faint);line-height:1.5}
/* Кнопка прижимается к низу — списки разной длины не должны её двигать. */
.plan .grow{flex:1 1 auto}

/* Сравнение на отдельной странице. Таблица шире телефона, поэтому едет она,
   а не страница. */
.compare{overflow-x:auto;padding-block:var(--space-xl)}
.compare table{border-collapse:collapse;width:100%;min-width:640px;font-size:.9375rem}
.compare th,.compare td{
  padding:var(--space-md) var(--space-sm);text-align:left;
  border-bottom:1px solid var(--line);vertical-align:top;
}
.compare thead th{font-weight:600;white-space:nowrap}
.compare tbody th{font-weight:400;color:var(--muted)}
.compare td{font-variant-numeric:tabular-nums}
.compare .yes{color:var(--ink)}
.compare .no{color:var(--faint)}

/* Заголовок, который нужен только тому, кто слушает страницу. Не display:none —
   его бы тогда и не прочитали. */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
/* Повтор шапки в середине: таблица на восемнадцать строк уезжает из-под
   названий тарифов, и дальше галочки читаются без колонок. Сделать шапку
   липкой нельзя — она внутри контейнера с overflow-x, а он в CSS становится
   скроллом и по вертикали тоже, так что липнуть ей не к чему. */
.compare .group th{
  padding-top:var(--space-xl);font-weight:600;color:var(--ink);
  border-bottom:1px solid var(--ink);white-space:nowrap;
}

/* ── доработка внутренних страниц ──────────────────────────── */

/* Крошка — навигация, и пальцу нужно 44px. Растим зону нажатия отступом,
   а не буквами: строка остаётся мелкой и серой. */
.crumbs a{display:inline-block;padding-block:.7rem;margin-block:-.7rem}

/* Снимок во всю сетку при 3:2 выходил выше экрана — 885px на 1440, и
   текст страницы начинался только после целой прокрутки фотографией.
   На широком экране кадр ниже; карточки блога остаются квадратными — у них
   своё правило, и оно специфичнее. */
@media(min-width:900px){
  .shot{aspect-ratio:21/9}
  /* Узкий кадр режет сверху и снизу поровну, и у людей пропадает лицо — оно
     обычно в верхней трети снимка. Держим кадр выше середины; интерьеру и
     столу с чеками это почти ничего не стоит. */
  .shot img{object-position:50% 22%}
}

/* Таблица тарифов на телефоне показывала одну колонку Start: min-width 640px
   уводил Pro и Business вправо, а что таблицу можно прокрутить, не видно.
   На узком экране три тарифа влезают, если позволить значениям переноситься
   и ужать отступы — «Без ограничений» в две строки лучше, чем невидимый
   Business. */
@media(max-width:699px){
  .compare table{min-width:0;font-size:.8125rem}
  .compare th,.compare td{padding:.75rem .3rem}
  .compare thead th,.compare .group th{white-space:normal}
  .compare tbody th{width:38%}
}

/* Картинка внутри статьи — во всю колонку текста, со скруглением как у обложки. */
.article .article-figure{margin:var(--space-xl) 0 0}
.article .article-figure img{width:100%;height:auto;display:block;border-radius:var(--r)}

/* Один отзыв — листать нечего. У .circle свой display, и он перебил бы
   браузерное правило для [hidden], поэтому прячем явно. */
.quote-nav [hidden]{display:none}

/* Полоса отзывов — flex-колонка, а у .wrap margin: 0 auto. Auto-поля во flex
   отменяют растягивание: блок сжимается до ширины содержимого и встаёт по
   центру. Пока слайдов было три, лента была широкой и это пряталось; с одним
   отзывом цитата уехала с сетки. */
.quote > .wrap{width:100%}