/* ==========================================================================
   QUIZ MODAL + TOP BANNER LINKS
   Shared by every page. Relies on the design tokens each page already
   declares in its own :root, so nothing here hardcodes a brand colour.
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOP BANNER LINKS
   These sit beside the logo rather than in the nav list, so they stay on
   screen at every width instead of disappearing behind the burger. Styled as
   outlined pills: present, but clearly a step below the solid accent CTA.
   -------------------------------------------------------------------------- */
.nav-left{display:flex;align-items:center;gap:18px;min-width:0}
.nav-banner{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-banner-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-body);font-size:12.5px;font-weight:500;line-height:1;color:rgba(255,255,255,0.62);background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.14);padding:7px 12px;border-radius:999px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:color .2s ease,border-color .2s ease,background .2s ease}
.nav-banner-link:hover{color:#fff;border-color:rgba(255,255,255,0.32);background:rgba(255,255,255,0.09)}
.nav-banner-link svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none;flex-shrink:0;opacity:.75}
.nav-banner-link:hover svg{opacity:1}
/* The quiz link is a button so it is reachable by keyboard and announces
   itself as an action rather than a destination. */
button.nav-banner-link{font-family:var(--font-body)}

@media(max-width:900px){
  .nav-left{gap:12px}
  .nav-banner{gap:6px}
  .nav-banner-link{font-size:12px;padding:6px 10px}
}
@media(max-width:560px){
  /* The mark alone still identifies the brand at this width, and dropping the
     wordmark is what buys room for both banner links plus the burger. */
  .nav-left .nav-wordmark{display:none}
  .nav-banner-link span{display:none}
  .nav-banner-link svg{width:15px;height:15px;opacity:1}
  /* Icon only leaves a small pill, so the target is set by height rather
     than by padding: 32px was under the comfortable minimum for a thumb. */
  .nav-banner-link{padding:0 13px;min-height:42px;justify-content:center}
}

/* --------------------------------------------------------------------------
   MODAL SHELL
   -------------------------------------------------------------------------- */
.fbq-overlay{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(10,10,10,0.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .28s ease}
.fbq-overlay.is-open{opacity:1;pointer-events:auto}
.fbq-panel{position:relative;width:100%;max-width:580px;max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:#fff;border-radius:var(--radius);box-shadow:0 30px 70px rgba(10,10,10,0.38);transform:translateY(14px) scale(.985);transition:transform .32s cubic-bezier(0.16,1,0.3,1);overflow:hidden}
.fbq-overlay.is-open .fbq-panel{transform:translateY(0) scale(1)}

.fbq-close{position:absolute;top:14px;right:14px;z-index:2;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s ease,background .2s ease}
.fbq-close:hover{border-color:var(--accent);background:var(--accent-soft)}
.fbq-close svg{width:14px;height:14px;stroke:var(--muted);stroke-width:2.2;fill:none}
.fbq-close:hover svg{stroke:var(--accent)}

/* --------------------------------------------------------------------------
   HEADER + PROGRESS
   -------------------------------------------------------------------------- */
.fbq-head{padding:30px 30px 0;flex-shrink:0}
.fbq-title{font-family:var(--font-head);font-size:22px;font-weight:600;line-height:1.2;letter-spacing:-0.025em;color:var(--ink);margin:0 40px 8px 0;text-wrap:balance}
.fbq-sub{font-size:14.5px;color:var(--muted);line-height:1.6;margin:0}
.fbq-progress{display:flex;align-items:center;gap:12px;padding:20px 30px 0;flex-shrink:0}
.fbq-progress-bar{flex:1;height:3px;border-radius:2px;background:var(--border);overflow:hidden}
.fbq-progress-fill{display:block;height:100%;width:100%;border-radius:2px;background:linear-gradient(90deg,var(--cyan),var(--accent));transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(0.16,1,0.3,1)}
.fbq-progress-label{font-size:11.5px;font-weight:500;color:var(--muted);letter-spacing:.04em;white-space:nowrap;font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------------------
   BODY + QUESTIONS
   -------------------------------------------------------------------------- */
.fbq-body{padding:24px 30px 4px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch}
.fbq-q{font-family:var(--font-head);font-size:19px;font-weight:600;line-height:1.3;letter-spacing:-0.02em;color:var(--ink);margin:0 0 18px;text-wrap:balance}

.fbq-opts{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0}
.fbq-opt{position:relative;display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border:1px solid var(--border);border-radius:10px;cursor:pointer;background:#fff;transition:border-color .18s ease,background .18s ease}
/* Hover shifts the border only. Filling it the same way a chosen option is
   filled made the two states impossible to tell apart under the cursor. */
.fbq-opt:hover{border-color:var(--muted)}
.fbq-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0}
.fbq-mark{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--border);flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;transition:border-color .18s ease}
.fbq-mark::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent);transform:scale(0);transition:transform .18s cubic-bezier(0.16,1,0.3,1)}
.fbq-opt-text{font-size:14.5px;line-height:1.45;color:var(--text)}
.fbq-opt.is-picked{border-color:var(--accent);background:var(--accent-soft)}
.fbq-opt.is-picked .fbq-mark{border-color:var(--accent)}
.fbq-opt.is-picked .fbq-mark::after{transform:scale(1)}
.fbq-opt input:focus-visible ~ .fbq-mark{outline:2px solid var(--accent);outline-offset:3px}

.fbq-field{margin-bottom:14px}
.fbq-field label{display:block;font-size:12px;font-weight:500;color:var(--text);margin-bottom:6px;letter-spacing:.01em}
.fbq-field .fbq-optional{color:var(--muted);font-weight:400}
.fbq-field input[type=text],.fbq-field input[type=email],.fbq-field input[type=tel],.fbq-field textarea{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:8px;font-family:var(--font-body);font-size:14px;color:var(--text);background:#fff;transition:border-color .2s,box-shadow .2s;outline:none;appearance:none}
.fbq-field input:focus,.fbq-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(34,83,249,0.12)}
.fbq-field textarea{min-height:96px;resize:vertical;line-height:1.55}

.fbq-legal{font-size:12px;line-height:1.55;color:var(--muted);margin:12px 0 0}
.fbq-legal a{color:var(--accent);text-decoration:none}
.fbq-legal a:hover{text-decoration:underline}

.fbq-err{display:none;font-size:13px;color:#B42318;background:#FEF3F2;border:1px solid #FECDCA;border-radius:8px;padding:11px 14px;margin-top:12px;line-height:1.55}
.fbq-err.is-shown{display:block}
.fbq-err a{color:#B42318;font-weight:500}

/* --------------------------------------------------------------------------
   FOOTER ACTIONS
   -------------------------------------------------------------------------- */
.fbq-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 30px 26px;flex-shrink:0}
.fbq-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:var(--font-body);font-size:15px;font-weight:500;padding:12px 22px;border-radius:10px;border:none;cursor:pointer;text-decoration:none;letter-spacing:-0.01em;transition:background .2s ease,transform .2s ease,border-color .2s ease,color .2s ease}
.fbq-btn:active{transform:translateY(0) scale(.985)}
.fbq-btn svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.2;fill:none;flex-shrink:0}
.fbq-next{background:var(--accent);color:#fff;position:relative}
.fbq-next:hover:not(:disabled){background:var(--accent-deep);transform:translateY(-1px)}
.fbq-next:disabled{background:var(--border);color:var(--muted);cursor:not-allowed}
.fbq-back{background:none;color:var(--muted);border:1px solid var(--border);padding:12px 18px}
.fbq-back:hover{color:var(--text);border-color:var(--muted)}
.fbq-back[hidden]{display:none}
.fbq-spacer{flex:1}

.fbq-next .fbq-btn-label{transition:opacity .15s ease}
.fbq-next.is-loading .fbq-btn-label{opacity:0}
.fbq-spin{position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border:2px solid rgba(255,255,255,0.35);border-top-color:#fff;border-radius:50%;opacity:0;animation:fbqSpin .7s linear infinite}
.fbq-next.is-loading .fbq-spin{opacity:1}
@keyframes fbqSpin{to{transform:rotate(360deg)}}

/* --------------------------------------------------------------------------
   RESULT
   -------------------------------------------------------------------------- */
.fbq-score{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.fbq-score-num{font-family:var(--font-head);font-size:52px;font-weight:600;letter-spacing:-0.04em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.fbq-score-label{font-size:13px;font-weight:500;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.fbq-score-track{height:6px;border-radius:3px;background:var(--border);overflow:hidden;margin:16px 0 22px}
.fbq-score-fill{display:block;height:100%;width:100%;border-radius:3px;background:linear-gradient(90deg,var(--cyan),var(--accent));transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(0.16,1,0.3,1)}
.fbq-result-h{font-family:var(--font-head);font-size:21px;font-weight:600;line-height:1.25;letter-spacing:-0.02em;color:var(--ink);margin:0 0 14px;text-wrap:balance}
.fbq-result-body p{font-size:14.5px;line-height:1.7;color:var(--muted);margin:0 0 13px;text-wrap:pretty}
.fbq-result-body p:last-child{margin-bottom:0}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media(max-width:560px){
  .fbq-overlay{padding:0;align-items:flex-end}
  .fbq-panel{max-width:none;max-height:92vh;border-radius:var(--radius) var(--radius) 0 0;transform:translateY(24px)}
  .fbq-head{padding:26px 20px 0}
  .fbq-title{font-size:20px}
  .fbq-progress{padding:18px 20px 0}
  .fbq-body{padding:20px 20px 4px}
  .fbq-foot{padding:16px 20px 22px}
  .fbq-q{font-size:17.5px}
  .fbq-score-num{font-size:44px}
  .fbq-btn{font-size:14.5px;padding:12px 18px}
}

@media (prefers-reduced-motion: reduce){
  .fbq-overlay,.fbq-panel,.fbq-progress-fill,.fbq-score-fill,.fbq-mark::after{transition-duration:0.01ms !important}
  .fbq-spin{animation-duration:0.01ms !important}
}