/* Г45 «Боли и решения» (#needs). Только токены family.css — тёмная и светлая темы меняются сами.
   Главная мысль раздела по просьбе владельца: акцент на РЕШЕНИИ, поэтому боль набрана мельче и приглушённо,
   а решение — крупнее, жирнее и цветом текста; метки «Боль»/«Решение» — единственное место, где допустимы капсулы. */

/* Широкая карточка «частному мастеру»: слева суть, справа список. Левая кромка ледяная — отличает её от сетки. */
.nd-solo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:14px 28px;align-items:center;margin:0 0 14px;padding:16px 18px 16px 20px;background:var(--p1);border:1px solid var(--edge);border-left:3px solid var(--ice);border-radius:var(--r1);box-shadow:var(--sh)}
.nd-st h3{margin:0 0 6px;font:800 italic clamp(18px,1.8vw,22px)/1.1 var(--disp);text-transform:uppercase;letter-spacing:-.005em;color:var(--fg)}
.nd-st p{margin:0;color:var(--mu);font-size:14px;line-height:1.45}
.nd-sl{list-style:none;margin:0;padding:0;display:grid;gap:2px}
/* строка списка ≤34 px там, где текст помещается в одну строку; длинные переносятся и растут сами */
.nd-sl li{position:relative;padding:5px 0 5px 26px;min-height:30px;display:flex;align-items:center;font-size:14.5px;line-height:1.3;color:var(--fg);border-bottom:1px solid var(--edge)}
.nd-sl li:last-child{border-bottom:0}
.nd-sl li::before{content:"\2713";position:absolute;left:0;top:50%;transform:translateY(-50%);width:18px;height:18px;display:grid;place-items:center;border-radius:6px;background:var(--gr-soft);color:var(--gr);font:700 12px/1 var(--f)}

/* Сетка из девяти карточек: 3 колонки на широких экранах, 2 на средних, 1 на телефоне */
.ndg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.nd{display:flex;flex-direction:column;gap:0;min-width:0;padding:15px 16px;background:var(--p1);border:1px solid var(--edge);border-radius:var(--r1);box-shadow:var(--sh)}
.nd p{margin:0}
.nd-tag{display:inline-block;margin:0 8px 0 0;padding:2px 9px;border-radius:999px;font:700 10.5px/1.5 var(--f);letter-spacing:.06em;text-transform:uppercase;vertical-align:1px}

/* Боль — тише: мельче и приглушённым цветом, метка малиновая */
.nd-pain{font-size:13.2px;line-height:1.45;color:var(--mu);padding-bottom:12px}
.nd-pain .nd-tag{background:var(--pk-soft);color:var(--pk)}

/* Решение — главное: крупнее, жирнее, основным цветом текста; от боли отделено волосяной линией */
.nd-fix{font-size:15.5px;line-height:1.4;font-weight:700;color:var(--fg);padding-top:12px;border-top:1px solid var(--edge);flex:1}
.nd-fix .nd-tag{background:var(--ice-soft);color:var(--ice-t)}

/* Бейдж «✦ ИИ-помощник» — капсула, как и метки; стоит сразу после метки «Решение» */
.nd-ai{display:inline-block;margin:0 8px 0 0;padding:2px 9px;border-radius:999px;font:700 10.5px/1.5 var(--f);letter-spacing:.04em;color:var(--ice-t);border:1px solid var(--ice-t);vertical-align:1px;white-space:nowrap}

/* Призыв внизу — как .t5hook в try5.css: панель, кнопка и приглушённое пояснение */
.nd-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:14px;background:var(--p1);border:1px solid var(--edge);border-radius:var(--r1);padding:14px}
.nd-cta .btn{min-height:44px}
.nd-cta span{color:var(--mu);font-size:13.5px;flex:1;min-width:220px}

@media (max-width:1100px){
  .ndg{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .ndg{grid-template-columns:minmax(0,1fr)}
  .nd-solo{grid-template-columns:minmax(0,1fr);padding:14px 14px 14px 16px}
  /* цель нажатия ≥44 px у строк не нужна (это не кнопки), но запас по высоте читается лучше на узком экране */
  .nd-sl li{font-size:14px}
  .nd-cta .btn{flex:1 1 100%}
}