: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;
}
*{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)}
.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)}
.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}
.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}
.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}

/* ---------------- кабинет ---------------- */
.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;gap:1rem;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{grid-template-columns:1fr auto}
}