/* Общий слой страниц-гайдов: каркас, типографика, шапка с навигацией.
   Раньше эти 50 правил были скопированы в каждый из пяти гайдов —
   правка цвета кнопки означала пять правок, и одну обязательно забывали.
   Продуктовые акценты остаются в самих страницах: отличается только цвет. */

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Manrope',-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.55; font-size:15px;
  -webkit-font-smoothing:antialiased;
  transition:background .3s,color .3s;
}
h1,h2,h3,.display{font-family:'Unbounded','Manrope',sans-serif; line-height:1.15; font-weight:600;}
.mono,.num{font-family:'JetBrains Mono',ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums;}
a{color:var(--accent); text-decoration:none;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}
/* ---- ШАПКА (единая с общим брендбуком) ---- */
.controls{
  position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;gap:12px;align-items:center;
  justify-content:space-between;padding:14px 24px;background:var(--surface);
  border-bottom:1px solid var(--border);transition:background .3s;
}
.controls .brand{font-family:'Unbounded';font-weight:600;font-size:15px;letter-spacing:.02em;}
.brand .z{color:var(--accent);transition:color .3s;}
.ctrl-group{display:flex;gap:8px;flex-wrap:wrap;}
.ctrl-btn{
  font-family:'Manrope';font-weight:600;font-size:13px;padding:7px 14px;border-radius:999px;
  border:1px solid var(--border-strong);background:transparent;color:var(--ink-2);cursor:pointer;
  transition:all .2s;
}
.ctrl-btn:hover{border-color:var(--accent);color:var(--ink);}
.ctrl-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;}
[data-theme="dark"] .ctrl-btn.active{color:#101114;}
[data-theme="gray"] .ctrl-btn.active{color:#1E1F22;}
.ctrl-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.ctrl-btn.export{background:var(--accent-tint);border-color:transparent;color:var(--accent-deep);text-decoration:none;}
[data-theme="dark"] .ctrl-btn.export{color:var(--accent);}
.nav-group{padding:3px;background:var(--surface-2);border-radius:999px;gap:2px;}
.nav-btn{text-decoration:none;border:none;background:transparent;font-weight:700;}
.nav-btn:hover{background:var(--surface);color:var(--ink);}
.nav-btn.on{background:var(--accent);color:#fff;}
[data-theme="dark"] .nav-btn.on{color:#101114;}
[data-theme="gray"] .nav-btn.on{color:#1E1F22;}
/* ---- заголовок страницы ---- */
.pagehead{padding:40px 0 8px;}
.eyebrow{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-deep); background:var(--accent-tint); display:inline-block; padding:4px 11px; border-radius:999px;}
.pagehead h1{font-size:clamp(34px,6vw,58px); font-weight:700; letter-spacing:-.01em; margin:14px 0 10px; text-wrap:balance;}
.pagehead h1 .z{color:var(--accent);}
.pagehead p{color:var(--ink-2); max-width:640px;}
.section{padding:32px 0;}
.section > h2{font-size:20px; margin-bottom:4px;}
.section > .sub{color:var(--ink-2); font-size:14px; margin-bottom:20px;}
.card-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px;}
.card-head h3{font-size:15px;}
.btn-primary{background:var(--accent); color:var(--on-accent);}
.btn-primary:hover{background:var(--accent-hover);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--border);}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent);}
.btn-tint{background:var(--accent-tint); color:var(--accent-deep);}
/* ---- правила do/don't ---- */
.rules{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.rule{display:flex; gap:12px; padding:14px 16px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface);}
.rule .m{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-weight:800; flex:none; font-size:13px;}
.rule.ok .m{background:var(--good-tint); color:var(--good);}
.rule.no .m{background:var(--bad-tint); color:var(--bad);}
.rule p{font-size:13.5px; color:var(--ink);}
.foot{padding:40px 0 60px; color:var(--ink-3); font-size:13px; border-top:1px solid var(--border); margin-top:24px;}
.foot a{color:var(--accent);}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}