:root{
  --bg2:#86193f; --bg3:#5e0f2b; --bgl:#fbeef2;
  --ik:#1f2328; --ik2:#4d555d; --sf:#848d95;
  --pp:#ffffff; --ln3:#e3e1dd; --ln4:#f0efec; --wsh:#faf9f7;
  --yep:#15663f; --nope:#9b1c1c;
  --fig:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--pp);color:var(--ik);
  font:16.5px/1.68 "IBM Plex Sans","Helvetica Neue",Helvetica,Arial,sans-serif}
a{color:var(--bg2)}a:hover{color:var(--bg3)}
img{max-width:100%}
.rail{position:fixed;left:0;top:0;bottom:0;width:7px;background:var(--bg2);
  z-index:5}
.zone{max-width:980px;margin:0 auto;padding:0 24px 0 34px}

/* ── шапка, всё по левому краю ── */
header{padding:22px 0 0}
.sigil{display:inline-block;text-decoration:none;color:var(--ik);
  font-size:21px;font-weight:700;letter-spacing:-.4px}
.sigil u{text-decoration:none;color:var(--bg2)}
.sigil span{display:block;font-size:11.5px;font-weight:500;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--sf);margin-top:4px}
.routes{display:flex;gap:18px;flex-wrap:nowrap;overflow-x:auto;
  scrollbar-width:none;margin:18px 0 0;padding:0 0 12px;font-size:14px;
  border-bottom:1px solid var(--ln3)}
.routes::-webkit-scrollbar{display:none}
.routes a{color:var(--ik2);text-decoration:none;white-space:nowrap}
.routes a:hover{color:var(--bg2)}
.routes a.at{color:var(--bg2);font-weight:600}

/* ── заголовок ── */
.head2{padding:34px 0 0}
.strap{display:inline-block;font-size:11px;letter-spacing:1.8px;
  text-transform:uppercase;font-weight:700;color:#fff;background:var(--bg2);
  padding:4px 10px;margin:0 0 15px}
.head2 h1{font-size:34px;line-height:1.18;letter-spacing:-.8px;margin:0 0 14px;
  max-width:21ch}
.brief{font-size:18px;line-height:1.6;color:var(--ik2);margin:0;max-width:60ch}
.ledger{margin:24px 0 0;padding:0;border-top:3px solid var(--ik);
  display:grid;grid-template-columns:auto 1fr;font-size:14.5px}
.ledger dt{padding:9px 24px 9px 0;color:var(--sf);
  border-bottom:1px solid var(--ln4);white-space:nowrap}
.ledger dd{margin:0;padding:9px 0;font-family:var(--fig);font-size:14px;
  border-bottom:1px solid var(--ln4);font-weight:600}
.contents{margin:22px 0 0;font-size:14px;color:var(--ik2)}
.contents b{display:block;font-size:11px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--sf);margin:0 0 7px}
.contents a{color:var(--ik2);text-decoration:none;margin-right:16px;
  display:inline-block;border-bottom:1px solid var(--ln3)}
.contents a:hover{color:var(--bg2);border-bottom-color:var(--bg2)}

/* ── секции ── */
main{padding:6px 0 0}
.slab{padding:30px 0 0;border-top:1px solid var(--ln3);margin-top:30px}
.slab:first-child{border-top:0;margin-top:14px}
.chip{font-family:var(--fig);font-size:11.5px;color:var(--bg2);
  letter-spacing:1.4px;font-weight:700;display:block;margin:0 0 8px}
.slab h2{font-size:23px;line-height:1.3;letter-spacing:-.4px;margin:0 0 13px;
  max-width:28ch}
h3{font-size:16.5px;margin:22px 0 7px;color:var(--bg3)}
p{margin:0 0 15px;max-width:66ch}
ul,ol{margin:0 0 17px;padding-left:21px;max-width:66ch}li{margin:0 0 7px}
.micro{font-size:14px;color:var(--sf);max-width:64ch}

/* ── вставки ── */
.memo{background:var(--wsh);border-left:4px solid var(--ik);padding:15px 18px;
  margin:20px 0;font-size:15.5px;color:var(--ik2);max-width:66ch}
.memo b{color:var(--ik)}
.memo p{margin:0 0 10px;max-width:none}.memo p:last-child{margin:0}
.red{background:var(--bgl);border-left:4px solid var(--bg2);padding:15px 18px;
  margin:20px 0;font-size:15.5px;color:var(--ik2);max-width:66ch}
.red b{color:var(--bg3)}
.red p{margin:0 0 10px;max-width:none}.red p:last-child{margin:0}

/* ── таблицы ── */
.swipe{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:18px 0 22px}
table{border-collapse:collapse;width:100%;min-width:450px;font-size:15px}
th{text-align:left;padding:8px 14px 8px 0;border-bottom:1px solid var(--ik);
  font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--ik);white-space:nowrap}
td{padding:10px 14px 10px 0;border-bottom:1px solid var(--ln4);
  vertical-align:top}
.charges td:last-child,.charges th:last-child{text-align:right;
  padding-right:0;font-family:var(--fig);font-size:13.5px;white-space:nowrap}
.yep{color:var(--yep);font-weight:600}
.nope{color:var(--nope);font-weight:600}

/* ── шаги ── */
.track{list-style:none;margin:20px 0 22px;padding:0;counter-reset:tk;
  max-width:66ch}
.track li{counter-increment:tk;position:relative;padding:0 0 15px 40px;
  margin:0}
.track li::before{content:counter(tk);position:absolute;left:0;top:1px;
  width:25px;height:25px;border:2px solid var(--bg2);color:var(--bg2);
  font:700 12px/21px var(--fig);text-align:center;border-radius:50%}
.track b{display:block;margin-bottom:2px}

/* ── карточки ── */
.boxes{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));
  gap:16px;margin:20px 0 22px}
.item{border:1px solid var(--ln3);border-top:3px solid var(--bg2);
  padding:15px 17px}
.item h4{margin:0 0 6px;font-size:15.5px}
.item p{margin:0;font-size:14.5px;color:var(--ik2);max-width:none}
.item em{display:block;font-style:normal;font-family:var(--fig);font-size:13px;
  color:var(--bg2);margin-top:9px;font-weight:600}

/* ── зов ── */
.push{background:var(--ik);color:#fff;padding:22px 26px;margin:32px 0 10px;
  max-width:66ch}
.push h2{margin:0 0 8px;font-size:19.5px;color:#fff;max-width:none}
.push p{margin:0 0 15px;font-size:15.5px;color:#c9ced3;max-width:none}
.start{display:inline-block;background:var(--bg2);color:#fff;
  text-decoration:none;font-size:15px;font-weight:600;padding:11px 24px}
.start:hover{background:#9c2049;color:#fff}

/* ── подвал ── */
.close{border-top:3px solid var(--ik);margin-top:40px;padding:22px 0 42px;
  font-size:14px;color:var(--sf)}
.close nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 15px}
.close nav a{color:var(--ik2);text-decoration:none}
.close nav a:hover{color:var(--bg2)}
.close p{margin:0 0 9px;max-width:78ch}

.grab{margin:18px 0 22px;max-width:66ch}
.grab img{display:block;width:100%;border:1px solid var(--ln3)}
.grab figcaption{font-size:13.5px;color:var(--sf);margin-top:8px}

.plot{margin:20px 0 24px;padding:0;max-width:66ch}
.plot svg{display:block;width:100%;height:auto;background:#fff;
  border:1px solid var(--ln3)}
.plot figcaption{font:400 13.5px/1.55 "IBM Plex Sans","Helvetica Neue",
  Helvetica,Arial,sans-serif;color:var(--sf);margin:9px 0 0}


@media(max-width:620px){
  body{font-size:16px}
  .zone{padding:0 16px 0 24px}
  .head2{padding-top:26px}
  .head2 h1{font-size:26px;letter-spacing:-.5px}
  .brief{font-size:16.5px}
  .slab h2{font-size:20px}
  .ledger{grid-template-columns:1fr auto}
  .ledger dd{text-align:right}
  .push{padding:18px}
  p,ul,ol,.memo,.red,.track,.push,.grab,.micro{max-width:100%}
}