/* ─── The Provider Index · картотека провайдеров ────────────────────────────
   Палитра взята из самой сцены: тёплая бумага, чернила, три краски разделов.
   Сцена: 180 кадров WebP, скролл листает их, текст приходит по фазам разборки.
   ────────────────────────────────────────────────────────────────────────── */
:root{
  --paper:#F3E8D2; --paper2:#EFE0C2; --card:#F8F0DF;
  --ink:#12303D; --mut:#4E6470; --dim:#8A9099;
  --line:rgba(18,48,61,.20); --line2:rgba(18,48,61,.10);
  --coral:#D9583F; --teal:#3F7E72; --ochre:#C08319; --navy:#24405A;
  --acc:var(--coral);
  --shadow:0 18px 40px -28px rgba(18,48,61,.55);
}
html[data-theme="ink"]{
  --paper:#101E26; --paper2:#0C171D; --card:#16262F;
  --ink:#EFE2C9; --mut:#A9B7BC; --dim:#6E7F86;
  --line:rgba(239,226,201,.22); --line2:rgba(239,226,201,.10);
  --coral:#EE7A5F; --teal:#63A899; --ochre:#E0A63C; --navy:#8FB0CC;
  --shadow:0 18px 40px -28px rgba(0,0,0,.8);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.62 'IBM Plex Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  transition:background .5s ease,color .5s ease}
h1,h2,h3{font-family:Archivo,system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;margin:0}
a{color:inherit}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.wrap{max-width:1360px;margin:0 auto;padding:0 5vw}

/* ─── шапка ─────────────────────────────────────────────────────────────── */
.prog{position:fixed;left:0;top:0;height:2px;width:0;background:var(--acc);z-index:60;transition:background .5s}
.top{position:fixed;left:0;right:0;top:0;z-index:50;backdrop-filter:blur(8px);
  background:color-mix(in srgb,var(--paper) 84%,transparent);border-bottom:1px solid var(--line2)}
.top .in{max-width:1360px;margin:0 auto;padding:14px 5vw;display:flex;align-items:center;gap:28px}
.brand{font-family:Archivo;font-weight:800;font-size:17px;letter-spacing:-.02em;white-space:nowrap}
.brand span{color:var(--acc)}
.nav{display:flex;gap:22px;margin-left:auto}
.nav a{text-decoration:none;color:var(--mut);font-size:13.5px;font-weight:500;padding:4px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a.on{color:var(--ink);border-bottom-color:var(--acc)}
.tbtn{border:1px solid var(--line);background:none;color:var(--mut);border-radius:999px;
  padding:6px 13px;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.12em}
.tbtn:hover{color:var(--ink);border-color:var(--acc)}

/* ─── сцена: во весь экран, текст лежит на кадре ─────────────────────────── */
.hero{position:relative;background:var(--paper2)}
/* кадры отрисованы на тёплой бумаге и в ночной теме не перекрашиваются:
   сцена остаётся бумажным разворотом, поэтому её текст всегда чернильный */
html[data-theme="ink"] .hero{--ink:#12303D;--mut:#4E6470;--dim:#8A9099;
  --line:rgba(18,48,61,.22);--line2:rgba(18,48,61,.12);--paper2:#EFE0C2}
/* цвет наследуется вычисленным значением, поэтому заголовки сцены берут краску явно,
   иначе в ночной теме они остаются светлыми и пропадают на бумаге */
.hero,.hero h1,.hero h2{color:var(--ink)}
.pin{position:relative;height:100vh;overflow:hidden}
#seq{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .5s}
#seq.is-ready{opacity:1}
.over{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:flex-end;
  pointer-events:none}
.lede{pointer-events:auto;margin-right:5vw;width:min(27vw,410px);padding-top:56px}
.lede .kick{color:var(--dim);margin-bottom:16px}
.lede h1{font-size:clamp(30px,3.5vw,52px);line-height:1.02}
.lede h1 .ln{display:block;overflow:hidden}
.lede h1 .ln i{display:block;font-style:normal}
.lede .sub{color:var(--mut);font-size:16px;margin:16px 0 0}
.lede h1,.lede .sub{transition:font-size .5s ease,opacity .5s ease,max-height .5s ease,margin .5s ease}
/* после первого экрана титул уступает место тексту фазы: он уже сказал своё */
.lede.compact h1,.lede.compact .sub,.lede.compact .kick{opacity:0;max-height:0;margin:0;overflow:hidden}
.phases{position:relative;margin-top:26px;min-height:280px;transition:min-height .5s ease}
.phase{position:absolute;inset:0;opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .45s ease,transform .45s ease}
.phase.on{opacity:1;transform:none;pointer-events:auto}
.phase .no{color:var(--acc);margin-bottom:11px}
.phase h2{font-size:clamp(21px,2.1vw,29px);line-height:1.16}
.phase p{color:var(--mut);font-size:15.5px;margin:12px 0 0}
.phase .src{margin-top:13px;font-size:11.5px;color:var(--dim)}
.phase .src a{color:var(--dim)}
.steps{display:flex;gap:6px;margin-top:22px}
.steps b{width:19px;height:3px;background:var(--line);border-radius:2px;transition:background .3s}
.steps b.on{background:var(--acc)}
.figtag{position:absolute;left:5vw;bottom:20px;z-index:5;color:var(--dim)}
.hint{position:absolute;left:5vw;bottom:20px;z-index:5;color:var(--dim)}

/* ─── общие блоки ───────────────────────────────────────────────────────── */
.band{padding:104px 0;border-top:1px solid var(--line2)}
.band .wrap>.kick{color:var(--dim);margin-bottom:16px}
.h2{font-size:clamp(27px,3.2vw,42px);line-height:1.08;max-width:20ch}
.say{color:var(--mut);font-size:17px;max-width:60ch;margin:20px 0 0}

/* метод */
.layers{margin-top:52px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line2);border:1px solid var(--line2)}
.layer{background:var(--paper);padding:26px 22px 28px;cursor:pointer}
.layer .n{color:var(--acc);margin-bottom:14px}
.layer h3{font-size:19px}
.layer p{color:var(--mut);font-size:14.5px;margin:11px 0 0}
.layer .more{max-height:0;overflow:hidden;transition:max-height .45s ease}
.layer.open .more{max-height:230px}
.layer .more p{border-top:1px solid var(--line2);margin-top:14px;padding-top:12px;font-size:13.5px}
.rule{margin-top:44px}
.rule path,.rule line{stroke:var(--acc);stroke-width:2;fill:none}

/* счётчик */
.count{display:flex;gap:56px;flex-wrap:wrap;margin-top:44px;align-items:flex-end}
.count .big{font-family:Archivo;font-weight:800;font-size:clamp(46px,7vw,96px);line-height:.95;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.count .lbl{color:var(--dim);margin-bottom:10px}
.count .side{max-width:38ch;color:var(--mut);font-size:15px}

/* три стейджа */
.stagecards{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sc{background:var(--card);border:1px solid var(--line2);padding:0 0 24px;text-decoration:none;display:block;
  transition:transform .35s ease,border-color .35s ease}
.sc:hover{transform:translateY(-4px);border-color:var(--acc)}
.sc .bar{height:7px;display:block}
.sc .in{padding:22px 22px 0}
.sc .n{color:var(--dim);margin-bottom:12px}
.sc h3{font-size:23px;margin-bottom:10px}
.sc p{color:var(--mut);font-size:14.5px;margin:0}
.sc .ask{margin-top:16px;font-size:13.5px;color:var(--ink);font-weight:600}

/* обучающий блок: открой реестр и посмотри поле */
.check{margin-top:46px;display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:start}
.steps2{counter-reset:st;margin:0;padding:0;list-style:none}
.steps2 li{counter-increment:st;position:relative;padding:0 0 20px 42px;font-size:15.5px;color:var(--mut)}
.steps2 li::before{content:counter(st,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;color:var(--acc)}
.steps2 li b{color:var(--ink);font-weight:600}
.regs{background:var(--card);border:1px solid var(--line2);padding:22px}
.regs h4{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin:0 0 16px}
.regs dl{margin:0;display:grid;grid-template-columns:1fr;gap:14px}
.regs .row{border-top:1px solid var(--line2);padding-top:12px}
.regs .row:first-child{border-top:0;padding-top:0}
.regs dt{font-size:14px;font-weight:600}
.regs dd{margin:5px 0 0;font-size:13px;color:var(--mut)}
.regs dd a{color:var(--mut)}
.regs .fld{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink);
  background:color-mix(in srgb,var(--acc) 13%,transparent);padding:1px 6px}

/* профиль провайдера */
.pro{margin-top:34px;background:var(--card);border:1px solid var(--line2);padding:28px}
.pro .head{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;border-bottom:1px solid var(--line2);
  padding-bottom:18px;margin-bottom:20px}
.pro .head h3{font-size:26px}
.pro .head .ent{color:var(--dim);font-size:13px}
.pro .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line2)}
.pro .cell{background:var(--card);padding:18px 16px}
.pro .cell .lbl{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);margin-bottom:9px}
.pro .cell .val{font-size:14px;line-height:1.5}
.pro .foot{margin-top:18px;font-size:12px;color:var(--dim)}
.pro .foot a{color:var(--mut)}

/* индекс */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:38px 0 26px;align-items:center}
.filters .grp{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:none;color:var(--mut);border-radius:999px;padding:7px 14px;
  cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase}
.chip.on{background:var(--acc);border-color:var(--acc);color:var(--paper)}
.cnt{color:var(--dim);margin-left:auto}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.pv{background:var(--card);border:1px solid var(--line2);padding:22px;position:relative}
.pv.hide{display:none}
.pv h3{font-size:20px}
.pv .ent{color:var(--dim);font-size:12.5px;margin-top:6px}
.pv dl{margin:18px 0 0;display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:13.5px}
.pv dt{color:var(--dim);font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding-top:3px}
.pv dd{margin:0;color:var(--ink)}
.pv .prot{font-weight:600}
.pv .src{margin-top:16px;padding-top:12px;border-top:1px solid var(--line2);font-size:11.5px;color:var(--dim)}
.pv .src a{color:var(--mut)}
.badge{position:absolute;right:16px;top:20px;font-family:'IBM Plex Mono',monospace;font-size:9.5px;
  letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border:1px solid var(--line)}
.badge.bank{color:var(--teal);border-color:var(--teal)}
.badge.emi{color:var(--ochre);border-color:var(--ochre)}
.badge.pi{color:var(--coral);border-color:var(--coral)}

/* сравнение */
.cmp{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
select{font-family:'IBM Plex Sans';font-size:15px;padding:10px 14px;background:var(--card);
  color:var(--ink);border:1px solid var(--line);border-radius:0}
.ctab{margin-top:26px;width:100%;border-collapse:collapse;font-size:14.5px}
.ctab th,.ctab td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line2);vertical-align:top}
.ctab th{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim);width:22%}
.ctab td{width:39%}
.ctab tr.diff td{background:color-mix(in srgb,var(--acc) 9%,transparent)}
.tablewrap{overflow-x:auto}

/* журнал */
.jr{margin-top:40px;border-top:1px solid var(--line2)}
.jr a{display:grid;grid-template-columns:96px 1fr auto;gap:20px;align-items:baseline;
  padding:19px 4px;border-bottom:1px solid var(--line2);text-decoration:none}
.jr a:hover{background:var(--card)}
.jr .d{color:var(--dim);font-family:'IBM Plex Mono',monospace;font-size:11px}
.jr .t{font-family:Archivo;font-weight:700;font-size:18.5px;letter-spacing:-.01em}
.jr .s{color:var(--dim);font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase}

footer{padding:70px 0 90px;border-top:1px solid var(--line);background:var(--paper2)}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
footer p{color:var(--mut);font-size:14px;max-width:46ch}
footer h4{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0 0 14px}
footer li{list-style:none;margin:0 0 9px;font-size:14px}
footer ul{padding:0;margin:0}
.note{margin-top:44px;padding-top:22px;border-top:1px solid var(--line2);color:var(--dim);font-size:12.5px;max-width:72ch}

/* низкое окно: текст на кадре ужимается, чтобы колонка помещалась в экран */
@media (max-height:760px) and (min-width:981px){
  .lede h1{font-size:clamp(24px,2.6vw,34px)}
  .lede .sub{font-size:14.5px;margin-top:12px}
  .phases{min-height:230px;margin-top:18px}
  .phase h2{font-size:clamp(18px,1.8vw,24px)}
  .phase p{font-size:14.5px;margin-top:9px}
  .steps{margin-top:14px}
}
/* планшет: свободная зона кадра уже, колонка сдвигается ближе к краю */
@media (max-width:1180px) and (min-width:981px){
  .lede{margin-right:3.5vw;width:min(31vw,340px)}
}
/* узкий экран: кадр садится в верхнюю половину, текст живёт под ним */
@media (max-width:1080px){
  .stagecards{grid-template-columns:1fr}
  .check{grid-template-columns:1fr;gap:24px}
  .pro .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  #seq{inset:auto 0 auto 0;top:60px;height:36vh}
  .over{align-items:flex-end;padding-bottom:4vh}
  .lede{margin:0 5vw;width:auto;padding-top:0}
  .over{justify-content:flex-start}
  .lede h1{font-size:clamp(30px,7vw,44px)}
  .phases{min-height:250px}
  .figtag{display:none}
  .layers{grid-template-columns:repeat(2,1fr)}
  footer .cols{grid-template-columns:1fr}
}
@media (max-width:780px){
  body{font-size:16px}
  .nav{display:none}
  #seq{height:33vh}
  .phases{min-height:270px}
  .band{padding:72px 0}
  .jr a{grid-template-columns:1fr;gap:5px}
  .pro .grid{grid-template-columns:1fr}
  .pro{padding:20px}
  .count{gap:28px}
}
@media (prefers-reduced-motion:reduce){
  .pin{height:auto;padding:100px 0 40px}
  #seq{position:relative;inset:auto;height:auto;aspect-ratio:16/9;opacity:1}
  .over{position:relative;inset:auto;padding:34px 0 0}
  .lede{width:auto;margin:0 5vw;padding-top:0}
  .over{justify-content:flex-start}
  .phase{position:relative;opacity:1;transform:none;margin-bottom:34px;pointer-events:auto}
  .phases{min-height:0}
  .figtag,.hint{display:none}
  html{scroll-behavior:auto}
}


/* ─── многостраничник: шапка со ссылками, хлебные крошки, соседние страницы ─ */
.nav a.here{color:var(--ink);border-bottom-color:var(--acc)}
.crumbs{padding:104px 0 0;font-size:12.5px;color:var(--dim)}
.crumbs a{color:var(--mut);text-decoration:none;border-bottom:1px solid var(--line2)}
.crumbs a:hover{color:var(--ink)}
.phead{padding:26px 0 0}
.phead .kick{color:var(--dim);margin-bottom:14px}
.phead h1{font-size:clamp(32px,4.4vw,58px);line-height:1.03;max-width:19ch}
.phead .stand{color:var(--mut);font-size:17.5px;max-width:60ch;margin:22px 0 0}
.pmeta{margin:30px 0 0;display:flex;gap:28px;flex-wrap:wrap;padding-top:20px;border-top:1px solid var(--line2)}
.pmeta div{min-width:0}
.pmeta dt{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.pmeta dd{margin:6px 0 0;font-size:15px}
.next{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px}
.next a{display:block;padding:22px;border:1px solid var(--line2);background:var(--card);text-decoration:none}
.next a:hover{border-color:var(--acc)}
.next .lbl{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.next .t{display:block;margin-top:8px;font-family:Archivo;font-weight:700;font-size:18px}
.cta{margin-top:52px;padding:30px;border:1px solid var(--line);background:var(--card);
  display:flex;gap:22px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta p{margin:0;color:var(--mut);font-size:15.5px;max-width:52ch}
.btn{display:inline-block;padding:12px 22px;background:var(--acc);color:var(--paper);text-decoration:none;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.13em;text-transform:uppercase}
.btn:hover{filter:brightness(1.08)}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:30px}
.tbl th,.tbl td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line2);vertical-align:top}
.tbl th{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.tbl td a{color:var(--ink)}
.tbl tr:hover td{background:var(--card)}
.two{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:start;margin-top:40px}
.unk{background:var(--card);border:1px solid var(--line2);padding:22px}
.unk h4{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin:0 0 14px}
.unk li{font-size:14px;color:var(--mut);margin:0 0 10px}
.unk ul{margin:0;padding-left:18px}
@media (max-width:1080px){ .two{grid-template-columns:1fr} .next{grid-template-columns:1fr} }


/* ─── телефон: меню и таблицы ──────────────────────────────────────────── */
@media (max-width:780px){
  /* многостраничнику нужна навигация и на телефоне: ряд ссылок с горизонтальной прокруткой */
  .top .in{flex-wrap:wrap;gap:8px 14px;padding:10px 5vw}
  .nav{display:flex;order:3;width:100%;margin:0;gap:15px;overflow-x:auto;padding-bottom:3px}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;font-size:13px;padding:2px 0}
  .tbtn{margin-left:auto}
  .crumbs{padding-top:124px}
  #seq{top:96px}
  /* таблица шире экрана растягивает body, поэтому на телефоне строки становятся блоками */
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:auto}
  .tbl thead{display:none}
  .tbl tr{border-bottom:1px solid var(--line2);padding:14px 0}
  .tbl td{border:0;padding:3px 0;font-size:14.5px}
  .tbl td:first-child{font-family:Archivo;font-weight:700;font-size:17px;padding-bottom:6px}
  .ctab th{width:auto}
}


/* ─── телефон: кадр и текст не должны накладываться ─────────────────────── */
@media (max-width:980px){
  .over{align-items:flex-start;padding-bottom:0;padding-top:calc(96px + 36vh + 20px)}
  .pin{height:auto;min-height:100vh;padding-bottom:34px}
}
@media (max-width:780px){
  .over{padding-top:calc(96px + 33vh + 18px)}
}