/* guides.css — раздел /guides/ (28.09). Токены и шрифты — как у /seo и /scan: тёмная тема по умолчанию,
 * светлая по системе или по кнопке (localStorage roan-theme). Страницы собирает server/tools/make-guides.js. */
:root{
  --f-head:'Space Grotesk',system-ui,sans-serif;--f-text:'Inter',system-ui,sans-serif;--f-mono:'JetBrains Mono',ui-monospace,monospace;
  --bg:#0B0C0E;--surface:#121417;--line:#23262B;--text:#F0EFEC;--muted:#8A919B;--accent:#5B8CFF;--accent-tx:#7FA4FF;--on-accent:#0B0C0E;
  --code-bg:#15181C;--max:1200px;--read:680px;--m:32px;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){--bg:#F7F7F5;--surface:#FFFFFF;--line:#E3E3DF;--text:#14161A;--muted:#5C6168;--accent-tx:#2F5BE0;--on-accent:#FFFFFF;--code-bg:#EFEFEB;color-scheme:light}
}
:root[data-theme="light"]{--bg:#F7F7F5;--surface:#FFFFFF;--line:#E3E3DF;--text:#14161A;--muted:#5C6168;--accent-tx:#2F5BE0;--on-accent:#FFFFFF;--code-bg:#EFEFEB;color-scheme:light}
@media (max-width:720px){:root{--m:16px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.65 var(--f-text);-webkit-font-smoothing:antialiased}
a{color:var(--accent-tx);text-underline-offset:3px}
.wrap{max-width:calc(var(--max) + var(--m) * 2);margin:0 auto;padding:0 var(--m)}

.nav{border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:64px}
.logo{display:inline-flex;white-space:nowrap;flex:none;align-items:center;gap:10px;font:700 17px/1 var(--f-head);letter-spacing:-.01em;color:var(--text);text-decoration:none}
.logo i{width:10px;height:10px;border-radius:3px;background:var(--accent)}
.nav nav{margin-left:auto;display:flex;gap:20px;font-size:14px}
.nav nav a{color:var(--muted);text-decoration:none}
.nav nav a:hover,.nav nav a[aria-current]{color:var(--text)}
/* Кнопка темы — как на /salesteam, /seo и /scan (решение Петра 01.10: переключатели единые на всех сайтах): 48 px, угол 4 px, иконка 20 px. */
.theme{background:transparent;border:1px solid var(--line);color:var(--text);border-radius:4px;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;transition:border-color .2s}
.theme:hover{border-color:var(--text)}
.theme svg{width:20px;height:20px}.theme .sun{display:none}
@media (max-width:720px){.theme{width:40px;height:40px}}
@media (max-width:400px){.theme{width:36px}}
:root[data-theme="light"] .theme .sun{display:block}:root[data-theme="light"] .theme .moon{display:none}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--on-accent);font:600 15px/1 var(--f-text);padding:14px 20px;border-radius:8px;text-decoration:none;white-space:nowrap}
.btn:hover{filter:brightness(1.08)}
@media (max-width:720px){.nav nav{display:none}.nav .btn{margin-left:auto;padding:11px 14px;font-size:14px}}

.crumbs{font:500 12px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:40px}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--text)}
.art{max-width:var(--read);margin:0 auto;padding:0 0 96px}
.art h1{font:700 clamp(34px,5vw,52px)/1.06 var(--f-head);letter-spacing:-.03em;margin:16px 0 20px}
.meta{font:400 13px/1.5 var(--f-mono);color:var(--muted);margin-bottom:32px}
.answer{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;padding:20px 24px;margin:0 0 40px}
.answer b{display:block;font:500 11px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-tx);margin-bottom:8px}
.answer p{margin:0}
.art h2{font:700 28px/1.2 var(--f-head);letter-spacing:-.02em;margin:48px 0 12px}
.art h3{font:600 19px/1.3 var(--f-head);margin:32px 0 8px}
.art p,.art ul,.art ol{margin:0 0 18px}
.art li{margin:0 0 8px}
.art pre{background:var(--code-bg);border:1px solid var(--line);border-radius:8px;padding:16px;overflow-x:auto;font:13px/1.55 var(--f-mono);margin:0 0 20px}
.art code{font:0.9em var(--f-mono);background:var(--code-bg);padding:1px 5px;border-radius:4px}
.art pre code{background:none;padding:0}
.art table{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 20px;display:block;overflow-x:auto}
.art th,.art td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:top}
.art th{font:500 12px/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cta{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:28px;margin:48px 0}
.cta h2{margin:0 0 8px;font-size:24px}
.cta p{color:var(--muted);margin:0 0 20px}
.faq details{border-top:1px solid var(--line);padding:16px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{font:600 17px/1.4 var(--f-head);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--muted);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:10px 0 0;color:var(--muted)}
.related{margin-top:48px}
.related ul{list-style:none;padding:0}
.related li{border-top:1px solid var(--line);padding:12px 0;margin:0}

.hub h1{font:700 clamp(36px,6vw,64px)/1.02 var(--f-head);letter-spacing:-.04em;margin:16px 0 16px;max-width:16ch}
.hub .lead{color:var(--muted);max-width:40em;margin:0 0 48px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;padding-bottom:96px}
.card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:24px;color:var(--text);text-decoration:none}
.card:hover{border-color:var(--accent)}
.card .k{font:500 11px/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-tx)}
.card h2{font:600 20px/1.3 var(--f-head);margin:10px 0 8px}
.card p{margin:0;color:var(--muted);font-size:15px}

.foot{border-top:1px solid var(--line);padding:40px 0 64px;font-size:14px;color:var(--muted)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.foot a{color:var(--muted)}
.foot .legal{flex-basis:100%;font-size:12px;margin:8px 0 0}
.foot .soc{display:inline-flex;gap:16px;align-items:center}.foot .soc a{color:var(--muted)}.foot .soc a:hover{color:var(--text)}
.foot a{text-decoration:none}
.cta.alt{background:transparent;margin-top:-32px}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}.btn.ghost:hover{border-color:var(--accent);filter:none}