/* first-task.css. The Expensive Task Test. Layers on ai2020.css + home.css.
   Every spacing value is a multiple of 4 and every line-height is px. */
.ft-hero{padding:80px 0 96px}
.ft-wrap{max-width:820px}
.ft-hero h1{font:400 72px/68px var(--display);letter-spacing:.01em;text-transform:uppercase;color:var(--paper);margin:8px 0 20px}
.ft-hero .lede{font:400 19px/32px var(--sans);color:var(--dim);max-width:56ch;margin:0 0 48px}

.q{border:0;padding:0;margin:0 0 40px}
.q legend{font:600 18px/28px var(--sans);color:var(--paper);margin-bottom:20px;padding:0}
.q .qn{font:700 12px/16px var(--mono);color:var(--orange);margin-right:12px}
.opts{display:grid;gap:8px}
.opts--grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.opts label{
  display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  background:var(--black-2);border:1px solid var(--line);border-radius:8px;
  padding:16px 20px;transition:border-color .18s,background .18s;
}
.opts label:hover{border-color:var(--line-strong)}
.opts label:has(input:checked){border-color:var(--orange);background:var(--black-3)}
.opts input{margin:4px 0 0;accent-color:var(--orange);flex:0 0 auto}
.opts span{font:400 15px/24px var(--sans);color:var(--dim)}
.opts label:has(input:checked) span{color:var(--paper)}
.ft-go:disabled{opacity:.4;cursor:not-allowed}
.ft-hint{font:400 14px/20px var(--sans);color:var(--graphite);margin:12px 0 0}

.ft-result{margin-top:64px;border-top:1px solid var(--line);padding-top:48px}
.ft-result h2{font:400 56px/52px var(--display);text-transform:uppercase;color:var(--orange);margin:8px 0 20px}
.ft-math{font:500 16px/24px var(--mono);color:var(--paper);background:var(--black-2);
  border-left:4px solid var(--orange);padding:16px 20px;border-radius:4px;margin:0 0 24px}
.ft-body{font:400 17px/28px var(--sans);color:var(--dim);max-width:62ch;margin:0 0 32px}
.ft-step{background:var(--black-2);border:1px solid var(--line);border-radius:8px;padding:28px 32px;margin:0 0 40px}
.ft-step h3{font:600 13px/16px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);margin:0 0 12px}
.ft-step p{font:400 16px/28px var(--sans);color:var(--paper);margin:0}

.ft-gate{border-top:1px solid var(--line);padding-top:32px;margin-bottom:32px}
.ft-gate h3{font:600 20px/28px var(--sans);color:var(--paper);margin:0 0 8px}
.ft-gate p{font:400 15px/24px var(--sans);color:var(--dim);margin:0 0 20px;max-width:56ch}
.ft-form{display:flex;flex-wrap:wrap;gap:12px;align-items:center;max-width:560px}
.ft-form input[type=email]{flex:1 1 260px;min-width:0;background:var(--black-2);
  border:1px solid var(--line-strong);border-radius:4px;padding:16px 20px;
  font:400 16px/20px var(--sans);color:var(--paper)}
.ft-form input[type=email]::placeholder{color:var(--graphite)}
.ft-form input[type=email]:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(255,90,31,.16)}
.ft-form .form-note{flex:1 0 100%;margin:0}

.ft-again{margin:32px 0 0}
.ft-again button{background:none;border:0;padding:0;cursor:pointer;
  font:600 14px/20px var(--sans);color:var(--graphite);border-bottom:1px solid var(--line-strong)}
.ft-again button:hover{color:var(--orange);border-bottom-color:var(--orange)}

@media (max-width:760px){
  .ft-hero h1{font-size:48px;line-height:44px}
  .opts--grid{grid-template-columns:1fr}
  .ft-result h2{font-size:40px;line-height:36px}
}