/* portal.css — дизайн 3.0 (ТЗ: PAGE_MAP_portal_3.0; конструктив по донору:
   DONOR_SYSTEM_aihero_index.md). Цвета — ТОЛЬКО var() из tokens.css.
   Структура файла:
     §1 шрифты · §2 база · §3 каркас (top-strip, шапка, футер)
     §4 компоненты 3.0 (index) · §5 LEGACY 2.0 — стили страниц, ещё не
     мигрировавших на 3.0 (catalog, pack, login, account, check_email,
     deletion_requested, 403_csrf) — ПОД СНОС по мере раскатки. */

/* --- §1. Шрифты: self-hosted woff2, swap; провенанс — fonts/README.md --- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/inter-400.96a3cb062f17.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/inter-500.e9f676c70e40.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/inter-600.8d6e7cbc3072.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-400.b64f57c957ff.woff2") format("woff2");
}
@font-face {
  font-family: "osifont";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/osifont-400.9f9c215e7b37.woff2") format("woff2");
}

/* --- §2. База --- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* сайт = контейнер 1200px по центру (донор: max-w-[1200px] + border-x);
     за бортами — page-bg (вердикт автора 2026-06-07) */
  background: var(--page-bg);
}

body {
  margin: 0 auto;
  max-width: 1200px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
}

img { max-width: 100%; display: block; }

a {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--line);
}
a:hover { color: var(--muted-foreground); }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

button { font: inherit; cursor: pointer; }

.mono { font-family: var(--font-mono); }
.draw { font-family: var(--font-draw); }

/* метка плейсхолдер-текста (ждёт /business); видима только с body.show-marks */
.ph { position: relative; }
body.show-marks .ph::after {
  content: "PLACEHOLDER";
  position: absolute;
  top: -10px;
  right: -8px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--primary);
  border: 1px dashed var(--primary);
  border-radius: 3px;
  padding: 2px 5px;
  pointer-events: none;
}

/* --- §3. Каркас: top-strip, шапка, футер --- */

/* счётчик T-NNN — мягко (countdown policy: фоновый элемент дисциплины) */
.top-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 6px 16px;
}
.top-strip b { color: var(--muted-foreground); font-weight: 400; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: var(--nav-height);
  background: color-mix(in srgb, var(--background) 90%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.brand {
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-family: var(--font-draw);
  font-size: 19px;
  letter-spacing: 0.04em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--foreground);
}
.brand:hover { color: var(--foreground); }
.brand .tld { color: var(--faint); }

.site-nav { display: none; align-items: center; gap: 2px; }
.site-nav a {
  font-size: 14px;
  text-decoration: none;
  color: var(--foreground);
  padding: 7px 13px;
  border-radius: 999px;
  transition: background-color 0.2s;
}
.site-nav a:hover { background: var(--accent); color: var(--foreground); }
@media (min-width: 768px) { .site-nav { display: flex; } }

.header-actions { display: flex; align-items: center; gap: 10px; padding-right: 14px; }
.header-actions .login {
  font-size: 14px;
  text-decoration: none;
  color: var(--muted-foreground);
  padding: 7px 10px;
  border-radius: 999px;
}
.header-actions .login:hover { color: var(--foreground); background: var(--accent); }
.header-actions .btn { min-height: 36px; padding: 0 16px; font-size: 14px; }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
}
.theme-toggle:hover { background: var(--accent); color: var(--foreground); }

/* кнопки: пилюли (по донору); модификаторы 3.0 — заливка, legacy — контур */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;            /* тач-таргет */
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s, background-color 0.15s, color 0.15s;
}
.btn--primary { background: var(--primary); color: var(--primary-foreground); }
.btn--primary:hover { filter: brightness(1.08); color: var(--primary-foreground); }
.btn--ghost { color: var(--foreground); border-color: var(--line); }
.btn--ghost:hover { background: var(--accent); color: var(--foreground); }
.btn--fg { background: var(--foreground); color: var(--background); border: 0; }
.btn--fg:hover { filter: brightness(0.92); }

/* футер 3.0: колонки + нижняя строка */
.site-footer { border-top: 1px solid var(--border); margin-top: auto; }
.footer-cols {
  max-width: 80rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding: 64px 40px 48px;
  width: 100%;
}
.footer-cols h3 {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer-cols ul { margin: 0; padding: 0; list-style: none; }
.footer-cols a {
  display: inline-block;
  padding: 4px 0;
  font-size: 14px;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color 0.15s, opacity 0.15s;
}
.footer-cols a:hover { color: var(--foreground); }
.footer-cols ul:has(a:hover) a:not(:hover) { opacity: 0.6; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 80rem;
  margin: 0 auto;
  padding: 20px 40px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--faint);
  width: 100%;
}
.footer-bottom a { color: var(--faint); }
.footer-bottom .mono {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (min-width: 640px) { .footer-cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .footer-cols { grid-template-columns: 3fr 3fr 2fr 2fr; gap: 0; padding: 0; }
  .footer-cols > div { padding: 40px 32px 48px; border-left: 1px solid var(--border); }
  .footer-cols > div:first-child { border-left: none; }
}

/* --- §4. Компоненты 3.0 (index; дальше — словарь/roadmap/гайды/FAQ) --- */

/* бейдж-пилюля (mono 10 uppercase). НЕ путать с legacy .badge (§5) */
.pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--foreground);
  color: var(--background);
}
.pill--amber { background: var(--primary); color: var(--primary-foreground); }
.pill--outline { background: transparent; color: var(--muted-foreground); border: 1px solid var(--line); }

/* леджер: полноширинные секции с 1px-бордерами */
.section-h2 {
  max-width: 36rem;
  margin: 0 auto;
  padding: 80px 32px;
  text-align: center;
  text-wrap: balance;
  font-family: var(--font-draw);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: 0.01em;
}
.section-h2 .sub {
  display: block;
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted-foreground);
  letter-spacing: 0;
}
@media (min-width: 640px) { .section-h2 { font-size: 36px; } }

/* hero: слева текст, справа автокроссфейд (дев-задача В.2) */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  min-height: 416px;
  border-bottom: 1px solid var(--border);
}
.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 40px 32px;
}
.hero h1 {
  margin: 0;
  font-family: var(--font-draw);
  font-weight: 400;
  font-size: clamp(38px, 6vw, 60px);
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.hero .tagline { margin: 0; font-size: 22px; font-weight: 400; line-height: 1.3; opacity: 0.7; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.hero-visual { position: relative; overflow: hidden; min-height: 280px; }
@media (min-width: 768px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .hero-copy { padding: 80px 64px; }
  .hero-visual { min-height: 0; }
}
@media (min-width: 1024px) { .hero-copy { padding-left: 96px; } }

/* кроссфейд 3 кадров: 15s цикл, ~5s/кадр, без управления (PAGE_MAP 1.2) */
.hero-frame { position: absolute; inset: 0; opacity: 0; animation: hero-fade 15s infinite; }
.hero-frame:nth-child(1) { animation-delay: -1s; }  /* кадр 1 видим сразу */
.hero-frame:nth-child(2) { animation-delay: 4s; }
.hero-frame:nth-child(3) { animation-delay: 9s; }
@keyframes hero-fade {
  0% { opacity: 0; }
  6% { opacity: 1; }
  33% { opacity: 1; }
  40% { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-frame { animation: none; }
  .hero-frame:nth-child(1) { opacity: 1; }
}
/* затухание визуала в фон (донор: to-background) */
.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(to top, var(--background), transparent 45%);
}
@media (min-width: 640px) {
  .hero-visual::after { background: linear-gradient(to left, transparent 55%, var(--background)); }
}

/* blueprint-рамка: плейсхолдеры фото и авто-обложки (дев-задача В.6) */
.bp {
  position: relative;
  width: 100%;
  background:
    repeating-linear-gradient(0deg, var(--border) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px 24px),
    var(--card);
}
/* height:100% — только в рамках с определённой высотой родителя;
   на .bp-cover не ставить: убивает aspect-ratio и ломает сетку мозаики */
.hero-frame .bp,
.portrait .bp { height: 100%; }
.bp-label {
  position: absolute;
  left: 16px;
  bottom: 14px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.bp-mark {
  position: absolute;
  top: 12px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--faint);
}
.bp-cover { aspect-ratio: 16 / 9; position: relative; overflow: hidden; }
.bp-cover .bp-title {
  position: absolute;
  left: 18px;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  font-family: var(--font-draw);
  font-size: 21px;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--muted-foreground);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);   /* линия-аннотация */
}
.bp-cover .bp-corner {
  position: absolute;
  right: 14px;
  bottom: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--faint);
}

/* #42 covers: загруженная обложка — подложка под авто-blueprint. Картинка
   заполняет .bp-cover поверх чертёжной сетки; нижняя полоса затухает в фон
   карточки (тот же конструктивный приём, что затухание hero-визуала — не
   цветной декор), на этот фейд садится osifont-заголовок: var(--foreground)
   гарантированно контрастен var(--background) в обеих темах. Пустой cover →
   текущая blueprint-автообложка (модификатор не вешается). */
.bp-cover--img > .bp-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  display: block;
}
.bp-cover--img::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, var(--background) 0%, transparent 58%);
}
.bp-cover--img .bp-title {
  z-index: 2;
  top: auto;          /* из центра — вниз, на фейд-полосу */
  bottom: 14px;
  transform: none;
  color: var(--foreground);
  border-bottom: 0;   /* линия-аннотация ни к чему поверх фото */
  padding-bottom: 0;
}
.bp-cover--img .bp-corner {
  z-index: 2;
}

/* манифест: 2 колонки, sticky-заголовок */
.manifesto {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding: 48px 32px;
  border-bottom: 1px solid var(--border);
}
.manifesto h2 {
  margin: 0;
  font-family: var(--font-draw);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  text-wrap: balance;
}
.manifesto-body { font-size: 17px; max-width: 62ch; }
.manifesto-body p { margin: 0 0 1.2em; }
.manifesto-body p:last-child { margin-bottom: 0; }
.manifesto-body .invite { color: var(--muted-foreground); }
@media (min-width: 768px) {
  .manifesto { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 64px; padding: 0 64px; }
  .manifesto h2 { font-size: 36px; padding: 96px 0; position: sticky; top: var(--nav-height); align-self: start; }
  .manifesto-body { padding: 96px 0; }
}

/* row-card: полноширинная горизонтальная карточка (featured/паки/basics) */
.row-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  margin-top: -1px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--foreground);
  transition: background-color 0.15s;
}
.row-card:hover { background: var(--card); color: var(--foreground); }
/* янтарная риска слева при ховере (замена градиент-анимации донора) */
.row-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  width: 2px;
  background: var(--primary);
  opacity: 0;
  transition: opacity 0.15s;
}
.row-card:hover::before { opacity: 1; }
.row-card .thumb { width: 100%; flex-shrink: 0; }
.row-card .thumb .bp-cover { border: 1px solid var(--border); }
.row-card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.row-card h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.row-card p { margin: 0; color: var(--muted-foreground); font-size: 16px; max-width: 64ch; }
.row-card .rc-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
@media (min-width: 640px) {
  .row-card { flex-direction: row; align-items: center; gap: 32px; padding: 40px 56px; }
  .row-card .thumb { width: 240px; }
  .row-card h3 { font-size: 28px; }
}

/* мозаика: ячейки на 1px-зазорах через фон подложки (донор: gap-px) */
.mosaic {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.mosaic-card {
  display: flex;
  flex-direction: column;
  background: var(--background);
  text-decoration: none;
  color: var(--foreground);
  transition: filter 0.2s;
}
.mosaic-card:hover { filter: brightness(1.12); color: var(--foreground); }
html[data-theme="light"] .mosaic-card:hover { filter: none; }
html[data-theme="light"] .mosaic-card:hover h3 { text-decoration: underline; }
.mosaic-card .bp-cover { border-bottom: 1px solid var(--border); }
.mosaic-card h3 { margin: 0; padding: 24px 28px; font-size: 18px; font-weight: 600; line-height: 1.35; }
.mosaic-card .mc-meta {
  padding: 0 28px 22px;
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
@media (min-width: 640px) { .mosaic { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .mosaic { grid-template-columns: repeat(3, 1fr); } }

/* newsletter: The Build Log (PAGE_MAP 1.8 — только email) */
.newsletter { display: flex; flex-direction: column; align-items: center; border-bottom: 1px solid var(--border); }
.newsletter-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 56rem;
  padding: 96px 32px;
}
.newsletter h2 {
  margin: 0;
  text-align: center;
  text-wrap: balance;
  font-family: var(--font-draw);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
}
.newsletter .lede { margin: 12px 0 0; text-align: center; color: var(--muted-foreground); font-size: 17px; }
.newsletter ul.gets {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 28px;
  font-size: 15px;
  color: var(--muted-foreground);
}
.newsletter ul.gets li { display: flex; gap: 10px; align-items: baseline; }
.newsletter ul.gets li::before { content: "→"; color: var(--primary); font-family: var(--font-mono); flex-shrink: 0; }
.newsletter .privacy { margin: 0; font-size: 13px; color: var(--faint); text-align: center; }
.newsletter .freq {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.subscribe-form { display: flex; flex-direction: column; flex-wrap: wrap; gap: 10px; width: 100%; max-width: 26rem; }
.subscribe-form input[type="email"] {
  width: 100%;
  padding: 13px 16px;
  border-radius: var(--radius);
  background: var(--muted);
  color: var(--foreground);
  border: 1px solid var(--input);
  font: inherit;
  font-size: 15px;
}
.subscribe-form input[type="email"]::placeholder { color: var(--faint); }
@media (min-width: 640px) {
  .newsletter h2 { font-size: 36px; }
  .newsletter ul.gets { grid-template-columns: 1fr 1fr; }
  .subscribe-form { flex-direction: row; }
  .subscribe-form input[type="email"] { flex: 1; }
  /* consent — собственной строкой над рядом email+кнопка (row-формы home/CTA) */
  .nl-consent { flex: 0 0 100%; }
  .subscribe-form--xl .nl-consent { flex: 0 0 auto; }  /* xl всегда column — basis не нужен */
}

/* чекбокс явного согласия на рассылку (Mailjet compliance): отдельная строка,
   НЕ склеен с privacy. Текст рабочий — финал за /business. */
.nl-consent {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  width: 100%;
  margin: 2px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted-foreground);
  text-align: left;
  cursor: pointer;
}
.nl-consent input[type="checkbox"] {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--primary);
  cursor: pointer;
}

/* about: фото + био */
.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  padding: 64px 32px;
  border-bottom: 1px solid var(--border);
}
.about .portrait {
  aspect-ratio: 4 / 5;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  border: 1px solid var(--border);
  position: relative;
}
.about h2 { margin: 0 0 18px; font-family: var(--font-draw); font-weight: 400; font-size: 30px; line-height: 1.15; }
.about p { margin: 0 0 1em; font-size: 17px; max-width: 58ch; }
.about p:last-child { margin-bottom: 0; }
@media (min-width: 1024px) {
  .about { grid-template-columns: 1fr 1fr; padding: 96px 64px; }
  .about h2 { font-size: 36px; }
}

/* built with: wordmark-чипы (официальные логотипы — после сбора brand assets) */
.builtwith { border-bottom: 1px solid var(--border); padding: 28px 32px 56px; }
.builtwith h2 {
  margin: 0 0 28px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.builtwith ul {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  max-width: 64rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 14px;
}
.builtwith li {
  font-family: var(--font-draw);
  font-size: 17px;
  letter-spacing: 0.03em;
  color: var(--faint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 20px;
  transition: color 0.2s, border-color 0.2s;
}
.builtwith li:hover { color: var(--muted-foreground); border-color: var(--line); }

/* повтор-CTA внизу страницы */
.final-cta { padding: 56px 32px 72px; text-align: center; }
.final-cta h2 {
  margin: 0 0 12px;
  font-family: var(--font-draw);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  text-wrap: balance;
}
.final-cta p { margin: 0 auto 28px; color: var(--muted-foreground); max-width: 44ch; }
.final-cta .subscribe-form { margin: 0 auto; }
@media (min-width: 640px) { .final-cta h2 { font-size: 36px; } }

/* newsletter-флоу (PAGE_MAP §2): страница подписки + 5 состояний double
   opt-in. Одобрено HITL-вердиктом 2026-06-07; шаблоны ждут вьюх (запрос
   к слайсу: subscribe-эндпоинт + double opt-in, дев-задачи §В.3/§В.5). */
.page-nl .site-main {
  position: relative;
  max-width: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}
/* фон: blueprint-сетка с радиальным затуханием (замена canvas-анимации
   донора; mask бесцветная — конструктив, не декоративный градиент) */
.nl-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, var(--border) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px 48px);
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 30%, black 0%, transparent 95%);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 30%, black 0%, transparent 95%);
  opacity: 0.55;
}
.page-nl .builtwith { position: relative; z-index: 1; }

.nl-hero {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 64px 24px 80px;
  text-align: center;
}
.nl-hero h1 {
  margin: 0;
  font-family: var(--font-draw);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 46px);
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.nl-hero .lede {
  margin: 14px 0 0;
  max-width: 52ch;
  font-size: 18px;
  line-height: 1.5;
  color: var(--muted-foreground);
}
.nl-hero .gets {
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 32px;
  font-size: 15px;
  text-align: left;
  color: var(--muted-foreground);
}
.nl-hero .gets li { display: flex; gap: 10px; align-items: baseline; }
.nl-hero .gets li::before {
  content: "→";
  color: var(--primary);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
@media (min-width: 640px) {
  .nl-hero .lede { font-size: 20px; }
  .nl-hero .gets { grid-template-columns: 1fr 1fr; }
}

/* крупная форма страницы-флоу (донор: стопка, кнопка во всю ширину) */
.subscribe-form--xl { margin-top: 36px; max-width: 28rem; }
.subscribe-form--xl input[type="email"] {
  flex: none;             /* отменяет flex:1 базовой формы (в колонке схлопывает height) */
  height: 56px;
  padding: 0 18px;
  font-size: 16px;
  text-align: center;
}
.subscribe-form--xl .btn { min-height: 56px; font-size: 16px; }
@media (min-width: 640px) {
  /* и на desktop остаётся стопкой — паттерн донора */
  .subscribe-form--xl { flex-direction: column; }
}

.nl-hero .freq {
  margin: 22px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.nl-hero .privacy { margin: 8px 0 0; font-size: 13px; color: var(--faint); }

/* состояния double opt-in: тот же центрированный каркас */
.status-code {
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.status-code::before { content: "// "; }
.status-code--ok { color: var(--primary); }
.status-code--err { color: var(--destructive); }
.nl-hero .body {
  margin: 16px 0 0;
  max-width: 48ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted-foreground);
}
.nl-hero .body .mono { color: var(--foreground); font-size: 0.93em; }
.status-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}
.nl-hero .subnote { margin: 20px 0 0; font-size: 14px; color: var(--faint); }
.nl-hero .subnote a { color: var(--muted-foreground); }

/* текст только для скринридеров (label формы) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* roadmap (PAGE_MAP §3): живая карта стройки. Донор: aihero «The AI
   Engineer Roadmap» — hero 3+2 → action-bar 4+2 → article 4 + aside 2.
   Одобрено HITL-вердиктом 2026-06-07. */
.page-roadmap .site-main { max-width: none; padding: 0; }

/* hero: слева текст (3fr), справа обложка (2fr); mobile — обложка сверху */
.rm-hero {
  display: flex;
  flex-direction: column-reverse;
  gap: 28px;
  padding: 28px 24px 44px;
  border-bottom: 1px solid var(--border);
}
.rm-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.rm-hero h1 {
  margin: 0;
  font-family: var(--font-draw);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
.rm-hero .tagline {
  margin: 0;
  max-width: 46ch;
  font-size: 19px;
  line-height: 1.45;
  opacity: 0.7;
}
/* чип автора (донор: аватар + имя); .ava — заглушка до фото */
.author-chip { display: flex; align-items: center; gap: 10px; }
.author-chip .ava {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted-foreground);
}
.author-chip .who { display: flex; flex-direction: column; text-align: left; line-height: 1.25; }
.author-chip .who b { font-weight: 500; font-size: 14px; }
.author-chip .who span { font-size: 12px; color: var(--faint); }

.rm-hero-cover { width: 100%; max-width: 520px; margin: 0 auto; }
.rm-hero-cover .bp-cover { aspect-ratio: 16 / 10; border: 1px solid var(--border); }

@media (min-width: 768px) {
  .rm-hero {
    display: grid;
    grid-template-columns: 3fr 2fr;
    align-items: center;
    gap: 48px;
    padding: 56px 64px;
  }
  .rm-hero-copy { align-items: flex-start; text-align: left; }
  .rm-hero-cover { max-width: none; margin: 0; }
}

/* action-bar (донор: border-y, stripes + CTA + Share | лейбл колонки) */
.rm-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
}
.rm-bar .stripes {
  width: 40px;
  background: repeating-linear-gradient(45deg, var(--border) 0 1px, transparent 1px 7px);
  border-right: 1px solid var(--border);
}
.rm-bar .rm-bar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  min-height: 56px;
  flex: 1;
}
.rm-bar .rm-bar-label {
  display: none;
  align-items: center;
  padding-left: 20px;
  border-left: 1px solid var(--border);
  font-weight: 500;
  font-size: 16px;
}
.rm-bar .rm-bar-label:empty { border-left: none; }
.rm-bar .btn { min-height: 40px; font-size: 14px; }
@media (min-width: 768px) {
  .rm-bar { display: grid; grid-template-columns: 4fr 2fr; }
  .rm-bar .rm-bar-actions { padding-left: 0; }
  .rm-bar > .rm-bar-left { display: flex; align-items: stretch; gap: 16px; }
  .rm-bar .rm-bar-label { display: flex; }
}

/* двухколонник: article (prose) + aside (карта модулей) */
.rm-grid { display: flex; flex-direction: column; }
@media (min-width: 768px) {
  .rm-grid { display: grid; grid-template-columns: 4fr 2fr; align-items: stretch; }
  .rm-aside { border-left: 1px solid var(--border); }
}

.rm-article { padding: 40px 24px 56px; font-size: 17px; }
.rm-article > * { max-width: 62ch; }
.rm-article p { margin: 0 0 1.2em; }
.rm-article h2 {
  margin: 1.8em 0 0.7em;
  font-family: var(--font-draw);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.15;
}
.rm-article ul { margin: 0 0 1.2em; padding: 0; list-style: none; }
.rm-article ul li { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.rm-article ul li::before {
  content: "→";
  color: var(--primary);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
@media (min-width: 768px) { .rm-article { padding: 48px 64px 72px; } }

/* прогресс стройки: живое число (PAGE_MAP §3.3); ширина заливки — demo,
   со слайсом придёт из контекста вьюхи вместе со статусами */
.rm-progress { margin: 6px 0 36px; }
.rm-progress .line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
/* число — foreground (янтарь текстом на светлой теме не проходит контраст);
   янтарь остаётся в полосе прогресса и статус-пилюлях */
.rm-progress .line b { color: var(--foreground); font-weight: 400; font-size: 15px; }
/* полоса прогресса — нативный <progress>: заливка = value/max из вьюхи
   (data-driven без inline-style, закон дизайн-системы); трек и заливка
   стилизуются отдельно в WebKit и Gecko */
.rm-progress .rm-meter {
  display: block;
  width: 100%;
  height: 4px;
  border: none;
  background: var(--border);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.rm-progress .rm-meter::-webkit-progress-bar { background: var(--border); }
.rm-progress .rm-meter::-webkit-progress-value { background: var(--primary); }
.rm-progress .rm-meter::-moz-progress-bar { background: var(--primary); }

/* lead magnet: Boat Anatomy Blueprint (PAGE_MAP §3.4 — PDF за email) */
.rm-magnet {
  margin-top: 40px;
  border: 1px solid var(--line);
  padding: 24px;
}
.rm-magnet .bp-cover { aspect-ratio: 2 / 1; border: 1px solid var(--border); margin-bottom: 20px; }
.rm-magnet h2 { margin: 0 0 8px; }
.rm-magnet .subscribe-form { max-width: 30rem; margin-top: 18px; }
.rm-magnet .meta-line {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* карта модулей (aside; донор: список уроков с mono-номерами).
   Заголовок — только mobile: на desktop роль играет лейбл action-bar */
.rm-aside-h {
  margin: 0;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
}
@media (min-width: 768px) { .rm-aside-h { display: none; } }

.module-list { margin: 0; padding: 0; list-style: none; }
.module-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
}
.module-list .mid {
  min-width: 5ch;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--faint);
}
.module-list .mname {
  flex: 1;
  font-family: var(--font-draw);
  font-size: 16.5px;
  letter-spacing: 0.02em;
  line-height: 1.25;
}
/* статус-пилюли: In progress = янтарь (где стройка сейчас), Done = заливка
   foreground, Planned = контур */
.st {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 999px;
}
.st--done { background: var(--foreground); color: var(--background); }
.st--prog { background: var(--primary); color: var(--primary-foreground); }
.st--plan { color: var(--faint); border: 1px solid var(--line); padding: 4px 9px; }

/* considered & rejected: свёрнуто, приглушено — триаж, не витрина
   (ограждения PAGE_MAP §3: имя + бейдж, ничего больше) */
.rm-rejected { border-bottom: 1px solid var(--border); }
.rm-rejected summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 20px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  color: var(--faint);
  user-select: none;
}
.rm-rejected summary::-webkit-details-marker { display: none; }
.rm-rejected summary::before {
  content: "+";
  font-family: var(--font-mono);
  color: var(--faint);
}
.rm-rejected[open] summary::before { content: "−"; }
.rm-rejected summary:hover { color: var(--muted-foreground); }
.rm-rejected .module-list li { min-height: 46px; opacity: 0.62; flex-wrap: wrap; }
.rm-rejected .module-list li:last-child { border-bottom: none; }
.rm-rejected .module-list .mname { font-size: 15px; color: var(--muted-foreground); }
/* причина-проза (rejected_reason_md): во всю строку под именем, приглушена */
.rm-rejected .rej-why {
  flex-basis: 100%;
  margin: 4px 0 0;
  padding-left: calc(5ch + 12px);
  font-size: 13px;
  line-height: 1.4;
  color: var(--faint);
}
.rm-rejected .rej-why :first-child { margin-top: 0; }
.rm-rejected .rej-why :last-child { margin-bottom: 0; }
.st--rej { color: var(--faint); border: 1px solid var(--border); padding: 4px 9px; }

/* словарь узлов (PAGE_MAP §4–5): index «anatomy of the boat» + detail
   с двухслойным телом (plain English / For engineers). Донор: aihero
   «AI Coding Dictionary». Одобрено HITL-вердиктом 2026-06-07 (прототип
   /tmp/akula-proto/design3-dict; правка вердикта: колонка статьи detail
   по центру и шире, как у донора). */

.page-dict .site-main,
.page-entry .site-main { max-width: none; padding: 0; }

/* ---------- index: hero (донор: 1.4fr/1fr, справа stripes-панель якорей) -- */
.dict-hero {
  display: grid;
  grid-template-columns: 1fr;
  border-bottom: 1px solid var(--border);
}
.dict-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 48px 24px 52px;
}
.dict-kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
}
.dict-hero h1 {
  margin: 0;
  font-family: var(--font-draw);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
/* перенос строки H1 — только с планшета (донор: br hidden sm:block) */
.dict-hero h1 br { display: none; }
@media (min-width: 640px) { .dict-hero h1 br { display: inline; } }
/* янтарь только в заголовке тёмного hero — на светлой теме держит контраст
   за счёт размера; для body-текста янтарь запрещён (≈1.6:1) */
.dict-hero h1 .hl { color: var(--primary); }
html[data-theme="light"] .dict-hero h1 .hl { color: var(--foreground); }
.dict-hero .lede {
  margin: 0;
  max-width: 54ch;
  font-size: 19px;
  line-height: 1.45;
  opacity: 0.7;
}
/* счётчики вместо GitHub-чипа донора (PAGE_MAP §4.2) */
.dict-counters {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--faint);
}
.dict-counters b { color: var(--foreground); font-weight: 500; }

/* правая панель: якоря секций на штриховке (донор: bg-stripes + #hash) */
.dict-hero-links {
  display: none;
  border-left: 1px solid var(--border);
  background: repeating-linear-gradient(45deg, var(--border) 0 1px, transparent 1px 7px);
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}
.dict-hero-links ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.dict-hero-links a {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted-foreground);
  text-decoration: none;
}
.dict-hero-links a .hash { color: var(--faint); margin-right: 2px; }
.dict-hero-links a:hover { color: var(--foreground); text-decoration: underline; text-underline-offset: 4px; }
@media (min-width: 768px) {
  .dict-hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .dict-hero-copy { padding: 64px 48px; }
  .dict-hero-links { display: flex; }
}

/* ---------- поиск: sticky на mobile, в aside на desktop ------------------ */
.dict-search { position: relative; border-bottom: 1px solid var(--border); }
.dict-search input {
  width: 100%;
  height: 56px;
  padding: 0 18px 0 44px;
  border: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-mono);
  font-size: 14px;
}
.dict-search input::placeholder { color: var(--faint); }
.dict-search input:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
/* метка-приглашение слева (глиф лупы не в сабсете — mono-слэш) */
.dict-search::before {
  content: "/";
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--faint);
  pointer-events: none;
}
.dict-sticky {
  position: sticky;
  top: var(--nav-height);
  z-index: 20;
  background: var(--background);
}
@media (min-width: 1024px) { .dict-sticky { display: none; } }

/* ---------- layout: aside (поиск + системы) | секции --------------------- */
.dict-layout { display: grid; grid-template-columns: 1fr; }
.dict-aside { border-bottom: 1px solid var(--border); }
.dict-aside .dict-search { display: none; }
.dict-secnav .label {
  margin: 0;
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
}
.dict-secnav ul { margin: 0; padding: 0; list-style: none; }
.dict-secnav li { border-bottom: 1px solid var(--border); }
.dict-secnav li:last-child { border-bottom: none; }
.dict-secnav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 24px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.dict-secnav a:hover { background: var(--accent); color: var(--foreground); }
.dict-secnav .hash { color: var(--faint); margin-right: 8px; }
.dict-secnav .n {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 1024px) {
  .dict-layout { grid-template-columns: 18rem minmax(0, 1fr); }
  .dict-aside {
    position: sticky;
    top: var(--nav-height);
    align-self: start;
    max-height: calc(100vh - var(--nav-height));
    overflow-y: auto;
    border-bottom: none;
    border-right: 1px solid var(--border);
  }
  .dict-aside .dict-search { display: block; }
  .dict-secnav li:last-child { border-bottom: 1px solid var(--border); }
}

/* ---------- секция = система лодки --------------------------------------- */
.dict-section { border-bottom: 1px solid var(--border); }
.dict-section:last-of-type { border-bottom: none; }
.dict-sec-h {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--border);
}
.dict-sec-h h2 {
  margin: 0;
  font-family: var(--font-draw);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--primary);            /* тёмная тема: янтарь #FAC775 — заголовки систем не сливаются с фоном */
}
/* светлая тема: #FAC775 блёкнет на белом → тёмный янтарь (тот же, что бейдж типа каталога, §9) */
html[data-theme="light"] .dict-sec-h h2 { color: #936512; }
.dict-sec-h .n {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
  white-space: nowrap;
}
@media (min-width: 640px) { .dict-sec-h { padding: 26px 32px 20px; } .dict-sec-h h2 { font-size: 27px; } }

/* сетка терминов на 1px-зазорах (паттерн мозаики index) */
.term-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
}
@media (min-width: 640px) { .term-grid { grid-template-columns: 1fr 1fr; } }
.term-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px 24px;
  background: var(--background);
}
.term-card .row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
/* имя узла = физическое → osifont (семантический контракт §10) */
.term-card h3 {
  margin: 0;
  font-family: var(--font-draw);
  font-weight: 400;
  font-size: 19.5px;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.term-card .mid {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--faint);
  white-space: nowrap;
}
.term-card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--muted-foreground);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* узел С детальной статьёй = ссылка: hover-фон + янтарная риска + стрелка.
   Узел БЕЗ статьи = div без ссылки (ограждение PAGE_MAP §4) — той же
   типографикой, индекс выглядит полным. */
a.term-card { color: inherit; text-decoration: none; transition: background 0.15s; }
a.term-card:hover { background: var(--card); }
a.term-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--primary);
  opacity: 0;
  transition: opacity 0.15s;
}
a.term-card:hover::before { opacity: 1; }
a.term-card::after {
  content: "→";
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--faint);
  transition: color 0.15s, transform 0.15s;
}
a.term-card:hover::after { color: var(--foreground); transform: translateX(2px); }
a.term-card .row { padding-right: 26px; }
/* заполнитель нечётной ячейки (донор: hidden sm:block) */
.term-fill { display: none; background: var(--background); }
@media (min-width: 640px) { .term-fill { display: block; } }

/* пустой результат поиска */
.dict-empty {
  display: none;
  padding: 48px 24px;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--faint);
}
.dict-empty::before { content: "// "; }

/* ---------- detail: крошка + hero статьи ---------------------------------- */
.entry-crumb { border-bottom: 1px solid var(--border); padding: 13px 24px; }
.entry-crumb a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
  text-decoration: none;
}
/* стрелка «назад»: в сабсете только U+2192 — разворачиваем CSS-ом */
.entry-crumb a::before { content: "→"; display: inline-block; transform: rotate(180deg); }
.entry-crumb a:hover { color: var(--foreground); }

/* hero и тело статьи — ОДНА центрированная колонка --entry-measure
   (вердикт автора 2026-06-07: hero выровнять по колонке статьи).
   Центрирование боковыми паддингами: calc((100% - колонка) / 2). */
.page-entry { --entry-measure: 44rem; }
.entry-hero {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 44px max(24px, calc((100% - var(--entry-measure)) / 2)) 52px;
  border-bottom: 1px solid var(--border);
}
.entry-hero .kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
}
.entry-hero h1 {
  margin: 0;
  font-family: var(--font-draw);
  font-weight: 400;
  font-size: clamp(36px, 6vw, 56px);
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.entry-hero .lede {
  margin: 0;
  max-width: 56ch;
  font-size: 20px;
  line-height: 1.45;
  opacity: 0.7;
  text-wrap: balance;
}
.entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 8px; }
.entry-meta .btn { min-height: 38px; font-size: 13.5px; }
@media (min-width: 640px) {
  .entry-crumb { padding: 13px 48px; }
  .entry-hero { padding: 56px max(48px, calc((100% - var(--entry-measure)) / 2)) 64px; }
}

/* ---------- detail: тело — слой 1 plain English --------------------------- */
.entry-body {
  padding: 44px max(24px, calc((100% - var(--entry-measure)) / 2)) 56px;
  border-bottom: 1px solid var(--border);
  font-size: 18px;
  line-height: 1.65;
}
/* колонка статьи по центру и шире (вердикт автора 2026-06-07: как у донора) */
.entry-body > * { max-width: var(--entry-measure); margin-left: auto; margin-right: auto; }
.entry-body p { margin: 0 auto 1.2em; }
.entry-body p:last-child { margin-bottom: 0; }
/* ссылки на другие термины: подчёркивание янтарём, текст — fg (контраст
   обеих тем; янтарь текстом запрещён на светлой) */
.entry-body a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.entry-body a:hover { text-decoration-thickness: 2px; }
.entry-body em { color: var(--muted-foreground); }
.entry-body table { border-collapse: collapse; width: 100%; margin: 0 auto 1.4em; font-size: 15px; }
.entry-body th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
  padding: 8px 14px 8px 0;
  border-bottom: 1px solid var(--line);
}
.entry-body td { padding: 9px 14px 9px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.entry-body td:first-child { font-family: var(--font-mono); font-size: 13.5px; color: var(--muted-foreground); white-space: nowrap; }
@media (min-width: 640px) {
  .entry-body { padding: 56px max(48px, calc((100% - var(--entry-measure)) / 2)) 64px; }
}

/* ---------- detail: слой 2 «For engineers» — blueprint-рамка -------------- */
.entry-eng {
  position: relative;
  margin: 44px auto 0;
  padding: 30px 24px 28px;
  border: 1px solid var(--line);
  background: var(--card);
}
.entry-eng h2 {
  margin: 0 0 0.8em;
  font-family: var(--font-draw);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
}
.entry-eng .bp-mark { top: 10px; right: 12px; left: auto; bottom: auto; position: absolute; }
.entry-eng ul { margin: 0 0 1.2em; padding: 0; list-style: none; }
.entry-eng ul li { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.entry-eng ul li::before {
  content: "→";
  color: var(--primary);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.entry-eng .mono { font-size: 0.92em; }
@media (min-width: 640px) { .entry-eng { padding: 34px 32px 32px; } }

/* ---------- detail: кросс-линки на roadmap/гайд (новый блок PAGE_MAP §5.5) */
.entry-xlinks { border-bottom: 1px solid var(--border); }
.entry-xlinks .label {
  margin: 0;
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
}
.xlink {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 15px 24px;
  border-bottom: 1px solid var(--border);
  color: inherit;
  text-decoration: none;
}
.xlink:last-child { border-bottom: none; }
.xlink .mid {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--faint);
  min-width: 44px;
}
.xlink .xname { font-family: var(--font-draw); font-size: 16.5px; letter-spacing: 0.01em; }
.xlink .xgo {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted-foreground);
  white-space: nowrap;
}
.xlink .st { flex-shrink: 0; }
a.xlink { transition: background 0.15s; }
a.xlink:hover { background: var(--card); }
a.xlink:hover .xgo { color: var(--foreground); }
.xlink--soon .xname, .xlink--soon .mid { opacity: 0.62; }
.xlink--soon .xgo { color: var(--faint); }
@media (min-width: 640px) { .entry-xlinks .label, .xlink { padding-left: 48px; padding-right: 48px; } }

/* ---------- detail: Next term --------------------------------------------- */
.entry-next {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}
.entry-next .fill { display: none; background: var(--background); }
.next-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  min-height: 8rem;
  padding: 26px 24px;
  background: var(--background);
  color: inherit;
  text-decoration: none;
  transition: background 0.15s;
}
.next-card .kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
  transition: color 0.15s;
}
.next-card .kicker::after { content: " →"; }
.next-card strong {
  font-family: var(--font-draw);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.next-card:hover { background: var(--card); }
.next-card:hover .kicker { color: var(--foreground); }
@media (min-width: 640px) {
  .entry-next { grid-template-columns: 1fr 1fr; }
  .entry-next .fill { display: block; }
  .next-card { padding: 32px; }
}

/* share-строка под CTA (donor: mono-лейбл + кнопки) */
.entry-share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 0 24px 60px;
}
.entry-share .label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
}
.entry-share .btn { min-height: 38px; font-size: 13.5px; }

/* гайды (PAGE_MAP §6–7): лендинг серии + страница урока. Серия = модуль M-NN
   (первая — ARGUS-6 / M-07). Донор: aihero tutorial.index / tutorial.detail.
   index переиспользует скелет roadmap (.rm-*); detail — свой layout (липкий
   сайдбар уроков + тело с код-блоками и scrollycoding). Одобрено HITL-вердиктом
   2026-06-08 («перенеси в прод»; прототип /tmp/akula-proto/design3-guides). */

/* обе страницы — полноширинный леджер внутри контейнера 1200 */
.page-guide .site-main,
.page-lesson .site-main { max-width: none; padding: 0; }

/* кикер hero серии (rm-hero переиспользован; у roadmap кикера нет) */
.rm-hero .kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Source Code = disabled-чип «coming soon» (PAGE_MAP §6.1/§7.2 +
   OPEN_SOURCE_BOUNDARY v1.2: НЕ кнопка, НЕ ссылка). Формулировка
   «open schematics + firmware SDK». Станет ссылкой при публикации репо. */
.chip-soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--faint);
  font-family: var(--font-body);
  font-size: 14px;
  cursor: not-allowed;
  user-select: none;
}
.chip-soon .lbl { display: inline-flex; align-items: center; gap: 8px; }
.chip-soon .tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 7px;
}
.rm-bar .chip-soon, .lesson-actions .chip-soon { min-height: 40px; }

/* ---------- index: оглавление уроков (aside; донор: <ol> уроков) --------- */
.lesson-list { margin: 0; padding: 0; list-style: none; counter-reset: lesson; }
.lesson-list li { counter-increment: lesson; border-bottom: 1px solid var(--border); }
.lesson-list li:last-child { border-bottom: none; }
.lesson-list a,
.lesson-list .row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 12px 20px;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s;
}
.lesson-list a:hover { background: var(--card); }
.lesson-list .num {
  flex-shrink: 0;
  width: 2.4ch;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--faint);
}
.lesson-list .num::before { content: counter(lesson, decimal-leading-zero); }
.lesson-list .ltitle { flex: 1; font-size: 16px; font-weight: 500; line-height: 1.3; }
.lesson-list a:hover .ltitle { color: var(--foreground); }
.lesson-list .arr {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--faint);
  opacity: 0;
  transition: opacity 0.15s;
}
.lesson-list a:hover .arr { opacity: 1; }
/* строки «soon» — без ссылки, приглушены (нет страницы урока) */
.lesson-list .row { color: var(--muted-foreground); }
.lesson-list .row .ltitle { font-weight: 400; }
.lesson-list .soon {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 9px;
}

/* ---------- detail: раскладка сайдбар уроков | колонка урока ------------- */
.lesson-layout { display: flex; flex-direction: column; }
@media (min-width: 980px) {
  .lesson-layout { display: grid; grid-template-columns: 300px 1fr; align-items: start; }
  .lesson-side { border-right: 1px solid var(--border); }
}

/* серийный сайдбар (донор: серийная навигация; Autoplay УБРАН — реш. §7.1) */
.lesson-side { border-bottom: 1px solid var(--border); }
.lesson-side-h { padding: 18px 20px 16px; border-bottom: 1px solid var(--border); }
.lesson-side-h .series {
  margin: 0;
  font-family: var(--font-draw);
  font-weight: 400;
  font-size: 19px;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.lesson-side-h .meta {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
/* mobile-аккордеон через чекбокс (без JS; форс-open у <details> ненадёжен) */
.toc-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.toc-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}
.toc-summary .chev { font-family: var(--font-mono); color: var(--faint); transition: transform 0.2s; }
.toc-toggle:checked ~ .toc-summary .chev { transform: rotate(90deg); }
.toc-toggle:focus-visible ~ .toc-summary { outline: 2px solid var(--ring); outline-offset: -2px; }
.lesson-toc-wrap { display: none; }
.toc-toggle:checked ~ .lesson-toc-wrap { display: block; }

.lesson-toc { margin: 0; padding: 0; list-style: none; counter-reset: tl; }
.lesson-toc li { counter-increment: tl; }
.lesson-toc a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  color: var(--muted-foreground);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  line-height: 1.3;
  font-size: 14px;
  transition: background-color 0.15s, color 0.15s;
}
.lesson-toc a:hover { background: var(--card); color: var(--foreground); }
/* статус-маркер: done = CSS-галочка (глифа ✓ нет в latin-сабсете),
   current = янтарное кольцо, todo = тихий контур. Без шрифтовых глифов. */
.lesson-toc .mk {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  position: relative;
}
.lesson-toc .num {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--faint);
  min-width: 2ch;
}
.lesson-toc .num::before { content: counter(tl, decimal-leading-zero); }
.lesson-toc .done .mk { background: var(--primary); border-color: var(--primary); }
.lesson-toc .done .mk::after {
  content: "";
  position: absolute;
  left: 6px; top: 3px;
  width: 4px; height: 8px;
  border: solid var(--primary-foreground);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.lesson-toc .done a { color: var(--muted-foreground); }
.lesson-toc .done .num { color: var(--faint); }
.lesson-toc .current a { color: var(--foreground); background: var(--card); font-weight: 500; }
.lesson-toc .current .mk { border-color: var(--primary); border-width: 2px; }
.lesson-toc .current .num { color: var(--foreground); }
.lesson-toc .current { position: relative; }
.lesson-toc .current::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--primary);
}
.lesson-toc .todo .row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--border);
  color: var(--faint); font-size: 14px; line-height: 1.3;
}
.lesson-toc .todo .soon {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 7px;
}
.lesson-toc .ltitle { flex: 1; }
.lesson-toc li:last-child a, .lesson-toc li:last-child .row { border-bottom: none; }
@media (min-width: 980px) {
  .lesson-side {
    position: sticky;
    top: var(--nav-height);
    max-height: calc(100vh - var(--nav-height));
    overflow-y: auto;
    border-bottom: none;
  }
  .toc-summary { display: none; }
  .lesson-toc-wrap { display: block; }
}

/* ---------- detail: колонка урока --------------------------------------- */
.lesson-main { min-width: 0; }
.page-lesson { --lesson-measure: 46rem; }

.lesson-hero {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 36px max(24px, calc((100% - var(--lesson-measure)) / 2)) 32px;
  border-bottom: 1px solid var(--border);
}
.lesson-hero .kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
}
.lesson-hero h1 {
  margin: 0;
  font-family: var(--font-draw);
  font-weight: 400;
  font-size: clamp(30px, 4.5vw, 46px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
.lesson-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 6px;
}
.lesson-actions .author-chip { margin-right: auto; }
.lesson-actions .btn { min-height: 40px; font-size: 14px; }
.lesson-actions .next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  text-decoration: none;
}
.lesson-actions .next::after { content: "→"; }
.lesson-actions .next:hover { color: var(--foreground); }
@media (min-width: 640px) {
  .lesson-hero { padding: 48px max(40px, calc((100% - var(--lesson-measure)) / 2)) 40px; }
}

/* тело урока: прозой по мере (как entry-body) */
.lesson-body {
  padding: 40px max(24px, calc((100% - var(--lesson-measure)) / 2)) 48px;
  border-bottom: 1px solid var(--border);
  font-size: 17px;
  line-height: 1.65;
}
.lesson-body > * { max-width: var(--lesson-measure); margin-left: auto; margin-right: auto; }
.lesson-body p { margin: 0 auto 1.2em; }
.lesson-body h2 {
  max-width: var(--lesson-measure);
  margin: 1.8em auto 0.6em;
  font-family: var(--font-draw);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
}
.lesson-body h3 {
  max-width: var(--lesson-measure);
  margin: 1.6em auto 0.5em;
  font-weight: 600;
  font-size: 19px;
}
.lesson-body a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.lesson-body a:hover { text-decoration-thickness: 2px; }
.lesson-body em { color: var(--muted-foreground); }
.lesson-body ul { margin: 0 auto 1.2em; padding: 0; list-style: none; max-width: var(--lesson-measure); }
.lesson-body ul li { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.lesson-body ul li::before { content: "→"; color: var(--primary); font-family: var(--font-mono); flex-shrink: 0; }
@media (min-width: 640px) {
  .lesson-body { padding: 48px max(40px, calc((100% - var(--lesson-measure)) / 2)) 56px; }
}

/* код-блок (прошивка ESP32/TUSS4470, JITX — подпись канала). Без JS-подсветки
   (правило производительности): mono + леджер-рамка + шапка с именем файла. */
.codeblock {
  max-width: var(--lesson-measure);
  margin: 0 auto 1.6em;
  border: 1px solid var(--line);
  background: var(--card);
}
.codeblock .code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--faint);
}
.codeblock .code-head .lang { text-transform: uppercase; letter-spacing: 0.1em; }
.codeblock pre {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--foreground);
  tab-size: 2;
}
.codeblock pre .c { color: var(--faint); }            /* комментарий */
.codeblock pre .k { color: var(--muted-foreground); } /* числовое/ключевое — мягкий акцент */
.lesson-body code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}
.codeblock code { background: none; border: 0; padding: 0; font-size: inherit; }

/* scrollycoding адаптированный (PAGE_MAP §7.3 «схема едет рядом с текстом»):
   desktop — слева шаги, справа залипающая фигура; mobile — одна колонка. */
.scrolly { border-bottom: 1px solid var(--border); }
.scrolly-label {
  margin: 0;
  padding: 12px max(24px, calc((100% - var(--lesson-measure)) / 2));
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.scrolly-row { display: flex; flex-direction: column; }
.scrolly-step {
  padding: 28px max(24px, calc((100% - var(--lesson-measure)) / 2));
  border-bottom: 1px solid var(--border);
  font-size: 17px;
  line-height: 1.65;
}
.scrolly-step:last-child { border-bottom: none; }
.scrolly-step h3 { margin: 0 0 0.5em; font-weight: 600; font-size: 18px; }
.scrolly-step p { margin: 0 0 1em; }
.scrolly-step p:last-child { margin-bottom: 0; }
.scrolly-figure { padding: 20px 24px; background: var(--muted); border-bottom: 1px solid var(--border); }
.scrolly-figure .codeblock { margin: 0; max-width: none; }
.scrolly-figure .bp-cover { aspect-ratio: 4 / 3; border: 1px solid var(--border); max-width: none; }
@media (min-width: 860px) {
  .scrolly-row { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .scrolly-steps { border-right: 1px solid var(--border); }
  .scrolly-step { padding: 40px; }
  .scrolly-figwrap { position: sticky; top: var(--nav-height); }
  .scrolly-figure {
    padding: 28px;
    border-bottom: none;
    min-height: calc(100vh - var(--nav-height));
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
  }
}

/* Up Next + «Log in to save progress» (донор §7.4; прогресс-трекинг = слайс) */
.lesson-upnext {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--border);
  border-bottom: 1px solid var(--border);
}
.upnext-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px;
  background: var(--background);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s;
}
.upnext-card .kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
}
.upnext-card.go .kicker::after { content: " →"; }
.upnext-card strong {
  font-family: var(--font-draw);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: 0.01em;
}
a.upnext-card:hover { background: var(--card); }
a.upnext-card:hover .kicker { color: var(--foreground); }
.upnext-save { justify-content: center; }
.upnext-save .save-line { font-size: 15px; color: var(--muted-foreground); }
.upnext-save .save-line a { color: var(--foreground); text-decoration-color: var(--primary); }
.upnext-save .prog {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
@media (min-width: 640px) {
  .lesson-upnext { grid-template-columns: 1fr 1fr; }
  .upnext-card { padding: 32px; }
}

/* FAQ (PAGE_MAP §8): H1 + 5 категорий аккордеона + контакт-строка.
   Донор: aihero «FAQ» (Radix accordion → нативный <details>, без JS — как
   .rm-rejected). Контент свой; вопросы донора про покупку (PPP/seats/VAT)
   отброшены [🔒 гейт платформы]. Колонка вопросов по центру контейнера 1200. */

.page-faq .site-main { max-width: none; padding: 0; }

/* hero — донор: крупный одиночный H1 «FAQ» */
.faq-hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 56px 24px 40px;
  border-bottom: 1px solid var(--border);
}
.faq-hero .kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.faq-hero h1 {
  margin: 0;
  font-family: var(--font-draw);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.08;
  letter-spacing: 0.01em;
}
.faq-hero .lede {
  margin: 0;
  font-size: 17px;
  color: var(--muted-foreground);
  max-width: 56ch;
}
/* десктоп: горизонтальный отступ героя = канон 64px (как .rm-hero/.dict-hero-
   copy/.entry-hero); базовые 24px оставались только для мобильной ширины */
@media (min-width: 768px) {
  .faq-hero { padding: 56px 64px 40px; }
}

/* тело: колонка вопросов по центру (читаемая мера) */
.faq-body {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 8px 24px 16px;
}

/* категория — mono-лейбл секции на тихой линии */
.faq-group { margin-top: 44px; }
.faq-group:first-of-type { margin-top: 28px; }
.faq-cat {
  margin: 0 0 2px;
  padding: 0 4px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: 1px solid var(--line);
}

/* элемент аккордеона — нативный <details> */
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 16px 4px;
  cursor: pointer;
  list-style: none;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--foreground);
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
  border-radius: var(--radius);
}
.faq-chev {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--faint);
  transition: transform 0.2s, color 0.2s;
}
.faq-item summary:hover .faq-chev { color: var(--muted-foreground); }
.faq-item[open] .faq-chev { transform: rotate(90deg); color: var(--muted-foreground); }
.faq-a { padding: 0 4px 22px; max-width: 64ch; }
.faq-a p {
  margin: 0 0 0.85em;
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted-foreground);
}
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a { color: var(--foreground); text-decoration-color: var(--primary); text-underline-offset: 2px; }
.faq-a a:hover { color: var(--primary); }

/* контакт-строка — донор: «contact us at …» */
.faq-contact {
  margin-top: 8px;
  padding: 36px 24px 64px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.faq-contact p { margin: 0; font-size: 16px; color: var(--muted-foreground); }
.faq-contact a {
  color: var(--foreground);
  font-weight: 500;
  text-decoration-color: var(--primary);
  text-underline-offset: 2px;
}
.faq-contact a:hover { color: var(--primary); }


/* ============================================================
   CATALOG 3.0 (page-catalog) — PAGE_MAP §9.
   Донор: aihero «calatao_browse_all» (тулбар: поиск + Type-фильтр +
   сортировка + RSS + сетка карточек). Всё-в-одном: посты · гайды ·
   статьи словаря (The Boat) · видео · модули (waitlist).
   Авто-обложки (дев-задача В.6): заголовок на blueprint-сетке через
   .bp .bp-cover (osifont = чертёж/физическое), mono-код в углу. Без
   файлов-картинок. Поиск/фильтр/сортировка = vanilla JS, PE.
   ============================================================ */

.page-catalog .site-main { max-width: none; padding: 0; }

/* hero — донор: H1 + подзаголовок над тулбаром */
.cat-hero {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 56px 24px 32px;
}
.cat-hero .kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.cat-hero h1 {
  margin: 0;
  font-family: var(--font-draw);
  font-weight: 400;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.08;
  letter-spacing: 0.01em;
}
.cat-hero .lede {
  margin: 0;
  font-size: 17px;
  color: var(--muted-foreground);
  max-width: 60ch;
}

/* тулбар: липкий под шапкой (донор: sticky search) */
.cat-toolbar {
  position: sticky;
  top: var(--nav-height);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 24px;
  background: color-mix(in srgb, var(--background) 92%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cat-search { position: relative; }
.cat-search input {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  font: inherit;
  font-size: 15px;
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.cat-search input::placeholder { color: var(--faint); }
.cat-search input:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
  border-color: var(--ring);
}
.cat-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* фильтр по типу — чипы (button group, vanilla, aria-pressed) */
.cat-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cat-chip {
  flex-shrink: 0;
  padding: 7px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}
.cat-chip:hover { color: var(--foreground); border-color: var(--line); }
.cat-chip:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.cat-chip.is-active {
  color: var(--primary-foreground);
  background: var(--primary);
  border-color: var(--primary);
}

/* сортировка + RSS */
.cat-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cat-sort {
  height: 38px;
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  background: var(--card);   /* нативная стрелка — без захардкоженного цвета */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.cat-sort:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.cat-rss {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}
.cat-rss:hover { color: var(--primary); border-color: var(--line); }
.cat-rss:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

/* сетка карточек: 1px-зазоры, но линии рисует САМА карточка (box-shadow в
   зазор) — иначе фон сетки проступает светлым пятном в пустых ячейках при
   фильтре/неполном ряде. Пустая ячейка = фон страницы, без пятна. */
.cat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: transparent;
}
.cat-card {
  display: flex;
  flex-direction: column;
  background: var(--background);
  box-shadow: 0 0 0 1px var(--border);
  text-decoration: none;
  color: var(--foreground);
  transition: filter 0.2s;
}
.cat-card:hover { filter: brightness(1.12); color: var(--foreground); }
html[data-theme="light"] .cat-card:hover { filter: none; background: var(--card); }
.cat-card:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }

/* авто-обложка: заголовок на blueprint-сетке (.bp .bp-cover) */
.cat-card .bp-cover { border-bottom: 1px solid var(--border); }
.cat-card .bp-title {
  font-size: 19px;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cat-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 22px 22px;
}
.cat-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
/* бейдж типа: цветовое кодирование (⚠️ эксперимент, не канон §10).
   Цвет = текст + тонированная рамка, без заливки (сдержанно). */
.cat-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--bc, var(--faint)) 42%, transparent);
  border-radius: 4px;
  color: var(--bc, var(--faint));
}
.cat-badge--post   { --bc: var(--type-post); }
.cat-badge--guide  { --bc: var(--type-guide); }
.cat-badge--boat   { --bc: var(--type-boat); }
.cat-badge--video  { --bc: var(--type-video); }
.cat-badge--module { --bc: var(--type-module); }
.cat-date {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--faint);
}
.cat-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted-foreground);
}

.cat-empty {
  display: none;
  padding: 56px 24px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--faint);
}

@media (min-width: 640px) {
  .cat-hero { padding: 72px 32px 36px; }
  .cat-toolbar { padding: 16px 32px; }
  .cat-controls { flex-direction: row; align-items: center; justify-content: space-between; }
  .cat-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .cat-grid { grid-template-columns: 1fr 1fr 1fr; }
}


/* ============================================================
   MODULE PACK 3.0 (page-pack) — PAGE_MAP §10.
   Донор: aihero «сohort_page» (продающий лонгрид когортного курса).
   Берём структуру лонгрида ЦЕЛИКОМ (hero → нарратив проблема/ошибки 01-02
   → before/after → «What's inside» → повторный CTA → B2B-хвост), наполняем
   по §10. 🔒 ГЕЙТ канона v1.7: без цен, без «купить», без дат — мета-строка
   ровно «In development · Join the waitlist». Цитаты Karpathy убраны (1.9).
   Open-source формулировка: «open schematics + firmware SDK» (BOUNDARY v1.2),
   НЕ «full open source firmware». Узкая центр-колонка как entry/lesson.
   Переиспользует: .bp .bp-cover (авто-обложка), .st--plan (пилюли «planned»),
   .cat-card (короткие паки в «More packs»). Шаблон ПОЛНЫЙ — наполнение пока
   сокращённое (DEMO/[PLACEHOLDER], финал текстов за /business).
   ⚠️ Прод-template/view ждёт слайс: текущий /packs/{pk}/ (вьюха pack_page →
   pack.html) — живой коммерческий флоу claim/Q&A/downloads под тестами; этот
   3.0-лонгрид = пре-гейтовая waitlist-поверхность (email + тег модуля), не
   замена pack.html без бэкенд-решения. Прототип-спека:
   business/design_3.0/design/pack/. Класс page-pack пока без прод-шаблона.
   ============================================================ */
.page-pack { --pack-measure: 46rem; }
.page-pack .site-main { max-width: none; padding: 0; }

/* центр-колонка: одинаковый паттерн боковых отступов у всех секций пака */
.pack-wrap { padding-left: max(24px, calc((100% - var(--pack-measure)) / 2));
             padding-right: max(24px, calc((100% - var(--pack-measure)) / 2)); }

/* ---------- крошка «← назад к пакам» ------------------------------------- */
.pack-crumb { border-bottom: 1px solid var(--border); }
.pack-crumb a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--faint); text-decoration: none;
}
.pack-crumb a::before { content: "→"; display: inline-block; transform: rotate(180deg); }
.pack-crumb a:hover { color: var(--muted-foreground); }

/* ---------- hero: бейдж + H1(имя пака, osifont) + lede + мета-гейт + обложка + автор */
.pack-hero {
  display: flex; flex-direction: column; gap: 18px;
  padding-top: 44px; padding-bottom: 48px;
  border-bottom: 1px solid var(--border);
}
.pack-badge {
  align-self: start;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent);
  border-radius: 999px; padding: 5px 12px; line-height: 1;
}
.pack-hero h1 {
  margin: 0;
  font-family: var(--font-draw); font-weight: 400;
  font-size: clamp(36px, 6vw, 56px); line-height: 1.05; letter-spacing: 0.01em;
  text-wrap: balance;
}
.pack-hero .lede {
  margin: 0; max-width: 56ch;
  font-size: 20px; line-height: 1.45; opacity: 0.7; text-wrap: balance;
}
/* 🔒 мета-строка-гейт: ровно «In development · Join the waitlist» — без цен/дат */
.pack-status {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 13px; color: var(--muted-foreground);
}
.pack-status::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px;
  background: var(--primary); flex-shrink: 0;
}
.pack-cover { margin-top: 6px; }
.pack-cover .bp-cover {
  aspect-ratio: 16 / 9; border: 1px solid var(--line);
}
.pack-byline { display: flex; align-items: center; gap: 12px; margin-top: 2px; }
.pack-byline .avatar {
  width: 40px; height: 40px; border-radius: 999px; flex-shrink: 0;
  background: var(--secondary); border: 1px solid var(--line);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 13px; color: var(--muted-foreground);
}
.pack-byline .who { font-size: 14px; line-height: 1.35; }
.pack-byline .who b { font-weight: 600; }
.pack-byline .who span { color: var(--faint); }

/* ---------- тело-лонгрид: проза (как entry-body) -------------------------- */
.pack-body {
  padding-top: 44px; padding-bottom: 8px;
  font-size: 18px; line-height: 1.65;
}
.pack-body > p { margin: 0 0 1.2em; }
.pack-body a {
  color: inherit; text-decoration: underline;
  text-decoration-color: var(--primary); text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.pack-body a:hover { text-decoration-thickness: 2px; }
.pack-body em { color: var(--muted-foreground); font-style: normal; }
.pack-h2 {
  margin: 1.4em 0 0.7em;
  font-family: var(--font-draw); font-weight: 400;
  font-size: clamp(24px, 3.4vw, 30px); line-height: 1.15;
}

/* ---------- нумерованные ошибки 01/02 (донор: Error #1/#2) ---------------- */
.pack-mistake {
  display: grid; grid-template-columns: auto 1fr; gap: 16px 18px;
  align-items: start;
  padding: 22px 0; border-top: 1px solid var(--border);
}
.pack-mistake:last-of-type { border-bottom: 1px solid var(--border); }
.pack-mistake .num {
  font-family: var(--font-mono); font-size: 26px; line-height: 1;
  color: var(--faint); font-variant-numeric: tabular-nums;
}
.pack-mistake h3 {
  margin: 2px 0 6px; font-family: var(--font-draw); font-weight: 400;
  font-size: 19px; line-height: 1.2;
}
.pack-mistake p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--muted-foreground); }

/* ---------- before / after (🔒 канон: red --destructive ТОЛЬКО здесь) ----- */
.pack-ba {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  margin: 1.6em 0;
}
.pack-ba__col { background: var(--card); padding: 22px 22px 24px; }
.pack-ba__tag {
  display: inline-block; margin-bottom: 12px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
}
.pack-ba__before .pack-ba__tag { color: var(--destructive); }
.pack-ba__after  .pack-ba__tag { color: var(--primary); }
.pack-ba__before { border-top: 2px solid var(--destructive); }
.pack-ba__after  { border-top: 2px solid var(--primary); }
.pack-ba h4 {
  margin: 0 0 12px; font-family: var(--font-draw); font-weight: 400;
  font-size: 17px; line-height: 1.2;
}
.pack-ba ul { margin: 0; padding: 0; list-style: none; }
.pack-ba li {
  display: flex; gap: 9px; align-items: baseline;
  font-size: 15px; line-height: 1.5; color: var(--muted-foreground);
  margin-bottom: 8px;
}
.pack-ba li:last-child { margin-bottom: 0; }
.pack-ba__before li::before { content: "×"; color: var(--destructive); font-family: var(--font-mono); flex-shrink: 0; }
.pack-ba__after  li::before { content: "→"; color: var(--primary);     font-family: var(--font-mono); flex-shrink: 0; }
@media (min-width: 640px) { .pack-ba { grid-template-columns: 1fr 1fr; } }

/* ---------- «What's inside (planned)» — список с .st--plan --------------- */
.pack-inside { padding-top: 12px; padding-bottom: 44px; border-bottom: 1px solid var(--border); }
.pack-inside .label {
  margin: 0 0 4px; font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint);
}
.pack-inside ul { margin: 0; padding: 0; list-style: none; }
.pack-inside li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
  padding: 16px 0; border-bottom: 1px solid var(--border);
}
.pack-inside li:last-child { border-bottom: none; }
.pack-inside .iname { font-family: var(--font-draw); font-size: 17px; letter-spacing: 0.01em; }
.pack-inside .idesc { flex: 1 1 100%; margin: 4px 0 0; font-size: 15px; color: var(--muted-foreground); line-height: 1.5; }
.pack-inside .st { margin-left: auto; }
/* open-source строка + disabled-чип Source Code «coming soon» */
.pack-osnote {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 22px; font-size: 14.5px; color: var(--muted-foreground); line-height: 1.5;
}
.chip-soon {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--faint); border: 1px dashed var(--line);
  border-radius: 999px; padding: 5px 11px; cursor: not-allowed;
}
.chip-soon::after { content: "coming soon"; color: var(--faint); opacity: 0.8; }

/* ---------- CTA waitlist «Notify me when it launches» (повторяющийся) ----- */
.pack-cta {
  padding-top: 40px; padding-bottom: 44px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.pack-cta--mid { background: var(--card); }
.pack-cta h2 {
  margin: 0 0 8px; font-family: var(--font-draw); font-weight: 400;
  font-size: clamp(24px, 3.4vw, 30px); line-height: 1.15;
}
.pack-cta p.sub { margin: 0 auto 22px; max-width: 46ch; color: var(--muted-foreground); font-size: 16px; line-height: 1.5; }
.pack-form {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  max-width: 30rem; margin: 0 auto;
}
.pack-form .email {
  flex: 1 1 16rem; min-width: 0;
  font-family: var(--font-body); font-size: 15px; color: var(--foreground);
  background: var(--background); border: 1px solid var(--input);
  border-radius: 999px; padding: 12px 18px;
}
.pack-form .email::placeholder { color: var(--faint); }
.pack-form .email:focus { outline: 2px solid var(--ring); outline-offset: 1px; border-color: var(--ring); }
.pack-form .btn { flex: 0 0 auto; }
/* опц. согласие на The Build Log (отдельное от waitlist, S8) — под формой */
.pack-also {
  flex: 1 1 100%; display: flex; align-items: center; gap: 8px;
  justify-content: center; margin-top: 2px;
  font-size: 13px; color: var(--muted-foreground);
}
.pack-cta .note { margin: 14px auto 0; max-width: 40ch; font-size: 12.5px; color: var(--faint); line-height: 1.5; }

/* ---------- B2B-хвост: одна строка, без форм ----------------------------- */
.pack-b2b {
  padding-top: 26px; padding-bottom: 30px;
  border-bottom: 1px solid var(--border);
  font-size: 15px; color: var(--muted-foreground); line-height: 1.55;
}
.pack-b2b a { color: inherit; text-decoration: underline; text-decoration-color: var(--primary); text-underline-offset: 3px; }

/* ---------- «More Module Packs (in development)» — короткие паки ---------- */
.pack-more { padding-top: 40px; padding-bottom: 52px; }
.pack-more .label {
  margin: 0 0 18px; font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint);
}
.pack-more-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .pack-more-grid { grid-template-columns: 1fr 1fr 1fr; } }

@media (min-width: 640px) {
  .pack-crumb a { padding-left: 48px; }
  .page-pack { --pack-measure: 46rem; }
  .pack-wrap { padding-left: max(48px, calc((100% - var(--pack-measure)) / 2));
               padding-right: max(48px, calc((100% - var(--pack-measure)) / 2)); }
  .pack-hero { padding-top: 56px; padding-bottom: 60px; }
}


/* ============================================================
   §5. LEGACY 2.0 — страницы, ещё не мигрировавшие на 3.0.
   Токены перемаплены (--text→--foreground, --surface→--card,
   --grid→--border, --text-2→--muted-foreground, --text-3→--faint,
   --accent→--primary, --danger→--destructive). ПОД СНОС по мере
   раскатки 3.0 на catalog/pack/login/account/служебные.
   ============================================================ */

/* колонка контента legacy-страниц */
.site-main {
  flex: 1;
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding: calc(6 * var(--space)) calc(3 * var(--space)) calc(8 * var(--space));
}
/* index 3.0 — полноширинный леджер */
.page-index .site-main { max-width: none; padding: 0; }

h1 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  margin: 0 0 calc(2 * var(--space));
}
h1.draw { font-family: var(--font-draw); font-weight: 400; font-size: 2rem; }
/* только legacy-страницы (без body-класса page-*): иначе перебивает
   компонентные h2 3.0 (.section-h2, .builtwith h2, …) — регрессия шага 1 */
body:not([class*="page-"]) .site-main h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.125rem;
  margin: calc(5 * var(--space)) 0 calc(2 * var(--space));
}
p { margin: 0 0 calc(2 * var(--space)); }
@media (min-width: 640px) {
  h1 { font-size: 2.25rem; }
  h1.draw { font-size: 2.5rem; }
  body:not([class*="page-"]) .site-main h2 { font-size: 1.25rem; }
}

.meta {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
}

/* янтарная отсечка под H1 (экраны без главного действия) */
.rule-accent {
  width: 24px;
  height: 2px;
  border: 0;
  margin: 0 0 calc(4 * var(--space));
  background-color: var(--primary);
}

/* legacy-кнопки: контурные, форма унаследована от 3.0 .btn (пилюля) */
.btn-primary { border: 1px solid var(--primary); color: var(--primary); }
.btn-primary:hover,
.btn-primary:focus-visible { background-color: var(--primary); color: var(--primary-foreground); }
.btn-secondary { border: 1px solid var(--line); color: var(--foreground); }
.btn-secondary:hover { border-color: var(--muted-foreground); color: var(--foreground); }
.btn-danger { border: 1px solid var(--destructive); color: var(--destructive); }
.btn-danger:hover,
.btn-danger:focus-visible { background-color: var(--destructive); color: var(--destructive-foreground); }

.field { margin-bottom: calc(3 * var(--space)); }
.field-label {
  display: block;
  margin-bottom: var(--space);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
}
.input {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0 calc(1.5 * var(--space));
  border: 1px solid var(--input);
  border-radius: var(--radius);
  background-color: var(--card);
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 1rem;
}
.input:focus {
  border-color: var(--ring);
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.input[aria-invalid="true"] { border-color: var(--destructive); }
.field-error {
  margin-top: var(--space);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--destructive);
}
.field-help { margin-top: var(--space); font-size: 0.875rem; color: var(--faint); }
.input-area {
  height: auto;
  min-height: calc(16 * var(--space));
  padding: calc(1.5 * var(--space));
  resize: vertical;
  line-height: 1.5;
}

/* legacy-бейдж каталога/пака (контурный прямоугольник) */
.badge {
  display: inline-block;
  padding: 2px calc(1 * var(--space));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
}
.badge-archived { border-style: dashed; border-color: var(--faint); color: var(--faint); }

.table { width: 100%; border-collapse: collapse; }
.table th {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
  text-align: left;
  padding: var(--space) calc(2 * var(--space)) var(--space) 0;
  border-bottom: 1px solid var(--line);
}
.table td {
  padding: calc(1.5 * var(--space)) calc(2 * var(--space)) calc(1.5 * var(--space)) 0;
  border-bottom: 1px solid var(--border);
}
.table tbody tr:hover { background-color: var(--card); }

.notice {
  border-left: 2px solid var(--line);
  background-color: var(--card);
  padding: calc(2 * var(--space)) calc(2 * var(--space));
  font-size: 0.875rem;
  margin: 0 0 calc(3 * var(--space));
}
.notice p:last-child { margin-bottom: 0; }
.notice-danger { border-left-color: var(--destructive); }

.subnote { font-size: 0.875rem; color: var(--faint); margin: var(--space) 0 0; }
.empty { color: var(--muted-foreground); }
.account-email { font-family: var(--font-mono); font-size: 0.9375rem; color: var(--muted-foreground); }

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(2 * var(--space));
  margin: calc(3 * var(--space)) 0;
}
a.card {
  display: block;
  background-color: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: calc(3 * var(--space));
  color: var(--foreground);
  text-decoration: none;
}
a.card:hover,
a.card:focus-visible { border-color: var(--muted-foreground); color: var(--foreground); }
.card-id { display: block; font-family: var(--font-draw); font-size: 0.875rem; color: var(--faint); }
.card-name { display: block; font-family: var(--font-draw); font-size: 1.375rem; margin-top: var(--space); }
.card-badges { display: block; margin-top: calc(1.5 * var(--space)); }
.card-desc { display: block; font-size: 0.875rem; color: var(--muted-foreground); margin-top: var(--space); }
@media (min-width: 720px) { .card-grid { grid-template-columns: 1fr 1fr; } }

/* табы линз (Engineer/Builder) — CSS :target, без JS */
.lens-tabs {
  display: flex;
  gap: calc(3 * var(--space));
  border-bottom: 1px solid var(--border);
  margin-top: calc(4 * var(--space));
}
.lens-tabs a {
  font-size: 0.9375rem;
  color: var(--faint);
  text-decoration: none;
  padding: calc(1.5 * var(--space)) 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.lens-tabs a:hover { color: var(--muted-foreground); }
.lens { display: none; margin-top: calc(3 * var(--space)); }
.lens:first-of-type,
.lens:target { display: block; }
html:has(#builder:target) .lens:first-of-type:not(:target) { display: none; }
html:not(:has(#builder:target)) .lens-tabs a[href="#engineer"],
html:has(#builder:target) .lens-tabs a[href="#builder"] {
  color: var(--foreground);
  border-bottom-color: var(--ring);
}

.qa-thread { margin: calc(3 * var(--space)) 0; }
.qa-question { margin-bottom: var(--space); }
.qa-meta { font-family: var(--font-mono); font-size: 0.75rem; color: var(--faint); margin-bottom: calc(2 * var(--space)); }
.qa-answer { border-left: 2px solid var(--line); padding-left: calc(2 * var(--space)); }
.qa-answer-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-foreground);
  margin-bottom: var(--space);
}

#claim { margin-top: calc(5 * var(--space)); }
.video-preview {
  display: block;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: calc(3 * var(--space)) 0;
}
.file-list {
  list-style: none;
  margin: 0 0 calc(2 * var(--space));
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.875rem;
}
.file-list li { padding: var(--space) 0; border-bottom: 1px solid var(--border); }

.form-narrow { max-width: 24rem; }

.pack-list { list-style: none; margin: 0 0 calc(2 * var(--space)); padding: 0; }
.pack-list li { padding: calc(1.5 * var(--space)) 0; border-bottom: 1px solid var(--border); }
.pack-list .mono { font-size: 0.875rem; color: var(--faint); margin-right: calc(1.5 * var(--space)); }

.signout-form { margin: calc(4 * var(--space)) 0; }
.danger-zone { margin-top: calc(8 * var(--space)); }