/* ============================================================
   happ.rodeo — тема «интерфейс телевизора».

   Логика не сайта, а лаунчера на большом экране: тёмный фон, крупные
   плитки, горизонтальные полки разделов, видимая рамка фокуса (как при
   навигации пультом) и типографика, читаемая с дивана.

   Signature — план домашней сети: интернет → роутер → устройство.
   Выбор устройства подсвечивает маршрут доступа и ведёт в свой раздел.

   Шрифты: 3 роли, 3 гарнитуры
   display — Unbounded (широкий экранный гротеск: заголовки, плитки)
   body    — Ubuntu (тёплый, хорошо читается крупным кеглем)
   data    — Fira Mono (только метки, коды, адреса, номера портов)
   ============================================================ */

@font-face{font-family:'Unbounded';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/unb-700-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/unb-700-cyr-ext.woff2) format('woff2');unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/unb-700-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Ubuntu';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ubu-400-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/ubu-400-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ubu-500-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/ubu-500-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/ubu-700-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/ubu-700-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:'Fira Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/firamono-400-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Fira Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/firamono-400-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fira Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/firamono-500-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Fira Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/firamono-500-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* --- Токены ---------------------------------------------------
   Тема одна и она тёмная: сайт воспроизводит интерфейс телевизора,
   а телевизор не меняет цвет от того, светло ли в комнате. Светлый
   вариант не делается сознательно — он разрушил бы главный приём
   (подсветка фокуса на тёмном фоне) и сделал бы сайт похожим на
   остальные справочные сети.                                      */
:root{
  --bg:#0A0D12;         /* фон: выключенная матрица */
  --surface:#131922;    /* плитка, панель */
  --surface2:#1B2431;   /* поднятая плоскость: выбранное, поля ввода */
  --ink:#F2F6FB;        /* текст */
  --muted:#93A0B4;      /* второстепенный текст */
  --rule:#26303E;       /* грани плиток и линейки */
  --accent:#FFC53D;     /* подсветка фокуса: выбранное пультом */
  --accent-ink:#0A0D12; /* текст на подсветке */
  --wire:#5AC8FA;       /* сигнал: провода маршрута, ссылки */
  /* семантика состояний — разведена с акцентом по тону */
  --ok:#3ECF8E;   --ok-bg:#10251D;
  --warn:#FFB020; --warn-bg:#2A2010;
  --down:#FF6B6B; --down-bg:#2C1416;
  --f-display:'Unbounded',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Ubuntu',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-data:'Fira Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:10px; --r-sm:4px;   /* скругление плиток лаунчера */
  --wrap:1240px;
  --shadow:0 18px 40px rgba(0,0,0,.45);
  color-scheme:dark;
}
/* Дневной режим: при светлой системной теме экран не белеет, а лишь
   приподнимается — как телевизор, которому добавили яркости. */
@media (prefers-color-scheme:light){
  :root{
    --bg:#141A24; --surface:#1D2634; --surface2:#26313F; --rule:#33404F;
    --ink:#FAFCFF; --muted:#A8B3C4;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--f-body);
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
@media (min-width:900px){body{font-size:18px}}
img{max-width:100%;height:auto}
a{color:var(--wire);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--wire) 35%,transparent)}
a:hover{border-bottom-color:var(--wire)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:60;background:var(--accent);color:var(--accent-ink);padding:10px 16px;border-radius:var(--r-sm)}
.page{min-height:100vh;display:flex;flex-direction:column}

/* --- Утилита: моно-метка -------------------------------------- */
.tag{font:500 11px/1 var(--f-data);letter-spacing:.14em;color:var(--muted);text-transform:uppercase;
  display:inline-block;white-space:nowrap}
code{font:400 .92em/1.4 var(--f-data);background:var(--surface2);border:1px solid var(--rule);
  border-radius:var(--r-sm);padding:1px 6px;word-break:break-word}

/* --- Способ подключения (общий словарь сайта) ------------------ */
.way{font:500 10px/1 var(--f-data);letter-spacing:.12em;text-transform:uppercase;
  padding:5px 8px;border-radius:var(--r-sm);border:1px solid;white-space:nowrap}
.way--app{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:var(--ok-bg)}
.way--share{color:var(--wire);border-color:color-mix(in srgb,var(--wire) 45%,transparent);background:color-mix(in srgb,var(--wire) 12%,transparent)}
.way--home{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent)}

/* --- Шапка ---------------------------------------------------- */
.hdr{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 92%,transparent);
  border-bottom:1px solid var(--rule)}
.hdr__in{max-width:var(--wrap);margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:24px}
.brand{display:flex;flex-direction:column;gap:2px;border:0;color:var(--ink)}
.brand__mark{font:700 22px/1 var(--f-display);letter-spacing:-.02em}
.brand__sub{font:500 10px/1 var(--f-data);letter-spacing:.22em;color:var(--accent)}
.hdr__nav{margin-left:auto;display:flex;align-items:center;gap:20px}
.hdr__links{display:flex;gap:20px}
.hdr__links a{font:500 15px/1 var(--f-body);color:var(--muted);border:0;padding:8px 0;
  border-bottom:2px solid transparent}
.hdr__links a:hover{color:var(--ink)}
.hdr__links a[aria-current=page]{color:var(--ink);border-bottom-color:var(--accent)}
.searchbtn{display:flex;align-items:center;gap:8px;background:var(--surface);color:var(--muted);
  border:1px solid var(--rule);border-radius:var(--r-sm);padding:8px 12px;cursor:pointer;
  font:400 14px/1 var(--f-body)}
.searchbtn:hover{border-color:var(--accent);color:var(--ink)}
.searchbtn kbd{font:500 11px/1 var(--f-data);border:1px solid var(--rule);border-radius:3px;padding:3px 5px}
.burger{display:none;margin-left:auto;background:var(--surface);color:var(--ink);border:1px solid var(--rule);
  border-radius:var(--r-sm);padding:9px 12px;font:500 12px/1 var(--f-data);letter-spacing:.1em;cursor:pointer}
.mnav{display:none;border-top:1px solid var(--rule);padding:8px 20px 14px}
.mnav ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mnav a{display:block;padding:12px;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r-sm);color:var(--ink);font-size:15px}
.mnav.is-open{display:block}
@media (max-width:980px){
  .hdr__links{display:none}
  .hdr__nav{margin-left:0}
  .burger{display:block}
  .searchbtn span:nth-child(2),.searchbtn kbd{display:none}
}

/* ============================================================
   SIGNATURE: план домашней сети
   ============================================================ */
.plan{margin:0 0 32px}
.plan__cap{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.plan__hint{font-size:14px;color:var(--muted)}

/* маршрут: узлы, соединённые проводами */
.route{display:flex;align-items:stretch;gap:0;flex-wrap:wrap}
.node{display:flex;flex-direction:column;justify-content:center;gap:2px;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:10px 14px;min-width:0}
.node__name{font:500 13px/1.2 var(--f-body);color:var(--muted);white-space:nowrap}
.node__sub{font:400 11px/1.3 var(--f-data);color:var(--muted);opacity:.75}
.node[data-state=here]{background:var(--surface2);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.node[data-state=here] .node__name{color:var(--ink);font-weight:700}
.node--hub{border-style:dashed}
.wire{align-self:center;width:26px;height:2px;background:linear-gradient(90deg,var(--rule),var(--wire));flex:none}
.route--hero{margin-bottom:20px}
.route--hero .node{padding:14px 18px;border-radius:var(--r)}
.route--hero .node__name{font-size:15px}

/* большой план на главной */
.plan--hero{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:24px}
.plan__devs{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(4,minmax(0,1fr))}
.tile{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;text-align:left;
  background:var(--bg);border:1px solid var(--rule);border-radius:var(--r);padding:16px;cursor:pointer;
  color:var(--ink);font:inherit;transition:transform .12s ease,border-color .12s ease}
.tile:hover{border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.tile[data-state=sel]{border-color:var(--accent);background:var(--surface2);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);transform:translateY(-2px)}
.tile__ico{width:34px;height:24px;border:2px solid var(--muted);border-radius:3px;position:relative;margin-bottom:2px}
.tile__ico::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:-6px;
  width:16px;height:3px;background:var(--muted);border-radius:2px}
.tile[data-state=sel] .tile__ico{border-color:var(--accent)}
.tile[data-state=sel] .tile__ico::after{background:var(--accent)}
.tile__ico[data-ico=console]{border-radius:12px;height:20px;width:38px}
.tile__ico[data-ico=box]{height:16px;width:30px;border-radius:4px}
.tile__ico[data-ico=other]{border-radius:50%;width:26px;height:26px}
.tile__ico[data-ico=other]::after,.tile__ico[data-ico=console]::after{display:none}
.tile__name{font:700 17px/1.2 var(--f-display);letter-spacing:-.01em}
.tile__sub{font-size:13px;color:var(--muted);line-height:1.4}
.tile__way{margin-top:6px}
.plan__read{border-top:1px solid var(--rule);padding-top:16px;display:flex;align-items:flex-start;
  gap:20px;flex-wrap:wrap}
.plan__txt{margin:0;flex:1 1 320px;color:var(--muted);font-size:16px}
.plan__go{font:700 15px/1 var(--f-display);color:var(--accent);border:0;white-space:nowrap;padding-top:4px}

/* компактная полоса в статье */
.plan--bar{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:14px 16px}
.plan--bar .plan__cap{margin-bottom:10px;justify-content:space-between}
.plan--bar .node{padding:8px 12px;background:transparent}
@media (max-width:720px){
  .plan__devs{grid-template-columns:1fr}
  .plan--hero{padding:16px}
  /* Маршрут разворачивается в вертикальную цепочку: провода становятся
     перемычками между узлами, иначе они торчали бы вбок от столбца. */
  .route{flex-direction:column;align-items:stretch}
  .wire{width:2px;height:14px;margin-left:22px;align-self:flex-start;
    background:linear-gradient(180deg,var(--rule),var(--wire))}
  .route--hero .node{padding:10px 14px}
}

/* --- Каркас страницы ------------------------------------------ */
.layout{max-width:var(--wrap);margin:0 auto;padding:28px 20px 64px;display:grid;
  grid-template-columns:290px minmax(0,1fr);gap:44px;flex:1}
main{min-width:0}
.side{position:sticky;top:84px;align-self:start;max-height:calc(100vh - 104px);overflow:auto;
  padding-right:8px}
.side__grp{margin-bottom:26px}
.side__ttl{display:block;font:500 11px/1 var(--f-data);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px}
.side__ttl a{color:var(--accent);border:0}
.side ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.side ul a{display:block;padding:8px 12px;border-radius:var(--r-sm);color:var(--muted);
  border:0;font-size:15px;line-height:1.35}
.side ul a:hover{background:var(--surface);color:var(--ink)}
.side ul a[aria-current=page]{background:var(--surface2);color:var(--ink);
  box-shadow:inset 3px 0 0 var(--accent)}
@media (max-width:980px){
  .layout{grid-template-columns:1fr;gap:0;padding:20px 16px 56px}
  .side{display:none;position:static;max-height:none;margin-bottom:28px;overflow:visible}
  .side.is-open{display:block}
}

/* карточка подписки в сайдбаре */
.side__cta{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--accent);
  border-radius:var(--r);padding:18px}
.side__cta-tag{color:var(--accent);display:block;margin-bottom:10px}
.side__cta-ttl{margin:0 0 8px;font:700 18px/1.2 var(--f-display);letter-spacing:-.01em}
.side__cta-txt{margin:0 0 14px;font-size:14px;color:var(--muted);line-height:1.5}
.side__cta-fine{display:block;margin-top:10px;font:400 11px/1 var(--f-data);color:var(--muted)}
.side__cta .btn{width:100%;text-align:center;font-size:14px;padding:12px 10px}

/* --- Крошки и заголовок статьи -------------------------------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px;
  font:400 13px/1 var(--f-data);color:var(--muted)}
.crumbs a{color:var(--muted);border:0}
.crumbs a:hover{color:var(--ink)}
.crumbs i{font-style:normal;opacity:.4}
.art{max-width:820px}
.art h1{font:700 clamp(28px,4.6vw,46px)/1.12 var(--f-display);letter-spacing:-.025em;margin:0 0 14px}
.art__meta{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:24px}
.art__lead{font-size:clamp(18px,2.2vw,21px);line-height:1.55;color:var(--ink);margin:0 0 28px;
  padding-left:18px;border-left:3px solid var(--accent)}
.art h2{font:700 clamp(22px,3vw,30px)/1.2 var(--f-display);letter-spacing:-.02em;margin:44px 0 16px}
.art h3{font:700 19px/1.3 var(--f-body);margin:32px 0 10px}
.art p{margin:0 0 18px}
.art ul:not([class]),.art ol:not([class]){margin:0 0 20px;padding-left:0;list-style:none}
.art ul:not([class])>li,.art ol:not([class])>li{position:relative;padding-left:26px;margin-bottom:10px}
.art ul:not([class])>li::before{content:'';position:absolute;left:6px;top:11px;width:8px;height:2px;
  background:var(--accent)}
.art ol:not([class]){counter-reset:n}
.art ol:not([class])>li{counter-increment:n}
.art ol:not([class])>li::before{content:counter(n);position:absolute;left:0;top:1px;
  font:500 12px/1.6 var(--f-data);color:var(--accent)}
.art strong{font-weight:700}

/* --- Шаги инструкции ------------------------------------------ */
.steps{list-style:none;counter-reset:s;margin:0 0 28px;padding:0}
.steps>li{counter-increment:s;position:relative;padding:0 0 24px 56px;border-left:2px solid var(--rule);
  margin-left:16px}
.steps>li:last-child{border-left-color:transparent;padding-bottom:4px}
.steps>li::before{content:counter(s,decimal-leading-zero);position:absolute;left:-18px;top:-4px;
  width:34px;height:34px;display:grid;place-items:center;background:var(--surface2);
  border:1px solid var(--accent);border-radius:50%;font:500 12px/1 var(--f-data);color:var(--accent)}
.step__ttl{display:block;font:700 18px/1.3 var(--f-body);margin-bottom:8px}
.steps p{margin:0 0 10px}
.steps ul{list-style:none;margin:0 0 10px;padding:0}
.steps ul li{position:relative;padding-left:20px;margin-bottom:6px;color:var(--muted)}
.steps ul li::before{content:'';position:absolute;left:2px;top:11px;width:6px;height:2px;background:var(--muted)}

/* --- Пульт: цепочка нажатий ----------------------------------- */
.rmt{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:16px 18px;margin:0 0 26px}
.rmt__ttl{display:block;margin-bottom:12px;color:var(--accent)}
.rmt__keys{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.rmt__keys>li{display:flex;align-items:center;gap:10px}
.rmt__keys>li:not(:last-child)::after{content:'→';color:var(--muted);font-size:14px}
.key{display:inline-block;background:var(--surface2);border:1px solid var(--rule);
  border-bottom-width:3px;border-radius:6px;padding:7px 12px;font:500 13px/1 var(--f-data);
  color:var(--ink);white-space:nowrap}
.rmt__hint{font-size:13px;color:var(--muted)}
.rmt__note{margin:12px 0 0;font-size:14px;color:var(--muted)}

/* --- Врезки --------------------------------------------------- */
.note{border:1px solid var(--rule);border-left:3px solid var(--muted);border-radius:var(--r);
  padding:16px 18px;margin:0 0 26px;background:var(--surface)}
.note p{margin:0 0 8px}.note p:last-child{margin:0}
.note__ttl{display:block;font:700 16px/1.3 var(--f-body);margin-bottom:8px}
.note ul{margin:8px 0 0;padding:0;list-style:none}
.note ul li{position:relative;padding-left:20px;margin-bottom:6px}
.note ul li::before{content:'';position:absolute;left:2px;top:11px;width:6px;height:2px;background:currentColor;opacity:.5}
.note--info{border-left-color:var(--wire)}
.note--ok{border-left-color:var(--ok);background:var(--ok-bg)}
.note--warn{border-left-color:var(--warn);background:var(--warn-bg)}
.note--down{border-left-color:var(--down);background:var(--down-bg)}
.note--ok .note__ttl{color:var(--ok)}
.note--warn .note__ttl{color:var(--warn)}
.note--down .note__ttl{color:var(--down)}

/* --- Таблицы -------------------------------------------------- */
.tw{overflow-x:auto;margin:0 0 28px;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:520px}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--rule);vertical-align:top}
th{font:500 11px/1.3 var(--f-data);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  background:var(--surface2);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td code{font-size:.86em}

/* --- Статус-чипы ---------------------------------------------- */
.chip{display:inline-block;font:500 10px/1 var(--f-data);letter-spacing:.12em;text-transform:uppercase;
  padding:5px 8px;border-radius:var(--r-sm);border:1px solid}
.chip--ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:var(--ok-bg)}
.chip--warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:var(--warn-bg)}
.chip--down{color:var(--down);border-color:color-mix(in srgb,var(--down) 45%,transparent);background:var(--down-bg)}

/* --- Слот под скриншот ---------------------------------------- */
.shot{margin:0 0 26px}
.shot__frame{border:1px dashed var(--rule);border-radius:var(--r);background:
  repeating-linear-gradient(45deg,transparent,transparent 9px,color-mix(in srgb,var(--rule) 45%,transparent) 9px,color-mix(in srgb,var(--rule) 45%,transparent) 10px);
  min-height:132px;display:grid;place-items:center}
.shot__code{font:500 12px/1 var(--f-data);letter-spacing:.14em;color:var(--muted);
  background:var(--bg);border:1px solid var(--rule);border-radius:var(--r-sm);padding:6px 10px}
.shot__link{display:block;border:0;position:relative}
.shot img{display:block;width:100%;border:1px solid var(--rule);border-radius:var(--r);background:var(--surface)}
.shot__zoom{position:absolute;right:10px;bottom:10px;font:400 11px/1 var(--f-data);color:var(--muted);
  background:var(--bg);border:1px solid var(--rule);border-radius:var(--r-sm);padding:5px 8px;opacity:0;transition:opacity .15s}
.shot__link:hover .shot__zoom{opacity:1}
.shot__cap{margin-top:10px;font-size:14px;color:var(--muted)}
.shot__pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.shot__part{position:relative}
.shot__mark{position:absolute;left:8px;top:8px;z-index:1;font:500 11px/1 var(--f-data);
  background:var(--accent);color:var(--accent-ink);border-radius:var(--r-sm);padding:4px 7px}
.shot__partcap{display:block;margin-top:8px;font-size:13px;color:var(--muted)}
.shot--pair img{max-height:400px;object-fit:contain}
.shot:not(.shot--pair) img{max-height:520px;object-fit:contain}
@media (max-width:720px){
  .shot__pair{grid-template-columns:1fr}
  .shot img,.shot--pair img{max-height:none}
}

/* --- Кнопки --------------------------------------------------- */
.btn{display:inline-block;font:700 15px/1 var(--f-display);letter-spacing:-.01em;border-radius:var(--r-sm);
  padding:14px 20px;border:1px solid var(--rule);background:var(--surface2);color:var(--ink);cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn--go{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn--go:hover{filter:brightness(1.08)}
.btn--ghost{background:transparent}

/* --- CTA ------------------------------------------------------ */
.cta{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:24px;margin:0 0 30px;position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:var(--accent)}
.cta--diag::before{background:var(--wire)}
.cta__tag{color:var(--accent);display:block;margin-bottom:10px}
.cta--diag .cta__tag{color:var(--wire)}
.cta__ttl{margin:0 0 10px;font:700 clamp(20px,2.6vw,26px)/1.2 var(--f-display);letter-spacing:-.02em}
.cta p{margin:0 0 14px;color:var(--muted)}
.cta__pts{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.cta__pts li{position:relative;padding-left:18px;font-size:14px;color:var(--muted)}
.cta__pts li::before{content:'';position:absolute;left:0;top:9px;width:9px;height:2px;background:var(--ok)}
.cta__row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cta__fine{font:400 12px/1.4 var(--f-data);color:var(--muted)}

/* --- Плашка с пробным периодом -------------------------------- */
.trial{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r);padding:18px 20px;margin:0 0 30px}
.trial__tag{color:var(--accent);flex:0 0 100%}
.trial__txt{margin:0;flex:1 1 300px;font-size:15px;color:var(--muted)}
.trial__txt b{color:var(--ink)}
.trial--foot{margin:36px 0 26px}

/* --- Подключение за три шага ---------------------------------- */
.conn{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:24px;margin:0 0 30px}
.conn__hd{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.conn__free{color:var(--ok)}
.conn__ttl{margin:0 0 18px;font:700 clamp(20px,2.6vw,26px)/1.2 var(--f-display);letter-spacing:-.02em}
.conn__steps{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.conn__steps li{background:var(--bg);border:1px solid var(--rule);border-radius:var(--r);padding:16px}
.conn__n{display:block;font:500 11px/1 var(--f-data);color:var(--accent);margin-bottom:8px}
.conn__ttl2{display:block;font:700 16px/1.3 var(--f-body);margin-bottom:6px}
.conn__txt{display:block;font-size:14px;color:var(--muted);line-height:1.5}
.conn__row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
@media (max-width:720px){.conn__steps{grid-template-columns:1fr}}

/* --- Списки-строки для хабов ---------------------------------- */
.rows{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:8px}
.row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:16px 18px;
  border-bottom:1px solid var(--rule);color:var(--ink)}
.row:hover{border-color:var(--accent);background:var(--surface2)}
.row__idx{font:500 11px/1 var(--f-data);letter-spacing:.1em;color:var(--accent);text-transform:uppercase}
.row__ttl{display:block;font:700 17px/1.3 var(--f-body)}
.row__sub{display:block;font-size:14px;color:var(--muted);line-height:1.45;margin-top:3px}
.row__go{font:500 11px/1 var(--f-data);letter-spacing:.1em;color:var(--muted);text-transform:uppercase;white-space:nowrap}
@media (max-width:640px){
  .row{grid-template-columns:auto minmax(0,1fr)}
  .row__go{display:none}
}

/* --- Карточки способов ---------------------------------------- */
.ways{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:12px;grid-template-columns:repeat(3,1fr)}
.ways__it a{display:flex;flex-direction:column;gap:8px;height:100%;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r);padding:18px;color:var(--ink)}
.ways__it a:hover{border-color:var(--accent)}
.ways__it .way{align-self:flex-start}
.ways__ttl{font:700 17px/1.25 var(--f-display);letter-spacing:-.01em}
.ways__txt{font-size:14px;color:var(--muted);line-height:1.5;flex:1}
.ways__go{font:500 11px/1 var(--f-data);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
@media (max-width:820px){.ways{grid-template-columns:1fr}}

/* --- Вопросы -------------------------------------------------- */
.faq{margin:0 0 30px;border-top:1px solid var(--rule)}
.faq h3{margin:0;padding:18px 0 8px;font:700 17px/1.35 var(--f-body);border-top:0}
.faq h3+p{margin:0 0 16px;color:var(--muted)}
.faq h3:not(:first-child){border-top:1px solid var(--rule)}

/* --- Смотрите также ------------------------------------------- */
.also{margin:0 0 26px;padding:20px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--r)}
.also__list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;grid-template-columns:1fr 1fr}
.also__list a{font-size:15px}
.also__site{display:block;font:400 11px/1 var(--f-data);color:var(--muted);margin-top:3px}
@media (max-width:640px){.also__list{grid-template-columns:1fr}}

/* --- Полезно ли ----------------------------------------------- */
.helpful{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:20px;
  border-top:1px solid var(--rule);font-size:14px;color:var(--muted)}
.helpful__btns button{background:var(--surface);color:var(--ink);border:1px solid var(--rule);
  border-radius:var(--r-sm);padding:8px 16px;margin-left:8px;cursor:pointer;font:500 12px/1 var(--f-data);letter-spacing:.1em}
.helpful__btns button:hover{border-color:var(--accent)}
.helpful[data-done] .helpful__btns{display:none}
.helpful__thanks{color:var(--ok)}

/* --- Инструменты ---------------------------------------------- */
.tool{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);margin:0 0 30px;overflow:hidden}
.tool__hd{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--rule);
  background:var(--surface2)}
.tool__hd .tag:first-child{color:var(--accent)}
.tool__bd{padding:18px}
.tool label,.tool__lbl{display:block;font:500 11px/1 var(--f-data);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
.tool__field{margin-bottom:16px}
.tool textarea,.tool input[type=text]{width:100%;background:var(--bg);color:var(--ink);
  border:1px solid var(--rule);border-radius:var(--r-sm);padding:12px 14px;font:400 15px/1.5 var(--f-data)}
.tool textarea:focus,.tool input:focus{border-color:var(--accent);outline:none}
.tool__row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px}
.tool__out:not(:empty){margin-top:20px;padding-top:20px;border-top:1px solid var(--rule)}
.tool__out pre{background:var(--bg);border:1px solid var(--rule);border-radius:var(--r-sm);padding:14px;
  overflow-x:auto;font:400 13px/1.55 var(--f-data);margin:0 0 12px}
.tool__note{font-size:14px;color:var(--muted);margin:12px 0 0}
.checks{display:grid;gap:8px;grid-template-columns:1fr 1fr}
.check{display:flex!important;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--rule);
  border-radius:var(--r-sm);padding:12px 14px;cursor:pointer;font:400 15px/1.3 var(--f-body)!important;
  letter-spacing:0!important;text-transform:none!important;color:var(--ink)!important;margin:0!important}
.check:hover{border-color:var(--accent)}
.check input{accent-color:var(--accent);width:18px;height:18px}
.kv{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden}
.kv li{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;background:var(--surface);padding:11px 14px}
.kv b{font:500 11px/1.5 var(--f-data);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.kv span{font:400 14px/1.5 var(--f-data);word-break:break-word}
@media (max-width:640px){
  .checks{grid-template-columns:1fr}
  .kv li{grid-template-columns:1fr;gap:4px}
}
pre{background:var(--surface2);border:1px solid var(--rule);border-radius:var(--r-sm);padding:14px;
  overflow-x:auto;font:400 13px/1.55 var(--f-data)}

/* --- Поиск ---------------------------------------------------- */
.sdlg{display:none;position:fixed;inset:0;z-index:60}
.sdlg.is-open{display:block}
.sdlg__bd{position:absolute;inset:0;background:rgba(4,7,11,.72)}
.sdlg__box{position:relative;max-width:660px;margin:9vh auto 0;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.sdlg input{width:100%;border:0;border-bottom:1px solid var(--rule);background:var(--surface2);
  color:var(--ink);padding:18px 20px;font:400 17px/1.4 var(--f-body)}
.sdlg input:focus{outline:none;border-bottom-color:var(--accent)}
.sres{list-style:none;margin:0;padding:8px;max-height:56vh;overflow:auto}
.sres a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 14px;
  border-radius:var(--r-sm);border:0;color:var(--ink)}
.sres a.is-sel,.sres a:hover{background:var(--surface2);box-shadow:inset 3px 0 0 var(--accent)}
.sres__t{font-size:15px}
.sres__p{font:500 10px/1 var(--f-data);letter-spacing:.1em;color:var(--muted);white-space:nowrap}
.sdlg__foot{padding:10px 20px;border-top:1px solid var(--rule);font:400 11px/1 var(--f-data);color:var(--muted)}

/* --- Нижняя панель на телефоне -------------------------------- */
.gobar{position:fixed;left:0;right:0;bottom:0;z-index:50;transform:translateY(110%);
  transition:transform .22s ease;background:var(--surface);border-top:1px solid var(--accent)}
.gobar.is-on{transform:none}
.gobar__in{display:flex;align-items:center;gap:12px;padding:12px 14px}
.gobar__txt{display:flex;flex-direction:column;flex:1;min-width:0}
.gobar__txt b{font:700 15px/1.2 var(--f-display)}
.gobar__txt span{font-size:12px;color:var(--muted)}
.gobar .btn{padding:11px 14px;font-size:14px}
.gobar__x{background:transparent;border:0;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:4px 6px}
body.has-gobar{padding-bottom:74px}
@media (min-width:861px){.gobar{display:none}}

/* ============================================================
   Главная: полки разделов, как в лаунчере
   ============================================================ */
.home{max-width:var(--wrap);margin:0 auto;padding:32px 20px 64px;flex:1}
.hero{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start;margin-bottom:32px}
.hero h1{font:700 clamp(28px,4.2vw,46px)/1.08 var(--f-display);letter-spacing:-.03em;margin:0 0 14px}
.hero__lead{font-size:clamp(16px,1.7vw,18px);line-height:1.5;color:var(--muted);margin:0 0 20px;max-width:620px}
.hero__lead b{color:var(--ink)}
.hero__cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.hero__side{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:22px}
.hero__side h2{margin:0 0 10px;font:700 20px/1.25 var(--f-display);letter-spacing:-.02em}
.hero__side p{margin:0 0 16px;font-size:15px;color:var(--muted)}
@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:20px}
  /* На узком экране карточка «начните с устройства» едет под текст, и длинное
     описание отодвигает сам план: оставляем заголовок и строку-ссылку. */
  .hero__side{padding:16px}
  .hero__side p{display:none}
  .hero__cta .btn{font-size:15px}
}

.rail{margin-bottom:48px}
.rail__hd{display:flex;align-items:baseline;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.rail__hd h2{margin:0;font:700 clamp(22px,3vw,30px)/1.2 var(--f-display);letter-spacing:-.02em}
.rail__hd a{font:500 12px/1 var(--f-data);letter-spacing:.1em;text-transform:uppercase;border:0;color:var(--accent)}
.rail__sub{font-size:15px;color:var(--muted);margin:0 0 16px;max-width:760px}
/* Полка: на широком экране едет вбок, как ряд в лаунчере; на телефоне
   раскладывается в столбец — пальцем удобнее листать вниз. */
.rail__list{list-style:none;margin:0;padding:0 0 8px;display:grid;gap:12px;
  grid-auto-flow:column;grid-auto-columns:minmax(268px,1fr);overflow-x:auto;scroll-snap-type:x proximity}
.rail__list>li{scroll-snap-align:start}
.card{display:flex;flex-direction:column;gap:8px;height:100%;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r);padding:18px;color:var(--ink)}
.card:hover{border-color:var(--accent);background:var(--surface2)}
.card__idx{font:500 11px/1 var(--f-data);letter-spacing:.12em;color:var(--accent);text-transform:uppercase}
.card__ttl{font:700 18px/1.25 var(--f-display);letter-spacing:-.015em}
.card__txt{font-size:14px;line-height:1.5;color:var(--muted);flex:1}
.card__go{font:500 11px/1 var(--f-data);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media (max-width:820px){
  .rail__list{grid-auto-flow:row;grid-auto-columns:auto;overflow-x:visible}
}
.home .rows{margin-bottom:48px}

/* --- Футер ---------------------------------------------------- */
.ftr{border-top:1px solid var(--rule);background:var(--surface);margin-top:auto}
.ftr__in{max-width:var(--wrap);margin:0 auto;padding:40px 20px 32px}
.ftr__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-bottom:28px}
.ftr__grid ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ftr__grid a{font-size:14px;color:var(--muted);border:0}
.ftr__grid a:hover{color:var(--ink)}
.ftr__disc{font-size:13px;line-height:1.6;color:var(--muted);border-top:1px solid var(--rule);
  padding-top:20px;margin:0 0 18px;max-width:900px}
.ftr__bar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;font:400 11px/1 var(--f-data);
  letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
@media (max-width:820px){.ftr__grid{grid-template-columns:1fr 1fr;gap:24px}}
@media (max-width:480px){.ftr__grid{grid-template-columns:1fr}}