/* ============================================================
   Справочные страницы: /speed, /routers
   Свои стили, а не лендинговые: лендинг тяжёлый, а эти страницы
   должны открываться мгновенно — от скорости первой отрисовки
   напрямую зависит, процитируют нас нейросети или пройдут мимо.
   Токены берём из styles.css, чтобы вид был один и тот же.
   ============================================================ */

.sp-body{
  margin:0; background:var(--bg,#F7F8FB); color:var(--ink,#0B0B12);
  font:400 16px/1.65 var(--font-body,'Onest',system-ui,sans-serif);
  -webkit-font-smoothing:antialiased;
}

/* ─── Шапка и подвал ─────────────────────────────────────── */
.sp-top{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:12px; max-width:860px; margin:0 auto; padding:18px 20px;
}
.sp-logo{
  font:800 17px/1 var(--font-display,'Unbounded',system-ui,sans-serif);
  color:var(--ink,#0B0B12); text-decoration:none; letter-spacing:-.01em;
}
.sp-logo span{color:var(--indigo-600,#4A38DC)}
.sp-nav{display:flex; gap:18px; flex-wrap:wrap}
.sp-nav a{color:var(--muted,#6B7086); text-decoration:none; font-size:15px}
.sp-nav a:hover{color:var(--indigo-600,#4A38DC)}

.sp-foot{
  max-width:860px; margin:40px auto 0; padding:22px 20px 40px;
  border-top:1px solid var(--border,#E8EAF2);
  color:var(--muted,#6B7086); font-size:14px;
}
.sp-foot a{color:var(--muted,#6B7086)}

/* ─── Текст ──────────────────────────────────────────────── */
.sp-main{max-width:860px; margin:0 auto; padding:0 20px}

.sp-crumbs{font-size:13.5px; color:var(--muted-2,#9AA0B4); margin:6px 0 18px}
.sp-crumbs a{color:var(--muted,#6B7086); text-decoration:none}
.sp-crumbs__sep{margin:0 7px; opacity:.5}

.sp-h1{
  font:700 clamp(27px,5vw,38px)/1.18 var(--font-display,'Unbounded',system-ui,sans-serif);
  letter-spacing:-.02em; margin:0 0 18px;
}

/* Прямой ответ. Его чаще всего и цитируют — поэтому он выделен
   и стоит до всего остального, а не после вступления. */
.sp-answer{
  background:var(--indigo-50,#F1F0FE);
  border-left:3px solid var(--indigo-500,#5B4BE8);
  border-radius:0 14px 14px 0; padding:16px 18px; margin:0 0 34px;
  font-size:17px; line-height:1.6;
}

.sp-main section{margin:0 0 38px}
.sp-main h2{
  font:700 clamp(21px,3.4vw,26px)/1.3 var(--font-display,'Unbounded',system-ui,sans-serif);
  letter-spacing:-.015em; margin:0 0 14px;
}
.sp-main h3{font:600 17px/1.4 var(--font-body,'Onest',system-ui,sans-serif); margin:0 0 6px}
.sp-main p{margin:0 0 14px}
.sp-main a{color:var(--indigo-600,#4A38DC)}

.sp-steps{margin:0 0 14px; padding-left:22px}
.sp-steps li{margin-bottom:8px}

.sp-note{
  color:var(--muted,#6B7086); font-size:14.5px;
  background:var(--surface,#fff); border:1px solid var(--border,#E8EAF2);
  border-radius:12px; padding:12px 14px;
}

/* ─── Таблицы ────────────────────────────────────────────────
   Таблица — самый цитируемый формат: языковые модели вынимают
   из неё готовые пары «значение — значение», не разбирая прозу.
   Поэтому разметка честная: thead, th scope, никаких объединений. */
.sp-tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 14px}
.sp-table{
  width:100%; border-collapse:collapse; font-size:15px;
  background:var(--surface,#fff); border:1px solid var(--border,#E8EAF2);
  border-radius:14px; overflow:hidden;
}
.sp-table--wide{min-width:680px}
.sp-table th,.sp-table td{
  padding:11px 13px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--border-2,#F0F1F7);
}
.sp-table thead th{
  background:var(--indigo-50,#F1F0FE); font-weight:600; font-size:14px;
  color:var(--ink-2,#2B2E3D); white-space:nowrap;
}
.sp-table tbody th{font-weight:600}
.sp-table tr:last-child th,.sp-table tr:last-child td{border-bottom:0}
.sp-cell-wide{min-width:260px}

.sp-badge{
  display:inline-block; font-size:11.5px; font-weight:600; white-space:nowrap;
  background:var(--mint,#E7F6EE); color:var(--mint-fg,#1E7A54);
  border-radius:6px; padding:2px 7px; margin-left:4px; vertical-align:middle;
}

/* ─── Замер скорости ─────────────────────────────────────── */
.sp-gauge{
  background:var(--surface,#fff); border:1px solid var(--border,#E8EAF2);
  border-radius:18px; padding:22px; text-align:center; margin:0 0 14px;
}
.sp-btn{
  font:600 16px var(--font-body,'Onest',system-ui,sans-serif);
  background:var(--indigo-600,#4A38DC); color:#fff; border:0;
  border-radius:14px; padding:14px 28px; cursor:pointer; min-height:48px;
}
.sp-btn:hover{background:var(--indigo-700,#3A2BB8)}
.sp-btn[disabled]{opacity:.55; cursor:default}
.sp-gauge__hint{color:var(--muted,#6B7086); font-size:14px; margin:10px 0 0}

.sp-res{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px}
.sp-res__cell{
  flex:1 1 130px; min-width:120px; background:var(--indigo-50,#F1F0FE);
  border-radius:14px; padding:14px 10px;
}
.sp-res__cell b{
  display:block;
  font:700 27px/1.1 var(--font-display,'Unbounded',system-ui,sans-serif);
  font-variant-numeric:tabular-nums;
}
.sp-res__cell span{display:block; font-size:13px; color:var(--muted,#6B7086); margin-top:4px}
.sp-verdict{margin:16px 0 0; font-size:15.5px}

@media (max-width:560px){
  .sp-main{padding:0 16px}
  .sp-answer{padding:14px 15px; font-size:16px}
}

/* ─── Адрес на странице /ip ──────────────────────────────────────────────
   Крупно и моноширинно: это то, ради чего страницу открыли, и его
   переписывают руками — цифры должны стоять ровно. */
.sp-ipbig{
  font:700 clamp(24px,6vw,40px)/1.2 var(--font-mono,ui-monospace,'SF Mono',monospace);
  letter-spacing:-.01em; word-break:break-all; margin:4px 0 16px;
}
.sp-mono{font-family:var(--font-mono,ui-monospace,monospace); font-size:.94em}
.sp-dim{color:var(--muted,#6B7086)}

/* ─── Словарь ────────────────────────────────────────────────────────────
   Определение отдельным блоком с явным «— это». Такой кусок вынимается
   из страницы целиком и не теряет смысла — потому его и цитируют. */
.sp-dl{margin:0}
.sp-dl dt{
  font:600 16px/1.4 var(--font-body,'Onest',system-ui,sans-serif);
  margin:0; padding:0; height:0; overflow:hidden; /* якорь для ссылки */
}
.sp-dl dd{
  margin:0 0 12px; padding:12px 14px;
  background:var(--surface,#fff); border:1px solid var(--border,#E8EAF2);
  border-radius:12px; font-size:15.5px; line-height:1.55;
}
.sp-dl dd b{color:var(--ink,#0B0B12)}

/* ─── Разбор по симптомам ────────────────────────────────────────────────
   Человек приходит сюда в раздражении и с телефона. Список симптомов
   крупными нажимаемыми плитками — чтобы он нашёл свой случай за секунду,
   а не читал страницу подряд. */
.sp-cases{display:flex; flex-direction:column; gap:8px; margin:16px 0 0}
.sp-cases a{
  display:block; padding:14px 16px; min-height:48px; box-sizing:border-box;
  background:var(--surface,#fff); border:1px solid var(--border,#E8EAF2);
  border-radius:12px; text-decoration:none; color:var(--ink,#0B0B12);
  font-weight:600; font-size:15.5px;
}
.sp-cases a:hover{border-color:var(--indigo-400,#7C6CF5); color:var(--indigo-600,#4A38DC)}

/* ─── Зона нажатия у ссылок ──────────────────────────────────────────────
   Ссылка в строке высотой 18 пикселей выглядит нормально, но пальцем по
   ней промахиваются: палец накрывает около сорока. Растягиваем зону
   невидимым слоем, не трогая вид — иначе строки разъедутся втрое.

   Выбираем именно ссылки шапки, крошек и подвала: внутри текста статьи
   так делать нельзя, там зоны налезут друг на друга. */
.sp-nav a,
.sp-foot a,
.sp-crumbs a,
.sp-logo{position:relative}
.sp-nav a::after,
.sp-foot a::after,
.sp-crumbs a::after,
.sp-logo::after{
  content:''; position:absolute; left:-6px; right:-6px;
  top:50%; transform:translateY(-50%); height:44px;
}

/* На широком экране мышью промахнуться сложнее, а налезающие друг на друга
   зоны мешают выделять текст — там растяжка не нужна. */
@media (pointer:fine) and (min-width:700px){
  .sp-nav a::after,.sp-foot a::after,.sp-crumbs a::after,.sp-logo::after{display:none}
}

/* ─── Считалка тарифа ────────────────────────────────────────────────────
   Строка целиком — это метка: нажимать можно куда угодно, а не точно в
   квадратик 16 пикселей. На телефоне по квадратику промахиваются. */
.sp-calc{
  background:var(--surface,#fff); border:1px solid var(--border,#E8EAF2);
  border-radius:18px; overflow:hidden; margin:0 0 14px;
}
.sp-calc__row{
  display:flex; align-items:center; gap:12px; padding:13px 15px; min-height:56px;
  border-bottom:1px solid var(--border-2,#F0F1F7); cursor:pointer;
}
.sp-calc__row:last-of-type{border-bottom:0}
.sp-calc__row input{width:22px; height:22px; flex:0 0 auto; accent-color:var(--indigo-600,#4A38DC)}
.sp-calc__t{flex:1; min-width:0; font-weight:600; font-size:15.5px}
.sp-calc__t small{display:block; font-weight:400; font-size:13px; color:var(--muted,#6B7086)}
.sp-calc__n{font-size:14px; color:var(--muted,#6B7086); white-space:nowrap}
.sp-calc__out{
  background:var(--indigo-50,#F1F0FE); padding:16px 15px; text-align:center;
}
.sp-calc__out b{
  display:block;
  font:700 30px/1.15 var(--font-display,'Unbounded',system-ui,sans-serif);
  font-variant-numeric:tabular-nums;
}
.sp-calc__out span{display:block; font-size:14.5px; color:var(--ink-2,#2B2E3D); margin-top:8px}