/* VeraID Blog: same palette and type as veraid.org Home */
:root{
  --vb-bg:#07111F; --vb-band:#0B1729; --vb-panel:#0F1E34; --vb-line:#1E3150;
  --vb-text:#FFFFFF; --vb-muted:#B4C2D8; --vb-soft:#8C9AB0; --vb-link:#8FB8FF; --vb-accent:#2563EB;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
#get-app{scroll-margin-top:24px}
body{margin:0; background:var(--vb-bg); color:var(--vb-text); font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased}
img{display:block; max-width:100%; height:auto}
a{color:var(--vb-link); text-decoration:none}
a:hover{color:#C4D9FF}
h1,h2,h3,p{margin:0}
.vb-wrap{max-width:1200px; margin:0 auto; padding:0 24px}
.vb-narrow{max-width:760px}

/* Header */
.vb-nav{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; padding-top:22px; padding-bottom:22px}
.vb-brand{display:flex; align-items:center; gap:10px; font-size:22px; font-weight:800; letter-spacing:-0.02em; color:#FFFFFF}
.vb-brand:hover{color:#FFFFFF}
.vb-brand img{height:48px; width:auto}
.vb-brand-sub{font-weight:500; color:var(--vb-muted)}
.vb-navlinks{display:flex; align-items:center; gap:20px; font-size:15px}
.vb-navlinks a{color:#C9D4E5}
.vb-btn{background:#FFFFFF; color:var(--vb-bg) !important; font-weight:600; border-radius:999px; padding:9px 16px; font-size:14px}
.vb-btn:hover{background:#E6EEFF}

/* Blog home */
.vb-hero{padding-top:48px; padding-bottom:56px; display:flex; flex-direction:column; gap:16px; max-width:820px; margin-left:auto; margin-right:auto; text-align:center; align-items:center}
.vb-eyebrow{font-size:13px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--vb-link)}
.vb-hero h1{font-size:52px; line-height:1.08; font-weight:800; letter-spacing:-0.03em}
.vb-lead{font-size:19px; line-height:1.6; color:var(--vb-muted)}
.vb-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:24px; padding-bottom:72px}
.vb-card{display:flex; flex-direction:column; background:var(--vb-panel); border:1px solid var(--vb-line); border-radius:20px; overflow:hidden; color:#FFFFFF; transition:border-color .15s, transform .15s}
.vb-card:hover{color:#FFFFFF; border-color:#2F4A75; transform:translateY(-2px)}
.vb-card-img{width:100%; aspect-ratio:16/9; object-fit:cover}
.vb-card-art{aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 40%, #12305E 0%, #0B1729 70%)}
.vb-card-art img{height:44%; width:auto; filter:drop-shadow(0 16px 26px rgba(0,0,0,0.5))}
.vb-card-body{padding:26px 28px 28px; display:flex; flex-direction:column; gap:10px}
.vb-tag{font-size:13px; font-weight:600; color:var(--vb-link)}
.vb-card h2{font-size:21px; line-height:1.3; font-weight:700; letter-spacing:-0.01em}
.vb-card p{font-size:15px; line-height:1.6; color:var(--vb-muted)}
.vb-date{font-size:13px; color:var(--vb-soft); padding-top:4px}

/* Article */
.vb-post-head{background:var(--vb-band); border-top:1px solid #16253C; border-bottom:1px solid #16253C; padding:48px 0 52px}
.vb-post-head .vb-wrap{display:flex; flex-direction:column; gap:16px}
.vb-back{font-size:14px; color:var(--vb-muted)}
.vb-post-head h1{font-size:44px; line-height:1.12; font-weight:800; letter-spacing:-0.03em}
.vb-meta{display:flex; gap:8px; font-size:14px; color:var(--vb-soft)}
.vb-cover{width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:20px; margin-top:40px}

.vb-prose{padding-top:48px; padding-bottom:24px; font-size:18px; line-height:1.75; color:#D6DEEA}
.vb-prose > * + *{margin-top:1.15em}
.vb-prose h2{font-size:30px; line-height:1.25; font-weight:700; letter-spacing:-0.02em; color:#FFFFFF; margin-top:2em}
.vb-prose h3{font-size:21px; line-height:1.35; font-weight:700; color:#FFFFFF; margin-top:1.6em}
.vb-prose h2 + *, .vb-prose h3 + *{margin-top:0.6em}
.vb-prose strong{color:#FFFFFF; font-weight:600}
.vb-prose a{text-decoration:underline; text-underline-offset:3px}
.vb-prose ul,.vb-prose ol{padding-left:1.3em; margin-bottom:0}
.vb-prose li + li{margin-top:0.5em}
.vb-prose li::marker{color:var(--vb-link)}
.vb-prose img{width:100%; border-radius:20px; border:1px solid var(--vb-line)}
.vb-prose blockquote{margin:1.4em 0 0; padding:18px 22px; border-left:3px solid var(--vb-accent); background:var(--vb-panel); border-radius:0 14px 14px 0; color:#E6EEFF}

/* Key takeaways box */
.vb-prose .vb-takeaways{background:var(--vb-panel); border:1px solid var(--vb-line); border-radius:20px; padding:26px 28px}
.vb-prose .vb-takeaways h2{margin-top:0; font-size:15px; letter-spacing:0.12em; text-transform:uppercase; color:var(--vb-link)}
.vb-prose .vb-takeaways ul{margin-top:12px; font-size:16px; line-height:1.65}

/* Tables */
.vb-table{overflow-x:auto; border:1px solid var(--vb-line); border-radius:16px}
.vb-prose table{width:100%; border-collapse:collapse; font-size:15px; line-height:1.5}
.vb-prose th,.vb-prose td{text-align:left; padding:12px 16px; border-bottom:1px solid var(--vb-line); vertical-align:top}
.vb-prose th{background:var(--vb-band); color:#FFFFFF; font-weight:600}
.vb-prose tr:last-child td{border-bottom:none}

/* Call to action */
.vb-cta{background:var(--vb-accent); border-radius:28px; padding:44px 40px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; margin:48px 0 88px}
.vb-cta h2{font-size:30px; line-height:1.15; font-weight:800; letter-spacing:-0.02em}
.vb-cta p{font-size:17px; color:#E6EEFF; margin-top:8px; max-width:420px}
.vb-stores{display:flex; flex-wrap:wrap; gap:12px}
.vb-stores a{display:block; border-radius:10px}
.vb-stores img{height:52px; width:auto}

/* Footer */
.vb-foot{border-top:1px solid #16253C}
.vb-foot .vb-wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:32px; padding-top:44px; padding-bottom:44px; font-size:14px; color:var(--vb-soft)}
.vb-col{display:flex; flex-direction:column; gap:8px; flex:1 1 220px}
.vb-col strong{color:#FFFFFF; font-weight:600; font-size:15px}

/* Phones */
@media (max-width:640px){
  .vb-wrap{padding:0 20px}
  .vb-nav{padding-top:16px; padding-bottom:16px}
  .vb-brand img{height:40px}
  .vb-brand{font-size:19px}
  .vb-navlinks{gap:12px; font-size:14px}
  .vb-navlinks a:not(.vb-btn){display:none}
  .vb-hero{padding-top:28px; padding-bottom:40px}
  .vb-hero h1{font-size:36px}
  .vb-lead{font-size:17px}
  .vb-list{grid-template-columns:1fr; gap:18px; padding-bottom:56px}
  .vb-post-head{padding:32px 0 36px}
  .vb-post-head h1{font-size:32px}
  .vb-prose{padding-top:36px; font-size:17px}
  .vb-prose h2{font-size:25px}
  .vb-prose h3{font-size:19px}
  .vb-cta{padding:32px 24px; border-radius:22px; margin:36px 0 64px}
  .vb-cta h2{font-size:25px}
  .vb-stores img{height:46px}
}