@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
:root{--paper:#FAFAF6;--paper-2:#F2F0E9;--paper-3:#E9E6DC;--card:#FFFFFF;--ink:#0B1220;--ink-2:#11192A;--fg-1:#0B1220;--fg-2:#2C3645;--fg-3:#5C6577;--fg-4:#8C95A6;--fg-inverse:#FAFAF6;--fg-inverse-2:#B9C0CD;--border:#E5E2D8;--border-strong:#C9C4B5;--border-on-ink:#1F2A40;--hairline:#EDEAE0;--brand:#1F4ED8;--brand-hover:#1A3DAB;--brand-pressed:#15348E;--brand-tint:#E8EEFC;--brand-tint-2:#D6E0FA;--brand-ink:#0D2470;--accent:#F4C430;--accent-deep:#D4A615;--accent-tint:#FCF1C7;--success:#167C3C;--success-tint:#DBF0E2;--warning:#B45309;--warning-tint:#FBEBD0;--danger:#B42318;--danger-tint:#FBDED9;--mark:#FCEA8B;--font-display:'Newsreader','Source Serif Pro',Georgia,serif;--font-ui:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--font-mono:'JetBrains Mono','SF Mono',Menlo,Consolas,monospace;--fs-xs:12px;--fs-sm:14px;--fs-base:17px;--fs-md:19px;--fs-lg:22px;--fs-xl:28px;--fs-2xl:36px;--fs-3xl:48px;--fs-4xl:64px;--lh-tight:1.05;--lh-snug:1.15;--lh-normal:1.45;--lh-body:1.6;--ls-display:-0.025em;--ls-heading:-0.015em;--ls-eyebrow:0.08em;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--fw-display:500;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;--radius-xs:4px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-pill:9999px;--shadow-xs:0 1px 0 rgba(11,18,32,.04),0 1px 2px rgba(11,18,32,.04);--shadow-sm:0 1px 2px rgba(11,18,32,.05),0 2px 8px rgba(11,18,32,.04);--shadow-md:0 4px 12px rgba(11,18,32,.08),0 2px 4px rgba(11,18,32,.04);--shadow-focus:0 0 0 2px var(--paper),0 0 0 4px var(--brand);--shadow-inset:inset 0 1px 2px rgba(11,18,32,.08);--ease-out:cubic-bezier(0.2,0.7,0.2,1);--ease-in-out:cubic-bezier(0.4,0,0.2,1);--dur-fast:120ms;--dur-base:200ms;--dur-slow:400ms;--container:1200px;--measure-prose:64ch;--measure-answer:48ch;--nav-h:64px}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{font-family:var(--font-ui);color:var(--fg-1);background:var(--paper);-webkit-font-smoothing:antialiased}
body{font-size:var(--fs-base);line-height:var(--lh-body)}
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:24px}
.wrap-narrow{max-width:800px;margin-inline:auto;padding-inline:24px}
.section{padding-block:96px}
.section-sm{padding-block:64px}
h1,.h1{font-family:var(--font-display);font-weight:500;font-size:clamp(30px,4vw,48px);line-height:1.08;letter-spacing:-0.02em;margin:0;color:var(--fg-1)}
.display{font-family:var(--font-display);font-weight:500;font-size:clamp(36px,5vw,64px);line-height:1.05;letter-spacing:-0.025em}
h2,.h2{font-family:var(--font-display);font-weight:500;font-size:clamp(24px,3vw,36px);line-height:1.15;letter-spacing:-0.015em;margin:0;color:var(--fg-1)}
h3,.h3{font-family:var(--font-ui);font-weight:700;font-size:22px;line-height:1.3;margin:0;color:var(--fg-1)}
h4{font-family:var(--font-ui);font-weight:600;font-size:18px;line-height:1.4;margin:0;color:var(--fg-1)}
p{margin:0}
ul,ol{margin:0;padding:0}
.lead{font-size:19px;line-height:1.5;color:var(--fg-2)}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);display:block}
.hl-mark{background-image:linear-gradient(180deg,transparent 62%,var(--mark) 62%,var(--mark) 92%,transparent 92%);padding:0 .05em}
a{color:var(--brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
::selection{background:var(--mark);color:var(--fg-1)}
.vc-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-ui);font-weight:600;font-size:15px;line-height:1;padding:11px 18px;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;text-decoration:none;transition:all var(--dur-fast) var(--ease-out);white-space:nowrap}
.vc-btn:hover{text-decoration:none}
.vc-btn-primary{background:var(--brand);color:#fff}
.vc-btn-primary:hover{background:var(--brand-hover);color:#fff}
.vc-btn-primary:active{background:var(--brand-pressed)}
.vc-btn-secondary{background:var(--card);color:var(--fg-1);border-color:var(--border-strong)}
.vc-btn-secondary:hover{background:var(--paper-2);border-color:var(--fg-3);color:var(--fg-1)}
.vc-btn-ghost{background:transparent;color:var(--fg-1);border:none}
.vc-btn-ghost:hover{background:rgba(11,18,32,.04);color:var(--fg-1)}
.vc-btn-lg{font-size:16px;padding:14px 22px}
.vc-btn-sm{font-size:13px;padding:7px 12px}
.vc-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md)}
.vc-card-hover{transition:all var(--dur-base) var(--ease-out)}
.vc-card-hover:hover{border-color:var(--border-strong);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
nav.site-nav{position:sticky;top:0;z-index:50;background:rgba(250,250,246,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color var(--dur-base),background var(--dur-base)}
nav.site-nav.scrolled{border-bottom-color:var(--border);background:rgba(250,250,246,.95)}
.nav-inner{height:var(--nav-h);display:flex;align-items:center;gap:4px}
.nav-links{display:flex;gap:2px;list-style:none;margin:0;padding:0;margin-left:24px}
.nav-links a{font-size:14px;font-weight:500;color:var(--fg-2);text-decoration:none;padding:6px 10px;border-radius:var(--radius-sm);transition:color var(--dur-fast),background var(--dur-fast);white-space:nowrap}
.nav-links a:hover{color:var(--fg-1);background:rgba(11,18,32,.04)}
.nav-links a.active{color:var(--fg-1);font-weight:600;background:rgba(11,18,32,.05)}
.spacer{flex:1}
.wm{display:inline-flex;align-items:baseline;font-family:var(--font-ui);font-weight:800;font-size:22px;letter-spacing:-0.04em;color:var(--fg-1);line-height:1;white-space:nowrap;text-decoration:none;flex-shrink:0}
.wm:hover{text-decoration:none;color:var(--fg-1)}
.wm-i{position:relative;display:inline-block}
.wm-i::before{content:'i';visibility:hidden}
.wm-dot{position:absolute;left:50%;top:-0.2em;transform:translateX(-50%);width:.28em;height:.28em;background:#F4C430;border-radius:50%}
.wm-bar{position:absolute;left:50%;top:.05em;transform:translateX(-50%);width:.13em;height:.65em;background:var(--fg-1);border-radius:1px}
.wm-inv{color:var(--fg-inverse)}
.wm-inv .wm-bar{background:var(--fg-inverse)}
.nav-item{position:relative}
.nav-item::after{content:'';display:none;position:absolute;top:100%;left:0;right:0;height:10px;z-index:99}
.nav-item:hover::after,.nav-item:focus-within::after{display:block}
.nav-dropdown{display:none;position:absolute;top:calc(100% + 6px);left:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:6px;min-width:240px;z-index:100}
.nav-item:hover .nav-dropdown,.nav-item:focus-within .nav-dropdown{display:block}
.nav-dropdown a{display:block;padding:9px 12px;font-size:14px;color:var(--fg-2);text-decoration:none;border-radius:var(--radius-sm);transition:background var(--dur-fast),color var(--dur-fast)}
.nav-dropdown a:hover{background:var(--paper-2);color:var(--fg-1)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--fg-1);align-items:center;justify-content:center}
.mobile-menu{display:none;position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;background:var(--paper);z-index:40;padding:20px 24px;overflow-y:auto;flex-direction:column;gap:4px;border-top:1px solid var(--border)}
.mobile-menu.open{display:flex}
.mobile-menu a{font-size:17px;font-weight:600;color:var(--fg-1);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--hairline);display:block}
.mobile-menu a.sub{font-size:15px;font-weight:500;color:var(--fg-3);padding-left:20px}
.direct-answer{background:var(--brand-tint);border:1px solid var(--brand-tint-2);border-radius:var(--radius-lg);padding:28px 32px;margin:32px 0}
.direct-answer-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-ink);margin-bottom:12px;display:block}
.direct-answer p{font-size:var(--fs-md);line-height:1.55;color:var(--fg-1);font-weight:500;margin:0;max-width:var(--measure-answer)}
.section-header{margin-bottom:48px}
.section-header .eyebrow{margin-bottom:14px}
.section-header h2{margin:0 0 14px}
.section-header p{color:var(--fg-2);font-size:17px;line-height:1.6;margin:0;max-width:64ch}
details.faq-item{border-bottom:1px solid var(--border)}
details.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;cursor:pointer;list-style:none;font-family:var(--font-display);font-size:19px;font-weight:500;letter-spacing:-0.015em;color:var(--fg-1)}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary::after{content:'+';flex-shrink:0;width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--paper-2);border-radius:var(--radius-sm);font-size:18px;color:var(--fg-2);transition:all var(--dur-fast)}
details.faq-item[open] summary::after{content:'−';background:var(--brand);color:#fff}
.faq-body{padding:0 40px 20px 0;font-size:15px;line-height:1.65;color:var(--fg-2);max-width:64ch}
.faq-answer{font-weight:700;color:var(--fg-1);display:block;margin-bottom:8px}
.vc-table-wrap{overflow-x:auto;border-radius:var(--radius-md);border:1px solid var(--border)}
.vc-table{width:100%;border-collapse:collapse;font-size:15px}
.vc-table th{background:var(--paper-2);text-align:left;padding:12px 16px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);border-bottom:2px solid var(--border-strong);white-space:nowrap}
.vc-table td{padding:14px 16px;border-bottom:1px solid var(--hairline);color:var(--fg-2);vertical-align:top}
.vc-table tr:last-child td{border-bottom:none}
.vc-table tr:nth-child(even) td{background:var(--paper-2)}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:var(--radius-pill);white-space:nowrap}
.badge-success{color:var(--success);background:var(--success-tint)}
.badge-brand{color:var(--brand);background:var(--brand-tint)}
.badge-accent{color:var(--accent-deep);background:var(--accent-tint)}
.badge-muted{color:var(--fg-3);background:var(--paper-3)}
.vc-label{display:block;font-size:12px;font-weight:700;color:var(--fg-2);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.vc-input{width:100%;font-family:var(--font-ui);font-size:15px;padding:12px 16px;background:var(--card);color:var(--fg-1);border:1px solid var(--border);border-radius:var(--radius-sm);outline:none;transition:border-color var(--dur-fast),box-shadow var(--dur-fast);box-sizing:border-box}
.vc-input:focus{border-color:var(--brand);box-shadow:var(--shadow-focus)}
.vc-input::placeholder{color:var(--fg-4)}
.vc-input-inv{background:rgba(255,255,255,.06);border-color:var(--border-on-ink);color:var(--fg-inverse)}
.vc-input-inv::placeholder{color:var(--fg-inverse-2)}
.vc-input-inv:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(244,196,48,.2)}
select.vc-input{cursor:pointer}
textarea.vc-input{resize:vertical;min-height:100px;line-height:1.5}
.page-hero{padding-top:80px;padding-bottom:64px}
.breadcrumb{display:flex;gap:6px;align-items:center;font-size:13px;color:var(--fg-3);margin-bottom:24px;flex-wrap:wrap}
.breadcrumb a{color:var(--fg-3);text-decoration:none}
.breadcrumb a:hover{color:var(--fg-1)}
.step-num{font-family:var(--font-mono);font-size:13px;color:var(--accent);margin-bottom:12px;letter-spacing:.05em}
.stat-num{font-family:var(--font-mono);font-size:28px;font-weight:600;letter-spacing:-0.02em;color:var(--brand)}
.stat-label{font-size:12px;color:var(--fg-3);margin-top:2px}
.cta-strip{background:var(--ink);border-radius:20px;padding:56px;display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
footer.site-footer{background:var(--ink);color:var(--fg-inverse);padding-block:56px 32px}
footer.site-footer a{color:var(--fg-inverse-2);text-decoration:none}
footer.site-footer a:hover{color:var(--fg-inverse)}
.footer-nav-heading{font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.footer-nav-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px}
.feature-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.feature-list li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--fg-2);line-height:1.5}
.feature-list li::before{content:'→';color:var(--brand);font-weight:700;flex-shrink:0;margin-top:1px}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:2px}
@media(max-width:960px){.cta-strip{grid-template-columns:1fr;padding:36px 28px}}
@media(max-width:768px){.nav-links{display:none!important}.nav-toggle{display:flex!important}.wrap{padding-inline:16px}.wrap-narrow{padding-inline:16px}.section{padding-block:64px}.section-sm{padding-block:48px}}
@media(max-width:600px){.cta-strip{padding:28px 20px}}

/* ── Post layout ──────────────────────────────────────────── */
.post-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 64px;
  align-items: start;
  padding-top: 48px;
  padding-bottom: 96px;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 24px;
}
.post-main { min-width: 0; }
.post-sidebar { position: sticky; top: calc(var(--nav-h) + 20px); display: flex; flex-direction: column; gap: 20px; }

/* ── Post header ──────────────────────────────────────────── */
.post-header { margin-bottom: 40px; }
.post-cats { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.post-cat { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); background: var(--brand-tint); padding: 4px 10px; border-radius: var(--radius-pill); text-decoration: none; transition: background var(--dur-fast); }
.post-cat:hover { background: var(--brand-tint-2); text-decoration: none; }
.post-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(28px, 4vw, 44px); line-height: 1.1; letter-spacing: -0.025em; color: var(--fg-1); margin: 0 0 20px; }
.post-meta { display: flex; align-items: center; gap: 20px; font-size: 13px; color: var(--fg-3); flex-wrap: wrap; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding-block: 14px; margin-bottom: 32px; }
.post-meta-item { display: flex; align-items: center; gap: 6px; }
.post-meta svg { flex-shrink: 0; }
.post-meta a { color: var(--fg-3); text-decoration: none; font-weight: 600; }
.post-meta a:hover { color: var(--fg-1); }
.post-meta-sep { color: var(--border-strong); }

/* ── Featured image ───────────────────────────────────────── */
.post-featured { width: 100%; aspect-ratio: 16/7; background: var(--paper-3); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; position: relative; margin-bottom: 40px; display: flex; align-items: center; justify-content: center; }
.post-featured img { width: 100%; height: 100%; object-fit: cover; }
.post-featured-placeholder { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--fg-4); }
.post-featured-placeholder svg { opacity: .4; }
.post-featured figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 16px; background: linear-gradient(transparent, rgba(11,18,32,.5)); color: rgba(255,255,255,.8); font-size: 12px; text-align: center; }

/* ── Post typography ──────────────────────────────────────── */
.post-content { font-size: 17px; line-height: 1.75; color: var(--fg-2); }
.post-content > * + * { margin-top: 1.4em; }
.post-content p { margin: 0; }
.post-content h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 3vw, 30px); line-height: 1.15; letter-spacing: -0.018em; color: var(--fg-1); margin: 2.4em 0 .6em; padding-top: 1.2em; border-top: 1px solid var(--hairline); }
.post-content h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.post-content h3 { font-family: var(--font-ui); font-weight: 700; font-size: 19px; line-height: 1.3; margin: 2em 0 .5em; }
.post-content h4 { font-family: var(--font-ui); font-weight: 600; font-size: 16px; color: var(--fg-1); margin: 1.6em 0 .4em; }
.post-content ul, .post-content ol { padding-left: 1.4em; display: flex; flex-direction: column; gap: .5em; }
.post-content ul li::marker { color: var(--brand); font-weight: 700; }
.post-content ol li::marker { color: var(--brand); font-weight: 700; font-family: var(--font-mono); }
.post-content li { padding-left: .2em; }
.post-content a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post-content a:hover { text-decoration-thickness: 2px; }
.post-content strong { color: var(--fg-1); font-weight: 700; }
.post-content em { font-style: italic; }
.post-content code { font-family: var(--font-mono); font-size: .88em; background: var(--paper-3); color: var(--fg-1); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border); }
.post-content hr { border: none; border-top: 1px solid var(--border); margin: 2.5em 0; }

/* blockquote */
.post-content blockquote { margin: 2em 0; padding: 20px 24px 20px 28px; border-left: 4px solid var(--brand); background: var(--brand-tint); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-family: var(--font-display); font-size: 19px; font-style: italic; line-height: 1.55; color: var(--brand-ink); }
.post-content blockquote cite { display: block; margin-top: 10px; font-family: var(--font-ui); font-style: normal; font-size: 13px; font-weight: 600; color: var(--fg-3); }

/* code block */
.post-content pre { background: var(--ink); color: #e2e8f0; font-family: var(--font-mono); font-size: 14px; line-height: 1.65; padding: 20px 24px; border-radius: var(--radius-md); overflow-x: auto; margin: 2em 0; }
.post-content pre code { background: none; border: none; padding: 0; font-size: inherit; color: inherit; }

/* figure / image */
.post-content figure { margin: 2.5em 0; }
.post-content figure img { max-width: 100%; height: auto; display: block; border-radius: var(--radius-md); }
.post-content figure .post-img-placeholder { width: 100%; aspect-ratio: 16/9; background: var(--paper-3); border: 1px solid var(--border); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--fg-4); font-size: 13px; gap: 8px; }
.post-content figcaption { font-size: 13px; color: var(--fg-3); text-align: center; margin-top: 10px; font-style: italic; }

/* table */
.post-content table { width: 100%; border-collapse: collapse; font-size: 15px; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin: 2em 0; }
.post-content th { background: var(--paper-2); text-align: left; padding: 10px 14px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); border-bottom: 2px solid var(--border-strong); }
.post-content td { padding: 12px 14px; border-bottom: 1px solid var(--hairline); color: var(--fg-2); vertical-align: top; }
.post-content tr:last-child td { border-bottom: none; }
.post-content tr:nth-child(even) td { background: var(--paper-2); }

/* special blocks */
.direct-answer { background: var(--brand-tint); border: 1px solid var(--brand-tint-2); border-radius: var(--radius-lg); padding: 24px 28px; margin: 2em 0; }
.direct-answer-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: 10px; display: block; }
.direct-answer p { font-size: 17px; line-height: 1.55; color: var(--fg-1); font-weight: 500; margin: 0; }

.callout { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px 22px; margin: 2em 0; display: flex; gap: 14px; align-items: flex-start; background: var(--card); }
.callout-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.callout-success { border-color: var(--success); background: var(--success-tint); }
.callout-success .callout-icon { background: rgba(22,124,60,.15); }
.callout-warning { border-color: var(--warning); background: var(--warning-tint); }
.callout-warning .callout-icon { background: rgba(180,83,9,.15); }
.callout strong { display: block; font-weight: 700; color: var(--fg-1); margin-bottom: 4px; }
.callout p { font-size: 15px; color: var(--fg-2); line-height: 1.6; margin: 0; }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 2em 0; }
.stat-card { background: var(--paper-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; text-align: center; }
.stat-card-num { font-family: var(--font-mono); font-size: 32px; font-weight: 600; letter-spacing: -0.02em; color: var(--brand); display: block; line-height: 1; margin-bottom: 6px; }
.stat-card-label { font-size: 12px; color: var(--fg-3); line-height: 1.4; }

.mid-cta { background: var(--ink); border-radius: var(--radius-lg); padding: 28px 32px; margin: 2.5em 0; display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.mid-cta p { font-size: 17px; color: var(--fg-inverse-2); line-height: 1.5; margin: 0; max-width: 46ch; }
.mid-cta strong { display: block; font-size: 20px; color: var(--fg-inverse); margin-bottom: 6px; font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; }

/* ── TOC sidebar widget ───────────────────────────────────── */
.toc-widget { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.toc-widget-head { padding: 14px 18px; background: var(--paper-2); border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.toc-list { list-style: none; padding: 10px 0; margin: 0; }
.toc-list li { border-bottom: 1px solid var(--hairline); }
.toc-list li:last-child { border-bottom: none; }
.toc-list a { display: flex; gap: 10px; align-items: baseline; padding: 9px 18px; font-size: 13px; color: var(--fg-2); text-decoration: none; transition: background var(--dur-fast), color var(--dur-fast); line-height: 1.4; }
.toc-list a:hover, .toc-list a.active { background: var(--brand-tint); color: var(--brand); text-decoration: none; }
.toc-num { font-family: var(--font-mono); font-size: 11px; color: var(--fg-4); flex-shrink: 0; }
.toc-list .toc-sub a { padding-left: 32px; font-size: 12px; color: var(--fg-3); }
.toc-list .toc-sub a:hover { color: var(--brand); }

/* ── Sidebar author widget ───────────────────────────────── */
.author-widget { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.author-widget-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--brand-tint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.author-widget-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.author-widget-name { font-weight: 700; font-size: 14px; color: var(--fg-1); }
.author-widget-role { font-size: 12px; color: var(--fg-3); }
.author-widget-bio { font-size: 13px; color: var(--fg-2); line-height: 1.55; }

/* ── Sidebar share widget ────────────────────────────────── */
.share-widget { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; }
.share-widget-head { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 12px; }
.share-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.share-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--fg-2); background: var(--paper-2); text-decoration: none; transition: all var(--dur-fast); cursor: pointer; }
.share-btn:hover { background: var(--fg-1); color: #fff; border-color: var(--fg-1); text-decoration: none; }
.share-btn-tg:hover { background: #229ED9; border-color: #229ED9; }
.share-btn-li:hover { background: #0A66C2; border-color: #0A66C2; }

/* ── Sidebar cta widget ──────────────────────────────────── */
.cta-widget { background: var(--brand); border-radius: var(--radius-md); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.cta-widget-title { font-size: 16px; font-weight: 700; color: #fff; line-height: 1.35; }
.cta-widget-sub { font-size: 13px; color: rgba(255,255,255,.8); line-height: 1.5; }

/* ── Post tags ───────────────────────────────────────────── */
.post-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); align-items: center; }
.post-tags-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); margin-right: 4px; }
.tag { font-size: 12px; font-weight: 500; color: var(--fg-3); background: var(--paper-2); border: 1px solid var(--border); padding: 4px 10px; border-radius: var(--radius-pill); text-decoration: none; transition: all var(--dur-fast); }
.tag:hover { background: var(--paper-3); color: var(--fg-1); text-decoration: none; }

/* ── Author bio ──────────────────────────────────────────── */
.author-bio { background: var(--paper-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; display: flex; gap: 20px; align-items: flex-start; margin-top: 56px; }
.author-bio-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--brand-tint); border: 3px solid var(--brand-tint-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.author-bio-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.author-bio-name { font-weight: 800; font-size: 16px; color: var(--fg-1); margin-bottom: 2px; }
.author-bio-role { font-size: 13px; color: var(--fg-3); margin-bottom: 10px; }
.author-bio-text { font-size: 15px; color: var(--fg-2); line-height: 1.65; }

/* ── Related posts ───────────────────────────────────────── */
.related-posts { margin-top: 64px; }
.related-posts h2 { font-family: var(--font-ui); font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--fg-1); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--border); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.related-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: all var(--dur-base) var(--ease-out); }
.related-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); transform: translateY(-2px); text-decoration: none; }
.related-thumb { aspect-ratio: 16/9; background: var(--paper-3); display: flex; align-items: center; justify-content: center; color: var(--fg-4); font-size: 12px; border-bottom: 1px solid var(--hairline); }
.related-thumb img { width: 100%; height: 100%; object-fit: cover; }
.related-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.related-cat { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.related-title { font-size: 14px; font-weight: 600; color: var(--fg-1); line-height: 1.4; }
.related-meta { font-size: 12px; color: var(--fg-3); margin-top: auto; }

/* ── Comments section ────────────────────────────────────── */
.comments-section { margin-top: 64px; }
.comments-section h2 { font-family: var(--font-ui); font-weight: 700; font-size: 18px; color: var(--fg-1); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 2px solid var(--border); }
.comment-item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--hairline); }
.comment-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--paper-3); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; font-size: 14px; color: var(--fg-3); }
.comment-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.comment-name { font-weight: 700; font-size: 14px; color: var(--fg-1); }
.comment-date { font-size: 12px; color: var(--fg-3); margin-left: 8px; }
.comment-reply { font-size: 12px; color: var(--brand); font-weight: 600; text-decoration: none; }
.comment-reply:hover { text-decoration: underline; }
.comment-text { font-size: 15px; color: var(--fg-2); line-height: 1.65; margin-top: 6px; }
.comment-form { margin-top: 36px; background: var(--paper-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; }
.comment-form h3 { font-size: 17px; font-weight: 700; color: var(--fg-1); margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── Post nav ────────────────────────────────────────────── */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border); }
.post-nav-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px 20px; text-decoration: none; color: inherit; transition: all var(--dur-base); }
.post-nav-item:hover { border-color: var(--brand); background: var(--brand-tint); text-decoration: none; }
.post-nav-dir { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.post-nav-title { font-size: 14px; font-weight: 600; color: var(--fg-1); line-height: 1.4; }
.post-nav-item.next { text-align: right; }

/* Logo styling for vitkovskyi.com */
.wm-dot-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 8px;
  margin-inline: 1px;
}
.wm-dot {
  width: 6px;
  height: 6px;
  background-color: var(--accent);
  border-radius: 50%;
}
.wm-dot-wrap-inv {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 8px;
  margin-inline: 1px;
}
.wm-dot-wrap-inv::after {
  content: '';
  width: 6px;
  height: 6px;
  background-color: var(--success);
  border-radius: 50%;
}
#reading-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  height: 3px;
  width: 0%;
  background: var(--brand);
  transition: width .1s linear;
  pointer-events: none;
}
@media (max-width: 900px) {
  .post-layout { grid-template-columns: 1fr; gap: 40px; }
  .post-sidebar { position: static; }
  .related-grid { grid-template-columns: 1fr 1fr; }
  .stat-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .related-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .post-nav { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; }
}