/* ===== SOFI-STYLE OVERRIDE v1 ===== */
:root{
  --sky:#E6F7FD;
  --sky-2:#BEE9F6;
  --cyan:#11B5E4;
  --cyan-2:#0096C7;
  --ink:#0E1F47;
  --ink-2:#1B2E5C;
  --muted:#516079;
  --line:#E3ECF5;
  --card:#FFFFFF;
  --bg:#FFFFFF;
  --bg-soft:#F2FAFD;
}
html,body{ background:#FFFFFF; color:var(--ink); }
.nav, header.nav, .site-header{ background:#FFFFFF !important; border-bottom:1px solid var(--line); }
.nav a, .site-header a{ color:var(--ink) !important; }
.nav .btn, .site-header .btn, .nav .btn-primary{ background:var(--cyan) !important; color:#fff !important; border-color:var(--cyan) !important; }

/* ----- HERO: bright sky, no dark navy ----- */
.hero{
  background: linear-gradient(180deg,#CFF0FA 0%, #E6F7FD 60%, #F2FAFD 100%) !important;
  padding:80px 0 96px !important;
  overflow:hidden;
  position:relative;
}
.hero::before, .hero::after{ background:transparent !important; content:none !important; display:none !important; }
.hero .eyebrow, .hero .pill{
  background:#FFFFFF !important; color:var(--cyan-2) !important;
  border:1px solid var(--sky-2) !important;
  box-shadow:0 2px 10px rgba(14,31,71,0.06);
}
.hero h1{ color:var(--ink) !important; letter-spacing:-.02em; }
.hero h1 .grad, .hero h1 span.grad{
  background:none !important; -webkit-text-fill-color: var(--cyan) !important;
  color:var(--cyan) !important;
}
.hero .lede, .hero p{ color:var(--ink-2) !important; }
.hero .lede strong{ color:var(--ink) !important; }
.hero .btn-primary{ background:var(--ink) !important; color:#fff !important; border-color:var(--ink) !important; border-radius:999px; padding:14px 28px; box-shadow:0 6px 18px rgba(14,31,71,0.18); }
.hero .btn-primary:hover{ background:#0A1838 !important; border-color:#0A1838 !important; }
.hero .btn-ghost, .hero .btn:not(.btn-primary){ background:#FFFFFF !important; color:var(--ink) !important; border:1px solid var(--line) !important; border-radius:999px; }
.hero .btn-ghost:hover{ background:#F2FAFD !important; }

/* hero stat cards (Simple / Multi-ISO / High-Risk / Free) */
.hero .trust, .hero .trust-row{ gap:14px; }
.hero .trust .stat, .hero .trust > div, .hero .stat-card{
  background:#FFFFFF !important;
  border:1px solid var(--line) !important;
  border-radius:18px !important;
  box-shadow:0 8px 24px rgba(14,31,71,0.06) !important;
  color:var(--ink) !important;
}
.hero .trust strong, .hero .stat strong{ color:var(--ink) !important; }
.hero .trust span, .hero .stat span{ color:var(--muted) !important; }

/* ----- SECTIONS ----- */
#services{ background:#FFFFFF !important; }
#why{ background:var(--bg-soft) !important; }
#about{ background:#FFFFFF !important; }
#high-risk, .high-risk{ background:var(--bg-soft) !important; }
#contact{ background:#FFFFFF !important; }

.section h2, h2{ color:var(--ink) !important; letter-spacing:-.01em; }
h2 .grad, h2 span.accent{ background:none !important; -webkit-text-fill-color: var(--cyan) !important; color:var(--cyan) !important; }

.eyebrow, .pill{ background:#FFFFFF !important; color:var(--cyan-2) !important; border:1px solid var(--sky-2) !important; }

/* cards */
.card, .service-card, .why-card, .about-stats .stat{
  background:#FFFFFF !important;
  border:1px solid var(--line) !important;
  border-radius:18px !important;
  box-shadow:0 8px 24px rgba(14,31,71,0.06) !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover, .service-card:hover, .why-card:hover{
  transform: translateY(-2px);
  box-shadow:0 14px 30px rgba(14,31,71,0.10) !important;
}
.card h3, .service-card h3{ color:var(--ink) !important; }
.card p, .service-card p{ color:var(--muted) !important; }
.card-icon{
  background: linear-gradient(135deg, var(--sky) 0%, var(--sky-2) 100%) !important;
  color:var(--cyan-2) !important;
}

/* chips (high-risk verticals) */
.chip, .vertical{
  background:#FFFFFF !important;
  border:1px solid var(--line) !important;
  color:var(--ink) !important;
  border-radius:999px !important;
  box-shadow:0 2px 8px rgba(14,31,71,0.04);
}
.chip:hover, .vertical:hover{ border-color:var(--cyan) !important; color:var(--cyan-2) !important; background:#F2FAFD !important; }

/* contact form */
#contact form, .contact-form{ background:#FFFFFF !important; border:1px solid var(--line) !important; border-radius:20px !important; box-shadow:0 14px 40px rgba(14,31,71,0.08) !important; }
#contact input, #contact select, #contact textarea, .contact-form input, .contact-form select, .contact-form textarea{ border:1px solid var(--line) !important; border-radius:12px !important; }
#contact input:focus, #contact select:focus, #contact textarea:focus{ outline:none; border-color:var(--cyan) !important; box-shadow:0 0 0 3px rgba(17,181,228,0.18); }
#contact button, .contact-form button, .btn-cta{ background:var(--cyan) !important; color:#fff !important; border:none !important; border-radius:999px !important; padding:14px 24px !important; box-shadow:0 8px 20px rgba(17,181,228,0.35); }
#contact button:hover{ background:var(--cyan-2) !important; }

/* footer */
footer, .site-footer{ background:var(--ink) !important; color:#C9D4E8 !important; }
footer a, .site-footer a{ color:#C9D4E8 !important; }
footer a:hover{ color:#FFFFFF !important; }
footer h4, .site-footer h4{ color:#FFFFFF !important; }

/* checkmark color */
.check, .checkmark, li svg, .feature-list svg{ color:var(--cyan) !important; fill:var(--cyan) !important; }

/* general links */
a{ color:var(--cyan-2); }
a:hover{ color:var(--ink); }
/* nav button fix */
header a.btn, .nav a.btn, header .btn, .nav .btn, a.btn-primary, .btn-primary{ color:#FFFFFF !important; }
header .btn, .nav .btn{ background:var(--ink) !important; border-color:var(--ink) !important; border-radius:999px; padding:10px 20px; }
header .btn:hover, .nav .btn:hover{ background:#0A1838 !important; }
/* about stat numbers in cyan (already), keep label muted */
.about-stats .stat strong{ color:var(--cyan) !important; }
.about-stats .stat span{ color:var(--muted) !important; }
/* nav CTA */
.nav-cta, a.nav-cta{ color:#FFFFFF !important; background:var(--ink) !important; border:1px solid var(--ink) !important; border-radius:999px !important; padding:10px 22px !important; font-weight:600 !important; text-decoration:none !important; }
.nav-cta:hover{ background:#0A1838 !important; color:#FFFFFF !important; }
/* How it works steps */
#how{ background:#FFFFFF !important; }
.steps{ gap:18px; }
.step{ position:relative; text-align:left; padding-top:28px !important; }
.step-num{ position:absolute; top:-18px; left:18px; width:44px; height:44px; border-radius:999px; background:linear-gradient(135deg,var(--cyan) 0%,var(--cyan-2) 100%); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px; box-shadow:0 8px 20px rgba(17,181,228,0.35); }

/* ===== Squared pill buttons for Log In + Get Started (desktop + mobile) ===== */
.nav-login, a.nav-login {
    color: #0B1E3F !important;
    background: #FFFFFF !important;
    border: 1.5px solid #0B1E3F !important;
    border-radius: 8px !important;
    padding: 10px 22px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    margin-right: 6px !important;
    display: inline-block !important;
    line-height: 1 !important;
}
.nav-login:hover, a.nav-login:hover {
    background: #0B1E3F !important;
    color: #FFFFFF !important;
}
.nav-cta, a.nav-cta {
    background: #0B1E3F !important;
    color: #FFFFFF !important;
    border: 1.5px solid #0B1E3F !important;
    border-radius: 8px !important;
    padding: 10px 22px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-decoration: none !important;
    display: inline-block !important;
    line-height: 1 !important;
}
.nav-cta:hover, a.nav-cta:hover {
    background: #13294B !important;
    border-color: #13294B !important;
    color: #FFFFFF !important;
}
/* Always show Log In + Get Started on mobile; hide only the other text nav links */
@media (max-width: 760px) {
    .nav-links a.nav-login,
    .nav-links a.nav-cta {
        display: inline-block !important;
    }
        .nav-login, a.nav-login,
    .nav-cta, a.nav-cta {
        padding: 8px 14px !important;
        font-size: 13px !important;
        margin-right: 4px !important;
    }
}

/* Tighten gap between Log In and Get Started in header */
.nav-links a.nav-login + a.nav-cta, .nav-links a.nav-login { margin-right: 0 !important; }
.nav-links a.nav-login { margin-right: 6px !important; }
@media (max-width: 760px) { .nav-links a.nav-login { margin-right: 4px !important; } }

/* Square off hero CTA buttons (Get Offers, Explore Services, Get My Offers) */
.btn, .btn-primary, .btn-ghost, a.btn, button.btn {
    border-radius: 8px !important;
}
.btn-primary, a.btn-primary, button.btn-primary {
    background: #0B1E3F !important;
    color: #FFFFFF !important;
    border: 1.5px solid #0B1E3F !important;
}
.btn-primary:hover, a.btn-primary:hover, button.btn-primary:hover {
    background: #13294B !important;
    border-color: #13294B !important;
}
.btn-ghost, a.btn-ghost {
    background: #FFFFFF !important;
    color: #0B1E3F !important;
    border: 1.5px solid #0B1E3F !important;
}
.btn-ghost:hover, a.btn-ghost:hover {
    background: #0B1E3F !important;
    color: #FFFFFF !important;
}

/* Pull Log In and Get Started together (override 28px flex gap from styles.css) */
.nav-links a.nav-login { margin-right: -22px !important; }
@media (max-width: 760px) {
    .nav-links a.nav-login { margin-right: -24px !important; }
}

/* === REAL FIX: target the actual header button classes === */
/* Log In button: add bordered pill style */
.nav-links a.nav-login {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 18px !important;
    border: 1.5px solid #0B1E3F !important;
    border-radius: 8px !important;
    background: #FFFFFF !important;
    color: #0B1E3F !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    line-height: 1 !important;
}
.nav-links a.nav-login:hover {
    background: #0B1E3F !important;
    color: #FFFFFF !important;
}

/* Get Started button: squared pill, sit tight next to Log In */
.nav-links a.nav-cta {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 18px !important;
    border: 1.5px solid #0B1E3F !important;
    border-radius: 8px !important;
    background: #0B1E3F !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    line-height: 1 !important;
}
.nav-links a.nav-cta:hover {
    background: #13294B !important;
    border-color: #13294B !important;
    color: #FFFFFF !important;
}

/* Tighten gap between the two */
.nav-links { gap: 18px !important; }
.nav-links a.nav-login { margin-right: -10px !important; }
@media (max-width: 760px) {
    .nav-links { gap: 10px !important; }
    .nav-links a.nav-login { margin-right: -6px !important; padding: 6px 12px !important; }
    .nav-links a.nav-cta { padding: 6px 12px !important; }
}

/* Equal-size hero CTA buttons */
.hero .cta-row .btn { min-width: 200px !important; padding: 14px 28px !important; border-radius: 999px !important; text-align: center !important; justify-content: center !important; }