/* Документы и инструкции. Дополняет site.css, ничего в нём не переопределяя. */

.doc-hero{
  background:linear-gradient(180deg,var(--n900) 0%,var(--n950) 100%);
  color:#fff;padding:64px 0 56px;
}
.doc-hero .kicker{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;border-radius:999px;
  background:rgba(255,255,255,.1);color:#BFD5FF;
  font-size:13px;font-weight:600;
}
.doc-hero h1{
  color:#fff;font-size:clamp(30px,4.6vw,44px);
  margin:18px 0 0;max-width:22ch;text-wrap:balance;
}
.doc-hero .sub{
  margin:14px 0 0;max-width:56ch;font-size:18px;
  color:rgba(255,255,255,.78);line-height:1.6;
}
.doc-hero .facts{
  margin-top:26px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;gap:8px 28px;
  font-size:14px;color:rgba(255,255,255,.6);
}

.doc-w{width:min(760px,92%);margin:0 auto}
.doc{padding:52px 0 88px;font-size:17px;line-height:1.7;color:var(--ink)}
.doc h2{
  font-size:27px;margin:54px 0 6px;text-wrap:balance;letter-spacing:-.022em;
}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:18px;margin:30px 0 6px}
.doc p{margin:0 0 15px;color:var(--ink)}
.doc .note{color:var(--muted);font-size:16px;margin:0 0 22px;max-width:60ch}
.doc strong{font-weight:650}
.doc a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.doc ul{margin:12px 0 0;padding-left:21px}
.doc ul li{margin-bottom:8px}

/* нумерованные шаги */
.doc .doc-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:28px}
.doc .doc-steps>li{display:grid;grid-template-columns:40px 1fr;gap:18px;align-items:start}
.doc .sn{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:var(--blue50);color:var(--blue);
  font-size:16px;font-weight:700;border:1px solid var(--blue1)
}
.doc .doc-steps>li>div>:first-child{margin-top:0}
.doc .doc-steps>li>div>:last-child{margin-bottom:0}
.doc .st{font-weight:650;font-size:18px;margin:7px 0 6px}

/* пары «название — описание» */
.doc .pairs{margin:14px 0 0;border-top:1px solid var(--line)}
.doc .pairs>div{
  display:grid;grid-template-columns:210px 1fr;gap:4px 24px;
  padding:14px 0;border-bottom:1px solid var(--line)
}
.doc .pairs dt{font-weight:650;font-size:16px}
.doc .pairs dd{margin:0;color:var(--muted);font-size:16px}
@media(max-width:600px){.doc .pairs>div{grid-template-columns:1fr;gap:2px}}

/* выноски */
.doc .box{
  margin:26px 0;padding:20px 22px;background:var(--paper);
  border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:12px
}
.doc .box.stop{border-left-color:#B4443A;background:#FEF4F2;border-color:#F6D9D3}
.doc .box.calm{border-left-color:#1C7A55;background:#F1F9F5;border-color:#D3EBDF}
.doc .box p{margin:0 0 10px;font-size:16px}
.doc .box p:last-child{margin-bottom:0}
.doc .box .bt{font-weight:700;font-size:16px;margin:0 0 8px}
.doc .box.stop .bt{color:#9E3B31}
.doc .box.calm .bt{color:#166B4A}

/* последовательность действий */
.doc .doc-flow{list-style:none;margin:18px 0 0;padding:0;counter-reset:f}
.doc .doc-flow li{
  counter-increment:f;position:relative;padding:0 0 18px 34px;
  margin:0;border-left:1px solid var(--line)
}
.doc .doc-flow li:last-child{border-left-color:transparent;padding-bottom:0}
.doc .doc-flow li::before{
  content:counter(f);position:absolute;left:-10px;top:2px;
  width:20px;height:20px;border-radius:50%;
  background:var(--bg);border:1px solid var(--line);color:var(--faint);
  font-size:11px;font-weight:600;display:grid;place-items:center
}

/* два режима — парой */
.doc .duo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0 0}
.doc .duo>div{
  border:1px solid var(--line);border-radius:14px;padding:20px;
  background:var(--paper);display:flex;flex-direction:column;gap:8px
}
.doc .duo .lbl{font-size:13px;font-weight:700;color:var(--blue)}
.doc .duo h4{margin:0;font-size:17px;font-weight:700}
.doc .duo p{margin:0;font-size:16px;color:var(--muted)}
@media(max-width:600px){.doc .duo{grid-template-columns:1fr}}

/* вопросы */
.doc .qa{border-top:1px solid var(--line)}
.doc .qa details{border-bottom:1px solid var(--line)}
.doc .qa summary{
  cursor:pointer;padding:16px 0;font-weight:650;font-size:17px;
  list-style:none;display:flex;gap:12px;align-items:baseline
}
.doc .qa summary::-webkit-details-marker{display:none}
.doc .qa summary::before{content:"+";color:var(--blue);font-weight:700;flex:none}
.doc .qa details[open] summary::before{content:"–"}
.doc .qa .ans{padding:0 0 17px 26px;color:var(--muted);font-size:16px}
.doc .qa .ans p:last-child{margin-bottom:0}

/* ── страница-указатель ─────────────────────────────────────── */
.hub{padding:56px 0 88px}
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
@media(max-width:900px){.hub-grid{grid-template-columns:1fr}}
.gcard{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 24px 24px;display:flex;flex-direction:column;box-shadow:var(--sh)
}
.gcard .who{font-size:13px;font-weight:700;color:var(--blue);margin-bottom:10px}
.gcard h3{font-size:21px;margin:0 0 10px;letter-spacing:-.02em}
.gcard p{color:var(--muted);font-size:16px;margin:0 0 16px;line-height:1.6}
.gcard ul{margin:0 0 22px;padding-left:19px;color:var(--muted);font-size:15px}
.gcard ul li{margin-bottom:6px}
.gcard .acts{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}
.gcard .acts .btn{flex:1 1 auto;justify-content:center}
.hub-note{
  margin-top:34px;padding:22px 24px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r);color:var(--muted);font-size:16px
}
.hub-note b{color:var(--ink)}

/* печать в PDF */
@page{size:A4;margin:14mm 15mm}
@media print{
  #hdr,#mmenu,#prog,footer,.doc-hero .facts,.no-print{display:none!important}
  body{background:#fff}
  .doc-hero{background:#0D2B5E!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;padding:34px 0 30px}
  .doc-w{width:100%}
  .doc{padding:26px 0 0;font-size:11.5pt;line-height:1.55}
  .doc h2{font-size:16pt;margin:22pt 0 4pt;break-after:avoid}
  .doc .doc-flow{margin-left:11px}
  .doc .doc-flow li{break-inside:avoid}
  .doc .doc-steps>li,.doc .box,.doc .duo>div,.doc .qa details{break-inside:avoid}
  .doc .qa details{border-bottom:1px solid #E5E7EB}
  .doc .qa .ans{display:block!important}
  a{text-decoration:none;color:inherit}
}