.ank{max-width:1080px;padding-block:24px 40px}
#intro,#result{max-width:820px}
.ank .eyebrow{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);font-weight:600;margin-bottom:10px}
.ank h1{font-size:34px;line-height:1.1;margin:0 0 16px}
.ank .lead{color:var(--ink-60);max-width:52ch;margin:0 0 24px}
.ank-status{position:fixed;top:12px;right:16px;background:var(--blue);color:#fff;padding:6px 12px;border-radius:20px;font-size:13px;z-index:5;opacity:.95}
.btn.ghost{background:transparent;color:var(--blue);border:1px solid var(--line);box-shadow:none}

.ank-block{margin:28px 0;padding-top:8px}
.ank-block > h2{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60);margin:0 0 4px}
.ank-block .bhint{color:var(--ink-note);font-size:14px;margin:0 0 18px}

.q{padding:22px 0;border-top:1px solid var(--line)}
.q:first-of-type{border-top:0}
.q .qtext{font-weight:500;margin:0 0 4px}
.q .qhint{color:var(--ink-note);font-size:14px;margin:0 0 12px}
.q .req{color:var(--blue)}

.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;gap:10px;align-items:flex-start;font-size:15px;cursor:pointer;line-height:1.4}
.opt input{margin-top:3px;accent-color:var(--blue);width:auto}
.opt .oh{color:var(--ink-note);font-size:13px;display:block}
.scale5{display:flex;flex-wrap:wrap;gap:6px}
.scale5 .opt{flex:1;min-width:140px;border:1px solid var(--line);border-radius:10px;padding:10px}
.scale5 .opt.on{border-color:var(--blue);background:#f2f7ff}

/* Матриця відповідей — справжня сітка: рядки-пункти × колонки-варіанти.
   Горизонтальне гортання на вузьких екранах; перша колонка «липка». */
.matrix-wrap{overflow-x:auto;margin-top:8px;border:1px solid var(--line);border-radius:12px;-webkit-overflow-scrolling:touch}
.mgrid{display:grid;grid-template-columns:minmax(170px,1.6fr) repeat(var(--mcols,3),minmax(64px,1fr))}
.mgrid .mh{font-size:12px;line-height:1.25;color:var(--ink-60);text-align:center;padding:10px 6px;display:flex;align-items:flex-end;justify-content:center;background:#eef4ff;border-bottom:1px solid var(--line)}
.mgrid .mh-first{position:sticky;left:0;z-index:2;justify-content:flex-start;text-align:left}
.mgrid .mrl{font-size:14px;line-height:1.35;padding:12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:3px;position:sticky;left:0;z-index:1;background:#fff}
.mgrid .mrl .mrl-n{color:var(--ink-60);font-variant-numeric:tabular-nums}
.mgrid .mrl .oh{color:var(--ink-note);font-size:12px}
.mgrid .mc{display:flex;align-items:center;justify-content:center;padding:10px 6px;border-bottom:1px solid var(--line);border-left:1px solid #eef1f6;cursor:pointer}
.mgrid .mc:hover{background:#f5f8ff}
.mgrid .mc input{width:auto;accent-color:var(--blue);margin:0;transform:scale(1.15)}
/* останній рядок без нижньої лінії */
.mgrid .mrl:last-of-type,.mgrid > .mc:last-child{border-bottom:0}

.ev{margin-top:10px}
.ev input{width:100%;font:inherit;font-size:15px;padding:8px 10px;border:1px solid var(--line);border-radius:8px}
.other-in{margin-top:8px}

#result h2{font-size:26px;margin:0 0 8px}
.scorecards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
@media(max-width:560px){.scorecards{grid-template-columns:1fr}}
.scard{border:1px solid var(--line);border-radius:14px;padding:20px}
.scard .sname{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-60)}
.scard .snum{font-size:44px;font-weight:700;color:var(--blue);line-height:1.1;font-variant-numeric:tabular-nums}
.scard .slevel{color:var(--ink-80)}
.brk{font-size:14px;color:var(--ink-60)}
.brk b{color:var(--ink-80);font-weight:500}

/* Поля вводу профілю/контактів (site.css .cf працює лише в <form class=cf>) */
.ank .fields2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:14px 0}
@media(max-width:560px){.ank .fields2{grid-template-columns:1fr}}
.ank .field label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-60);margin-bottom:6px}
.ank .field input{width:100%;font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--black)}
.ank .field input:focus{border-color:var(--blue);outline:none}
.ank .field select{width:100%;font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--black)}
.ank .field select:focus{border-color:var(--blue);outline:none}
.ank .field select:disabled{background:#f5f7fb;color:var(--ink-60);cursor:not-allowed}
.ank .intro-guide{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;margin:24px 0 28px;max-width:820px}
@media(max-width:640px){.ank .intro-guide{grid-template-columns:1fr}}
.ank .ig-block h2{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin:0 0 8px}
.ank .ig-block p{margin:0;color:var(--ink-80);font-size:15px;line-height:1.5}
.ank .ig-block ul{margin:0;padding-left:18px;color:var(--ink-80);font-size:15px;line-height:1.5}
.ank .ig-block li{padding:2px 0}
.ank .field.full{grid-column:1/-1}
.ank .field .req,.ank .q .req{color:var(--blue)}
.ank .field .opt-note{text-transform:none;letter-spacing:0;color:var(--ink-60);font-weight:400}
.ank .err{color:var(--bad,#b23b3b);font-size:13px;margin:6px 0 0}
.ank .kat-cascade{margin:6px 0 4px}
.ank .kat-auto{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}
.ank .kat-auto .ka-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--ink-60);background:#f2f7ff;padding:3px 8px;border-radius:6px}
.ank .kat-auto .ka-type{font-size:13px;color:var(--ink-80);background:#f1fadb;padding:3px 10px;border-radius:20px}
.ank .agree{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-60);line-height:1.45;margin:12px 0;max-width:56ch;cursor:pointer}
.ank .agree input{width:auto;margin-top:3px;accent-color:var(--blue)}
.ank .steprow{margin-top:20px}

.btn:disabled{opacity:.45;cursor:not-allowed}

/* Умовне підпитання — візуально вкладене */
.ank .sub-q{margin:14px 0 4px;padding:12px 0 4px 16px;border-left:2px solid var(--blue)}
.ank .sub-q .qtext{font-weight:500;font-size:15px;margin:0 0 10px}

/* Продовжити пізніше */
.ank .resume-later{margin-top:18px}
.ank .btn.sm{padding:6px 12px;font-size:14px}
.ank .resume-form{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.ank .resume-form input{flex:1;min-width:220px;font:inherit;font-size:15px;padding:8px 12px;border:1px solid var(--line);border-radius:8px}

/* ── Навігація по блоках: вертикальний список збоку (десктоп) / випадне меню (мобільний) ── */
/* Форма стає двоколонковою: список блоків ліворуч + питання праворуч. */
#ank-form{display:block}
@media(min-width:860px){
  #ank-form{display:grid;grid-template-columns:250px minmax(0,1fr);gap:34px;align-items:start}
}
#ank-main{max-width:780px}

.ank-nav{background:transparent;border:0;box-shadow:none;padding:0;margin:0 0 16px}
@media(min-width:860px){ .ank-nav{position:sticky;top:16px;margin:0} }

.audpill{display:block;font-size:12px;color:var(--ink-60);margin-bottom:10px}
.audpill.on{color:var(--blue);font-weight:600}

.modetoggle{display:flex;width:100%;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;margin-bottom:12px}
.modetoggle .mt{flex:1;font:inherit;font-size:13px;border:0;background:0;padding:8px 10px;cursor:pointer;color:var(--ink-60)}
.modetoggle .mt.on{background:var(--blue);color:#fff}

.navlist{display:flex;flex-direction:column;gap:3px}
.navchip{display:flex;align-items:center;gap:10px;width:100%;border:0;border-radius:10px;background:transparent;padding:9px 12px;font:inherit;font-size:14px;line-height:1.3;cursor:pointer;color:var(--ink-80);text-align:left}
.navchip:hover{background:#eef4ff}
.navchip .k{font-weight:700;color:var(--blue);min-width:18px;text-align:center;font-size:13px}
.navchip .n{flex:1;white-space:normal}
.navchip .c{font-size:12px;color:var(--ink-note);font-variant-numeric:tabular-nums}
.navchip.on{background:#eef4ff;color:var(--black);box-shadow:inset 3px 0 0 var(--blue)}
.navchip.on .n{font-weight:600}
.navchip.ok .k,.navchip.ok .c{color:var(--innovation-ink,#137a3f)}

.progress{height:4px;background:#e6ebf5;border-radius:3px;overflow:hidden;margin-top:14px}
.progress i{display:block;height:100%;background:var(--blue);transition:width .3s ease}
.navpct{font-size:12px;color:var(--ink-60);margin-top:6px}

/* Мобільний: список згортається у випадне меню */
.navmenu-btn{display:none}
@media(max-width:859px){
  .navmenu-btn{display:flex;align-items:center;gap:10px;width:100%;border:1px solid var(--line);border-radius:10px;background:#fff;padding:11px 13px;font:inherit;font-size:14px;cursor:pointer;color:var(--ink-80)}
  .navmenu-btn .nm-lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60)}
  .navmenu-btn .nm-cur{flex:1;text-align:left;font-weight:600}
  .navmenu-btn .nm-ar{color:var(--blue);transition:transform .2s ease}
  .ank-nav.menuopen .navmenu-btn .nm-ar{transform:rotate(180deg)}
  .navlist{display:none;margin-top:6px;padding:6px;border:1px solid var(--line);border-radius:10px;background:#fff}
  .ank-nav.menuopen .navlist{display:flex}
}

/* Голова блоку + пейджер + примітка */
.blockhead{margin:20px 0 22px}
.blockhead .eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);font-weight:600}
.blockhead h2{font-size:26px;line-height:1.15;margin:8px 0 8px}
.blockhead .bhint{color:var(--ink-60);margin:0;max-width:60ch}
.pager{display:flex;justify-content:space-between;gap:12px;margin:30px 0 8px}
.ank .note{background:#f2f7ff;border-left:3px solid var(--blue);padding:12px 14px;border-radius:0 8px 8px 0;color:var(--ink-80);font-size:14px;margin:0 0 18px}

/* focus */
.fmeta{display:flex;justify-content:space-between;color:var(--ink-60);font-size:13px;margin:12px 0 18px}
.fintro{text-align:center;padding:36px 0 12px}
.fintro .big-k{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#eef4ff;color:var(--blue);font-size:28px;font-weight:700;margin-bottom:16px}
.fintro h2{font-size:28px;margin:0 0 10px}
.fintro p{color:var(--ink-60);max-width:52ch;margin:0 auto}
.fnav{display:flex;align-items:center;gap:14px;margin:30px 0 8px}
.fnav .btn{min-width:120px}
.kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border:1px solid var(--line);border-radius:5px;font-size:12px;color:var(--ink-note);font-variant-numeric:tabular-nums;background:#fff}
/* перевірка R */
.note.bad{background:#fff5f4;border-left-color:var(--bad,#b23b3b);color:var(--ink-80)}
.note.ok{background:#f1fadb;border-left-color:var(--innovation-ink,#137a3f);color:var(--ink-80)}
.misslist{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.misschip{font:inherit;font-size:12px;border:1px solid var(--line);border-radius:6px;background:#fff;padding:4px 8px;cursor:pointer;color:var(--blue);font-variant-numeric:tabular-nums}
.misschip:hover{border-color:var(--blue);background:#eef4ff}