/* ── myCompare Shared Stylesheet ───────────────────── */
/* Used by all guide/hub pages. Homepage has inline CSS. */

/* ── Reset & Base ─────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'DM Sans',system-ui,-apple-system,sans-serif;
  font-weight:400;color:#3a3f4b;line-height:1.65;
  background:#fff;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:#0f358e;text-decoration:none;font-weight:500;transition:color .2s}
a:hover{color:#0970ef}
ul{list-style:none;padding:0}
h1,h2,h3,h4,h5,h6{font-family:'Fraunces',Georgia,serif;color:#0f358e;line-height:1.2;font-weight:600}

/* ── Utility ──────────────────────────────────────── */
.container{max-width:1160px;margin:0 auto;padding:0 20px}
.text-center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.btn{display:inline-block;font-family:'DM Sans',sans-serif;font-weight:600;border:none;border-radius:8px;cursor:pointer;text-align:center;transition:background .25s,transform .15s,box-shadow .25s}
.btn:hover{transform:translateY(-1px)}
.btn-cta{background:#1e9113;color:#fff;padding:16px 36px;font-size:1.125rem;box-shadow:0 4px 14px rgba(30,145,19,.35)}
.btn-cta:hover{background:#178a0e;color:#fff;box-shadow:0 6px 20px rgba(30,145,19,.45)}
.btn-outline{background:transparent;color:#0f358e;border:2px solid #0f358e;padding:12px 28px;font-size:1rem}
.btn-outline:hover{background:#0f358e;color:#fff}
.section{padding:72px 0}
.section-alt{background:#f6f8fc}
.section-dark{background:linear-gradient(175deg,#0f358e 0%,#091e4a 100%);color:#d5dff5}
.section-dark h2,.section-dark h3{color:#fff}
.section-dark p{color:#c0cceb}
.badge-label{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;padding:5px 12px;border-radius:100px;background:rgba(9,170,239,.12);color:#0970ef}
.mt-12{margin-top:12px}.mt-20{margin-top:20px}.mt-32{margin-top:32px}.mt-48{margin-top:48px}
.mb-0{margin-bottom:0}.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-32{margin-bottom:32px}
.sub-heading{font-size:1.05rem;color:#6b7280;max-width:640px;margin:0 auto;line-height:1.7;font-weight:400}
.section-header{margin-bottom:40px}
.section-header h2{font-size:2rem;margin-bottom:10px}

/* ── Grids ────────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
@media(max-width:768px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* ── Top Bar / Nav ────────────────────────────────── */
.top-bar{background:#1E488C;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.top-bar-inner{display:flex;align-items:center;justify-content:space-between}
.site-logo{height:42px}
.nav-links{display:flex;gap:28px}
.nav-links a{color:#c5d0e6;font-size:.9rem;font-weight:500;transition:color .2s}
.nav-links a:hover{color:#fff}
@media(max-width:768px){.nav-links{display:none}.site-logo{height:36px}}

/* ── Guide Hero ───────────────────────────────────── */
.guide-hero{
  background:linear-gradient(170deg,#1E488C 0%,#0f358e 55%,#091e4a 100%);
  color:#fff;padding:80px 0 60px;position:relative;
}
.guide-hero::after{
  content:'';position:absolute;bottom:-2px;left:0;right:0;height:60px;
  background:linear-gradient(to top,#fff,transparent);
}
.guide-hero .breadcrumb{font-size:.82rem;color:#8ba8d8;margin-bottom:16px}
.guide-hero .breadcrumb a{color:#8ba8d8;font-weight:400}
.guide-hero .breadcrumb a:hover{color:#fff}
.guide-hero h1{font-size:2.5rem;color:#fff;margin-bottom:16px;letter-spacing:-.3px;max-width:720px}
.guide-hero .hero-sub{font-size:1.1rem;color:#b8c8e8;max-width:640px;line-height:1.7;margin-bottom:28px}
.guide-hero .hook-question{
  display:inline-block;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:10px;padding:14px 22px;font-size:1rem;color:#c8d8f0;
  font-style:italic;max-width:600px;line-height:1.6;
}
.guide-hero .hook-question i{color:#5ef050;margin-right:8px}
@media(max-width:768px){.guide-hero{padding:60px 0 44px}.guide-hero h1{font-size:1.8rem}}

/* ── Guide Body ───────────────────────────────────── */
.guide-body{max-width:780px;margin:0 auto;padding:48px 20px}
.guide-body h2{font-size:1.6rem;margin:48px 0 16px}
.guide-body h2:first-child{margin-top:0}
.guide-body h3{font-size:1.2rem;margin:32px 0 10px}
.guide-body p{font-size:.95rem;color:#4b5563;line-height:1.75;margin-bottom:16px}
.guide-body ul.content-list{padding-left:0;margin-bottom:20px}
.guide-body ul.content-list li{
  padding:10px 0 10px 28px;font-size:.93rem;color:#4b5563;line-height:1.6;
  position:relative;border-bottom:1px solid #f0f0f5;
}
.guide-body ul.content-list li:last-child{border-bottom:none}
.guide-body ul.content-list li::before{
  content:"\f054";font-family:"Font Awesome 6 Free";font-weight:900;
  position:absolute;left:0;top:12px;font-size:.6rem;color:#0970ef;
}
.guide-body .callout{
  background:#f0f7ff;border-left:4px solid #0970ef;border-radius:0 10px 10px 0;
  padding:20px 24px;margin:24px 0;
}
.guide-body .callout p{margin-bottom:0;font-size:.9rem;color:#1e3a5f}
.guide-body .callout strong{color:#0f358e}
.guide-body .warning-callout{
  background:#fef9ec;border-left:4px solid #d97706;border-radius:0 10px 10px 0;
  padding:20px 24px;margin:24px 0;
}
.guide-body .warning-callout p{margin-bottom:0;font-size:.9rem;color:#78350f}

/* ── Guide Table ──────────────────────────────────── */
.guide-table-wrap{overflow-x:auto;margin:24px 0;border-radius:10px;border:1px solid #e0e5f0}
.guide-table{width:100%;min-width:500px;border-collapse:collapse}
.guide-table th{background:#0f358e;color:#fff;padding:12px 16px;font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:600;text-align:left;white-space:nowrap}
.guide-table td{padding:12px 16px;font-size:.88rem;border-bottom:1px solid #edf0f7}
.guide-table tr:last-child td{border-bottom:none}
.guide-table tr:nth-child(even){background:#f8faff}
.guide-table .check{color:#1e9113;font-weight:600}
.guide-table .cross{color:#b91c1c;font-weight:600}
.guide-table .neutral{color:#6b7280}

/* ── CTA Banner ───────────────────────────────────── */
.cta-banner{
  background:linear-gradient(135deg,#0f358e,#1E488C);border-radius:16px;
  padding:40px;text-align:center;margin:48px 0;
}
.cta-banner h3{color:#fff;font-size:1.3rem;margin-bottom:8px}
.cta-banner p{color:#b8c8e8;font-size:.95rem;margin-bottom:20px}
.cta-banner .btn-cta{font-size:1.05rem;padding:14px 36px}

/* ── FAQ (guide version) ──────────────────────────── */
.guide-faq{max-width:780px;margin:0 auto;padding:0 20px 48px}
.guide-faq h2{font-size:1.6rem;margin-bottom:24px}
.guide-faq .faq-list{border:1px solid #e0e5f0;border-radius:14px;overflow:hidden}
.guide-faq .faq-item{border-top:1px solid #edf0f7}
.guide-faq .faq-item:first-child{border-top:none}
.guide-faq .faq-q{
  list-style:none;cursor:pointer;padding:16px 20px;
  font-size:.93rem;font-weight:600;color:#0f358e;
  display:flex;align-items:center;gap:12px;user-select:none;
  font-family:'DM Sans',sans-serif;
}
.guide-faq .faq-q::-webkit-details-marker{display:none}
.guide-faq .faq-q::after{
  content:"\f054";font-family:"Font Awesome 6 Free";font-weight:900;
  margin-left:auto;font-size:.65rem;color:#9ca3af;
  transform:rotate(90deg);transition:transform .18s;
}
.guide-faq details[open]>.faq-q::after{transform:rotate(-90deg)}
.guide-faq details[open]>.faq-q{background:#f8faff}
.guide-faq .faq-a{padding:0 20px 16px;font-size:.9rem;line-height:1.7;color:#4b5563}

/* ── Footer ───────────────────────────────────────── */
.footer{background:#0d1b3e;color:#8896b3;padding:56px 0 28px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px}
.footer h5{color:#fff;font-family:'DM Sans',sans-serif;font-size:.9rem;font-weight:700;margin-bottom:14px}
.footer a{color:#8896b3;font-size:.85rem;font-weight:400;transition:color .2s}
.footer a:hover{color:#fff}
.footer ul li{margin-bottom:8px}
.footer-logo{height:36px;margin-bottom:14px}
.footer-bottom{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.06);font-size:.72rem;color:#5a6a8a;line-height:1.7}
@media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}
.footnote-strip{background:#f6f8fc;padding:28px 0;font-size:.72rem;color:#6b7280;line-height:1.7}

/* ── Compare table (wide) ─────────────────────────── */
.compare-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:28px;border-radius:12px;border:1px solid #e0e5f0}
.compare-scroll::-webkit-scrollbar{height:6px}
.compare-scroll::-webkit-scrollbar-track{background:#f1f3f9}
.compare-scroll::-webkit-scrollbar-thumb{background:#c0c8da;border-radius:4px}
.compare-table{width:100%;min-width:780px;border-collapse:collapse}
.compare-table th{background:#0f358e;color:#fff;padding:14px 18px;font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:600;text-align:left;white-space:nowrap}
.compare-table td{padding:13px 18px;font-size:.88rem;border-bottom:1px solid #edf0f7;white-space:nowrap}
.compare-table tr:last-child td{border-bottom:none}
.compare-table tr:nth-child(even){background:#f8faff}
.compare-table .check{color:#1e9113;font-weight:600}
.compare-table .cross{color:#b91c1c;font-weight:600}
.compare-table .neutral{color:#6b7280}
.scroll-hint{display:none;text-align:center;font-size:.75rem;color:#9ca3af;margin-top:8px}
@media(max-width:840px){.scroll-hint{display:block}}