/* Remote Eligibility Check (/check/). Mobile first. Uses tokens.css and the .hero-slab, .frame,
   .pill, .btn and .kit-form patterns in site.css. One soft shape only (the slab glow). */
/* rules below set display on some blocks, so the hidden attribute must still win */
#qz-app [hidden]{display:none!important}
.qz-slab{padding:32px 16px}
.qz-intro{position:relative;max-width:560px;margin:0 auto;text-align:center}
.qz-intro .mascot-inline{display:block;width:88px;height:auto;margin:0 auto 20px}
.qz-intro .pill{margin:0 auto 12px}
.qz-intro h1{font-size:clamp(30px,6vw,52px);line-height:1;letter-spacing:-.04em;color:var(--ink);margin:0}
.qz-intro .lede{margin:20px auto 0;font-size:clamp(16px,1.4vw,18px);line-height:1.6;color:rgba(14,14,16,.7);max-width:480px}
.qz-start{margin-top:28px}
.qz-fine{margin:16px 0 0;font-size:13px;line-height:1.5;color:rgba(14,14,16,.72);text-align:center}

.qz-card{position:relative;max-width:600px;margin:0 auto;text-align:left}
/* glass: translucent near-white over the violet slab, instead of a flat opaque card */
.qz-card .frame-in{position:relative;isolation:isolate;overflow:hidden;background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);padding:20px}
.qz-card .frame-in::before{content:"";position:absolute;z-index:-1;top:-60px;right:-50px;width:180px;height:180px;border-radius:46% 54% 60% 40% / 50% 42% 58% 50%;background:linear-gradient(145deg,var(--violet),var(--muted-2));opacity:.16;pointer-events:none}

/* top row: back on the left, step count on the right */
.qz-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.qz-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px 0 10px;border:0;border-radius:var(--radius-pill);background:none;color:var(--muted);font:500 14px/1 "DM Sans",sans-serif;cursor:pointer;transition:background-color .2s ease,color .2s ease}
.qz-back:hover{background:rgba(255,255,255,.6);color:var(--ink)}
.qz-back:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.qz-step{margin:0;font-size:13px;line-height:18px;font-weight:600;letter-spacing:.01em;color:var(--muted)}

/* six segments, violet as they are completed */
.qz-progress{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:4px}
.qz-progress span{display:block;height:4px;border-radius:var(--radius-pill);background:rgba(14,43,111,.12)}
.qz-progress span.is-done{background:var(--violet)}

.qz-panel{margin-top:28px;min-width:0}
.qz-question{margin:0;font-size:clamp(20px,2.4vw,24px);line-height:1.3;letter-spacing:-.02em;color:var(--ink)}
.qz-opts{display:grid;gap:10px;margin-top:20px}

/* answer pills: 56px tall, label on the left, radio ring on the right */
.qz-opt{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:56px;padding:12px 20px;border:1px solid rgba(14,14,16,.14);border-radius:var(--radius-pill);background:rgba(255,255,255,.82);color:var(--ink);font-family:"DM Sans",sans-serif;font-size:15px;font-weight:500;line-height:1.35;letter-spacing:-.01em;text-align:left;cursor:pointer;transition:transform .2s cubic-bezier(.4,0,.2,1),border-color .2s ease,background-color .2s ease,box-shadow .2s ease}
.qz-opt::after{content:"";flex:none;width:20px;height:20px;border-radius:50%;border:2px solid rgba(14,14,16,.22);background:#fff;transition:border-color .2s ease,box-shadow .2s ease}
.qz-opt:hover{border-color:var(--violet);background:#fff;transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.qz-opt:hover::after{border-color:var(--violet)}
.qz-opt:active{transform:scale(.99)}
.qz-opt:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.qz-opt.is-chosen{background:var(--ink);border-color:var(--ink);color:#fff}
.qz-opt.is-chosen::after{border-color:#fff;box-shadow:inset 0 0 0 4px var(--ink);background:#fff}
.qz-opt:disabled{cursor:default;transform:none}
.qz-opt:disabled:not(.is-chosen){color:var(--muted-2);box-shadow:none;background:rgba(255,255,255,.6)}

/* headings take focus from script when a screen changes; they are not controls, so no ring */
.qz-question:focus,.qz-result-title:focus,.qz-intro h1:focus{outline:none}

/* result: only the earned band is ever shown, as one badge (a medal on a ribbon), never all three */
.qz-result{text-align:center}
.qz-badge{position:relative;width:96px;height:112px;margin:4px auto 0}
.qz-ribbon{position:absolute;top:8px;width:26px;height:44px;border-radius:3px}
.qz-ribbon-l{left:22px;transform:rotate(-14deg);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}
.qz-ribbon-r{right:22px;transform:rotate(14deg);clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}
.qz-disc{position:absolute;left:50%;bottom:0;width:64px;height:64px;margin-left:-32px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px -10px rgba(14,43,111,.4),inset 0 1px 0 rgba(255,255,255,.5);border:3px solid rgba(255,255,255,.9)}
.qz-mark{width:26px;height:26px}
.qz-mark::before{content:"";display:block;width:100%;height:100%}

/* Wide reach: green tier, a five point star mark */
.qz-badge-wide .qz-ribbon{background:linear-gradient(180deg,var(--green),var(--green-2))}
.qz-badge-wide .qz-disc{background:linear-gradient(145deg,var(--green-2),var(--green))}
.qz-badge-wide .qz-mark::before{background:var(--ink);clip-path:polygon(50% 0%,63% 35%,100% 35%,70% 57%,82% 91%,50% 70%,18% 91%,30% 57%,0% 35%,37% 35%)}

/* Partial reach: violet tier, a check mark */
.qz-badge-partial .qz-ribbon{background:linear-gradient(180deg,var(--violet),var(--violet-2))}
.qz-badge-partial .qz-disc{background:linear-gradient(145deg,var(--violet-2),var(--violet))}
.qz-badge-partial .qz-mark{border-bottom:4px solid var(--ink);border-right:4px solid var(--ink);width:11px;height:19px;margin:0 auto;transform:translateY(-2px) rotate(40deg)}
.qz-badge-partial .qz-mark::before{display:none}

/* Narrow reach: ink tier, an arrow-up mark (room to grow, not a failure grade) */
.qz-badge-narrow .qz-ribbon{background:linear-gradient(180deg,var(--muted),var(--ink))}
.qz-badge-narrow .qz-disc{background:linear-gradient(145deg,var(--muted-2),var(--muted))}
.qz-badge-narrow .qz-mark::before{background:#fff;clip-path:polygon(50% 0%,100% 45%,68% 45%,68% 100%,32% 100%,32% 45%,0% 45%)}

.qz-eyebrow{margin:16px 0 0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.qz-result-title{margin:8px 0 0;font-size:clamp(28px,4.4vw,38px);line-height:1.1;letter-spacing:-.03em;color:var(--ink)}
.qz-callout{margin-top:24px;padding:20px;border:1px solid rgba(14,14,16,.12);border-radius:var(--radius-md);background:rgba(255,255,255,.6);text-align:left}
.qz-callout-label{margin:0;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.qz-callout-name{margin:6px 0 0;font:700 20px/26px "Syne","DM Sans",sans-serif;letter-spacing:-.02em;color:var(--ink)}
.qz-tip-label{margin-top:16px}
.qz-tip{margin:6px 0 0;font-size:16px;line-height:26px;color:var(--ink)}
.qz-form{margin-top:28px;padding-top:24px;border-top:1px solid rgba(14,14,16,.12);text-align:left}
/* gate: only a headline sits above the form here, so no divider line is needed */
.qz-gate .qz-form{margin-top:24px;padding-top:0;border-top:0}

.qz-cta{margin-top:28px;padding-top:24px;border-top:1px solid rgba(14,14,16,.12)}
.qz-cta-text{margin:0 0 16px;font-size:16px;line-height:26px;color:var(--ink)}
.qz-cta .btn{width:100%}

@media (min-width:768px){
  .qz-slab{padding:48px 32px}
  .qz-card .frame-in{padding:28px}
}

/* step transition and the badge dropping in like a ribbon falling into place, off for reduced motion */
@media (prefers-reduced-motion:no-preference){
  .qz-enter{animation:qz-in .26s cubic-bezier(.16,1,.3,1) both}
  .qz-badge.qz-drop{animation:qz-drop .5s cubic-bezier(.34,1.4,.4,1) both}
}
@keyframes qz-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes qz-drop{
  0%{opacity:0;transform:translateY(-64px) rotate(-8deg)}
  70%{opacity:1;transform:translateY(4px) rotate(2deg)}
  100%{opacity:1;transform:translateY(0) rotate(0)}
}
@media (prefers-reduced-motion:reduce){
  .qz-opt,.qz-back{transition:none}
  .qz-opt:hover{transform:none}
}