/* MGX Product Quiz - v6 (cream/peach refresh, 2026-08-06) */

/* Back button */
.mq-back{display:flex !important;align-items:center !important;gap:4px !important;color:#a0a6bc !important;font-size:0.8rem !important;font-weight:500 !important;cursor:pointer !important;margin-bottom:16px !important;padding:6px 0 !important;transition:color 0.15s !important;-webkit-tap-highlight-color:transparent !important;width:fit-content !important;}
.mq-back:hover{color:#2B3A72 !important;}
.mq-back-arrow{font-size:1.2rem !important;line-height:1 !important;}

/* Base */
.mq-wrap{font-family:'Neue Haas Unica','Helvetica Neue',Helvetica,Arial,sans-serif !important;background:#FAF1E1 !important;width:100% !important;max-width:100% !important;margin:0 !important;padding:0 !important;float:none !important;-webkit-text-size-adjust:100% !important;}
.mq-wrap,.mq-wrap *{box-sizing:border-box !important;}
.mq-serif{font-family:'MenoBannerCondensed','Meno Banner',Georgia,serif !important;font-style:normal !important;font-weight:400 !important;}

/* Hero */
.mq-hero{background:transparent !important;padding:44px 24px 30px !important;text-align:center !important;position:relative !important;}
.mq-hero a{text-decoration:none !important;border:none !important;}
.mq-hero img{height:28px !important;margin:0 auto 22px !important;display:block !important;filter:none !important;}
.mq-hero h1{color:#2B3A72 !important;font-size:2rem !important;font-weight:800 !important;margin:0 0 10px !important;line-height:1.2 !important;letter-spacing:-0.02em !important;}
.mq-hero h1 em{font-family:'MenoBannerCondensed','Meno Banner',Georgia,serif !important;font-style:normal !important;font-weight:400 !important;color:#2B3A72 !important;font-size:1.12em !important;}
.mq-hero p{color:#6a7090 !important;font-size:0.94rem !important;margin:0 auto !important;line-height:1.55 !important;max-width:400px !important;}

/* Results screen: logo-only header, no repeated headline/subtext */
.mq-hero.mq-hero-min{padding-bottom:12px !important;}
.mq-hero.mq-hero-min h1,.mq-hero.mq-hero-min p{display:none !important;}
.mq-hero.mq-hero-min img{margin-bottom:0 !important;}

/* Body */
.mq-body{max-width:540px !important;margin:0 auto !important;padding:20px 24px 80px !important;background:transparent !important;}

/* Progress */
#mqProg{display:flex !important;gap:6px !important;margin-bottom:32px !important;}
.mq-bar{flex:1 !important;height:3px !important;background:#e9dfc8 !important;border-radius:3px !important;transition:background 0.4s !important;}
.mq-bar.done{background:#2B3A72 !important;}
.mq-bar.active{background:linear-gradient(90deg,#2B3A72 50%,#e9dfc8 50%) !important;}

/* Steps */
.mq-step{display:none !important;animation:mqIn 0.35s ease !important;}
.mq-step.visible{display:block !important;}
@keyframes mqIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.mq-step-label{font-size:0.68rem !important;font-weight:600 !important;text-transform:uppercase !important;letter-spacing:2px !important;color:#a8a190 !important;margin-bottom:12px !important;}
.mq-step h2{color:#2B3A72 !important;font-size:1.35rem !important;font-weight:700 !important;margin:0 0 6px !important;line-height:1.3 !important;}
.mq-sub{color:#6a7090 !important;font-size:0.88rem !important;line-height:1.5 !important;margin:0 0 24px !important;}

/* Options */
.mq-opts{display:flex !important;flex-direction:column !important;gap:8px !important;}
.mq-opt{background:#fff !important;border:1.5px solid #ece3d2 !important;border-radius:12px !important;padding:16px 18px !important;cursor:pointer !important;transition:all 0.15s ease !important;display:flex !important;align-items:center !important;justify-content:space-between !important;min-height:48px !important;-webkit-tap-highlight-color:transparent !important;}
.mq-opt:hover{border-color:#2B3A72 !important;}
.mq-opt:active{background:#f7f3ea !important;border-color:#2B3A72 !important;}
.mq-opt.picked{border-color:#2B3A72 !important;background:#fbf7ee !important;}
.mq-lbl{flex:1 !important;}
.mq-lbl-t{color:#2B3A72 !important;font-size:0.92rem !important;font-weight:600 !important;margin-bottom:1px !important;}
.mq-lbl-d{color:#8a90a5 !important;font-size:0.78rem !important;line-height:1.4 !important;}
.mq-arrow{color:#ccd0dc !important;font-size:1.3rem !important;font-weight:300 !important;margin-left:12px !important;transition:color 0.15s !important;}
.mq-opt:hover .mq-arrow{color:#2B3A72 !important;}

/* Email form */
.mq-email-wrap{background:#fff !important;border:1.5px solid #ece3d2 !important;border-radius:14px !important;padding:24px 22px !important;margin-top:4px !important;}
.mq-email-wrap input{width:100% !important;padding:13px 16px !important;border:1.5px solid #ece3d2 !important;border-radius:8px !important;font-size:16px !important;font-family:inherit !important;outline:none !important;transition:border-color 0.2s !important;background:#fff !important;margin-bottom:10px !important;color:#2B3A72 !important;-webkit-appearance:none !important;appearance:none !important;}
.mq-email-wrap input::placeholder{color:#b0b5c9 !important;}
.mq-email-wrap input:focus{border-color:#2B3A72 !important;}
.mq-cta-btn{width:100% !important;padding:14px !important;background:#2B3A72 !important;color:#fff !important;border:none !important;border-radius:999px !important;font-size:0.82rem !important;font-weight:700 !important;letter-spacing:1.5px !important;text-transform:uppercase !important;cursor:pointer !important;transition:background 0.2s !important;font-family:inherit !important;min-height:48px !important;-webkit-tap-highlight-color:transparent !important;-webkit-appearance:none !important;appearance:none !important;}
.mq-cta-btn:hover{background:#1e2a54 !important;}
.mq-cta-btn:active{background:#161d3e !important;}
.mq-cta-btn:disabled{opacity:0.4 !important;cursor:not-allowed !important;}
.mq-fine{text-align:center !important;margin-top:12px !important;font-size:0.7rem !important;color:#b0b5c9 !important;}
.mq-skip{display:block !important;text-align:center !important;margin-top:16px !important;color:#a0a6bc !important;font-size:0.8rem !important;cursor:pointer !important;transition:color 0.2s !important;text-decoration:none !important;padding:8px 0 !important;-webkit-tap-highlight-color:transparent !important;}
.mq-skip:hover{color:#2B3A72 !important;}

/* Results */
.mq-results{text-align:center !important;}
.mq-results h2{color:#2B3A72 !important;margin-bottom:6px !important;font-size:1.5rem !important;}
.mq-results h2 em{font-family:'MenoBannerCondensed','Meno Banner',Georgia,serif !important;font-style:normal !important;font-weight:400 !important;font-size:1.1em !important;}
.mq-results .mq-sub{margin-bottom:32px !important;}

/* Coupon box — leads the results, peach ticket card */
.mq-coupon{background:#F4D8CA !important;border-radius:18px !important;padding:24px 28px !important;margin:0 auto 32px !important;text-align:center !important;max-width:360px !important;width:100% !important;position:relative !important;}
.mq-coupon-label{font-size:0.65rem !important;font-weight:700 !important;text-transform:uppercase !important;letter-spacing:2.5px !important;color:rgba(43,58,114,0.55) !important;margin-bottom:12px !important;}
.mq-coupon-code{display:flex !important;align-items:center !important;justify-content:center !important;gap:10px !important;width:100% !important;background:none !important;border:none !important;border-top:1.5px dashed rgba(43,58,114,0.28) !important;border-bottom:1.5px dashed rgba(43,58,114,0.28) !important;padding:14px 0 !important;margin:0 0 10px !important;font-size:1.7rem !important;font-weight:800 !important;color:#2B3A72 !important;letter-spacing:4px !important;font-family:inherit !important;cursor:pointer !important;transition:background 0.15s !important;-webkit-tap-highlight-color:transparent !important;position:relative !important;}
.mq-coupon-code::before,.mq-coupon-code::after{content:"" !important;position:absolute !important;top:50% !important;transform:translateY(-50%) !important;width:20px !important;height:20px !important;border-radius:50% !important;background:#FAF1E1 !important;}
.mq-coupon-code::before{left:-38px !important;}
.mq-coupon-code::after{right:-38px !important;}
.mq-coupon-code:hover,.mq-coupon-code:focus-visible{background:rgba(43,58,114,0.06) !important;}
.mq-coupon-code:active{background:rgba(43,58,114,0.1) !important;}
.mq-coupon-code-icon{width:16px !important;height:16px !important;flex-shrink:0 !important;color:#2B3A72 !important;opacity:0.55 !important;transition:opacity 0.15s !important;}
.mq-coupon-code:hover .mq-coupon-code-icon{opacity:0.95 !important;}
.mq-coupon-hint{font-size:0.68rem !important;font-weight:700 !important;color:rgba(43,58,114,0.55) !important;margin-bottom:10px !important;transition:color 0.15s !important;}
.mq-coupon-hint.copied{color:#3d7a4a !important;}
.mq-coupon-exp{font-size:0.7rem !important;color:rgba(43,58,114,0.45) !important;margin-bottom:6px !important;}
.mq-coupon-note{font-size:0.72rem !important;color:rgba(43,58,114,0.4) !important;}

/* Product cards */
.mq-cards{display:flex !important;align-items:stretch !important;gap:18px !important;justify-content:center !important;margin-bottom:24px !important;}
.mq-card{background:#fff !important;border-radius:16px !important;border:1.5px solid #ece3d2 !important;padding:0 !important;width:240px !important;text-align:center !important;position:relative !important;display:flex !important;flex-direction:column !important;overflow:hidden !important;transition:transform 0.2s,box-shadow 0.2s !important;}
.mq-card:hover{transform:translateY(-2px) !important;box-shadow:0 6px 20px rgba(43,58,114,0.08) !important;}
.mq-card-info{display:flex !important;flex-direction:column !important;flex:1 !important;padding:22px 20px 24px !important;}
.mq-best{position:absolute !important;top:12px !important;right:12px !important;background:#F4D8CA !important;color:#2B3A72 !important;font-size:0.55rem !important;font-weight:700 !important;letter-spacing:1.5px !important;text-transform:uppercase !important;padding:5px 11px !important;border-radius:999px !important;z-index:2 !important;}
.mq-card-img{display:flex !important;align-items:center !important;justify-content:center !important;background:transparent !important;padding:24px 24px 4px !important;}
.mq-card img{width:130px !important;height:130px !important;object-fit:contain !important;display:block !important;}
.mq-card-name{color:#2B3A72 !important;font-size:0.95rem !important;font-weight:700 !important;margin-bottom:3px !important;}
.mq-card-dose{font-size:0.62rem !important;color:#a0a6bc !important;text-transform:uppercase !important;letter-spacing:1.5px !important;font-weight:600 !important;margin-bottom:10px !important;}
.mq-card-desc{font-size:0.8rem !important;color:#6a7090 !important;line-height:1.5 !important;margin-bottom:16px !important;}
.mq-shop-btn{display:inline-block !important;padding:10px 28px !important;background:#2B3A72 !important;color:#fff !important;text-decoration:none !important;border-radius:999px !important;font-size:0.7rem !important;font-weight:700 !important;letter-spacing:1.5px !important;text-transform:uppercase !important;transition:background 0.2s !important;min-height:40px !important;line-height:20px !important;margin-top:auto !important;align-self:center !important;-webkit-tap-highlight-color:transparent !important;}
.mq-shop-btn:hover{background:#1e2a54 !important;color:#fff !important;}
.mq-card:not(.mq-primary) .mq-shop-btn{background:transparent !important;color:#2B3A72 !important;border:1.5px solid #2B3A72 !important;padding:8.5px 26px !important;}
.mq-card:not(.mq-primary) .mq-shop-btn:hover{background:#2B3A72 !important;color:#fff !important;}

/* Trust badges */
.mq-trust{display:flex !important;flex-direction:row !important;flex-wrap:wrap !important;align-items:center !important;justify-content:center !important;gap:10px 22px !important;margin:0 auto 28px !important;padding:16px 24px !important;background:#E8ECD9 !important;border-radius:999px !important;width:fit-content !important;max-width:100% !important;}
.mq-trust-item{display:flex !important;align-items:center !important;gap:8px !important;font-size:0.78rem !important;font-weight:600 !important;color:#3d4a2e !important;line-height:1.3 !important;white-space:nowrap !important;}
.mq-trust-icon{width:14px !important;height:14px !important;flex-shrink:0 !important;color:#5c7048 !important;}
.mq-trust-sep{display:none !important;}

/* Footer links */
.mq-browse{display:inline-block !important;color:#2B3A72 !important;font-weight:600 !important;font-size:0.88rem !important;text-decoration:none !important;margin-bottom:10px !important;padding:8px 0 !important;}
.mq-browse:hover{text-decoration:underline !important;}
.mq-retake{display:block !important;color:#a0a6bc !important;font-size:0.78rem !important;text-decoration:none !important;transition:color 0.2s !important;padding:8px 0 !important;}
.mq-retake:hover{color:#2B3A72 !important;}

/* ── Mobile ── */
@media(max-width:600px){
  .mq-hero{padding:28px 20px 22px !important;}
  .mq-hero img{height:24px !important;margin-bottom:16px !important;}
  .mq-hero h1{font-size:1.55rem !important;}
  .mq-hero p{font-size:0.84rem !important;max-width:300px !important;}
  .mq-body{padding:16px 16px 60px !important;}
  .mq-back{margin-bottom:12px !important;}
  #mqProg{margin-bottom:20px !important;}
  .mq-step-label{margin-bottom:10px !important;}
  .mq-step h2{font-size:1.15rem !important;}
  .mq-sub{font-size:0.84rem !important;margin-bottom:20px !important;}
  .mq-opts{gap:6px !important;}
  .mq-opt{padding:14px 16px !important;border-radius:12px !important;}
  .mq-lbl-t{font-size:0.88rem !important;}
  .mq-lbl-d{font-size:0.75rem !important;}
  .mq-email-wrap{padding:20px 16px !important;border-radius:12px !important;}
  .mq-email-wrap input{padding:14px 14px !important;}
  .mq-cta-btn{padding:15px !important;font-size:0.8rem !important;}

  /* Results mobile */
  .mq-results h2{font-size:1.25rem !important;}
  .mq-coupon{padding:20px 20px !important;border-radius:16px !important;margin-bottom:24px !important;max-width:100% !important;}
  .mq-coupon-code{font-size:1.4rem !important;letter-spacing:3px !important;}
  .mq-coupon-code::before{left:-30px !important;width:16px !important;height:16px !important;}
  .mq-coupon-code::after{right:-30px !important;width:16px !important;height:16px !important;}
  .mq-cards{flex-direction:column !important;align-items:center !important;gap:12px !important;}
  .mq-card{width:100% !important;max-width:100% !important;border-radius:14px !important;flex-direction:row !important;align-items:center !important;text-align:left !important;}
  .mq-card-img{padding:18px !important;flex-shrink:0 !important;}
  .mq-card img{width:80px !important;height:80px !important;}
  .mq-card-info{flex:1 !important;padding:18px 18px 18px 0 !important;}
  .mq-card-name{font-size:0.9rem !important;}
  .mq-card-dose{margin-bottom:6px !important;}
  .mq-card-desc{font-size:0.76rem !important;margin-bottom:12px !important;line-height:1.45 !important;}
  .mq-shop-btn,.mq-card:not(.mq-primary) .mq-shop-btn{padding:10px 20px !important;font-size:0.68rem !important;width:auto !important;text-align:center !important;align-self:flex-start !important;}
  .mq-best{top:10px !important;right:10px !important;font-size:0.5rem !important;padding:4px 9px !important;}
  .mq-trust{gap:8px 14px !important;padding:14px 18px !important;border-radius:16px !important;margin-bottom:22px !important;}
  .mq-trust-item{font-size:0.72rem !important;white-space:normal !important;}
}

/* Small phones */
@media(max-width:380px){
  .mq-hero h1{font-size:1.35rem !important;}
  .mq-hero p{font-size:0.8rem !important;}
  .mq-body{padding:14px 14px 50px !important;}
  .mq-step h2{font-size:1.05rem !important;}
  .mq-opt{padding:12px 14px !important;}
  .mq-card-img{padding:14px !important;}
  .mq-card img{width:68px !important;height:68px !important;}
  .mq-coupon-code{font-size:1.2rem !important;letter-spacing:2px !important;}
  .mq-trust{border-radius:14px !important;}
  .mq-trust-item{font-size:0.68rem !important;}
}

/* MGX brand-font consistency (2026-09-02): the quiz was the only surface not on the
   site font. .mq-wrap shipped Inter and every question heading fell through to the
   theme's Roboto, while the rest of microgenix.net renders Neue Haas Unica. The
   serif accents (.mq-serif, .mq-hero h1 em, .mq-results h2 em) are deliberately NOT
   touched and keep Meno Banner. Backup: ~/backups_claude/quiz-font-20260902_014225/ */
.mq-wrap h1,.mq-wrap h2,.mq-wrap h3{font-family:'Neue Haas Unica','Helvetica Neue',Helvetica,Arial,sans-serif !important;}