/* Синий стиль материалов — заодно с гайдом и баннером бота.
   Сайт курса остаётся кремово-антиквенным: это другой бренд. */
* { box-sizing: border-box; margin: 0; padding: 0 }
:root {
  --krem: #F4F8FB; --tush: #0D253D; --tekst: #24323F;
  --seryi: #6E7C89; --akcent: #2F79B5; --liniya: #D8E4EE; --belyi: #FFFFFF;
}
body {
  background: var(--krem); color: var(--tekst);
  font: 16px/1.62 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.obolochka { max-width: 880px; margin: 0 auto; padding: 0 22px }
h1, h2, h3 { font-family: inherit; letter-spacing: -.015em }

header.geroi { background: var(--tush); color: var(--krem); padding: 62px 0 56px; margin-bottom: 46px }
.nadpis { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #8FB8DA; margin-bottom: 20px }
header.geroi h1 { font-size: clamp(34px, 7vw, 54px); line-height: 1.1; font-weight: 700; letter-spacing: -.01em }
header.geroi p { margin-top: 18px; color: #A8C8E4; max-width: 34em; font-size: 17px }

.plitki { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) }
.plitka {
  background: var(--belyi); border: 1px solid var(--liniya); border-radius: 4px;
  padding: 26px 24px 22px; display: flex; flex-direction: column; text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s;
}
.plitka:hover { border-color: var(--akcent); transform: translateY(-2px) }
.tip { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--akcent); margin-bottom: 12px }
.plitka h2 { font-size: 23px; line-height: 1.25; margin-bottom: 10px; color: var(--tush) }
.plitka p { font-size: 15px; color: var(--seryi); flex: 1 }
.otkryt { margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--tush) }

.kurs { margin: 54px 0 0; background: var(--tush); color: var(--krem); border-radius: 4px; padding: 34px 30px }
.kurs h2 { font-size: 27px; margin-bottom: 12px }
.kurs p { color: #A8C8E4; max-width: 40em }
.knopka {
  display: inline-block; margin-top: 20px; background: var(--krem); color: var(--tush);
  padding: 13px 26px; border-radius: 3px; text-decoration: none; font-weight: 600; font-size: 15px;
}
.knopka:hover { background: #fff }

footer { margin: 56px 0 46px; padding-top: 22px; border-top: 1px solid var(--liniya); font-size: 13px; color: var(--seryi) }
footer a { color: var(--seryi) }

/* страница одного материала */
.nazad { display: inline-block; margin-bottom: 26px; font-size: 14px; color: var(--seryi); text-decoration: none }
.nazad:hover { color: var(--tush) }
article h1 { font-size: clamp(28px, 6vw, 40px); line-height: 1.15; color: var(--tush); margin-bottom: 14px }
article .lid { font-size: 17px; color: var(--seryi); margin-bottom: 30px; max-width: 38em }
article h3 { font-size: 19px; margin: 30px 0 10px; color: var(--tush) }
pre.promt {
  background: var(--tush); color: #DCE8F3; padding: 22px; border-radius: 4px;
  overflow-x: auto; font: 13.5px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  white-space: pre-wrap; word-break: break-word; margin: 18px 0;
}
.kopirovat {
  background: var(--tush); color: var(--krem); border: 0; border-radius: 3px;
  padding: 12px 22px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.kopirovat:active { transform: translateY(1px) }

/* страница «что умеет агент» */
.razdel { margin-bottom: 52px }
.razdel h2 { font-size: clamp(23px, 4.6vw, 30px); color: var(--tush); margin-bottom: 20px }
.razdel h3 { font-size: 19px; color: var(--tush); margin-bottom: 8px }
.plitka.plain { cursor: default }
.plitka.plain:hover { border-color: var(--liniya); transform: none }
.spisok { list-style: none; display: grid; gap: 14px }
.spisok li {
  background: var(--belyi); border: 1px solid var(--liniya); border-radius: 4px;
  padding: 18px 20px; font-size: 15.5px; color: #44525F;
}
.spisok b { color: var(--tush) }
.tekst { font-size: 16px; margin-bottom: 14px; max-width: 42em }

/* браузер сам не оставляет одно слово на последней строке, где умеет */
p, li, .plitka h2, .plitka h3, .razdel h2 { text-wrap: pretty }
header.geroi p { max-width: 30em }

.popolnenie {
  margin: 30px 0 0; padding: 18px 20px; border: 1px dashed var(--liniya);
  border-radius: 4px; color: var(--seryi); font-size: 15px; background: var(--belyi);
}