/* =============================================================
   Virtual Check — Blog article styles
   Scoped to .vc-post so nothing leaks into header, nav, or footer.

   The article markup is authored by the content team and shipped
   with its own class names (.eyebrow, .tldr, .flow, .rcard, …).
   This file re-expresses that markup in the site's design tokens:
   Inter 900 headings, slate palette, pill eyebrows, 2xl cards,
   navy panels. Colors are Tailwind v3 hex values.
   ============================================================= */

/* ---------- Reading column & bands ---------- */
.vc-post { color: #0f172a; }
.vc-post article { font-size: 16px; line-height: 1.7; }
.vc-post .wrap { max-width: 820px; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px) { .vc-post .wrap { padding: 0 1.5rem; } }

.vc-post section { position: relative; padding: 3.5rem 0; background: #ffffff; }
@media (min-width: 1024px) { .vc-post section { padding: 4.5rem 0; } }
.vc-post section[id] { scroll-margin-top: 6.25rem; } /* sticky header is 83px */

.vc-post .band-slate { background: #f8fafc; }
.vc-post .band-dark {
    background-color: #020617;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0);
    background-size: 22px 22px;
    color: #e2e8f0;
}
.vc-post .band-dark::before {
    content: ''; position: absolute; top: -8rem; right: 20%; width: 26rem; height: 26rem; border-radius: 9999px;
    background: rgba(139, 92, 246, 0.18); filter: blur(96px); pointer-events: none;
}
.vc-post .band-dark > .wrap { position: relative; }
.vc-post .band-dark h2 { color: #ffffff; }
.vc-post .band-dark p { color: #cbd5e1; }
.vc-post .band-dark .lede { color: #cbd5e1; }

/* First section = hero. Mesh + line grid, same recipe as .bg-mesh-light / .bg-line-grid. */
.vc-post article > section:first-of-type {
    padding-top: 4rem;
    padding-bottom: 3.5rem;
    background-color: #ffffff;
    background-image:
        linear-gradient(to right,  rgba(15, 23, 42, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(15, 23, 42, 0.05) 1px, transparent 1px),
        radial-gradient(at 20% 0%,   rgba(125, 211, 252, 0.25) 0px, transparent 50%),
        radial-gradient(at 80% 0%,   rgba(199, 210, 254, 0.30) 0px, transparent 50%),
        radial-gradient(at 0%  50%,  rgba(186, 230, 253, 0.20) 0px, transparent 50%),
        radial-gradient(at 100% 60%, rgba(221, 214, 254, 0.25) 0px, transparent 50%);
    background-size: 48px 48px, 48px 48px, auto, auto, auto, auto;
    overflow: hidden;
}
@media (min-width: 1024px) { .vc-post article > section:first-of-type { padding-top: 6rem; padding-bottom: 4.5rem; } }
.vc-post article > section:first-of-type::before,
.vc-post article > section:first-of-type::after {
    content: ''; position: absolute; border-radius: 9999px; pointer-events: none; filter: blur(64px);
}
.vc-post article > section:first-of-type::before { top: -8rem; left: -5rem; width: 24rem; height: 24rem; background: rgba(196, 181, 253, 0.35); }
.vc-post article > section:first-of-type::after  { top: -5rem; right: 0;   width: 24rem; height: 24rem; background: rgba(125, 211, 252, 0.30); }
.vc-post article > section:first-of-type > .wrap { position: relative; }

/* Breadcrumb + date row (site chrome, inserted above the writer's eyebrow) */
.vc-post .vc-post-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
    margin-bottom: 1.5rem; font-size: 0.75rem; font-weight: 600; color: #64748b;
}
.vc-post .vc-post-meta a {
    display: inline-flex; align-items: center; gap: 0.375rem; color: #64748b; text-decoration: none; transition: color .2s;
}
.vc-post .vc-post-meta a:hover { color: #0f172a; }
.vc-post .vc-post-meta a svg { width: 0.875rem; height: 0.875rem; }
.vc-post .vc-post-meta .vc-sep { color: #cbd5e1; }

/* ---------- Eyebrow, headings, rules ---------- */
.vc-post .eyebrow {
    display: inline-flex; align-items: center; gap: 0.5rem;
    border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 9999px;
    padding: 0.25rem 0.75rem; margin-bottom: 1.25rem;
    font-size: 0.75rem; font-weight: 600; color: #475569; line-height: 1.25rem;
}
.vc-post article > section:first-of-type .eyebrow { background: rgba(255,255,255,0.7); backdrop-filter: blur(8px); box-shadow: 0 1px 2px rgba(15,23,42,0.05); }
.vc-post .band-dark .eyebrow { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.15); color: #c4b5fd; }
.vc-post .dot { height: 6px; width: 6px; border-radius: 9999px; background: #0ea5e9; display: inline-block; flex: none; }
.vc-post .dot.violet  { background: #8b5cf6; }
.vc-post .dot.emerald { background: #10b981; }

.vc-post h1 {
    margin: 0.25rem 0 0; font-weight: 900; letter-spacing: -0.025em; line-height: 1.05;
    font-size: clamp(2.125rem, 5vw, 3.5rem); color: #0f172a; text-wrap: balance;
}
.vc-post h2 {
    margin: 0 0 0.375rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1;
    font-size: clamp(1.625rem, 3.2vw, 2.375rem); color: #0f172a; text-wrap: balance;
}
.vc-post h3 { margin: 1.75rem 0 0.375rem; font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.01em; color: #0f172a; }
.vc-post .band-dark h3 { color: #ffffff; }

.vc-post .grad {
    background: linear-gradient(90deg, #0284c7 0%, #6366f1 60%, #8b5cf6 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vc-post .grad-v {
    background: linear-gradient(90deg, #7c3aed 0%, #a855f7 55%, #d946ef 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vc-post .band-dark .grad-v { background: linear-gradient(90deg, #a78bfa, #c084fc 55%, #e879f9); -webkit-background-clip: text; background-clip: text; }

.vc-post .rule {
    height: 3px; width: 6rem; border-radius: 9999px; margin: 1.25rem 0 1.5rem;
    background: linear-gradient(90deg, #0ea5e9, #6366f1, transparent);
}
.vc-post .rule.v { background: linear-gradient(90deg, #8b5cf6, #d946ef, transparent); }

/* ---------- Body copy ---------- */
.vc-post p { margin: 0 0 1rem; color: #475569; }
.vc-post p b, .vc-post li b { color: #0f172a; }
.vc-post .lede { font-size: 1.125rem; line-height: 1.65; color: #334155; }
@media (min-width: 640px) { .vc-post .lede { font-size: 1.25rem; } }
.vc-post a:not(.btn):not(.vc-post-meta a) { color: #0369a1; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.vc-post a:not(.btn):hover { color: #0c4a6e; }
.vc-post a:focus-visible, .vc-post .btn:focus-visible { outline: 2px solid #0ea5e9; outline-offset: 2px; border-radius: 4px; }

/* ---------- The Short Version ---------- */
.vc-post .tldr {
    margin-top: 1.75rem; padding: 1.25rem 1.375rem; background: #ffffff;
    border: 1px solid #e2e8f0; border-left: 4px solid #8b5cf6; border-radius: 1rem;
    box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.vc-post .tldr h2 {
    margin: 0 0 0.75rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em;
    text-transform: uppercase; color: #6d28d9; line-height: 1.4;
}
.vc-post .tldr ul { list-style: none; margin: 0; padding: 0; }
.vc-post .tldr li { position: relative; padding-left: 1.25rem; margin-bottom: 0.5625rem; font-size: 0.9375rem; line-height: 1.6; color: #475569; }
.vc-post .tldr li:last-child { margin-bottom: 0; }
.vc-post .tldr li::before { content: ''; position: absolute; left: 2px; top: 0.6rem; height: 6px; width: 6px; border-radius: 9999px; background: #8b5cf6; }

/* ---------- Jump links ---------- */
.vc-post .jump {
    margin-top: 1.5rem; padding: 1.125rem 1.25rem; background: #f8fafc;
    border: 1px solid #e2e8f0; border-radius: 1rem;
}
.vc-post .jump .jhead { margin: 0 0 0.875rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 700; color: #0f172a; }
.vc-post .jump .jhead svg { height: 1rem; width: 1rem; flex: none; }
.vc-post .jlist { list-style: none; counter-reset: j; margin: 0; padding: 0; display: grid; gap: 2px; }
@media (min-width: 640px) { .vc-post .jlist { grid-template-columns: 1fr 1fr; column-gap: 1.625rem; } }
.vc-post .jlist li { counter-increment: j; display: flex; align-items: baseline; gap: 0.5625rem; padding: 0.3125rem 0; }
.vc-post .jlist li::before { content: counter(j) "."; flex: none; font-size: 0.78rem; font-weight: 700; color: #94a3b8; min-width: 1rem; font-variant-numeric: tabular-nums; }
.vc-post .jlist a { font-size: 0.9rem; font-weight: 600; color: #0369a1; }
.vc-post .jlist a::after { content: " \2193"; text-decoration: none; font-weight: 700; }

/* ---------- Icon lists ---------- */
.vc-post ul.items, .vc-post ul.stack { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
@media (min-width: 640px) { .vc-post ul.items { grid-template-columns: 1fr 1fr; } }
.vc-post ul.items li, .vc-post ul.stack li {
    display: flex; gap: 0.75rem; align-items: flex-start;
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 1rem; padding: 0.875rem 1.125rem;
    font-size: 0.875rem; line-height: 1.6; color: #334155;
}
.vc-post ul.items li { font-weight: 500; }
.vc-post ul.stack li { font-size: 0.9rem; color: #475569; }
.vc-post ul.stack .txt { min-width: 0; }
.vc-post ul.stack .txt b { display: block; color: #0f172a; font-size: 0.875rem; margin-bottom: 2px; }
.vc-post .ico { flex: none; height: 1.375rem; width: 1.375rem; margin-top: 2px; }

/* ---------- Callouts ---------- */
.vc-post .callout {
    display: flex; gap: 1rem; margin-top: 1.5rem; padding: 1.25rem;
    border-radius: 1.125rem; border: 1px solid #ede9fe;
    background: linear-gradient(135deg, #f5f3ff, #ffffff 55%, #fdf4ff);
}
.vc-post .callout.sky { background: linear-gradient(135deg, #f0f9ff, #ffffff 55%, #eef2ff); border-color: #e0f2fe; }
.vc-post .callout .tile {
    flex: none; height: 2.5rem; width: 2.5rem; border-radius: 0.75rem;
    background: linear-gradient(135deg, #8b5cf6, #d946ef);
    box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.30); border: 1px solid rgba(255,255,255,0.2);
}
.vc-post .callout.sky .tile { background: linear-gradient(135deg, #0ea5e9, #6366f1); box-shadow: 0 10px 15px -3px rgba(14, 165, 233, 0.30); }
.vc-post .callout p { margin: 0; font-size: 0.9rem; color: #475569; }

/* ---------- Comparison table ---------- */
.vc-post .tablewrap {
    margin-top: 0.5rem; border: 1px solid #e2e8f0; border-radius: 1rem; overflow: hidden;
    overflow-x: auto; box-shadow: 0 18px 40px -24px rgba(15, 23, 42, 0.35);
}
.vc-post table { width: 100%; border-collapse: collapse; font-size: 0.875rem; min-width: 560px; }
.vc-post thead tr { background: #0f172a; }
.vc-post thead th { text-align: left; padding: 1rem 1.25rem; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #94a3b8; }
.vc-post thead th.sky { color: #7dd3fc; }
.vc-post thead th.violet { color: #c4b5fd; }
.vc-post td { padding: 1rem 1.25rem; border-bottom: 1px solid #f1f5f9; color: #475569; vertical-align: top; line-height: 1.6; }
.vc-post tbody th { text-align: left; padding: 1rem 1.25rem; border-bottom: 1px solid #f1f5f9; font-size: 0.875rem; font-weight: 700; color: #0f172a; vertical-align: top; }
.vc-post tbody tr:last-child td, .vc-post tbody tr:last-child th { border-bottom: 0; }

/* ---------- FAQ (static, indexable) ---------- */
.vc-post .faq {
    margin-bottom: 0.625rem; padding: 1.125rem 1.25rem; background: #ffffff;
    border: 1px solid #e2e8f0; border-radius: 1rem; box-shadow: 0 1px 2px rgba(15,23,42,0.04);
}
.vc-post .faq h3 { margin: 0 0 0.375rem; font-size: 1rem; }
.vc-post .faq p { margin: 0; font-size: 0.9rem; }

/* ---------- Figures: lifecycle flow (dark) ---------- */
.vc-post .figure { margin-top: 1.875rem; }
.vc-post .figure .figtitle { margin: 0 0 1.125rem; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: #c4b5fd; }
.vc-post .figure .figtitle.dark { color: #334155; font-size: 0.75rem; }
.vc-post .figure .cap { margin: 0.375rem 0 0; font-size: 0.875rem; color: #94a3b8; }
.vc-post .figure .cap.dark { color: #475569; font-size: 0.9375rem; }
.vc-post .figure svg { display: block; width: 100%; height: auto; }

.vc-post .flow { list-style: none; margin: 0; padding: 0; }
.vc-post .flow li { position: relative; display: flex; gap: 1.125rem; padding-bottom: 1.375rem; }
.vc-post .flow li:last-child { padding-bottom: 0; }
.vc-post .flow li:not(:last-child)::before { content: ''; position: absolute; left: 17px; top: 40px; bottom: 0; width: 2px; background: rgba(255,255,255,0.14); }
.vc-post .flow .num {
    position: relative; flex: none; height: 2.25rem; width: 2.25rem; border-radius: 9999px;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #ffffff; font-weight: 800; font-size: 0.9375rem;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 15px -3px rgba(139, 92, 246, 0.35);
}
.vc-post .flow .body { padding-top: 5px; }
.vc-post .flow .body b { display: block; color: #ffffff; font-size: 1.0625rem; margin-bottom: 2px; }
.vc-post .flow .body span { display: block; color: #cbd5e1; font-size: 0.9375rem; line-height: 1.6; }
.vc-post .flow li.ret .num { background: rgba(248, 113, 113, 0.14); border: 1px solid rgba(248, 113, 113, 0.5); color: #fca5a5; font-size: 1.0625rem; box-shadow: none; }
.vc-post .flow li.ret .body b { color: #fca5a5; }

/* ---------- Scorecards ---------- */
.vc-post .rgrid { display: grid; gap: 0.75rem; margin-top: 0.375rem; }
@media (min-width: 700px) { .vc-post .rgrid { grid-template-columns: 1fr 1fr; } }
.vc-post .rcard { border: 1px solid #e2e8f0; border-radius: 1rem; padding: 1rem 1.125rem; background: #ffffff; }
.vc-post .rcard .rhead { margin: 0 0 0.75rem; padding-bottom: 0.625rem; border-bottom: 2px solid; font-weight: 800; font-size: 0.97rem; color: #0f172a; }
.vc-post .swatch { display: inline-block; height: 9px; width: 9px; border-radius: 9999px; margin-right: 0.5625rem; vertical-align: 1px; }
.vc-post .scorerow { display: flex; align-items: center; justify-content: space-between; gap: 0.875rem; padding: 0.3125rem 0; }
.vc-post .scorerow .lab { font-size: 0.84rem; color: #475569; }
.vc-post .scorerow .val { display: flex; align-items: center; gap: 0.625rem; }
.vc-post .scorerow .val b { font-size: 0.8125rem; color: #0f172a; }
.vc-post .meter { display: inline-flex; gap: 3px; }
.vc-post .meter .seg { width: 13px; height: 8px; border-radius: 2px; background: #e2e8f0; display: inline-block; }

/* ---------- Checkout mockup + routing ---------- */
.vc-post .split { display: grid; gap: 1rem; margin: 1.625rem 0 0.375rem; }
@media (min-width: 760px) { .vc-post .split { grid-template-columns: 0.95fr 1.05fr; align-items: start; } }
.vc-post .mock { border: 1px solid #e2e8f0; border-radius: 1.125rem; background: #ffffff; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.10); }
.vc-post .mockbar { display: flex; justify-content: space-between; align-items: center; padding: 0.875rem 1.125rem; background: #0f172a; color: #ffffff; font-size: 0.84rem; font-weight: 700; }
.vc-post .mockbar b { font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.vc-post .mocklab { margin: 1rem 1.125rem 0.625rem; font-size: 0.65rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: #94a3b8; }
.vc-post .opt { display: flex; gap: 0.75rem; align-items: flex-start; margin: 0 0.875rem 0.625rem; padding: 0.875rem; border: 1px solid #e2e8f0; border-radius: 0.875rem; }
.vc-post .opt.sel { border-color: #8b5cf6; background: #faf5ff; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.12); }
.vc-post .radio { flex: none; height: 1rem; width: 1rem; border-radius: 9999px; border: 2px solid #cbd5e1; margin-top: 3px; }
.vc-post .radio.on { border-color: #8b5cf6; background: radial-gradient(circle, #8b5cf6 0 42%, #ffffff 46% 100%); }
.vc-post .optbody { flex: 1; min-width: 0; }
.vc-post .optbody b { display: block; font-size: 0.9rem; color: #0f172a; }
.vc-post .optbody span { display: block; font-size: 0.8125rem; color: #475569; margin-top: 2px; }
.vc-post .opt .tag { flex: none; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #6d28d9; background: #ede9fe; border-radius: 9999px; padding: 0.25rem 0.5625rem; }
.vc-post .mockfoot { border-top: 1px solid #f1f5f9; padding: 0.8125rem 1.125rem; font-size: 0.78rem; color: #64748b; }

.vc-post .routing { border: 1px solid #e2e8f0; border-radius: 1.125rem; background: #ffffff; padding: 1.25rem; }
.vc-post .rtitle { margin: 0 0 1rem; font-size: 0.9375rem; font-weight: 800; color: #0f172a; }
.vc-post .rrow { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.625rem 0; border-top: 1px solid #f1f5f9; }
.vc-post .rrow:first-of-type { border-top: 0; }
.vc-post .chips { display: flex; flex-wrap: wrap; gap: 0.375rem; flex: 1; min-width: 0; }
.vc-post .chip { font-size: 0.78rem; font-weight: 600; color: #334155; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 9999px; padding: 0.3125rem 0.6875rem; }
.vc-post .arrow { color: #94a3b8; font-size: 1.0625rem; }
.vc-post .rail { flex: none; font-size: 0.8125rem; font-weight: 800; color: #ffffff; border-radius: 9999px; padding: 0.4375rem 0.875rem; }
.vc-post .rail.violet { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.vc-post .rail.sky { background: linear-gradient(135deg, #0ea5e9, #0284c7); }
.vc-post .rnote { margin: 0.875rem 0 0; font-size: 0.84rem; color: #475569; line-height: 1.6; }

/* ---------- CTA panel (matches cta-strip) ---------- */
.vc-post .cta {
    position: relative; overflow: hidden; margin-top: 1.5rem; padding: 2.75rem 2rem; text-align: center; color: #ffffff;
    border-radius: 1.5rem; border: 1px solid rgba(255,255,255,0.10);
    background: linear-gradient(135deg, #0f172a 0%, #0f172a 50%, #2e1065 100%);
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0),
        linear-gradient(135deg, #0f172a 0%, #0f172a 50%, #2e1065 100%);
    background-size: 22px 22px, auto;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
}
.vc-post .cta::before { content: ''; position: absolute; top: -6rem; left: -6rem; width: 18rem; height: 18rem; border-radius: 9999px; background: rgba(139, 92, 246, 0.30); filter: blur(64px); pointer-events: none; }
.vc-post .cta::after  { content: ''; position: absolute; bottom: -6rem; right: -6rem; width: 18rem; height: 18rem; border-radius: 9999px; background: rgba(217, 70, 239, 0.18); filter: blur(64px); pointer-events: none; }
.vc-post .cta > * { position: relative; }
.vc-post .cta .eyebrow { margin-bottom: 1rem; }
.vc-post .cta h2 { color: #ffffff; font-size: clamp(1.5rem, 3vw, 2.125rem); }
.vc-post .cta p { color: #cbd5e1; max-width: 34rem; margin: 0.875rem auto 0; }
.vc-post .btns { display: flex; flex-wrap: wrap; gap: 0.625rem; justify-content: center; margin-top: 1.625rem; }
.vc-post .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    border-radius: 9999px; padding: 0.875rem 1.5rem; font-size: 0.875rem; font-weight: 600; line-height: 1;
    text-decoration: none; transition: background-color .2s, transform .2s, box-shadow .2s;
}
.vc-post .btn.primary { background: #ffffff; color: #0f172a; }
.vc-post .btn.primary:hover { background: #f1f5f9; }
.vc-post .btn.ghost { background: rgba(255,255,255,0.10); color: #ffffff; border: 1px solid rgba(255,255,255,0.20); }
.vc-post .btn.ghost:hover { background: rgba(255,255,255,0.15); }
.vc-post .btn:hover { transform: translateY(-1px); }

/* ---------- Blog chrome (cards on /blog/ and "Continue reading") ---------- */
.vc-card-link { color: inherit; text-decoration: none; }
.vc-card-link::after { content: ''; position: absolute; inset: 0; }   /* whole card is the hit target */
.vc-card-link:focus-visible::after { outline: 2px solid #0ea5e9; outline-offset: 2px; border-radius: 1rem; }
.vc-mt-auto { margin-top: auto; }

/* ---------- Misc ---------- */
.vc-post .flag { color: #b45309; font-size: 0.75rem; font-weight: 700; }
.vc-post .topline { display: none; } /* the site navbar already carries the gradient rule */

/* Smooth jump-link scrolling, only when the reader has not opted out. */
@media (prefers-reduced-motion: no-preference) { html:has(.vc-post) { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { .vc-post .btn:hover { transform: none; } }