/* ============================================================
   blog-vault.css — Full Vault UI for blog posts, hub, policies
   Loaded AFTER each page's inline <style>, plus !important where
   needed to win the cascade against legacy styles.css.
   Non-destructive: existing markup untouched, this file restyles.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600;700&family=Instrument+Serif:wght@400&display=swap');

:root {
    --vault-bg:         #08090c;
    --vault-bg-2:       #0e1014;
    --vault-bg-3:       #14161c;
    --vault-border:     rgba(255,255,255,0.06);
    --vault-border-2:   rgba(255,255,255,0.12);
    --vault-fg:         #f0f1f3;
    --vault-dim:        rgba(240,241,243,0.7);
    --vault-faint:      rgba(240,241,243,0.45);
    --vault-emerald:    #10b981;
    --vault-emerald-d:  rgba(16,185,129,0.55);
    --vault-emerald-g:  rgba(16,185,129,0.10);
    --vault-emerald-gl: rgba(16,185,129,0.18);
    --vault-gold:       #f5b400;
    --vault-red:        #ef4444;
}

/* ─── Base canvas + viewport guard ─────────────────────────── */
html, body {
    background: var(--vault-bg) !important;
    color: var(--vault-fg) !important;
    font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif !important;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
::selection { background: rgba(16,185,129,0.25); color: var(--vault-fg); }

/* Subtle honeycomb backdrop on every page */
body::before {
    content: '';
    position: fixed; inset: 0;
    background-image: radial-gradient(ellipse at top, rgba(16,185,129,0.06), transparent 55%);
    pointer-events: none;
    z-index: 0;
}

/* ============================================================
   NAVBAR — replace legacy chunky nav with Vault sticky nav
   ============================================================ */

.navbar {
    background: rgba(8,9,12,0.78) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid var(--vault-border) !important;
    box-shadow: none !important;
    padding: 14px 0 !important;
}
.navbar .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;
    max-width: 1180px !important;
    padding: 0 40px !important;
}
.navbar .logo { flex-shrink: 0; }
.navbar .logo a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.navbar .logo-image {
    width: 28px !important;
    height: auto !important;
    filter: drop-shadow(0 0 6px rgba(16,185,129,0.35));
}
.navbar .logo-text {
    color: var(--vault-fg) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    letter-spacing: -0.01em !important;
}
.navbar .nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 30px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.navbar .nav-links li { list-style: none; }
.navbar .nav-links a {
    color: var(--vault-dim) !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500;
    transition: color 0.15s !important;
    padding: 6px 0;
    border: none !important;
    background: none !important;
}
.navbar .nav-links a:hover { color: var(--vault-fg) !important; }

.navbar .nav-actions { flex-shrink: 0; }
.navbar .btn,
.navbar .btn-nav,
.navbar .glass-light {
    background: var(--vault-emerald) !important;
    color: #001510 !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 11px 22px !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 0 0 1px var(--vault-emerald-d), 0 12px 30px -10px rgba(16,185,129,0.6) !important;
    cursor: pointer;
    transition: filter 0.15s, transform 0.15s;
}
.navbar .btn:hover,
.navbar .btn-nav:hover,
.navbar .glass-light:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* ============================================================
   BLOG POSTS — turn the .blog-header into a Vault hero block
   ============================================================ */

.blog-container {
    max-width: 760px !important;
    margin: 0 auto;
    padding: 32px 40px 60px !important;
    line-height: 1.65 !important;
    position: relative;
    z-index: 1;
}

/* Breadcrumb → mono eyebrow style */
.breadcrumb {
    margin: 16px 0 36px !important;
    font-family: 'Geist Mono', monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vault-faint) !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.breadcrumb a {
    color: var(--vault-emerald) !important;
    text-decoration: none !important;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span {
    color: var(--vault-faint) !important;
    margin: 0 !important;
}

/* Blog header → Vault hero block: glow + eyebrow + big serif accent */
.blog-header {
    position: relative;
    text-align: left !important;
    margin: 0 0 48px !important;
    padding: 40px 0 8px !important;
}
.blog-header::after {
    content: '';
    position: absolute;
    top: -40px; left: -80px;
    width: 360px; height: 360px;
    background: radial-gradient(circle, var(--vault-emerald-gl), transparent 60%);
    filter: blur(40px);
    pointer-events: none;
    z-index: -1;
}
.blog-header::before {
    content: 'FIELD NOTES';
    display: inline-block;
    margin-bottom: 18px;
    font-family: 'Geist Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.24em;
    color: var(--vault-emerald);
    padding: 6px 12px;
    border: 1px solid var(--vault-emerald-d);
    border-radius: 999px;
    background: var(--vault-emerald-g);
}
.blog-title {
    color: var(--vault-fg) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: clamp(2rem, 5vw, 3rem) !important;
    line-height: 1.08 !important;
    font-weight: 600 !important;
    letter-spacing: -0.03em !important;
    margin: 14px 0 18px !important;
    max-width: 22ch;
}
.blog-meta {
    font-family: 'Geist Mono', monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    color: var(--vault-faint) !important;
    display: flex !important;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.blog-meta span { color: var(--vault-faint) !important; }

/* Blog body */
.blog-content { font-size: 17px; color: var(--vault-fg); }
.blog-content > p:first-of-type {
    font-size: 19px !important;
    line-height: 1.55 !important;
    color: var(--vault-fg) !important;
    font-weight: 400;
    border-left: 2px solid var(--vault-emerald);
    padding-left: 20px;
    margin: 0 0 28px;
    font-family: 'Instrument Serif', serif;
    font-style: italic;
}
.blog-content h2 {
    color: var(--vault-fg) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    font-size: clamp(1.6rem, 3vw, 2rem) !important;
    letter-spacing: -0.02em !important;
    margin: 56px 0 18px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid var(--vault-border-2) !important;
    position: relative;
    padding-left: 22px !important;
}
.blog-content h2::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    margin-top: -8px;
    width: 12px; height: 14px;
    background: var(--vault-emerald);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    box-shadow: 0 0 12px var(--vault-emerald-d);
}
.blog-content h3 {
    color: var(--vault-fg) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.2rem !important;
    margin: 32px 0 12px !important;
    letter-spacing: -0.01em;
}
.blog-content p {
    color: var(--vault-dim) !important;
    line-height: 1.7 !important;
    margin: 0 0 18px !important;
    font-size: 16px !important;
}
.blog-content ul,
.blog-content ol { color: var(--vault-dim) !important; padding-left: 22px; }
.blog-content li {
    margin-bottom: 8px;
    line-height: 1.65;
    color: var(--vault-dim) !important;
}
.blog-content ul li::marker { color: var(--vault-emerald); }
.blog-content ol li::marker { color: var(--vault-emerald); font-weight: 600; }
.blog-content strong { color: var(--vault-fg); font-weight: 600; }
.blog-content a {
    color: var(--vault-emerald) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(16,185,129,0.5);
}
.blog-content a:hover { text-decoration-color: var(--vault-emerald); }

/* Callout boxes — Vault cards with hex corner */
.highlight-box,
.warning-box {
    position: relative !important;
    margin: 28px 0 !important;
    padding: 24px 28px !important;
    border-radius: 18px !important;
    overflow: hidden;
    border: none !important;
    border-left: 0 !important;
    color: var(--vault-fg) !important;
}
.highlight-box {
    background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.02)) !important;
    box-shadow: 0 0 0 1px var(--vault-emerald-d), 0 20px 50px -25px rgba(16,185,129,0.35);
}
.warning-box {
    background: linear-gradient(135deg, rgba(245,180,0,0.08), rgba(245,180,0,0.02)) !important;
    box-shadow: 0 0 0 1px rgba(245,180,0,0.45), 0 20px 50px -25px rgba(245,180,0,0.35);
}
.highlight-box::before,
.warning-box::before {
    content: '';
    position: absolute;
    top: -18px; right: -18px;
    width: 70px; height: 80px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    opacity: 0.22;
    pointer-events: none;
}
.highlight-box::before { background: var(--vault-emerald); }
.warning-box::before { background: var(--vault-gold); }
.highlight-box strong { color: var(--vault-emerald) !important; }
.warning-box strong { color: var(--vault-gold) !important; }

/* Comparison table — proper Vault card */
.comparison-table {
    width: 100% !important;
    background: var(--vault-bg-2) !important;
    border: 1px solid var(--vault-border) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    margin: 28px 0 !important;
    border-collapse: separate !important;
    border-spacing: 0;
    font-size: 14px;
    table-layout: auto;
}
.comparison-table th {
    background: var(--vault-bg-3) !important;
    color: var(--vault-emerald) !important;
    font-family: 'Geist Mono', monospace !important;
    font-size: 11px !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600 !important;
    padding: 14px 16px !important;
    text-align: left;
    border-bottom: 1px solid var(--vault-border-2) !important;
}
.comparison-table td {
    color: var(--vault-dim) !important;
    border-top: 1px solid var(--vault-border) !important;
    padding: 14px 16px !important;
}
.comparison-table tr:first-child td { border-top: none !important; }
.comparison-table tr:hover td {
    background: rgba(16,185,129,0.04);
    color: var(--vault-fg) !important;
}

/* CTA box → Vault inline conversion card */
.cta-box {
    position: relative !important;
    overflow: hidden;
    background: linear-gradient(135deg, var(--vault-bg-2) 0%, var(--vault-bg-3) 100%) !important;
    border: 1px solid var(--vault-emerald-d) !important;
    border-radius: 22px !important;
    box-shadow: 0 0 0 1px rgba(16,185,129,0.08), 0 30px 80px -30px rgba(16,185,129,0.45) !important;
    padding: 36px 32px !important;
    margin: 44px 0 !important;
    text-align: left !important;
}
.cta-box::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at top right, var(--vault-emerald-gl), transparent 65%);
    pointer-events: none;
}
.cta-box::after {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 110px; height: 125px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--vault-emerald);
    opacity: 0.12;
    pointer-events: none;
}
.cta-box h3 {
    color: var(--vault-fg) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.5rem !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 10px !important;
    border: none !important;
    padding: 0 !important;
    position: relative;
}
.cta-box h3::before { display: none !important; }
.cta-box p {
    color: var(--vault-dim) !important;
    font-size: 15px !important;
    margin: 0 0 22px !important;
    position: relative;
    max-width: 52ch;
}
.cta-box a {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background: var(--vault-emerald) !important;
    color: #001510 !important;
    border-radius: 999px !important;
    padding: 13px 24px !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 0 0 1px var(--vault-emerald-d), 0 14px 30px -10px rgba(16,185,129,0.6) !important;
    position: relative;
    transition: filter 0.15s, transform 0.15s;
}
.cta-box a:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* Related-reading list → card list */
.blog-content > ul:last-of-type,
.blog-content > h2:last-of-type + ul {
    list-style: none !important;
    padding-left: 0 !important;
    display: grid;
    gap: 8px;
    margin-top: 18px !important;
}
.blog-content > ul:last-of-type li,
.blog-content > h2:last-of-type + ul li {
    padding: 14px 18px;
    background: var(--vault-bg-2);
    border: 1px solid var(--vault-border);
    border-radius: 12px;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
    margin: 0;
    list-style: none;
}
.blog-content > ul:last-of-type li::marker,
.blog-content > h2:last-of-type + ul li::marker { content: none; }
.blog-content > ul:last-of-type li:hover,
.blog-content > h2:last-of-type + ul li:hover {
    border-color: var(--vault-emerald-d);
    background: rgba(16,185,129,0.04);
    transform: translateX(2px);
}
.blog-content > ul:last-of-type a,
.blog-content > h2:last-of-type + ul a {
    color: var(--vault-fg) !important;
    text-decoration: none !important;
    font-weight: 500;
    display: block;
}
.blog-content > ul:last-of-type a:hover,
.blog-content > h2:last-of-type + ul a:hover { color: var(--vault-emerald) !important; }

/* ============================================================
   FOOTER — match Vault landing footer
   ============================================================ */

.footer {
    background: var(--vault-bg) !important;
    border-top: 1px solid var(--vault-border) !important;
    color: var(--vault-faint) !important;
    padding: 40px 0 28px !important;
    margin-top: 80px !important;
    position: relative;
    z-index: 1;
}
.footer p { color: var(--vault-faint) !important; font-size: 12px !important; }
.footer .footer-legal { color: var(--vault-faint) !important; font-family: 'Geist Mono', monospace; letter-spacing: 0.04em; }

/* ============================================================
   BLOG HUB INDEX (/blog/) — Vault hex-tile cards
   ============================================================ */

.blog-hero {
    position: relative;
    padding: 60px 0 50px !important;
    text-align: center !important;
    z-index: 1;
}
.blog-hero::before {
    content: 'FIELD NOTES · TRADING INTEL';
    display: block;
    margin-bottom: 16px;
    font-family: 'Geist Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.24em;
    color: var(--vault-emerald);
}
.blog-hero::after {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 700px; height: 400px;
    background: radial-gradient(ellipse, var(--vault-emerald-gl), transparent 60%);
    filter: blur(40px);
    pointer-events: none;
    z-index: -1;
    max-width: 100%;
}
.blog-hero-title {
    color: var(--vault-fg) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    font-size: clamp(2.2rem, 5vw, 3.4rem) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.03em !important;
    margin: 0 0 18px !important;
}
.blog-hero-subtitle {
    color: var(--vault-dim) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1.05rem !important;
    max-width: 56ch;
    margin: 0 auto !important;
    line-height: 1.55 !important;
}

.blog-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
    gap: 18px !important;
    padding: 0 24px !important;
    position: relative;
    z-index: 1;
}

.blog-card {
    background: var(--vault-bg-2) !important;
    border: 1px solid var(--vault-border) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s !important;
    overflow: hidden;
    position: relative;
}
.blog-card::before {
    content: '';
    position: absolute;
    top: -30px; right: -30px;
    width: 100px; height: 115px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--vault-emerald);
    opacity: 0.05;
    pointer-events: none;
    transition: opacity 0.2s;
}
.blog-card:hover {
    border-color: var(--vault-emerald-d) !important;
    box-shadow: 0 30px 60px -30px rgba(16,185,129,0.3) !important;
    transform: translateY(-4px) !important;
}
.blog-card:hover::before { opacity: 0.12; }

.blog-card-header {
    background: linear-gradient(135deg, rgba(16,185,129,0.08) 0%, rgba(16,185,129,0.02) 100%) !important;
    border-bottom: 1px solid var(--vault-border) !important;
    padding: 24px 24px 20px !important;
}
.blog-card-category {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    background: var(--vault-emerald-g) !important;
    color: var(--vault-emerald) !important;
    border: 1px solid var(--vault-emerald-d) !important;
    border-radius: 999px !important;
    font-family: 'Geist Mono', monospace !important;
    font-size: 10px !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 5px 11px !important;
    margin-bottom: 14px !important;
    font-weight: 600;
}
.blog-card-category::before {
    content: '◆';
    color: var(--vault-emerald);
    font-size: 10px;
}
.blog-card-title {
    color: var(--vault-fg) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.25rem !important;
    letter-spacing: -0.015em !important;
    line-height: 1.25 !important;
    margin: 0 0 10px !important;
}
.blog-card-excerpt {
    color: var(--vault-dim) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}
.blog-card-body {
    background: rgba(0,0,0,0.15) !important;
    padding: 16px 24px 20px !important;
}
.blog-card-footer {
    background: rgba(0,0,0,0.15) !important;
    padding: 0 24px 22px !important;
}
.blog-card-meta,
.blog-card-meta span {
    color: var(--vault-faint) !important;
    font-family: 'Geist Mono', monospace !important;
    font-size: 10.5px !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.blog-card-tags { margin-top: 12px !important; }
.blog-tag {
    background: rgba(255,255,255,0.04) !important;
    color: var(--vault-dim) !important;
    border: 1px solid var(--vault-border-2) !important;
    font-family: 'Geist Mono', monospace !important;
    font-size: 10px !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    font-weight: 500;
}
.read-more-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px !important;
    color: var(--vault-emerald) !important;
    background: rgba(16,185,129,0.08);
    border: 1px solid var(--vault-emerald-d);
    padding: 9px 16px;
    border-radius: 999px;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    transition: background 0.15s, gap 0.15s !important;
}
.read-more-btn:hover {
    background: rgba(16,185,129,0.16) !important;
    color: var(--vault-emerald) !important;
    gap: 12px !important;
}

/* ============================================================
   POLICY PAGES (privacy-policy.html, refund-policy.html)
   ============================================================ */

.bg-animation, .gradient-orb { display: none !important; }

.policy-page {
    position: relative;
    padding: 40px 0 60px !important;
    min-height: 100vh;
}
.policy-container { max-width: 820px !important; padding: 0 24px !important; }

.policy-header {
    position: relative;
    text-align: left !important;
    margin-bottom: 40px !important;
    padding-top: 16px;
}
.policy-header::before {
    content: 'LEGAL · RECEIPT';
    display: inline-block;
    margin-bottom: 14px;
    font-family: 'Geist Mono', monospace;
    font-size: 10.5px;
    letter-spacing: 0.24em;
    color: var(--vault-emerald);
    padding: 6px 12px;
    border: 1px solid var(--vault-emerald-d);
    border-radius: 999px;
    background: var(--vault-emerald-g);
}
.policy-header h1 {
    background: none !important;
    -webkit-text-fill-color: var(--vault-fg) !important;
    color: var(--vault-fg) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    font-size: clamp(2.4rem, 5vw, 3.4rem) !important;
    letter-spacing: -0.03em !important;
    line-height: 1.05 !important;
    margin: 14px 0 12px !important;
}
.policy-date {
    font-family: 'Geist Mono', monospace !important;
    color: var(--vault-faint) !important;
    font-size: 11px !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.policy-content {
    background: var(--vault-bg-2) !important;
    border: 1px solid var(--vault-border) !important;
    border-radius: 22px !important;
    padding: 36px 40px !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    position: relative;
    overflow: hidden;
}
.policy-content::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 140px; height: 160px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--vault-emerald);
    opacity: 0.04;
    pointer-events: none;
}
.policy-section { margin-bottom: 32px !important; position: relative; }
.policy-section h2 {
    color: var(--vault-fg) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.5rem !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 14px !important;
    padding: 0 0 10px 22px !important;
    border-bottom: 1px solid var(--vault-border-2);
    position: relative;
}
.policy-section h2::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    margin-top: -10px;
    width: 12px; height: 14px;
    background: var(--vault-emerald);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    box-shadow: 0 0 12px var(--vault-emerald-d);
}
.policy-section h3 {
    color: var(--vault-fg) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    font-size: 1.05rem !important;
    margin: 18px 0 8px !important;
}
.policy-section p,
.policy-section ul li {
    color: var(--vault-dim) !important;
    line-height: 1.7 !important;
    font-size: 15px;
}
.policy-section ul li:before { color: var(--vault-emerald) !important; }
.policy-section a {
    color: var(--vault-emerald) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}
.policy-content .highlight-box {
    background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(16,185,129,0.02)) !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 18px 22px !important;
    box-shadow: 0 0 0 1px var(--vault-emerald-d);
}
.policy-content .highlight-box::before { display: none; }
.policy-content .highlight-box p { color: var(--vault-fg) !important; }

/* ============================================================
   MOBILE BREAKPOINT — ≤768px
   ============================================================ */

@media (max-width: 768px) {
    /* Navbar */
    .navbar { padding: 10px 0 !important; }
    .navbar .container { padding: 0 18px !important; gap: 8px; }
    .navbar .logo-image { width: 24px !important; }
    .navbar .logo-text { font-size: 15px !important; }
    .navbar .nav-links { display: none !important; }
    .navbar .btn,
    .navbar .btn-nav,
    .navbar .glass-light {
        padding: 9px 16px !important;
        font-size: 12px !important;
    }

    /* Blog post container */
    .blog-container { padding: 18px 20px 40px !important; }
    .blog-header { padding: 24px 0 4px !important; margin-bottom: 32px !important; }
    .blog-header::before { font-size: 9px; padding: 5px 10px; }
    .blog-title { font-size: 1.85rem !important; margin: 12px 0 14px !important; }
    .blog-meta { font-size: 10px !important; }
    .blog-content { font-size: 16px; }
    .blog-content > p:first-of-type {
        font-size: 17px !important;
        padding-left: 16px;
    }
    .blog-content h2 {
        font-size: 1.4rem !important;
        margin: 40px 0 14px !important;
        padding-left: 20px !important;
    }
    .blog-content h2::before { width: 10px; height: 12px; margin-top: -7px; }
    .blog-content h3 { font-size: 1.05rem !important; margin: 24px 0 8px !important; }
    .blog-content p { font-size: 15px !important; }

    /* Callouts */
    .highlight-box, .warning-box {
        padding: 18px 22px !important;
        margin: 22px 0 !important;
    }
    .highlight-box::before, .warning-box::before {
        width: 50px; height: 58px;
        top: -14px; right: -14px;
    }

    /* Comparison table — wrap in horizontal scroll */
    .comparison-table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--vault-emerald-d) transparent;
    }
    .comparison-table thead, .comparison-table tbody { white-space: nowrap; }
    .comparison-table th, .comparison-table td {
        padding: 12px 14px !important;
        white-space: nowrap;
    }

    /* CTA box */
    .cta-box { padding: 26px 22px !important; margin: 32px 0 !important; }
    .cta-box::after { width: 80px; height: 90px; top: -20px; right: -20px; }
    .cta-box h3 { font-size: 1.25rem !important; }
    .cta-box p { font-size: 14px !important; }
    .cta-box a { padding: 12px 20px !important; font-size: 13px !important; }

    /* Related reading */
    .blog-content > ul:last-of-type li,
    .blog-content > h2:last-of-type + ul li {
        padding: 12px 14px;
    }

    /* Blog hub */
    .blog-hero { padding: 40px 0 30px !important; }
    .blog-hero::before { font-size: 10px; }
    .blog-hero-title { font-size: 1.9rem !important; padding: 0 18px; }
    .blog-hero-subtitle { font-size: 0.95rem !important; padding: 0 18px; }
    .blog-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 0 18px !important;
        margin: 24px auto !important;
    }
    .blog-card-header { padding: 20px 20px 16px !important; }
    .blog-card-title { font-size: 1.1rem !important; }
    .blog-card-body, .blog-card-footer { padding-left: 20px !important; padding-right: 20px !important; }

    /* Policy pages */
    .policy-page { padding: 24px 0 40px !important; }
    .policy-container { padding: 0 18px !important; }
    .policy-header { margin-bottom: 26px !important; }
    .policy-header::before { font-size: 9px; padding: 5px 10px; }
    .policy-header h1 { font-size: 2rem !important; }
    .policy-content { padding: 24px 22px !important; border-radius: 16px !important; }
    .policy-section { margin-bottom: 24px !important; }
    .policy-section h2 {
        font-size: 1.2rem !important;
        padding-left: 20px !important;
    }
    .policy-section h2::before { width: 10px; height: 12px; }
    .policy-section h3 { font-size: 1rem !important; }
    .policy-section p, .policy-section ul li { font-size: 14px !important; }

    /* Footer */
    .footer { padding: 32px 0 24px !important; margin-top: 56px !important; }
}