:root{
  --pine-900:#0E1E19;
  --pine-850:#132A23;
  --pine-800:#17332B;
  --pine-700:#20463C;
  --pine-500:#4E7A6B;
  --paper:#FCFBF7;
  --paper-2:#F1EEE6;
  --paper-3:#E6E2D7;
  --ink:#1A1F1C;
  --ink-2:#5B655F;
  --ink-3:#8C948E;
  --moss:#2F6B4F;
  --moss-tint:#E3EEE7;
  --moss-ink:#1E4A36;
  --ember:#AE3B2A;
  --ember-tint:#F8E4E0;
  --amber:#9E620F;
  --amber-tint:#F6EAD6;
  --r-sm:8px;
  --r-md:12px;
  --r-phone:26px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--pine-900);
  color:var(--paper);
  font-family:"Golos Text",system-ui,sans-serif;
  font-size:16px;
  line-height:1.6;
  padding:0 20px 80px;
}
.wrap{max-width:900px;margin:0 auto}

.masthead{padding:56px 0 52px}
.brand{display:flex;align-items:center;gap:14px;margin-bottom:30px}
.brand img{height:38px;width:auto;display:block}
.brand .tag{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pine-500);padding-left:14px;border-left:1px solid var(--pine-700)
}
.eyebrow{
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pine-500);margin-bottom:18px
}
.masthead h1{
  font-family:"Bitter",Georgia,serif;
  font-weight:500;font-size:clamp(36px,5.6vw,62px);line-height:1.04;
  letter-spacing:-.025em;max-width:15ch
}
.masthead h1 em{font-style:normal;color:var(--pine-500)}
.lede{
  margin-top:24px;max-width:600px;font-size:17.5px;line-height:1.62;color:#AEBFB7
}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px;max-width:860px}
.chip{
  font-size:13px;padding:6px 13px;border-radius:100px;
  border:1px solid rgba(32,70,60,.75);color:#8AA096
}
.chip.on{
  background:var(--pine-700);color:var(--paper);
  border-color:var(--pine-700);font-weight:500
}

.sect{padding:76px 0 0}
.sect + .sect{margin-top:20px;border-top:1px solid rgba(32,70,60,.55)}
.sect-head{display:flex;align-items:baseline;gap:16px;margin-bottom:12px}
.sect-num{
  font-family:"Bitter",serif;font-size:15px;color:var(--pine-500);
  letter-spacing:.06em;flex:0 0 auto;
  font-variant-numeric:tabular-nums
}
.sect h2{
  font-family:"Bitter",Georgia,serif;font-weight:500;font-size:29px;
  letter-spacing:-.015em;line-height:1.2
}
.sect-note{color:#9FB3AA;font-size:16px;line-height:1.65;max-width:720px;margin:0 0 40px}

.row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:auto auto;
  gap:18px 36px;align-items:end
}
.slot{display:contents}
.slot > .phone{grid-row:1;align-self:end;width:100%}
.slot > .slot-cap{grid-row:2}
.slot-cap{
  font-size:13px;color:#7E9187;letter-spacing:.01em;line-height:1.5
}
.slot-cap b{
  color:#CBD8D1;font-weight:500;display:block;font-size:14px;margin-bottom:2px
}

.phone{
  background:var(--paper);
  border-radius:var(--r-phone);
  border:1px solid rgba(32,70,60,.9);
  box-shadow:0 18px 40px -24px rgba(0,0,0,.75);
  overflow:hidden;

  color:var(--ink);
  font-size:14px;
  line-height:1.5;
}
.status{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 18px 2px;font-size:12px;color:var(--ink-3)
}
.status i{font-size:14px;margin-left:5px}

.bar{
  padding:12px 18px 14px;border-bottom:1px solid var(--paper-3);
  display:flex;align-items:center;gap:11px
}
.bar .back{font-size:19px;color:var(--ink-2)}
.bar h3{font-size:16px;font-weight:500;letter-spacing:-.01em}
.bar .sub{font-size:12px;color:var(--ink-3);margin-top:1px}
.bar .push{margin-left:auto}
.ava{
  width:36px;height:36px;border-radius:50%;background:var(--moss-tint);
  color:var(--moss-ink);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:500
}
.body{padding:16px 18px 20px}

.tile{
  background:var(--paper-2);border-radius:var(--r-md);padding:15px 14px
}
.tile i{font-size:22px;color:var(--moss)}
.tile .t{font-size:15px;font-weight:500;margin-top:9px}
.tile .s{font-size:12px;color:var(--ink-2)}
.tile-sos{
  background:var(--ember-tint);border-radius:var(--r-md);
  width:104px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px
}
.tile-sos i{font-size:24px;color:var(--ember)}
.tile-sos span{font-size:15px;font-weight:500;color:var(--ember);letter-spacing:.04em}

.lbl{font-size:12px;color:var(--ink-3);margin-bottom:9px;letter-spacing:.01em}
.lbl.sp{margin-top:18px}

.item{
  border:1px solid var(--paper-3);border-radius:var(--r-sm);
  padding:11px 13px;display:flex;align-items:center;gap:11px;margin-bottom:9px
}
.item i.lead{font-size:19px;color:var(--ink-2)}
.item .g{flex:1;min-width:0}
.item .g .a{font-size:14px}
.item .g .b{font-size:12px;color:var(--ink-3)}
.item i.tail{font-size:17px;color:var(--ink-3)}
.sq{
  width:36px;height:36px;border-radius:var(--r-sm);background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--ink-2);flex:0 0 auto
}
.sq.moss{background:var(--moss-tint);color:var(--moss-ink);font-weight:500}
.sq.round{border-radius:50%}

.pill{font-size:11px;padding:3px 9px;border-radius:100px;white-space:nowrap}
.pill.ok{background:var(--moss-tint);color:var(--moss-ink)}
.pill.mute{background:var(--paper-2);color:var(--ink-2)}
.pill.warn{background:var(--amber-tint);color:var(--amber)}

.nav{
  border-top:1px solid var(--paper-3);margin-top:16px;padding-top:14px;
  display:grid;grid-template-columns:repeat(3,1fr);text-align:center
}
.nav i{font-size:21px;color:var(--ink-2)}
.nav span{display:block;font-size:12px;margin-top:4px}

.btn{
  display:block;width:100%;text-align:center;
  background:var(--moss);color:#fff;border:none;
  border-radius:var(--r-sm);padding:12px;font:inherit;font-size:15px;font-weight:500;
  cursor:pointer
}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink-3)}
.btn.half{width:auto;flex:1}
.btn-row{display:flex;gap:9px}

.field{
  border:1px solid var(--paper-3);border-radius:var(--r-sm);
  padding:11px 13px;font-size:14px;margin-bottom:13px;background:#fff
}
.field.ph{color:var(--ink-3)}
.field.area{height:64px}

.seg{display:flex;gap:7px;margin-bottom:16px}
.seg > div{
  flex:1;text-align:center;padding:9px 4px;border-radius:var(--r-sm);
  border:1px solid var(--paper-3);font-size:13px;color:var(--ink-2)
}
.seg > div i{display:block;font-size:19px;margin-bottom:3px}
.seg > div.on{background:var(--moss-tint);border-color:var(--moss-tint);color:var(--moss-ink)}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-bottom:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.opt{
  border:1px solid var(--paper-3);border-radius:var(--r-sm);
  padding:11px 12px;font-size:13px;color:var(--ink-2)
}
.opt i{font-size:17px;margin-right:7px;vertical-align:-3px}
.opt.on{background:var(--moss-tint);border-color:var(--moss-tint);color:var(--moss-ink)}

.cat{
  background:var(--paper-2);border-radius:var(--r-md);
  padding:14px 6px;text-align:center
}
.cat i{font-size:23px;color:var(--moss)}
.cat span{display:block;font-size:12px;margin-top:6px}

.note{
  background:var(--paper-2);border-radius:var(--r-sm);
  padding:11px 13px;font-size:12.5px;color:var(--ink-2);line-height:1.55
}
.note.warn{background:var(--amber-tint);color:var(--amber)}

.sos-head{background:var(--ember-tint);padding:24px 18px;text-align:center}
.sos-head .k{font-size:13px;color:var(--ember)}
.sos-head .t{font-family:"Bitter",serif;font-size:38px;font-weight:500;color:var(--ember);line-height:1.1;margin:5px 0}
.sos-112{
  border:1px solid var(--ember);border-radius:var(--r-sm);
  padding:13px;text-align:center;color:var(--ember)
}
.sos-112 .a{font-size:15px;font-weight:500}
.sos-112 .b{font-size:12px;color:var(--ink-2);margin-top:3px}

.kv{font-size:13.5px;line-height:1.85}
.kv i{font-size:16px;color:var(--ink-2);width:20px;vertical-align:-2px}

.qr{
  width:142px;height:142px;margin:0 auto 15px;background:var(--paper-2);
  border-radius:var(--r-md);display:flex;align-items:center;justify-content:center
}
.qr i{font-size:84px;color:var(--ink)}
.code{font-family:"Bitter",serif;font-size:26px;letter-spacing:7px;font-weight:500}

.step{display:flex;gap:13px}
.step .rail{display:flex;flex-direction:column;align-items:center;flex:0 0 auto}
.step .rail i{font-size:19px;color:var(--moss)}
.step .rail i.now{color:var(--ink)}
.step .rail i.off{color:var(--paper-3)}
.step .rail .line{width:1px;flex:1;min-height:30px;background:var(--paper-3);margin:2px 0}
.step .c{padding-bottom:12px}
.step .c .a{font-size:14px}
.step .c .b{font-size:12px;color:var(--ink-3)}
.step .c .b.hi{color:var(--moss)}

.hero{
  border:2px solid var(--moss);border-radius:var(--r-md);padding:14px;margin-bottom:14px
}
.hero .top{display:flex;gap:11px;margin:11px 0}
.hero .desc{font-size:12.5px;color:var(--ink-2);margin-bottom:12px;line-height:1.55}

.foot{
  margin-top:64px;padding-top:26px;border-top:1px solid var(--pine-700);
  color:var(--pine-500);font-size:13.5px;display:flex;gap:20px;flex-wrap:wrap;
  align-items:center
}
.foot img{height:30px;width:auto;display:block;opacity:.85}


/* ── Страницы ошибок ─────────────────────────────────────── */
.err-body{display:flex;flex-direction:column;min-height:100vh;padding-bottom:0}
.err-wrap{flex:1;display:flex;flex-direction:column;width:100%}
.err-brand{display:block;padding:44px 0 0}
.err-brand img{height:34px;width:auto;display:block}
.err{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:60px 0;max-width:640px
}
.err-code{
  font-family:"Bitter",Georgia,serif;font-weight:500;
  font-size:clamp(72px,15vw,132px);line-height:1;letter-spacing:-.03em;
  color:var(--pine-500);margin-bottom:6px
}
.err-code--ember{color:#C4574A}
.err-code--amber{color:#C79445}
.err h1{
  font-family:"Bitter",Georgia,serif;font-weight:500;
  font-size:clamp(26px,4.4vw,40px);line-height:1.12;letter-spacing:-.015em;
  color:var(--paper)
}
.err-note{margin-top:18px;font-size:17px;color:#B9C7C0;max-width:560px}
.err-actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:34px}
.err-btn{
  display:inline-block;padding:12px 22px;border-radius:var(--r-sm);
  background:var(--moss);color:#fff;text-decoration:none;
  font-size:15px;font-weight:500;border:1px solid var(--moss)
}
.err-btn.ghost{background:transparent;color:#B9C7C0;border-color:var(--pine-700)}
.err-foot{margin-top:0;margin-bottom:40px}

@media (max-width:760px){
  body{padding:0 16px 60px}
  .brand{gap:11px;margin-bottom:24px}
  .brand img{height:30px}
  .brand .tag{font-size:11px;padding-left:11px}
  .masthead{padding:44px 0 34px}
  .row{
    grid-template-columns:minmax(0,360px);
    grid-template-rows:none;gap:10px 0;margin-left:0
  }
  .slot > .phone,
  .slot > .slot-cap{grid-row:auto}
  .slot > .slot-cap{margin-bottom:26px}
  .sect{padding-top:52px}
  .sect-note{margin-left:0;margin-bottom:26px}
  .sect-head{gap:12px}
  .err-brand{padding-top:32px}
  .err-brand img{height:28px}
  .err{padding:44px 0}
  .err-actions .err-btn{flex:1;text-align:center}
}