/* ══════════════════════════════════════════════════════════════
   PickLogic — main.css
   Comprehensive stylesheet covering all page types.
   Niche-specific colors are set via :root overrides inline.
   
   Generated from live page CSS + v3 additions.
   Page types covered: hub, comparison, best-for, quiz,
   homepage, stacks, section hub, industry vertical.
   ═══════════════════════════════════════════════════════════════ */

/* ── SHARED BASE (from comparison/hub/best-for pages) ────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#FAFAF8;--surface:#FFFFFF;--text:#1A1A1A;--text-secondary:#6B6B6B;--accent:#2D5F2D;--accent-light:#E8F0E8;--accent-hover:#1E4A1E;--border:#E5E5E0;--radius:12px;--radius-lg:20px;--shadow-sm:0 1px 3px rgba(0,0,0,0.06);--shadow-md:0 4px 16px rgba(0,0,0,0.08)}
html{scroll-behavior:smooth}body{font-family:'DM Sans',-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh}
.site-header{padding:16px 24px;border-bottom:1px solid var(--border);background:var(--surface)}.site-header-inner{max-width:960px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}.logo{font-family:'Fraunces',serif;font-weight:700;font-size:1.15rem;color:var(--accent);text-decoration:none}
.header-nav{display:flex;align-items:center;gap:4px}.header-nav>a{font-size:0.8rem;font-weight:500;color:var(--text-secondary);text-decoration:none;padding:6px 10px;border-radius:6px;transition:all 0.15s ease;white-space:nowrap}.header-nav>a:hover{color:var(--text);background:var(--accent-light)}.nav-dropdown{position:relative}.nav-more{font-family:'DM Sans',sans-serif;font-size:0.8rem;font-weight:500;color:var(--text-secondary);background:none;border:none;cursor:pointer;padding:6px 10px;border-radius:6px;transition:all 0.15s ease}.nav-more:hover{color:var(--text);background:var(--accent-light)}.nav-dropdown-menu{display:none;position:absolute;right:0;top:100%;padding-top:6px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:6px;min-width:380px;columns:2;column-gap:4px;box-shadow:0 8px 24px rgba(0,0,0,0.1);z-index:100}.nav-dropdown:hover .nav-dropdown-menu{display:block}.nav-dropdown-menu a{display:block;font-size:0.82rem;font-weight:500;color:var(--text);text-decoration:none;padding:8px 12px;border-radius:6px;transition:background 0.15s ease}.nav-dropdown-menu a:hover{background:var(--accent-light)}.mobile-menu-btn{display:none;font-size:1.3rem;background:none;border:none;cursor:pointer;color:var(--text);padding:4px 8px}
@media(max-width:700px){.header-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--surface);border-bottom:1px solid var(--border);padding:12px 16px;flex-direction:column;align-items:stretch;gap:2px;box-shadow:0 8px 24px rgba(0,0,0,0.1);z-index:1000}.header-nav.open{display:flex}.header-nav>a{font-size:0.9rem;padding:10px 12px}.nav-dropdown{width:100%}.nav-more{width:100%;text-align:left;font-size:0.9rem;padding:10px 12px}.nav-dropdown-menu{position:static;box-shadow:none;border:none;padding:0 0 0 12px;margin-top:0;min-width:auto;display:none;columns:1}.nav-dropdown:hover .nav-dropdown-menu{display:block}.nav-dropdown-menu a{font-size:0.88rem;padding:10px 12px}.mobile-menu-btn{display:block}.site-header-inner{position:relative}}
.container{max-width:720px;margin:0 auto;padding:48px 24px 80px}
h1{font-family:'Fraunces',serif;font-size:clamp(1.8rem,4.5vw,2.4rem);font-weight:700;line-height:1.15;letter-spacing:-0.02em;margin-bottom:16px;text-align:center}
.subtitle{font-size:1rem;color:var(--text-secondary);text-align:center;max-width:560px;margin:0 auto 40px;line-height:1.7}
.date-badge{text-align:center;margin-bottom:32px}.date-badge span{font-size:0.7rem;font-weight:600;color:var(--text-secondary);background:var(--accent-light);padding:4px 10px;border-radius:99px;letter-spacing:0.04em;text-transform:uppercase}
h2{font-family:'Fraunces',serif;font-size:1.3rem;font-weight:700;margin-top:44px;margin-bottom:14px}
p{font-size:0.92rem;color:var(--text-secondary);line-height:1.75;margin-bottom:14px}strong{color:var(--text)}
.breadcrumb{font-size:0.78rem;color:var(--text-secondary);margin-bottom:24px;text-align:center}.breadcrumb a{color:var(--text-secondary);text-decoration:none}.breadcrumb a:hover{color:var(--text)}
.rec-card{border:1.5px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);padding:24px;margin-bottom:16px}.rec-card.top{border-color:var(--accent);background:var(--accent-light)}
.rec-badge{display:inline-block;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;padding:4px 10px;border-radius:99px;margin-bottom:12px}.badge-top{background:var(--accent);color:white}.badge-runner{background:#FFF8E7;color:#B8860B}.badge-alt{background:#EFF6FF;color:#1D4ED8}
.rec-header{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}.rec-header h3{font-family:'Fraunces',serif;font-size:1.15rem;font-weight:700}.rec-price{font-weight:700;color:var(--accent)}
.rec-card p{font-size:0.88rem;margin-bottom:12px}
.rec-features{display:flex;flex-wrap:wrap;gap:6px}.rec-features span{font-size:0.73rem;font-weight:500;padding:4px 10px;background:rgba(0,0,0,0.04);border-radius:99px;color:var(--text-secondary)}
.quiz-cta{display:block;text-align:center;padding:18px;border-radius:var(--radius);background:var(--accent);color:white;font-family:'DM Sans',sans-serif;font-size:1rem;font-weight:600;text-decoration:none;margin:40px 0;transition:all 0.2s ease}.quiz-cta:hover{background:var(--accent-hover)}
.related{margin-top:48px;padding-top:32px;border-top:1px solid var(--border)}.related h2{margin-top:0}
.comp-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.comp-links a{font-size:0.84rem;font-weight:500;color:var(--text);text-decoration:none;padding:10px 18px;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--surface);transition:all 0.2s ease}.comp-links a:hover{border-color:var(--accent);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.vs-table-wrap{overflow-x:auto;margin:24px 0;border-radius:var(--radius);border:1px solid var(--border)}.vs-table{width:100%;border-collapse:collapse;font-size:0.85rem;min-width:480px}.vs-table th{background:var(--accent-light);color:var(--accent);font-weight:600;text-align:left;padding:12px 16px;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.04em}.vs-table td{padding:12px 16px;border-top:1px solid var(--border)}.vs-table .feature-label{font-weight:600;color:var(--text);background:rgba(0,0,0,0.015)}.vs-table tbody tr:hover{background:var(--accent-light)}
.verdict-box{background:var(--accent-light);border:1.5px solid var(--accent);border-radius:var(--radius-lg);padding:28px;margin:32px 0}.verdict-box h3{font-family:'Fraunces',serif;font-size:1.15rem;font-weight:700;margin-bottom:8px;color:var(--accent)}.verdict-box p{margin-bottom:0;color:var(--text)}
.faq-item{margin-bottom:24px}.faq-item h3{font-family:'DM Sans',sans-serif;font-size:1rem;font-weight:600;margin-bottom:6px}.faq-item p{font-size:0.88rem;margin-bottom:0}
.disclosure{margin-top:48px;padding:20px 24px;background:rgba(0,0,0,0.03);border-radius:var(--radius);font-size:0.78rem;color:var(--text-secondary);line-height:1.7}.disclosure strong{color:var(--text)}
.hub-intro{max-width:600px;margin:0 auto 40px;text-align:center}
.quiz-banner{display:flex;align-items:center;justify-content:space-between;background:var(--accent);color:white;padding:20px 28px;border-radius:var(--radius-lg);text-decoration:none;margin-bottom:40px;transition:background 0.2s ease}.quiz-banner:hover{opacity:0.92;transform:translateY(-1px);box-shadow:var(--shadow-md)}.quiz-banner-text{font-size:1.05rem;font-weight:600}.quiz-banner-sub{font-size:0.82rem;opacity:0.85;margin-top:2px}.quiz-banner-arrow{font-size:1.3rem;opacity:0.8}
.site-footer{padding:0;font-size:0.78rem;color:var(--text-secondary, #6B6B6B);border-top:none;margin-top:64px;background:rgba(0,0,0,0.025)}.footer-inner{max-width:960px;margin:0 auto;padding:52px 24px 28px}.footer-top{display:flex;gap:64px;margin-bottom:36px}.footer-about{flex:0 0 260px}.footer-logo{font-family:'Fraunces',serif;font-weight:700;font-size:1.2rem;color:var(--text, #1A1A1A);text-decoration:none;display:block;margin-bottom:12px}.footer-about p{font-size:0.82rem;color:var(--text-secondary, #6B6B6B);line-height:1.65;margin:0}.footer-cols{display:flex;gap:48px;flex:1}.footer-col{display:flex;flex-direction:column;gap:7px;text-align:left}.footer-col h4{font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text, #1A1A1A);margin-bottom:6px;opacity:0.5}.footer-col a{font-size:0.8rem;color:var(--text-secondary, #6B6B6B);text-decoration:none;transition:color 0.15s ease}.footer-col a:hover{color:var(--text, #1A1A1A)}.footer-categories{flex:1}.footer-cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px 32px}.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:20px;border-top:1px solid var(--border);font-size:0.74rem;opacity:0.7}.footer-links{display:flex;gap:20px}.footer-links a{color:inherit;text-decoration:none}
@media(max-width:700px){.footer-top{flex-direction:column;gap:32px}.footer-about{flex:none}.footer-cols{flex-direction:column;gap:24px}.footer-cat-grid{gap:5px 24px}.footer-bottom{flex-direction:column;gap:10px;text-align:center}}
@media(max-width:600px){.container{padding:32px 16px 64px}h1{font-size:1.6rem}.rec-header{flex-direction:column;gap:4px}.quiz-cta{padding:16px;font-size:0.95rem}.verdict-box{padding:20px}.quiz-banner{flex-direction:column;text-align:center;gap:12px;padding:20px}.comp-links a{padding:8px 14px;font-size:0.82rem}}


/* ── SEARCH BAR ──────────────────────────── */
.header-search{flex:1;max-width:320px;position:relative}
.search-input{width:100%;padding:7px 12px 7px 32px;font-family:'DM Sans',sans-serif;font-size:0.8rem;border:1.5px solid var(--border, #E5E5E0);border-radius:8px;background:var(--bg, #FAFAF8);color:var(--text, #1A1A1A);outline:none;transition:border-color 0.15s ease}
.search-input:focus{border-color:var(--accent, #4A3AFF)}
.search-input::placeholder{color:var(--text-secondary, #6B6B6B);opacity:0.6}
.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-secondary, #6B6B6B);opacity:0.5;pointer-events:none}

/* ── MEGA-DROPDOWN NAV (v3) ──────────────── */
.nav-mega{display:none;position:absolute;right:0;top:100%;padding-top:6px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,0.12);z-index:100}
.nav-dropdown:hover .nav-mega{display:flex}
.ai-mega{min-width:620px;padding:20px 24px}
.software-mega{min-width:680px;padding:20px 24px}
.mega-col{flex:1;min-width:0}
.mega-col h4{font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-secondary);margin-bottom:8px;opacity:0.7}
.mega-col a{display:block;font-size:0.82rem;font-weight:500;color:var(--text);text-decoration:none;padding:5px 8px;border-radius:6px;transition:background 0.15s ease;margin:0 -8px}
.mega-col a:hover{background:var(--accent-light)}
.mega-cta-col{border-left:1px solid var(--border);padding-left:20px;margin-left:12px}
.mega-cta-link{background:var(--accent-light) !important;border-radius:8px !important;padding:10px 12px !important;margin-bottom:8px !important;font-size:0.8rem !important;line-height:1.4 !important}
.mega-cta-link span{display:block;font-weight:600;color:var(--accent);margin-top:3px;font-size:0.78rem}
.mega-view-all{margin-top:12px !important;font-weight:600 !important;color:var(--accent) !important;font-size:0.8rem !important}

/* ── INDUSTRY VERTICAL PAGES (v3) ────────── */
.vertical-category{padding:24px;border:1.5px solid var(--border);border-radius:var(--radius-lg);margin-bottom:16px;background:var(--surface)}
.vertical-category h3{font-family:'Fraunces',serif;font-size:1.1rem;font-weight:700;margin-bottom:8px}
.vertical-category p{font-size:0.88rem;margin-bottom:12px}
.vertical-category ul{list-style:none;padding:0}
.vertical-category li{font-size:0.88rem;padding:6px 0;border-bottom:1px solid var(--border);color:var(--text-secondary)}
.vertical-category li:last-child{border-bottom:none}
.cost-box{padding:24px;background:var(--accent-light);border-radius:var(--radius-lg);margin:32px 0}
.cost-box h3{font-family:'Fraunces',serif;font-size:1.1rem;font-weight:700;margin-bottom:12px}


/* ── QUIZ PAGES ──────────────────────────── */
.header-badge{font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--accent-light);
  padding: 4px 10px;
  border-radius: 99px;
  letter-spacing: 0.04em;
  text-transform: uppercase;}
.hero{text-align: center;
  margin-bottom: 48px;}
.hero h1{font-family: 'Fraunces', serif;
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 16px;}
.hero p{font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.65;}
.progress-wrap{margin-bottom: 40px;}
.progress-bar-outer{height: 4px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;}
.progress-bar-inner{height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  width: 0%;}
.progress-label{display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-weight: 500;}
.quiz-step{display: none;
  animation: fadeUp 0.4s ease;}
.quiz-step.active{display: block;}
from{opacity: 0; transform: translateY(16px);}
to{opacity: 1; transform: translateY(0);}
.question-number{font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 8px;}
.question-text{font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 8px;}
.question-sub{font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 28px;}
.options{display: flex;
  flex-direction: column;
  gap: 10px;}
.option-card{display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;}
.option-card:hover{border-color: var(--border-hover);
  box-shadow: var(--shadow-sm);}
.option-card.selected{border-color: var(--accent);
  background: var(--accent-light);}
.option-icon{font-size: 1.4rem;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-light);
  border-radius: 10px;}
.option-card.selected .option-icon{background: var(--accent);
  color: white;
  font-size: 1rem;}
.option-content{flex: 1;}
.option-title{font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 2px;}
.option-desc{font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;}
.nav-buttons{display: flex;
  justify-content: space-between;
  margin-top: 36px;
  gap: 12px;}
.btn{font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;}
.btn-back{background: transparent;
  color: var(--text-secondary);
  border: 1.5px solid var(--border);}
.btn-back:hover{border-color: var(--border-hover); color: var(--text);}
.btn-next{background: var(--accent);
  color: white;
  margin-left: auto;}
.btn-next:hover{background: var(--accent-hover);}
.btn-next:disabled{opacity: 0.4; cursor: not-allowed;}
.results-section{display: none;
  animation: fadeUp 0.5s ease;}
.results-section.active{display: block;}
.results-header{text-align: center;
  margin-bottom: 40px;}
.results-header h2{font-family: 'Fraunces', serif;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 8px;}
.results-header p{color: var(--text-secondary);
  font-size: 0.95rem;}
.result-card{border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: 28px;
  margin-bottom: 16px;
  transition: all 0.2s ease;}
.result-card:hover{box-shadow: var(--shadow-md);}
.result-card.top-pick{border-color: var(--winner);
  background: var(--winner-bg);}
.result-badge{display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  border-radius: 99px;
  margin-bottom: 16px;}
.badge-budget{background: #EFF6FF; color: #1D4ED8;}
.result-top{display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;}
.result-name{font-family: 'Fraunces', serif;
  font-size: 1.45rem;
  font-weight: 700;}
.result-tagline{font-size: 0.88rem;
  color: var(--text-secondary);
  margin-top: 2px;}
.result-price{text-align: right; flex-shrink: 0;}
.result-price .amount{font-size: 1.3rem; font-weight: 700; color: var(--accent);}
.result-price .period{font-size: 0.75rem; color: var(--text-secondary);}
.result-match{display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 12px 16px;
  background: rgba(74, 58, 255, 0.05);
  border-radius: 10px;}
.match-bar-outer{flex: 1;
  height: 6px;
  background: rgba(74, 58, 255, 0.1);
  border-radius: 99px;
  overflow: hidden;}
.match-bar-inner{height: 100%;
  background: var(--accent);
  border-radius: 99px;
  transition: width 1s ease;}
.match-pct{font-size: 0.85rem; font-weight: 700; color: var(--accent); min-width: 45px; text-align: right;}
.match-label{font-size: 0.78rem; font-weight: 500; color: var(--text-secondary);}
.result-why{font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;}
.result-why strong{color: var(--text);}
.result-features{display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;}
.feature-tag{font-size: 0.75rem;
  font-weight: 500;
  padding: 5px 12px;
  background: var(--accent-light);
  color: var(--accent);
  border-radius: 99px;}
.result-cta{display: block;
  width: 100%;
  text-align: center;
  padding: 14px;
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;}
.cta-primary{background: var(--accent); color: white;}
.cta-primary:hover{background: var(--accent-hover);}
.cta-secondary{background: var(--surface); color: var(--accent); border: 1.5px solid var(--accent);}
.cta-secondary:hover{background: var(--accent-light);}
.retake-wrap{text-align: center; margin-top: 32px;}
.retake-btn{font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;}
.retake-btn:hover{color: var(--text);}
.site-footer a{color: inherit;}
/* ── SEO CONTENT ────────────────────────── */
.seo-content{max-width: 720px;
  margin: 0 auto;
  padding: 64px 24px 0;
  border-top: 1px solid var(--border);}
.seo-content h2{font-family: 'Fraunces', serif;
  font-size: 1.35rem;
  font-weight: 700;
  margin-top: 40px;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
  color: var(--text);}
.seo-content h2:first-child{margin-top: 0;}
.seo-content p{font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 14px;}
.seo-content strong{color: var(--text);}
.comparison-table-wrap{overflow-x: auto;
  margin: 16px 0 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);}
.comparison-table{width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  min-width: 500px;}
.comparison-table th{background: var(--accent-light);
  color: var(--accent);
  font-weight: 600;
  text-align: left;
  padding: 12px 16px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;}
.comparison-table td{padding: 12px 16px;
  border-top: 1px solid var(--border);
  color: var(--text);}
.comparison-table tbody tr:hover{background: var(--accent-light);}
.hero{margin-bottom: 32px;}
.hero h1{font-size: 1.75rem;}
.hero p{font-size: 0.95rem;}
.question-text{font-size: 1.25rem;}
.question-sub{font-size: 0.85rem; margin-bottom: 20px;}
.option-card{padding: 16px; gap: 12px; min-height: 56px;}
.option-icon{width: 32px; height: 32px; font-size: 1.2rem; border-radius: 8px;}
.option-title{font-size: 0.9rem;}
.option-desc{font-size: 0.78rem;}
.nav-buttons{flex-direction: column-reverse; gap: 10px; margin-top: 28px;}
.btn{width: 100%; text-align: center; padding: 14px 28px; font-size: 0.95rem;}
.btn-next{margin-left: 0;}
#startWrap .btn{padding: 16px 36px;}
.results-header h2{font-size: 1.5rem;}
.result-card{padding: 20px; margin-bottom: 14px;}
.result-top{flex-direction: column; gap: 8px;}
.result-price{text-align: left;}
.result-name{font-size: 1.25rem;}
.result-why{font-size: 0.84rem;}
.result-features{gap: 6px;}
.feature-tag{font-size: 0.7rem; padding: 4px 10px;}
.result-cta{padding: 16px; font-size: 0.95rem;}
.result-match{padding: 10px 14px;}
.progress-label{font-size: 0.72rem;}
input, select, textarea{font-size: 16px;}
.hero h1{font-size: 1.5rem;}
.option-card{padding: 14px 12px;}
.result-card{padding: 16px;}
.header-badge{font-size: 0.65rem; padding: 3px 8px;}
/* ── HEADER NAV ────────────────────────── */
.header-nav{display:flex;align-items:center;gap:4px}
.header-nav > a{font-size:0.8rem;font-weight:500;color:var(--text-secondary, #6B6B6B);text-decoration:none;padding:6px 10px;border-radius:6px;transition:all 0.15s ease;white-space:nowrap}
.header-nav > a:hover{color:var(--text, #1A1A1A);background:var(--accent-light, #f0f0f0)}
.header-nav > a{font-size:0.9rem;padding:10px 12px}
/* ── FOOTER ────────────────────────────── */
.site-footer{padding:0;font-size:0.78rem;color:var(--text-secondary, #6B6B6B);border-top:none;margin-top:64px;background:rgba(0,0,0,0.025)}
.footer-links a:hover{color:var(--text, #1A1A1A);opacity:1}

/* ── QUIZ MOBILE ─────────────────────────── */
@media(max-width:600px){
  .question-text{font-size: 1.25rem;}
  .question-sub{font-size: 0.85rem; margin-bottom: 20px;}
  .option-card{padding: 16px; gap: 12px; min-height: 56px;}
  .option-icon{width: 32px; height: 32px; font-size: 1.2rem; border-radius: 8px;}
  .option-title{font-size: 0.9rem;}
  .option-desc{font-size: 0.78rem;}
  .nav-buttons{flex-direction: column-reverse; gap: 10px; margin-top: 28px;}
  .btn{width: 100%; text-align: center; padding: 14px 28px; font-size: 0.95rem;}
  .btn-next{margin-left: 0;}
  #startWrap .btn{padding: 16px 36px;}
  .results-header h2{font-size: 1.5rem;}
  .result-card{padding: 20px; margin-bottom: 14px;}
  .result-top{flex-direction: column; gap: 8px;}
  .result-price{text-align: left;}
  .result-name{font-size: 1.25rem;}
  .result-why{font-size: 0.84rem;}
  .result-features{gap: 6px;}
  .result-cta{padding: 16px; font-size: 0.95rem;}
  .result-match{padding: 10px 14px;}
  .progress-label{font-size: 0.72rem;}
  .option-card{padding: 14px 12px;}
  .result-card{padding: 16px;}
}

/* ── HOMEPAGE ────────────────────────────── */
*, *::before, *::after{margin: 0; padding: 0; box-sizing: border-box;}
.header-nav > a{font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); text-decoration: none; padding: 6px 10px; border-radius: 6px; transition: all 0.15s ease; white-space: nowrap}
.header-nav > a:hover{color: var(--text); background: var(--accent-light)}
/* Hero */
.hero{max-width: 100%; margin: 0 auto; padding: 80px 24px 60px; text-align: center; background: linear-gradient(180deg, #F0F0EC 0%, var(--bg) 100%)}
.hero-inner{max-width: 960px; margin: 0 auto}
.hero h1{font-family: 'Fraunces', serif; font-size: clamp(2.2rem, 5.5vw, 3.2rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; margin-bottom: 20px}
.hero p{font-size: 1.05rem; color: var(--text-secondary); max-width: 560px; margin: 0 auto; line-height: 1.7}
.hero-cta{display: inline-block; margin-top: 28px; padding: 14px 36px; background: var(--text); color: white; font-family: 'DM Sans', sans-serif; font-size: 0.95rem; font-weight: 600; border-radius: 10px; text-decoration: none; transition: all 0.2s ease}
.hero-cta:hover{background: #333; transform: translateY(-1px); box-shadow: var(--shadow-md)}
.hero-stats{display: flex; justify-content: center; gap: 48px; margin-top: 36px}
.stat{text-align: center}
.stat-number{font-family: 'Fraunces', serif; font-size: 1.6rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em}
.stat-label{font-size: 0.75rem; color: var(--text-secondary); font-weight: 500; margin-top: 2px}
.hero-trust{margin-top: 20px; font-size: 0.78rem; color: var(--text-secondary); letter-spacing: 0.02em}
/* How It Works */
.how-section{max-width: 960px; margin: 0 auto; padding: 60px 24px 20px}
.how-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px}
.how-step{text-align: center; padding: 32px 20px; background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-lg); position: relative}
.how-number{display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: var(--accent); color: white; font-family: 'Fraunces', serif; font-weight: 700; font-size: 1rem; border-radius: 99px; margin-bottom: 16px}
.how-step h3{font-family: 'Fraunces', serif; font-size: 1.05rem; font-weight: 700; margin-bottom: 8px}
.how-step p{font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6}
/* Section Labels */
.section-label{font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); margin-bottom: 24px; text-align: center}
/* Popular Tools */
.tools-section{max-width: 960px; margin: 0 auto; padding: 60px 24px 40px}
.tools-grid{display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px}
.tool-card{display: block; text-decoration: none; color: var(--text); padding: 28px 24px; border: 1.5px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); transition: all 0.2s ease; position: relative}
.tool-card:hover{border-color: #CCC; box-shadow: var(--shadow-md); transform: translateY(-2px)}
.tool-card-top{display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px}
.tool-card-badge{font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 99px}
.tool-card-arrow{font-size: 1.1rem; color: var(--text-secondary)}
.tool-card-title{font-family: 'Fraunces', serif; font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.01em}
.tool-card-desc{font-size: 0.84rem; color: var(--text-secondary); line-height: 1.55}
/* Categories */
.categories-section{max-width: 960px; margin: 0 auto; padding: 20px 24px 60px}
.categories-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px}
.cat-card{display: block; text-decoration: none; color: var(--text); padding: 20px; border: 1.5px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: all 0.2s ease}
.cat-card:hover{border-color: #CCC; box-shadow: var(--shadow-sm); transform: translateY(-1px)}
.cat-icon{font-size: 1.3rem; margin-bottom: 8px}
.cat-title{font-family: 'Fraunces', serif; font-size: 0.95rem; font-weight: 700; margin-bottom: 4px}
.cat-meta{font-size: 0.78rem; color: var(--text-secondary)}
/* About / Trust */
.about-section{max-width: 640px; margin: 0 auto; padding: 64px 24px; border-top: 1px solid var(--border); text-align: center}
.about-section h2{font-family: 'Fraunces', serif; font-size: 1.6rem; font-weight: 700; margin-bottom: 16px}
.about-section p{font-size: 0.92rem; color: var(--text-secondary); line-height: 1.75; margin-bottom: 14px}
/* Footer */
.site-footer{padding: 0; font-size: 0.78rem; color: var(--text-secondary); border-top: none; margin-top: 0; background: rgba(0,0,0,0.025)}
.header-nav > a{font-size: 0.9rem; padding: 10px 12px}
.how-grid{grid-template-columns: 1fr; gap: 16px}
.tools-grid{grid-template-columns: 1fr}
.categories-grid{grid-template-columns: 1fr 1fr}
.hero{padding: 48px 16px 40px}
.hero h1{font-size: 2rem}
.hero-stats{gap: 32px}
.stat-number{font-size: 1.3rem}
.categories-grid{grid-template-columns: 1fr}
.how-grid{gap: 12px}
.how-step{padding: 24px 16px}

/* ── STACKS PAGES ────────────────────────── */
.stack-nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:48px}
.stack-nav a{font-size:0.78rem;font-weight:600;padding:8px 16px;border-radius:99px;border:1.5px solid var(--border);color:var(--text-secondary);text-decoration:none;transition:all 0.15s ease}
.stack-nav a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}
.stack-section{margin-bottom:56px}
.stack-section-header{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.stack-icon{font-size:1.5rem}
.stack-section h2{font-family:'Fraunces',serif;font-size:1.3rem;font-weight:700;margin:0}
.stack-why{font-size:0.88rem;color:var(--text-secondary);margin-bottom:20px;max-width:700px}
.stack-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stack-grid{grid-template-columns:1fr}
.stack-card{border:1.5px solid var(--border);border-radius:12px;padding:20px;background:var(--surface, #fff);transition:all 0.15s ease}
.stack-card:hover{border-color:#ccc;box-shadow:0 2px 8px rgba(0,0,0,0.06)}
.stack-card-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.stack-card h3{font-family:'Fraunces',serif;font-size:1rem;font-weight:700;margin:0}
.stack-card .price{font-size:0.82rem;font-weight:600;color:var(--accent)}
.stack-card p{font-size:0.82rem;color:var(--text-secondary);margin-bottom:10px;line-height:1.5}
.stack-card-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.stack-card-tags span{font-size:0.7rem;font-weight:500;padding:3px 8px;background:rgba(0,0,0,0.04);border-radius:99px;color:var(--text-secondary)}
.stack-card-link{font-size:0.82rem;font-weight:600;color:var(--accent);text-decoration:none}
.stack-card-link:hover{text-decoration:underline}
.stack-card.pick{border-color:var(--accent);background:var(--accent-light)}
.pick-badge{display:inline-block;font-size:0.65rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;padding:3px 8px;border-radius:99px;background:var(--accent);color:white;margin-bottom:8px}
.stack-tip{background:var(--accent-light);border-left:3px solid var(--accent);padding:16px 20px;border-radius:0 8px 8px 0;margin:24px 0;font-size:0.85rem;line-height:1.6}
.stack-tip strong{color:var(--accent)}
.stage-tabs{display:flex;gap:0;margin-bottom:32px;border-bottom:2px solid var(--border)}
.stage-tab{padding:12px 24px;font-size:0.85rem;font-weight:600;color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all 0.15s ease}
.stage-tab:hover{color:var(--text)}
.stage-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.cost-bar{display:flex;align-items:center;gap:12px;padding:16px 20px;background:var(--surface, #fff);border:1.5px solid var(--border);border-radius:12px;margin-bottom:32px}
.cost-label{font-size:0.82rem;font-weight:600;white-space:nowrap}
.cost-range{font-family:'Fraunces',serif;font-size:1.1rem;font-weight:700;color:var(--accent)}
.cost-note{font-size:0.78rem;color:var(--text-secondary)}
.quiz-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.quiz-links a{font-size:0.78rem;font-weight:500;padding:6px 14px;border-radius:99px;border:1.5px solid var(--border);color:var(--text-secondary);text-decoration:none;transition:all 0.15s ease}
.quiz-links a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}


@media(max-width:700px){
  .header-search{display:none}
  .nav-mega{position:static;box-shadow:none;border:none;padding:0 0 0 12px !important;margin-top:0;min-width:auto !important;display:none;flex-direction:column;transform:none}
  .nav-dropdown:hover .nav-mega{display:flex}
  .mega-col{margin-bottom:12px}
  .mega-col a{font-size:0.88rem;padding:8px 12px}
  .mega-cta-col{border-left:none;padding-left:0;margin-left:0;border-top:1px solid var(--border);padding-top:12px}
}