/* ===================================================================
   happ.place — тема «табло доступа» в пластике happ.bar.

   Оболочка взята у лендинга сети: белый лист, мягкие серые плоскости,
   скруглённые карточки, pill-кнопки, аккуратная тень, крупный
   заголовок и eyebrow-метки. Своё — цвет (индиго вместо зелёного)
   и signature: табло доступа с клетками дней и слотами устройств.

   Цвет: лист, мягкая плоскость, чернила, второстепенный, граница,
   акцент + семантика состояний (активна / истекает / истекла).
   Шрифты: Onest 400/600/800 — текст и заголовки, PT Mono — ссылки,
   коды и данные. Радиусы 12/18/22/999. Отступы от 4.
   =================================================================== */

@import url('/fonts/faces.css');

:root {
  --bg:#FFFFFF;         /* лист */
  --soft:#F5F6F7;       /* мягкая плоскость: секции, плитки, поля */
  --ink:#0B0B0F;        /* чернила */
  --muted:#6B7280;      /* второстепенный текст */
  --border:#E9EBEE;     /* границы */
  --accent:#4F46E5;     /* индиго: акции, выбранный день, ссылки */
  --accent-dark:#4338CA;
  --accent-soft:#EEEEFE;/* подложка акцента */
  --ok:#1FA463;      --ok-soft:#E9F6EF;
  --warn:#B45309;    --warn-soft:#FDF3E4;
  --down:#DC2626;    --down-soft:#FDECEC;

  --f-body:'Onest',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --f-data:'PT Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --r-sm:12px; --r:18px; --r-lg:22px;
  --shadow-sm:0 1px 2px rgba(11,11,15,.05);
  --shadow:0 1px 2px rgba(11,11,15,.04), 0 8px 24px rgba(11,11,15,.05);
  --shadow-up:0 2px 6px rgba(11,11,15,.06), 0 14px 34px rgba(11,11,15,.08);
  --wrap:1120px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0E0E13;
    --soft:#17171E;
    --ink:#F3F3F6;
    --muted:#9AA0AC;
    --border:#25252E;
    --accent:#8E86FF;
    --accent-dark:#A49DFF;
    --accent-soft:#1E1B33;
    --ok:#43C98B;      --ok-soft:#12291F;
    --warn:#E3A857;    --warn-soft:#2C2314;
    --down:#FF7A7A;    --down-soft:#2E1719;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --shadow-up:0 2px 6px rgba(0,0,0,.35), 0 14px 34px rgba(0,0,0,.45);
  }
}

*,*::before,*::after { box-sizing:border-box }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth }

body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:400 17px/1.6 var(--f-body);
  -webkit-font-smoothing:antialiased;
}

a { color:var(--accent-dark); text-decoration:none }
a:hover { text-decoration:underline }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;
}
code { font:400 .88em/1.5 var(--f-data); background:var(--soft); border:1px solid var(--border);
       padding:1px 6px; border-radius:6px; word-break:break-word }
pre { font:400 13px/1.65 var(--f-data); background:var(--soft); border:1px solid var(--border);
      border-radius:var(--r-sm); padding:16px 18px; overflow-x:auto; margin:24px 0 }
strong { font-weight:600 }
img { max-width:100%; height:auto }

.skip { position:absolute; left:-9999px }
.skip:focus { left:16px; top:16px; z-index:60; background:var(--bg); padding:10px 16px;
              border:1px solid var(--accent); border-radius:999px }

.page { max-width:var(--wrap); margin:0 auto; padding:0 20px }

/* --- eyebrow-метки и статусные пилюли --------------------------- */
.tag {
  display:inline-block; font:600 12px/1.4 var(--f-body); letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}
.tag--sig { color:var(--accent) }
.tag--sig::before { content:'— '; }
.chip {
  display:inline-flex; align-items:center; gap:7px; font:600 13px/1.3 var(--f-body);
  padding:6px 13px; border-radius:999px; background:var(--soft); color:var(--muted);
  border:1px solid transparent;
}
.chip::before { content:''; width:8px; height:8px; border-radius:50%; background:currentColor; flex:none;
  box-shadow:0 0 0 4px color-mix(in srgb, currentColor 20%, transparent) }
.chip--ok { background:var(--ok-soft); color:var(--ok) }
.chip--warn { background:var(--warn-soft); color:var(--warn) }
.chip--down { background:var(--down-soft); color:var(--down) }

/* --- шапка ------------------------------------------------------- */
.hdr { position:sticky; top:0; z-index:40; background:var(--bg); border-bottom:1px solid var(--border) }
.hdr__in { display:flex; align-items:center; gap:16px; height:68px; flex-wrap:nowrap }
.brand { display:inline-flex; align-items:center; gap:11px; color:var(--ink); flex:none }
.brand:hover { text-decoration:none }
.brand__badge {
  width:34px; height:34px; border-radius:9px; background:var(--ink); color:var(--bg);
  display:grid; place-items:center; font:800 17px/1 var(--f-body); flex:none;
}
.brand__mark { display:block; font:800 18px/1.1 var(--f-body); letter-spacing:-.02em }
.brand__mark b { color:var(--accent); font-weight:800 }
.brand__sub { display:block; font:600 9px/1.2 var(--f-body); letter-spacing:.14em; color:var(--muted) }
.hdr__nav { display:flex; align-items:center; gap:10px; margin-left:auto }
.hdr__links { display:flex; gap:17px; margin-right:6px; white-space:nowrap }
.hdr__links a { font:500 14.5px/1 var(--f-body); color:var(--ink) }
.hdr__links a:hover { color:var(--accent-dark); text-decoration:none }
.hdr__links a[aria-current=page] { color:var(--accent) }
.searchbtn {
  display:inline-flex; align-items:center; gap:8px; cursor:pointer; font:600 14px/1 var(--f-body);
  background:var(--bg); color:var(--muted); border:1px solid var(--border); border-radius:999px;
  padding:10px 16px;
}
.searchbtn:hover { border-color:#CDD2D8; color:var(--ink) }
.searchbtn__ico { font-size:15px; line-height:1 }
.searchbtn kbd { font:400 11px/1 var(--f-data); border:1px solid var(--border); border-radius:5px; padding:3px 5px }
.burger {
  display:none; cursor:pointer; font:600 14px/1 var(--f-body); background:var(--bg); color:var(--ink);
  border:1px solid var(--border); border-radius:999px; padding:11px 16px;
}
.mnav { display:none; border-top:1px solid var(--border); padding:8px 0 12px }
.mnav ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4px }
.mnav a { display:block; padding:11px 12px; font-size:15px; font-weight:500; color:var(--ink);
          border-radius:var(--r-sm) }
.mnav a:hover { background:var(--soft); text-decoration:none }
.mnav a[aria-current=page] { color:var(--accent); background:var(--accent-soft) }

/* --- каркас ------------------------------------------------------ */
.layout { display:grid; grid-template-columns:250px minmax(0,1fr); gap:48px; align-items:start;
          padding:28px 0 0 }
main { min-width:0 }

.side { position:sticky; top:92px }
.side__grp { margin-bottom:24px }
.side__ttl { display:block; font:600 11px/1.4 var(--f-body); letter-spacing:.12em;
             text-transform:uppercase; color:var(--muted); margin-bottom:8px }
.side ul { list-style:none; margin:0; padding:0 }
.side li a {
  display:block; padding:7px 12px; margin-bottom:2px; font-size:15px; line-height:1.35;
  color:var(--ink); border-radius:10px;
}
.side li a:hover { background:var(--soft); text-decoration:none }
.side li a[aria-current=page] { background:var(--accent-soft); color:var(--accent-dark); font-weight:600 }
.side__grp--out { display:grid; gap:8px; border-top:1px solid var(--border); padding-top:18px }
.side__out { font:600 14px/1.4 var(--f-body); color:var(--accent-dark) }

/* --- крошки и статья --------------------------------------------- */
.crumbs { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:14px;
          color:var(--muted); margin-bottom:14px }
.crumbs a { color:var(--muted) }
.crumbs i { color:#C3C8CF; font-style:normal }

.art { max-width:74ch; padding-bottom:24px }
.art h1 { font:800 clamp(2rem,3.4vw + .6rem,2.85rem)/1.14 var(--f-body); letter-spacing:-.025em; margin:0 0 14px }
.art__meta { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; margin-bottom:22px }
.art__lead { font-size:1.16rem; line-height:1.55; color:var(--muted); margin:0 0 24px }
.art h2 { font:800 clamp(1.45rem,1.6vw + .8rem,1.95rem)/1.2 var(--f-body); letter-spacing:-.02em;
          margin:44px 0 12px }
.art h3 { font:600 1.16rem/1.35 var(--f-body); margin:28px 0 8px }
.art p { margin:0 0 16px }
.art ul:not([class]), .art ol:not([class]) { margin:0 0 20px; padding:0; list-style:none }
.art ul:not([class])>li, .art ol:not([class])>li { position:relative; padding-left:28px; margin-bottom:10px }
.art ul:not([class])>li::before {
  content:''; position:absolute; left:6px; top:.6em; width:8px; height:8px; border-radius:50%;
  background:var(--accent);
}
.art ol:not([class]) { counter-reset:o }
.art ol:not([class])>li { counter-increment:o }
.art ol:not([class])>li::before {
  content:counter(o); position:absolute; left:0; top:.15em; width:20px; height:20px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent-dark);
  font:600 12px/20px var(--f-body); text-align:center;
}

/* --- врезки ------------------------------------------------------ */
.note { margin:24px 0; padding:20px 22px; border:1px solid var(--border); border-radius:var(--r);
        background:var(--soft) }
.note p:last-child { margin-bottom:0 }
.note__ttl { display:block; font:600 1.06rem/1.4 var(--f-body); margin-bottom:6px }
.note ul { margin:8px 0 0; padding-left:20px }
.note ul li { margin-bottom:6px }
.note--info { background:var(--accent-soft); border-color:transparent }
.note--ok { background:var(--ok-soft); border-color:transparent }
.note--ok .note__ttl { color:var(--ok) }
.note--warn { background:var(--warn-soft); border-color:transparent }
.note--warn .note__ttl { color:var(--warn) }
.note--down { background:var(--down-soft); border-color:transparent }
.note--down .note__ttl { color:var(--down) }

/* --- шаги -------------------------------------------------------- */
.steps { list-style:none; margin:24px 0; padding:0; counter-reset:s; display:grid; gap:14px }
.steps>li {
  counter-increment:s; position:relative; padding:20px 22px 20px 72px;
  background:var(--bg); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow-sm);
}
.steps>li::before {
  content:counter(s); position:absolute; left:22px; top:20px; width:34px; height:34px; border-radius:50%;
  background:var(--accent); color:#fff; font:600 15px/34px var(--f-body); text-align:center;
}
.steps>li p { margin:0 0 10px; color:var(--muted) }
.steps>li p:last-child { margin-bottom:0 }
.step__ttl { display:block; font:600 1.1rem/1.35 var(--f-body); color:var(--ink); margin:4px 0 8px }
.steps ul { margin:0 0 10px; padding-left:20px; color:var(--muted) }
.steps ul li { margin-bottom:6px }
.steps .shot { margin:14px 0 0 }

/* --- таблицы ----------------------------------------------------- */
.tw { overflow-x:auto; margin:24px 0; border:1px solid var(--border); border-radius:var(--r);
      background:var(--bg) }
.tw table { border-collapse:collapse; width:100%; font-size:15.5px }
.tw th, .tw td { text-align:left; padding:14px 18px; border-bottom:1px solid var(--border); vertical-align:top }
.tw th { font:600 11px/1.4 var(--f-body); letter-spacing:.1em; text-transform:uppercase;
         color:var(--muted); background:var(--soft); white-space:nowrap }
.tw tr:last-child td { border-bottom:0 }
.tw td:first-child { font-weight:600 }

/* --- признаки: «условие → что это значит» ------------------------ */
.signs { list-style:none; margin:24px 0; padding:0; display:grid; gap:10px }
.signs__i { display:grid; grid-template-columns:minmax(190px,32%) 1fr; gap:18px; align-items:baseline;
            padding:16px 20px; border-radius:var(--r-sm); background:var(--soft) }
.signs__when { font:600 15px/1.45 var(--f-body) }
.signs__means { font-size:15.5px; color:var(--muted) }
.signs__i[data-kind=ok] { background:var(--ok-soft) }
.signs__i[data-kind=ok] .signs__when { color:var(--ok) }
.signs__i[data-kind=warn] { background:var(--warn-soft) }
.signs__i[data-kind=warn] .signs__when { color:var(--warn) }
.signs__i[data-kind=down] { background:var(--down-soft) }
.signs__i[data-kind=down] .signs__when { color:var(--down) }

/* --- FAQ --------------------------------------------------------- */
/* Вопросы — одной карточкой с разделителями: у ответа может быть
   несколько абзацев, и рамка не должна разъезжаться. */
.faq { margin:24px 0; border:1px solid var(--border); border-radius:var(--r); background:var(--bg);
       overflow:hidden }
.faq h3 { margin:0; padding:18px 22px 6px; font:600 1.06rem/1.4 var(--f-body);
          border-top:1px solid var(--border) }
.faq h3:first-child { border-top:0 }
.faq p { margin:0; padding:0 22px 18px; color:var(--muted) }

/* --- скриншоты --------------------------------------------------- */
.shot { margin:24px 0 }
.shot__frame {
  display:grid; place-items:center; min-height:170px; background:var(--soft);
  border:1px dashed #D3D8DE; border-radius:var(--r);
}
.shot__code { font:400 12px/1 var(--f-data); letter-spacing:.08em; color:var(--accent-dark);
              background:var(--bg); border:1px solid var(--border); border-radius:999px; padding:7px 14px }
.shot__link { display:block; border:1px solid var(--border); border-radius:var(--r); overflow:hidden;
              position:relative; background:var(--soft) }
.shot__link img { display:block; width:100%; max-height:520px; object-fit:contain }
.shot__zoom { position:absolute; right:10px; bottom:10px; font:600 12px/1 var(--f-body);
              background:var(--bg); border:1px solid var(--border); border-radius:999px;
              padding:7px 12px; color:var(--muted) }
.shot__cap { font-size:14px; color:var(--muted); margin:10px 0 0 }
.shot__pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px }
.shot__part { position:relative; border:1px solid var(--border); border-radius:var(--r);
              background:var(--soft); padding:10px }
.shot__part img { display:block; width:100%; max-height:400px; object-fit:contain; border-radius:8px }
.shot__mark { position:absolute; left:12px; top:12px; z-index:2; font:600 11px/1 var(--f-body);
              background:var(--accent); color:#fff; padding:6px 10px; border-radius:999px }
.shot__partcap { display:block; font-size:13px; color:var(--muted); margin-top:8px }

/* --- кнопки ------------------------------------------------------ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font:600 1rem/1 var(--f-body); padding:14px 26px; border-radius:999px;
  background:var(--accent); color:#fff; border:1px solid transparent;
  transition:transform .06s ease, background .15s ease, box-shadow .15s ease;
}
.btn:hover { background:var(--accent-dark); color:#fff; text-decoration:none }
.btn:active { transform:translateY(1px) }
.btn--go { background:var(--accent) }
.btn--dark { background:var(--ink); color:var(--bg) }
.btn--dark:hover { background:#23232B; color:var(--bg) }
.btn--ghost { background:var(--bg); color:var(--ink); border-color:var(--border) }
.btn--ghost:hover { background:var(--bg); color:var(--ink); border-color:#CDD2D8 }
.btn--sm { padding:10px 18px; font-size:.92rem }

/* --- конвертирующие блоки ---------------------------------------- */
.cta {
  margin:32px 0; padding:28px; border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--soft);
}
.cta__tag { display:block; margin-bottom:10px; color:var(--accent) }
.cta__ttl { font:800 1.45rem/1.25 var(--f-body); letter-spacing:-.02em; margin:0 0 10px }
.cta p { margin:0 0 14px; color:var(--muted) }
.cta__pts { list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 18px; padding:0 }
.cta__pts li { font:600 13px/1.3 var(--f-body); background:var(--bg); border:1px solid var(--border);
               border-radius:999px; padding:6px 14px; color:var(--muted) }
.cta__row { display:flex; flex-wrap:wrap; gap:12px; align-items:center }
.cta__fine { font-size:14px; color:var(--muted) }
.cta--diag { background:var(--warn-soft); border-color:transparent }
.cta--diag .cta__tag { color:var(--warn) }
.cta--diag .cta__pts li { background:var(--bg); border-color:transparent }

.trial {
  margin:24px 0; padding:18px 22px; border-radius:var(--r); background:var(--accent-soft);
  display:flex; flex-wrap:wrap; gap:14px; align-items:center;
}
.trial__tag { flex:0 0 100%; color:var(--accent-dark) }
.trial__txt { flex:1 1 320px; margin:0; font-size:15.5px }
.trial .btn { flex:0 0 auto }

.conn { margin:32px 0; padding:24px; border:1px solid var(--border); border-radius:var(--r-lg);
        background:var(--bg); box-shadow:var(--shadow-sm) }
.conn__hd { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:8px }
.conn__free { color:var(--ok); margin-left:auto }
.conn__ttl { font:800 1.35rem/1.25 var(--f-body); letter-spacing:-.02em; margin:0 0 18px }
.conn__steps { list-style:none; margin:0 0 18px; padding:0; display:grid; gap:14px;
               grid-template-columns:repeat(3,minmax(0,1fr)) }
.conn__steps li { padding:18px; border-radius:var(--r-sm); background:var(--soft); display:grid; gap:6px }
.conn__n { font:600 12px/1 var(--f-body); letter-spacing:.1em; color:var(--accent) }
.conn__ttl2 { font:600 1.05rem/1.3 var(--f-body) }
.conn__txt { font-size:14.5px; color:var(--muted); line-height:1.5 }
.conn__row { display:flex; flex-wrap:wrap; gap:12px; align-items:center }

/* --- список-строки ----------------------------------------------- */
.rows { list-style:none; margin:24px 0; padding:0; display:grid; gap:12px }
.rows li { margin:0 }
.row {
  display:grid; grid-template-columns:132px minmax(0,1fr) auto; gap:18px; align-items:center;
  padding:18px 22px; background:var(--bg); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--shadow-sm); color:var(--ink);
  transition:transform .1s ease, box-shadow .15s ease, border-color .15s ease;
}
.row:hover { text-decoration:none; transform:translateY(-2px); box-shadow:var(--shadow); border-color:#D7DBE0 }
.row__idx { font:600 11px/1.4 var(--f-body); letter-spacing:.12em; text-transform:uppercase;
            color:var(--accent) }
.row__ttl { display:block; font:600 1.08rem/1.35 var(--f-body) }
.row__sub { display:block; font-size:14.5px; color:var(--muted); margin-top:3px }
.row__go { font-size:14px; color:var(--muted); white-space:nowrap }

/* --- «смотрите также», оценка ------------------------------------ */
.also { margin:44px 0 20px }
.also__list { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px 24px;
              grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
.also__list li { font-size:15.5px }
.helpful { display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:18px 22px;
           border-radius:var(--r); background:var(--soft); margin-bottom:32px }
.helpful__q { font:600 1rem/1.3 var(--f-body) }
.helpful__btns { display:flex; gap:8px; margin-left:auto }
.helpful button { cursor:pointer; font:600 14px/1 var(--f-body); padding:10px 20px;
                  background:var(--bg); border:1px solid var(--border); border-radius:999px; color:var(--ink) }
.helpful button:hover { border-color:#CDD2D8 }
.helpful[data-done] .helpful__btns { display:none }
.helpful__thanks { font-size:14.5px; color:var(--ok); font-weight:600 }

/* --- инструменты -------------------------------------------------- */
.tool { margin:24px 0; padding:22px; border:1px solid var(--border); border-radius:var(--r-lg);
        background:var(--bg); box-shadow:var(--shadow-sm) }
.tool__hd { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:14px }
.tool__local { color:var(--ok); margin-left:auto }
.tool label { display:block; font:600 12px/1.4 var(--f-body); letter-spacing:.08em;
              text-transform:uppercase; color:var(--muted); margin-bottom:8px }
.tool input, .tool textarea {
  width:100%; font:400 15px/1.5 var(--f-data); color:var(--ink); background:var(--soft);
  border:1px solid var(--border); border-radius:var(--r-sm); padding:12px 14px; resize:vertical;
}
.tool__fields { display:grid; gap:16px; grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
.tool__row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:16px }
.tool__out:not(:empty) { margin-top:18px; padding-top:18px; border-top:1px solid var(--border) }
.tool__note { font-size:14.5px; color:var(--muted) }

/* --- метрики «ключ → значение» ------------------------------------ */
.kv { list-style:none; margin:0; padding:0; display:grid; gap:8px }
.kv li { display:flex; gap:12px; justify-content:space-between; align-items:baseline }
.kv b { font:600 12px/1.4 var(--f-body); letter-spacing:.08em; text-transform:uppercase; color:var(--muted) }
.kv span { font:600 15px/1.4 var(--f-body); text-align:right }

/* ===================================================================
   SIGNATURE: табло доступа
   =================================================================== */
.board { margin:0 0 32px }

.board--hero { background:var(--bg); border:1px solid var(--border); border-radius:var(--r-lg);
               box-shadow:var(--shadow); overflow:hidden }
.board__hd { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; padding:18px 22px 0 }
.board__hdnote { font-size:14px; color:var(--muted) }
.board__hdnote b { color:var(--ink); font-weight:600 }
.board__grid { display:grid; grid-template-columns:250px minmax(0,1fr); gap:22px; padding:18px 22px }
.board__read { padding:18px 20px; background:var(--soft); border-radius:var(--r) }
.board__big { display:flex; align-items:flex-end; gap:12px; margin-bottom:12px }
.board__num { font:800 58px/.85 var(--f-body); letter-spacing:-.04em; color:var(--accent);
              font-variant-numeric:tabular-nums }
.board__unit { font:600 12px/1.25 var(--f-body); letter-spacing:.1em; text-transform:uppercase;
               color:var(--muted); padding-bottom:5px }
.board__chip { margin-bottom:16px }
.board__kv { padding-top:14px; border-top:1px solid var(--border); margin-bottom:14px }
.board__say { margin:0; font-size:14px; line-height:1.5; color:var(--muted) }
.board__say a { display:block; margin-top:6px; font-weight:600 }

.board__axis { min-width:0; padding-top:4px }
.board__zones { list-style:none; margin:0; padding:0; display:flex; gap:10px }
/* Ширина зоны пропорциональна числу дней. Первые две стадии срока не занимают
   (ссылка выдана и добавлена) — у них фиксированный «вход» с метками вместо
   клеток-дней, отделённый пунктиром от линейки срока. */
.zone { flex:var(--n,1) 1 0; min-width:104px; display:grid; gap:8px; align-content:start }
.zone[data-phase=link], .zone[data-phase=add] { flex:0 0 104px }
.zone[data-phase=add] { border-right:1px dashed var(--border); padding-right:12px }
.zone[data-phase=link] .cell, .zone[data-phase=add] .cell { flex:0 0 20px }
.zone__ttl { display:block; color:var(--ink) }
.zone__ttl:hover { text-decoration:none }
.zone__ttl:hover .zone__name { color:var(--accent-dark) }
.zone__name { display:block; font:600 12px/1.3 var(--f-body); letter-spacing:.06em;
              white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.zone__mark { display:block; font:400 11px/1.3 var(--f-data); color:var(--muted);
              white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.zone__cells { display:flex; gap:3px; align-items:flex-end }
.zone__short { font-size:12.5px; line-height:1.35; color:var(--muted) }

/* клетка дня: контур — впереди, залитая — прошедший, крупная — выбранный */
.cell {
  flex:1 1 0; min-width:4px; height:40px; padding:0; cursor:pointer;
  background:var(--soft); border:1px solid var(--border); border-radius:5px;
  transition:background .12s ease, border-color .12s ease;
}
.cell:hover { border-color:var(--accent) }
.cell[data-state=past] { background:var(--accent-soft); border-color:var(--accent-soft) }
.cell[data-state=sel] { background:var(--accent); border-color:var(--accent); height:48px;
                        box-shadow:0 4px 12px rgba(79,70,229,.35) }
.board--hero .zone[data-phase=link] .cell {
  background:var(--bg); border-style:dashed;
}
.board--hero .zone[data-phase=renew] .cell[data-state=past] { background:var(--warn-soft); border-color:var(--warn-soft) }
.board--hero .zone[data-phase=expired] .cell { border-style:dashed }
.board--hero .zone[data-phase=expired] .cell[data-state=past] { background:var(--down-soft);
  border-color:var(--down-soft); border-style:solid }
.board--hero .zone[data-phase=renew] .cell[data-state=sel] { background:var(--warn); border-color:var(--warn);
  box-shadow:0 4px 12px rgba(180,83,9,.3) }
.board--hero .zone[data-phase=expired] .cell[data-state=sel] { background:var(--down); border-color:var(--down);
  box-shadow:0 4px 12px rgba(220,38,38,.3) }

.zone[data-state=done] .zone__name { color:var(--muted) }
.zone[data-state=here] .zone__name { color:var(--accent) }
.zone[data-state=here] .zone__short { color:var(--accent-dark); font-weight:600 }
.zone[data-state=broken] .zone__name, .zone[data-state=broken] .zone__short { color:var(--down) }
.board--bar .zone[data-state=done] .cell { background:var(--accent-soft); border-color:var(--accent-soft) }
.board--bar .zone[data-state=broken] .cell { background:var(--down-soft); border-color:var(--down-soft) }
.board--bar .zone[data-state=next] .cell { background:var(--bg); border-style:dashed }

/* ряд слотов устройств — вторая ось табло */
.board__slotsrow { margin-top:22px; padding-top:16px; border-top:1px solid var(--border) }
.board__slotsttl { display:flex; flex-wrap:wrap; gap:10px; align-items:baseline;
                   font:600 11px/1.4 var(--f-body); letter-spacing:.12em; text-transform:uppercase;
                   color:var(--muted); margin-bottom:10px }
.board__slotsttl b { font:600 12px/1.4 var(--f-body); letter-spacing:0; text-transform:none;
                     color:var(--accent) }
.board__slots { display:flex; gap:10px }
.slot { flex:1 1 0; min-width:0; padding:12px 14px; border-radius:var(--r-sm); background:var(--soft);
        display:grid; gap:2px; color:var(--ink); border:1px solid transparent }
.slot:hover { text-decoration:none; border-color:#D7DBE0 }
.slot__n { font:400 10px/1.2 var(--f-data); color:var(--muted) }
.slot__name { font:600 15px/1.25 var(--f-body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.slot__note { font-size:12px; line-height:1.35; color:var(--muted); white-space:nowrap;
              overflow:hidden; text-overflow:ellipsis }
.slot[data-state=busy] { background:var(--accent-soft) }
.slot[data-state=busy] .slot__name { color:var(--accent-dark) }
.slot[data-state=free] { background:var(--bg); border-color:var(--border); border-style:dashed }
.slot[data-state=free] .slot__name { color:var(--muted) }
.slot[data-state=lost] { background:var(--down-soft) }
.slot[data-state=lost] .slot__name { color:var(--down) }

/* пояснение под табло: то же состояние, но словами */
.board__expl { display:grid; grid-template-columns:184px minmax(0,1fr); gap:18px; padding:18px 22px;
               border-top:1px solid var(--border); background:var(--soft) }
.board__expl p { margin:0; font-size:14.5px; line-height:1.55; color:var(--muted) }
.board__foot { display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; padding:14px 22px;
               border-top:1px solid var(--border) }
.board__fmark { font:600 11px/1.4 var(--f-body); letter-spacing:.12em; text-transform:uppercase;
                color:var(--accent) }
.board__fnote { font-size:13px; color:var(--muted); margin-left:auto }

/* Тёмная тема: подложка акцента на клетках почти не отличается от фона,
   поэтому пройденные дни заливаем плотнее — иначе линейка срока не читается. */
@media (prefers-color-scheme: dark) {
  .cell { background:#20202A }
  .cell[data-state=past] { background:#3A32A6; border-color:#3A32A6 }
  .board--hero .zone[data-phase=renew] .cell[data-state=past] { background:#6B4B12; border-color:#6B4B12 }
  .board--hero .zone[data-phase=expired] .cell[data-state=past] { background:#6E2126; border-color:#6E2126 }
  .board--bar .zone[data-state=done] .cell { background:#3A32A6; border-color:#3A32A6 }
  .board--bar .zone[data-state=broken] .cell { background:#6E2126; border-color:#6E2126 }
  .slot[data-state=busy] { background:#221F3D }
}

/* компактная полоса в статье */
.board--bar { padding:18px 20px; border-radius:var(--r); background:var(--soft); margin:24px 0 }
.board--bar .board__cap { margin-bottom:12px }
.board--bar .cell { height:14px; border-radius:4px; background:var(--bg) }
.board--bar .zone__short { font-size:11.5px }

/* ===================================================================
   Главная
   =================================================================== */
.home { display:flex; flex-direction:column; gap:48px; padding:36px 0 64px }

.hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:48px; align-items:center }
.hero--slim { grid-template-columns:minmax(0,1fr); max-width:760px }
.hero h1 { font:800 clamp(1.9rem,2.6vw + .7rem,2.6rem)/1.12 var(--f-body); letter-spacing:-.03em; margin:8px 0 12px }
.hero__lead { font-size:1.1rem; line-height:1.55; color:var(--muted); margin:0 0 22px; max-width:600px }
.hero__row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:18px }
.hero__fine { font-size:14px; color:var(--muted); margin:0 }
.hero__note { font-size:14px; line-height:1.5; color:var(--muted); margin:14px 0 0 }

/* три числа под первым экраном — как на лендинге сети */
.stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; padding-top:28px;
         border-top:1px solid var(--border) }
.stat__num { display:block; font:800 2rem/1.1 var(--f-body); letter-spacing:-.03em }
.stat__cap { display:block; color:var(--muted); font-size:.95rem; margin-top:4px }

.slab { background:var(--bg); border:1px solid var(--border); border-radius:var(--r-lg);
        box-shadow:var(--shadow); padding:22px }
.slab__hd { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px }
.slab__hd .tag:last-child { margin-left:auto }
.slab__bd { display:block }
.slab__note { font-size:14px; line-height:1.5; color:var(--muted); margin:16px 0 0 }

/* карточка примера подписки в первом экране: строка ссылки, метрики, пилюли */
.keyrow { display:flex; align-items:center; gap:10px; padding:13px 15px; margin-bottom:14px;
          background:var(--soft); border:1px solid var(--border); border-radius:var(--r-sm); overflow:hidden }
.keyrow code { background:none; border:0; padding:0; font-size:13.5px; color:var(--ink);
               white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.metrics { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; margin-bottom:14px }
.metric { padding:12px 15px; background:var(--soft); border-radius:var(--r-sm) }
.metric__lbl { display:block; font:600 10px/1.4 var(--f-body); letter-spacing:.12em; color:var(--muted) }
.metric__val { display:block; font:600 1.1rem/1.3 var(--f-body); margin-top:2px }
.chips { display:flex; flex-wrap:wrap; gap:8px }
.pill { font:500 13px/1.3 var(--f-body); background:var(--soft); border:1px solid var(--border);
        border-radius:999px; padding:6px 13px; color:var(--muted) }

.homesec { display:block }
.homesec--soft { background:var(--soft); border-radius:var(--r-lg); padding:32px }
.homesec__hd { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 24px; align-items:baseline;
               margin-bottom:22px }
.homesec__hd h2 { font:800 clamp(1.5rem,1.8vw + .8rem,2.1rem)/1.2 var(--f-body); letter-spacing:-.025em;
                  margin:0 }
.homesec__hd p { grid-column:1; margin:0; color:var(--muted) }
.homesec__more { grid-row:1/3; grid-column:2; font:600 15px/1.4 var(--f-body); white-space:nowrap }
.homesig { display:grid; gap:16px }
.homesig__note { font-size:15.5px; line-height:1.6; color:var(--muted); margin:0; max-width:92ch }

.homesplit { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:18px; align-items:start }
.grid { display:grid; gap:18px }
.grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)) }
.grid--4 { grid-template-columns:repeat(4,minmax(0,1fr)) }

/* карточка раздела */
.tile { display:grid; gap:8px; align-content:start; padding:22px; background:var(--bg);
        border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow-sm);
        color:var(--ink); transition:transform .1s ease, box-shadow .15s ease, border-color .15s ease }
.tile:hover { text-decoration:none; transform:translateY(-2px); box-shadow:var(--shadow); border-color:#D7DBE0 }
.tile__tag { font:600 11px/1.4 var(--f-body); letter-spacing:.12em; text-transform:uppercase;
             color:var(--accent) }
.tile__ttl { font:600 1.2rem/1.25 var(--f-body) }
.tile__sub { font-size:14.5px; line-height:1.55; color:var(--muted) }

/* строка спроса: слева короткий ответ, справа вопрос */
.qlist { list-style:none; margin:0; padding:0; display:grid; gap:8px }
.q { display:grid; grid-template-columns:210px minmax(0,1fr) auto; gap:18px; align-items:center;
     padding:15px 20px; border-radius:var(--r-sm); background:var(--bg); border:1px solid var(--border);
     color:var(--ink) }
.q:hover { text-decoration:none; border-color:#D7DBE0; background:var(--soft) }
.q__key { font-size:13.5px; color:var(--accent-dark); font-weight:600 }
.q__txt { font-size:16px; line-height:1.4 }
.q__go { color:var(--muted) }

/* типовые отказы доступа */
.errlist { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px }
.errlist a { display:flex; gap:14px; align-items:center; padding:14px 18px; border-radius:var(--r-sm);
             background:var(--bg); border:1px solid var(--border); color:var(--ink); font-size:15.5px }
.errlist a:hover { text-decoration:none; border-color:#D7DBE0; background:var(--soft) }
.errlist em { flex:none; font:600 10px/1.4 var(--f-body); letter-spacing:.12em; text-transform:uppercase;
              color:var(--down); font-style:normal; background:var(--down-soft); border-radius:999px;
              padding:5px 10px }

/* --- футер ------------------------------------------------------- */
.ftr { border-top:1px solid var(--border); padding:44px 0 56px; margin-top:32px }
.ftr__grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; margin-bottom:32px }
.ftr__grid ul { list-style:none; margin:0; padding:0 }
.ftr__grid li { margin-bottom:8px }
.ftr__grid a { font-size:14.5px; color:var(--ink) }
.ftr__grid a:hover { color:var(--accent-dark) }
.ftr__disc { font-size:14px; line-height:1.6; color:var(--muted); margin:0 0 24px; max-width:96ch }
.ftr__bar { display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; padding-top:20px;
            border-top:1px solid var(--border) }
.ftr__bar a { font:600 11px/1.4 var(--f-body); letter-spacing:.12em; color:var(--muted) }
.ftr__copy { font:600 11px/1.4 var(--f-body); letter-spacing:.12em; color:var(--muted); margin-left:auto }

/* --- диалог поиска ---------------------------------------------- */
.sdlg { display:none }
.sdlg.is-open { display:block; position:fixed; inset:0; z-index:60 }
.sdlg__bd { position:absolute; inset:0; background:rgba(11,11,15,.42) }
.sdlg__box { position:relative; max-width:640px; margin:10vh auto 0; background:var(--bg);
             border-radius:var(--r-lg); box-shadow:var(--shadow-up); overflow:hidden }
.sdlg__box input { width:100%; font:400 17px/1.4 var(--f-body); color:var(--ink); background:var(--bg);
                   border:0; border-bottom:1px solid var(--border); padding:18px 22px }
.sres { list-style:none; margin:0; padding:8px; max-height:52vh; overflow-y:auto }
.sres a { display:flex; gap:16px; justify-content:space-between; align-items:center;
          padding:12px 14px; border-radius:var(--r-sm); color:var(--ink) }
.sres a.is-sel, .sres a:hover { background:var(--soft); text-decoration:none }
.sres__t { font-size:15.5px; line-height:1.4 }
.sres__p { font:600 10px/1.4 var(--f-body); letter-spacing:.12em; color:var(--muted); white-space:nowrap }
.sdlg__foot { padding:12px 22px; border-top:1px solid var(--border); font-size:13px; color:var(--muted) }

/* ===================================================================
   Адаптив
   =================================================================== */
@media (max-width:1180px) { .hdr__cta { display:none } }

@media (max-width:1080px) {
  .layout { grid-template-columns:220px minmax(0,1fr); gap:32px }
  .board__grid { grid-template-columns:224px minmax(0,1fr); gap:18px }
  .board__num { font-size:50px }
  .q { grid-template-columns:180px minmax(0,1fr) auto }
}

@media (max-width:900px) {
  .hdr__links { display:none }
  .burger { display:inline-flex; margin-left:auto }
  .hdr__nav { margin-left:0; gap:8px }
  .hdr__in { gap:10px; height:64px }
  .mnav.is-open { display:block }
  .layout { grid-template-columns:minmax(0,1fr); gap:24px }
  .side { display:none; position:static }
  .side.is-open { display:block }
  .hero { grid-template-columns:minmax(0,1fr); gap:28px }
  .home { gap:44px; padding-top:32px }
  .board__grid { grid-template-columns:minmax(0,1fr) }
  .board__zones { display:grid; gap:14px }
  .zone, .zone[data-phase=link], .zone[data-phase=add] { flex:none; grid-template-columns:120px minmax(0,1fr);
    align-items:center; column-gap:14px }
  .zone[data-phase=add] { border-right:0; padding-right:0; border-bottom:1px dashed var(--border);
    padding-bottom:14px }
  .zone__cells { grid-column:2; grid-row:1 }
  .zone__ttl { grid-column:1; grid-row:1 }
  .zone__short { grid-column:1/3; grid-row:2; margin-top:-4px }
  .cell { height:28px }
  .cell[data-state=sel] { height:34px }
  .board--bar .cell { height:12px }
  .board__slots { flex-wrap:wrap }
  .slot { flex:1 1 40% }
  .board__expl { grid-template-columns:minmax(0,1fr); gap:8px }
  .conn__steps { grid-template-columns:minmax(0,1fr) }
  .grid--3, .grid--4 { grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
  .homesplit { grid-template-columns:minmax(0,1fr) }
  .also__list, .errlist { grid-template-columns:minmax(0,1fr) }
  .ftr__grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px }
  .signs__i { grid-template-columns:minmax(0,1fr); gap:6px }
  .tool__fields { grid-template-columns:minmax(0,1fr) }
  .stats { grid-template-columns:minmax(0,1fr); gap:16px }
  .homesec--soft { padding:24px 20px }
}

@media (max-width:620px) {
  body { font-size:16px }
  /* шапка обязана уложиться в узкий экран: подпись бренда и текст поиска убираем */
  .brand__sub { display:none }
  .brand__mark { font-size:17px }
  .brand__badge { width:32px; height:32px }
  .searchbtn { padding:10px 13px }
  .searchbtn span:not(.searchbtn__ico), .searchbtn kbd { display:none }
  .burger { padding:10px 14px; font-size:13.5px }
  .grid--2, .grid--3, .grid--4 { grid-template-columns:minmax(0,1fr) }
  .row { grid-template-columns:minmax(0,1fr); gap:6px; padding:16px 18px }
  .row__go { display:none }
  .q { grid-template-columns:minmax(0,1fr) auto }
  .q__key { grid-row:2; grid-column:1 }
  .shot__pair { grid-template-columns:minmax(0,1fr) }
  .shot__link img, .shot__part img { max-height:none }
  .board__fnote { margin-left:0 }
  .homesec__hd { grid-template-columns:minmax(0,1fr) }
  .homesec__more { grid-row:auto; grid-column:1 }
  .mnav ul { grid-template-columns:minmax(0,1fr) }
  .ftr__grid { grid-template-columns:minmax(0,1fr) }
  .helpful__btns { margin-left:0 }
  .zone, .zone[data-phase=link], .zone[data-phase=add] { grid-template-columns:104px minmax(0,1fr); column-gap:10px }
  .steps>li { padding:18px 18px 18px 62px }
  .steps>li::before { left:16px }
  .cta { padding:22px }
}

@media print {
  .hdr, .side, .ftr, .sdlg, .cta, .trial, .conn, .helpful { display:none }
}