/* ═══════════════════════════════════════════════════════════════════════
   Дизайн-система «мягкий пластик». Значения — из styleguide.html.

   В системе ДВЕ зоны, и это единственное расширение гайда:

   ВИТРИНА — герой, плитки, карточки, кнопки, шаги, марки сервисов.
     Здесь пластик как в гайде: тёплые тонированные тени, градиент с глянцем,
     крупные радиусы, пружина с перелётом. Задача — чтобы объект хотелось
     тронуть.

   ЗОНА ДАННЫХ — таблица сравнения цен и органы управления над ней.
     Здесь плоско: волосяные линейки, без теней, без подъёма при наведении.
     Причина не в экономии, а в задаче: человек сравнивает шесть чисел
     глазами за пару секунд, и тень вокруг строки заставляет его смотреть
     на контейнер вместо цифры. Правило гайда «нельзя обводки 1px»
     в этой зоне заменяется на «только обводки 1px».

   Общее для обеих зон: палитра, шрифт, радиусы, кривая движения.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* нейтральные и акцент — дословно из гайда */
  --shell:#fffdf7; --surface:#ffffff; --surface-2:#fff8e8;
  --ink:#2a2118; --muted:#7a6b58; --faint:#a89a86;
  --line:#f0e6d2; --line-2:#e2d5ba;
  --accent:#ffc22e; --accent-hi:#ffe27a; --accent-deep:#f2a007;
  --accent-soft:#fff4d6; --accent-shadow:rgba(200,130,0,.28);
  --good:#1e9e63; --warn:#c07a12;

  /* три добавления к гайду, каждое по необходимости:
     accent-text — accent-deep на кремовом даёт контраст ~2:1 и нечитаем
       в мелком тексте; это тот же тон, доведённый до читаемого;
     bad — гайд задаёт красный только в примере «нельзя», а нам нужен
       статус «нет в наличии»;
     shadow-warm — тень из гайда, вынесенная в переменную, чтобы она была
       одна и та же везде. */
  --accent-text:#8a5a00;
  --bad:#c8402f;
  --shadow-warm:0 2px 5px rgba(0,0,0,.04),0 12px 26px -14px rgba(120,80,10,.28);
  --shadow-lift:0 4px 8px rgba(0,0,0,.05),0 20px 36px -16px var(--accent-shadow);

  --round: ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --spring: cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box;}
/* display в правилах ниже сильнее атрибута hidden — без этого спрятанная
   панель фильтров открыта с самого начала. */
[hidden]{display:none!important;}
body{margin:0;background:var(--shell);color:var(--ink);font-family:var(--round);
  line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
.wrap{max-width:880px;margin:0 auto;padding:clamp(18px,3vw,28px) clamp(16px,3vw,24px) 100px;}
a{color:inherit;}
/* Гайд требует узкую колонку. Монитор — исключение и единственное:
   это инструмент сравнения, ему нужны все колонки таблицы сразу. */
.wrap.wide{max-width:1180px;}

/* ── шапка ── */
.top{display:flex;align-items:center;gap:28px;margin-bottom:26px;flex-wrap:wrap;}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:17px;letter-spacing:-.03em;}
/* Пластиковый шарик из гайда: неровный радиус и дыхание. */
.logo .dot{width:20px;height:20px;flex-shrink:0;
  border-radius:52% 48% 45% 55%/50% 45% 55% 50%;
  background:
    radial-gradient(circle at 33% 25%,rgba(255,255,255,.9),rgba(255,255,255,0) 46%),
    radial-gradient(circle at 50% 62%,var(--accent-hi),var(--accent) 42%,var(--accent-deep) 100%);
  box-shadow:inset 0 -3px 5px rgba(190,120,0,.32),inset 0 2px 4px rgba(255,255,255,.55),0 4px 9px var(--accent-shadow);
  animation:breathe 6.5s ease-in-out infinite;}
@keyframes breathe{
  0%,100%{border-radius:52% 48% 45% 55%/50% 45% 55% 50%;}
  33%{border-radius:46% 54% 53% 47%/55% 51% 49% 45%;}
  66%{border-radius:55% 45% 48% 52%/45% 55% 45% 55%;}
}
.nav{display:flex;gap:20px;font-size:14px;font-weight:600;color:var(--faint);}
.nav a{text-decoration:none;transition:color .2s;} .nav a:hover{color:var(--accent-deep);}
.nav a.on{color:var(--ink);}
.crumbs{display:flex;gap:7px;flex-wrap:wrap;align-items:center;font-size:13.5px;font-weight:600;color:var(--faint);margin-bottom:14px;}
.crumbs a{color:var(--muted);text-decoration:none;transition:color .2s;} .crumbs a:hover{color:var(--accent-deep);}

/* ── типографика: значения из гайда ── */
h1{font-size:clamp(28px,4.4vw,40px);letter-spacing:-.035em;margin:0 0 12px;font-weight:800;line-height:1.1;text-wrap:balance;}
.answer{font-size:17px;font-weight:500;color:var(--muted);margin:0 0 26px;max-width:60ch;}
.answer b{color:var(--ink);font-weight:750;}
.lb{display:block;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:12px;}

/* ══ ВИТРИНА ══════════════════════════════════════════════════════════ */

/* ── главный ответ: карточка-панель ── */
/* Один блок вместо трёх равных карточек: три варианта — это новый выбор,
   а человек пришёл за ответом. Альтернативы ниже и заведомо подчинённые. */
.hero{background:var(--surface);border-radius:26px;padding:24px 26px 26px;margin:0 0 26px;
  position:relative;overflow:hidden;box-shadow:var(--shadow-warm);}
/* Глянец сверху — обязательный материал гайда. */
.hero::after{content:"";position:absolute;inset:0 0 auto 0;height:40%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));}
.hero>*{position:relative;}
.pickone{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.pickone .pi{flex:1;min-width:120px;}
.pickone .nm{display:block;font-size:22px;font-weight:750;letter-spacing:-.025em;line-height:1.2;}
.pickone .lbl{display:block;font-size:12.5px;font-weight:600;color:var(--faint);}
.pickone .pr{text-align:right;}
.pickone .sum{display:block;font-size:32px;font-weight:800;letter-spacing:-.045em;line-height:1;color:var(--good);}
.pickone .per{display:block;font-size:12.5px;font-weight:600;color:var(--faint);margin-top:3px;}
/* Дата в правой колонке героя — не цена, поэтому не зелёная и не такая крупная. */
.pickone .when{display:block;font-size:20px;font-weight:750;letter-spacing:-.03em;color:var(--muted);}
.scale{font-size:15px;font-weight:500;color:var(--muted);margin:16px 0 0;}
.hero ul.why{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:6px;}
.hero ul.why li{font-size:15px;font-weight:500;color:var(--muted);padding-left:24px;position:relative;}
.hero ul.why li::before{content:"✓";position:absolute;left:2px;color:var(--good);font-weight:800;}
.cavline{font-size:14px;font-weight:650;color:var(--warn);margin:14px 0 0;}
.btn.big{margin-top:20px;}

/* ── подчинённые варианты: строки, выезжающие вправо ── */
.alts{margin:0 0 26px;}
.alt{display:flex;align-items:center;gap:14px;text-decoration:none;
  background:var(--surface);border-radius:18px;padding:13px 18px 13px 14px;margin-bottom:10px;
  box-shadow:0 2px 4px rgba(0,0,0,.03),0 10px 22px -14px rgba(120,80,10,.3);
  transition:transform .28s var(--spring),box-shadow .28s;}
.alt:hover{transform:translateX(6px) scale(1.01);
  box-shadow:0 4px 8px rgba(0,0,0,.05),0 16px 30px -14px var(--accent-shadow);}
.alt .an{font-size:16px;font-weight:700;letter-spacing:-.015em;}
.alt .aw{flex:1;font-size:13px;font-weight:500;color:var(--faint);}
.alt .as{font-size:16px;font-weight:750;color:var(--muted);}

/* ── что дальше: нумерованные шарики из гайда ── */
.steps{margin:0 0 30px;}
.steps ol{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:14px;}
.steps li{counter-increment:s;display:flex;gap:14px;align-items:center;
  font-size:15px;font-weight:500;color:var(--muted);}
.steps li::before{content:counter(s);flex-shrink:0;width:32px;height:32px;
  border-radius:52% 48% 45% 55%/50% 45% 55% 50%;
  background:radial-gradient(circle at 34% 27%,var(--accent-hi),var(--accent) 48%,var(--accent-deep));
  color:#3d2600;font-size:14px;font-weight:800;display:grid;place-items:center;
  box-shadow:inset 0 -3px 5px rgba(185,115,0,.35),0 4px 9px var(--accent-shadow);
  animation:breathe 6s ease-in-out infinite;}
.steps li:nth-child(2)::before{animation-delay:-2s;animation-duration:7s;}
.steps li:nth-child(3)::before{animation-delay:-3.5s;animation-duration:6.6s;}
.mini{font-size:13.5px;font-weight:500;color:var(--faint);margin:14px 0 0;}

/* ── лучшие варианты: карточки ── */
.picks{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 30px;}
.pick{flex:1 1 212px;max-width:300px;background:var(--surface);padding:20px 20px 18px;
  border-radius:22px;display:flex;flex-direction:column;gap:2px;position:relative;overflow:hidden;
  box-shadow:var(--shadow-warm);transition:transform .3s var(--spring),box-shadow .3s;}
.pick::after{content:"";position:absolute;inset:0 0 auto 0;height:44%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));}
.pick>*{position:relative;}
.pick:hover{transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow-lift);}
.pick .why{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);}
.pick.first .why{color:var(--good);}
.pick .who{display:flex;align-items:center;gap:9px;margin-top:8px;}
.pick .nm{font-size:16px;font-weight:750;letter-spacing:-.02em;}
.pick .sum{font-size:22px;font-weight:800;letter-spacing:-.04em;margin-top:6px;}
.pick.first .sum{color:var(--good);}
.pick .per{font-size:12.5px;font-weight:600;color:var(--faint);}
.pick .cav{font-size:12.5px;font-weight:600;color:var(--warn);margin-top:6px;}
.pick .btn{margin-top:14px;align-self:flex-start;}

/* ── плитка марки: фирменный цвет подмешан в кремовый ── */
/* Материал гайда. Радиус пропорционален размеру: у гайда плитка 54px даёт 17,
   значит 24px даёт 7-8. Это не «мелкое скругление», а тот же радиус в масштабе. */
.mk{position:relative;flex-shrink:0;width:26px;height:26px;border-radius:8px;overflow:hidden;
  display:grid;place-items:center;font-size:10px;font-weight:800;letter-spacing:-.04em;
  color:color-mix(in srgb,var(--bc) 68%,#5c4420);
  background:linear-gradient(158deg,
    color-mix(in srgb,var(--bc) 6%,#ffffff) 0%,
    color-mix(in srgb,var(--bc) 14%,#fffaf0) 58%,
    color-mix(in srgb,var(--bc) 21%,#fff3da) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px color-mix(in srgb,var(--bc) 15%,transparent),
    0 4px 9px -5px color-mix(in srgb,var(--bc) 40%,rgba(120,80,10,.4));}
.mk::after{content:"";position:absolute;inset:0 0 auto 0;height:48%;
  background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,0));}
/* Крупная плитка — ровно размер и радиус из гайда: 54px / 17px. */
.mk.lg{width:54px;height:54px;border-radius:17px;font-size:19px;}

/* ── кнопки: капсула с градиентом и глянцем ── */
.btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:750;font-size:15px;
  letter-spacing:-.01em;text-decoration:none;color:#3d2600;border:none;border-radius:99px;
  padding:12px 22px;white-space:nowrap;cursor:pointer;
  background:linear-gradient(180deg,var(--accent-hi),var(--accent) 40%,var(--accent-deep));
  box-shadow:inset 0 2px 3px rgba(255,255,255,.7),inset 0 -4px 8px rgba(180,110,0,.35),0 8px 20px var(--accent-shadow);
  transition:transform .25s var(--spring),box-shadow .25s;}
.btn:hover{transform:translateY(-3px) scale(1.03);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.7),inset 0 -4px 8px rgba(180,110,0,.35),0 14px 28px var(--accent-shadow);}
.btn:active{transform:translateY(1px) scale(.98);}
.btn.big{font-size:16.5px;padding:16px 30px;}
/* Вторичная кнопка гайда: капсула на поверхности, уезжает вправо. */
.btn.g{font-size:14px;font-weight:700;color:var(--muted);background:var(--surface);padding:9px 17px;
  box-shadow:0 4px 12px -6px rgba(120,80,10,.4);}
.btn.g:hover{transform:translateX(3px) scale(1.04);color:var(--accent-deep);
  box-shadow:0 6px 16px -6px rgba(120,80,10,.45);}

/* ── польза ── */
.one{font-size:15px;font-weight:500;color:var(--muted);margin:30px 0 0;max-width:60ch;}
.watch{font-size:14.5px;font-weight:500;color:var(--muted);margin:14px 0 0;max-width:60ch;
  background:var(--accent-soft);border-radius:18px;padding:14px 18px;}
.watch b{color:var(--ink);font-weight:750;}
.also{margin-top:30px;font-size:13.5px;font-weight:600;color:var(--faint);display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.also a{text-decoration:none;color:var(--muted);background:var(--surface);border-radius:99px;padding:9px 17px;
  box-shadow:0 4px 12px -6px rgba(120,80,10,.4);transition:transform .25s var(--spring),color .2s;}
.also a:hover{transform:translateX(3px) scale(1.04);color:var(--accent-deep);}

/* ── плитки: карточки с подъёмом ── */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:14px;margin-top:30px;}
.tile{display:block;text-decoration:none;background:var(--surface);border-radius:22px;padding:18px 18px 16px;
  position:relative;overflow:hidden;box-shadow:var(--shadow-warm);
  transition:transform .3s var(--spring),box-shadow .3s;}
.tile::after{content:"";position:absolute;inset:0 0 auto 0;height:44%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));}
.tile>*{position:relative;}
.tile:hover{transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow-lift);}
.tile .t{display:block;font-size:16px;font-weight:750;letter-spacing:-.02em;line-height:1.25;}
.tile .d{display:block;font-size:13.5px;font-weight:500;color:var(--faint);margin-top:3px;}
.tile .p{display:block;font-size:15px;font-weight:800;color:var(--accent-text);margin-top:12px;letter-spacing:-.03em;}
.tile .p em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--faint);}

/* ── обзор сервиса ── */
/* Витрина: обзор — редакционный текст, его читают, а не сканируют.
   Плюсы и минусы стоят рядом одинакового веса: перекос в оформлении
   читается как перекос в оценке. */
.review{margin:34px 0 0}
.verdict{font-size:16.5px;font-weight:500;color:var(--muted);margin:0 0 18px;max-width:62ch}
.prof{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 18px}
@media(max-width:620px){.prof{grid-template-columns:1fr}}
.pc{background:var(--surface);border-radius:18px;padding:16px 18px;
  box-shadow:0 2px 5px rgba(0,0,0,.04),0 12px 26px -16px rgba(120,80,10,.28)}
.pc .ph{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:9px}
.pc.good .ph{color:var(--good)} .pc.bad .ph{color:var(--bad)}
.pc ul{margin:0;padding-left:20px;display:grid;gap:6px}
.pc li{font-size:14.5px;font-weight:500;color:var(--muted)}
.pc.good li::marker{color:var(--good)} .pc.bad li::marker{color:var(--bad)}
.rbody{font-size:15px;font-weight:500;color:var(--muted);margin:0 0 14px;max-width:62ch}

/* ── акции и промокоды ── */
/* Витрина: это предложение, а не данные. Но подпись под блоком —
   обязательная часть, а не мелкий шрифт: цифры в таблице выше посчитаны
   БЕЗ скидки, и не сказать об этом значит соврать в расчёте. */
.promos{margin:32px 0 0;}
.promo{background:var(--surface);border-radius:20px;padding:16px 18px;margin:0 0 10px;
  position:relative;overflow:hidden;box-shadow:var(--shadow-warm);}
.promo::after{content:"";position:absolute;inset:0 0 auto 0;height:46%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));}
.promo>*{position:relative;}
.promo .pt{display:block;font-size:16px;font-weight:750;letter-spacing:-.02em;}
.promo .pd{display:block;font-size:14px;font-weight:500;color:var(--muted);margin-top:5px;max-width:62ch;}
.promo .pm{display:block;font-size:12.5px;font-weight:600;color:var(--faint);margin-top:8px;}
.pcode{display:inline-block;font-family:ui-monospace,Menlo,monospace;font-size:14px;font-weight:700;
  letter-spacing:.06em;padding:5px 12px;border-radius:10px;margin-top:9px;
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));color:#3d2600;}

/* ── признаки сервиса ── */
/* Зона данных: это справка, её сканируют глазами по строкам. Никаких
   карточек и теней — волосяные линии и ровная сетка.
   Незаполненного признака здесь нет вовсе. Прочерк обещал бы, что мы
   выясняли и получили «нет». */
/* Блок «Проверили сами» — единственное место на сайте, где цифры наши, а не
   пересказ чужой витрины. Оформлен той же сеткой, что и признаки: это зона
   данных, и выделять её витринными приёмами нельзя — измеренное не должно
   выглядеть рекламнее заявленного.

   Отличается ровно одной деталью — вертикальной чертой слева. Она не украшение,
   а метка происхождения: по ней видно, где кончается то, что сервис сообщил
   о себе, и начинается то, что мы проверили. */
.measured{margin:32px 0 0;border-left:2px solid var(--ink);padding-left:16px;}
.mlead{font-size:14px;font-weight:550;color:var(--muted);margin:0 0 18px;max-width:62ch;}
.mrun{font-size:12.5px;font-weight:650;color:var(--faint);margin:8px 0 0;}
@media(max-width:620px){.measured{padding-left:12px;}}

.facts{margin:32px 0 0;}
.fg{margin:0 0 18px;}
.fg .fgh{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);padding-bottom:7px;border-bottom:1px solid var(--line-2);}
.fg dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);margin:0;}
.fg dt,.fg dd{padding:9px 0;border-bottom:1px solid var(--line);margin:0;font-size:14px;}
.fg dt{font-weight:600;color:var(--faint);padding-right:14px;}
.fg dd{font-weight:600;color:var(--ink);}
@media(max-width:620px){.fg dl{grid-template-columns:1fr;}
  .fg dt{padding-bottom:0;border-bottom:none;}}

/* ── раскрытая строка монитора ──
   Свёрнутая строка отвечает «сколько стоит», раскрытая — «что за контора».
   Оформление плоское, как в зоне данных: это сведения, а не предложение. */
.cmp td.nw{white-space:nowrap;}
.exp{background:none;border:1px solid var(--line-2);border-radius:99px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:650;color:var(--muted);padding:8px 14px;margin-right:8px;
  transition:background .15s,color .15s,border-color .15s;}
.exp:hover{color:var(--ink);border-color:var(--faint);}
.exp.on{background:var(--surface);color:var(--ink);border-color:transparent;}
.cmp tr.det>td{padding:0;border-bottom:1px solid var(--line);}
/* Панель лежит в ячейке широкой таблицы и наследовала бы её ширину: на узком
   экране это значило бы читать её боковой прокруткой. sticky прижимает её к
   левому краю прокрутки, а max-width держит в пределах видимого. */
/* ── переключатель вида ── */
.vsw{display:flex;gap:2px;background:var(--surface);border-radius:99px;padding:3px;}
.vsw button{background:none;border:none;border-radius:99px;padding:6px 14px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:700;color:var(--faint);}
.vsw button.on{background:var(--bg);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.07);}

/* ── плитки ──
   Второй вид на те же данные. Таблица отвечает «кто дешевле», плитка — «что
   это за предложение целиком». Поэтому здесь можно то, чего нельзя в таблице:
   разный размер шрифта, полосы, искры. Но правило то же — каждый рисунок
   показывает данные, а не украшает пустоту. */
/* Одна колонка. В три плитка была уже строки таблицы, и всё в ней вставало
   мелким столбиком — получалась та же таблица, только рыхлее. Во всю ширину
   появляется место развернуть зоны вбок: деньги, замер, сервис. */
.pgrid{display:grid;grid-template-columns:1fr;gap:14px;margin:14px 0 0;}
.pcard{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:16px 20px 12px;
  display:flex;flex-direction:column;gap:14px;min-width:0;}
.pcard.win{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);}
.pcard.dim{opacity:.62;}

.ph{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.ph .pv{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0;}
.ph .nn{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.ph .nn small{font-size:12px;font-weight:600;color:var(--faint);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ph .chk{align-items:flex-end;flex:none;margin-left:auto;}
.pgeos{display:flex;gap:3px;}
.pgeo{font-size:13px;line-height:1;}

/* Три зоны внутри плитки. Деньги шире прочих: это главное, за чем пришли. */
.pbody{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:18px;align-items:start;}
.pz{min-width:0;display:flex;flex-direction:column;gap:9px;}
.pz.meas,.pz.svc{background:var(--surface);border-radius:14px;padding:12px 14px;}

.pmoney{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;}
.ptot{display:flex;flex-direction:column;line-height:1;}
.ptot b{font-size:32px;font-weight:850;letter-spacing:-.02em;}
.ptot small,.punit small{font-size:11.5px;font-weight:650;color:var(--faint);margin-top:4px;}
.punit{display:flex;flex-direction:column;line-height:1;font-size:15px;font-weight:750;color:var(--muted);}
.pspk{display:flex;flex-direction:column;gap:2px;}
.pspk small{font-size:10.5px;font-weight:650;color:var(--faint);}
.spk{width:100%;max-width:220px;height:34px;display:block;}
.spk .sg{stroke:var(--ink);stroke-width:1.8;fill:none;}
.spk .sg.fix{stroke:var(--faint);stroke-dasharray:3 3;}
.spk .sp{fill:var(--ink);}

.pover{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:650;color:var(--muted);}
.pover.best{color:#2f9e63;}
.obar{flex:none;width:72px;height:5px;border-radius:99px;background:var(--line-2);overflow:hidden;}
.obar i{display:block;height:100%;border-radius:99px;background:var(--muted);}
.pover.best .obar i{background:#2f9e63;}

/* Лестница цен. Ступень, на которой стоит человек, выделена — иначе непонятно,
   откуда взялся итог наверху. */
.plad{display:flex;flex-direction:column;gap:5px;}
.pladk{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);}
.pladr{display:flex;flex-wrap:wrap;gap:5px;}
.pl{display:flex;flex-direction:column;line-height:1.15;background:var(--surface);
  border:1px solid transparent;border-radius:9px;padding:5px 9px;}
.pl b{font-size:13px;font-weight:800;}
.pl small{font-size:10px;font-weight:650;color:var(--faint);}
.pl.on{border-color:var(--ink);background:var(--bg);}
.pl.more{justify-content:center;font-size:11px;font-weight:650;color:var(--faint);}

.pmk{display:block;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);}
.pmv{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;}
.pmv span{display:flex;flex-direction:column;line-height:1.2;font-size:10.5px;font-weight:650;color:var(--faint);}
.pmv b{font-size:17px;font-weight:800;color:var(--ink);}

/* Пустое состояние — текстом, а не прочерком. Прочерк читается как «нет»,
   а у нас «не проверяли», и это разные утверждения. */
.pnone{font-size:11.5px;font-weight:550;color:var(--faint);line-height:1.45;margin:0;}
.plink{align-self:flex-start;background:none;border:none;padding:0;cursor:pointer;font:inherit;
  font-size:12px;font-weight:700;color:var(--accent-text);border-bottom:1px solid var(--accent-soft);}
.plink:hover{border-bottom-color:var(--accent);}
.pexcl{font-size:11.5px;font-weight:650;color:var(--muted);margin:0;}
.pcav{font-size:11.5px;font-weight:550;color:var(--muted);line-height:1.45;margin:0;}

.pcond{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.pc{font-size:12px;font-weight:650;color:var(--muted);background:var(--surface);
  border-radius:99px;padding:4px 10px;}

.pchips{display:flex;flex-wrap:wrap;gap:5px;}
/* Значение признака бывает длинным — «Страна, Регион или штат, Город, Оператор».
   Без обрезки такая фишка распирает плитку и ломает всю сетку. Обрезаем по
   ширине карточки, полный текст остаётся в подсказке. */
.pchip{font-size:11.5px;font-weight:600;color:var(--muted);border:1px solid var(--line-2);
  border-radius:99px;padding:3px 9px;white-space:nowrap;
  max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;}

.pf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:11px;border-top:1px solid var(--line);}
.pf .dt{font-size:11.5px;font-weight:650;color:var(--faint);}
@media(max-width:900px){.pbody{grid-template-columns:1fr 1fr;}
  .pz.money{grid-column:1/-1;}}
@media(max-width:560px){.pbody{grid-template-columns:1fr;}
  .ph .chk{margin-left:0;}
  .pf .sp{display:none;}}

/* ── колонка «Проверка» ──
   Три ступени: цена, признаки, замер. В таблице это зона данных, поэтому
   ступени — прямоугольники в один пиксель высотой, а не иконки и не звёзды.
   Незакрашенная ступень видна: «не дошли» и «нечего показывать» — разное. */
.chk{display:flex;flex-direction:column;gap:5px;align-items:flex-start;background:none;
  border:none;padding:2px 0;cursor:pointer;font:inherit;text-align:left;}
.cscale{display:flex;gap:3px;}
.cscale i{width:17px;height:4px;border-radius:2px;background:var(--line-2);}
.cscale i.on{background:var(--ink);}
.clab{font-size:12px;font-weight:650;color:var(--faint);white-space:nowrap;
  border-bottom:1px dashed var(--line-2);}
.chk:hover .clab{color:var(--ink);border-bottom-color:var(--faint);}

/* ── окно замера ──
   Единственное место с графикой: это не таблица и не витрина, а разбор одного
   измерения. Рисунок обязан показывать данные, а не украшать их, поэтому
   столбики плоские, подписи с цифрами, никаких градиентов и объёма. */
.mdlg{border:none;border-radius:22px;padding:0;max-width:min(680px,94vw);width:100%;
  max-height:88vh;overflow-y:auto;overscroll-behavior:contain;
  background:var(--bg);color:var(--ink);box-shadow:0 24px 70px rgba(0,0,0,.22);}
.mdlg::backdrop{background:rgba(24,18,12,.42);}
.mhead2{display:flex;align-items:center;gap:12px;padding:18px 22px 14px;border-bottom:1px solid var(--line);}
.mtitle{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.mtitle b{font-size:16px;font-weight:800;}
.mtitle small{font-size:12.5px;font-weight:600;color:var(--faint);}
.mx{margin-left:auto;background:none;border:none;font-size:16px;color:var(--faint);
  cursor:pointer;padding:6px 8px;border-radius:8px;}
.mx:hover{color:var(--ink);background:var(--surface);}

.msteps{display:flex;flex-direction:column;gap:0;padding:6px 22px 12px;}
.mstep{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line);}
.mstep:last-child{border-bottom:none;}
.mstep i{flex:none;width:22px;height:22px;border-radius:99px;display:grid;place-items:center;
  font-size:11px;font-weight:800;font-style:normal;background:var(--line-2);color:var(--bg);}
.mstep.on i{background:var(--ink);}
.mstep span{display:flex;flex-direction:column;line-height:1.3;}
.mstep b{font-size:13.5px;font-weight:700;color:var(--faint);}
.mstep.on b{color:var(--ink);}
.mstep small{font-size:12px;font-weight:600;color:var(--faint);}

.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:4px 22px 6px;}
.mcard{background:var(--surface);border-radius:16px;padding:14px 16px;display:flex;
  flex-direction:column;gap:7px;min-width:0;}
.mcard.wide{grid-column:1/-1;}
.mk2{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);}
.mbig{font-size:26px;font-weight:800;line-height:1;}
.mbig small{font-size:13px;font-weight:650;color:var(--faint);}
.mnote{font-size:12px;font-weight:550;color:var(--muted);line-height:1.45;}
.mchips{display:flex;flex-wrap:wrap;gap:6px;}
.mchip{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--line-2);
  border-radius:99px;padding:4px 10px;font-size:12.5px;font-weight:650;}
.mchip i{font-style:normal;font-size:11px;font-weight:800;color:var(--faint);}

.mg{width:100%;height:auto;display:block;}
.mg .bg{fill:var(--line-2);}
.mg .fill{fill:var(--ink);}
.mg .fill.hi{fill:#2f9e63;}
.mg .vl{font-size:11px;font-weight:800;fill:var(--ink);text-anchor:middle;}
.mg .kl{font-size:10px;font-weight:650;fill:var(--faint);text-anchor:middle;}
.mg .ln{fill:none;stroke:var(--ink);stroke-width:2;}
.mg .pt{fill:var(--ink);}

.mfoot2{font-size:12.5px;font-weight:550;color:var(--muted);line-height:1.5;margin:10px 0 0;padding:0 22px 18px;}
.mfoot2.dim{color:var(--faint);border-top:1px solid var(--line);padding-top:12px;margin-top:4px;}
.mfoot2 code{font-size:11.5px;}
.mempty{font-size:14px;font-weight:600;color:var(--muted);line-height:1.55;padding:8px 22px 4px;}
@media(max-width:560px){.mgrid{grid-template-columns:1fr;}
  .mhead2,.msteps,.mgrid,.mfoot2,.mempty{padding-left:16px;padding-right:16px;}}

.dbox{background:var(--surface);border-radius:18px;margin:0 0 10px;padding:16px 18px;
  position:sticky;left:0;max-width:min(100%,calc(100vw - 36px));box-sizing:border-box;}
.drow{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:14px;
  padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;}
.drow:last-of-type{border-bottom:none;}
.dk{font-weight:650;color:var(--faint);}
.dv{font-weight:600;color:var(--ink);}
.dv a{color:var(--accent-text);}
.fl{display:inline-block;margin-right:12px;white-space:nowrap;}
.dfoot{font-size:13px;font-weight:550;color:var(--muted);padding-top:12px;}
.fhint{display:block;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--muted);margin-top:4px;max-width:520px;}
@media(max-width:620px){.drow{grid-template-columns:1fr;gap:2px;}
  .exp{display:block;margin:0 0 8px;width:100%;}}

/* Состав работ под таблицей монитора. Плитки те же, что в индексе сервисов, —
   свой вид им не нужен, нужен только отступ и подписи, отделяющие группы.

   Сервисы, до которых мы не дошли, набраны не плиткой, а строчной меткой.
   Это намеренно: плитка обещает содержимое, а за этими именами пока нет
   ничего, кроме самого имени. Разный вес оформления и есть честный ответ
   на вопрос «что вы про них знаете». */
.roster{margin:38px 0 0;}
.roster .tiles{margin-top:0;}
.rlead{font-size:15px;font-weight:500;color:var(--muted);margin:0 0 20px;max-width:64ch;}
.rlead b{color:var(--ink);font-weight:800;}
.rgrp{margin:0 0 26px;}
.rt{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;
  color:var(--ink);margin:0 0 12px;letter-spacing:-.01em;}
.rt .dot{width:8px;height:8px;border-radius:99px;flex-shrink:0;}
.rt .dot.ok{background:#2f9e63;}
.rt .dot.half{background:#d9a521;}
.rt .dot.no{background:color-mix(in srgb,var(--faint) 55%,transparent);}
.rchips{display:flex;flex-wrap:wrap;gap:8px;}
.rchip{display:inline-block;font-size:13.5px;font-weight:600;color:var(--muted);
  background:color-mix(in srgb,var(--faint) 9%,transparent);
  border-radius:99px;padding:6px 13px;}
.rgrp .cnote{margin-top:10px;}

/* Эксклюзивы: та же зона данных, что и признаки, — плоско, волосяные линии.
   Витринного оформления здесь нет намеренно: это не предложение, которое мы
   продаём, а сведения о товаре, который не с чем сравнить. Название продукта
   набрано в разрядку заголовка группы, цена — приписка рядом, а не цифра
   в колонке: в колонке она встала бы в один ряд с посчитанными и читалась
   бы как сравнимая. */
.excl .fgh{text-transform:none;font-size:14.5px;letter-spacing:0;color:var(--ink);font-weight:750;}
.excl .ep{font-weight:600;color:var(--muted);letter-spacing:0;}
.excl dd a{color:var(--muted);font-weight:600;overflow-wrap:anywhere;}

/* ── график цены ── */
/* Витрина по материалу — карточка с тёплой тенью, — но внутри неё зона
   данных: линии тонкие, сетка волосяная, никакого объёма. График читают
   как цифры, а не разглядывают. */
.hist{margin:34px 0 0;}
.legend{display:flex;gap:18px;flex-wrap:wrap;margin:0 0 14px;font-size:12.5px;font-weight:600;color:var(--faint);}
.lg{display:inline-flex;align-items:center;gap:7px;}
.ls{width:18px;height:0;border-top:2px solid var(--accent-deep);border-radius:2px;}
.ls.fix{border-top-style:dashed;border-top-color:var(--muted);}
.cbox{background:var(--surface);border-radius:22px;padding:18px 20px 16px;margin-bottom:14px;
  box-shadow:var(--shadow-warm);}
.chead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.chead .ct{font-size:16px;font-weight:750;letter-spacing:-.02em;}
.chead .cu{font-size:12.5px;font-weight:600;color:var(--faint);}
.chead .sp{flex:1;}
.chead .cd{font-size:12.5px;font-weight:600;color:var(--faint);}
.chart{display:block;width:100%;height:auto;overflow:visible;}
.chart .gl{stroke:var(--line);stroke-width:1;}
.chart .ay{fill:var(--faint);font-size:11px;font-weight:600;text-anchor:end;}
.chart .ax{fill:var(--faint);font-size:11px;font-weight:600;}
.chart .ax.r{text-anchor:end;}
.chart .seg{stroke:var(--accent-deep);stroke-width:2.5;stroke-linecap:round;fill:none;}
/* Пунктир — не украшение: он отделяет нашу правку от движения цены. */
.chart .seg.fix{stroke:var(--muted);stroke-width:2;stroke-dasharray:5 4;}
.chart .pt{fill:var(--surface);stroke:var(--accent-deep);stroke-width:2.5;}
.chart .pt.fix{stroke:var(--muted);stroke-width:2;}
.cnote{font-size:13.5px;font-weight:550;color:var(--muted);margin:8px 0 0;}
.cnote b{color:var(--ink);font-weight:750;}

/* ── свёрнутая таблица и блок изменений: аккордеон гайда ── */
.fold{background:var(--surface);border-radius:18px;margin:26px 0 0;overflow:hidden;
  box-shadow:0 6px 18px -12px rgba(120,80,10,.3);}
.fold summary{cursor:pointer;list-style:none;padding:16px 20px;font-size:15px;font-weight:700;
  letter-spacing:-.015em;color:var(--muted);display:flex;justify-content:space-between;gap:10px;}
.fold summary::-webkit-details-marker{display:none;}
.fold summary::after{content:"+";color:var(--accent-deep);font-weight:800;font-size:19px;line-height:1;}
.fold[open] summary::after{content:"–";}
.fold summary:hover{color:var(--ink);}
.fold .cmp{padding:0 8px 8px;}

.upd{font-size:13.5px;font-weight:600;color:var(--faint);margin:-14px 0 26px;}
.upd b{color:var(--muted);}
.chg{margin:-14px 0 26px;}
.chg summary{cursor:pointer;list-style:none;font-size:13.5px;font-weight:600;color:var(--faint);
  display:inline-flex;align-items:center;gap:6px;}
.chg summary::-webkit-details-marker{display:none;}
.chg summary b{color:var(--muted);}
.chg .lnk{color:var(--accent-text);border-bottom:1px solid var(--accent-soft);}
.chg summary:hover .lnk{border-bottom-color:var(--accent);}
/* Таблица изменений шире телефона: шесть колонок в 390 px не влезают никак.
   Прокрутка внутри блока, а не разъезжающаяся страница — иначе вбок уезжает
   вся вёрстка, и человек ловит это, даже не открыв блок. */
.chgb{overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin-top:16px;background:var(--surface);border-radius:18px;padding:8px 12px;
  box-shadow:0 6px 18px -12px rgba(120,80,10,.3);}

/* ══ ЗОНА ДАННЫХ ══════════════════════════════════════════════════════ */
/* Ниже — намеренно плоско. См. заголовок файла. */

.cmp{width:100%;border-collapse:collapse;}
.cmp th{text-align:left;padding:0 12px 8px;font-size:12.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);border-bottom:1px solid var(--line-2);white-space:nowrap;}
.cmp td{padding:13px 12px;font-size:14.5px;border-bottom:1px solid var(--line);vertical-align:middle;}
.cmp th.r,.cmp td.r{text-align:right;}
.cmp tbody tr:last-child td{border-bottom:none;}
/* Победитель — акцентная линейка слева, а не подложка и не тень. */
.cmp tr.win td:first-child{box-shadow:inset 3px 0 0 var(--accent);}
.cmp tr.win .tot{color:var(--good);}
.cmp tr.dim td{opacity:.45;}
.cmp small{display:block;font-size:11.5px;font-weight:600;color:var(--faint);}
.pv{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0;}
.pv:hover .nn{color:var(--accent-deep);}
.nn{font-weight:700;letter-spacing:-.015em;line-height:1.25;transition:color .2s;}
.tot{font-size:16px;font-weight:800;letter-spacing:-.025em;}
.badge{display:block;font-size:10.5px;font-weight:800;color:var(--good);letter-spacing:.02em;}
.ov{display:block;font-size:11.5px;font-weight:650;color:var(--faint);}
.nt{font-size:12.5px;font-weight:600;white-space:nowrap;color:var(--muted);}
.nt.good{color:var(--good);} .nt.warn{color:var(--warn);} .nt.bad{color:var(--bad);}
.dt{font-size:12.5px;font-weight:600;color:var(--faint);white-space:nowrap;}
.thin{font-size:14px;font-weight:600;color:var(--warn);margin:16px 0 0;} .thin b{color:var(--ink);}
.cmp.sm td,.cmp.sm th{padding:9px 10px;font-size:13.5px;}
.cmp.sm .up{color:var(--bad);} .cmp.sm .dn{color:var(--good);}
/* Кнопки внутри таблицы. Главная остаётся капсулой — она одна на таблицу
   и это то самое действие, ради которого страница написана. Вторичная
   лишается фона и тени: шесть одинаковых капсул в столбец превращают
   призыв к действию в текстуру. */
.cmp .btn{font-size:13.5px;padding:9px 18px;}
.cmp .btn.g{background:none;box-shadow:none;padding:8px 4px;}
.cmp .btn.g:hover{transform:translateX(3px);box-shadow:none;}
.fold .cmp{padding:0 10px 10px;}
.fold>.thin{margin:0;padding:0 20px 18px;}
/* Ссылка на тип внутри таблицы: подчёркивание волосяное, а не браузерное. */
.tlnk{text-decoration:none;border-bottom:1px solid var(--line-2);transition:color .2s,border-color .2s;}
.tlnk:hover{color:var(--accent-deep);border-bottom-color:var(--accent);}

/* ── вкладки типов ── */
/* Первый и единственный обязательный выбор: у разных типов разные единицы
   оплаты. Переносим в две строки, а не прокручиваем — спрятанная за краем
   вкладка выглядит как обрезанная вёрстка, и половина типов не будет найдена. */
.tabs{display:flex;flex-wrap:wrap;gap:0 2px;margin:0;border-bottom:1px solid var(--line-2);}
.tabs button{font:inherit;font-size:14px;font-weight:700;letter-spacing:-.015em;white-space:nowrap;
  cursor:pointer;border:none;background:none;color:var(--faint);padding:10px 14px;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .2s,border-color .2s;}
.tabs button:hover{color:var(--ink);}
.tabs button.on{color:var(--ink);border-bottom-color:var(--accent);}
.tabs button.off{opacity:.4;}
.tabs .c{font-size:11.5px;font-weight:700;color:var(--faint);margin-left:6px;}
.tabs button.on .c{color:var(--accent-text);}
/* На телефоне переносы съели бы шесть строк, зато смахивание вбок — обычный
   жест, а не находка. Поэтому здесь наоборот: одна строка с прокруткой. */
@media(max-width:620px){
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
  .tabs::-webkit-scrollbar{display:none;}
  .tabs button{padding:10px 11px;}
}

/* ── строка настройки ── */
.bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:14px 0 16px;}
.bar .sp{flex:1;}
.vlab{font-size:12.5px;font-weight:650;color:var(--faint);}
.numin,select{font:inherit;font-size:14px;font-weight:650;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:99px;padding:8px 14px;transition:border-color .2s,box-shadow .2s;}
.numin{width:92px;text-align:center;} select{cursor:pointer;padding-right:10px;}
.numin:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 5px var(--surface-2);}
.qb{display:flex;gap:5px;}
/* Чипсы и переключатели — капсулы, как в гайде; активный получает градиент. */
.qb button,.chips button{font:inherit;font-weight:650;cursor:pointer;background:var(--surface);
  border:1px solid var(--line-2);color:var(--muted);border-radius:99px;
  transition:transform .22s var(--spring),border-color .2s,color .2s;}
.qb button{font-size:12.5px;padding:6px 13px;}
.chips button{font-size:13.5px;padding:8px 15px;}
.qb button:hover,.chips button:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--ink);}
.qb button.on,.chips button.on{border-color:transparent;color:#3d2600;font-weight:750;
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));
  box-shadow:inset 0 1px 2px rgba(255,255,255,.6),0 5px 12px var(--accent-shadow);}
.srt{font-size:12.5px;font-weight:650;color:var(--faint);display:inline-flex;align-items:center;gap:8px;}
.fbtn{font:inherit;font-size:14px;font-weight:700;cursor:pointer;border:1px solid var(--line-2);
  background:var(--surface);color:var(--muted);border-radius:99px;padding:8px 17px;
  display:inline-flex;align-items:center;gap:8px;transition:transform .22s var(--spring),border-color .2s,color .2s;}
.fbtn:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--ink);}
.fbtn.on{border-color:var(--accent);color:var(--ink);}
.fbtn .fc{display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:99px;
  background:linear-gradient(180deg,var(--accent-hi),var(--accent));color:#3d2600;font-size:11.5px;font-weight:800;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.7);}

/* ── панель фильтров ── */
/* Спрятана по умолчанию: нужна меньшинству, а места занимает больше всего
   остального вместе взятого. Самый крупный элемент — самый большой радиус. */
.fpanel{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px 24px;
  padding:24px 26px 26px;background:var(--surface);border-radius:32px;margin:0 0 22px;
  position:relative;overflow:hidden;box-shadow:var(--shadow-warm);}
.fpanel::after{content:"";position:absolute;inset:0 0 auto 0;height:34%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));}
.fpanel>*{position:relative;}
.fgrp.wide{grid-column:1/-1;}
.fgrp.foot{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:16px;}
.flb{display:block;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin-bottom:10px;}
.fgrp select{width:100%;}
.chips{display:flex;flex-wrap:wrap;gap:7px;}
.reset{font:inherit;font-size:13px;font-weight:650;color:var(--faint);background:none;border:none;
  cursor:pointer;padding:0;border-bottom:1px solid var(--line-2);transition:color .2s;}
.reset:hover{color:var(--bad);}
.fnote{font-size:13px;font-weight:600;color:var(--faint);}

/* Почему показан именно этот тип — ответ стоит там, где возник вопрос. */
.tline{font-size:14.5px;font-weight:500;color:var(--muted);margin:0 0 16px;max-width:75ch;}
.tline b{color:var(--ink);font-weight:750;}
.tline a{color:var(--accent-text);text-decoration:none;border-bottom:1px solid var(--accent-soft);}
.tline a:hover{border-bottom-color:var(--accent);}

.mhead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.mhead .tt{font-size:22px;font-weight:750;letter-spacing:-.025em;}
.mhead .un{font-size:12.5px;font-weight:600;color:var(--faint);}
.mhead .sp{flex:1;}
.mhead .cnt{font-size:12.5px;font-weight:700;color:var(--faint);}
.scroll{overflow-x:auto;}
.scroll .cmp{min-width:760px;}
.cmp th.s{cursor:pointer;transition:color .2s;} .cmp th.s:hover{color:var(--accent-deep);}
.cmp th i{font-style:normal;font-size:9px;opacity:0;} .cmp th.act{color:var(--ink);} .cmp th.act i{opacity:1;color:var(--accent-deep);}
.stock{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:650;white-space:nowrap;}
.stock.y{color:var(--good);} .stock.l{color:var(--warn);} .stock.n{color:var(--bad);}
.stock i{width:6px;height:6px;border-radius:50%;background:currentColor;}
.mfoot{margin-top:16px;display:flex;gap:18px;flex-wrap:wrap;font-size:13px;font-weight:600;color:var(--faint);}
.mfoot b{color:var(--muted);}

footer{margin-top:60px;padding-top:18px;border-top:2px dashed var(--line);
  font-size:12.5px;color:var(--faint);font-weight:500;line-height:1.55;}
footer b{color:var(--muted);}
/* Радиус не задаём: обводка сама повторяет форму элемента, а фиксированное
   значение спорило бы с шкалой радиусов. */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

@media(max-width:620px){
  /* Только на посадочных: там таблица короткая и должна поместиться целиком.
     На мониторе колонки не прячем — он и так горизонтально прокручивается,
     а спрятанная колонка в инструменте сравнения означает потерянный факт. */
  .fold .cmp th:nth-child(2),.fold .cmp td:nth-child(2),
  .fold .cmp th:nth-child(5),.fold .cmp td:nth-child(5){display:none;}
  .cmp td{padding:12px 8px;}
  .picks,.tiles{grid-template-columns:1fr;}
  .hero,.fpanel{padding:20px;border-radius:22px;}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

/* ══ СТРАНИЦЫ ЗАДАЧ ═══════════════════════════════════════════════════ */

/* Расчёт — главный блок страницы задачи и единственное, чего нет у соседей
   по нише. Поэтому он выделен сильнее остальных: не карточка среди карточек,
   а то, ради чего человек пришёл. */
.calcbox{background:var(--surface);border-radius:26px;padding:24px 26px;margin:0 0 26px;
  position:relative;overflow:hidden;box-shadow:var(--shadow-warm);}
.calcbox::after{content:"";position:absolute;inset:0 0 auto 0;height:40%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0));}
.calcbox>*{position:relative;}
.calcline{font-size:21px;font-weight:600;letter-spacing:-.02em;margin:0;line-height:1.45;}
.calcline b{font-weight:800;}
.calcline .dim{color:var(--faint);font-weight:500;margin:0 4px;}
.calcout{font-size:17px;font-weight:600;color:var(--muted);margin:16px 0 0;
  padding-top:16px;border-top:1px solid var(--line);}
.calcout b{color:var(--good);font-weight:800;}

/* Оговорка про оценку веса страницы стоит сразу под цифрой, а не в подвале:
   человек должен усомниться в нашей оценке ДО того, как построит на ней смету. */
.calcbox .cnote{font-size:13.5px;font-weight:500;color:var(--faint);margin:12px 0 0;max-width:64ch;line-height:1.55;}

.crit,.alt{margin:0 0 26px;padding:18px 22px;border-radius:22px;background:var(--surface);
  box-shadow:0 2px 5px rgba(0,0,0,.04);}
.crit p,.alt p{margin:0;font-size:15px;font-weight:500;color:var(--muted);max-width:62ch;}

/* Честная альтернатива — «может, прокси вам и не нужны». Оформлена спокойно,
   без тревожного цвета: это не предупреждение, а совет не тратить деньги. */
.alt{background:var(--surface-2);}

/* Предупреждение о правилах площадки. Стоит ДО таблицы с ценами намеренно:
   человек имеет право узнать, что рискует аккаунтом, до покупки, а не после
   бана. Красным — чтобы его нельзя было пролистать не заметив. */
.warn{margin:0 0 26px;padding:18px 22px;border-radius:22px;
  background:#fdf0ed;box-shadow:inset 0 0 0 1px rgba(200,64,47,.18);}
.warn .lb{color:var(--bad);}
.warn p{margin:0;font-size:15px;font-weight:500;color:#8c2f22;max-width:62ch;line-height:1.6;}

/* Метка «с оговоркой» на плитке задачи: видно до перехода, а не после. */
.tile .rk{display:inline-block;margin-top:8px;font-size:11.5px;font-weight:700;
  padding:3px 9px;border-radius:99px;background:#fdf0ed;color:var(--bad);}

/* Список того, чего на сайте не будет. Не украшение и не юридическая
   формальность: перечень отказов — такое же утверждение о нас, как цены. */
.excl{margin:34px 0 0;padding:20px 24px;border-radius:22px;background:var(--surface-2);}
.excl p{margin:0;font-size:14.5px;font-weight:500;color:var(--muted);max-width:64ch;}
.excl ul{margin:14px 0 0;padding:0 0 0 20px;display:grid;gap:8px;}
.excl li{font-size:14px;font-weight:500;color:var(--muted);line-height:1.5;}
.excl li b{color:var(--ink);font-weight:700;}