:root{
  --paper:#F4F4F1; --surface:#FFFFFF; --ink:#14161A; --mut:#656B72; --mut2:#8A9096;
  --rule:#E0E1DC; --rule2:#C9CBC4; --lime:#B4E82B; --lime2:#A6D926;
  --ok:#2F6B4F; --warn:#8A5605; --bad:#8E2F2A;
  --r:1rem;
}
/* Атрибут hidden обязан побеждать любой наш display: браузерное правило
   [hidden]{display:none} живёт в стилях агента, и любое авторское
   .counter{display:inline-flex} его перебивает. */
[hidden]{display:none !important}

*{box-sizing:border-box}
html{font-size:clamp(13px,0.26vw + 1.02vh,19px)}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'Golos Text',-apple-system,Segoe UI,Arial,sans-serif;
  font-size:1rem;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font-family:inherit}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

.page{max-width:76rem;margin:0 auto;padding:1.1rem clamp(1.1rem,2.4vw,2.2rem) 2rem;
  display:flex;flex-direction:column;min-height:100vh}

/* Свободную высоту забирает контент, а не разрыв перед подвалом:
   на высоком экране блоки стоят по центру, после разбора — обычным потоком. */
/* Две колонки держат высоту страницы: слева рассказ, справа карточка и форма. */
.main{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,27rem);
  gap:clamp(1.6rem,3vw,3.2rem);align-items:stretch;padding:1.6rem 0 0}
.left{display:flex;flex-direction:column;justify-content:space-between}
.panel{display:flex;flex-direction:column;gap:.85rem}

/* ---------------- шапка ---------------- */
.hdr{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-bottom:.85rem;border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:.65rem;font-size:1.1rem;font-weight:600;
  letter-spacing:-.01em;text-decoration:none}
/* Знак в салатовом квадрате: сам лайм на светлом фоне даёт контраст 1.6:1
   и почти не читается, а на заливке — контраст 12:1. Совпадает с фавиконом. */
.markBox{display:grid;place-items:center;width:1.85rem;height:1.85rem;flex:0 0 1.85rem;
  background:var(--lime);border-radius:.5rem}
.markBox svg{width:1.35rem;height:1.35rem}
.hdrRight{display:flex;align-items:center;gap:1.2rem;font-size:.82rem;color:var(--mut)}
.secure{display:flex;align-items:center;gap:.5rem}
.dot{width:.36rem;height:.36rem;border-radius:50%;background:var(--mut2)}
.lnk{text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.lnk:hover{color:var(--ink)}

/* ---------------- первый экран ---------------- */
.counter{display:inline-flex;align-items:center;gap:.5rem;background:var(--surface);
  border:1px solid var(--rule);border-radius:.5rem;padding:.5rem .85rem;font-size:.83rem;
  color:var(--mut);align-self:flex-start}
.counter b{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;
  font-size:.83rem;font-weight:500;color:var(--ink)}
/* Баннер занимает свободную высоту левой колонки и сжимается на низких экранах. */
.banner{display:block;width:100%;height:auto;max-height:22rem;object-fit:contain;
  object-position:left center;margin:1.4rem 0 0}
@media (max-height:900px){.banner{max-height:15rem;margin-top:1.1rem}}
@media (max-height:780px){.banner{display:none}}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;margin-top:1.6rem;
  padding-top:1.2rem;border-top:1px solid var(--rule)}
.step .n{font-family:'IBM Plex Mono',monospace;font-size:.67rem;color:var(--mut);
  letter-spacing:.1em;display:block;margin-bottom:.35rem}
.step b{display:block;font-size:.92rem;font-weight:600;margin-bottom:.25rem;letter-spacing:-.01em}
.step p{margin:0;font-size:.8rem;line-height:1.48;color:var(--mut)}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.63rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mut);margin:0 0 .8rem}
h1{font-size:2.5rem;line-height:1.08;font-weight:600;letter-spacing:-.022em;margin:0 0 .8rem;text-wrap:balance}
.lead{font-size:.97rem;line-height:1.6;color:var(--mut);margin:0 0 1.1rem;max-width:44ch}
.trust{list-style:none;margin:1.4rem 0 0;padding:1rem 0 0;border-top:1px solid var(--rule)}
.trust li{font-size:.84rem;color:var(--mut);padding-left:1rem;position:relative;margin-bottom:.3rem}
.trust li::before{content:'';position:absolute;left:0;top:.6em;width:.32rem;height:.32rem;
  border-radius:50%;background:var(--mut2)}

/* карточка результата */
.card{background:var(--surface);border:1px solid var(--rule2);border-radius:var(--r);
  padding:1.2rem 1.35rem;box-shadow:0 .6rem 1.8rem rgba(20,22,26,.07)}
.cardTop{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.9rem}
.cardTop .lbl{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mut)}
.tagEx{font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.09em;color:var(--ink);
  background:var(--lime);border-radius:.25rem;padding:.2rem .45rem}
.cardLbl{font-size:.83rem;color:var(--mut);margin:0 0 .2rem}
.sum{display:flex;align-items:baseline;gap:.5rem;margin:0 0 .7rem}
.sum .from{font-family:'IBM Plex Mono',monospace;font-size:.9rem;color:var(--mut);letter-spacing:.06em}
.sum .val{font-family:'IBM Plex Mono',monospace;font-size:2.7rem;font-weight:500;line-height:1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sum .cur{font-family:'IBM Plex Mono',monospace;font-size:1.25rem;color:var(--mut)}
.cardRow{display:flex;align-items:center;gap:.5rem;font-size:.86rem;padding:.7rem 0;
  border-top:1px solid var(--rule)}
.cardRow svg{width:1rem;height:1rem;flex:0 0 auto}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem;border-top:1px solid var(--rule);padding-top:.8rem}
.pair b{display:block;font-size:.81rem;font-weight:600;margin-bottom:.2rem}
.pair p{margin:0;font-size:.76rem;line-height:1.45;color:var(--mut)}
.cardChips{display:flex;flex-wrap:wrap;gap:.35rem;border-top:1px solid var(--rule);padding-top:.7rem;margin-top:.2rem}
.cardChips span{font-size:.73rem;color:var(--mut);border:1px solid var(--rule);border-radius:.35rem;padding:.22rem .5rem}
.cardChips b{font-family:'IBM Plex Mono',monospace;font-weight:500;color:var(--ink)}

/* ---------------- общие блоки ---------------- */
.box{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:1.15rem 1.3rem;box-shadow:0 .4rem 1.2rem rgba(20,22,26,.04)}
.box + .box,section + section{margin-top:.9rem}
h2{font-size:1.15rem;font-weight:600;letter-spacing:-.015em;margin:0}
h3.sec{font-size:1rem;font-weight:600;margin:1.4rem 0 .65rem;letter-spacing:-.01em}

/* загрузка во всю ширину */
.upHead{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:.9rem}
.fmt{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.1em;color:var(--mut);
  white-space:nowrap;text-align:right;line-height:1.7}

.drop{display:flex;align-items:center;gap:.85rem;border:1px dashed var(--rule2);border-radius:.7rem;
  padding:.85rem .95rem;margin-bottom:.75rem;cursor:pointer;background:#FCFCFA;
  transition:border-color 140ms,background 140ms}
.drop:hover,.drop.over{border-color:var(--ink);background:#FAFAF7}
.dropIcon{width:2.2rem;height:2.2rem;flex:0 0 2.2rem;border:1px solid var(--rule);border-radius:.55rem;
  display:grid;place-items:center;color:var(--mut);background:var(--surface)}
.dropIcon svg{width:.95rem;height:.95rem}
.dropTxt{flex:1;min-width:0}
.dropTxt b{display:block;font-size:.9rem;font-weight:600;margin-bottom:.1rem}
.dropTxt > span{display:block;font-size:.77rem;color:var(--mut)}
#fileWrap{display:none;font-family:'IBM Plex Mono',monospace;font-size:.72rem;color:var(--ink);margin-top:.3rem}
.btnDark{background:var(--ink);color:#fff;border:none;border-radius:.5rem;padding:.58rem .95rem;
  font-size:.82rem;font-weight:500;cursor:pointer;white-space:nowrap}

.consent{display:flex;gap:.5rem;align-items:flex-start;font-size:.79rem;line-height:1.45;
  margin-bottom:.35rem;cursor:pointer}
.consent input{width:.9rem;height:.9rem;margin:.15rem 0 0;accent-color:var(--ink);cursor:pointer;flex:0 0 .9rem}
.micro{font-size:.73rem;color:var(--mut);margin:.25rem 0 .8rem}
.upFoot{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.cta{background:var(--rule);color:var(--mut);cursor:not-allowed;border:none;border-radius:.55rem;
  padding:.75rem 1.5rem;font-size:.92rem;font-weight:600;transition:background 140ms,color 140ms}
.cta.on{background:var(--lime);color:var(--ink);cursor:pointer}
.cta.on:hover{background:var(--lime2)}
.hint{font-size:.78rem;color:var(--mut)}

/* ---------------- состояния ---------------- */
.state{display:flex;align-items:center;gap:.6rem;color:var(--mut);font-size:.88rem}
.spin{width:1rem;height:1rem;border:2px solid var(--rule);border-top-color:var(--ink);
  border-radius:50%;animation:sp .7s linear infinite;flex:0 0 auto}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.err{background:#FDF1F1;border:1px solid #F0D4D4;color:var(--bad);border-radius:.55rem;
  padding:.7rem .9rem;font-size:.83rem;margin-bottom:.7rem}
.okMsg{background:#EEF7E8;border:1px solid #D6E8C8;color:var(--ok);border-radius:.55rem;
  padding:.7rem .9rem;font-size:.83rem;margin-bottom:.7rem}
.demoNote{font-family:'IBM Plex Mono',monospace;font-size:.65rem;letter-spacing:.08em;color:var(--mut2);margin-top:.7rem}

/* ---------------- оплата ---------------- */
.payGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,22rem);gap:1.4rem;align-items:start}
.locked{list-style:none;margin:.2rem 0 0;padding:0}
.locked li{font-size:.83rem;color:var(--mut);padding:.2rem 0 .2rem 1.1rem;position:relative}
.locked li::before{content:'—';position:absolute;left:0;color:var(--mut2)}
.field{display:block;margin-bottom:.6rem}
.field span{display:block;font-size:.78rem;color:var(--mut);margin-bottom:.3rem}
.field input{width:100%;font-family:inherit;font-size:.92rem;padding:.65rem .8rem;
  border:1px solid var(--rule2);border-radius:.5rem;background:var(--surface);color:var(--ink)}
/* Фокус: мягкое кольцо вместо жирной обводки, но заметное с клавиатуры. */
.field input{transition:border-color 120ms,box-shadow 120ms}
.field input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(20,22,26,.08)}
.field input.bad{border-color:var(--bad);box-shadow:0 0 0 3px rgba(142,47,42,.10)}
.field input.bad:focus{border-color:var(--bad);box-shadow:0 0 0 3px rgba(142,47,42,.16)}
/* В режиме высокой контрастности системная обводка обязана остаться. */
@media (forced-colors:active){.field input:focus{outline:2px solid Highlight;outline-offset:1px}}
.fieldErr{font-size:.75rem;color:var(--bad);margin:.3rem 0 0}
.priceRow{display:flex;align-items:center;gap:.9rem;margin-top:.6rem}
.price{font-family:'IBM Plex Mono',monospace;font-size:1.35rem;font-weight:500}
.btnBuy{background:var(--lime);color:var(--ink);border:none;border-radius:.55rem;
  padding:.72rem 1.35rem;font-size:.9rem;font-weight:600;cursor:pointer}
.btnBuy:hover{background:var(--lime2)}
.btnBuy:disabled{opacity:.55;cursor:default}

/* ---------------- таблицы ---------------- */
.tblWrap{border:1px solid var(--rule);border-radius:.7rem;overflow:auto;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:34rem;font-size:.83rem}
th,td{padding:.55rem .85rem;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{font-family:'IBM Plex Mono',monospace;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mut);font-weight:400;background:#FAFAF8}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;
  white-space:nowrap;text-align:right}
.yr td{background:#FAFAF8;font-family:'IBM Plex Mono',monospace;font-size:.66rem;
  letter-spacing:.1em;color:var(--mut)}
.tag{display:inline-block;font-size:.7rem;padding:.1rem .42rem;border-radius:.22rem;white-space:nowrap}
.tag.hi{background:#EAF7E2;color:var(--ok)}
.tag.vf{background:#FBF3E2;color:var(--warn)}
/* ---------------- гайд «что делать дальше» ---------------- */
.guide{border:1px solid var(--rule2);border-radius:var(--r);padding:1.1rem 1.2rem 1rem;
  background:#FCFCFA;margin-bottom:1.4rem}
.gTop{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.gEyebrow{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mut)}
.gProgress{width:7rem;height:.3rem;background:var(--rule);border-radius:1rem;overflow:hidden;flex:0 0 auto}
.gProgress span{display:block;height:100%;width:0;background:var(--lime);border-radius:1rem;
  transition:width .25s ease}

/* Шаг: номер слева, содержимое справа, вертикальная линия связывает шаги. */
.gStep{display:grid;grid-template-columns:1.7rem 1fr;gap:.8rem;position:relative;
  padding:0 0 1.1rem}
.gStep:last-of-type{padding-bottom:.2rem}
.gStep::before{content:'';position:absolute;left:.82rem;top:1.9rem;bottom:.2rem;width:1px;
  background:var(--rule)}
.gStep:last-of-type::before{display:none}
.gCheck{width:1.7rem;height:1.7rem;flex:0 0 1.7rem;border-radius:50%;border:1px solid var(--rule2);
  background:var(--surface);color:var(--mut);font-family:'IBM Plex Mono',monospace;font-size:.8rem;
  cursor:pointer;display:grid;place-items:center;position:relative;z-index:1;padding:0}
.gCheck:hover{border-color:var(--ink);color:var(--ink)}
.gStep.done .gCheck{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.gStep.done .gTitle{color:var(--mut)}
.gHead{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;margin-bottom:.5rem}
.gKicker{font-size:.68rem;color:var(--mut);letter-spacing:.04em}
.gTitle{font-size:.98rem;font-weight:600;letter-spacing:-.015em;margin-top:.1rem}
.gTag{flex:0 0 auto;font-size:.68rem;color:var(--mut);border:1px solid var(--rule);
  border-radius:1rem;padding:.15rem .55rem;white-space:nowrap}
.gLead{font-size:.81rem;line-height:1.55;color:var(--mut);margin:0 0 .7rem}

/* Что просить по каждой категории. */
.gDocs{display:grid;gap:.5rem;margin-bottom:.8rem}
.gDoc{border:1px solid var(--rule);border-radius:.6rem;padding:.6rem .8rem;background:var(--surface)}
.gDoc b{display:block;font-size:.84rem;margin-bottom:.1rem}
.gDocName{display:block;font-size:.78rem;color:var(--ok)}
.gDoc p{margin:.35rem 0 0;font-size:.76rem;line-height:1.5;color:var(--mut)}

/* Два пути подачи. */
.gRoutes{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.8rem}
.gRoute{border:1px solid var(--rule);border-radius:.6rem;padding:.7rem .8rem;background:var(--surface)}
.gRoute.on{border-color:var(--lime2);background:#FBFEF4}
.gBadge{display:block;font-size:.65rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--mut);margin-bottom:.25rem}
.gRoute b{display:block;font-size:.86rem;margin-bottom:.2rem}
.gRoute p{margin:0;font-size:.77rem;line-height:1.5;color:var(--mut)}

/* Ориентир и прогресс в шапке гайда. */
.gTopRight{display:flex;align-items:center;gap:.9rem;flex:0 0 auto}
.gRefund{font-size:.76rem;color:var(--mut);white-space:nowrap}
.gRefund b{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;
  font-size:1rem;font-weight:500;color:var(--ink);margin-left:.25rem}

/* Путь по разделам ФНС. */
.gPath{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0 0 .7rem;
  font-size:.76rem;color:var(--mut)}
.gPath b{font-weight:500;color:var(--ink);background:var(--surface);border:1px solid var(--rule);
  border-radius:.35rem;padding:.15rem .45rem}
.gPath i{font-style:normal;color:var(--mut2)}

/* Вопрос про страховку. */
.gAsk{border:1px solid #EBDCB8;background:#FBF3E2;border-radius:.6rem;padding:.7rem .85rem;
  margin-bottom:.8rem}
.gAsk b{display:block;font-size:.84rem;color:#6E4404}
.gAsk p{margin:.2rem 0 .6rem;font-size:.77rem;line-height:1.5;color:var(--warn)}
.gAskRow{display:grid;grid-template-columns:1fr auto;gap:.6rem;align-items:center;
  padding:.3rem 0;font-size:.8rem}
.gAskRow select{font-family:inherit;font-size:.78rem;padding:.35rem .5rem;border-radius:.4rem;
  border:1px solid var(--rule2);background:var(--surface);color:var(--ink);max-width:14rem}

.gBtns{display:flex;gap:.5rem;flex-wrap:wrap}
.gBtn{display:inline-block;background:var(--ink);color:#fff;border:none;border-radius:.5rem;
  padding:.55rem .9rem;font-size:.79rem;font-weight:500;text-decoration:none;cursor:pointer}
.gBtn:hover{background:#000}
.gBtn.ghost{background:none;color:var(--ink);border:1px solid var(--rule2)}
.gBtn.ghost:hover{background:none;border-color:var(--ink)}
.gBtn[disabled]{opacity:.6;cursor:default}
.gDone{display:none;margin:.6rem 0 0;padding:.6rem .8rem;border-radius:.55rem;
  background:#EEF7E8;border:1px solid #D6E8C8;color:var(--ok);font-size:.8rem}

/* ---------------- блок «Ещё до» ---------------- */
.extraBox{border:1px solid var(--rule2);border-radius:var(--r);padding:.95rem 1.1rem;
  margin-bottom:1.2rem;background:var(--surface)}
.extraHead{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.extraMoney{font-family:'IBM Plex Mono',monospace;font-size:1.05rem;font-weight:500;
  letter-spacing:-.01em;margin-bottom:.2rem}
.extraText{font-size:.78rem;line-height:1.5;color:var(--mut);max-width:46ch}
.extraBody{display:none;margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--rule)}
.extraBody.open{display:block}
.extraItem{padding:.5rem 0;border-bottom:1px solid #F2F2EE}
.extraItem:last-child{border-bottom:none}
.extraItem b{display:block;font-size:.84rem}
.extraItem span{display:block;font-size:.76rem;color:var(--mut)}
.extraItem p{margin:.2rem 0 0;font-size:.76rem;line-height:1.5;color:var(--mut)}

/* Исключённая операция остаётся видимой, но приглушена. */
th.cbx,td.cbx{width:1px;white-space:nowrap;text-align:center;padding-right:.4rem}
td.cbx input{width:1.05rem;height:1.05rem;cursor:pointer}
tr.off td:not(.cbx){opacity:.42}

@media (max-width:900px){
  .gRoutes{grid-template-columns:1fr}
  .gHead{flex-direction:column;gap:.3rem}
  .gTag{align-self:flex-start}
  .gTop{flex-direction:column;align-items:flex-start;gap:.5rem}
  .gTopRight{width:100%;justify-content:space-between}
  .gProgress{flex:1 1 auto}
  /* Вопрос про страховку в столбик: подпись и выбор в строку не влезают,
     а сам выбор должен быть достаточно крупным для пальца. */
  .gAskRow{grid-template-columns:1fr;gap:.25rem}
  .gAskRow select{max-width:none;width:100%;padding:.6rem .55rem}
  .gBtns .gBtn{flex:1 1 auto;text-align:center}
  .extraHead{flex-direction:column;gap:.6rem}
  .extraHead .btnGhost{align-self:flex-start}
}

.orgRow{display:grid;grid-template-columns:1fr auto;gap:.8rem;align-items:center;
  border:1px solid var(--rule);border-radius:.6rem;padding:.65rem .85rem;margin-bottom:.45rem}
.orgRow b{display:block;font-size:.86rem}
.orgRow span{font-size:.76rem;color:var(--mut)}
.btnGhost{background:none;border:1px solid var(--rule2);border-radius:.45rem;padding:.45rem .8rem;
  font-size:.77rem;cursor:pointer;white-space:nowrap}
.btnGhost:hover{border-color:var(--ink)}
.btnGhost[disabled]{opacity:.55;cursor:default;border-color:var(--rule)}
/* Удаление необратимо: кнопка приглушена, пока её не нажали первый раз. */
.btnDel{color:var(--mut)}
.btnDel:hover{border-color:var(--bad);color:var(--bad)}
.btnDel.armed{border-color:var(--bad);color:var(--bad);background:#FDF1F1}
.disc{font-size:.76rem;color:var(--mut);line-height:1.55;margin-top:1.1rem;padding-top:.8rem;
  border-top:1px solid var(--rule)}

/* ---------------- подвал ---------------- */
#after:not(:empty){margin-top:.9rem}
.foot{margin-top:auto;padding-top:1rem;border-top:1px solid var(--rule);
  display:flex;align-items:baseline;justify-content:space-between;gap:1.4rem;
  font-size:.75rem;color:var(--mut);white-space:nowrap}
.foot nav{display:flex;gap:1rem}
.foot a{text-decoration:underline;text-underline-offset:2px}
/* Кнопка, а не ссылка: она ничего не открывает, а меняет настройку. */
.footLink{background:none;border:none;padding:0;font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px}
.footLink:hover{color:var(--ink)}
.foot .op{min-width:0;overflow:hidden;text-overflow:ellipsis}
.toast{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);background:var(--ink);color:#fff;
  padding:.6rem 1rem;border-radius:.5rem;font-size:.82rem;display:none;z-index:60}

/* ---------------- модальное окно входа ---------------- */
.modalBack{position:fixed;inset:0;background:rgba(20,22,26,.45);display:none;
  place-items:center;z-index:100;padding:1.2rem}
.modalBack.on{display:grid}
.modal{position:relative;background:var(--surface);border-radius:.9rem;padding:1.5rem 1.5rem 1.3rem;
  width:min(23rem,100%);box-shadow:0 1.5rem 3rem rgba(20,22,26,.22);animation:pop 140ms ease-out}
@keyframes pop{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.modal{animation:none}}
.modalX{position:absolute;top:.5rem;right:.6rem;background:none;border:none;font-size:1.4rem;
  line-height:1;color:var(--mut);cursor:pointer;padding:.2rem .4rem;border-radius:.35rem}
.modalX:hover{color:var(--ink);background:var(--paper)}
.mTitle{font-size:1.2rem;font-weight:600;letter-spacing:-.015em;margin:0 0 .35rem}
.mLead{font-size:.83rem;color:var(--mut);margin:0 0 1rem;line-height:1.5}
.mDemo{font-size:.76rem;color:var(--ok);background:#EEF7E8;border:1px solid #D6E8C8;
  border-radius:.45rem;padding:.5rem .65rem;margin:0 0 .8rem}
.mWide{width:100%;margin-top:.2rem}
.mHint{font-size:.76rem;color:var(--mut);line-height:1.5;margin:.7rem 0 0;text-align:center}
.mHint .linkBtn{font-size:.76rem}
.linkBtn[disabled]{cursor:default;text-decoration:none;opacity:.55}
.mBack{text-align:center;margin:.7rem 0 0}
.linkBtn{background:none;border:none;padding:0;font-family:inherit;font-size:.78rem;color:var(--mut);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.linkBtn:hover{color:var(--ink)}
.codeInput{font-family:'IBM Plex Mono',monospace;font-size:1.15rem;letter-spacing:.35em;text-align:center}

/* ---------------- согласие на аналитику ---------------- */
.consentBar{position:fixed;left:1.2rem;bottom:1.2rem;z-index:60;width:min(26rem,calc(100vw - 2.4rem));
  background:var(--ink);color:#fff;border-radius:.9rem;padding:1.1rem 1.2rem;
  box-shadow:0 1.2rem 2.4rem rgba(20,22,26,.28);
  opacity:0;transform:translateY(.7rem);pointer-events:none;
  transition:opacity .22s ease,transform .22s ease}
.consentBar.show{opacity:1;transform:none;pointer-events:auto}
.consentBar b{display:block;font-size:.92rem;font-weight:600;letter-spacing:-.01em;margin-bottom:.35rem}
.consentBar p{font-size:.78rem;line-height:1.5;color:#B9BDC4;margin:0 0 .9rem}
.consentActions{display:flex;gap:.5rem;flex-wrap:wrap}
.consentBar button{border:none;border-radius:.5rem;padding:.5rem .9rem;font-family:inherit;
  font-size:.79rem;font-weight:600;cursor:pointer}
.cbAllow{background:var(--lime);color:var(--ink)}
.cbAllow:hover{background:var(--lime2)}
.cbDeny{background:#2C3037;color:#E7E9EC}
.cbDeny:hover{background:#3A3F47}
@media (prefers-reduced-motion:reduce){.consentBar{transition:none}}

/* ---------------- кабинет ---------------- */
.auth{max-width:26rem;margin:3rem auto}
.auth h1{font-size:1.5rem;margin-bottom:.5rem}
.auth p.lead{font-size:.9rem;margin-bottom:1.2rem}
.repRow{display:grid;grid-template-columns:1fr auto auto auto auto;gap:.6rem;align-items:center;
  padding:.8rem 0;border-bottom:1px solid var(--rule)}
.repRow:last-child{border-bottom:none}
.repRow b{font-size:.9rem;font-weight:600}
.repRow .meta{display:block;font-size:.76rem;color:var(--mut)}
.repRow .amt{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums;font-size:.95rem}

@media (max-width:900px){
  html{font-size:16px}
  .page{padding:1rem 1.1rem 2rem}
  .main{grid-template-columns:1fr;gap:1.4rem;padding-top:1.2rem}
  .steps{grid-template-columns:1fr;gap:1rem}
  h1{font-size:1.85rem}
  .payGrid{grid-template-columns:1fr}
  .pair{grid-template-columns:1fr}
  .secure{display:none}
  .foot{flex-direction:column;align-items:flex-start;gap:.5rem;white-space:normal}
  .foot nav{flex-wrap:wrap}
  /* На узком экране пять ячеек в сетке растягивают кнопки во всю ширину.
     Переходим на перенос по строкам: название сверху, дальше сумма и кнопки. */
  .repRow{display:flex;flex-wrap:wrap;gap:.5rem .6rem}
  .repRow>div{flex:1 1 100%}
  .repRow .amt{flex:1 1 auto}
  .repRow button{flex:0 0 auto}

  /* Заголовок формы и подпись о форматах в одну строку не помещаются
     и наезжают друг на друга — ставим их друг под другом. */
  .upHead{flex-direction:column;align-items:flex-start;gap:.25rem;margin-bottom:.7rem}
  .fmt{text-align:left;line-height:1.6}

  /* Зона загрузки: значок, текст и кнопка в строку не влезают, текст
     ломается на обрывки по два слова. Значок убираем, кнопка во всю ширину. */
  .drop{flex-wrap:wrap;gap:.7rem;padding:.9rem}
  .dropIcon{display:none}
  .dropTxt{flex:1 1 100%}
  .btnDark{width:100%;text-align:center;padding:.7rem 1rem}

  /* Галочка была 14×14 — мимо такой промахиваются пальцем.
     Увеличиваем и добавляем поля, чтобы строка нажималась целиком. */
  .consent{padding:.35rem 0;gap:.6rem}
  .consent input{width:1.15rem;height:1.15rem;flex:0 0 1.15rem;margin-top:.02rem}

  /* Главное действие — во всю ширину, подсказка под ним. */
  .upFoot{flex-direction:column;align-items:stretch;gap:.55rem}
  .cta{width:100%;padding:.8rem 1rem}
  .hint{text-align:center}

  /* Оплата: цена и кнопка по разным строкам, кнопка во всю ширину. */
  .priceRow{flex-direction:column;align-items:stretch;gap:.6rem}
  .btnBuy{width:100%;padding:.8rem 1rem}

  /* Согласие на аналитику прижимаем к обоим краям — так остаётся место
     под текст, а кнопки не сжимаются в две строки. */
  .consentBar{left:.7rem;right:.7rem;bottom:.7rem;width:auto}
}

/* ---------------- узкие телефоны ---------------- */
@media (max-width:560px){
  .page{padding:.85rem .9rem 1.6rem}
  h1{font-size:1.6rem}
  .lead{font-size:.92rem}
  /* Крупная сумма в карточке результата упиралась в край. */
  .sum .val{font-size:2.1rem}
  .card{padding:1rem 1.05rem}
  .box{padding:1rem 1.05rem}
  /* Подвал в столбик: ссылки в строку не помещаются и рвутся посередине. */
  .foot nav{gap:.5rem .9rem}
  .consentBar{padding:.95rem 1rem}
  .consentActions{gap:.45rem}
  /* Кнопки во всю ширину и повыше: 34 px пальцем берутся плохо. */
  .consentBar button{flex:1 1 auto;padding:.75rem .8rem}
}