/* Оформление юридических документов Lanly.
   Отдельный файл: три документа используют одну типографику, и править
   её в трёх местах было бы источником расхождений. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Golos+Text:wght@400;500;600&display=swap');

:root {
  --paper: #FBFAF7;
  --ink: #14201A;
  --ink-soft: #4C5C53;
  --rule: #DCD8CE;
  --green: #14663B;
  --green-soft: #E7F1EA;
  --accent: #B4462F;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Golos Text', system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

.legal-wrap { max-width: 760px; margin: 0 auto; padding: 40px 22px 96px; }

.legal-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-bottom: 22px; border-bottom: 2px solid var(--ink);
  margin-bottom: 34px; flex-wrap: wrap;
}
.legal-top a.home {
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none; font-weight: 600;
}
.legal-top a.home:hover { color: var(--green); }
.legal-meta { font-size: 13px; color: var(--ink-soft); text-align: right; }

h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700; font-size: clamp(28px, 5vw, 42px);
  line-height: 1.12; letter-spacing: -.015em; margin-bottom: 10px;
}
.lead { font-size: 17px; color: var(--ink-soft); margin-bottom: 36px; max-width: 62ch; }

h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700; font-size: 21px; margin: 38px 0 12px;
  padding-top: 20px; border-top: 1px solid var(--rule);
}
h2:first-of-type { border-top: none; padding-top: 0; }
h3 { font-size: 16px; font-weight: 600; margin: 22px 0 8px; }

p { margin-bottom: 14px; }
ul, ol { margin: 0 0 16px 22px; }
li { margin-bottom: 8px; }

a { color: var(--green); }

.callout {
  background: var(--green-soft); border-left: 3px solid var(--green);
  padding: 16px 18px; margin: 22px 0; border-radius: 0 6px 6px 0; font-size: 15px;
}
.callout.warn { background: #FBEDE9; border-color: var(--accent); }
.callout strong { display: block; margin-bottom: 4px; }

table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 600; background: rgba(20, 102, 59, .05); }

.legal-foot {
  margin-top: 52px; padding-top: 22px; border-top: 2px solid var(--ink);
  font-size: 14px; color: var(--ink-soft);
}
.legal-foot a { margin-right: 18px; display: inline-block; }

@media (max-width: 640px) {
  .legal-wrap { padding: 26px 16px 64px; }
  body { font-size: 15.5px; }
  table, thead, tbody, th, td, tr { display: block; }
  thead { display: none; }
  td { border: none; padding: 4px 0; }
  tr { border-bottom: 1px solid var(--rule); padding: 10px 0; }
  td::before { content: attr(data-label); display: block; font-weight: 600; font-size: 13px; color: var(--ink-soft); }
}