*{margin:0;padding:0;box-sizing:border-box}
:root{--primary:#0d9488;--primary-dark:#0f766e;--primary-light:#14b8a6;--accent:#059669;--bg:#f8faf9;--card:#fff;--text:#1a1a2e;--text-light:#6b7280;--border:#e5e7eb;--radius:12px;--shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06);--shadow-lg:0 10px 25px rgba(0,0,0,.1);--transition:all .3s ease}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden}
.screen{display:none;min-height:100vh;animation:fadeIn .4s ease}
.screen.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}

/* NAV */
.nav{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.logo{font-weight:800;font-size:1.2rem;color:var(--primary-dark)}
.progress-wrap{display:flex;align-items:center;gap:12px}
.progress-bar{width:200px;height:6px;background:var(--border);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-light));border-radius:3px;transition:width .4s ease}
.progress-text{font-size:.8rem;color:var(--text-light);white-space:nowrap}

/* Progress pulse animation */
@keyframes progressPulse{0%,100%{box-shadow:0 0 0 0 rgba(13,148,136,.4)}50%{box-shadow:0 0 0 6px rgba(13,148,136,0)}}
.progress-fill{animation:progressPulse 2s ease-in-out infinite}

/* BUTTONS */
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border:none;padding:14px 32px;border-radius:var(--radius);font-size:1rem;font-weight:600;cursor:pointer;transition:var(--transition);box-shadow:0 4px 14px rgba(13,148,136,.3)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(13,148,136,.4)}
.btn-primary:active{transform:translateY(0);box-shadow:0 2px 8px rgba(13,148,136,.3)}
.btn-primary.btn-lg{padding:18px 48px;font-size:1.15rem}
.btn-secondary{background:var(--card);color:var(--text);border:1px solid var(--border);padding:12px 24px;border-radius:var(--radius);font-size:.95rem;font-weight:500;cursor:pointer;transition:var(--transition)}
.btn-secondary:hover{border-color:var(--primary);color:var(--primary)}
.btn-secondary:active{background:var(--bg)}
.btn-sm{padding:8px 16px;font-size:.85rem}

/* HERO */
.hero{max-width:720px;margin:0 auto;text-align:center;padding:80px 24px 60px}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;line-height:1.15;margin-bottom:20px;background:linear-gradient(135deg,var(--text) 0%,var(--primary-dark) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.subtitle{font-size:1.15rem;color:var(--text-light);max-width:540px;margin:0 auto 36px;line-height:1.7}
.hero-stats{display:flex;justify-content:center;gap:48px;margin-top:48px;padding-top:36px;border-top:1px solid var(--border)}
.hero-stats div{text-align:center}
.hero-stats strong{display:block;font-size:1.5rem;color:var(--primary-dark)}
.hero-stats span{font-size:.8rem;color:var(--text-light)}

/* QUIZ */
.quiz-container{max-width:680px;margin:0 auto;padding:40px 24px 20px}
.quiz-step{animation:slideIn .4s ease}
.quiz-step h2{font-size:1.6rem;font-weight:700;margin-bottom:6px}
.quiz-step .step-desc{color:var(--text-light);margin-bottom:28px;font-size:.95rem}
.quiz-nav{max-width:680px;margin:0 auto;padding:0 24px 40px;display:flex;justify-content:space-between}

/* FORM ELEMENTS */
.field{margin-bottom:24px}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:8px}
.field .hint{font-size:.8rem;color:var(--text-light);margin-bottom:6px}
.slider-wrap{display:flex;align-items:center;gap:12px}
.slider-wrap input[type=range]{flex:1;-webkit-appearance:none;height:6px;background:var(--border);border-radius:3px;outline:none}
.slider-wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--primary);cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.slider-val{min-width:60px;text-align:right;font-weight:600;font-size:.9rem;color:var(--primary-dark)}
select{width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius);font-size:.95rem;font-family:inherit;background:var(--card);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;cursor:pointer}
select:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px rgba(13,148,136,.1)}
.chip-group{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 16px;border:1px solid var(--border);border-radius:20px;font-size:.85rem;cursor:pointer;transition:var(--transition);background:var(--card);user-select:none}
.chip:hover{border-color:var(--primary-light)}
.chip:active{transform:scale(.96)}
.chip.selected{background:var(--primary);color:#fff;border-color:var(--primary)}
.toggle-group{display:flex;gap:8px;flex-wrap:wrap}
.toggle-btn{padding:10px 20px;border:1px solid var(--border);border-radius:var(--radius);font-size:.9rem;cursor:pointer;transition:var(--transition);background:var(--card);font-weight:500}
.toggle-btn:hover{border-color:var(--primary-light)}
.toggle-btn:active{transform:scale(.97)}
.toggle-btn.selected{background:var(--primary);color:#fff;border-color:var(--primary)}
input[type=text]{width:100%;padding:12px 16px;border:1px solid var(--border);border-radius:var(--radius);font-size:.95rem;font-family:inherit}
input[type=text]:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px rgba(13,148,136,.1)}

/* RESULTS */
.results-container{max-width:860px;margin:0 auto;padding:40px 24px 60px}
.results-header{text-align:center;margin-bottom:40px}
.results-header h2{font-size:2rem;font-weight:800;margin-bottom:8px}
.results-header p{color:var(--text-light);font-size:1.05rem}

/* Skeleton shimmer */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{background:linear-gradient(90deg,var(--border) 25%,#f0f0f0 50%,var(--border) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:8px;height:200px;margin-bottom:20px}

.result-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:28px;margin-bottom:20px;box-shadow:var(--shadow);transition:var(--transition);animation:slideUp .4s ease backwards}
.result-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.rc-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:12px}
.rc-rank{font-size:.75rem;font-weight:700;color:var(--primary);background:rgba(13,148,136,.08);padding:4px 10px;border-radius:6px}
.rc-match{font-size:1.4rem;font-weight:800;color:var(--primary-dark)}
.rc-city{font-size:1.3rem;font-weight:700}
.rc-state{color:var(--text-light);font-weight:400;font-size:1rem}
.rc-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:16px 0}
.rc-stat{background:var(--bg);padding:10px 12px;border-radius:8px;font-size:.8rem}
.rc-stat strong{display:block;font-size:.95rem;color:var(--text)}
.rc-stat span{color:var(--text-light)}
.rc-narrative{color:var(--text-light);font-size:.92rem;line-height:1.7;margin:16px 0;padding:16px;background:linear-gradient(135deg,rgba(13,148,136,.03),rgba(5,150,105,.06));border-radius:10px;border-left:3px solid var(--primary)}
.rc-proscons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}
.rc-pros,.rc-cons{font-size:.85rem}
.rc-pros h4,.rc-cons h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.rc-pros h4{color:var(--accent)}
.rc-cons h4{color:#dc2626}
.rc-pros li,.rc-cons li{margin-bottom:4px;list-style:none;padding-left:18px;position:relative}
.rc-pros li::before{content:'✓';position:absolute;left:0;color:var(--accent);font-weight:700}
.rc-cons li::before{content:'✗';position:absolute;left:0;color:#dc2626;font-weight:700}
.results-cta{text-align:center;margin-top:48px;padding:48px 40px;background:linear-gradient(135deg,rgba(13,148,136,.08),rgba(5,150,105,.14));border-radius:16px;border:1px solid rgba(13,148,136,.12)}
.results-cta h3{font-size:1.4rem;margin-bottom:8px}
.results-cta p{color:var(--text-light);margin-bottom:24px}

/* FILTER BAR */
.filter-bar{max-width:860px;margin:0 auto 0;padding:16px 24px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);position:sticky;top:60px;z-index:50}
.filter-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.filter-chip{padding:6px 14px;border:1px solid var(--border);border-radius:20px;font-size:.8rem;cursor:pointer;transition:var(--transition);background:var(--card);user-select:none;font-weight:500}
.filter-chip:hover{border-color:var(--primary-light)}
.filter-chip:active{transform:scale(.96)}
.filter-chip.selected{background:var(--primary);color:#fff;border-color:var(--primary)}
.filter-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.filter-label{font-size:.78rem;font-weight:600;color:var(--text-light);text-transform:uppercase;letter-spacing:.04em}
.filter-select{width:auto;min-width:120px;padding:6px 28px 6px 10px;font-size:.82rem;border-radius:8px;border:1px solid var(--border);background:var(--card);font-family:inherit;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;cursor:pointer}
.filter-select:focus{border-color:var(--primary);outline:none}
.filter-clear{background:none;border:none;color:var(--primary);font-size:.8rem;font-weight:600;cursor:pointer;padding:4px 8px;font-family:inherit}
.filter-clear:hover{text-decoration:underline}
.filter-count{font-size:.8rem;color:var(--text-light);margin-left:auto}

/* WAITLIST FORM */
.waitlist-form{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.waitlist-input{padding:12px 16px;border:1px solid var(--border);border-radius:8px;font-size:.95rem;font-family:inherit;width:280px;max-width:100%}
.waitlist-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(13,148,136,.1)}
.waitlist-form--inline{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.waitlist-form--inline .waitlist-input{width:220px;padding:10px 12px;font-size:.9rem}
.waitlist-success{font-size:1.1rem;font-weight:600;color:var(--primary-dark);padding:12px 0}

/* FOOTER WAITLIST */
.footer-waitlist{margin-bottom:8px}

/* TOAST */
.toast-container{position:fixed;bottom:24px;right:24px;z-index:2000;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{padding:14px 24px;border-radius:10px;font-size:.9rem;font-family:inherit;color:#fff;transform:translateX(120%);transition:transform .3s ease,opacity .3s ease;opacity:0;pointer-events:auto;box-shadow:0 4px 12px rgba(0,0,0,.15);max-width:360px}
.toast--visible{transform:translateX(0);opacity:1}
.toast--success{background:var(--primary)}
.toast--error{background:#dc2626}

/* CONFETTI */
.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3000;overflow:hidden}
@keyframes confettiFall{0%{transform:translateY(-10vh) rotate(0deg);opacity:1}100%{transform:translateY(110vh) rotate(720deg);opacity:0}}
.confetti-piece{position:absolute;width:10px;height:10px;top:-10px;animation:confettiFall 3s ease-out forwards}

/* LANDING SECTIONS */
.section{max-width:880px;margin:0 auto;padding:64px 24px}
.section-title{font-size:clamp(1.4rem,3vw,2rem);font-weight:800;text-align:center;margin-bottom:40px;color:var(--text)}
.section-title em{color:var(--primary);font-style:normal}

/* HOW IT WORKS */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step-card{text-align:center;padding:32px 20px;background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);transition:var(--transition)}
.step-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.step-emoji{font-size:2.4rem;margin-bottom:12px}
.step-number{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--primary);margin-bottom:8px}
.step-card h3{font-size:1.05rem;font-weight:700;margin-bottom:8px}
.step-card p{font-size:.88rem;color:var(--text-light);line-height:1.6}

/* METHODOLOGY */
.methodology{text-align:center}
.dimensions-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.dim-card{display:flex;align-items:center;gap:10px;padding:14px 22px;background:var(--card);border:1px solid var(--border);border-radius:40px;box-shadow:var(--shadow);transition:var(--transition)}
.dim-card:hover{border-color:var(--primary-light);transform:translateY(-2px)}
.dim-icon{font-size:1.4rem}
.methodology .dim-label{font-weight:600;font-size:.9rem}

/* DATA SOURCES */
.data-sources{padding-top:0}
.data-sources-inner{text-align:center;padding:40px 32px;background:linear-gradient(135deg,rgba(13,148,136,.05),rgba(5,150,105,.1));border-radius:16px}
.data-sources-inner h3{font-size:1.3rem;font-weight:700;margin-bottom:8px}
.data-sources-inner>p{color:var(--text-light);font-size:.95rem;margin-bottom:20px}
.source-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.source-badge{padding:8px 16px;background:var(--card);border:1px solid var(--border);border-radius:8px;font-size:.85rem;font-weight:500}

/* FAQ */
.faq-section{padding-bottom:32px}
.faq-list{max-width:680px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--border)}
.faq-q{width:100%;background:none;border:none;padding:20px 0;display:flex;justify-content:space-between;align-items:center;font-size:1rem;font-weight:600;font-family:inherit;color:var(--text);cursor:pointer;text-align:left;gap:16px}
.faq-q:hover{color:var(--primary-dark)}
.faq-icon{font-size:1.3rem;font-weight:300;color:var(--primary);transition:transform .3s ease;flex-shrink:0}
.faq-item.open .faq-icon{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-item.open .faq-a{max-height:300px}
.faq-a-inner{padding:0 0 20px;color:var(--text-light);font-size:.92rem;line-height:1.7}

/* LANDING FOOTER */
.landing-footer{text-align:center;padding:60px 24px 32px;border-top:1px solid var(--border);margin-top:16px}
.landing-footer p{color:var(--text-light);font-size:.9rem;margin-top:16px}
.landing-footer .footer-copy{color:var(--text-light);font-size:.8rem;margin-top:24px}

/* FOOTER */
.footer{text-align:center;padding:24px;color:var(--text-light);font-size:.8rem;border-top:1px solid var(--border);margin-top:40px}

/* Auth & Modal */
.auth-btn{font-size:.9em;color:var(--primary);font-weight:500}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}
.modal-box{background:var(--card);border-radius:var(--radius);padding:32px;width:90%;max-width:380px;position:relative;box-shadow:var(--shadow-lg)}
.modal-close{position:absolute;top:12px;right:16px;background:none;border:none;font-size:1.2em;cursor:pointer;opacity:.5}
.modal-close:hover{opacity:1}
.modal-box h3{margin-bottom:16px;color:var(--primary)}
.auth-input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font-size:.95em;margin-bottom:10px;font-family:inherit}
.auth-input:focus{outline:none;border-color:var(--primary)}

/* Results Map */
#resultsMap{height:400px;border-radius:var(--radius);margin:24px auto 24px;max-width:860px;border:1px solid var(--border);display:none;z-index:1}
#resultsMap.active{display:block}

/* Salary Comparison Calculator */
.salary-bar{max-width:860px;margin:0 auto 0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);display:none}
.salary-bar.active{display:block}
.salary-toggle{width:100%;padding:10px 20px;background:none;border:none;cursor:pointer;text-align:left;font-size:.9rem;font-weight:600;color:var(--text);display:flex;align-items:center;gap:6px;font-family:inherit}
.salary-toggle:hover{background:rgba(13,148,136,.04)}
.sal-toggle-icon{transition:transform .2s;font-size:.75rem}
.salary-toggle[aria-expanded="true"] .sal-toggle-icon{transform:rotate(90deg)}
.salary-inputs{padding:0 20px 16px;display:flex;flex-wrap:wrap;gap:12px;align-items:end}
.salary-inputs[hidden]{display:none}
.salary-field{display:flex;flex-direction:column;gap:3px}
.salary-field label{font-size:.75rem;color:var(--text-light);font-weight:600}
.salary-field input[type="text"]{padding:8px 10px;border:1px solid var(--border);border-radius:8px;font-size:.9rem;width:200px;font-family:inherit}
.salary-field input[type="text"]:focus{border-color:var(--primary);outline:none;box-shadow:0 0 0 3px rgba(13,148,136,.1)}
.sal-input-prefix{display:flex;align-items:center;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.sal-input-prefix:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(13,148,136,.1)}
.sal-prefix{padding:8px 6px 8px 10px;color:var(--text-light);background:var(--bg);font-size:.9rem}
.sal-input-prefix input{border:none!important;box-shadow:none!important;padding:8px 10px 8px 4px;width:130px;font-size:.9rem;outline:none;font-family:inherit}

/* Per-card salary widget */
.salary-widget{margin-top:12px;padding:12px 14px;background:var(--bg);border-radius:10px;font-size:.85rem;border-left:3px solid var(--primary);transition:var(--transition)}
.salary-widget.sw-benefit{border-left-color:var(--accent);background:rgba(5,150,105,.04)}
.salary-widget.sw-cost{border-left-color:#dc2626;background:rgba(220,38,38,.03)}
.sw-equivalent{margin-bottom:6px;line-height:1.5}
.sw-amount{font-weight:800;font-size:1.05rem}
.sw-amount.sw-pos{color:var(--accent)}
.sw-amount.sw-neg{color:#dc2626}
.sw-breakdown{display:flex;flex-direction:column;gap:2px;font-size:.8rem;color:var(--text-light)}
.sw-breakdown .sw-pos{color:var(--accent)}
.sw-breakdown .sw-neg{color:#dc2626}
.sw-net{margin-top:6px;padding-top:6px;border-top:1px solid var(--border);font-weight:700;font-size:.88rem}

/* EXPAND DETAIL VIEW */
.rc-expand-toggle{background:none;border:1px solid var(--border);border-radius:8px;padding:6px 14px;font-size:.8rem;font-weight:600;color:var(--primary);cursor:pointer;transition:var(--transition)}
.rc-expand-toggle:hover{background:rgba(13,148,136,.06);border-color:var(--primary)}
.rc-expand-toggle:active{transform:scale(.97)}
.rc-detail{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(0.4,0,0.2,1),opacity .3s ease,padding .3s ease;opacity:0;padding:0 0}
.result-card.expanded .rc-detail{max-height:2000px;opacity:1;padding:20px 0 0}
.rc-detail-section{margin-bottom:20px}
.rc-detail-section h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-light);margin-bottom:10px;font-weight:700}
.cost-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.cost-item{background:var(--bg);padding:10px 12px;border-radius:8px;text-align:center}
.cost-item .cost-val{font-weight:700;font-size:1rem;color:var(--text)}
.cost-item .cost-label{font-size:.75rem;color:var(--text-light)}
.climate-chart{display:flex;align-items:flex-end;gap:16px;height:120px;padding:10px 0}
.climate-bar-group{display:flex;flex-direction:column;align-items:center;flex:1;height:100%;justify-content:flex-end}
.climate-bar{width:32px;border-radius:6px 6px 0 0;transition:height .4s ease;position:relative}
.climate-bar.summer{background:linear-gradient(to top,#f59e0b,#ef4444)}
.climate-bar.winter{background:linear-gradient(to top,#3b82f6,#06b6d4)}
.climate-bar-label{font-size:.7rem;color:var(--text-light);margin-top:4px}
.climate-bar-val{font-size:.75rem;font-weight:700;margin-bottom:2px}
.score-bars{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.score-bar-item{display:flex;align-items:center;gap:8px}
.score-bar-item .sb-label{font-size:.8rem;min-width:80px;color:var(--text-light)}
.score-bar-item .sb-track{flex:1;height:8px;background:var(--border);border-radius:4px;overflow:hidden}
.score-bar-item .sb-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--primary),var(--primary-light));transition:width .6s ease}
.score-bar-item .sb-val{font-size:.75rem;font-weight:600;min-width:28px;text-align:right;color:var(--primary-dark)}
.dimension-scores{display:grid;grid-template-columns:1fr;gap:6px}
.dim-row{display:flex;align-items:center;gap:8px}
.dim-row .dim-label{font-size:.8rem;min-width:120px;color:var(--text)}
.dim-row .dim-track{flex:1;height:8px;background:var(--border);border-radius:4px;overflow:hidden}
.dim-row .dim-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--primary-light));transition:width .6s ease}
.dim-row .dim-val{font-size:.75rem;font-weight:600;min-width:32px;text-align:right;color:var(--accent)}

/* COMPARE CHECKBOX */
.rc-compare-wrap{display:flex;align-items:center;gap:6px;margin-top:10px}
.rc-compare-cb{width:18px;height:18px;accent-color:var(--primary);cursor:pointer}
.rc-compare-label{font-size:.8rem;color:var(--text-light);cursor:pointer}
.compare-fab{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;border:none;padding:14px 28px;border-radius:30px;font-size:1rem;font-weight:600;cursor:pointer;box-shadow:0 6px 24px rgba(13,148,136,.4);z-index:200;transition:var(--transition);animation:slideUp .3s ease}
.compare-fab:hover{transform:translateX(-50%) translateY(-2px);box-shadow:0 8px 30px rgba(13,148,136,.5)}
.compare-view{max-width:960px;margin:0 auto;padding:40px 24px 60px}
.compare-view h2{text-align:center;font-size:1.8rem;font-weight:800;margin-bottom:24px}
.compare-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.compare-table th,.compare-table td{padding:12px 16px;text-align:center;border-bottom:1px solid var(--border);font-size:.88rem}
.compare-table th{background:var(--bg);font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-light)}
.compare-table th:first-child,.compare-table td:first-child{text-align:left;font-weight:600;color:var(--text);background:rgba(13,148,136,.02)}
.compare-table td.winner{background:rgba(5,150,105,.08)}
.compare-table tr:last-child td{border-bottom:none}
.compare-back{display:block;margin:0 auto 20px;text-align:center}

/* Score countUp support */
.count-up{transition:none}

/* RESPONSIVE — 768px */
@media(max-width:768px){
  .nav{padding:14px 20px}
  .hero{padding:60px 20px 40px}
  .hero h1{font-size:clamp(1.6rem,4vw,2.4rem)}
  .hero-stats{gap:28px}
  .steps-grid{grid-template-columns:1fr}
  .section{padding:48px 16px}
  .filter-bar{margin-left:12px;margin-right:12px;top:56px}
  .filter-row{gap:8px}
  .compare-table{font-size:.8rem}
  .compare-table th,.compare-table td{padding:10px 12px}
}

/* 640px */
@media(max-width:640px){
  .nav{padding:12px 16px}
  .progress-bar{width:120px}
  .hero{padding:48px 20px 40px}
  .hero-stats{gap:24px}
  .quiz-container{padding:24px 16px 12px}
  .quiz-nav{padding:0 16px 24px}
  .rc-proscons{grid-template-columns:1fr}
  .rc-stats{grid-template-columns:1fr 1fr}
  .results-container{padding:24px 16px 40px}
  .steps-grid{grid-template-columns:1fr}
  .section{padding:48px 16px}
  .score-bars{grid-template-columns:1fr}
  .cost-grid{grid-template-columns:1fr 1fr}
  .compare-table{font-size:.78rem}
  .compare-table th,.compare-table td{padding:8px 10px}
  .salary-inputs{flex-direction:column}
  .salary-field{width:100%}
  .salary-field input[type="text"]{width:100%}
  .sal-input-prefix input{width:100%}
}

/* 480px */
@media(max-width:480px){
  .hero h1{font-size:1.5rem}
  .subtitle{font-size:1rem}
  .hero-stats{flex-direction:column;gap:16px}
  .result-card{padding:20px 16px}
  .rc-city{font-size:1.1rem}
  .rc-match{font-size:1.2rem}
  .btn-primary.btn-lg{padding:14px 32px;font-size:1rem}
  .filter-bar{padding:12px 14px}
  .filter-chip{padding:5px 10px;font-size:.75rem}
}

/* 375px */
@media(max-width:375px){
  .nav{padding:10px 12px}
  .logo{font-size:1rem}
  .hero{padding:32px 14px 28px}
  .result-card{padding:16px 12px}
  .rc-stats{grid-template-columns:1fr}
}

/* === SALARY COMPARISON CALCULATOR (bd-2lp) === */
.salary-bar { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 0; margin-bottom: 0; }
.salary-toggle { width: 100%; padding: 12px 20px; background: none; border: none; cursor: pointer; font-size: 0.95em; font-weight: 600; text-align: left; display: flex; justify-content: space-between; align-items: center; color: var(--text); }
.salary-toggle:hover { background: #f9fafb; }
.sal-toggle-icon { font-size: 0.85em; opacity: 0.5; }
.salary-inputs { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 20px 16px; align-items: flex-end; }
.salary-field { display: flex; flex-direction: column; gap: 4px; }
.salary-field label { font-size: 0.8em; font-weight: 500; color: #64748b; }
.salary-field input { padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 0.9em; min-width: 180px; }
.sal-input-prefix { position: relative; display: flex; align-items: center; }
.sal-prefix { position: absolute; left: 10px; color: #94a3b8; font-weight: 500; pointer-events: none; }
.sal-input-prefix input { padding-left: 24px; }
.salary-widget { font-size: 0.85em; padding: 6px 12px; margin: 6px 16px; border-radius: 8px; background: #f0fdf4; display: inline-block; }
.sw-positive { color: var(--accent, #0d9488); background: #f0fdf4; }
.sw-negative { color: #dc2626; background: #fef2f2; }

/* === CONFETTI (bd-329) === */
.confetti-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; overflow: hidden; }
.confetti-piece { position: fixed; width: 10px; height: 10px; pointer-events: none; z-index: 10000; transition: transform 1.2s cubic-bezier(.25,.46,.45,.94), opacity 1.2s ease-out; border-radius: 2px; }

@keyframes confettiBurst {
  0% { transform: scale(1) rotate(0deg); opacity: 1; }
  100% { transform: scale(0.2) rotate(360deg); opacity: 0; }
}

/* === SHIMMER SKELETON (bd-329) === */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton-shimmer { position: relative; overflow: hidden; }
.skeleton-shimmer::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }

/* === PROGRESS FILL GLOW (bd-329) === */
.progress-fill { transition: width 0.4s ease; box-shadow: 0 0 8px rgba(13,148,136,0.4); }

/* === QUIZ SLIDE ANIMATIONS (bd-329) === */
@keyframes slideInRight {
  from { transform: translateX(60px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes slideInLeft {
  from { transform: translateX(-60px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.slide-in-right { animation: slideInRight 0.3s ease-out; }
.slide-in-left { animation: slideInLeft 0.3s ease-out; }