/* /local site-needhelp.css — from zip needhelp.css; depends on site-pages.css */
/* ============================================================
   Нужна помощь — /need_help/
   Зависит от style.css, header.css, pages.css · префикс .nh-
   ============================================================ */
.nh-hero-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start;margin-top:28px}
.nh-hero h1{font-size:clamp(34px,4vw,52px);line-height:1.05}
.nh-steps{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:8px}
.nh-steps li{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:20px;background:var(--gray-2)}
.nh-steps .n{flex:none;width:38px;height:38px;border-radius:12px;background:#fff;color:var(--pink);display:grid;place-items:center;font-family:var(--font-montserrat);font-weight:800}
.nh-steps li:first-child .n{background:var(--pink);color:#fff}
.nh-steps b{display:block;font-family:var(--font-montserrat);font-size:16px}
.nh-steps small{display:block;margin-top:2px;font-size:13px;line-height:18px;color:var(--gray-dark)}
.nh-ph{position:relative;overflow:hidden;margin-top:16px;aspect-ratio:16/8;border-radius:var(--radius-app);background:var(--blush)}
.nh-ph .pg-hrt{width:56%;left:22%;top:8%;fill:#fff;opacity:.7}
.nh-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* форма */
.nh-form{position:sticky;top:96px;display:grid;gap:12px;padding:30px;border-radius:var(--radius-panel);background:#fff;box-shadow:var(--shadow-app)}
.hd[data-state="hidden"]~main .nh-form{top:24px}
.nh-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.nh-form .t{font-family:var(--font-montserrat);font-weight:700;font-size:26px;letter-spacing:-.02em}
.nh-form .s{margin:-4px 0 4px;font-size:14px;line-height:21px;color:var(--gray-dark)}
.nh-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.nh-page .fld{display:grid;gap:6px}
.nh-page .fld>span{font-size:13px;font-weight:600;color:var(--gray-dark)}
.nh-page .fld input,.nh-page .fld textarea{width:100%;box-sizing:border-box;border:0;border-radius:14px;background:var(--gray-2);padding:14px 16px;font:500 16px var(--font-onest);color:var(--blue-dark);outline:none;resize:vertical;transition:box-shadow .2s,background-color .2s}
.nh-page .fld input:focus,.nh-page .fld textarea:focus{background:#fff;box-shadow:0 0 0 2px var(--pink)}
.nh-page .fld.bad input,.nh-page .fld.bad textarea{box-shadow:0 0 0 2px #e05a5a}
.nh-chips{display:flex;flex-wrap:wrap;gap:6px}
.nh-chip{all:unset;cursor:pointer;font-size:13px;font-weight:600;line-height:18px;padding:7px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);transition:.2s}
.nh-chip:hover{box-shadow:inset 0 0 0 1px var(--pink)}
.nh-chip[aria-pressed="true"]{background:var(--blue-dark);color:#fff;box-shadow:none}
.nh-chip:focus-visible{box-shadow:var(--shadow-focus)}
.nh-file{position:relative;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:18px;border:1.5px dashed var(--brown);cursor:pointer;transition:background-color .2s,border-color .2s}
.nh-file:hover,.nh-file.drag{background:var(--blush);border-color:var(--pink)}
.nh-file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.nh-file .ic{flex:none;width:44px;height:44px;border-radius:14px;background:var(--pink-soft);color:var(--pink);display:grid;place-items:center}
.nh-file .ic svg{width:22px;height:22px}
.nh-file .tx{flex:1;min-width:0}
.nh-file b{display:block;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nh-file small{display:block;font-size:12px;line-height:17px;color:var(--gray-dark)}
.nh-file .rm{all:unset;position:relative;z-index:1;cursor:pointer;width:32px;height:32px;border-radius:50%;background:var(--gray-2);display:none;place-items:center}
.nh-file .rm svg{width:14px;height:14px}
.nh-file.has{border-style:solid;border-color:var(--pink);background:#fff}
.nh-file.has .rm{display:grid}
.nh-file.has .ic{background:var(--pink);color:#fff}
.nh-page .consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:18px;color:var(--gray-dark)}
.nh-page .consent input{accent-color:var(--pink);width:18px;height:18px;margin:0;flex:none}
.nh-page .consent a{color:var(--pink-dark)}
.nh-send{all:unset;cursor:pointer;height:60px;border-radius:18px;background:var(--pink);color:#fff;font:700 17px var(--font-onest);text-align:center;transition:background-color .2s}
.nh-send:hover{background:var(--pink-dark)}
.nh-send:disabled{opacity:.55;cursor:default}
.nh-send:focus-visible{box-shadow:var(--shadow-focus)}
.nh-err{margin:0;font-size:13px;color:#c43c3c}
.nh-err:empty{display:none}
.nh-form .ok{position:absolute;inset:0;border-radius:var(--radius-panel);background:#fff;display:grid;place-content:center;justify-items:center;gap:10px;padding:30px;text-align:center;opacity:0;pointer-events:none;transition:opacity .35s}
.nh-form .ok svg{width:56px;height:56px;padding:14px;border-radius:50%;background:var(--pink-soft);color:var(--pink)}
.nh-form .ok b{font-family:var(--font-montserrat);font-size:24px}
.nh-form .ok span{color:var(--gray-dark)}
.nh-form .again{all:unset;cursor:pointer;margin-top:6px;font-weight:700;color:var(--pink-dark)}
.nh-form.sent .ok{opacity:1;pointer-events:auto}

/* направления */
.nh-dirs{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;padding:48px 56px;border-radius:var(--radius-panel);background:var(--blush)}
.nh-dirs h2{margin:12px 0 0;font-family:var(--font-montserrat);font-weight:800;font-size:40px;line-height:44px;letter-spacing:-.04em}
.nh-dirs .l>p{margin:14px 0 0;font-size:15px;line-height:23px;color:var(--gray-dark)}
.nh-dirs .ph{position:relative;overflow:hidden;margin-top:22px;aspect-ratio:16/10;border-radius:24px;background:#fff}
.nh-dirs .ph .pg-hrt{width:56%;left:22%;top:10%;fill:var(--blush)}
.nh-dirs .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.nh-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:start}
.nh-tiles button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;height:100%;display:flex;flex-direction:column;gap:18px;padding:18px;border-radius:22px;background:#fff;transition:background-color .3s,color .3s,transform .3s var(--pg-ease)}
.nh-tiles button:hover{background:var(--blue-dark);color:#fff;transform:translateY(-3px)}
.nh-tiles button:focus-visible{box-shadow:var(--shadow-focus)}
.nh-tiles .no{font-family:var(--font-montserrat);font-weight:800;font-size:14px;color:var(--pink)}
.nh-tiles b{flex:1;font-family:var(--font-montserrat);font-weight:700;font-size:16px;line-height:21px}
.nh-tiles .go{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--pink-dark)}
.nh-tiles .go::before{content:"Выбрать в анкете"}
.nh-tiles .go svg{width:14px;height:14px}
.nh-tiles button:hover .go{color:#fff}
.nh-tiles button.on{box-shadow:inset 0 0 0 2px var(--pink)}

/* другие способы */
.nh-ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.nh-ways a{display:flex;flex-direction:column;gap:10px;padding:26px;border-radius:var(--radius-app);background:var(--gray-2);color:var(--blue-dark);transition:transform .35s var(--pg-ease),box-shadow .35s,background-color .35s}
.nh-ways a:hover{transform:translateY(-4px);background:#fff;box-shadow:inset 0 0 0 1px var(--brown),var(--shadow-app)}
.nh-ways a.dem{background:var(--blue-dark);color:#fff}
.nh-ways .k{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pink)}
.nh-ways b{font-family:var(--font-montserrat);font-weight:700;font-size:20px;line-height:25px}
.nh-ways .p{font-size:14px;line-height:21px;color:var(--gray-dark)}
.nh-ways a.dem .p{color:rgba(255,255,255,.7)}
.nh-ways .tel{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:8px;font-family:var(--font-montserrat);font-weight:800;font-size:18px;color:var(--pink-dark)}
.nh-ways a.dem .tel{color:#fff}
.nh-ways .tel svg{width:18px;height:18px;fill:none}

@media (max-width:900px){
  .nh-hero-g,.nh-dirs{grid-template-columns:minmax(0,1fr);gap:28px}
  .nh-form{position:static}
  .nh-dirs{padding:40px 28px}
  .nh-dirs h2{font-size:32px;line-height:36px}
  .nh-ways{grid-template-columns:minmax(0,1fr)}
  .nh-ph{display:none}
}
@media (max-width:640px){
  .nh-form{padding:22px 16px;border-radius:28px}
  .nh-two{grid-template-columns:minmax(0,1fr)}
  .nh-dirs{padding:30px 16px;border-radius:28px}
  .nh-tiles{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .nh-tiles button{padding:14px;gap:12px}
  .nh-tiles b{font-size:14px;line-height:19px}
  .nh-tiles .go::before{content:"Выбрать"}
  .nh-ways a{padding:22px 18px}
}
.nh-ways a:last-child .tel svg{fill:var(--pink-dark);width:20px;height:17px}