/* ========================================
   QueStudy - Main stylesheet

   Design tokens are NOT defined in this file.
   The single canonical token block lives in the theme stylesheet
   (style.css). This file only consumes them via var(--qs-*).

   A second :root block used to sit here and disagreed with style.css on
   18 token values, so the rendered theme depended on which stylesheet
   loaded last. main.css is enqueued with no dependency on the theme
   stylesheet, so that order was arbitrary. Do not reintroduce it.
   ======================================== */
html{scroll-behavior:smooth}
.qs-container{max-width:var(--qs-container);margin:0 auto;padding:0 24px}
.qs-container-narrow{max-width:var(--qs-container-narrow);margin:0 auto;padding:0 24px}
.qs-main,.qs-front-page,.qs-page{min-height:50vh}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--qs-gray-100)}
::-webkit-scrollbar-thumb{background:var(--qs-gray-300);border-radius:var(--qs-radius-full)}
::-webkit-scrollbar-thumb:hover{background:var(--qs-gray-400)}

/* ===== SECTION HEADERS ===== */
.qs-section-header{text-align:center;max-width:700px;margin:0 auto 48px}
.qs-section-badge{display:inline-flex;align-items:center;padding:4px 14px;font-size:.8125rem;font-weight:600;color:var(--qs-primary);background:var(--qs-primary-50);border-radius:var(--qs-radius-full);margin-bottom:16px;letter-spacing:.02em}
.qs-section-title{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:var(--qs-heading-weight,800);color:var(--qs-dark);line-height:1.15;margin:0 0 16px;text-align:center;letter-spacing:-.02em}
.qs-section-desc{font-size:clamp(1rem,1.2vw,1.125rem);color:var(--qs-text-light);line-height:1.7;margin:0;text-align:center}

/* ===== BUTTONS ===== */
.qs-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--qs-font);font-weight:600;text-decoration:none;border:2px solid transparent;border-radius:var(--qs-radius);cursor:pointer;transition:all var(--qs-transition);line-height:1.2;white-space:nowrap;user-select:none;position:relative;overflow:hidden}
.qs-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,0.08) 100%);pointer-events:none}
.qs-btn:focus-visible{outline:2px solid var(--qs-primary);outline-offset:2px}
.qs-btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.qs-btn-sm{padding:6px 14px;font-size:.8125rem;border-radius:var(--qs-radius-sm)}
.qs-btn-md{padding:10px 20px;font-size:.875rem}
.qs-btn-lg{padding:14px 28px;font-size:1rem;border-radius:var(--qs-radius-md)}
.qs-btn-xl{padding:18px 36px;font-size:1.125rem;border-radius:var(--qs-radius-md)}
.qs-btn-full{width:100%;justify-content:center}
  .qs-btn-primary{background:var(--qs-primary);color:var(--qs-on-primary);border-color:var(--qs-primary)}
.qs-btn-primary:hover{background:var(--qs-primary-dark);border-color:var(--qs-primary-dark);transform:translateY(-2px);box-shadow:0 4px 14px rgba(37,99,235,0.35)}
.qs-btn-primary:active{transform:translateY(0)}
.qs-btn-outline{background:transparent;color:var(--qs-primary);border-color:var(--qs-primary)}
.qs-btn-outline:hover{background:var(--qs-primary);color:#fff;transform:translateY(-2px);box-shadow:0 4px 14px rgba(37,99,235,0.25)}
.qs-btn-outline:active{transform:translateY(0)}
.qs-btn-ghost{background:transparent;color:var(--qs-text-light);border-color:transparent}
.qs-btn-ghost:hover{background:var(--qs-primary-50);color:var(--qs-primary)}
.qs-btn-text{background:transparent;color:var(--qs-text-light);border-color:transparent;font-weight:500}
.qs-btn-text:hover{color:var(--qs-primary)}
.qs-btn-white{background:#fff;color:var(--qs-primary);border-color:#fff}
.qs-btn-white:hover{background:rgba(255,255,255,0.92);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.12)}
.qs-btn-ghost-white{background:rgba(255,255,255,0.1);color:#fff;border-color:rgba(255,255,255,0.25)}
.qs-btn-ghost-white:hover{background:rgba(255,255,255,0.18);border-color:#fff;transform:translateY(-2px)}
.qs-btn-glow{position:relative}
.qs-btn-glow::before{content:'';position:absolute;inset:-4px;border-radius:inherit;background:linear-gradient(135deg,var(--qs-primary),var(--qs-primary-light));opacity:0;z-index:-1;filter:blur(12px);transition:opacity var(--qs-transition-slow)}
.qs-btn-glow:hover::before{opacity:0.45}
.qs-btn-glow:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(37,99,235,0.3)}

/* ===== HEADER ===== */
.qs-header{position:sticky;top:0;z-index:1000;background:var(--qs-header-bg,rgba(255,255,255,0.92));border-bottom:1px solid var(--qs-border);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%)}
.qs-header-static{position:relative}
.qs-header-inner{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.qs-header-left{display:flex;align-items:center;gap:32px;flex:1}
.qs-mobile-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px;border-radius:var(--qs-radius-sm)}
.qs-hamburger-line{width:22px;height:2px;background:var(--qs-dark);border-radius:var(--qs-radius-full);transition:all var(--qs-transition)}
.qs-logo{display:flex;align-items:center;flex-shrink:0}
.qs-logo-link{display:flex;align-items:center;gap:10px;text-decoration:none}
.qs-logo-text{font-size:1.25rem;font-weight:800;color:var(--qs-dark);letter-spacing:-.03em}
.qs-nav{display:flex;align-items:center}
.qs-nav-list,.qs-nav ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.qs-nav-list li a,.qs-nav ul li a{display:block;padding:8px 14px;font-size:.875rem;font-weight:500;color:var(--qs-header-text,var(--qs-text-light));border-radius:var(--qs-radius);transition:all var(--qs-transition);text-decoration:none;position:relative}
.qs-nav-list li a:hover,.qs-nav ul li a:hover{color:var(--qs-primary);background:var(--qs-primary-50)}
.qs-nav-list li.current-menu-item a,.qs-nav ul li.current-menu-item a{color:var(--qs-primary);background:var(--qs-primary-50);font-weight:600}
.qs-nav-list li.current-menu-item a::after,.qs-nav ul li.current-menu-item a::after{content:'';position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);width:20px;height:2px;background:var(--qs-primary);border-radius:var(--qs-radius-full)}
.qs-header-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.qs-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);backdrop-filter:blur(4px);z-index:998}
.qs-overlay.active{display:block}
.qs-mobile-toggle.active .qs-hamburger-line:nth-child(1){transform:translateY(7px) rotate(45deg)}
.qs-mobile-toggle.active .qs-hamburger-line:nth-child(2){opacity:0}
.qs-mobile-toggle.active .qs-hamburger-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ===== MOBILE BOTTOM NAV =====
   Baseline geometry. assets/css/home.css redefines the visual layer with app
   tokens and loads later, so it wins; these rules guarantee the bar is
   positioned, hidden by default and laid out on any page that loads main.css
   without home.css. Keep in sync with home.css.
   ================================================= */
.qs-mobile-nav{display:none;position:fixed;bottom:calc(10px + env(safe-area-inset-bottom,0px));left:12px;right:12px;z-index:1400;height:64px;padding:0 6px;border-radius:26px;justify-content:space-between;align-items:center;background:var(--qs-app-card,rgba(255,255,255,0.88));backdrop-filter:blur(22px) saturate(1.8);-webkit-backdrop-filter:blur(22px) saturate(1.8);box-shadow:0 8px 32px -6px rgba(15,23,42,0.18),0 2px 8px rgba(15,23,42,0.06),inset 0 1px 0 rgba(255,255,255,0.55);border:1px solid var(--qs-app-border,var(--qs-border-light))}
.qs-mobile-nav-item{position:relative;display:flex;flex:0 1 56px;min-width:48px;min-height:48px;height:52px;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0;border:none;background:none;cursor:pointer;font-family:inherit;font-size:.7rem;color:var(--qs-app-muted,var(--qs-text-lighter));text-decoration:none;border-radius:16px;transition:color var(--qs-transition),transform .2s ease;-webkit-tap-highlight-color:transparent}
.qs-mobile-nav-item:hover,.qs-mobile-nav-item:focus-visible,.qs-mobile-nav-item.active{color:var(--qs-app-primary,var(--qs-primary))}
.qs-mobile-nav-item:focus-visible{outline:2px solid var(--qs-app-primary,var(--qs-primary));outline-offset:-2px}
.qs-mobile-nav-pill{position:absolute;top:5px;left:50%;width:48px;height:30px;border-radius:12px;background:color-mix(in srgb,var(--qs-app-primary,var(--qs-primary)) 14%,transparent);opacity:0;transform:translateX(-50%) scale(.72);transition:opacity .25s ease,transform .3s cubic-bezier(.34,1.56,.64,1);pointer-events:none;z-index:0}
.qs-mobile-nav-item .qs-mobile-nav-icon{position:relative;z-index:1;width:22px;height:22px;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.qs-mobile-nav-label{position:relative;z-index:1;white-space:nowrap}
.qs-mobile-nav-item.active .qs-mobile-nav-pill{opacity:1;transform:translateX(-50%) scale(1)}
.qs-mobile-nav-item.active .qs-mobile-nav-label{font-weight:700}
.qs-mobile-nav-item:active .qs-mobile-nav-icon{transform:scale(.86)}
.qs-mobile-nav-fab{position:relative;top:-24px;flex-shrink:0;display:grid;place-items:center;width:56px;height:56px;margin:0 2px;border-radius:19px;background:linear-gradient(135deg,#2563EB,#7C3AED);color:#fff;box-shadow:0 12px 26px -8px rgba(37,99,235,.6);text-decoration:none;border:4px solid var(--qs-app-bg,#fff);transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease}
.qs-mobile-nav-fab:active{transform:scale(.92)}
.qs-mobile-nav-fab.active{color:var(--qs-app-primary,var(--qs-primary));box-shadow:0 0 0 3px color-mix(in srgb,var(--qs-app-primary,var(--qs-primary)) 35%,transparent),0 12px 26px -8px rgba(37,99,235,.5)}
html[data-theme="dark"] .qs-mobile-dark-toggle .qs-dark-icon-sun{display:none}
html[data-theme="dark"] .qs-mobile-dark-toggle .qs-dark-icon-moon{display:block}
.qs-mobile-dark-toggle[aria-pressed="true"]{color:var(--qs-app-primary,var(--qs-primary))}
.qs-mobile-dark-toggle[aria-pressed="true"] .qs-mobile-nav-pill{opacity:1;transform:translateX(-50%) scale(1)}
@media (prefers-reduced-motion:reduce){.qs-mobile-nav-item,.qs-mobile-nav-pill,.qs-mobile-nav-icon,.qs-mobile-nav-fab{transition:none}}
/* Reveal on small screens. This used to be duplicated as a bare
   `.qs-mobile-nav{display:flex}` inside three separate breakpoints
   (main.css @768, home.css @767, responsive.css @768); they all did the
   same thing and lived far from the rule they override. */
@media (max-width:768px){.qs-mobile-nav{display:flex}.qs-mobile-nav-item{font-size:.6875rem}}
/* Scroll-away state; see home.css for the full rule and the JS contract. */
.qs-mobile-nav{transition:transform .3s cubic-bezier(.4,0,.2,1)}
.qs-mobile-nav-hidden{transform:translateY(calc(100% + 20px + env(safe-area-inset-bottom,0px)))}
@media (prefers-reduced-motion:reduce){.qs-mobile-nav{transition:none}}

/* ===== AUTH PAGES ===== */
.qs-auth-page{min-height:100vh;display:flex}
.qs-auth-wrapper{display:flex;width:100%;min-height:calc(100vh - 72px)}
.qs-auth-left{width:50%;background:linear-gradient(135deg,#EFF6FF,#DBEAFE 50%,#BFDBFE);display:flex;align-items:center;justify-content:center;padding:44px 52px;position:relative;overflow:hidden}
.qs-auth-left::before{content:'';position:absolute;width:600px;height:600px;border-radius:50%;background:rgba(37,99,235,0.06);top:-200px;right:-200px;pointer-events:none}
.qs-auth-left::after{content:'';position:absolute;width:400px;height:400px;border-radius:50%;background:rgba(16,185,129,0.04);bottom:-100px;left:-100px;pointer-events:none}
.qs-auth-left-content{width:100%;max-width:480px;position:relative;z-index:1}
.qs-auth-badge{display:inline-flex;align-items:center;padding:4px 14px;font-size:.8125rem;font-weight:600;color:var(--qs-primary);background:rgba(37,99,235,0.1);border-radius:var(--qs-radius-full);margin-bottom:20px}
.qs-auth-headline{font-size:clamp(1.75rem,2.5vw,2.25rem);font-weight:800;color:var(--qs-dark);line-height:1.15;margin:0 0 12px}
.qs-auth-subtitle{font-size:1rem;color:var(--qs-text-light);line-height:1.6;margin:0 0 22px}
.qs-auth-benefits{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.qs-auth-benefit{display:flex;align-items:center;gap:14px;padding:12px 16px;background:rgba(255,255,255,0.85);border-radius:var(--qs-radius-md);box-shadow:var(--qs-shadow-sm);border:1px solid rgba(255,255,255,0.9);backdrop-filter:blur(4px)}
.qs-auth-benefit-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.qs-icon-blue{background:rgba(37,99,235,0.1);color:var(--qs-primary)}
.qs-icon-green{background:rgba(16,185,129,0.1);color:var(--qs-secondary)}
.qs-icon-amber{background:rgba(245,158,11,0.1);color:var(--qs-accent)}
.qs-icon-purple{background:rgba(139,92,246,0.1);color:#8B5CF6}
.qs-auth-benefit strong{display:block;font-size:.9375rem;color:var(--qs-dark);margin-bottom:2px}
.qs-auth-benefit span{font-size:.8125rem;color:var(--qs-text-light)}
.qs-auth-testimonial{margin-top:12px;padding:20px 24px;background:rgba(255,255,255,0.7);border-radius:var(--qs-radius-md);border:1px solid rgba(255,255,255,0.8);backdrop-filter:blur(4px)}
.qs-auth-testimonial p{font-size:.875rem;color:var(--qs-text);font-style:italic;margin:12px 0 6px;line-height:1.6}
.qs-auth-testimonial-author{font-size:.75rem;color:var(--qs-text-light)}
.qs-auth-avatars{display:flex}
.qs-avatar{width:36px;height:36px;border-radius:50%;background:var(--qs-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;border:2px solid #fff;margin-right:-8px;transition:transform var(--qs-transition)}
.qs-avatar:hover{transform:translateY(-2px)}
.qs-avatar:last-child{background:var(--qs-text-lighter)}
.qs-auth-right{width:50%;display:flex;align-items:center;justify-content:center;padding:40px 52px;background:#fff}
.qs-auth-card{width:100%;max-width:420px}
.qs-auth-notice{padding:12px 16px;border-radius:var(--qs-radius);font-size:.875rem;line-height:1.5;margin-bottom:20px;border:1px solid}
.qs-auth-notice a{font-weight:600;text-decoration:underline}
.qs-auth-notice-sent{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.qs-auth-notice-invalid,.qs-auth-notice-notfound{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.qs-auth-notice-info{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}
.qs-auth-notice-pending{background:#fffbeb;border-color:#fde68a;color:#92400e}
.qs-auth-card-header{text-align:center;margin-bottom:18px}
.qs-auth-logo{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px}
.qs-auth-logo span{font-size:1.25rem;font-weight:800;color:var(--qs-dark)}
.qs-auth-card-header h2{font-size:1.5rem;font-weight:700;color:var(--qs-dark);margin:0 0 6px}
.qs-auth-card-header p{color:var(--qs-text-light);margin:0;font-size:.875rem}
.qs-auth-card .login-username,.qs-auth-card .login-password,
.qs-auth-card .questudy-register-form label,
.qs-auth-card .questudy-auth-wrap form label{display:flex;flex-direction:column;gap:6px;width:100%}
.qs-auth-card label,.qs-auth-card .questudy-auth-wrap form label{font-size:.875rem;font-weight:600;color:var(--qs-dark)}
.qs-auth-card .input,.qs-auth-card input[type="text"],.qs-auth-card input[type="email"],.qs-auth-card input[type="password"],.qs-input,.qs-auth-card .questudy-auth-wrap form input[type="text"],.qs-auth-card .questudy-auth-wrap form input[type="email"],.qs-auth-card .questudy-auth-wrap form input[type="password"],.qs-auth-card .questudy-register-form input{width:100%;padding:12px 16px;border:1.5px solid var(--qs-border);border-radius:var(--qs-radius);font-size:.9375rem;font-family:var(--qs-font);transition:all var(--qs-transition);background:#fff;color:var(--qs-dark);outline:none}
.qs-auth-card .input:focus,.qs-auth-card input[type="text"]:focus,.qs-auth-card input[type="email"]:focus,.qs-auth-card input[type="password"]:focus,.qs-input:focus,.qs-auth-card .questudy-auth-wrap form input:focus,.qs-auth-card .questudy-register-form input:focus{border-color:var(--qs-primary);box-shadow:0 0 0 3px rgba(37,99,235,0.1)}
.qs-auth-card .forgetmenot{display:flex;align-items:center;gap:8px;margin:4px 0}
.qs-auth-card .forgetmenot label{font-size:.8125rem;font-weight:400;color:var(--qs-text-light);cursor:pointer}
.qs-auth-card .forgetmenot input[type="checkbox"]{width:16px;height:16px;accent-color:var(--qs-primary);cursor:pointer}
.qs-auth-card .submit{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.qs-auth-card input[type="submit"],.qs-auth-card .questudy-auth-wrap form button[type="submit"],.qs-auth-card .questudy-register-form button{width:100%;padding:13px 18px;font-size:1rem;font-weight:600;border-radius:var(--qs-radius-md);border:none;cursor:pointer;background:var(--qs-primary);color:#fff;transition:all var(--qs-transition);margin-top:4px}
.qs-auth-card input[type="submit"]:hover,.qs-auth-card .questudy-auth-wrap form button[type="submit"]:hover,.qs-auth-card .questudy-register-form button:hover{background:var(--qs-primary-dark);transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,99,235,0.3)}
.qs-auth-card #loginform,.qs-auth-card .questudy-register-form,.qs-auth-card .questudy-auth-wrap form{display:flex;flex-direction:column;gap:11px;margin:0}
.qs-auth-divider{display:flex;align-items:center;gap:16px;margin:24px 0;color:var(--qs-text-lighter);font-size:.8125rem}
.qs-auth-divider::before,.qs-auth-divider::after{content:'';flex:1;height:1px;background:var(--qs-border)}
.qs-auth-social{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.qs-social-btn{flex:1 1 calc(50% - 6px);min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border:1.5px solid var(--qs-border);border-radius:var(--qs-radius);background:#fff;cursor:pointer;font-size:.875rem;font-weight:500;font-family:inherit;color:var(--qs-text);text-decoration:none;transition:all var(--qs-transition)}
.qs-social-btn:hover{border-color:var(--qs-text-lighter);background:var(--qs-gray-50)}
.qs-whatsapp-panel{display:none;margin:-8px 0 24px;padding:16px;border:1.5px solid var(--qs-border);border-radius:var(--qs-radius);background:#f8fafc}
.qs-whatsapp-panel.open{display:block}
.qs-whatsapp-panel h4{margin:0 0 4px;font-size:.9375rem;font-weight:600;color:var(--qs-dark)}
.qs-whatsapp-panel p{margin:0 0 12px;font-size:.8125rem;color:var(--qs-text-light)}
.qs-whatsapp-field{display:flex;gap:8px;margin-bottom:10px}
.qs-whatsapp-field input{flex:1;min-width:0;padding:10px 12px;border:1.5px solid var(--qs-border);border-radius:var(--qs-radius);font-size:.875rem;font-family:inherit;background:#fff;color:var(--qs-dark);outline:none}
.qs-whatsapp-field input:focus{border-color:var(--qs-primary);box-shadow:0 0 0 3px rgba(37,99,235,0.1)}
.qs-whatsapp-field .qs-btn{flex:0 0 auto;padding:10px 14px;font-size:.8125rem;border:none;border-radius:var(--qs-radius);background:var(--qs-primary);color:#fff;font-weight:600;cursor:pointer;transition:background var(--qs-transition)}
.qs-whatsapp-field .qs-btn:hover{background:var(--qs-primary-dark)}
.qs-whatsapp-field .qs-btn:disabled{opacity:.6;cursor:not-allowed}
.qs-whatsapp-msg{margin:0 0 10px;font-size:.8125rem;color:var(--qs-text-light)}
.qs-whatsapp-msg.error{color:#dc2626}
.qs-whatsapp-msg.success{color:#16a34a}
.qs-whatsapp-back{background:none;border:none;padding:0;font-size:.8125rem;color:var(--qs-text-lighter);cursor:pointer;text-decoration:underline}
.qs-whatsapp-back:hover{color:var(--qs-text-light)}
.qs-auth-footer{text-align:center;font-size:.9375rem;color:var(--qs-text-light);margin-top:4px}
.qs-auth-footer a{font-weight:600;color:var(--qs-primary)}
.qs-forgot-password{display:block;text-align:center;margin-top:12px;font-size:.8125rem;color:var(--qs-text-light)}
.qs-auth-terms{text-align:center;font-size:.75rem;color:var(--qs-text-lighter);margin-top:12px}
.qs-auth-terms a{color:var(--qs-text-light);text-decoration:underline}
.qs-auth-card .questudy-auth-link{text-align:center;font-size:.9375rem;color:var(--qs-text-light);margin-top:16px}
.qs-auth-card .questudy-auth-link a{color:var(--qs-primary);font-weight:600}
.qs-auth-card .questudy-auth-header,.qs-auth-card .questudy-auth-wrap .questudy-auth-header{display:none}
.qs-auth-card .questudy-auth-wrap{background:none;padding:0;border:none;box-shadow:none}
.qs-auth-card .questudy-register-form{max-width:none;margin:0;padding:0;border:0;background:transparent;box-shadow:none;border-radius:0}
.qs-auth-card .questudy-register-form p{margin:0}
.qs-auth-card .questudy-register-form .questudy-fieldset{margin:0}
.qs-auth-card .questudy-register-form .regular-text,.qs-auth-card .questudy-register-form input{margin-top:0;margin-bottom:0}
.qs-auth-card .questudy-register-form .questudy-role-option{padding:11px 13px}
.qs-auth-card .questudy-register-form .questudy-guardian-block{padding:13px;margin-bottom:0}

/* ===== AUTH SHELL (topbar-only, no sidebar) ===== */
body.qs-auth-shell .qs-app-body{margin-left:0}
body.qs-auth-shell .qs-auth-topbar-brand{display:flex;align-items:center;gap:8px;text-decoration:none}
.qs-auth-topbar-brand span{font-weight:800;font-size:1.1rem;color:var(--qs-app-text);letter-spacing:-.02em}
.qs-auth-topbar-actions{display:flex;align-items:center;gap:12px}
.qs-auth-topbar-link{font-size:.875rem;font-weight:600;color:var(--qs-app-text-soft);text-decoration:none;transition:color var(--qs-transition)}
.qs-auth-topbar-link:hover{color:var(--qs-primary)}

/* Auth forms (forgot / reset password) */
.qs-auth-form{display:flex;flex-direction:column;gap:16px;margin:0}
.qs-auth-field{display:flex;flex-direction:column;gap:6px;width:100%;margin:0}
.qs-auth-field label{font-size:.875rem;font-weight:600;color:var(--qs-dark)}
.qs-auth-notice-error{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.qs-auth-notice-card{display:flex;align-items:flex-start;gap:12px;padding:14px 16px}
.qs-auth-notice-card .qs-auth-notice-icon{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(220,38,38,0.1);color:#dc2626}
.qs-auth-notice-card .qs-auth-notice-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.qs-auth-notice-card .qs-auth-notice-title{font-weight:700;font-size:.875rem;line-height:1.3}
.qs-auth-notice-card .qs-auth-notice-body span{font-size:.8125rem;line-height:1.5}
.qs-auth-notice-card .qs-auth-notice-link{margin-left:auto;align-self:center;flex:0 0 auto;white-space:nowrap;display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;font-size:.75rem;font-weight:700;text-decoration:none;color:#991b1b;border:1px solid #fecaca;background:#fff;transition:all var(--qs-transition)}
.qs-auth-notice-card .qs-auth-notice-link:hover{background:#fff;border-color:#fca5a5;transform:translateY(-1px)}
.qs-auth-success{text-align:center;padding:16px 0 8px}
.qs-auth-success-icon{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;background:rgba(37,99,235,0.1);color:var(--qs-primary);display:flex;align-items:center;justify-content:center}
.qs-auth-success-icon-green{background:rgba(16,185,129,0.1);color:var(--qs-secondary)}
.qs-auth-success-text{font-size:.9375rem;color:var(--qs-text-light);line-height:1.7;margin:0 0 8px}

/* ===== HERO ===== */
.qs-hero-modern{position:relative;background:linear-gradient(135deg,#F0F7FF,#E8F4FD,#F0F7FF);overflow:hidden;padding:clamp(48px,6vw,100px) 0}
.qs-hero-bg-pattern{position:absolute;inset:0;background-image:radial-gradient(circle at 20% 50%,rgba(37,99,235,0.05) 0,transparent 50%),radial-gradient(circle at 80% 20%,rgba(16,185,129,0.04) 0,transparent 50%),radial-gradient(circle at 40% 80%,rgba(245,158,11,0.03) 0,transparent 50%);pointer-events:none}
.qs-hero-bg-pattern::after{content:'';position:absolute;width:100%;height:100%;top:0;left:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232563EB' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");pointer-events:none}
.qs-hero-inner{position:relative;z-index:1}
.qs-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.qs-hero-text-col{text-align:left}
.qs-pill-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;font-size:.8125rem;font-weight:600;color:var(--qs-primary);background:rgba(37,99,235,0.08);border-radius:var(--qs-radius-full);margin-bottom:24px;border:1px solid rgba(37,99,235,0.12);backdrop-filter:blur(4px)}
.qs-pill-icon{font-size:1rem;line-height:1}
.qs-hero-h1{font-size:clamp(2rem,3.5vw,3.25rem);font-weight:800;color:var(--qs-dark);line-height:1.1;margin:0 0 16px;letter-spacing:-.025em}
.qs-hero-desc{font-size:clamp(1rem,1.2vw,1.125rem);color:var(--qs-text-light);line-height:1.7;margin:0 0 28px;max-width:520px}
.qs-hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:32px}
.qs-hero-actions .qs-btn{font-size:1rem}
.qs-social-proof{display:flex;align-items:center;gap:14px}
.qs-proof-avatars{display:flex;align-items:center}
.qs-proof-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;border:2px solid #fff;margin-right:-10px;transition:transform var(--qs-transition);box-shadow:var(--qs-shadow-sm)}
.qs-proof-avatar:hover{transform:translateY(-3px)}
.qs-proof-text{font-size:.875rem;color:var(--qs-text-light)}
.qs-proof-text strong{color:var(--qs-dark)}
.qs-hero-visual-col{display:flex;align-items:center;justify-content:center}
.qs-hero-illustration-wrap{position:relative;width:100%;max-width:460px}
.qs-hero-main-svg{width:100%;height:auto;display:block;filter:drop-shadow(0 8px 32px rgba(37,99,235,0.12))}

/* Hero floating cards */
.qs-floating-card{display:flex;align-items:center;gap:6px;padding:8px 14px;background:rgba(255,255,255,0.95);border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,0.08),0 1px 3px rgba(0,0,0,0.04);font-size:.75rem;font-weight:600;color:var(--qs-dark);white-space:nowrap;position:absolute;z-index:2;backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.8);transition:all var(--qs-transition-slow)}
.qs-floating-card:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 8px 24px rgba(0,0,0,0.12)}
.qs-floating-card svg{flex-shrink:0;width:16px;height:16px}
.qs-fc-1{top:2%;right:-8%;animation:qs-float 6s ease-in-out infinite}
.qs-fc-2{top:22%;left:-22%;animation:qs-float 8s ease-in-out infinite 1s}
.qs-fc-3{top:48%;right:-10%;animation:qs-float 7s ease-in-out infinite 0.5s}
.qs-fc-4{top:68%;left:-18%;animation:qs-float 9s ease-in-out infinite 2s}
.qs-fc-5{top:35%;left:-28%;animation:qs-float 6.5s ease-in-out infinite 1.5s}
.qs-fc-6{bottom:4%;left:-10%;animation:qs-float 7.5s ease-in-out infinite 0.8s}
@keyframes qs-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media(max-width:1100px){.qs-floating-card{display:none}}
@media(min-width:1101px){.qs-floating-card{display:flex}}
.qs-countdown-card{position:absolute;bottom:-24px;right:-8px;background:rgba(255,255,255,0.95);border-radius:var(--qs-radius-lg);padding:14px 18px;box-shadow:0 8px 32px rgba(0,0,0,0.1);z-index:3;border:1px solid rgba(255,255,255,0.8);backdrop-filter:blur(8px);min-width:260px;animation:qs-float 5s ease-in-out infinite 0.3s}
.qs-countdown-badge{font-size:.7rem;font-weight:700;color:var(--qs-primary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.qs-countdown-display{display:flex;align-items:center;justify-content:center;gap:4px}
.qs-cd-item{text-align:center;min-width:36px}
.qs-cd-num{display:block;font-size:1.375rem;font-weight:800;color:var(--qs-dark);line-height:1.2}
.qs-cd-label{font-size:.6rem;font-weight:500;color:var(--qs-text-lighter);text-transform:uppercase;letter-spacing:.04em}
.qs-cd-sep{font-size:1.375rem;font-weight:700;color:var(--qs-primary);padding-bottom:10px}

/* ===== TRUST BANNER ===== */
.qs-trust-section{padding:40px 0;background:#fff;border-top:1px solid var(--qs-border);border-bottom:1px solid var(--qs-border)}
.qs-trust-heading{text-align:center;font-size:.8125rem;font-weight:600;color:var(--qs-text-lighter);text-transform:uppercase;letter-spacing:.08em;margin:0 0 28px}
.qs-trust-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(20px,3vw,40px)}
.qs-trust-logo{font-size:1.125rem;color:var(--qs-gray-400);filter:grayscale(1);opacity:.5;transition:all var(--qs-transition-slow);cursor:default}
.qs-trust-logo:hover{filter:grayscale(0);opacity:1;color:var(--qs-dark)}

/* ===== STATS ===== */
.qs-stats-section{padding:clamp(40px,5vw,80px) 0;background:linear-gradient(135deg,var(--qs-primary) 0%,var(--qs-primary-darker) 100%);position:relative;overflow:hidden}
.qs-stats-section::before{content:'';position:absolute;width:800px;height:800px;border-radius:50%;background:rgba(255,255,255,0.03);top:-300px;right:-200px;pointer-events:none}
.qs-stats-section::after{content:'';position:absolute;width:500px;height:500px;border-radius:50%;background:rgba(255,255,255,0.02);bottom:-200px;left:-100px;pointer-events:none}
.qs-stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;position:relative;z-index:1;text-align:center}
.qs-stat-card-glass{text-align:center;padding:clamp(20px,2.5vw,32px) clamp(12px,1.5vw,20px);background:rgba(255,255,255,0.08);border-radius:var(--qs-radius-lg);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.1);transition:all var(--qs-transition-slow)}
.qs-stat-card-glass:hover{background:rgba(255,255,255,0.14);transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,0.1)}
.qs-stat-icon{display:flex;justify-content:center;margin-bottom:12px}
.qs-stat-icon svg{width:28px;height:28px;color:rgba(255,255,255,0.5)}
.qs-stat-number{font-size:clamp(1.75rem,2.5vw,2.5rem);font-weight:800;color:#fff;line-height:1}
.qs-stat-plus{font-size:1.25rem;font-weight:700;color:rgba(255,255,255,0.6);display:inline-block;vertical-align:super}
.qs-stat-card-glass .qs-stat-label{display:block;font-size:.75rem;color:rgba(255,255,255,0.6);margin-top:8px;line-height:1.4;max-width:140px;margin-left:auto;margin-right:auto}

/* ===== FEATURES ===== */
.qs-features-section{padding:clamp(48px,6vw,100px) 0;background:#fff}
.qs-features-matrix{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.qs-feature-card-modern{text-align:center;padding:clamp(24px,2.5vw,36px) clamp(16px,2vw,24px);background:var(--qs-bg);border-radius:var(--qs-radius-md);border:1px solid var(--qs-border);transition:all var(--qs-transition-slow);cursor:default;position:relative;overflow:hidden}
.qs-feature-card-modern::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--qs-primary),var(--qs-primary-light));opacity:0;transition:opacity var(--qs-transition-slow)}
.qs-feature-card-modern:hover::before{opacity:1}
.qs-feature-card-modern:hover{transform:translateY(-6px);box-shadow:var(--qs-shadow-lg);border-color:transparent;background:#fff}
.qs-fc-icon{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;transition:all var(--qs-transition-slow)}
.qs-feature-card-modern:hover .qs-fc-icon{transform:scale(1.1)}
.qs-fc-blue{background:rgba(37,99,235,0.1);color:var(--qs-primary)}
.qs-fc-green{background:rgba(16,185,129,0.1);color:var(--qs-secondary)}
.qs-fc-amber{background:rgba(245,158,11,0.1);color:var(--qs-accent)}
.qs-fc-purple{background:rgba(139,92,246,0.1);color:#8B5CF6}
.qs-fc-pink{background:rgba(236,72,153,0.1);color:#EC4899}
.qs-fc-teal{background:rgba(20,184,166,0.1);color:#14B8A6}
.qs-feature-card-modern h4{font-size:.9375rem;font-weight:700;color:var(--qs-dark);margin:0 0 6px;text-align:center}
.qs-feature-card-modern p{font-size:.8125rem;color:var(--qs-text-light);line-height:1.6;margin:0;text-align:center}

/* ===== EXAM BODY PILLS ===== */
.qs-exambody-section{padding:clamp(32px,4vw,60px) 0;background:var(--qs-bg)}
.qs-exam-pills{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.qs-exam-pill{display:inline-flex;align-items:center;padding:8px 20px;border-radius:var(--qs-radius-full);font-size:.8125rem;font-weight:600;cursor:default;transition:all var(--qs-transition);border:1.5px solid transparent}
.qs-exam-pill:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}
.qs-pill-blue{background:rgba(37,99,235,0.08);color:var(--qs-primary);border-color:rgba(37,99,235,0.2)}
.qs-pill-blue:hover{background:var(--qs-primary);color:#fff;border-color:var(--qs-primary)}
.qs-pill-green{background:rgba(16,185,129,0.08);color:var(--qs-secondary);border-color:rgba(16,185,129,0.2)}
.qs-pill-green:hover{background:var(--qs-secondary);color:#fff;border-color:var(--qs-secondary)}
.qs-pill-amber{background:rgba(245,158,11,0.08);color:var(--qs-accent);border-color:rgba(245,158,11,0.2)}
.qs-pill-amber:hover{background:var(--qs-accent);color:#fff;border-color:var(--qs-accent)}
.qs-pill-red{background:rgba(239,68,68,0.08);color:#EF4444;border-color:rgba(239,68,68,0.2)}
.qs-pill-red:hover{background:#EF4444;color:#fff;border-color:#EF4444}
.qs-pill-purple{background:rgba(139,92,246,0.08);color:#8B5CF6;border-color:rgba(139,92,246,0.2)}
.qs-pill-purple:hover{background:#8B5CF6;color:#fff;border-color:#8B5CF6}
.qs-pill-teal{background:rgba(20,184,166,0.08);color:#14B8A6;border-color:rgba(20,184,166,0.2)}
.qs-pill-teal:hover{background:#14B8A6;color:#fff;border-color:#14B8A6}

/* ===== HOW IT WORKS ===== */
.qs-how-section{padding:clamp(48px,6vw,100px) 0;background:#fff}
.qs-steps-flow{display:flex;align-items:flex-start;justify-content:center;gap:0;max-width:960px;margin:0 auto}
.qs-step-item{text-align:center;flex:1;max-width:150px;padding:0 6px}
.qs-step-circle{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--qs-primary),var(--qs-primary-light));display:flex;align-items:center;justify-content:center;margin:0 auto 14px;box-shadow:0 4px 16px rgba(37,99,235,0.25);transition:all var(--qs-transition-slow);position:relative}
.qs-step-item:hover .qs-step-circle{transform:scale(1.1);box-shadow:0 6px 24px rgba(37,99,235,0.35)}
.qs-step-circle span{font-size:1.25rem;font-weight:800;color:#fff}
.qs-step-item h4{font-size:.875rem;font-weight:700;color:var(--qs-dark);margin:0 0 4px}
.qs-step-item p{font-size:.75rem;color:var(--qs-text-light);line-height:1.4;margin:0}
.qs-step-line{width:48px;height:2px;background:linear-gradient(90deg,var(--qs-gray-300),var(--qs-gray-200));margin-top:28px;flex-shrink:0}

/* ===== AI TOOLS CAROUSEL ===== */
.qs-ai-tools-section{padding:clamp(48px,6vw,100px) 0;background:linear-gradient(135deg,var(--qs-gray-50),var(--qs-primary-50))}
.qs-ai-tools-layout{display:grid;grid-template-columns:340px 1fr;gap:40px;align-items:center}
.qs-ai-tools-sidebar{text-align:left}
.qs-ai-tools-sidebar .qs-section-title{text-align:left;font-size:clamp(1.5rem,2.5vw,2rem)}
.qs-ai-tools-sidebar .qs-section-desc{text-align:left;margin-bottom:24px;font-size:1rem}
.qs-ai-tools-carousel{display:flex;gap:12px;overflow-x:auto;padding:8px 4px 16px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.qs-ai-tools-carousel::-webkit-scrollbar{height:4px}
.qs-ai-tools-carousel::-webkit-scrollbar-track{background:transparent;border-radius:10px}
.qs-ai-tools-carousel::-webkit-scrollbar-thumb{background:var(--qs-primary-200);border-radius:10px}
.qs-ai-tool-card{flex:0 0 160px;padding:24px 16px;background:#fff;border-radius:var(--qs-radius-lg);border:1px solid var(--qs-border);text-align:center;font-size:.8125rem;font-weight:600;color:var(--qs-dark);transition:all var(--qs-transition-slow);scroll-snap-align:start;cursor:default}
.qs-ai-tool-card svg{display:block;margin:0 auto 10px;width:28px;height:28px}
.qs-ai-tool-card:hover{transform:translateY(-6px);box-shadow:var(--qs-shadow-xl);border-color:transparent}

/* ===== TESTIMONIALS ===== */
.qs-testimonials-section{padding:clamp(48px,6vw,100px) 0;background:#fff}
.qs-testimonials-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;max-width:1024px;margin:0 auto}
.qs-testimonial-card{text-align:left;padding:clamp(20px,2.5vw,32px);background:var(--qs-bg);border-radius:var(--qs-radius-lg);border:1px solid var(--qs-border);transition:all var(--qs-transition-slow);cursor:default;position:relative}
.qs-testimonial-card::after{content:'"';position:absolute;top:16px;right:20px;font-size:4rem;line-height:1;color:var(--qs-primary-200);opacity:0.4;font-weight:800}
.qs-testimonial-card:hover{transform:translateY(-6px);box-shadow:var(--qs-shadow-lg)}
.qs-stars{font-size:1rem;color:var(--qs-accent);letter-spacing:3px;margin-bottom:12px}
.qs-testimonial-text{font-size:.875rem;color:var(--qs-text);line-height:1.7;margin:0 0 16px;font-style:italic;text-align:left}
.qs-testimonial-author{display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--qs-border-light)}
.qs-testimonial-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#fff;flex-shrink:0}
.qs-testimonial-author strong{display:block;font-size:.8125rem;color:var(--qs-dark)}
.qs-testimonial-author span{font-size:.7rem;color:var(--qs-text-light)}

/* ===== PRICING ===== */
.qs-pricing-section{padding:clamp(48px,6vw,100px) 0;background:var(--qs-bg)}
.qs-pricing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;align-items:start;max-width:1120px;margin:0 auto}
.qs-pricing-card{text-align:center;padding:clamp(24px,2.5vw,36px) clamp(16px,2vw,24px);background:#fff;border-radius:var(--qs-radius-lg);border:1px solid var(--qs-border);transition:all var(--qs-transition-slow);position:relative;overflow:hidden}
.qs-pricing-card:hover{transform:translateY(-6px);box-shadow:var(--qs-shadow-lg)}
.qs-pricing-featured{background:var(--qs-primary);border-color:var(--qs-primary);position:relative;z-index:2;transform:scale(1.03)}
.qs-pricing-featured:hover{transform:scale(1.03) translateY(-6px)}
.qs-pricing-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--qs-accent);color:#fff;padding:4px 16px;border-radius:var(--qs-radius-full);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.qs-pricing-name{font-size:1rem;font-weight:700;color:var(--qs-dark);margin:0 0 12px}
.qs-pricing-featured .qs-pricing-name{color:#fff}
.qs-pricing-amount{font-size:clamp(1.75rem,2.5vw,2.5rem);font-weight:800;color:var(--qs-dark);margin-bottom:2px;line-height:1}
.qs-pricing-featured .qs-pricing-amount{color:#fff}
.qs-currency{font-size:1.375rem;vertical-align:super;margin-right:2px}
.qs-pricing-period{font-size:.75rem;color:var(--qs-text-light);display:block;margin-bottom:20px}
.qs-pricing-featured .qs-pricing-period{color:rgba(255,255,255,0.7)}
.qs-pricing-features{list-style:none;padding:0;margin:0 0 24px;text-align:left}
.qs-pricing-features li{padding:8px 0;font-size:.8125rem;color:var(--qs-text);border-bottom:1px solid var(--qs-border-light);display:flex;align-items:center;gap:8px}
.qs-pricing-features li::before{content:'✓';color:var(--qs-secondary);font-weight:700}
.qs-pricing-featured .qs-pricing-features li{color:rgba(255,255,255,0.92);border-color:rgba(255,255,255,0.1)}
.qs-pricing-featured .qs-pricing-features li::before{color:var(--qs-accent)}
.qs-pricing-featured .qs-btn-outline{background:rgba(255,255,255,0.1);color:#fff;border-color:rgba(255,255,255,0.3)}
.qs-pricing-featured .qs-btn-outline:hover{background:#fff;color:var(--qs-primary);border-color:#fff}

/* ===== FAQ ===== */
.qs-faq-section{padding:clamp(48px,6vw,100px) 0;background:#fff}
.qs-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:860px;margin:0 auto}
.qs-faq-item{background:var(--qs-bg);border-radius:var(--qs-radius-md);border:1px solid var(--qs-border);overflow:hidden;transition:all var(--qs-transition)}
.qs-faq-item:hover{border-color:var(--qs-primary-200);box-shadow:var(--qs-shadow-sm)}
.qs-faq-question{width:100%;display:flex;justify-content:space-between;align-items:center;padding:16px 18px;background:none;border:none;cursor:pointer;font-size:.875rem;font-weight:600;color:var(--qs-dark);text-align:left;font-family:var(--qs-font);transition:color var(--qs-transition)}
.qs-faq-question:hover{color:var(--qs-primary)}
.qs-faq-toggle{font-size:1.25rem;font-weight:700;color:var(--qs-primary);transition:transform var(--qs-transition-bounce);flex-shrink:0;margin-left:12px;line-height:1}
.qs-faq-item[aria-expanded="true"] .qs-faq-toggle{transform:rotate(45deg)}
.qs-faq-answer{padding:0 18px 16px;font-size:.8125rem;color:var(--qs-text-light);line-height:1.7;display:none}
.qs-faq-item[aria-expanded="true"] .qs-faq-answer{display:block;animation:qs-fadeIn 0.3s ease}
@keyframes qs-fadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* ===== CTA BANNER ===== */
.qs-cta-banner{padding:clamp(48px,6vw,100px) 0;background:linear-gradient(135deg,var(--qs-primary-darker) 0%,var(--qs-primary) 50%,var(--qs-primary-light) 100%);position:relative;overflow:hidden;text-align:center}
.qs-cta-banner::before{content:'';position:absolute;width:600px;height:600px;border-radius:50%;background:rgba(255,255,255,0.04);top:-200px;left:-200px;pointer-events:none}
.qs-cta-banner::after{content:'';position:absolute;width:400px;height:400px;border-radius:50%;background:rgba(255,255,255,0.03);bottom:-150px;right:-100px;pointer-events:none}
.qs-cta-banner-inner{max-width:650px;margin:0 auto;position:relative;z-index:1}
.qs-cta-heading{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:800;color:#fff;margin:0 0 12px;line-height:1.2}
.qs-cta-subtext{font-size:clamp(1rem,1.2vw,1.125rem);color:rgba(255,255,255,0.75);margin:0 0 32px}
.qs-cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ===== FOOTER ===== */
.qs-footer{background:var(--qs-footer-bg,var(--qs-dark));color:var(--qs-footer-text,rgba(255,255,255,0.55));position:relative;font-size:.875rem}
.qs-footer-wave{position:absolute;top:-2px;left:0;width:100%;height:60px;overflow:hidden;pointer-events:none}
.qs-footer-wave svg{width:100%;height:100%}
.qs-footer-main{padding:clamp(40px,5vw,80px) 0 clamp(24px,3vw,40px)}
.qs-footer-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr 1fr;gap:40px}
.qs-footer-brand .qs-logo{margin-bottom:14px}
.qs-footer-brand .qs-logo .qs-logo-text{color:#fff}
.qs-footer-desc{font-size:.8125rem;line-height:1.7;margin:0 0 18px;color:rgba(255,255,255,0.4);max-width:320px}
.qs-footer-social{display:flex;gap:8px}
.qs-social-link{width:34px;height:34px;border-radius:var(--qs-radius);background:rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.4);transition:all var(--qs-transition)}
.qs-social-link:hover{background:var(--qs-primary);color:#fff;transform:translateY(-3px);box-shadow:0 4px 12px rgba(37,99,235,0.3)}
.qs-footer-heading{font-size:.75rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.06em;margin:0 0 16px}
.qs-footer-menu{list-style:none;padding:0;margin:0}
.qs-footer-menu li{margin-bottom:10px}
.qs-footer-menu li a{font-size:.8125rem;color:var(--qs-footer-link,rgba(255,255,255,0.4));text-decoration:none;transition:all var(--qs-transition);display:inline-flex;align-items:center;gap:4px}
.qs-footer-menu li a:hover{color:#fff;transform:translateX(4px)}
.qs-footer-bottom{border-top:1px solid rgba(255,255,255,0.06);padding:20px 0}
.qs-footer-bottom-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.qs-footer-links{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.qs-footer-links a{position:relative;display:inline-flex;align-items:center;justify-content:center;padding:8px 18px;font-size:.75rem;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,0.6);text-decoration:none;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.09);border-radius:999px;transition:color var(--qs-transition),background var(--qs-transition),border-color var(--qs-transition),transform var(--qs-transition),box-shadow var(--qs-transition)}
.qs-footer-links a:hover{color:#fff;background:var(--qs-primary);border-color:var(--qs-primary);transform:translateY(-2px);box-shadow:0 6px 18px rgba(37,99,235,0.35)}
.qs-footer-links a:active{transform:translateY(0)}
.qs-footer-links a:focus-visible{outline:2px solid var(--qs-primary-light);outline-offset:2px}
/* Keeps the credit on one line with the copyright; wraps to two on narrow screens. */
.qs-footer-credit{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 14px}
.qs-copyright{font-size:.75rem;color:rgba(255,255,255,0.3);margin:0;text-align:center}
.qs-powered-by{font-size:.75rem;color:rgba(255,255,255,0.3);margin:0;text-align:center}
.qs-powered-by a{color:rgba(255,255,255,0.55);text-decoration:none;transition:color var(--qs-transition)}
.qs-powered-by a:hover{color:#fff;text-decoration:underline}
.qs-powered-by a:focus-visible{outline:2px solid var(--qs-primary-light);outline-offset:2px;border-radius:2px}

/* Contact form */
.qs-contact-form-wrap{display:flex;flex-direction:column;gap:18px}
.qs-contact-form__heading{margin:0}
.qs-contact-form__subheading{margin:-10px 0 0;color:var(--qs-text-light,#64748b);font-size:.9375rem}
.qs-contact-form{display:flex;flex-direction:column;gap:16px}
.qs-contact-form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.qs-contact-form__field{display:flex;flex-direction:column;gap:6px}
.qs-contact-form__label{font-size:.8125rem;font-weight:600;color:var(--qs-dark,#0f172a)}
.qs-contact-form textarea.qs-contact-form__textarea{min-height:150px;resize:vertical;font-family:var(--qs-font);line-height:1.6}
.qs-contact-form .qs-btn{align-self:flex-start;min-width:180px}
.qs-contact-form__status{font-size:.875rem;font-weight:500;padding:12px 16px;border-radius:var(--qs-radius);line-height:1.5}
.qs-contact-form__status.qs-is-success{background:#ecfdf5;border:1px solid #a7f3d0;color:#047857}
.qs-contact-form__status.qs-is-error{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c}
@media (max-width:640px){.qs-contact-form__row{grid-template-columns:1fr}}

/* ========================================
   BLOG / POST CARD
   Ported from assets/css/components.css, which was never enqueued.
   template-parts/content.php emits .qs-post-card, and home.php,
   archive.php, index.php and search.php all render it, so these
   rules were never actually applied. Token-only, so they follow the
   dark-mode overrides in style.css.
   ======================================== */
.qs-post-card{background:var(--qs-bg-white);border:1px solid var(--qs-border-light);border-radius:var(--qs-radius-md);overflow:hidden;box-shadow:var(--qs-shadow);transition:transform var(--qs-transition-slow),box-shadow var(--qs-transition-slow),border-color var(--qs-transition-slow)}
.qs-post-card:hover{transform:translateY(-4px);box-shadow:var(--qs-shadow-lg);border-color:var(--qs-primary-100)}
.qs-post-thumb{display:block;overflow:hidden;aspect-ratio:16/9;background:var(--qs-bg)}
.qs-post-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--qs-transition-slow)}
.qs-post-card:hover .qs-post-thumb img{transform:scale(1.05)}
.qs-post-card-body{padding:20px}
.qs-post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:8px;font-size:.8125rem;color:var(--qs-text-lighter)}
.qs-post-meta a{color:var(--qs-text-light);text-decoration:none}
.qs-post-meta a:hover{color:var(--qs-primary)}
.qs-post-title{margin:0 0 8px;font-size:1.25rem;font-weight:700;line-height:1.35;color:var(--qs-secondary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qs-post-title a{color:inherit;text-decoration:none}
.qs-post-title a:hover{color:var(--qs-primary)}
.qs-post-excerpt{margin:0 0 16px;font-size:.875rem;line-height:1.6;color:var(--qs-text-light);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.qs-comments{margin-top:32px}
.qs-post-nav .qs-prev{text-align:left}
.qs-post-nav .qs-next{text-align:right}
/* Alias: .qs-btn-link predates .qs-btn-text and was styled nowhere. */
.qs-btn-link{background:transparent;border-color:transparent;color:var(--qs-text-light);font-weight:500}
.qs-btn-link:hover{background:transparent;border-color:transparent;color:var(--qs-primary)}
/* Block containers for the [questudy_features] / [questudy_cta] shortcodes. */
.qs-features{background:var(--qs-bg)}
.qs-cta-section{padding:80px 0;background:var(--qs-bg)}

/* ========================================
   BLOG CONTENT LAYOUT / SINGLE POST
   .qs-content-layout only ever had a max-width:1024px override in
   responsive.css, so single.php / page.php rendered their two-column
   layout unstyled. The single-post block also came from the unloaded
   components.css.
   ======================================== */
.qs-main{padding:48px 0}
.qs-single-post{max-width:var(--qs-container);margin:0 auto;padding:40px 24px}
.qs-single-title{font-size:2.5rem;font-weight:800;color:var(--qs-secondary);line-height:1.2;margin:0 0 16px}
.qs-content-layout{display:flex;gap:40px;align-items:flex-start}
.qs-content-primary{flex:1 1 auto;min-width:0}
.qs-content-secondary{flex:0 0 300px;width:300px;position:sticky;top:24px}
.qs-single-header{margin-bottom:24px}
.qs-single-thumb{border-radius:var(--qs-radius-lg);overflow:hidden;margin-bottom:24px}
.qs-single-thumb img{display:block;width:100%;height:auto}
.qs-single-meta{display:flex;flex-wrap:wrap;gap:16px;font-size:.875rem;color:var(--qs-text-light)}
.qs-meta-date,.qs-meta-author,.qs-meta-cats{color:var(--qs-text-light)}
.qs-single-meta a{color:var(--qs-text-light);text-decoration:none}
.qs-single-meta a:hover{color:var(--qs-primary)}
.qs-single-content{font-size:1.05rem;line-height:1.8;color:var(--qs-text);max-width:780px}
.qs-single-content h2{font-size:1.625rem;font-weight:700;color:var(--qs-secondary);margin:2rem 0 .75rem}
.qs-single-content h3{font-size:1.25rem;font-weight:700;color:var(--qs-secondary);margin:2rem 0 .5rem}
.qs-single-content p{margin-bottom:1.25rem}
.qs-single-content img{max-width:100%;height:auto;border-radius:var(--qs-radius-md);margin:24px 0}
.qs-single-content ul,.qs-single-content ol{margin-bottom:1.25rem;padding-left:1.5rem}
.qs-single-content li{margin-bottom:6px}
.qs-single-content a{color:var(--qs-primary);text-decoration:underline;text-underline-offset:2px}
.qs-single-content a:hover{color:var(--qs-primary-dark)}
.qs-single-content blockquote{border-left:4px solid var(--qs-primary);padding:16px 24px;margin:24px 0;background:var(--qs-primary-50);border-radius:0 var(--qs-radius) var(--qs-radius) 0;font-style:italic}
.qs-single-content figure{margin:24px 0}
.qs-single-content figcaption{margin-top:8px;font-size:.8125rem;color:var(--qs-text-light);text-align:center}
.qs-single-footer{margin-top:32px;padding:20px 0;border-top:1px solid var(--qs-border)}
.qs-tags a{display:inline-flex;padding:4px 14px;font-size:.8125rem;font-weight:500;color:var(--qs-text-light);background:var(--qs-bg);border:1px solid var(--qs-border);border-radius:50px;text-decoration:none;transition:all var(--qs-transition)}
.qs-tags a:hover{color:var(--qs-primary);border-color:var(--qs-primary);background:var(--qs-primary-50)}
.qs-page-links{margin-top:16px;font-size:.875rem;color:var(--qs-text-light)}

/* Archive / search header + empty state, also previously unstyled. */
.qs-archive-header{margin-bottom:32px}
.qs-archive-desc{color:var(--qs-text-light)}
.qs-empty{padding:64px 24px;text-align:center;color:var(--qs-text-light)}
.qs-post-date,.qs-post-cats{color:var(--qs-text-lighter)}
.qs-search-title{font-size:1.25rem;font-weight:700;margin:0 0 8px}
.qs-search-meta{margin-bottom:8px;font-size:.8125rem;color:var(--qs-text-lighter)}
.qs-search-excerpt{margin:0 0 16px;font-size:.875rem;line-height:1.6;color:var(--qs-text-light)}
.qs-404-links{display:flex;gap:16px;justify-content:center}

/* ========================================
   RESPONSIVE
   ======================================== */
@media(max-width:1024px){
  .qs-hero-grid{grid-template-columns:1fr;gap:40px;text-align:center}
  .qs-hero-text-col{text-align:center}
  .qs-hero-desc{margin-left:auto;margin-right:auto}
  .qs-hero-actions{justify-content:center}
  .qs-social-proof{justify-content:center}
  .qs-hero-illustration-wrap{max-width:380px;margin:0 auto}
  .qs-floating-card{display:none!important}
  .qs-countdown-card{position:static;margin-top:16px;max-width:300px;margin-left:auto;margin-right:auto}
  .qs-stats-grid{grid-template-columns:repeat(3,1fr)}
  .qs-testimonials-grid{grid-template-columns:1fr 1fr}
  .qs-pricing-grid{grid-template-columns:repeat(2,1fr)}
  .qs-pricing-featured{transform:none}
  .qs-pricing-featured:hover{transform:translateY(-6px)}
  .qs-ai-tools-layout{grid-template-columns:1fr}
  .qs-footer-grid{grid-template-columns:repeat(3,1fr)}
  .qs-faq-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .qs-header-inner{height:64px}
  .qs-mobile-toggle{display:flex}
  .qs-nav{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;background:rgba(255,255,255,0.98);backdrop-filter:blur(12px);z-index:999;padding:24px;overflow-y:auto}
  .qs-nav.open{display:block}
  .qs-nav-list,.qs-nav ul{flex-direction:column;gap:0}
  .qs-nav-list li a,.qs-nav ul li a{padding:14px 16px;font-size:1rem;border-bottom:1px solid var(--qs-border-light)}
  .qs-nav-list li.current-menu-item a::after,.qs-nav ul li.current-menu-item a::after{display:none}
  .qs-header-right .qs-btn-text{display:none}
  .qs-hero-modern{padding:40px 0}
  .qs-section-header{margin-bottom:32px}
  .qs-container{padding:0 16px}
  .qs-auth-wrapper{flex-direction:column}
  .qs-auth-left{display:none}
  .qs-auth-right{width:100%;padding:40px 20px}
  .qs-stats-grid{grid-template-columns:repeat(2,1fr)}
  .qs-testimonials-grid{grid-template-columns:1fr}
  .qs-pricing-grid{grid-template-columns:1fr;max-width:380px;margin:0 auto}
  .qs-pricing-featured{transform:none}
  .qs-pricing-featured:hover{transform:translateY(-6px)}
  .qs-footer-grid{grid-template-columns:repeat(2,1fr);gap:32px}
  .qs-steps-flow{flex-direction:column;align-items:center;gap:16px}
  .qs-step-item{max-width:200px;padding:0}
  .qs-step-line{width:2px;height:24px;margin:0 auto}
  .qs-footer-bottom-inner{text-align:center}
  .qs-hero-illustration-wrap{max-width:300px}
  .qs-footer{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
  .qs-main,.qs-front-page,.qs-auth-page{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:480px){
  .qs-pill-badge{font-size:.7rem;padding:4px 10px}
  .qs-stats-grid{grid-template-columns:1fr 1fr}
  .qs-features-matrix{grid-template-columns:1fr}
  .qs-footer-grid{grid-template-columns:1fr}
  .qs-header-right{gap:4px}
  .qs-header-right .qs-btn-sm{padding:6px 10px;font-size:.7rem}
  .qs-header-right .qs-btn-text{display:none}
}

/* ===== Login required gate ========================================== */
.qs-login-required{padding:56px 16px 72px;display:flex;justify-content:center}
.qs-login-required-card{width:100%;max-width:560px;background:#fff;border:1px solid #e2e8f0;border-radius:20px;box-shadow:0 12px 32px rgba(30,64,175,.08);padding:40px 36px;text-align:center}
.qs-login-required-icon{width:72px;height:72px;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;background:linear-gradient(135deg,#1e40af,#3b82f6)}
.qs-login-required-title{margin:0 0 10px;font-size:1.55rem;font-weight:700;color:#0f172a;line-height:1.3}
.qs-login-required-sub{margin:0 0 24px;color:#475569;font-size:.95rem;line-height:1.6}
.qs-login-required-list{list-style:none;margin:0 0 28px;padding:0;text-align:left}
.qs-login-required-list li{position:relative;padding:10px 0 10px 34px;border-top:1px solid #f1f5f9;color:#475569;font-size:.9rem;line-height:1.55}
.qs-login-required-list li:first-child{border-top:0}
.qs-login-required-list li::before{content:"\2713";position:absolute;left:0;top:12px;width:22px;height:22px;border-radius:50%;background:#ecfdf5;color:#059669;font-size:.8rem;font-weight:700;line-height:22px;text-align:center}
.qs-login-required-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.qs-login-required-btn{display:inline-block;padding:12px 26px;border-radius:10px;font-weight:600;font-size:.95rem;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.qs-login-required-btn--primary{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;box-shadow:0 6px 16px rgba(37,99,235,.3)}
.qs-login-required-btn--primary:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(37,99,235,.35);color:#fff}
.qs-login-required-btn--secondary{background:#f1f5f9;color:#1e40af;border:1px solid #e2e8f0}
.qs-login-required-btn--secondary:hover{background:#e2e8f0;color:#1e40af}
.qs-login-required-note{margin:18px 0 0;color:#94a3b8;font-size:.85rem}
@media(max-width:480px){
  .qs-login-required{padding:32px 12px 48px}
  .qs-login-required-card{padding:28px 20px}
  .qs-login-required-actions{flex-direction:column}
  .qs-login-required-btn{width:100%}
}

/* ===== FAQ PAGE ====================================================
   Converted from inline styles to tokens, so this page now follows
   light/dark like the rest of the theme. The tab script toggles the
   qs-active / qs-is-hidden classes instead of writing style.background
   and style.display, which is what previously pinned it to the light
   palette. ========================================================= */
.qs-faq-search{padding:30px 0}
.qs-search-bar{max-width:500px;margin:0 auto}
.qs-search-bar input[type="search"]{width:100%;box-sizing:border-box;padding:14px 20px;font-size:1rem;font-family:inherit;border:2px solid var(--qs-border);border-radius:var(--qs-radius-sm);background:var(--qs-bg-card);color:var(--qs-text);outline:none;transition:border-color var(--qs-transition),box-shadow var(--qs-transition)}
/* --qs-text-light, not --qs-text-lighter: the lighter token is only 2.6:1 on
   white, which fails WCAG AA for placeholder text. */
.qs-search-bar input[type="search"]::placeholder{color:var(--qs-text-light);opacity:1}
.qs-search-bar input[type="search"]:focus{border-color:var(--qs-primary);box-shadow:0 0 0 3px var(--qs-primary-50)}
.qs-faq-content{padding:20px 0 60px}
.qs-faq-tabs{display:flex;gap:10px;margin:0 0 30px;flex-wrap:wrap;justify-content:center}
.qs-faq-tabs .qs-tab{padding:10px 22px;border-radius:30px;background:var(--qs-secondary-50);color:var(--qs-text-light);text-decoration:none;font-weight:500;font-size:.95rem;border:1px solid transparent;transition:background var(--qs-transition),color var(--qs-transition),border-color var(--qs-transition)}
.qs-faq-tabs .qs-tab:hover{border-color:var(--qs-primary);color:var(--qs-primary)}
.qs-faq-tabs .qs-tab.qs-active{background:var(--qs-primary);color:var(--qs-on-primary)}
/* No explicit display here on purpose: an author-level "display:block" would
   override the UA stylesheet's [hidden]{display:none}, so the hidden attribute
   alone would stop hiding inactive groups. qs-is-hidden is the class the tab
   script toggles; [hidden] remains a working fallback. */
.qs-faq-group.qs-is-hidden{display:none}
.qs-faq-item{margin:0 0 12px;border-radius:12px;background:var(--qs-bg-card);border:1px solid var(--qs-border-light);box-shadow:var(--qs-shadow-sm);overflow:hidden}
.qs-faq-item summary{padding:18px 22px;background:var(--qs-bg-card);color:var(--qs-primary);font-weight:600;font-size:1rem;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px}
.qs-faq-item summary::-webkit-details-marker{display:none}
.qs-faq-item summary:focus-visible{outline:2px solid var(--qs-primary);outline-offset:-2px}
.qs-faq-marker{flex-shrink:0;font-size:1.2rem;color:var(--qs-text-lighter);transition:transform var(--qs-transition)}
.qs-faq-item[open] .qs-faq-marker{transform:rotate(45deg)}
.qs-faq-answer{padding:0 22px 18px;background:var(--qs-bg-card);color:var(--qs-text-light);line-height:1.6;font-size:.95rem}
.qs-faq-cta{margin-top:50px;padding:40px;border-radius:12px;background:var(--qs-gradient-primary);color:var(--qs-white);text-align:center}
.qs-faq-cta-title{margin:0 0 10px;color:var(--qs-white)}
.qs-faq-cta-text{margin:0 0 25px;opacity:.9}
.qs-faq-cta-btn{display:inline-block;padding:14px 36px;background:var(--qs-white);color:var(--qs-primary-darker);border-radius:var(--qs-radius-sm);text-decoration:none;font-weight:600;transition:transform var(--qs-transition),box-shadow var(--qs-transition)}
.qs-faq-cta-btn:hover{background:var(--qs-white);color:var(--qs-primary-dark);transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.18)}
@media (max-width:600px){
  .qs-faq-tabs{gap:8px}
  .qs-faq-tabs .qs-tab{padding:8px 16px;font-size:.85rem}
  .qs-faq-cta{padding:28px 20px}
  .qs-faq-cta-btn{width:100%}
}

/* ===== LEGAL PAGES (Terms / Privacy / Disclaimer) =====================
   Converted from inline styles to tokens. qs-legal-layout is defined here
   as the desktop grid; responsive.css:182 collapses it to a single column
   with !important, so keep the mobile override intact if you edit this.
   ========================================================= */
.qs-container--legal{max-width:800px}
.qs-terms-content,.qs-privacy-content{padding:50px 0}
.qs-legal-hero-title{margin:0 0 10px;color:var(--qs-white)}
.qs-last-updated{margin:0;opacity:.85;font-size:.95rem;color:var(--qs-white)}
.qs-legal-layout{display:grid;grid-template-columns:220px 1fr;gap:40px}
.qs-toc{position:sticky;top:30px;align-self:start}
.qs-toc-nav{padding:20px;background:var(--qs-secondary-50);border:1px solid var(--qs-border);border-radius:12px}
/* --qs-primary, not --qs-primary-darker: the darker token stays #1e40af in
   dark mode and would be unreadable on the dark card/panel backgrounds. */
.qs-toc-title{margin:0 0 15px;color:var(--qs-primary);font-size:1rem}
.qs-toc-list{margin:0;padding-left:20px;font-size:.85rem}
.qs-toc-list li{margin:0 0 6px}
.qs-toc-list li:last-child{margin-bottom:0}
.qs-toc-list a{color:var(--qs-primary);text-decoration:none;transition:color var(--qs-transition)}
.qs-toc-list a:hover{color:var(--qs-primary-dark);text-decoration:underline}
.qs-legal-text{font-size:.95rem;line-height:1.7;color:var(--qs-text-light)}
.qs-legal-text p{margin:0 0 14px}
.qs-legal-heading{margin:40px 0 12px;color:var(--qs-primary);font-size:1.3rem;line-height:1.35}
.qs-legal-heading:first-child{margin-top:0}
.qs-legal-list{margin:0 0 14px;padding-left:20px}
.qs-legal-list li{margin:0 0 8px}
.qs-legal-list li:last-child{margin-bottom:0}

/* ===== SHARED PAGE HEADER + GRID BASES ================================
   .qs-page-header itself is deliberately left unstyled: 8 templates use it
   with different treatments and FAQ relies on the plain default. Gradient
   heroes opt in via --gradient; --tall is the 80px About variant.
   qs-grid-* had media-query overrides in responsive.css but no base rule
   anywhere, so the base is declared here.
   ======================================================================= */
.qs-page-header--gradient{background:var(--qs-gradient-primary);color:var(--qs-white);padding:60px 0;text-align:center}
.qs-page-header--tall{padding:80px 0}
.qs-grid{display:grid}
.qs-grid-2{grid-template-columns:1fr 1fr;gap:30px}
.qs-grid-4{grid-template-columns:repeat(4,1fr);gap:25px}

/* ===== ABOUT PAGE =====================================================
   Converted from inline styles to tokens (mission/vision, story timeline,
   value cards, stats band, CTA).
   ======================================================================= */
.qs-mission-vision,.qs-values,.qs-about-cta{padding:60px 0}
.qs-hero-title{margin:0 0 10px;color:var(--qs-white)}
.qs-hero-subtitle{margin:0 auto;max-width:600px;font-size:1.2rem;opacity:.9}
.qs-card-pad-lg{padding:40px;border-radius:12px;box-shadow:var(--qs-shadow-md)}
.qs-section-title{margin:0;color:var(--qs-primary)}
.qs-section-title--center-lg{text-align:center;margin-bottom:40px}
.qs-about-lede{text-align:center;margin-bottom:40px;color:var(--qs-text-light)}
.qs-page-heading{margin-top:0;color:var(--qs-primary)}
.qs-card-text{font-size:.95rem;color:var(--qs-text-light)}
.qs-story{padding:60px 0;background:var(--qs-secondary-50)}
.qs-timeline{position:relative;padding-left:40px;border-left:3px solid var(--qs-primary)}
.qs-timeline-item{position:relative}
.qs-timeline-item--gap{margin-bottom:30px}
.qs-timeline-dot{position:absolute;left:-49px;top:0;width:16px;height:16px;border-radius:50%;background:var(--qs-primary);border:3px solid var(--qs-bg-card)}
.qs-value-card{padding:30px;border-radius:12px;box-shadow:var(--qs-shadow-md);text-align:center}
.qs-value-icon{font-size:2.5rem;margin-bottom:15px}
.qs-stats-bar--gradient{padding:50px 0;background:var(--qs-gradient-primary);color:var(--qs-white)}
.qs-stats-bar-grid{gap:20px;text-align:center}
/* home.css ships an unscoped ".qs-stat-item{display:flex}" for its own stats
   band, which would lay these out horizontally. Scoping under .qs-page-about
   restores the intended stacked figure-over-label without touching app pages. */
.qs-page-about .qs-stat-item{display:block}
.qs-page-about .qs-stat-figure{font-size:2.5rem;font-weight:700}
.qs-page-about .qs-stat-label{opacity:.85;font-size:1rem}
.qs-about-cta{text-align:center}
.qs-about-cta-text{max-width:500px;margin:10px auto 30px;color:var(--qs-text-light)}
.qs-cta-btn-lg{display:inline-block;padding:14px 36px;font-size:1.1rem;font-weight:600;text-decoration:none;border-radius:var(--qs-radius-sm)}

/* ===== CONTACT PAGE ===================================================
   Converted from inline styles to tokens.
   ======================================================================= */
.qs-contact-info{padding:60px 0}
.qs-contact-cards{margin-bottom:60px}
.qs-contact-columns{gap:40px}
.qs-contact-card{padding:30px;border-radius:12px;box-shadow:var(--qs-shadow-md);text-align:center}
.qs-contact-card-icon{font-size:2rem;margin-bottom:10px}
.qs-contact-card-title{margin:0 0 8px;color:var(--qs-primary)}
.qs-contact-card-value{margin:0;color:var(--qs-text-light)}
.qs-contact-card-note{margin:5px 0 0;color:var(--qs-text-light);font-size:.9rem}
.qs-contact-link{color:var(--qs-primary);text-decoration:none}
.qs-contact-link:hover{color:var(--qs-primary-dark);text-decoration:underline}
.qs-contact-link--strong{font-weight:600}
.qs-contact-form-wrapper{padding:40px;border-radius:12px;box-shadow:var(--qs-shadow-md)}
.qs-card-pad-md{padding:30px;border-radius:12px;box-shadow:var(--qs-shadow-md)}
.qs-side-card--gap{margin-bottom:25px}
.qs-side-card--top-gap{margin-top:25px}
.qs-hours-table{width:100%;border-collapse:collapse}
.qs-hours-table td{padding:8px 0;color:var(--qs-text-light)}
.qs-hours-table-value{text-align:right;color:var(--qs-text-light)}
.qs-map{padding:0 0 60px}
.qs-map-frame{width:100%;height:400px;border-radius:12px;overflow:hidden;border:1px solid var(--qs-border)}
.qs-map-iframe{border:0;display:block}

/* ===== SHARED PAGE HEADINGS / HERO TEXT ================================
   Neutral names shared by the converted About, Contact and CBT pages.
   Vertical margins are left at the browser default unless a page overrode
   them, which is why only the bottom margins are declared here.
   ======================================================================= */
.qs-hero-title{margin:0 0 10px;color:var(--qs-white)}
.qs-hero-subtitle{margin:0 auto;max-width:600px;font-size:1.2rem;opacity:.9}
.qs-hero-subtitle--sm{max-width:500px;font-size:1.1rem}
.qs-section-title{color:var(--qs-primary)}
.qs-section-title--center{text-align:center;margin-bottom:30px}
.qs-section-title--center-lg{text-align:center;margin-bottom:40px}
.qs-page-heading{margin-top:0;color:var(--qs-primary)}
.qs-card-title{margin:0 0 8px;color:var(--qs-primary)}
.qs-card-text{color:var(--qs-text-light)}
.qs-card-body{margin:0;color:var(--qs-text-light)}
.qs-card-note{margin:0;color:var(--qs-text-light);font-size:.9rem}

/* ===== CBT EXAM PAGE ===================================================
   The amber notice and blue tip callout now use the theme's dark-aware
   semantic tokens (--qs-warning-bg / --qs-info-bg) instead of hardcoded
   #fef9c3 and #eff6ff, which stayed glaring in dark mode.
   ======================================================================= */
.qs-exam-instructions,.qs-exam-tips{padding:40px 0}
.qs-exam-features,.qs-exam-content{padding:0 0 40px}
.qs-callout{padding:25px;border-radius:12px}
.qs-callout--warning{background:var(--qs-warning-bg);border:1px solid var(--qs-warning);margin-bottom:30px}
.qs-callout--info{background:var(--qs-info-bg);border-left:5px solid var(--qs-info)}
.qs-callout-list{margin:0;padding-left:20px;color:var(--qs-text-light)}
.qs-callout-list li{margin:0 0 6px}
.qs-callout-list li:last-child{margin-bottom:0}
.qs-exam-feature-grid{gap:20px}
.qs-feature-card{padding:25px;border-radius:12px;box-shadow:var(--qs-shadow-md);text-align:center}
.qs-feature-icon{font-size:2rem;margin-bottom:10px}

  /* ===== Signup activation note ======================================== */
.qs-auth-activation-note{display:flex;gap:12px;align-items:flex-start;text-align:left;background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;padding:12px 14px;margin:0 0 14px;color:#1e40af}
.qs-auth-activation-note p{margin:0;font-size:.85rem;line-height:1.55}
.qs-auth-activation-note strong{display:block;color:#1e3a8a}
.qs-auth-activation-ico{flex-shrink:0;margin-top:2px;color:#2563eb}