/* Розділ партнерського проєкту YouSens на сайті БФ.
   Палітра і шрифт узяті з живої візуальної системи YouSens
   (28-YouSens/INFO-BLOCK.md «Візуальна система»): тло #1b1712, поверхня #26201a,
   акцент #e0894a, текст #f5ede2, шрифт Nunito. Це свідомо НЕ стиль uactions.com. */

@font-face{font-family:Nunito;font-style:normal;font-weight:300 900;font-display:swap;
 src:url(../fonts/nunito-400-900-cyrillic.woff2)format('woff2');
 unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Nunito;font-style:normal;font-weight:300 900;font-display:swap;
 src:url(../fonts/nunito-400-900-cyrillic-ext.woff2)format('woff2');
 unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:Nunito;font-style:normal;font-weight:300 900;font-display:swap;
 src:url(../fonts/nunito-400-900-latin.woff2)format('woff2');
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:Nunito;font-style:normal;font-weight:300 900;font-display:swap;
 src:url(../fonts/nunito-400-900-latin-ext.woff2)format('woff2');
 unicode-range:U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ys-bg:#1b1712; --ys-surface:#26201a; --ys-accent:#e0894a; --ys-accent-2:#c8763a;
  --ys-text:#f5ede2; --ys-muted:#a89b8c; --ys-line:#3a3025; --ys-ok:#7fa65c;
  --ys-f:Nunito,'Helvetica Neue',Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body.ys{margin:0;background:var(--ys-bg);color:var(--ys-text);
  font:400 17px/1.62 var(--ys-f);-webkit-font-smoothing:antialiased}
body.ys img{max-width:100%;display:block}
body.ys a{color:inherit}
.ys-wrap{width:100%;max-width:920px;margin:0 auto;padding:0 24px}

/* шапка розділу */
.ys-top{border-bottom:1px solid var(--ys-line);background:rgba(27,23,18,.92);
  position:sticky;top:0;z-index:5;backdrop-filter:blur(6px)}
.ys-top__in{display:flex;align-items:center;gap:20px;min-height:64px}
.ys-mark{font-weight:800;font-size:20px;letter-spacing:.2px;text-decoration:none}
.ys-mark span{color:var(--ys-accent)}
.ys-nav{display:flex;gap:18px;margin-left:auto;font-size:15px;flex-wrap:wrap}
.ys-nav a{color:var(--ys-muted);text-decoration:none}
.ys-nav a:hover,.ys-nav a[aria-current]{color:var(--ys-text)}
body.ys .ys-back{font-size:14px;color:var(--ys-muted);text-decoration:none;border:1px solid var(--ys-line);
  border-radius:999px;padding:6px 14px}
body.ys .ys-back:hover{border-color:var(--ys-accent);color:var(--ys-text)}

/* Кнопки описані з префіксом body: інакше правило a{color:inherit}
   вище за специфічністю і фарбує текст кнопки в колір тексту сторінки. */
/* герой */
.ys-hero{padding:72px 0 56px}
.ys-kicker{color:var(--ys-accent);font-size:14px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;margin:0 0 18px}
.ys-hero h1{font-size:clamp(32px,5.4vw,56px);line-height:1.1;font-weight:800;margin:0 0 20px;
  letter-spacing:-.5px}
.ys-hero h1 em{font-style:normal;color:var(--ys-accent);display:block}
.ys-lead{font-size:19px;line-height:1.6;color:var(--ys-muted);max-width:640px;margin:0 0 30px}
body.ys .ys-cta{display:inline-flex;align-items:center;gap:10px;background:var(--ys-accent);
  color:#1b1712;font-weight:800;font-size:17px;text-decoration:none;
  padding:15px 30px;border-radius:14px;transition:transform .12s ease,background .12s ease}
body.ys .ys-cta:hover{background:var(--ys-accent-2);transform:translateY(-1px)}
body.ys .ys-cta--ghost{background:transparent;color:var(--ys-text);border:1px solid var(--ys-line)}
body.ys .ys-cta--ghost:hover{background:var(--ys-surface);border-color:var(--ys-accent)}
.ys-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.ys-badges{display:flex;gap:22px;flex-wrap:wrap;margin:28px 0 0;padding:0;list-style:none;
  color:var(--ys-muted);font-size:15px}
.ys-badges li::before{content:'· ';color:var(--ys-accent)}

/* блоки */
.ys-sec{padding:56px 0;border-top:1px solid var(--ys-line)}
.ys-sec__k{color:var(--ys-accent);font-size:13px;font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;margin:0 0 12px}
.ys-sec h2{font-size:clamp(25px,3.4vw,34px);line-height:1.22;font-weight:800;margin:0 0 22px}
.ys-sec h3{font-size:20px;font-weight:800;margin:0 0 8px}
.ys-sec p{margin:0 0 16px;max-width:680px}
.ys-sec p.ys-muted{color:var(--ys-muted)}
.ys-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:26px}
.ys-card{background:var(--ys-surface);border:1px solid var(--ys-line);border-radius:16px;padding:24px}
.ys-card p{color:var(--ys-muted);margin:0}
.ys-num{color:var(--ys-accent);font-weight:800;font-size:14px;letter-spacing:1px;margin:0 0 10px}
.ys-steps{counter-reset:s;list-style:none;padding:0;margin:26px 0 0;display:grid;gap:16px}
.ys-steps li{counter-increment:s;background:var(--ys-surface);border:1px solid var(--ys-line);
  border-radius:16px;padding:22px 24px 22px 66px;position:relative}
.ys-steps li::before{content:counter(s);position:absolute;left:24px;top:22px;
  color:var(--ys-accent);font-weight:800;font-size:20px}
.ys-steps b{display:block;font-size:18px;margin-bottom:6px}
.ys-steps span{color:var(--ys-muted)}
.ys-quote{background:var(--ys-surface);border:1px solid var(--ys-line);border-left:3px solid var(--ys-accent);
  border-radius:0 16px 16px 0;padding:24px 26px;margin:26px 0;color:var(--ys-muted)}
.ys-note{background:var(--ys-surface);border:1px solid var(--ys-line);border-radius:16px;
  padding:20px 24px;color:var(--ys-muted);font-size:15px;margin:26px 0 0}
.ys-note b{color:var(--ys-text)}

/* стаття */
.ys-art{padding:52px 0 60px}
.ys-art h1{font-size:clamp(28px,4.4vw,42px);line-height:1.16;font-weight:800;margin:0 0 18px}
.ys-art__meta{color:var(--ys-muted);font-size:15px;margin:0 0 30px}
.ys-art__body{max-width:680px}
.ys-art__body p{margin:0 0 18px}
.ys-art__body h2{font-size:24px;font-weight:800;margin:34px 0 12px}
.ys-art__body ul,.ys-art__body ol{margin:0 0 18px;padding-left:24px;color:var(--ys-text)}
.ys-art__body li{margin-bottom:8px}
.ys-art__body a{color:var(--ys-accent)}

/* підвал */
.ys-foot{border-top:1px solid var(--ys-line);padding:40px 0 52px;color:var(--ys-muted);font-size:15px}
.ys-foot a{color:var(--ys-muted)}
.ys-foot a:hover{color:var(--ys-text)}
.ys-foot__row{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:18px}
.ys-foot__small{font-size:13px;line-height:1.6;max-width:720px}

@media (max-width:640px){
  .ys-hero{padding:48px 0 40px}
  .ys-sec{padding:44px 0}
  .ys-top__in{min-height:54px;gap:10px;flex-wrap:wrap;padding:10px 0}
  .ys-mark{white-space:nowrap;font-size:19px}
  .ys-back{margin-left:auto;font-size:13px;padding:5px 12px}
  .ys-nav{width:100%;margin-left:0;order:3;gap:16px;font-size:14px}
}