/* VAIY - diagnostic page styles. Foundations live in brand.css */

/* page container - overrides the wide default in brand.css */
.wrap{ max-width:780px; margin:0 auto; padding:0 26px; }
main{ padding:54px 0 90px; }
.hd{ max-width:780px; margin:0 auto; padding:17px 26px; display:flex; align-items:center; justify-content:space-between; }

header{ border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:20; }
.hd{ max-width:780px; margin:0 auto; padding:17px 26px; display:flex; align-items:center; justify-content:space-between; }
.hd a.back{ font-size:14px; color:var(--mute); text-decoration:none; }
.hd a.back:hover{ color:var(--ink); }
.kicker{ font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin:0 0 18px; font-weight:500; }
h1{ font-family:'Sora',system-ui,sans-serif; margin:0; font-weight:700; letter-spacing:-0.035em; line-height:1.05;
      font-size:clamp(32px,4.6vw,50px); max-width:18ch; }
h2{ font-family:'Sora',system-ui,sans-serif; margin:0; font-weight:700; letter-spacing:-0.028em; line-height:1.12;
      font-size:clamp(23px,2.9vw,32px); max-width:24ch; }
.lede{ margin:22px 0 0; font-size:17px; line-height:1.62; color:var(--mute); max-width:58ch; }
p{ margin:16px 0 0; }
main{ padding:54px 0 90px; }
.step{ display:none; }
.step.on{ display:block; }
.prog{ margin:0 0 38px; }
.bar{ height:2px; background:var(--line); position:relative; }
.bar i{ position:absolute; inset:0 auto 0 0; background:var(--accent); width:0; transition:width .3s ease; }
.plabel{ margin:12px 0 0; font-size:12.5px; letter-spacing:0.07em; text-transform:uppercase; color:var(--mute); }
.q{ padding:28px 0; border-top:1px solid var(--line); }
.q:first-of-type{ border-top:none; padding-top:4px; }
.q .qt{ margin:0 0 15px; font-size:17.5px; font-weight:500; line-height:1.45; max-width:54ch; }
.q .hint{ margin:-8px 0 15px; font-size:14px; color:var(--mute); max-width:52ch; }
.q .opt{ display:block; margin:0 0 9px; }
.q .opt:last-child{ margin-bottom:0; }
.q label{
    display:flex; gap:13px; align-items:flex-start; cursor:pointer;
    padding:13px 15px; border:1px solid var(--line); border-radius:3px;
    font-size:15.5px; line-height:1.5; color:var(--mute);
    transition:border-color .12s ease, background .12s ease, color .12s ease;
  }
.q label:hover{ border-color:var(--accent); color:var(--ink); }
.q input{ margin:4px 0 0; accent-color:var(--accent); flex:0 0 auto; }
.q label:has(input:checked){ border-color:var(--accent); background:var(--sel); color:var(--ink); }
.q .opt.na label{ font-style:italic; }
@media (min-width:620px){
    .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
  }
.q .gname{
    margin:20px 0 10px; font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--accent); font-weight:500;
  }
.q .gname:first-of-type{ margin-top:4px; }
.txtin{
    width:100%; max-width:460px; font:inherit; font-size:15.5px; color:var(--ink);
    background:var(--bg); border:1px solid var(--line); border-radius:2px; padding:12px 13px;
  }
.txtin:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.row{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:36px; }
button, .btn{
    font:inherit; font-size:15px; font-weight:500; cursor:pointer;
    border:1px solid var(--accent); background:var(--accent); color:#fff;
    padding:13px 26px; border-radius:999px; text-decoration:none; display:inline-block;
  }
button:hover, .btn:hover{ opacity:.86; }
button.ghost, .btn.ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
button.ghost:hover{ border-color:var(--ink); opacity:1; }
.warn{ margin:16px 0 0; font-size:14px; color:var(--accent); }
.rhead{ margin:30px 0 0; padding:30px 30px 26px; background:var(--panel); border-radius:4px; }
.rhead .rl{ font-size:12px; letter-spacing:0.13em; text-transform:uppercase; color:var(--accent); font-weight:500; }
.rhead h3{ margin:12px 0 0; font-size:clamp(24px,3.4vw,34px); font-weight:600; letter-spacing:-0.03em; line-height:1.12; max-width:24ch; }
.rhead p{ margin:16px 0 0; font-size:16.5px; line-height:1.62; color:var(--ink); max-width:56ch; }
.levels{ margin:32px 0 0; }
.lv{ display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:baseline;
       padding:20px 0; border-top:1px solid var(--line); }
.lv:last-child{ border-bottom:1px solid var(--line); }
.lv .n{ font-size:12px; font-weight:600; color:var(--accent); letter-spacing:0.05em; }
.lv h4{ margin:0; font-size:17.5px; font-weight:600; letter-spacing:-0.015em; }
.lv p{ margin:7px 0 0; font-size:15px; color:var(--mute); line-height:1.55; max-width:52ch; }
.chip{ font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; font-weight:500;
         padding:5px 11px; border-radius:999px; white-space:nowrap; border:1px solid var(--line); color:var(--mute); }
.chip.s1{ opacity:.7; }
.chip.s3{ border-color:var(--accent); color:var(--accent); }
.chip.s4{ background:var(--accent); border-color:var(--accent); color:#fff; }
.gate{ margin:44px 0 0; padding-top:34px; border-top:1px solid var(--line); }
.gate h3{ margin:0; font-size:21px; font-weight:600; letter-spacing:-0.02em; }
.gate p.g{ margin:14px 0 0; color:var(--mute); font-size:16px; max-width:52ch; line-height:1.6; }
.gate ul{ margin:18px 0 0; padding:0 0 0 20px; color:var(--mute); font-size:15.5px; line-height:1.6; max-width:54ch; }
.gate li{ margin:0 0 7px; }
form{ margin:28px 0 0; display:grid; gap:15px; max-width:440px; }
label.fl{ display:block; font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--mute); margin-bottom:7px; }
input[type=text], input[type=email]{
    width:100%; font:inherit; font-size:15.5px; color:var(--ink);
    background:var(--bg); border:1px solid var(--line); border-radius:2px; padding:12px 13px;
  }
input[type=text]:focus, input[type=email]:focus{ outline:2px solid var(--accent); outline-offset:1px; }
.consent{ display:flex; gap:11px; align-items:flex-start; font-size:14px; color:var(--mute); line-height:1.55; }
.consent input{ margin:3px 0 0; accent-color:var(--accent); }
.privacy{ margin:2px 0 0; font-size:12.5px; color:var(--mute); line-height:1.55; max-width:46ch; }
.gaps{ margin:28px 0 0; }
.gap{ padding:22px 0; border-top:1px solid var(--line); display:grid; grid-template-columns:auto 1fr; gap:18px; }
.gap b{ font-size:12px; font-weight:600; color:var(--accent); letter-spacing:0.05em; padding-top:3px; }
.gap h4{ margin:0; font-size:16.5px; font-weight:600; letter-spacing:-0.015em; }
.gap p{ margin:8px 0 0; color:var(--mute); font-size:15.5px; line-height:1.6; max-width:56ch; }
.note{
    margin:30px 0 0; padding:22px 24px; border-left:2px solid var(--accent);
    background:var(--panel); font-size:15.5px; line-height:1.62; color:var(--mute); max-width:60ch;
  }
.note b{ color:var(--ink); font-weight:500; }
footer{ border-top:1px solid var(--line); margin-top:70px; padding:26px 0 60px; font-size:13px; color:var(--mute); }
footer a{ color:var(--mute); }
.tiny{ margin:26px 0 0; font-size:12.5px; color:var(--mute); line-height:1.6; max-width:62ch; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.skip:focus{ left:26px; top:10px; z-index:50; background:var(--ink); color:var(--bg); padding:9px 15px; border-radius:3px; }
@media print{ header,footer,.gate,.row,.prog{ display:none !important; } .step{ display:block !important; } }

/* explanatory copy under the role picker - visible on landing, gone once
   the visitor starts. Gives the page something to read, for humans and
   for search. */
.explain{
  margin:clamp(54px,6vw,80px) 0 0;
  padding:clamp(34px,4vw,46px) 0 0;
  border-top:1px solid var(--line);
}
.explain h2{
  font-family:var(--display); font-weight:700; letter-spacing:-.028em;
  font-size:clamp(21px,2.4vw,27px); line-height:1.15;
  margin:38px 0 12px; max-width:26ch;
}
.explain h2:first-child{ margin-top:0; }
.explain p{
  margin:0 0 15px; font-size:16px; line-height:1.62;
  color:var(--mute); max-width:68ch;
}