/* Розділ «Коло звичок: Дихання» на сайті БФ.
   Візуальна система взята з продаючої сторінки трипваера
   (37-Klub-Zvychok/marketing/site/index.html): крем #f5ede2, чорнило #1b1712,
   охра #e0894a, антиква Piazzolla. Свідомо НЕ стиль uactions.com. */

@font-face{font-family:Piazzolla;font-style:normal;font-weight:400 700;font-display:swap;
 src:url(../fonts/piazzolla-400-700-cyrillic.woff2)format('woff2');
 unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Piazzolla;font-style:normal;font-weight:400 700;font-display:swap;
 src:url(../fonts/piazzolla-400-700-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:Piazzolla;font-style:normal;font-weight:400 700;font-display:swap;
 src:url(../fonts/piazzolla-400-700-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:Piazzolla;font-style:normal;font-weight:400 700;font-display:swap;
 src:url(../fonts/piazzolla-400-700-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{
  --k-cream:#f5ede2; --k-ink:#1b1712; --k-ink-soft:#221c16; --k-dim:#4a3a2c;
  --k-muted:#8a7f6b; --k-ochre:#e0894a; --k-ochre-deep:#c8763a; --k-line:#e0d3c0;
  --k-f:Piazzolla,Georgia,'Times New Roman',serif;
}
*,*::before,*::after{box-sizing:border-box}
body.kolo{margin:0;background:var(--k-cream);color:var(--k-ink);
  font:400 18px/1.68 var(--k-f);-webkit-font-smoothing:antialiased}
body.kolo img{max-width:100%;display:block}
body.kolo a{color:inherit}
.k-wrap{width:100%;max-width:880px;margin:0 auto;padding:0 24px}

/* шапка */
.k-top{border-bottom:1px solid var(--k-line);background:rgba(245,237,226,.94);
  position:sticky;top:0;z-index:5;backdrop-filter:blur(6px)}
.k-top__in{display:flex;align-items:center;gap:20px;min-height:66px}
.k-mark{font-weight:700;font-size:20px;text-decoration:none;letter-spacing:.2px}
.k-mark span{color:var(--k-ochre-deep)}
.k-nav{display:flex;gap:18px;margin-left:auto;font-size:16px;flex-wrap:wrap}
.k-nav a{color:var(--k-dim);text-decoration:none}
.k-nav a:hover,.k-nav a[aria-current]{color:var(--k-ink)}
body.kolo .k-back{font-size:14px;color:var(--k-dim);text-decoration:none;border:1px solid var(--k-line);
  border-radius:999px;padding:6px 14px}
body.kolo .k-back:hover{border-color:var(--k-ochre);color:var(--k-ink)}

/* Кнопки описані з префіксом body: інакше правило a{color:inherit}
   вище за специфічністю і фарбує текст кнопки в колір тексту сторінки. */
/* герой */
.k-hero{padding:76px 0 52px}
.k-kicker{color:var(--k-ochre-deep);font-size:14px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;margin:0 0 20px}
.k-hero h1{font-size:clamp(34px,5.6vw,58px);line-height:1.08;font-weight:700;margin:0 0 22px;
  letter-spacing:-.4px}
.k-lead{font-size:20px;line-height:1.6;color:var(--k-dim);max-width:620px;margin:0 0 30px}
.k-price{display:flex;align-items:baseline;gap:12px;margin:0 0 26px;flex-wrap:wrap}
.k-price b{font-size:40px;font-weight:700;line-height:1}
.k-price span{color:var(--k-muted);font-size:16px}
body.kolo .k-cta{display:inline-flex;align-items:center;gap:10px;background:var(--k-ink);color:var(--k-cream);
  font-weight:700;font-size:18px;text-decoration:none;padding:16px 32px;border-radius:4px;
  transition:background .12s ease,transform .12s ease}
body.kolo .k-cta:hover{background:var(--k-ochre-deep);transform:translateY(-1px)}
body.kolo .k-cta--ghost{background:transparent;color:var(--k-ink);border:1px solid var(--k-ink)}
body.kolo .k-cta--ghost:hover{background:var(--k-ink);color:var(--k-cream)}
.k-ctas{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.k-under{color:var(--k-muted);font-size:15px;margin:16px 0 0;max-width:560px}

/* смуга метрик */
.k-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--k-line);
  border:1px solid var(--k-line);margin:44px 0}
.k-metrics div{background:var(--k-cream);padding:22px 18px;text-align:center}
.k-metrics b{display:block;font-size:32px;font-weight:700;line-height:1.1}
.k-metrics span{color:var(--k-muted);font-size:14px}

/* секції */
.k-sec{padding:52px 0;border-top:1px solid var(--k-line)}
.k-sec h2{font-size:clamp(26px,3.6vw,36px);line-height:1.2;font-weight:700;margin:0 0 22px}
.k-sec h3{font-size:20px;font-weight:700;margin:0 0 6px}
.k-sec p{margin:0 0 16px;max-width:660px}
.k-sec p.k-muted{color:var(--k-dim)}
.k-anti{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:24px}
.k-anti div{border-left:2px solid var(--k-ochre);padding-left:18px}
.k-anti b{display:block;font-size:19px;margin-bottom:6px}
.k-anti span{color:var(--k-dim)}
.k-list{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:14px}
.k-list li{padding-left:26px;position:relative;color:var(--k-dim);max-width:660px}
.k-list li::before{content:'';position:absolute;left:0;top:11px;width:10px;height:10px;
  border:1px solid var(--k-ochre-deep);border-radius:50%}
.k-tl{display:grid;gap:0;margin-top:26px;border-top:1px solid var(--k-line)}
.k-tl div{display:grid;grid-template-columns:78px 1fr;gap:18px;padding:18px 0;
  border-bottom:1px solid var(--k-line)}
.k-tl b{color:var(--k-ochre-deep);font-weight:700}
.k-tl i{font-style:normal;display:block;font-weight:700;margin-bottom:4px}
.k-tl span{color:var(--k-dim)}
.k-tech{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:26px}
.k-tech div{background:#fffdf8;border:1px solid var(--k-line);padding:22px}
.k-tech em{font-style:normal;color:var(--k-ochre-deep);font-size:14px;font-weight:700;
  display:block;margin-bottom:8px}
.k-tech span{color:var(--k-dim);display:block;margin-top:6px}
.k-weeks{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:26px}
.k-weeks div{border-top:2px solid var(--k-ochre);padding-top:16px}
.k-weeks em{font-style:normal;color:var(--k-muted);font-size:14px;display:block}
.k-weeks b{display:block;font-size:20px;margin:4px 0 8px}
.k-weeks span{color:var(--k-dim)}

/* прайс і кошти */
.k-buy{background:#fffdf8;border:1px solid var(--k-line);padding:34px;margin-top:30px}
.k-buy ul{list-style:none;padding:0;margin:22px 0 26px;display:grid;gap:12px}
.k-buy li{padding-left:26px;position:relative;color:var(--k-dim)}
.k-buy li::before{content:'·';position:absolute;left:8px;color:var(--k-ochre-deep);font-weight:700}
.k-funds{background:var(--k-ink);color:var(--k-cream);padding:30px 34px;margin-top:30px}
.k-funds h2{color:var(--k-cream);font-size:24px;margin:0 0 14px}
.k-funds p{color:#d9cdbd;max-width:660px;margin:0 0 12px}
.k-funds b{color:var(--k-ochre)}

/* питання */
.k-faq{margin-top:26px;border-top:1px solid var(--k-line)}
.k-faq details{border-bottom:1px solid var(--k-line)}
.k-faq summary{cursor:pointer;padding:18px 0;font-weight:700;font-size:18px;list-style:none}
.k-faq summary::-webkit-details-marker{display:none}
.k-faq summary::after{content:'+';float:right;color:var(--k-ochre-deep);font-weight:700}
.k-faq details[open] summary::after{content:'–'}
.k-faq p{color:var(--k-dim);margin:0 0 18px;max-width:660px}

/* стаття */
.k-art{padding:52px 0 60px}
.k-art h1{font-size:clamp(29px,4.6vw,44px);line-height:1.14;font-weight:700;margin:0 0 16px}
.k-art__meta{color:var(--k-muted);font-size:15px;margin:0 0 30px}
.k-art__body{max-width:660px}
.k-art__body p{margin:0 0 18px}
.k-art__body h2{font-size:25px;font-weight:700;margin:34px 0 12px}
.k-art__body ol,.k-art__body ul{margin:0 0 18px;padding-left:24px}
.k-art__body li{margin-bottom:9px}
.k-art__body a{color:var(--k-ochre-deep)}

/* застереження і підвал */
.k-med{border:1px solid var(--k-line);background:#fffdf8;padding:20px 24px;margin:30px 0 0;
  color:var(--k-dim);font-size:15px;line-height:1.6}
.k-foot{border-top:1px solid var(--k-line);padding:40px 0 52px;color:var(--k-muted);font-size:15px}
.k-foot a{color:var(--k-dim)}
.k-foot a:hover{color:var(--k-ink)}
.k-foot__row{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:18px}
.k-foot__small{font-size:13px;line-height:1.62;max-width:720px}

@media (max-width:700px){
  .k-hero{padding:52px 0 40px}
  .k-sec{padding:42px 0}
  .k-metrics{grid-template-columns:repeat(2,1fr)}
  .k-top__in{min-height:56px;gap:10px;flex-wrap:wrap;padding:10px 0}
  .k-mark{white-space:nowrap;font-size:18px}
  .k-back{margin-left:auto;font-size:13px;padding:5px 12px}
  .k-nav{width:100%;margin-left:0;order:3;gap:16px;font-size:15px}
  .k-buy,.k-funds{padding:24px}
  .k-tl div{grid-template-columns:64px 1fr;gap:12px}
}