/* ===== Base reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.7;color:#1a1a2e;background:#fff;font-size:18px;
}
img{max-width:100%;height:auto;display:block}
a{color:#2563eb;text-decoration:none;transition:color .2s}
a:hover{color:#1e40af;text-decoration:underline}
ul,ol{padding-left:1.5rem}
li{margin-bottom:.4rem}

/* ===== Layout ===== */
.container{max-width:1100px;margin:0 auto;padding:0 1.25rem}
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid #e5e7eb}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0;flex-wrap:wrap}
.nav-brand{font-weight:800;font-size:1.15rem;color:#0f172a;white-space:nowrap}
.nav-brand span{color:#2563eb}
.nav-links{display:flex;gap:1.1rem;flex-wrap:wrap;list-style:none;padding:0}
.nav-links a{color:#334155;font-weight:600;font-size:.95rem}

/* ===== Hero ===== */
.hero{padding:3rem 0 2rem;background:linear-gradient(135deg,#f0f7ff 0%,#fff 100%);border-bottom:1px solid #e5e7eb}
.hero h1{font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.2;color:#0f172a;margin-bottom:1rem;max-width:900px}
.hero .lead{font-size:1.15rem;color:#475569;max-width:780px;margin-bottom:1.5rem}
.badge{display:inline-block;background:#dcfce7;color:#166534;font-weight:700;font-size:.8rem;padding:.3rem .7rem;border-radius:999px;margin-bottom:1rem;letter-spacing:.02em}

/* ===== Quick Answer ===== */
.quick-answer{background:#f8fafc;border-left:4px solid #2563eb;border-radius:0 .5rem .5rem 0;padding:1.5rem 1.75rem;margin:1.5rem 0 2rem}
.quick-answer h2{font-size:1.25rem;color:#1e3a8a;margin-bottom:.75rem}
.quick-answer ol{margin:0}

/* ===== Sections ===== */
.section{padding:2.5rem 0;border-bottom:1px solid #f1f5f9}
.section h2{font-size:clamp(1.4rem,3vw,2rem);color:#0f172a;margin-bottom:1rem;line-height:1.3}
.section h3{font-size:1.2rem;color:#1e3a8a;margin:1.2rem 0 .6rem}
.section p{margin-bottom:1rem;color:#334155}
.section ul{margin-bottom:1rem}

/* ===== Service cards ===== */
.service-card{border:1px solid #e2e8f0;border-radius:.75rem;padding:1.75rem;margin-bottom:1.75rem;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.service-card.top-pick{border-color:#2563eb;box-shadow:0 4px 16px rgba(37,99,235,.12);position:relative}
.rank-badge{display:inline-flex;align-items:center;gap:.4rem;background:#2563eb;color:#fff;font-weight:700;font-size:.85rem;padding:.35rem .85rem;border-radius:999px;margin-bottom:.85rem}
.service-card h3{font-size:1.4rem;margin-top:0}
.service-card .meta{color:#64748b;font-size:.9rem;margin-bottom:.75rem}
.price-tag{display:inline-block;background:#fef3c7;color:#92400e;font-weight:700;padding:.2rem .6rem;border-radius:.3rem;font-size:.85rem;margin-left:.5rem;vertical-align:middle}

/* ===== CTA blocks ===== */
.cta-block{background:linear-gradient(135deg,#1e3a8a,#2563eb);color:#fff;border-radius:1rem;padding:2rem 1.75rem;margin:1.75rem 0;text-align:center;border:2px solid #1e40af}
.cta-block h3{color:#fff;margin-bottom:.5rem}
.cta-block p{color:#dbeafe;margin-bottom:1.1rem}
.cta-btn{display:inline-block;background:#fbbf24;color:#0f172a;font-weight:800;font-size:1.05rem;padding:.85rem 2.2rem;border-radius:999px;text-decoration:none;transition:transform .2s,background .2s;border:none;cursor:pointer}
.cta-btn:hover{background:#f59e0b;transform:translateY(-2px);text-decoration:none}
.cta-btn-small{display:inline-block;background:#2563eb;color:#fff;font-weight:700;padding:.55rem 1.4rem;border-radius:.5rem;font-size:.95rem;transition:background .2s}
.cta-btn-small:hover{background:#1e40af;text-decoration:none}
.cta-inline{background:#f0f7ff;border:1px solid #bfdbfe;border-radius:.6rem;padding:1rem 1.25rem;margin:1.25rem 0;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ===== Tables ===== */
.table-wrap{overflow-x:auto;margin:1.5rem 0;border-radius:.5rem;border:1px solid #e2e8f0}
table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:600px}
th,td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid #e2e8f0}
th{background:#1e3a8a;color:#fff;font-weight:700;position:sticky;top:0}
tbody tr:nth-child(even){background:#f8fafc}
tbody tr:hover{background:#eff6ff}

/* ===== Checklists, tips, mistakes ===== */
.checklist,.tip-block,.mistake-block{border-radius:.6rem;padding:1.25rem 1.5rem;margin:1.5rem 0}
.checklist{background:#ecfdf5;border:1px solid #a7f3d0}
.checklist h3{color:#065f46}
.tip-block{background:#fffbeb;border:1px solid #fde68a}
.tip-block h3{color:#92400e}
.mistake-block{background:#fef2f2;border:1px solid #fecaca}
.mistake-block h3{color:#991b1b}
.checklist ul{list-style:none;padding-left:0}
.checklist li::before{content:"✓ ";color:#059669;font-weight:800}
.tip-block h3::before{content:"💡 "}
.mistake-block h3::before{content:"⚠ "}

/* ===== FAQ ===== */
.faq-item{border-bottom:1px solid #e5e7eb;padding:1rem 0}
.faq-item h3{font-size:1.05rem;color:#0f172a;margin:0 0 .5rem;cursor:default}
.faq-item p{margin:0;color:#475569}

/* ===== Footer ===== */
.site-footer{background:#0f172a;color:#cbd5e1;padding:2.5rem 0 1.5rem;margin-top:2rem}
.site-footer a{color:#93c5fd}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;margin-bottom:1.5rem}
.footer-grid h4{color:#fff;font-size:1rem;margin-bottom:.6rem}
.footer-grid ul{list-style:none;padding:0}
.footer-bottom{border-top:1px solid #1e293b;padding-top:1.25rem;font-size:.85rem;color:#64748b;text-align:center}
.disclosure{background:#f8fafc;border:1px solid #e2e8f0;border-radius:.5rem;padding:1rem 1.25rem;font-size:.85rem;color:#64748b;margin:1.5rem 0}

/* ===== Responsive ===== */
@media(max-width:640px){
  body{font-size:17px}
  .nav-links{gap:.7rem;font-size:.85rem}
  .cta-inline{flex-direction:column;align-items:flex-start}
  .hero{padding:2rem 0 1.5rem}
  .section{padding:1.75rem 0}
}