/* публичный сайт «Умной полки»: та же система, что в кабинете (app.css),
   но с текстовой шириной: страницы здесь читают, а не работают. */

:root{
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f9fafb;
  --text:#111827; --text-2:#6b7280; --text-3:#9ca3af;
  --line:#e3e6ea; --line-2:#eef0f3;
  --blue:#2563eb; --blue-d:#1d4ed8; --blue-t:rgba(37,99,235,.08);
  --green:#15803d; --green-t:#ecfdf3;
  --r:8px;
  --w:1120px; --w-text:720px;
}
*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-size:16px;
  line-height:1.6; color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:4px}
a{color:var(--blue)}
b,strong{font-weight:600}

/* шапка */
header.top{border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface);
  z-index:20}
.hrow{max-width:var(--w); margin:0 auto; padding:0 24px; height:56px; display:flex;
  align-items:center; gap:32px}
.brand{font-size:16px; font-weight:600; color:var(--text); text-decoration:none;
  letter-spacing:-.01em; white-space:nowrap}
nav.main{display:flex; gap:24px; margin-left:auto; height:56px}
nav.main a{color:var(--text-2); text-decoration:none; font-size:14px; display:flex;
  align-items:center; position:relative; white-space:nowrap}
nav.main a:hover{color:var(--text)}
nav.main a.on{color:var(--text); font-weight:500}
nav.main a.on::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:var(--blue)}
.hrow .btn{flex:none}

/* страница */
main{flex:1}
.page{max-width:var(--w-text); margin:0 auto; padding:48px 24px 64px}
h1{font-size:28px; font-weight:600; letter-spacing:-.02em; line-height:1.2; margin-bottom:16px}
h2{font-size:20px; font-weight:600; letter-spacing:-.01em; line-height:1.3; margin:36px 0 12px}
h3{font-size:16px; font-weight:600; margin:24px 0 8px}
p{margin:0 0 14px}
ol,ul{margin:0 0 14px 22px}
li{margin-bottom:6px}
.doc p{color:var(--text)}
.doc .muted,.muted{color:var(--text-2)}
.small{font-size:14px; color:var(--text-2)}
hr{border:0; border-top:1px solid var(--line); margin:32px 0}

/* кнопки */
.btn{appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:36px; padding:0 14px; border-radius:var(--r); border:1px solid var(--blue);
  background:var(--blue); color:#fff; font:inherit; font-size:14px; font-weight:500;
  text-decoration:none; cursor:pointer; white-space:nowrap}
.btn:hover{background:var(--blue-d); border-color:var(--blue-d)}
.btn.sec{background:var(--surface); color:var(--text); border-color:var(--line)}
.btn.sec:hover{background:var(--surface-2); border-color:#cfd4da}
.btn.lg{height:44px; padding:0 22px; font-size:16px}
.cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:24px 0 8px}
.cta .small{flex-basis:100%}

/* формула и выделения */
.formula{border-left:3px solid var(--blue); padding:8px 0 8px 18px; margin:16px 0 20px;
  font-size:17px; line-height:1.55}
.formula b{font-weight:600}
.formula .eq{display:block}
.example{border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2);
  padding:16px 20px; margin:16px 0 20px}
.example p:last-child{margin-bottom:0}

/* контакты */
.contacts{list-style:none; margin:16px 0 24px; padding:0}
.contacts li{display:grid; grid-template-columns:160px 1fr; gap:12px; padding:12px 0;
  border-bottom:1px solid var(--line-2); margin:0}
.contacts li span:first-child{color:var(--text-2)}
.contacts li:last-child{border-bottom:0}

/* подвал */
footer{border-top:1px solid var(--line); margin-top:auto}
.frow{max-width:var(--w); margin:0 auto; padding:20px 24px; display:flex; gap:24px;
  align-items:center; flex-wrap:wrap; font-size:13px; color:var(--text-2)}
.frow a{color:var(--text-2); text-decoration:none}
.frow a:hover{color:var(--text)}
.frow .sp{flex:1}

@media(max-width:720px){
  .hrow{padding:0 16px; gap:16px; height:52px}
  nav.main{gap:16px; height:52px}
  nav.main a{font-size:13px}
  .page{padding:32px 16px 48px}
  h1{font-size:24px}
  h2{font-size:18px}
  .contacts li{grid-template-columns:1fr; gap:2px}
  .frow{gap:12px 20px}
}
@media(max-width:480px){
  .hrow .btn{display:none}
  nav.main{gap:12px}
}