/* ==========================================================================
   use.css — общий слой компонентов: главная + страницы разделов.
   --------------------------------------------------------------------------
   Подключается после aksioma.css и studio.css. Тёмную тему (чёрный фон,
   аптайт-заголовки, моно-лейблы, волосяные рамки, без радиусов и теней)
   задаёт studio.css — всё заперто под #view-home, поэтому страницы разделов
   оборачиваются в тот же контейнер.

   В разделе «базовые компоненты» продублированы правила, которые на главной
   лежат во <style> внутри index.html (источник — index.html). Держать
   синхронно: правка там → правка здесь.
   ========================================================================== */

/* --- переход: ссылка «к содержанию» --- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#000;color:#fff;
  border:1px solid rgba(255,255,255,.28);padding:12px 18px;text-decoration:none;
  font-family:var(--font-mono,"JetBrains Mono",monospace);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase}
.skip:focus{left:0}

/* --- плитки-ссылки: <a class="sc-card"> ведёт на раздел --- */
a.sc-card{display:block;text-decoration:none;color:inherit}

/* ==========================================================================
   БАЗОВЫЕ КОМПОНЕНТЫ (копия из index.html — источник index.html)
   ========================================================================== */

/* ---- как это работает: шаги ---- */
.how-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px;position:relative;z-index:1}
.how-step{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:20px;padding:32px 28px;position:relative;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s ease,border-color .25s ease}
.how-step:hover{transform:translateY(-6px);border-color:rgba(139,92,246,.35);box-shadow:0 24px 48px -24px rgba(107,43,226,.35)}
.how-no{font-family:"Nunito";font-weight:800;font-size:64px;line-height:1;background:linear-gradient(135deg,var(--gold-fill),var(--gold-fill-dk));-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:18px;letter-spacing:-.02em}
.how-ic{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,rgba(107,43,226,.2),rgba(124,58,255,.2));display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:18px}
.how-ic .ic{width:24px;height:24px}
.how-step h3{font-size:20px;font-weight:700;color:#fff;margin:0 0 10px;letter-spacing:-.01em}
.how-step p{font-size:15px;color:var(--pine-ink);margin:0;line-height:1.55}

/* ---- окно приложения (панель в hero) ---- */
.app-frame{background:linear-gradient(180deg,#FAFAFE,#F1EEF8);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 12px 28px -16px rgba(30,12,70,.18)}
.app-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#EEEBF5;border-bottom:1px solid var(--line)}
.app-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.app-dot.r{background:#FF5F57}
.app-dot.y{background:#FEBC2E}
.app-dot.g{background:#28C840}
.app-title{margin-left:14px;font-size:12.5px;font-weight:600;color:var(--mut);font-family:"JetBrains Mono",monospace}
.app-body{padding:24px 22px}
.app-foot{display:flex;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--mut)}
.app-foot span{display:inline-flex;align-items:center;gap:5px}

/* ---- плитки-сценарии ---- */
.scenarios-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.sc-card{position:relative;padding:28px 24px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 30px -20px rgba(30,12,70,.15);transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease;overflow:hidden}
.sc-card:hover{transform:translateY(-5px);box-shadow:0 20px 48px -24px rgba(107,43,226,.22);border-color:rgba(107,43,226,.25)}
.sc-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.sc-ic .ic{width:22px;height:22px}
.sc-card h3{font-size:18px;font-weight:700;color:var(--ink);margin:0 0 8px;letter-spacing:-.01em}
.sc-card>p{font-size:14px;color:var(--mut);margin:0 0 16px;line-height:1.55;max-width:38ch}
.sc-mock{background:#F8F6FC;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:12.5px;line-height:1.65;color:var(--ink);white-space:pre-wrap;margin:0}
.sc-mock code{font-family:"JetBrains Mono",monospace;font-size:11.5px}
.sc-mock .done{color:var(--pine);font-weight:700}
.sc-mock .hl{background:rgba(107,43,226,.08);padding:1px 4px;border-radius:3px}
.sc-tag{position:absolute;top:16px;right:16px;font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:14px}

/* ---- hero: заголовок и лид ---- */
.hero-grid>div:first-child h1{font-size:clamp(34px,4.6vw,58px);line-height:1.08;letter-spacing:-.025em}
.hero-grid>div:first-child .lead{font-size:18px;line-height:1.6;color:var(--mut);max-width:54ch;margin:18px 0 24px}
.hero-cta{margin-top:8px}

/* ==========================================================================
   СТРАНИЦЫ РАЗДЕЛОВ
   ========================================================================== */

/* --- хлебные крошки --- */
.crumbs{font-family:var(--font-mono,"JetBrains Mono",monospace);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:#5E5E5E;display:flex;gap:10px;flex-wrap:wrap;
  align-items:center;margin-bottom:clamp(20px,2.6vw,36px)}
.crumbs a{color:#8A8A8A;text-decoration:none;transition:color .2s ease}
.crumbs a:hover{color:#fff}
.crumbs b{color:#fff;font-weight:500}

/* --- метка блока «смотрите также» --- */
.also-t{font-family:var(--font-mono,"JetBrains Mono",monospace);font-size:11px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:#5E5E5E;display:inline-flex;align-items:center;
  gap:.55em;margin:clamp(28px,3.4vw,48px) 0 clamp(14px,1.6vw,22px)}
.also-t::before{content:"("}
.also-t::after{content:")"}

/* --- «сколько это стоило бы с людьми» (главная) --- */
#view-home .pay{border-top:1px solid var(--s-line-soft);max-width:1180px;margin:0 auto}
#view-home .pay-row{display:grid;grid-template-columns:1.05fr .68fr 1.6fr;gap:clamp(14px,2vw,34px);
  padding:clamp(16px,1.8vw,24px) 0;border-bottom:1px solid var(--s-line-soft);align-items:baseline}
#view-home .pay-row>span:first-child{font-family:var(--font-display);font-weight:500;text-transform:uppercase;
  letter-spacing:.03em;font-size:clamp(15px,1.3vw,19px);color:#fff;line-height:1.15}
#view-home .pay-row>span:nth-child(2){font-family:var(--font-mono);font-size:clamp(14px,1.2vw,17px);
  color:var(--s-acc-hi);white-space:nowrap}
#view-home .pay-row>span:last-child{color:var(--s-body);font-size:14.5px;line-height:1.65}
#view-home .pay-row.pay-head>span{font-family:var(--font-mono);font-size:10px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:#5E5E5E}
#view-home .pay-sum{background:rgba(255,255,255,.035)}
#view-home .pay-sum>span:nth-child(2){font-size:clamp(15px,1.3vw,19px)}
#view-home .pay-note{font-family:var(--font-mono);font-size:11.5px;line-height:1.9;color:#6E6E6E;
  max-width:110ch;margin:clamp(20px,2.4vw,34px) auto 0;border-top:1px solid var(--s-line-soft);padding-top:20px}
#view-home .pay-cta{margin-top:clamp(22px,2.6vw,34px);display:flex;justify-content:center}

/* --- адаптив --- */
@media (max-width:900px){
  .how-flow{grid-template-columns:1fr}
  .how-no{font-size:52px}
  .scenarios-grid{grid-template-columns:repeat(2,1fr)}
  #view-home .pay-row{grid-template-columns:1fr;gap:6px}
  #view-home .pay-head{display:none}
  #view-home .pay-sum{background:transparent}
}
@media (max-width:640px){
  .scenarios-grid{grid-template-columns:1fr}
}