/* Общие стили новых страниц. Токены взяты из index.html, чтобы страницы
   выглядели одним сайтом, а не приклеенными друг к другу. */
:root{
  --ink:#0d1b2a; --ink2:#16283d; --line:#20374f;
  --paper:#f7f4ee; --paper2:#ffffff; --muted:#5b6b7c; --muted2:#8698a8;
  --accent:#c8963e; --accent-soft:#f0e2c6; --warn:#b3402f; --ok:#2f6b4f;
  --serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:820px;margin:0 auto;padding:0 20px 80px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.2;margin:0}
a{color:var(--accent)}

header{background:var(--ink);color:#eef3f7;padding:44px 0 40px;margin-bottom:36px}
header .wrap{padding-bottom:0}
.kicker{margin:0 0 14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent)}
header h1{font-size:clamp(25px,4.4vw,38px);margin-bottom:14px;max-width:22ch}
header p{color:#b9c8d6;margin:0;max-width:62ch}

section{margin:0 0 40px}
section h2{font-size:clamp(20px,3vw,26px);margin-bottom:12px}
section h3{font-size:17px;margin-bottom:7px}
.lead{color:var(--muted);max-width:64ch}

.frame{background:var(--paper2);border:1px solid #e3dcd0;border-radius:14px;padding:24px 26px}

ul.plain{list-style:none;margin:14px 0 0;padding:0}
ul.plain li{position:relative;padding-left:22px;margin-bottom:12px;color:var(--muted)}
ul.plain li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;
  border-radius:50%;background:var(--accent)}
ul.plain li b{color:var(--ink)}

ol.steps{counter-reset:s;list-style:none;margin:16px 0 0;padding:0}
ol.steps li{counter-increment:s;position:relative;padding-left:44px;margin-bottom:16px;
  color:var(--muted)}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:-2px;width:28px;height:28px;
  border-radius:50%;background:var(--accent-soft);color:var(--ink);
  font:700 14px/28px var(--serif);text-align:center}
ol.steps li b{color:var(--ink)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:16px}
.card{background:var(--paper2);border:1px solid #e3dcd0;border-radius:14px;padding:18px 20px}
.card p{margin:0;color:var(--muted);font-size:15px}

.form{display:grid;gap:12px;margin-top:16px;max-width:560px}
.form label{display:grid;gap:5px;font-size:13px;font-weight:600;color:var(--muted)}
.form input,.form textarea{padding:11px 13px;border:1px solid #d9d1c3;border-radius:9px;
  font:inherit;font-size:15px;background:var(--paper2);color:var(--ink)}
.form input:focus,.form textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
.btn{padding:12px 22px;border:0;border-radius:9px;background:var(--ink);color:#fff;
  font:inherit;font-weight:600;cursor:pointer;width:max-content}
.btn:hover{background:var(--ink2)}
.ok{color:var(--ok)} .err{color:var(--warn)} .muted{color:var(--muted)}

footer{margin-top:48px;padding-top:22px;border-top:1px solid #e3dcd0;
  color:var(--muted2);font-size:14px}
footer p{margin:0 0 9px}

.doc h2{margin-top:28px}
.doc p,.doc li{color:var(--muted);max-width:70ch}
.fill{background:var(--accent-soft);padding:1px 6px;border-radius:4px;color:var(--ink);
  font-weight:600}