@font-face{font-family:'BnHead';src:url('/assets/fonts/bnhead-var.woff2')format('woff2-variations');
  font-weight:200 800;font-display:swap}
@font-face{font-family:'BnText';src:url('/assets/fonts/bntext-var.woff2')format('woff2-variations');
  font-weight:100 900;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#0f1113;color:#f2efe9;
  font:400 17px/1.62 'BnText',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:#ffb02e}
:focus-visible{outline:2px solid #ffb02e;outline-offset:3px}

/* ФАКТУРА: слой зерна поверх фона, без картинок. Требование списка. */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
body>*{position:relative;z-index:1}

.bn-skip{position:absolute;left:-9999px}
.bn-skip:focus{left:10px;top:10px;z-index:99;background:#ffb02e;color:#0f1113;
  padding:10px 16px;font:700 14px/1 'BnText',sans-serif}

/* Боковые отступы задаются ТОЛЬКО здесь. Секционным классам ниже
   запрещена сокращённая запись padding. */
.bn-wrap{max-width:1280px;margin:0 auto;padding:0 26px}
.bn-col{max-width:740px;margin:0 auto;padding:0 26px}

/* --- НАВИГАЦИЯ ИНАЧЕ: вертикальная полоса слева ---------------------- */
.bn-rail{position:fixed;left:0;top:0;bottom:0;width:66px;z-index:40;
  background:#171a1d;border-right:1px solid #2b3034;
  display:flex;flex-direction:column;align-items:center;padding:18px 0;gap:4px}
.bn-rail__b{font:800 11px/1.1 'BnHead',sans-serif;color:#ffb02e;
  writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.18em;
  text-transform:uppercase;text-decoration:none;margin-bottom:14px;
  max-height:160px;overflow:hidden}
.bn-rail a.bn-rail__n{display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;color:#9aa0a6;text-decoration:none;
  font:600 12px/1 'BnText',monospace;border:1px solid transparent;
  transition:color .18s ease,border-color .18s ease,background .18s ease}
.bn-rail a.bn-rail__n:hover,.bn-rail a.bn-rail__n[aria-current]{
  color:#0f1113;background:#ffb02e;border-color:#ffb02e}
.bn-rail__all{margin-top:auto;font:600 10px/1.2 'BnText',sans-serif;
  color:#9aa0a6;text-decoration:none;writing-mode:vertical-rl;
  letter-spacing:.14em;text-transform:uppercase}
.bn-rail__all:hover{color:#ffb02e}
body{padding-left:66px}

@media(max-width:860px){
  body{padding-left:0}
  .bn-rail{position:static;width:auto;flex-direction:row;height:auto;
    border-right:0;border-bottom:1px solid #2b3034;padding:10px 14px;
    gap:6px;overflow-x:auto}
  .bn-rail__b{writing-mode:horizontal-tb;margin:0 10px 0 0;max-height:none;
    display:flex;align-items:center}
  .bn-rail a.bn-rail__n{width:34px;height:34px;flex:none}
  .bn-rail__all{margin:0 0 0 auto;writing-mode:horizontal-tb;
    display:flex;align-items:center;flex:none}
}

/* --- ЗАГОЛОВОК ВО ВЕСЬ ЭКРАН ----------------------------------------- */
.bn-open{padding-top:56px;padding-bottom:40px}
.bn-kicker{font:600 11px/1 'BnText',sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:#5ec8c0;margin:0 0 22px}
.bn-open h1{font-family:'BnHead',Impact,sans-serif;font-weight:700;
  font-size:clamp(44px,10.5vw,150px);line-height:.92;letter-spacing:-.035em;
  color:#f2efe9;margin:0 0 28px;max-width:14ch}
.bn-open h1 em{font-style:normal;color:#ffb02e}
.bn-open__d{font-size:19.5px;line-height:1.56;color:#9aa0a6;margin:0 0 34px;
  max-width:50ch}

/* --- BENTO: блоки РАЗНОГО размера ------------------------------------ */
.bn-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin:0 0 20px}
.bn-box{background:#171a1d;border:1px solid #2b3034;padding:22px 20px;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .2s ease,border-color .2s ease,background .2s ease}
.bn-box:hover{transform:translateY(-3px);border-color:#9aa0a6;background:#1e2226}
a.bn-box{text-decoration:none;color:inherit}
.bn-box--w2{grid-column:span 2}
.bn-box--w3{grid-column:span 3}
.bn-box--w4{grid-column:span 4}
.bn-box--tall{grid-row:span 2;min-height:230px}
.bn-box__k{font:600 10.5px/1 'BnText',sans-serif;letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 14px}
.bn-box__n{font-family:'BnHead',sans-serif;font-weight:700;
  font-size:clamp(34px,5vw,62px);line-height:.9;letter-spacing:-.03em;margin:0 0 8px}
.bn-box p{margin:0;font-size:16px;line-height:1.5;color:#9aa0a6}
.bn-box strong{color:#f2efe9;font-weight:600}

/* ВИДИМАЯ сторона: плотная, янтарная */
.bn-box--seen{border-color:#ffb02e}
.bn-box--seen .bn-box__k{color:#ffb02e}
.bn-box--seen .bn-box__n{color:#ffb02e}

/* НЕВИДИМАЯ сторона: пунктир и штриховка — есть, но не заполнено */
.bn-box--unseen{border-style:dashed;border-color:#5ec8c0;
  background-image:repeating-linear-gradient(135deg,transparent,transparent 7px,
    rgba(94,200,192,.07) 7px,rgba(94,200,192,.07) 8px)}
.bn-box--unseen .bn-box__k{color:#5ec8c0}
.bn-box--unseen .bn-box__n{color:#5ec8c0}

/* нулевая линия между сторонами */
.bn-zero{display:flex;align-items:center;gap:14px;margin:4px 0 18px;
  font:600 10.5px/1 'BnText',sans-serif;letter-spacing:.2em;
  text-transform:uppercase;color:#9aa0a6}
.bn-zero::before,.bn-zero::after{content:"";height:1px;background:#2b3034;flex:1}

@media(max-width:980px){
  .bn-grid{grid-template-columns:repeat(2,1fr)}
  .bn-box--w2,.bn-box--w3,.bn-box--w4{grid-column:span 1}
  .bn-box--tall{grid-row:auto;min-height:0}
}
@media(max-width:560px){
  .bn-grid{grid-template-columns:1fr}
  .bn-open{padding-top:30px}
  .bn-open h1{font-size:clamp(34px,12vw,58px)}
  .bn-open__d{font-size:17px}
}

/* --- ПЕРЕМЕННАЯ ПЛОТНОСТЬ: полоса с одним огромным числом ------------ */
.bn-huge{padding-top:54px;padding-bottom:54px;border-top:1px solid #2b3034;
  border-bottom:1px solid #2b3034;margin:30px 0 0}
.bn-huge__n{font-family:'BnHead',sans-serif;font-weight:700;
  font-size:clamp(70px,17vw,230px);line-height:.84;letter-spacing:-.045em;
  color:#ffb02e;margin:0 0 14px}
.bn-huge p{font-size:19px;line-height:1.5;color:#9aa0a6;margin:0;max-width:44ch}

/* --- разделы ---------------------------------------------------------- */
.bn-sec{padding-top:52px;padding-bottom:52px;border-top:1px solid #2b3034}
.bn-sec__h{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin:0 0 10px}
.bn-sec__n{font:600 12px/1 'BnText',monospace;color:#5ec8c0;flex:none}
.bn-sec h2{font-family:'BnHead',sans-serif;font-weight:700;
  font-size:clamp(26px,4vw,46px);line-height:1;letter-spacing:-.028em;
  color:#f2efe9;margin:0;max-width:20ch}
.bn-sec h2 a{color:#f2efe9;text-decoration:none}
.bn-sec h2 a:hover{color:#ffb02e}
.bn-sec__d{font-size:17px;line-height:1.56;color:#9aa0a6;margin:0 0 26px;max-width:56ch}

.bn-list{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 28px}
.bn-list li{border-top:1px solid #2b3034}
.bn-list a{display:flex;gap:13px;padding:12px 0;text-decoration:none;
  color:#f2efe9;font-size:16.5px;line-height:1.42;align-items:baseline;
  transition:padding-left .18s ease,color .18s ease}
.bn-list a::before{content:attr(data-n);font:600 11px/1.6 'BnText',monospace;
  color:#9aa0a6;flex:none;min-width:24px}
.bn-list a:hover{padding-left:10px;color:#ffb02e}

/* --- итог: инверсия --------------------------------------------------- */
.bn-end{background:#ffb02e;color:#0f1113;padding-top:58px;padding-bottom:58px}
.bn-end .bn-kicker{color:#0f1113;opacity:.68}
.bn-end h2{font-family:'BnHead',sans-serif;font-weight:700;
  font-size:clamp(30px,6vw,74px);line-height:.95;letter-spacing:-.03em;
  margin:0 0 20px;max-width:17ch}
.bn-end p{font-size:18.5px;line-height:1.52;margin:0 0 28px;max-width:54ch;font-weight:500}
.bn-end__l{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 26px}
.bn-end__l li{border-top:1px solid rgba(15,17,19,.28)}
.bn-end__l a{display:block;padding:13px 0;color:#0f1113;text-decoration:none;
  font:600 16px/1.44 'BnText',sans-serif;transition:padding-left .18s ease}
.bn-end__l a:hover{padding-left:9px}

/* --- страница материала ------------------------------------------------ */
.bn-doc{padding-top:40px;padding-bottom:70px}
.bn-crumb{font:600 11px/1 'BnText',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:#9aa0a6;margin:0 0 22px}
.bn-crumb a{color:#9aa0a6;text-decoration:none}
.bn-crumb a:hover{color:#ffb02e}
.bn-h1{font-family:'BnHead',sans-serif;font-weight:700;
  font-size:clamp(32px,6vw,62px);line-height:.98;letter-spacing:-.03em;
  color:#f2efe9;margin:0 0 20px;max-width:18ch}
.bn-lede{font-size:19.5px;line-height:1.54;color:#9aa0a6;margin:0 0 22px;max-width:46ch}
.bn-meta{font:600 11px/1 'BnText',sans-serif;letter-spacing:.18em;text-transform:uppercase;
  color:#5ec8c0;margin:0 0 34px;padding-bottom:20px;border-bottom:1px solid #2b3034}

.bn-body p{margin:0 0 21px;max-width:38em}
.bn-body h2{font-family:'BnHead',sans-serif;font-weight:700;
  font-size:clamp(21px,2.6vw,30px);line-height:1.08;letter-spacing:-.02em;
  color:#f2efe9;margin:40px 0 14px;max-width:24ch}
.bn-body h2::before{content:"";display:block;width:34px;height:3px;
  background:#ffb02e;margin:0 0 12px}
.bn-body h3{font-size:18.5px;font-weight:700;color:#f2efe9;margin:26px 0 10px}
.bn-body ul,.bn-body ol{margin:0 0 21px;padding-left:24px;max-width:38em}
.bn-body li{margin:0 0 10px}
.bn-body strong{font-weight:700;color:#fff}
.bn-body em{font-style:italic}
.bn-body blockquote{margin:0 0 21px;padding:16px 20px;background:#171a1d;
  border-left:3px solid #5ec8c0;max-width:38em}
.bn-body code{font-family:ui-monospace,monospace;font-size:.87em;background:#171a1d;
  border:1px solid #2b3034;padding:1px 5px}
.bn-body hr{border:0;border-top:1px solid #2b3034;margin:32px 0}

.bn-next{margin:50px 0 0;padding-top:22px;border-top:1px solid #2b3034}
.bn-next__t{font:600 11px/1 'BnText',sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:#5ec8c0;margin:0 0 14px}
.bn-next ul{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0 26px}
.bn-next li{border-top:1px solid #2b3034}
.bn-next li a{display:block;padding:12px 0;color:#f2efe9;text-decoration:none;
  font-size:16.5px;transition:padding-left .18s ease,color .18s ease}
.bn-next li a:hover{padding-left:9px;color:#ffb02e}

/* --- страница раздела --------------------------------------------------- */
.bn-hub{padding-top:40px;padding-bottom:62px}
.bn-hub__row{border-top:1px solid #2b3034;padding:18px 0;
  transition:padding-left .18s ease}
.bn-hub__row:hover{padding-left:9px}
.bn-hub__row h2{font-size:19px;font-weight:700;margin:0 0 7px;line-height:1.3}
.bn-hub__row h2 a{color:#f2efe9;text-decoration:none}
.bn-hub__row:hover h2 a{color:#ffb02e}
.bn-hub__row p{font-size:16px;line-height:1.54;color:#9aa0a6;margin:0;max-width:62ch}

/* --- подвал -------------------------------------------------------------- */
.bn-foot{border-top:1px solid #2b3034;padding-top:48px;padding-bottom:40px}
.bn-foot__g{display:grid;grid-template-columns:1.3fr repeat(auto-fit,minmax(150px,1fr));gap:30px}
.bn-foot__t{font:600 11px/1 'BnText',sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:#ffb02e;margin:0 0 13px}
.bn-foot ul{list-style:none;margin:0;padding:0}
.bn-foot li{margin:0 0 8px}
.bn-foot li a{color:#9aa0a6;text-decoration:none;font-size:15.5px}
.bn-foot li a:hover{color:#ffb02e}
.bn-foot__about{color:#9aa0a6;font-size:15.5px;line-height:1.56;margin:0;max-width:34ch}
.bn-foot__note{font:400 12.5px/1.6 'BnText',sans-serif;color:#9aa0a6;margin:34px 0 0;
  padding-top:20px;border-top:1px solid #2b3034;max-width:86ch}


/* --- comparison guides -------------------------------------------- */
.oc-guide-body{max-width:100%}
.oc-guide-body>p,.oc-guide-body>h2,.oc-guide-body>h3,.oc-guide-body>ul{max-width:42em}
.oc-table-wrap{overflow-x:auto;margin:28px 0 42px;border:1px solid #e4e4e0;border-radius:12px;background:#fff}
.oc-table{width:100%;min-width:720px;border-collapse:collapse;font-size:14px;line-height:1.45}
.oc-table th,.oc-table td{padding:13px 14px;border-bottom:1px solid #e4e4e0;text-align:left;vertical-align:top}
.oc-table th{background:#0f1115;color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.oc-table tr:last-child td{border-bottom:0}
.oc-table td:first-child{width:38px;text-align:center;font-weight:700;color:#166534}
.oc-table td:nth-child(2){min-width:130px;font-weight:700;color:#0f1115}
.oc-tool{margin:48px 0 0;padding:30px;border:1px solid #e4e4e0;border-radius:14px;background:#fff}
.oc-tool h2{margin-top:0;max-width:none}
.oc-tool p{max-width:44em}
.oc-tool__link{margin-bottom:24px!important}
.oc-tool__link a{display:inline-block;color:#fff;background:#166534;border-radius:999px;padding:9px 15px;text-decoration:none;font-size:14px;font-weight:700}
.oc-tool__link a:hover{background:#0f1115}
.oc-context{border-left:3px solid #166534;padding-left:18px;color:#3d4450}
.oc-context--source{border-left-color:#9aa09a;font-size:.96em}
.oc-checklist{columns:2;column-gap:34px}
.oc-checklist li{break-inside:avoid}
@media(max-width:800px){.oc-tool{padding:22px 18px}.oc-table{min-width:640px}.oc-checklist{columns:1}}