:root{
  --ink:#14143C;
  --accent:#F57C28;
  --accent-dark:#E06A18;
  --accent-light:#FFF3EA;
  --accent-mid:#FFDFC0;
  --green:#28A07A;
  --red:#E5484D;
  --bg:#F4F4F8;
  --card:#FFFFFF;
  --line:rgba(20,20,60,0.10);
  --muted:#6B6B8A;
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;
}
header{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;padding:0 40px;background:var(--card);box-shadow:0 2px 12px rgba(20,20,60,.04);
}
.logo{display:flex;align-items:center;gap:10px;font-family:'Onest',sans-serif;font-weight:700;font-size:18px;line-height:1;color:var(--ink)}
.logo-badge{
  width:36px;height:36px;border-radius:10px;background:var(--accent);
  display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;
}
.logo-badge .material-symbols-rounded{font-size:18px;color:#fff;font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24}
.logo-name b{color:var(--accent);font-weight:700}
.badge{font-size:12px;color:var(--muted);background:var(--bg);border-radius:99px;padding:5px 13px}

.wrap{max-width:1060px;margin:0 auto;width:100%;flex:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(9px,1.2vh,18px) 24px clamp(14px,3.3vh,60px)}
h1{
  font-family:'Space Grotesk',sans-serif;font-size:clamp(23px,3vw,33px);
  font-weight:700;letter-spacing:-.03em;line-height:1.12;margin-bottom:clamp(9px,1.5vh,15px);
}
.sub{color:var(--muted);font-size:clamp(14px,1.5vw,15.5px);max-width:620px;margin-bottom:clamp(20px,3vh,34px)}

.grid{display:grid;grid-template-columns:1fr 400px;gap:clamp(14px,1.6vw,20px);align-items:stretch}
@media(max-width:860px){.grid{grid-template-columns:1fr}}

.card{background:var(--card);border-radius:var(--radius);padding:clamp(18px,2.2vh,24px);box-shadow:0 1px 2px rgba(20,20,60,.03),0 12px 30px rgba(20,20,60,.05)}

.field{margin-bottom:clamp(10px,1.5vh,16px)}
.cf-turnstile{margin-bottom:14px}
#formError:empty{min-height:0;margin-top:0}
label{display:block;font-size:13px;font-weight:600;margin-bottom:8px}
label .hint{font-weight:400;color:var(--muted)}
input[type=text],input[type=email],input[type=password]{
  width:100%;padding:12px 14px;font-size:15px;font-family:inherit;color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:10px;outline:none;
  transition:border-color .15s;
}
input:focus{border-color:var(--accent)}

.slugrow{display:flex;align-items:stretch}
.slugrow input{border-radius:10px 0 0 10px;border-right:none;font-family:'Space Grotesk',monospace}
.slugsuffix{
  display:flex;align-items:center;padding:0 14px;font-size:14px;color:var(--muted);
  background:var(--bg);border:1.5px solid var(--line);border-radius:0 10px 10px 0;white-space:nowrap;
}
.pwdrow{position:relative}
.pwdrow input{padding-right:44px}
.eye{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;padding:6px;color:#B6BAC6;
  display:flex;align-items:center;justify-content:center;transition:color .15s;
}
.eye:hover{color:#868C9C}
.eye .material-symbols-rounded{
  font-size:20px;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 20;
}
.status{font-size:13px;margin-top:5px;min-height:15px}
#pwdStatus:empty{min-height:0;margin-top:0}
.status.ok{color:var(--green)}
.status.err{color:var(--red)}
.status.checking{color:var(--muted)}

.btn{
  width:100%;padding:14px;font-size:15px;font-weight:600;font-family:inherit;
  background:var(--accent);color:#fff;border:none;border-radius:10px;cursor:pointer;
  transition:background .15s;
}
.btn:hover{background:var(--accent-dark)}
.btn:disabled{background:#B9C4D8;cursor:not-allowed}
.btn.ghost{background:var(--accent-light);color:var(--accent);margin-top:10px}
.btn.ghost:hover{background:var(--accent-mid)}

/* Плашка-превью: имитация печатной таблички с QR */
.plaque{
  background:var(--card);border-radius:var(--radius);
  padding:clamp(18px,2.6vh,26px) 24px;text-align:center;position:sticky;top:24px;
  display:flex;flex-direction:column;justify-content:center;
  box-shadow:0 1px 2px rgba(20,20,60,.03),0 12px 30px rgba(20,20,60,.06);
}
.plaque .eyebrow{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;
}
.plaque h3{
  font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;
  letter-spacing:-.02em;min-height:26px;margin-bottom:4px;word-break:break-word;
}
.plaque .tagline{font-size:13px;color:var(--muted);margin-bottom:clamp(12px,2vh,18px)}
.qrbox{
  width:clamp(180px,24vh,240px);height:clamp(180px,24vh,240px);
  margin:0 auto clamp(12px,1.8vh,16px);display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--line);border-radius:12px;padding:10px;background:#fff;
}
.qrbox img,.qrbox canvas{width:100%!important;height:100%!important;image-rendering:pixelated}
.qr-placeholder{color:var(--muted);font-size:12px;line-height:1.5;padding:0 12px}
.url{
  font-family:'Space Grotesk',monospace;font-size:14px;font-weight:500;
  padding:9px 12px;word-break:break-all;
}
.url b{color:var(--accent)}
.plaque .foot{font-size:11px;color:var(--muted);margin-top:14px}
.plaque .foot a{color:inherit;font-weight:inherit;text-decoration:none;transition:color .15s}
.plaque .foot a:hover{color:var(--accent);text-decoration:none}

/* Успех */
.success{display:none}
.success.show{display:block}
.form-card.hide{display:none}
.success .icon{
  width:52px;height:52px;border-radius:50%;background:#E6F7F2;color:var(--green);
  display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:16px;
}
.success h2{font-family:'Space Grotesk',sans-serif;font-size:24px;letter-spacing:-.02em;margin-bottom:8px}
.success p{color:var(--muted);font-size:14px;margin-bottom:20px;line-height:1.55}
.kv{padding:12px 0;display:flex;justify-content:space-between;gap:12px;font-size:14px}
.kv .k{color:var(--muted)}
.kv .v{font-weight:600;text-align:right;word-break:break-all}
.kv .v a{color:var(--accent);text-decoration:none}

.steps{display:flex;gap:clamp(14px,1.6vw,20px);margin-top:clamp(14px,1.6vw,20px);flex-wrap:wrap}
.step{flex:1;min-width:220px;background:var(--card);border-radius:var(--radius);padding:clamp(14px,1.8vh,20px);box-shadow:0 1px 2px rgba(20,20,60,.03),0 8px 22px rgba(20,20,60,.04)}
.step-badge{
  display:inline-flex;align-items:baseline;gap:7px;margin-bottom:10px;
  padding:5px 12px;border-radius:99px;
  background:var(--accent-light);color:var(--accent);
}
.step-badge .lbl{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;letter-spacing:.01em}
.step-badge .num{font-family:'DM Mono',monospace;font-size:11.5px;font-weight:500;line-height:1}
.step-title{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:5px}
.step p{font-size:13.5px;color:var(--muted);line-height:1.5}
.step b{color:var(--ink)}

/* ---- Модалка «Создаём кабинет» ---- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(11,27,52,.55);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:100;padding:24px;
  animation:fade .2s ease;
}
.modal-overlay.show{display:flex}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--card);border-radius:18px;padding:36px 32px;max-width:420px;width:100%;
  text-align:center;box-shadow:0 24px 60px rgba(11,27,52,.28);
}
.spinner{
  width:46px;height:46px;margin:0 auto 20px;border-radius:50%;
  border:4px solid #EFEBE6;border-top-color:var(--accent);animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.modal h3{font-family:'Space Grotesk',sans-serif;font-size:20px;letter-spacing:-.02em;margin-bottom:8px}
.modal #loadingMsg{color:var(--muted);font-size:14px;margin-bottom:18px;min-height:20px}
.progress{height:8px;background:var(--bg);border-radius:99px;overflow:hidden;margin-bottom:14px}
.progress-bar{
  height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--accent),#FF9A4D);transition:width .5s ease;
}
.loading-hint{font-size:12px;color:var(--muted)}

/* ---- Модалка подтверждения email ---- */
.verify-modal{padding:0;text-align:left;overflow:hidden}
.verify-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border-bottom:1px solid var(--line)}
.verify-head h3{margin:0;font-family:'Space Grotesk',sans-serif;font-size:19px;letter-spacing:-.02em}
.verify-body{padding:24px 24px 26px;text-align:center}
.modal-close{
  flex-shrink:0;width:26px;height:26px;border:none;background:none;position:relative;top:2px;
  cursor:pointer;color:#7A7A93;display:flex;align-items:center;justify-content:center;
  transition:color .15s;padding:0;
}
.modal-close:hover{color:#111}
.modal-close .material-symbols-rounded{font-size:24px;font-variation-settings:'wght' 400}
.modal .otp-sub{color:var(--muted);font-size:14px;line-height:1.5;margin-bottom:22px}
.modal .otp-sub b{color:var(--ink);font-weight:600}
.otp-inputs{display:flex;gap:10px;justify-content:center;margin-bottom:14px;direction:ltr}
.otp-inputs input{
  width:46px;height:56px;text-align:center;font-family:'Space Grotesk',sans-serif;
  font-size:24px;font-weight:600;color:var(--ink);border:1.5px solid var(--line);
  border-radius:12px;background:#fff;transition:border-color .15s,box-shadow .15s;
  -moz-appearance:textfield;
}
.otp-inputs input::-webkit-outer-spin-button,.otp-inputs input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.otp-inputs input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-light)}
.otp-inputs.err input{border-color:var(--red)}
.otp-error{color:var(--red);font-size:13px;min-height:18px;margin-bottom:10px}
.otp-actions{display:flex;flex-direction:column;gap:12px}
.otp-resend{font-size:13px;color:var(--muted)}
.otp-resend a{color:var(--accent);font-weight:500;text-decoration:none;cursor:pointer}
.otp-resend a.disabled{color:var(--muted);cursor:default;pointer-events:none}
.otp-back{background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;padding:4px;font-family:inherit}
.otp-back:hover{color:var(--ink)}
.otp-demo{font-size:11px;color:var(--muted);margin-top:6px;opacity:.7}

/* ---- Согласия (чекбоксы) ---- */
.consent{margin:clamp(20px,2.8vh,26px) 0}
.consent-row{display:flex;align-items:center;gap:10px}
.consent-row input[type=checkbox]{
  appearance:none;-webkit-appearance:none;flex-shrink:0;
  width:20px;height:20px;border:1.5px solid var(--line);border-radius:6px;
  background:#fff;cursor:pointer;position:relative;transition:border-color .15s,background .15s;
}
.consent-row input[type=checkbox]:hover{border-color:var(--accent)}
.consent-row input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
.consent-row input[type=checkbox]:checked::after{
  content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.consent-row label{font-size:13px;font-weight:400;color:var(--muted);line-height:20px;margin:0;cursor:pointer;user-select:none}
.consent-row a{color:var(--accent);font-weight:500;text-decoration:none;cursor:pointer}
.consent-row a:hover{text-decoration:underline}

/* ---- Модалка документа (оферта) ---- */
.doc-overlay{
  position:fixed;inset:0;background:rgba(11,27,52,.55);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:110;padding:clamp(12px,3vh,32px);
  animation:fade .2s ease;
}
.doc-overlay.show{display:flex}
.doc-modal{
  background:var(--card);border-radius:18px;width:100%;max-width:760px;max-height:88vh;
  display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(11,27,52,.28);overflow:hidden;
}
.doc-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 26px;border-bottom:1px solid var(--line);flex-shrink:0;
}
.doc-head h3{font-family:'Space Grotesk',sans-serif;font-size:19px;letter-spacing:-.02em;margin:0}
.doc-close{
  background:none;border:none;width:26px;height:26px;flex-shrink:0;padding:0;position:relative;top:2px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:#7A7A93;transition:color .15s;
}
.doc-close:hover{color:#111}
.doc-close .material-symbols-rounded{font-size:24px;font-variation-settings:'wght' 400}
.doc-body{
  overflow-y:auto;padding:22px 26px;font-size:14px;line-height:1.6;color:var(--ink);
  scrollbar-width:thin;scrollbar-color:#CBD0DE transparent;
}
.doc-body::-webkit-scrollbar{width:6px}
.doc-body::-webkit-scrollbar-track{background:transparent;margin:6px 0}
.doc-body::-webkit-scrollbar-thumb{background:#CBD0DE;border-radius:999px}
.doc-body::-webkit-scrollbar-thumb:hover{background:#AEB4C7}
.doc-body h4{font-family:'Space Grotesk',sans-serif;font-size:15px;letter-spacing:-.01em;margin:20px 0 8px;color:var(--ink)}
.doc-body h4:first-child{margin-top:0}
.doc-body p{margin:0 0 9px;color:#3A3A5C}
.doc-body strong{color:var(--ink)}
.doc-body em{color:var(--muted)}
.doc-body blockquote{margin:0 0 9px;padding-left:14px;border-left:2px solid var(--line);color:#3A3A5C}
.doc-body table{width:100%;border-collapse:collapse;margin:8px 0 12px;font-size:13px}
.doc-body td{border:1px solid var(--line);padding:7px 10px;vertical-align:top}
.doc-body td:first-child{color:var(--muted);width:38%}
.doc-body ul{margin:0 0 9px;padding-left:20px;color:#3A3A5C}
.doc-body li{margin-bottom:4px}
.doc-foot{
  display:flex;gap:10px;padding:16px 26px;border-top:1px solid var(--line);flex-shrink:0;
  background:var(--card);
}
.doc-foot .btn{margin:0}
.doc-foot .btn.ghost{margin:0;flex:0 0 auto;width:auto;padding:14px 22px}

/* ---- Крупный чек над формами (экран успеха) ---- */
.success-hero{display:none;text-align:center;margin-bottom:30px}
body.done .success-hero{display:block}
.success-hero .check{
  width:74px;height:74px;border-radius:50%;background:#E6F7F2;color:var(--green);
  display:flex;align-items:center;justify-content:center;font-size:40px;margin:0 auto 26px;
  box-shadow:0 0 0 8px rgba(18,183,106,.09);animation:pop .35s ease;
}
.success-hero .check .material-symbols-rounded{
  font-size:42px;
  font-variation-settings:'FILL' 0,'wght' 600,'GRAD' 0,'opsz' 48;
}
@keyframes pop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}
.success-hero h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(24px,4vw,30px);letter-spacing:-.03em}

/* ---- Что прячем на экране успеха ---- */
body.done #formHeader{display:none}
body.done .steps{display:none}

/* ---- Выравниваем карточку и табличку по высоте ---- */
body.done .grid{align-items:stretch}
body.done .grid > div:first-child{display:flex;flex-direction:column}
body.done .success.show{flex:1;display:flex;flex-direction:column}
body.done .wrap{justify-content:flex-start;padding-top:clamp(28px,6vh,64px)}
label{margin-bottom:6px}

/* На невысоких экранах дожимаем ещё сильнее */
@media (max-height:879px) and (min-width:861px){
  .wrap{padding-top:14px}
  .steps{margin-top:14px}
  .field{margin-bottom:11px}
  .sub{display:none}
  .card{padding:18px}
  .step{padding:14px}
  .step p{font-size:12.5px}
  .status{margin-top:4px;min-height:13px}
  .qrbox{width:160px;height:160px}
}
@media (max-height:799px) and (min-width:861px){
  .steps{display:none}
  h1{font-size:23px;margin-bottom:4px}
  .card{padding:16px}
}

/* ---- Планшеты ---- */
@media (max-width:860px){
  .wrap{padding-left:20px;padding-right:20px;padding-top:clamp(18px,3vh,28px)}
  .grid{gap:20px}
  .steps{margin-top:20px}
  .badge{white-space:nowrap}
}

/* ---- Телефоны ---- */
@media (max-width:600px){
  header{padding:0 16px;height:60px}
  .badge{display:none}
  .wrap{padding-left:16px;padding-right:16px;padding-top:18px;padding-bottom:20px}
  .hbr,.sbr{display:none}                 /* переносы — естественные на узком экране */
  h1{font-size:clamp(24px,6.4vw,30px);line-height:1.15}
  .sub{display:none}
  .card{padding:18px}
  .steps{gap:12px}
  .step{min-width:0;flex:1 1 100%}
  /* 16px — чтобы iOS не зумил поле при фокусе */
  input[type=text],input[type=email],input[type=password]{font-size:16px}
  .slug-wrap{flex-wrap:nowrap}
  .plaque{margin-top:0}
  .doc-modal{max-height:92vh}
  .doc-head{padding:16px 18px}
  .doc-head h3{font-size:17px}
  .doc-body{padding:18px}
  .doc-foot{padding:14px 18px;flex-wrap:wrap}
  .doc-foot .btn{flex:1 1 auto}
  .doc-foot .btn.ghost{flex:1 1 100%;order:2}
}

/* ---- Узкие телефоны ---- */
@media (max-width:380px){
  .wrap{padding-left:12px;padding-right:12px}
  .card{padding:15px}
  .logo{font-size:16px}
  .qrbox{width:clamp(150px,60vw,200px);height:clamp(150px,60vw,200px)}
}