/* process section — scoped under .process-wrap (desktop) / .process-wrap-m (mobile).
   Includes popup styles (scoped under #process-popup).
   Skipped: *, html/body resets — already in tokens.css / hero.css. */

/* ── desktop ─────────────────────────────────────────────────────────── */
.process-wrap{width:100%;background:var(--white)}
.process-wrap-m{display:none}

.process-wrap .d-inner{max-width:1440px;margin-inline:auto;padding:110px 140px}
.process-wrap .d-title{font-weight:400;font-size:var(--fs-h2);line-height:var(--lh-h2)}
.process-wrap .d-sub{margin-top:24px;max-width:666px;font-size:var(--fs-body);line-height:var(--lh-body)}
.process-wrap .d-line{display:none}
.process-wrap .d-steps{display:flex;gap:30px;margin-top:40px;position:relative;align-items:flex-start}
.process-wrap .d-steps::before{content:'';position:absolute;top:36px;left:0;right:0;height:2px;background:var(--surface)}
.process-wrap .d-step{flex:1;min-width:0;display:flex;flex-direction:column}
.process-wrap .circle{width:72px;height:72px;border-radius:50%;background:var(--surface);
  display:flex;align-items:center;justify-content:center}
.process-wrap .num{font-size:24px;color:var(--ink)}
.process-wrap .st-title{margin-top:16px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink)}
.process-wrap .st-desc{margin-top:8px;font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--muted)}
.process-wrap .st-desc.dim{color:var(--placeholder)}
.process-wrap .d-note{margin-top:8px;font-size:12px;line-height:14.76px;color:var(--ink)}
.process-wrap .d-btn{margin-top:40px;width:100%;height:50px;
  background:var(--accent);border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;
  border:0;cursor:pointer}
.process-wrap .d-btn span{font-size:var(--fs-body-sm);line-height:21px;color:var(--ink)}

/* ── mobile — horizontal scroll carousel ─────────────────────────────── */
@media(max-width:767px){
  .process-wrap{display:none}
  .process-wrap-m{display:block;padding-bottom:64px}
}
.process-wrap-m .m-head{padding:64px 28px 0}
.process-wrap-m .m-title{max-width:319px;font-weight:400;font-size:24px;line-height:26.4px}
.process-wrap-m .m-sub{margin-top:16px;max-width:331px;font-size:16px;line-height:20.8px}
.process-wrap-m .m-track{display:flex;gap:20px;margin-top:36px;padding:0 28px;scroll-padding:0 28px;
  overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  -ms-overflow-style:none;scrollbar-width:none}
.process-wrap-m .m-track::-webkit-scrollbar{display:none}
.process-wrap-m .m-step{flex:0 0 260px;scroll-snap-align:start}
.process-wrap-m .circle{width:72px;height:72px;border-radius:50%;background:var(--surface);
  display:flex;align-items:center;justify-content:center;position:relative}
.process-wrap-m .m-step:not(:last-child) .circle::after{content:"";position:absolute;left:72px;top:36px;
  width:208px;height:1px;background:var(--surface)}
.process-wrap-m .num{font-size:24px;color:var(--ink)}
.process-wrap-m .st-title{margin-top:16px;font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--ink)}
.process-wrap-m .st-desc{margin-top:12px;font-size:16px;line-height:20.8px;color:var(--muted)}
.process-wrap-m .st-desc.dim{color:var(--placeholder)}
.process-wrap-m .m-btn{margin:36px 0 0 28px;width:319px;height:50px;
  background:var(--accent);border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;
  border:0;cursor:pointer}
.process-wrap-m .m-btn span{font-size:var(--fs-body-sm);line-height:21px;color:var(--ink)}

/* ── popup «Оформление заявки» (native <dialog>) ─────────────────────── */
#process-popup{
  border:0;border-radius:12px;padding:40px;
  width:565px;max-width:calc(100vw - 40px)}
#process-popup[open]{display:flex;flex-direction:column}
#process-popup::backdrop{background:rgba(0,0,0,.3)}
#process-popup .pp-close{position:absolute;top:12px;right:13px;width:33px;height:33px;
  border:0;background:none;padding:0;cursor:pointer}
#process-popup .pp-close img{width:33px;height:33px;display:block}
#process-popup .pp-title{font-size:32px;line-height:48.64px;color:var(--ink);font-weight:400}
#process-popup .pp-sub{margin-top:9px;max-width:485px;font-size:15px;line-height:22.2px;color:var(--ink)}
#process-popup .pp-fields{display:flex;gap:8px;margin-top:24px}
#process-popup .field{flex:1;min-width:0;height:50px;background:#fff;
  border:1px solid #D6D0CD;border-radius:50px;display:flex;align-items:center;padding-left:20px}
#process-popup .field input{flex:1;min-width:0;border:0;background:none;outline:none;
  font-family:inherit;font-size:15px;line-height:22.8px;color:var(--ink);padding-right:20px}
#process-popup .field input::placeholder{color:#B5B0AC}
#process-popup .pp-submit{margin-top:24px;width:100%;height:50px;
  background:var(--accent);border-radius:40px;border:0;cursor:pointer;
  font-family:inherit;font-size:15px;line-height:21px;color:var(--ink)}
#process-popup .pp-submit:disabled{opacity:.6;cursor:not-allowed}
#process-popup .pp-status{margin-top:12px;font-size:14px;line-height:20px;text-align:center}
#process-popup .pp-status.ok{color:#1a7a1a}
#process-popup .pp-status.err{color:#c00}
#process-popup .pp-consent{margin-top:16px;text-align:center;
  font-size:15px;line-height:21px;color:#B5B0AC}

@media(max-width:767px){
  #process-popup{padding:24px 20px;width:343px}
  #process-popup .pp-title{font-size:24px;line-height:31px}
  #process-popup .pp-fields{flex-direction:column;gap:12px}
}