/* ==============================================================
   S2AI — дизайн-система контентных страниц
   Используется всеми страницами кроме index.html (у него свой
   инлайн-CSS) и правовых страниц (у них legal.css).
   Темы и настройки читаются из того же localStorage-ключа
   s2ai.tweaks, что и на главной, — оформление сквозное.
   ============================================================== */

:root{
  --bg: #f3ede2;
  --bg-2: #ece4d5;
  --ink: #16221c;
  --ink-2: #2a3830;
  --ink-mute: #5b6860;
  --line: #c9beab;
  --line-2: #ddd1bb;
  --card: #ebe1cd;
  --forest: #1a3a2e;
  --forest-2: #12271f;
  --ember: #c2410c;
  --ember-2: #9a3309;
  --cream: #f8f2e7;
  --warn: #c2410c;

  --f-display: "Instrument Serif", ui-serif, Georgia, serif;
  --f-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, monospace;

  --radius: 14px;
  --radius-lg: 22px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --wrap: 1200px;

  color-scheme: light;
}

html[data-theme="dark"]{
  --bg: #0e1411;
  --bg-2: #131a16;
  --ink: #eee7d8;
  --ink-2: #d8ceb9;
  --ink-mute: #8a9489;
  --line: #283128;
  --line-2: #1c2420;
  --card: #141c17;
  --forest: #c3e2ce;
  --forest-2: #9ac9ab;
  --ember: #e77a3c;
  --ember-2: #ffa973;
  --cream: #1a2219;
  color-scheme: dark;
}

html[data-theme="mono"]{
  --bg: #eeeae2;
  --bg-2: #e4dfd4;
  --ink: #0b0b0b;
  --ink-2: #1a1a1a;
  --ink-mute: #555;
  --line: #b4ac9e;
  --line-2: #cfc6b5;
  --card: #e4dfd4;
  --forest: #0b0b0b;
  --forest-2: #000;
  --ember: #0b0b0b;
  --ember-2: #000;
  --cream: #f3efe7;
}

/* --------------------------------------------------------------
   База
   -------------------------------------------------------------- */
*{ box-sizing: border-box }
html,body{ margin:0; padding:0 }

body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap{
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 32px;
}

a{ color: inherit }

/* Зерно — та же текстура, что на главной */
.grain{
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .55; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
html[data-grain="off"] .grain{ display: none }
html[data-theme="dark"] .grain{ mix-blend-mode: screen; opacity: .28 }

/* --------------------------------------------------------------
   Типографика
   -------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
}
h1{ font-size: clamp(38px, 5.2vw, 68px) }
h2{ font-size: clamp(28px, 3.4vw, 44px); margin-top: 64px; margin-bottom: 20px }
h3{ font-size: clamp(21px, 2.1vw, 28px); margin-top: 40px; margin-bottom: 14px }
h4{ font-size: 19px; margin-top: 28px; margin-bottom: 10px }
h1 em, h2 em, h3 em{ font-style: italic; color: var(--ember) }

p{ margin: 0 0 18px }
strong{ font-weight: 600 }

.mono{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.sec-num{
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 22px;
}

/* --------------------------------------------------------------
   Шапка
   -------------------------------------------------------------- */
.nav{
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-2);
}
.nav-inner{
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 66px;
}
.logo{
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; font-weight: 600; letter-spacing: -.01em;
}
.logo .mark{
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--forest); position: relative; flex: none;
}
.logo .mark::after{
  content:''; position:absolute; inset: 6px;
  border-radius: 50%; background: var(--ember);
}
.menu{ display: flex; gap: 26px; font-size: 14px }
.menu a{
  text-decoration: none; color: var(--ink-2); opacity: .82;
  transition: opacity .2s var(--ease);
}
.menu a:hover, .menu a[aria-current="page"]{ opacity: 1; color: var(--ember) }

/* --------------------------------------------------------------
   Кнопки
   -------------------------------------------------------------- */
.btn{
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 500; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .2s var(--ease), background .2s var(--ease);
}
.btn .arrow{ transition: transform .25s var(--ease) }
.btn:hover .arrow{ transform: translateX(4px) }
.btn.primary{ background: var(--ember); color: #fff }
.btn.primary:hover{ background: var(--ember-2) }
.btn.ghost{ border-color: var(--line); color: var(--ink) }
.btn.ghost:hover{ border-color: var(--ink-mute) }

/* --------------------------------------------------------------
   Хлебные крошки
   -------------------------------------------------------------- */
.crumbs{
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute);
  padding: 34px 0 0;
}
.crumbs a{ text-decoration: none; border-bottom: 1px dashed var(--line) }
.crumbs a:hover{ color: var(--ember); border-color: var(--ember) }
.crumbs span{ margin: 0 8px; opacity: .5 }

/* --------------------------------------------------------------
   Шапка страницы и лид
   -------------------------------------------------------------- */
.page-head{ padding: 30px 0 10px; position: relative; z-index: 2 }

/* Прямой ответ — первый блок, который забирают ИИ-ассистенты */
.lead{
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 78ch;
  margin: 26px 0 0;
  padding-left: 20px;
  border-left: 2px solid var(--ember);
}

/* --------------------------------------------------------------
   Контент
   -------------------------------------------------------------- */
.content{
  position: relative; z-index: 2;
  padding: 10px 0 90px;
  max-width: 78ch;
}
.content.wide{ max-width: none }
.content ul, .content ol{ margin: 0 0 20px; padding-left: 22px }
.content li{ margin-bottom: 9px }
.content a{ color: var(--ember); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--ember) 35%, transparent) }
.content a:hover{ border-color: var(--ember) }

/* Таблицы — самый цитируемый ассистентами формат, поэтому заметные */
.table-scroll{ overflow-x: auto; margin: 0 0 26px }
table{
  width: 100%; border-collapse: collapse;
  font-size: 14.5px; min-width: 520px;
}
th, td{
  text-align: left; padding: 13px 16px;
  border-bottom: 1px solid var(--line-2);
  vertical-align: top;
}
th{
  font-family: var(--f-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 500;
  border-bottom: 1px solid var(--line);
}
tbody tr:hover{ background: color-mix(in srgb, var(--card) 55%, transparent) }

/* Блок фактов */
.facts{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--line-2);
  border: 1px solid var(--line-2); border-radius: var(--radius);
  overflow: hidden; margin: 30px 0;
}
.fact{ background: var(--bg); padding: 20px 22px }
.fact .k{
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 8px;
}
.fact .v{ font-size: 16px; line-height: 1.4; color: var(--ink) }
.fact .v.big{ font-family: var(--f-display); font-size: 30px; line-height: 1.1 }

/* Карточки */
.cards{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px; margin: 30px 0;
}
.card-item{
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--radius); padding: 24px;
}
.card-item h3{ margin-top: 0; font-size: 22px }
.card-item p:last-child{ margin-bottom: 0 }

/* Врезка */
.callout{
  background: var(--card); border: 1px solid var(--line-2);
  border-left: 3px solid var(--ember);
  border-radius: var(--radius); padding: 22px 24px; margin: 30px 0;
}
.callout p:last-child{ margin-bottom: 0 }

/* Терминальный блок — фирменный приём с главной */
.term{
  font-family: var(--f-mono); font-size: 12.5px;
  background: var(--forest); color: var(--cream);
  border-radius: var(--radius); padding: 16px 20px; margin: 28px 0;
  overflow-x: auto;
}
html[data-theme="dark"] .term{ background: var(--bg-2); border: 1px solid var(--line) }
.term .prompt{ color: var(--ember-2); margin-right: 8px }

/* --------------------------------------------------------------
   FAQ
   -------------------------------------------------------------- */
.faq-list{ margin: 26px 0 0; border-top: 1px solid var(--line-2) }
.faq-item{ border-bottom: 1px solid var(--line-2) }
.faq-q{
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-family: var(--f-display); font-size: 20px; line-height: 1.3;
}
.faq-q::-webkit-details-marker{ display: none }
.faq-q .n{
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em;
  color: var(--ink-mute); padding-top: 7px; flex: none;
}
.faq-q .p{ margin-left: auto; flex: none; position: relative; width: 14px; height: 14px; margin-top: 7px }
.faq-q .p::before, .faq-q .p::after{
  content:''; position: absolute; background: var(--ink-mute);
  transition: transform .25s var(--ease);
}
.faq-q .p::before{ inset: 6px 0 auto; height: 1.5px }
.faq-q .p::after{ inset: 0 6px auto; width: 1.5px; height: 14px }
.faq-item[open] .faq-q .p::after{ transform: scaleY(0) }
.faq-a{ padding: 0 0 22px 40px; color: var(--ink-2); max-width: 72ch }
.faq-a p:last-child{ margin-bottom: 0 }

/* --------------------------------------------------------------
   Перелинковка и CTA
   -------------------------------------------------------------- */
.related{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; margin: 34px 0 0;
}
.related a{
  display: block; padding: 20px 22px;
  background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--radius); text-decoration: none;
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.related a:hover{ border-color: var(--ember); transform: translateY(-2px) }
.related .k{
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 7px;
}
.related .t{ font-family: var(--f-display); font-size: 19px; line-height: 1.25 }

.cta-band{
  background: var(--forest); color: var(--cream);
  border-radius: var(--radius-lg);
  padding: 52px 44px; margin: 70px 0 0;
  position: relative; z-index: 2;
}
.cta-band h2{ margin: 0 0 14px; color: var(--cream); font-size: clamp(26px, 3vw, 38px) }
.cta-band h2 em{ color: var(--ember-2) }
.cta-band p{ opacity: .82; max-width: 62ch }
html[data-theme="mono"] .cta-band{ background: var(--ink); }

/* --------------------------------------------------------------
   Футер
   -------------------------------------------------------------- */
footer{
  border-top: 1px solid var(--line-2);
  margin-top: 80px; padding: 54px 0 40px;
  position: relative; z-index: 2;
  font-size: 14px; color: var(--ink-2);
}
.foot-grid{
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px; margin-bottom: 44px;
}
.foot-grid h5{
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-mute); margin: 0 0 14px; font-weight: 500;
}
.foot-grid a{ display: block; text-decoration: none; opacity: .78; margin-bottom: 9px }
.foot-grid a:hover{ opacity: 1; color: var(--ember) }
.foot-logo{ display: flex; align-items: center; gap: 10px; font-weight: 600; margin-bottom: 14px }
.foot-logo .mark{ width: 22px; height: 22px; border-radius: 50%; background: var(--forest); position: relative }
.foot-logo .mark::after{ content:''; position: absolute; inset: 6px; border-radius: 50%; background: var(--ember) }
.foot-desc{ max-width: 44ch; opacity: .78 }
.foot-req{
  border-top: 1px solid var(--line-2); padding-top: 26px;
  display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--ink-mute);
}
.foot-req strong{ display: block; margin-bottom: 8px; color: var(--ink-2) }
.foot-req p{ margin: 0 0 4px }
.req-links{ display: flex; flex-direction: column; gap: 7px }
.req-links a{ text-decoration: none; border-bottom: 1px dashed var(--line) }
.req-links a:hover{ color: var(--ember) }

/* --------------------------------------------------------------
   Адаптив
   -------------------------------------------------------------- */
@media (max-width: 900px){
  .wrap{ padding: 0 20px }
  .menu{ display: none }
  .foot-grid{ grid-template-columns: 1fr 1fr; gap: 30px }
  .cta-band{ padding: 38px 26px }
  .faq-a{ padding-left: 0 }
}
@media (max-width: 560px){
  .foot-grid{ grid-template-columns: 1fr }
  .nav-cta .status{ display: none }
}

/* --------------------------------------------------------------
   Уважение к настройкам движения
   -------------------------------------------------------------- */
html[data-motion="off"] *,
html[data-motion="off"] *::before,
html[data-motion="off"] *::after{
  transition: none !important; animation: none !important;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ transition: none !important; animation: none !important }
}