/* Палитра и шрифт — те же, что на лендинге gdebenzapp.ru: раздел должен
   читаться как часть того же продукта, а не как отдельный сайт. */
:root{
  --green:#34C759; --green-d:#0C2A16; --dark:#11201A; --blue:#0A6CF0;
  --orange:#E07D14; --red:#D93A2B; --light:#F6F7F8; --ink:#11201A;
  --muted:#6b6b70; --muted-2:#8a8a8e; --line:#e3e5e8; --card:#fff;
  --up:#1b7a3d; --down:#a72c20;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--light); color:var(--ink);
  font:400 17px/1.6 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* шапка */
.top{background:var(--dark);color:#fff;position:sticky;top:0;z-index:20}
.top .wrap{display:flex;align-items:center;gap:22px;height:58px}
.brand{display:flex;align-items:center;gap:0;color:#fff;font-weight:800;font-size:17px;letter-spacing:-0.01em;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand span{color:var(--green)}
.top nav{display:flex;gap:18px;font-size:15px;overflow-x:auto;scrollbar-width:none}
.top nav::-webkit-scrollbar{display:none}
.top nav a{color:#cfd6d2;white-space:nowrap}
.top nav a:hover,.top nav a[aria-current]{color:#fff;text-decoration:none}
.top .cta{margin-left:auto;background:var(--green);color:#04240f;font-weight:700;font-size:14px;
  padding:8px 14px;border-radius:9px;white-space:nowrap}
.top .cta:hover{text-decoration:none;filter:brightness(1.07)}
/* на узком экране шапка и так тесная, а блок установки есть в самой странице */
@media(max-width:640px){
  .top .cta{display:none}
  .top .wrap{gap:11px;padding:0 14px}
  .top .brand{font-size:16px}
  .top nav{gap:11px;font-size:13.5px}
}

/* хлебные крошки */
.crumbs{font-size:13.5px;color:var(--muted);padding:14px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"→";margin-right:6px;color:var(--muted-2)}

main{padding:8px 0 64px;display:flex;flex-direction:column;gap:34px}
section{display:flex;flex-direction:column;gap:14px}
h1{font-size:clamp(27px,4.4vw,40px);line-height:1.14;font-weight:800;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:clamp(20px,2.6vw,25px);line-height:1.2;font-weight:700;letter-spacing:-.01em}
h3{font-size:17px;font-weight:700}
p{max-width:68ch}
.sub{color:var(--muted);font-size:15px}

/* герой с главным числом */
.hero{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;
  display:grid;grid-template-columns:minmax(190px,260px) 1fr;gap:24px;align-items:center}
@media(max-width:720px){.hero{grid-template-columns:1fr;gap:16px}}
.big{font-size:clamp(48px,9vw,72px);line-height:1;font-weight:800;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.big.up{color:var(--green)} .big.mid{color:var(--orange)} .big.down{color:var(--red)}
.big-cap{font-size:14px;color:var(--muted);margin-top:6px;max-width:26ch}
.deltas{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.pill{font-size:13px;font-weight:600;padding:4px 9px;border-radius:999px;background:#eef0f2;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.pill.up{background:#e6f7ec;color:#1b7a3d} .pill.down{background:#fdeceb;color:#a72c20}

/* карточки и сетки */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.card{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:14px 16px;
  display:flex;flex-direction:column;gap:5px;color:inherit}
a.card:hover{text-decoration:none;border-color:#c9ced4;box-shadow:0 2px 10px rgba(17,32,26,.06)}
.card .n{font-size:26px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.card .t{font-size:15px;font-weight:600}
.card .m{font-size:13px;color:var(--muted)}

/* текст выпуска */
.lede{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px;
  display:flex;flex-direction:column;gap:13px}
.lede p{font-size:17.5px;line-height:1.62}

/* таблицы */
.tw{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:13px}
table{border-collapse:collapse;width:100%;min-width:480px;font-size:15px}
th{text-align:left;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:#fafbfc}
td{padding:10px 14px;border-bottom:1px solid #f0f1f3;vertical-align:middle}
tr:last-child td{border-bottom:none}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bar{display:block;height:6px;border-radius:3px;background:var(--green);min-width:2px}
.bar.mid{background:var(--orange)} .bar.down{background:var(--red)}
.barcell{width:120px;min-width:90px}
td.up,.d-up{color:var(--up);font-weight:600} td.down,.d-down{color:var(--down);font-weight:600}
.card .n.up{color:var(--green)} .card .n.mid{color:var(--orange)} .card .n.down{color:var(--red)}
.card .m.up{color:var(--up)} .card .m.down{color:var(--down)}

/* сортировка: заголовок — кнопка, стрелка показывает текущий порядок */
th .sortbtn{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:0;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
th .sortbtn::after{content:"↕";font-size:11px;opacity:.35}
th .sortbtn:hover{color:var(--ink)}
th .sortbtn:hover::after{opacity:.7}
th[aria-sort=ascending] .sortbtn,th[aria-sort=descending] .sortbtn{color:var(--ink)}
th[aria-sort=ascending] .sortbtn::after{content:"↑";opacity:.85}
th[aria-sort=descending] .sortbtn::after{content:"↓";opacity:.85}

/* график: SVG тянется по контейнеру, подписи остаются обычным HTML —
   иначе на телефоне текст осей масштабируется вместе с картинкой в кашу */
.chart{margin:0;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:15px 16px 11px}
.chart .plot{position:relative;margin-left:42px;height:clamp(150px,21vw,196px)}
/* сетка — три линии ровно на 0/50/100% высоты (подписи всегда hi/середина/lo) */
.chart .plot::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(var(--line),var(--line)) 0 0/100% 1px no-repeat,
             linear-gradient(var(--line),var(--line)) 0 50%/100% 1px no-repeat,
             linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat}
.chart svg{display:block;width:100%;height:100%;overflow:visible}
.chart .ar{fill:rgba(52,199,89,.14)}
.chart .ln{fill:none;stroke:var(--green);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.chart .dot{position:absolute;left:100%;width:9px;height:9px;border-radius:50%;background:var(--green);
  transform:translate(-50%,-50%);box-shadow:0 0 0 3px var(--card)}
.chart .yl{position:absolute;left:-10px;transform:translate(-100%,-50%);font-size:12px;
  color:var(--muted-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.chart figcaption{display:flex;justify-content:space-between;margin:9px 0 0 42px;
  font-size:12px;color:var(--muted-2)}
/* внутри карточки героя рамка графика была бы карточкой в карточке */
.hero .chart{background:none;border:none;padding:0}

/* наведение по графику: вертикаль, точка и подсказка «день + доля».
   Слой строит a.js — без скрипта график остаётся прежней картинкой.
   touch-action:pan-y: пальцем по горизонтали ведём курсор, по вертикали
   страница по-прежнему прокручивается. */
.chart .plot{touch-action:pan-y}
.chart .plot:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:4px}
.hv{position:absolute;inset:0;pointer-events:none;opacity:0}
.plot.on .hv{opacity:1}
.hv-line{position:absolute;top:-6px;bottom:0;width:1px;margin-left:-.5px;background:rgba(52,199,89,.5)}
.hv-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--green);
  transform:translate(-50%,-50%);box-shadow:0 0 0 3px var(--card)}
.hv-tip{position:absolute;display:flex;align-items:baseline;gap:7px;white-space:nowrap;
  background:var(--ink);color:var(--card);border-radius:8px;padding:4px 9px;
  font-size:12.5px;line-height:1.35;box-shadow:0 6px 18px rgba(17,32,26,.22)}
.hv-tip b{font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}

/* навигация по выпускам */
.pager{display:flex;gap:10px;flex-wrap:wrap}
.pager a{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:11px 15px;
  font-size:14.5px;color:inherit;display:flex;flex-direction:column;gap:2px;flex:1;min-width:180px}
.pager a:hover{text-decoration:none;border-color:#c9ced4}
.pager .l{font-size:12px;color:var(--muted)}

/* FAQ */
details{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:14px 16px}
details+details{margin-top:8px}
summary{font-weight:600;cursor:pointer;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--muted);font-weight:400}
details[open] summary::after{content:"−"}
details p{margin-top:9px;color:var(--muted);font-size:15.5px}

/* блок установки */
.install{background:var(--green-d);color:#eaf7ee;border-radius:16px;padding:26px;
  display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.install-txt{display:flex;flex-direction:column;gap:7px;max-width:46ch}
.install h2{color:#fff}
.install p{color:#b9d6c3;font-size:15.5px}
.badges{display:flex;flex-wrap:wrap;gap:10px}
.badges a{display:block;border-radius:9px;transition:transform .16s ease,filter .16s ease}
.badges img{display:block;height:46px;width:auto}
.badges a:hover{transform:translateY(-2px);filter:brightness(1.14)}
.badges a:focus-visible{outline:2px solid var(--green);outline-offset:3px}
@media(max-width:420px){.badges img{height:42px}}

footer{background:var(--dark);color:#9fb0a6;font-size:14px;padding:28px 0 36px}
footer .wrap{display:flex;flex-direction:column;gap:12px}
footer a{color:#cfd6d2}
footer nav{display:flex;flex-wrap:wrap;gap:14px}
.method{font-size:13.5px;color:var(--muted);max-width:72ch}

@media(prefers-color-scheme:dark){
  :root{--light:#0d1512;--card:#141d19;--ink:#e8edea;--line:#22302a;--muted:#8fa096;--muted-2:#7b8b82;
         --up:#7fdca0;--down:#f0a196}
  th{background:#111a16}
  td{border-bottom-color:#1b2621}
  .pill{background:#1b2621;color:#9fb0a6}
  .pill.up{background:#123020;color:#7fdca0} .pill.down{background:#331916;color:#f0a196}
  .chart .g{stroke:#22302a}
  .card .m,.sub,.method{color:var(--muted)}
}

/* ── Движение ────────────────────────────────────────────────────────────────
   Один поставленный момент на загрузке — карточка с главным числом появляется,
   линия графика прочерчивается, точка встаёт на место. Дальше движение только
   по скроллу и по наведению. Всё под prefers-reduced-motion: по умолчанию
   страница статична, анимации включаются только там, где движение разрешено. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }
  @keyframes wipe { from { clip-path:inset(0 100% 0 0) } to { clip-path:inset(0 0 0 0) } }
  @keyframes pop  { from { opacity:0; transform:translate(-50%,-50%) scale(.2) }
                    to   { opacity:1; transform:translate(-50%,-50%) scale(1) } }
  @keyframes grow  { from { transform:scaleX(0) } to { transform:scaleX(1) } }
  @keyframes nudge { from { transform:translateY(10px) } to { transform:none } }

  .hero { animation:rise .5s cubic-bezier(.22,.61,.36,1) both }
  .big  { animation:rise .55s .08s cubic-bezier(.22,.61,.36,1) both }

  /* вскрываем график слева направо: dash-draw тут не годится — pathLength не
     работает вместе с non-scaling-stroke, штрих считается в экранных пикселях */
  .chart svg  { animation:wipe 1.05s .12s cubic-bezier(.33,.7,.4,1) both }
  .chart .dot { animation:pop .4s 1s cubic-bezier(.34,1.4,.64,1) both }

  /* полосы в таблицах растут по мере прокрутки; там, где scroll-driven анимаций
     нет, они просто отрисуются сразу — стартового скрытия ни у чего нет */
  @supports (animation-timeline: view()) {
    .bar { transform-origin:left center; animation:grow linear both;
           animation-timeline:view(); animation-range:entry 0% cover 18% }
    /* карточки только приподнимаются: если scroll-анимация почему-то не
       отработает, содержимое всё равно видно — прятать текст по opacity ради
       эффекта нельзя */
    .grid > .card { animation:nudge linear both;
           animation-timeline:view(); animation-range:entry 0% cover 14% }
  }

  .hv { transition:opacity .13s ease }
  a.card, .pager a { transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease }
  a.card:hover, .pager a:hover { transform:translateY(-2px) }
  .top .cta { transition:filter .16s ease, transform .16s ease }
  .top .cta:hover { transform:translateY(-1px) }
  details summary { transition:color .14s ease }
}

/* печать: движения нет, фон карточек не съедает тонер */
@media print {
  *,*::before,*::after{animation:none !important;transition:none !important}
  .top,.install,.pager{display:none}
  body{background:#fff;color:#000}
}