/* «Гуру подберёт» (/podbor) */
.quiz{position:relative;margin:8px 0 var(--section);padding:clamp(22px,3.4vw,48px);border-radius:var(--r-xl);background:var(--grad-tint);overflow:hidden}
.quiz>*:not(.leaves){position:relative;z-index:1}
.quiz__head{display:flex;align-items:center;gap:clamp(16px,3vw,36px);margin-bottom:clamp(18px,2.4vw,28px)}
.quiz__guru{width:clamp(84px,11vw,150px);height:auto;flex:none}
.quiz__head h1{font-size:var(--fs-h1);margin:6px 0 8px}
.quiz__head .lead{max-width:52ch;color:var(--text-2)}

.quiz__box{background:var(--surface);border-radius:var(--r-lg);padding:clamp(18px,2.6vw,32px)}
.quiz__top{display:flex;align-items:center;gap:16px;margin-bottom:18px;font-size:13px;font-weight:600;color:var(--muted);font-variant-numeric:var(--num)}
.quiz__bar{flex:1;height:6px;border-radius:3px;background:var(--line)}
.quiz__bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--grad-btn);transition:width .35s var(--ease-out)}
.quiz__form{display:grid;gap:22px}
.qstep{display:none;border:0;padding:0;margin:0;min-width:0}
.qstep.is-active{display:block;animation:fadeIn .3s var(--ease)}
.qstep legend{display:block;padding:0;margin-bottom:16px;font-size:clamp(20px,2.2vw,26px);font-weight:var(--fw-head);letter-spacing:var(--ls-tight)}
.qstep legend small{font-size:14px;font-weight:500;color:var(--muted);margin-left:6px;letter-spacing:0}
.qopts{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.qopt{position:relative;display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--r-md);border:1.5px solid var(--line-2);background:#fff;cursor:pointer;transition:border-color .2s,background .2s,transform .2s var(--ease)}
.qopt:hover{border-color:var(--green-2);background:var(--tint-3)}
.qopt input{position:absolute;opacity:0;width:1px;height:1px}
.qopt__ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--tint-2);color:var(--green)}
.qopt__ic .i{width:21px;height:21px}
.qopt__t b{display:block;font-size:15px;font-weight:600;line-height:1.25}
.qopt__t small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.35}
.qopt:has(input:checked){border-color:var(--green);background:var(--tint-2);box-shadow:inset 0 0 0 1px var(--green)}
.qopt:has(input:checked) .qopt__ic{background:var(--green);color:#fff}
.qopt:has(input:focus-visible){outline:2px solid var(--green);outline-offset:2px}
.qopt.is-off{opacity:.45;cursor:not-allowed}
.quiz__nav{display:flex;justify-content:space-between;gap:12px}
.quiz__nav [data-qnext]{margin-left:auto}

.quiz__result{display:grid;gap:22px}
.quiz__result[hidden]{display:none}
.quiz__rhead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.quiz__rhead h2{margin:6px 0 6px;outline:0}
.quiz__sum{font-size:14px;color:var(--text-2)}
.qres{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.qres__item{display:grid;gap:10px;align-content:start}
.qres__why{padding:12px 14px;border-radius:var(--r-md);background:var(--surface);font-size:13.5px;line-height:1.45}
.qres__why b{display:block;font-size:12.5px;color:var(--green-deep);margin-bottom:4px}
.qres__why ul{margin:0;padding-left:18px}
.qres__over{display:inline-block;margin-bottom:6px;padding:2px 8px;border-radius:6px;background:#fdf3dd;color:#8a5a00;font-size:12px;font-weight:600}
.qlead{display:flex;gap:18px;align-items:center;padding:clamp(18px,2.4vw,26px);border-radius:var(--r-lg);background:var(--surface)}
.qlead>img{width:96px;height:auto;flex:none}
.qlead b{display:block;font-size:18px;margin-bottom:4px}
.qlead p{font-size:14px;color:var(--text-2);margin:0 0 12px}
.qlead__form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.qlead__form .field{flex:1 1 180px;min-width:0}
.qlead__form .btn{flex:none}

@media (max-width:860px){.qres{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .quiz{padding:18px 14px;border-radius:var(--r-lg)}
  .quiz__head{align-items:flex-start}
  .qopts{grid-template-columns:1fr}
  .qopt{padding:12px}
  .qres{grid-template-columns:1fr 1fr;gap:10px}
  .quiz__rhead{flex-direction:column}
  .qlead{flex-direction:column;align-items:flex-start}
  .qlead>img{width:72px}
  .qlead__form .btn{width:100%}
}