/* Shared design tokens, navbar, and landing hero shell */
:root{
    --primary-blue:#00569D;
    --page-bg:#EEF2F5;
    --panel-bg:#FFFFFF;
    --text-primary:#1E2A36;
    --text-secondary:#5B6B79;
    --border:#D7E0E7;
    --success:#2E7D5A;
    --danger:#C73A3A;
    --radius-card:6px;
    --radius-input:4px;
    --radius-btn:4px;
    --shadow-soft:0 2px 8px rgba(16, 33, 49, 0.05);
    --layout-max-width:1400px;
    --layout-gutter:18px;
}

html,
body{
    height:100%;
    margin:0;
}

body{
    font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background:var(--page-bg);
    color:var(--text-primary);
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

body > main,
body > .page{
    flex:1 0 auto;
}

.site-nav .nav-inner,
.site-container,
.page,
.articles-page,
.glossary-page,
.payment-wrap,
.site-footer-inner{
    width:min(var(--layout-max-width), calc(100% - (2 * var(--layout-gutter))));
    margin-left:auto;
    margin-right:auto;
}

.site-nav{
    position:sticky;
    top:0;
    z-index:1000;
    background:var(--primary-blue);
    border-bottom:1px solid rgba(255, 255, 255, 0.22);
    box-shadow:0 1px 3px rgba(14, 30, 44, 0.14);
}

.site-nav .nav-inner{
    padding:10px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    box-sizing:border-box;
}

.site-nav .logo{
    display:flex;
    align-items:center;
    text-decoration:none;
    flex:0 0 auto;
}

.site-nav .logo img.brand-mark{
    height:30px;
    width:auto;
    display:block;
}

.site-nav .nav-right{
    display:flex;
    gap:16px;
    align-items:center;
    flex:0 0 auto;
}

.site-nav .nav-right a{
    color:rgba(255, 255, 255, 0.86);
    text-decoration:none;
    padding:8px 1px 7px;
    font-weight:600;
    font-size:0.9rem;
    line-height:1;
    border-bottom:2px solid transparent;
}

.site-nav .nav-right a:hover{
    color:#FFFFFF;
}

.site-nav .nav-right a.active,
.site-nav .nav-right a[aria-current="page"]{
    color:#FFFFFF;
    border-bottom-color:#FFFFFF;
}

.hero{
    min-height:calc(100vh - 70px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:34px 16px 24px;
}

.hero .hero-inner{
    max-width:900px;
    width:100%;
    text-align:left;
    background:var(--panel-bg);
    border:1px solid var(--border);
    border-radius:var(--radius-card);
    box-shadow:var(--shadow-soft);
    padding:24px;
}

.hero h1{
    font-size:2.05rem;
    margin:0 0 8px;
    color:var(--text-primary);
    font-weight:780;
    line-height:1.18;
    letter-spacing:-0.01em;
}

.hero p{
    color:var(--text-secondary);
    margin:0 0 14px;
    font-size:0.98rem;
    line-height:1.45;
}

.hero-eyebrow{
    margin:0 0 9px;
    color:#1D4B74;
    font-size:0.75rem;
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
}

.btn-primary{
    display:inline-block;
    background:var(--primary-blue);
    color:#FFFFFF;
    padding:10px 16px;
    border-radius:var(--radius-btn);
    text-decoration:none;
    font-weight:700;
    border:1px solid rgba(0, 0, 0, 0.05);
    transition:background-color .14s ease;
}

.btn-primary:hover{
    background:#004A87;
}

.trust{
    margin-top:8px;
    margin-bottom:0;
    color:var(--text-secondary);
    font-size:0.86rem;
}

.hero-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.credibility-row{
    margin-top:12px;
    display:flex;
    flex-wrap:wrap;
    gap:6px 14px;
    padding-top:10px;
    border-top:1px solid #E2E8EE;
}

.credibility-item{
    font-size:0.82rem;
    color:var(--text-secondary);
    line-height:1.2;
}

.site-container{
    padding:18px 0;
}

@media (max-width: 700px){
    :root{
        --layout-gutter:10px;
    }
    .site-nav .nav-inner{
        padding:9px 0;
    }
    .site-nav .logo img.brand-mark{
        height:26px;
    }
    .site-nav .nav-right{
        gap:10px;
    }
    .site-nav .nav-right a{
        font-size:0.84rem;
    }
    .hero{
        padding:20px 0 14px;
    }
    .hero .hero-inner{
        padding:16px;
    }
    .hero h1{
        font-size:1.68rem;
    }
}