/* Мастер выбора режима развёртывания (/modes) */
.md-hero { padding: 120px 0 24px }
.md-hero h1 { font-size: clamp(30px, 5vw, 52px); line-height: 1.05; margin: 0 0 14px; max-width: 18ch }
.md-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; padding-bottom: 40px }
.md-q { display: grid; gap: 14px; min-width: 0 }
.md-f { border: 1px solid rgba(34, 34, 34, .12); border-radius: 18px; padding: 16px 18px 12px; margin: 0; background: #fff; min-width: 0 }
.md-f legend { font-weight: 700; display: flex; gap: 10px; align-items: center; padding: 0 6px; margin-left: -6px }
.md-f legend span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #FF6D1F; color: #fff; font-size: 13px; flex: none }
.md-o { display: flex; gap: 10px; align-items: flex-start; padding: 9px 4px; cursor: pointer; border-radius: 10px }
.md-o:hover { background: rgba(255, 109, 31, .07) }
.md-o input { margin-top: 3px; accent-color: #FF6D1F; width: 18px; height: 18px; flex: none }
.md-r { position: sticky; top: 90px; min-width: 0 }
.md-card { border-radius: 22px; padding: 22px; background: #222; color: #FAF3E1 }
.md-card p { opacity: .8; margin: 8px 0 0 }
.md-rec h2 { margin: 6px 0 12px; font-size: 26px }
.md-tag { display: inline-block; background: #FF6D1F; color: #fff; border-radius: 99px; padding: 3px 10px; font-size: 12px; font-weight: 700 }
.md-li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid rgba(250, 243, 225, .14); font-size: 14px }
.md-li span { opacity: .65 }
.md-li b { font-weight: 600 }
.md-notes { margin: 14px 0; padding-left: 18px; font-size: 14px; opacity: .9 }
.md-notes li { margin: 6px 0 }
.md-card .btn { margin-top: 12px }
.md-all { padding: 20px 0 80px }
.md-all h2 { font-size: 30px; margin: 0 0 14px }
.md-table { overflow-x: auto; border-radius: 18px; border: 1px solid rgba(34, 34, 34, .12); background: #fff }
.md-table table { border-collapse: collapse; min-width: 900px; font-size: 14px }
.md-table th, .md-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-top: 1px solid rgba(34, 34, 34, .08) }
.md-table thead th { border-top: 0; background: #FAF3E1 }
.md-table tbody th { width: 130px; color: rgba(34, 34, 34, .6); font-weight: 600 }
.md-note { font-size: 14px; opacity: .75; max-width: 80ch; margin-top: 14px }
@media (max-width: 860px) {
  .md-grid { grid-template-columns: minmax(0, 1fr) }
  .md-r { position: static }
  .md-hero { padding-top: 96px }
  .md-li { grid-template-columns: minmax(0, 1fr); gap: 2px }
}