/* Quizzes: /quiz/digital-marketing-career/, /quiz/ai-job-risk/, /scholarship/ (scholarship test + eligibility). Light page. */
.quiz{--muted:var(--ink-600);--line:rgba(11,26,51,.14);color:var(--ink-900)}
.quiz [hidden]{display:none!important}
.quiz a{color:var(--ink-900);text-decoration:none}
.quiz h1,.quiz h2,.quiz p{margin:0}
.quiz strong{font-weight:600}
.quiz button{font-family:var(--font-sans);cursor:pointer}
.quiz__in{scroll-margin-top:130px;max-width:760px;margin:0 auto;padding:32px 16px 64px;display:flex;flex-direction:column;gap:24px}
.quiz__intro,.quiz__result{display:flex;flex-direction:column;gap:20px}
.quiz__result{gap:20px}
.quiz__pill{align-self:flex-start;padding:8px 12px;border-radius:999px;background:var(--accent);color:var(--cream-100);font:600 14px/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase}
.quiz__intro h1{font:400 40px/1.1 var(--font-sans);letter-spacing:-.01em;text-wrap:balance}
.quiz__lead{font:400 17px/1.55 var(--font-sans);color:var(--muted);text-wrap:pretty}
.quiz__meta{display:flex;flex-wrap:wrap;gap:20px}
.quiz__meta span{display:flex;align-items:center;gap:8px;font:500 14px/1 var(--font-sans)}
.quiz__btn{height:48px;padding:0 20px;border-radius:12px;border:0;font:600 14px/1 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:8px}
.quiz__btn--navy{background:var(--navy-900);color:var(--cream-100)}
.quiz__btn--navy:hover{background:var(--navy-800)}
.quiz a.quiz__btn--orange{background:var(--orange-700);color:var(--cream-100)}
.quiz a.quiz__btn--line{border:1px solid var(--line)}
.quiz__elig{display:flex;flex-direction:column;gap:12px;padding-top:24px;border-top:1px solid var(--line)}
.quiz__elig h2{font:400 28px/1.15 var(--font-sans);text-wrap:balance}
.quiz__elig h2 strong{font-weight:600}
.quiz__elig p{font:400 15px/1.55 var(--font-sans);color:var(--muted)}
.quiz__elig p b{color:var(--ink-900)}
.quiz__table{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.quiz__table table{width:100%;border-collapse:collapse;font:400 15px/1.45 var(--font-sans)}
.quiz__table th,.quiz__table td{padding:12px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.quiz__table tr:last-child > *{border-bottom:0}
.quiz__table thead th{font-weight:600;background:var(--cream-200)}
.quiz__others{display:flex;flex-direction:column;gap:12px;padding-top:24px;border-top:1px solid var(--line)}
.quiz__others > span{font:600 14px/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.quiz__others > div{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.quiz__others a,.quiz__rec{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px;border-radius:12px;background:var(--cream-200);border:1px solid var(--line)}
.quiz__others a:hover,.quiz__rec:hover{border-color:rgba(11,26,51,.3)}
.quiz__others b{font:600 15px/1.3 var(--font-sans)}

.quiz__qs{display:flex;flex-direction:column;gap:24px}
.quiz__progress{display:flex;flex-direction:column;gap:12px}
.quiz__progress > div:first-child{display:flex;justify-content:space-between;align-items:center;font:500 14px/1 var(--font-sans);color:var(--muted)}
.quiz__progress b{font-weight:500}
.quiz__bar{height:6px;border-radius:10px;background:rgba(11,26,51,.1);overflow:hidden}
.quiz__bar i{display:block;height:100%;width:16%;background:var(--accent);border-radius:10px;transition:width 200ms ease-out}
.quiz__q{display:flex;flex-direction:column;gap:24px}
.quiz__q h2{font:600 22px/1.3 var(--font-sans);text-wrap:pretty}
.quiz__opts{display:flex;flex-direction:column;gap:12px}
.quiz__opt{min-height:56px;padding:16px 20px;border-radius:12px;background:#fff;border:1px solid rgba(11,26,51,.15);color:var(--ink-900);display:flex;align-items:center;gap:16px;text-align:left;font:500 15px/1.4 var(--font-sans)}
.quiz__opt:hover,.quiz__opt:focus-visible{border-color:var(--navy-900)}
.quiz__opt span{flex:none;width:28px;height:28px;border-radius:10px;border:1px solid rgba(11,26,51,.15);display:grid;place-items:center;font:600 14px/1 var(--font-sans)}
.quiz__back{align-self:flex-start;display:flex;align-items:center;gap:8px;padding:8px 0;border:0;background:none;color:var(--muted);font:600 14px/1 var(--font-sans)}

.quiz__form{display:flex;flex-direction:column;gap:20px;padding:20px;border-radius:20px;background:var(--cream-200);border:1px solid var(--line)}
.quiz__tick{width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--cream-100);display:grid;place-items:center}
.quiz__form h2{font:400 28px/1.2 var(--font-sans)}
.quiz__form p{font:400 15px/1.55 var(--font-sans);color:var(--muted)}
.quiz__form form{display:flex;flex-direction:column;gap:12px}
.quiz__form label{display:flex;flex-direction:column;gap:8px;font:500 14px/1 var(--font-sans)}
.quiz__form input{height:48px;padding:0 16px;border:1px solid var(--line);border-radius:12px;background:var(--cream-100);color:var(--ink-900);font:400 15px/1 var(--font-sans);outline:none}
.quiz__form input:focus{border-color:var(--navy-900)}

.quiz__card{display:flex;flex-direction:column;gap:16px;padding:20px;border-radius:20px}
.quiz__label{font:600 14px/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.quiz__card h1{font:600 28px/1.1 var(--font-sans);text-wrap:balance}
.quiz__card p{font:400 15px/1.6 var(--font-sans);opacity:.9;text-wrap:pretty}
.quiz__rec{gap:16px;padding:20px;border-radius:20px}
.quiz__rec > span{display:flex;flex-direction:column;gap:8px;min-width:0}
.quiz__rec small{font:600 14px/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase;color:var(--orange-700)}
.quiz__rec b{font:600 17px/1.3 var(--font-sans)}
.quiz__btns{display:flex;flex-direction:column;gap:12px}

@media (min-width:768px){
  .quiz__in{padding:64px 32px 96px}
  .quiz__intro h1{font-size:56px}
  .quiz__lead{font-size:18px}
  .quiz__start{align-self:flex-start}
  .quiz__others > div{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quiz__q h2{font-size:26px}
  .quiz__form,.quiz__card{padding:24px}
  .quiz__form h2{font-size:36px}
  .quiz__card h1{font-size:36px}
  .quiz__btns{flex-direction:row}
}
@media (min-width:1280px){
  .quiz__in{padding:80px 80px 96px}
  .quiz__intro h1{font-size:72px}
  .quiz__lead{font-size:20px}
  .quiz__q h2{font-size:26px}
  .quiz__form,.quiz__card{padding:32px}
  .quiz__form h2{font-size:44px}
  .quiz__card h1{font-size:40px}
}