/* Страница входа /sign-in (джетметрикс.рф), раскладка Б: слева что внутри Хаба, справа карточка с формой.
   Левый столбец не выше карточки: те же отступы сверху и снизу, что у текста карточки (Мария, 23.10.2026).
   Разметку рисует sign-in.js. Селекторы — от #jm-sign-in, чтобы стили блоков Тильды их не перебивали.
   Шрифты — layout/fonts.css (самохостинг). */
#jm-sign-in {
  --jm-green: #0E9C7D; --jm-green-press: #0B7D64; --jm-green-deep: #064D2B; --jm-green-tint: #E7F6F1;
  --jm-coral-text: #DC4048;
  --jm-ink: #080B0D; --jm-text: #20262E; --jm-muted: #6B7372; --jm-faint: #98A0A6;
  --jm-line: #E4E8EC; --jm-bg: #F6F8FA; --jm-surface: #FFFFFF;
  --jm-e2: 0 1px 2px rgba(8,11,13,.04), 0 6px 20px rgba(8,11,13,.06);
  --jm-ring: 0 0 0 3px rgba(14,156,125,.28);
  background: var(--jm-bg);
  padding: 72px 32px;
  font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--jm-text);
  -webkit-font-smoothing: antialiased;
}
#jm-sign-in *, #jm-sign-in *::before, #jm-sign-in *::after { box-sizing: border-box; }
#jm-sign-in .jm-si { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 56px; align-items: stretch; }

/* слева */
#jm-sign-in .jm-si-about { min-width: 0; padding-block: 36px; display: grid; align-content: center; gap: 24px; }
#jm-sign-in .jm-si-eyebrow { font: 600 12px/1 'IBM Plex Mono', ui-monospace, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--jm-green); margin: 0 0 12px; }
#jm-sign-in .jm-si-about-h { margin: 0; font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -0.5px; color: var(--jm-ink); text-wrap: balance; }
#jm-sign-in .jm-si-about-h em { font-style: normal; color: var(--jm-green); }
#jm-sign-in .jm-si-inside { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
#jm-sign-in .jm-si-inside li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; margin: 0; }
#jm-sign-in .jm-si-inside li::before { content: ""; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--jm-green-tint); box-shadow: inset 0 0 0 5px var(--jm-green-tint), inset 0 0 0 9px var(--jm-green); }
#jm-sign-in .jm-si-inside b { display: block; color: var(--jm-ink); font-weight: 700; font-size: 16px; line-height: 1.4; }
#jm-sign-in .jm-si-inside span { display: block; color: var(--jm-muted); font-size: 14.5px; line-height: 1.45; }

/* карточка */
#jm-sign-in .jm-si-card { min-width: 0; background: var(--jm-surface); border: 1px solid var(--jm-line); border-radius: 16px; box-shadow: var(--jm-e2); padding: 40px 32px; display: grid; align-content: center; }
#jm-sign-in .jm-si-card > * { margin: 0; }
#jm-sign-in .jm-si-title { font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -0.3px; color: var(--jm-ink); margin: 0 0 10px; text-wrap: balance; }
#jm-sign-in .jm-si-lead { font-size: 16px; line-height: 1.55; color: var(--jm-muted); margin: 0 0 24px; }
#jm-sign-in .jm-si-lead b { color: var(--jm-ink); font-weight: 600; overflow-wrap: anywhere; }
#jm-sign-in .jm-si-form { display: grid; margin: 0; }
#jm-sign-in .jm-si-label { font-size: 14px; font-weight: 600; color: var(--jm-text); margin: 0 0 6px; }
#jm-sign-in .jm-si-input { display: block; width: 100%; min-width: 0; height: auto; margin: 0; font: 16px/1.3 'Onest', system-ui, sans-serif; padding: 12px 14px; border: 1px solid var(--jm-line); border-radius: 10px; background: var(--jm-surface); color: var(--jm-ink); box-shadow: none; -webkit-appearance: none; appearance: none; }
#jm-sign-in .jm-si-input:focus { outline: none; border-color: var(--jm-green); box-shadow: var(--jm-ring); }
#jm-sign-in .jm-si-check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; margin: 14px 0 0; font-size: 14px; line-height: 1.45; color: var(--jm-text); cursor: pointer; }
#jm-sign-in .jm-si-form > .jm-si-check:first-child { margin-top: 0; }
#jm-sign-in .jm-si-check + .jm-si-check { margin-top: 10px; }
#jm-sign-in .jm-si-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--jm-green); cursor: pointer; }
#jm-sign-in .jm-si-check a { color: var(--jm-green-deep); text-decoration: underline; text-underline-offset: 2px; }
#jm-sign-in .jm-si-check--need span { color: var(--jm-coral-text); }
#jm-sign-in .jm-si-check--need input { outline: 2px solid var(--jm-coral-text); outline-offset: 2px; }
#jm-sign-in .jm-si-error { color: var(--jm-coral-text); font-size: 14px; line-height: 1.45; margin: 10px 0 0; }
#jm-sign-in .jm-si-captcha:empty { display: none; }
#jm-sign-in .jm-si-btn { display: inline-flex; align-items: center; justify-content: center; justify-self: start; min-height: 46px; margin: 16px 0 0; padding: 3px 22px 0; border: 1px solid var(--jm-green); border-radius: 10px; background: var(--jm-green); color: #FFFFFF; font: 600 15.5px/1.2 'Onest', system-ui, sans-serif; text-decoration: none; text-align: center; cursor: pointer; }
#jm-sign-in .jm-si-btn:hover { background: var(--jm-green-press); border-color: var(--jm-green-press); }
#jm-sign-in .jm-si-btn:focus-visible { outline: none; box-shadow: var(--jm-ring); }
#jm-sign-in .jm-si-btn:disabled { opacity: .7; cursor: default; }
#jm-sign-in .jm-si-card > .jm-si-btn { margin-top: 0; }
#jm-sign-in .jm-si-btn--test { background: var(--jm-surface); color: var(--jm-green-deep); border-color: var(--jm-line); margin-top: 10px !important; }
#jm-sign-in .jm-si-alt { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--jm-muted); }
#jm-sign-in .jm-si-alt a { color: var(--jm-green-deep); font-weight: 600; text-decoration: none; }
#jm-sign-in .jm-si-alt a:hover { text-decoration: underline; }
#jm-sign-in .jm-si-note { margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--jm-muted); }
#jm-sign-in .jm-si-hint { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--jm-line); font-size: 14px; line-height: 1.5; color: var(--jm-muted); }
#jm-sign-in .jm-si-hint b { color: var(--jm-text); font-weight: 600; }
#jm-sign-in .jm-si-spin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid var(--jm-line); border-top-color: var(--jm-green); animation: jm-si-spin .8s linear infinite; margin: 0 0 18px; }
@keyframes jm-si-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #jm-sign-in .jm-si-spin { animation: none; } }

/* планшет и телефон: форма сверху, список под ней */
@media (max-width: 860px) {
  #jm-sign-in { padding: 40px 20px; }
  #jm-sign-in .jm-si { grid-template-columns: 1fr; gap: 32px; max-width: 520px; }
  #jm-sign-in .jm-si-card { order: -1; }
  #jm-sign-in .jm-si-about { padding-block: 0; }
  #jm-sign-in .jm-si-about-h { font-size: 24px; }
}
@media (max-width: 520px) {
  #jm-sign-in { padding: 24px 16px 32px; }
  #jm-sign-in .jm-si-card { padding: 28px 20px; }
  #jm-sign-in .jm-si-title { font-size: 24px; }
  #jm-sign-in .jm-si-btn { justify-self: stretch; }
}