/* Блог VidKeep — teal-палитра продукта + приёмы верстки статьи (карточки,
   callout, шаги, таблицы, FAQ). Светлая и тёмная темы. Читабельность и
   короткие абзацы — против отказов (поведенческие факторы). */
:root{
  --bg:#f7faf9; --panel:#ffffff; --ink:#0f1e1c; --ink-soft:#4a5b58;
  --line:#e2ece9; --accent:#0F766E; --accent-2:#2DD4BF; --accent-soft:#e3f4f1;
  --good:#0f766e; --good-bg:#e3f4f1; --warn:#a16207; --warn-bg:#faf3e0;
  --bad:#b91c1c; --bad-bg:#fbe9e9; --track:#e8f1ef;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#0c1615; --panel:#12201e; --ink:#e8f2f0; --ink-soft:#9fb4b0;
    --line:#1f3230; --accent:#2DD4BF; --accent-2:#5eead4; --accent-soft:#123029;
    --good:#2DD4BF; --good-bg:#123029; --warn:#d9a441; --warn-bg:#2a2413;
    --bad:#f08a8a; --bad-bg:#301a1a; --track:#1a2b29; }
}
:root[data-theme="light"]{ --bg:#f7faf9; --panel:#fff; --ink:#0f1e1c; --ink-soft:#4a5b58; --line:#e2ece9; --accent:#0F766E; --accent-soft:#e3f4f1; --track:#e8f1ef; }
:root[data-theme="dark"]{ --bg:#0c1615; --panel:#12201e; --ink:#e8f2f0; --ink-soft:#9fb4b0; --line:#1f3230; --accent:#2DD4BF; --accent-soft:#123029; --track:#1a2b29; }

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.65;font-size:18px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:clamp(1.9rem,4.6vw,2.7rem);line-height:1.12;letter-spacing:-.01em;text-wrap:balance;margin:.2em 0 .3em;font-weight:800}
h2{font-size:clamp(1.35rem,3vw,1.75rem);line-height:1.2;margin:1.8em 0 .5em;font-weight:750;letter-spacing:-.01em}
h3{font-size:1.15rem;margin:1.4em 0 .35em;font-weight:700}
p{margin:0 0 1.05em}
.eyebrow{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:800;margin:1.4em 0 .3em}

.site-head{border-bottom:1px solid var(--line);background:var(--panel)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;max-width:960px;padding:14px 20px}
.brand{font-weight:800;font-size:1.15rem;color:var(--ink)}
.site-head nav a{margin-left:18px;color:var(--ink-soft);font-size:.95rem}

.article{padding:28px 20px 10px}
.crumbs{font-size:.82rem;color:var(--ink-soft);margin:4px 0 10px}
.crumbs a{color:var(--ink-soft)}
.meta-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;color:var(--ink-soft);font-size:.9rem;margin:8px 0 22px}
.author{display:flex;align-items:center;gap:9px}
.avatar{border-radius:50%;object-fit:cover;border:1px solid var(--line)}
.a-name{font-weight:700;color:var(--ink);display:block;line-height:1.1}
.a-role{font-size:.82rem}
.dot{opacity:.5}
.updated{color:var(--accent)}
figure.hero{margin:0 0 24px}
figure.hero img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line)}
.intro{font-size:1.14rem;color:var(--ink);border-left:3px solid var(--accent);padding-left:16px;margin:0 0 8px}
.intro p:last-child{margin-bottom:0}

.body-sec{margin-top:6px}
.body-sec p,.intro p{max-width:68ch}
ol.steps{counter-reset:s;list-style:none;padding:0;margin:14px 0}
ol.steps li{counter-increment:s;position:relative;padding:12px 0 12px 46px;border-bottom:1px solid var(--line)}
ol.steps li:last-child{border-bottom:0}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:11px;width:30px;height:30px;border-radius:50%;
  background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.9rem}
ul.clean{list-style:none;padding:0;margin:12px 0}
ul.clean li{padding:8px 0 8px 26px;position:relative;border-bottom:1px solid var(--line)}
ul.clean li:last-child{border-bottom:0}
ul.clean li::before{content:"→";position:absolute;left:0;color:var(--accent);font-weight:700}
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.95rem;display:block;overflow-x:auto}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:.76rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);font-weight:800}
.callout{border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:0 12px 12px 0;padding:14px 18px;margin:18px 0}
.callout.warn{border-color:var(--warn);background:var(--warn-bg)}
.callout p:last-child{margin-bottom:0}
figure.shot{margin:20px 0}
figure.shot img{width:100%;height:auto;border-radius:12px;border:1px solid var(--line)}
figure.shot figcaption{font-size:.85rem;color:var(--ink-soft);margin-top:8px;text-align:center}
.unique{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:6px 22px 18px;margin:24px 0}
.unique h2{margin-top:.7em}

.faq{margin-top:30px}
.faq-item{border:1px solid var(--line);border-radius:12px;margin:10px 0;background:var(--panel)}
.faq-item summary{cursor:pointer;padding:14px 18px;font-weight:700;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";float:right;color:var(--accent);font-weight:700}
.faq-item[open] summary::after{content:"–"}
.faq-a{padding:0 18px 14px;color:var(--ink-soft)}

.cta-box{background:var(--accent);color:#fff;border-radius:16px;padding:22px 24px;margin:30px 0;text-align:center}
.cta-box strong{font-size:1.2rem;display:block;margin-bottom:4px}
.cta-box p{color:#e7fbf7;margin:0 0 14px}
.cta-btn{display:inline-block;background:#fff;color:var(--accent);font-weight:700;padding:11px 22px;border-radius:10px}
.updated-foot{font-size:.85rem;color:var(--ink-soft);border-top:1px solid var(--line);padding-top:16px;margin-top:26px}

.related{margin:30px 0}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:640px){.rel-grid{grid-template-columns:1fr}}
.rel-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel);color:var(--ink);display:flex;flex-direction:column}
.rel-card img{width:100%;height:120px;object-fit:cover}
.rel-card span{padding:10px 12px;font-weight:600;font-size:.92rem}

/* индекс блога */
.blog-index{padding:34px 20px;max-width:1000px}
.index-lede{font-size:1.15rem;color:var(--ink-soft);max-width:60ch}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
@media(max-width:900px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.post-grid{grid-template-columns:1fr}}
.post-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);color:var(--ink);display:flex;flex-direction:column}
.post-card img{width:100%;height:150px;object-fit:cover}
.pc-cat{color:var(--accent);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;padding:12px 14px 0}
.pc-title{font-weight:750;font-size:1.05rem;padding:4px 14px}
.pc-desc{color:var(--ink-soft);font-size:.9rem;padding:0 14px 14px}

.site-foot{border-top:1px solid var(--line);margin-top:40px;background:var(--panel)}
.site-foot .wrap{max-width:960px;padding:24px 20px;color:var(--ink-soft);font-size:.88rem}