/* Shared navigation and audience expansion; inherits primary marketing tokens. */
[hidden] { display:none !important; }
.vs-nav { width:var(--page-width, min(92%, 1760px)); margin:12px auto 0; padding:12px 22px; min-height:80px; display:flex; align-items:center; gap:30px; position:sticky; top:12px; z-index:110; background:rgba(18,18,18,.97); border:1px solid #303030; border-radius:12px; backdrop-filter:blur(16px); }
.vs-nav .brand { flex-shrink:0; }
.vs-navigation { display:flex; align-items:center; gap:clamp(15px,2vw,32px); flex:1; }
.vs-trigger,.vs-direct,.vs-actions>a:not(.btn) { font:500 13px Inter,sans-serif; color:#ddd; white-space:nowrap; }
.vs-trigger { display:flex; align-items:center; gap:8px; border:0; background:transparent; padding:18px 0; cursor:pointer; }
.vs-trigger span { color:#888; transition:transform .18s; }
.vs-trigger[aria-expanded=true] { color:var(--accent); }
.vs-trigger[aria-expanded=true] span { transform:rotate(180deg); }
.vs-actions { margin-left:auto; display:flex; align-items:center; gap:24px; }
.vs-actions .btn { font-size:13px; white-space:nowrap; }
.vs-panel { position:absolute; top:calc(100% + 8px); left:0; right:0; display:grid; grid-template-columns:.85fr 2fr; background:#171717; border:1px solid #353535; border-radius:12px; box-shadow:0 30px 65px #0009; overflow:hidden; animation:vs-fade .18s ease; }
.vs-panel::before { content:''; position:absolute; left:0;right:0;top:-12px;height:12px; }
.vs-feature { background:linear-gradient(135deg,#2a211b,#171717); padding:35px; }
.vs-feature h2 { font-size:27px; font-weight:500; line-height:1.15; letter-spacing:-.04em; margin:20px 0; max-width:18ch; }
.vs-feature p { font-size:14px; line-height:1.7; color:#aaa; max-width:30ch; }
.vs-menu-links { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:24px; }
.vs-menu-links a { display:block; padding:18px; border-radius:7px; }
.vs-menu-links a:hover { background:#242424; }
.vs-menu-links strong { display:block; font-size:15px; font-weight:500; margin-bottom:7px; }
.vs-menu-links span { display:block; color:#aaa; font-size:13px; line-height:1.6; }
.vs-nav a[aria-current=page] { color:var(--accent); }
.vs-toggle { display:none; }
:where(.vs-nav,.vs-footer,.vs-page,.vs-section) :is(a,button,summary):focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.vs-skip { position:fixed; left:15px; top:-100px; z-index:200; background:var(--accent); color:#111; padding:15px; }
.vs-skip:focus { top:10px; }
.vs-wrap { width:var(--page-width, min(92%, 1760px)); max-width:1440px; margin:auto; }
.vs-crumb { display:flex; gap:12px; align-items:center; color:#999; font:11px 'JetBrains Mono',monospace; padding:35px 0 0; flex-wrap:wrap; }
.vs-crumb a:hover { color:var(--accent); }
.vs-label { display:block; font:500 11px/1.6 'JetBrains Mono',monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.vs-hero { display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:clamp(30px,5vw,85px); padding:60px 0 85px; }
.vs-hero h1 { font-size:clamp(43px,4.6vw,78px); line-height:1.03; letter-spacing:-.055em; font-weight:600; margin:22px 0 28px; text-wrap:balance; }
.vs-hero h1 em { font-style:normal; color:var(--accent); }
.vs-hero p { font-size:clamp(17px,1.4vw,22px); line-height:1.65; color:#b9b9b9; max-width:44ch; margin:0 0 30px; }
.vs-hero figure { margin:0; position:relative; aspect-ratio:1/1.07; border-radius:12px; overflow:hidden; background:#151515; }
.vs-hero img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.vs-hero figure::after { content:''; position:absolute; inset:55% 0 0; background:linear-gradient(transparent,#000b); }
.vs-hero figcaption { position:absolute; left:26px; right:26px; bottom:25px; z-index:1; font:11px/1.6 'JetBrains Mono',monospace; color:#fff; max-width:32ch; }
.vs-section { padding:80px 0; border-top:1px solid #282828; }
.vs-heading { display:grid; grid-template-columns:1fr 2fr; gap:30px; align-items:start; margin-bottom:42px; }
.vs-heading h2 { font-size:clamp(30px,3.2vw,52px); line-height:1.12; font-weight:500; letter-spacing:-.045em; margin:0; max-width:24ch; text-wrap:balance; }
.vs-heading .vs-label { margin-top:8px; }
.vs-prose { font-size:clamp(17px,1.4vw,21px); line-height:1.8; color:#b5b5b5; max-width:75ch; margin:0 0 30px; }
.vs-light { background:#efeee9; color:#1c201b; border-color:#ddd; }
.vs-light .vs-label { color:#a84200; }
.vs-light .vs-prose,.vs-light .vs-card p,.vs-light .vs-steps p { color:#555b52; }
.vs-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:32px; }
.vs-card { display:flex; flex-direction:column; position:relative; padding:32px; border:1px solid #363636; border-radius:10px; background:#151515; transition:transform .2s,border-color .2s; }
.vs-card:hover { transform:translateY(-4px); border-color:var(--accent); }
.vs-card h3 { font-size:clamp(23px,2vw,32px); letter-spacing:-.04em; font-weight:500; line-height:1.2; margin:24px 0 15px; }
.vs-card p { font-size:15px; color:#aaa; line-height:1.75; margin:0 0 30px; }
.vs-arrow { color:var(--accent); font-size:25px; margin-top:auto; }
.vs-light .vs-card { background:#f8f7f3; border-color:#d6d6cf; }
.vs-light .vs-arrow { color:#a84200; }
.vs-steps { list-style:none; padding:0; margin:0; }
.vs-steps li { display:grid; grid-template-columns:1fr 2fr; gap:30px; padding:32px 0; border-top:1px solid #333; }
.vs-steps h3 { font-size:clamp(24px,2.2vw,34px); font-weight:500; line-height:1.2; letter-spacing:-.035em; margin:0 0 16px; }
.vs-steps p { font-size:17px; line-height:1.8; color:#aaa; max-width:65ch; margin:0; }
.vs-light .vs-steps li { border-color:#cccfc5; }
.vs-faq { margin-top:32px; max-width:1000px; }
.vs-faq details { border-top:1px solid #3b3b3b; }
.vs-faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:20px; padding:24px 0; font-size:20px; line-height:1.5; letter-spacing:-.02em; }
.vs-faq summary::-webkit-details-marker { display:none; }
.vs-faq summary span { color:var(--accent); flex-shrink:0; }
.vs-faq details[open] summary span { transform:rotate(45deg); }
.vs-faq p { margin:0; padding:0 35px 28px 0; color:#aaa; font-size:16px; line-height:1.8; max-width:80ch; }
.vs-faq p a { text-decoration:underline; text-underline-offset:4px; }
.vs-light .vs-faq details { border-color:#c9cdc3; }
.vs-light .vs-faq p { color:#555b52; }
.vs-filters { display:flex; flex-wrap:wrap; gap:10px; }
.vs-filters button { font:500 14px Inter,sans-serif; background:transparent; border:1px solid #b5b7af; border-radius:40px; padding:12px 20px; color:#1c201b; cursor:pointer; }
.vs-filters button[aria-pressed=true] { color:#fff; background:#20251e; border-color:#20251e; }
.vs-resource-count { font:11px 'JetBrains Mono',monospace; margin-top:24px; color:#555b52; }
.vs-footer { width:var(--page-width, min(92%, 1760px)); max-width:1440px; margin:0 auto; padding:55px 0; border-top:1px solid #303030; display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:30px; font-size:13px; color:#aaa; }
.vs-footer>div { display:flex; flex-direction:column; align-items:flex-start; gap:15px; }
.vs-footer p { line-height:1.7; margin:5px 0; }
.vs-footer strong { color:#eee; font-weight:500; margin:12px 0 4px; }
.vs-footer a:hover { color:var(--accent); }
@keyframes vs-fade { from {opacity:0;transform:translateY(-5px)} to {opacity:1;transform:translateY(0)} }
@media(min-width:1600px) { .vs-nav { max-width:1760px; } }
@media(max-width:1150px) {
 .vs-nav { flex-wrap:wrap; gap:0; padding:12px 18px; }
 .vs-toggle { display:flex; align-items:center; gap:20px; margin-left:auto; padding:10px; background:transparent; color:#eee; border:1px solid #444; border-radius:6px; font:14px Inter,sans-serif; cursor:pointer; }
 .vs-navigation { display:none; flex-basis:100%; flex-direction:column; align-items:stretch; gap:0; padding:16px 0 8px; max-height:75svh; overflow:auto; }
 .vs-nav.is-open .vs-navigation { display:flex; }
 .vs-trigger,.vs-direct { width:100%; padding:18px 8px; font-size:16px; }
 .vs-trigger { justify-content:space-between; }
 .vs-panel { position:static; display:block; border-radius:8px; box-shadow:none; }
 .vs-feature { display:none; }
 .vs-menu-links { padding:8px; }
 .vs-actions { margin:16px 8px 0; justify-content:space-between; }
}
@media(max-width:760px) {
 .vs-nav { top:8px; min-height:68px; margin-top:8px; }
 .vs-nav .brand-wordmark { width:154px; height:34px; }
 .vs-hero { grid-template-columns:1fr; padding:35px 0 48px; gap:35px; }
 .vs-hero h1 { font-size:clamp(42px,10vw,65px); }
 .vs-hero figure { aspect-ratio:1.2; }
 .vs-crumb { padding-top:24px; font-size:10px; }
 .vs-section { padding:48px 0; }
 .vs-heading { grid-template-columns:1fr; gap:18px; margin-bottom:30px; }
 .vs-cards { grid-template-columns:1fr; }
 .vs-card { padding:27px; }
 .vs-steps li { grid-template-columns:32px 1fr; gap:18px; padding:26px 0; }
 .vs-steps p { font-size:16px; }
 .vs-faq summary { font-size:18px; }
 .vs-footer { grid-template-columns:1fr 1fr; gap:30px 20px; }
 .vs-footer>div:first-child { grid-column:1/-1; }
 .vs-menu-links { grid-template-columns:1fr; gap:0; }
}
@media(prefers-reduced-motion:reduce) { .vs-panel { animation:none; } .vs-card,.vs-trigger span { transition:none; } }
.vs-page main .btn::after { content:none; }

.vs-nav .brand-wordmark,.vs-footer .brand-wordmark { display:block; width:192px; height:42px; object-fit:cover; object-position:center; }
@media(min-width:761px) { .vs-cards:has(> :nth-child(4):last-child), .vs-cards:has(> :nth-child(2):last-child) { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:760px) { .vs-nav .brand-wordmark { width:154px; height:34px; } }

/* Progressive enhancement: all destinations remain available if JavaScript fails. */
.vs-nav:not(.vs-enhanced) { position:relative; top:auto; align-items:flex-start; flex-wrap:wrap; }
.vs-nav:not(.vs-enhanced) .vs-toggle,
.vs-nav:not(.vs-enhanced) .vs-trigger { display:none; }
.vs-nav:not(.vs-enhanced) .vs-navigation { display:flex; flex-basis:100%; flex-direction:column; align-items:stretch; gap:18px; max-height:none; overflow:visible; }
.vs-nav:not(.vs-enhanced) .vs-panel[hidden] { display:grid !important; position:static; box-shadow:none; animation:none; }
.vs-nav:not(.vs-enhanced) .vs-feature { display:block; }
.vs-nav:not(.vs-enhanced) .vs-actions { margin:0; justify-content:flex-start; }
@media(max-width:760px) {
 .vs-nav:not(.vs-enhanced) .vs-panel[hidden] { display:block !important; }
 .vs-nav:not(.vs-enhanced) .vs-feature { padding:22px; }
 .vs-nav:not(.vs-enhanced) .vs-feature h2 { font-size:22px; }
}
/* Short definitions, role examples and guide details added after content review. */
.vs-answer { border-top:1px solid #383838; border-bottom:1px solid #383838; padding:28px 0; margin:0 0 64px; display:grid; grid-template-columns:1fr 2fr; gap:30px; }
.vs-answer p { margin:0; max-width:75ch; color:#c8c8c8; font-size:17px; line-height:1.8; }
.vs-inline-links { display:flex; flex-wrap:wrap; gap:18px 30px; margin:28px 0 0; }
.vs-inline-links a { font-size:14px; color:var(--accent); line-height:1.6; text-decoration:underline; text-underline-offset:5px; }
.vs-inline-links a:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
.vs-table-wrap { overflow-x:auto; }
.vs-work-table { border-collapse:collapse; width:100%; table-layout:fixed; }
.vs-work-table caption { caption-side:bottom; text-align:left; font-size:12px; line-height:1.7; color:#aaa; padding:20px 0 0; }
.vs-work-table th,.vs-work-table td { padding:24px 20px 24px 0; text-align:left; vertical-align:top; border-bottom:1px solid #333; font-size:16px; line-height:1.75; }
.vs-work-table thead th { font:500 11px/1.6 'JetBrains Mono',monospace; text-transform:uppercase; color:var(--accent); letter-spacing:.06em; }
.vs-work-table tbody th { font-weight:500; color:#eee; }
.vs-work-table td { color:#aaa; }
.vs-hero .vs-byline { font-size:12px; color:#999; margin-top:-12px; line-height:1.6; }
.vs-byline a { text-decoration:underline; text-underline-offset:3px; }
.vs-example-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; }
.vs-example-grid article { padding:28px 0; border-top:1px solid #333; }
.vs-example-grid h3 { font-size:25px; line-height:1.25; font-weight:500; letter-spacing:-.03em; }
.vs-example-grid p,.vs-handoff-example p { font-size:16px; line-height:1.8; color:#aaa; }
.vs-caption { color:#999; font-size:12px; line-height:1.7; }
.vs-handoff-example { display:grid; grid-template-columns:1fr 1fr 1fr; gap:30px; margin-bottom:35px; }
.vs-handoff-example>div { border-top:1px solid #444; padding-top:24px; }
.vs-handoff-example blockquote { margin:20px 0; font-size:22px; line-height:1.6; letter-spacing:-.02em; }
.vs-buyer-note { padding:38px 0; border-bottom:1px solid #393939; }
.vs-buyer-note h2 { font-size:32px; line-height:1.2; font-weight:500; letter-spacing:-.035em; }
.vs-buyer-note p { color:#aaa; font-size:17px; line-height:1.8; }
@media(max-width:760px){
 .vs-answer { grid-template-columns:1fr; gap:16px; margin-bottom:42px; }
 .vs-example-grid,.vs-handoff-example { grid-template-columns:1fr; gap:12px; }
 .vs-work-table { table-layout:auto; min-width:570px; }
 .vs-work-table th,.vs-work-table td { font-size:14px; padding:18px 20px 18px 0; }
}

/* Keep industry examples readable without horizontal swiping. */
@media(max-width:760px){.vs-table-wrap{overflow:visible}.vs-work-table{min-width:0;display:block}.vs-work-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.vs-work-table tbody,.vs-work-table tr{display:block}.vs-work-table tr{padding:16px 0;border-bottom:1px solid #303030}.vs-work-table tbody th,.vs-work-table td{display:block;border:0;padding:9px 0}.vs-work-table tbody th{font-size:21px}.vs-work-table td::before{content:attr(data-label);display:block;font-family:'JetBrains Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#ff6b00;margin-bottom:6px}.vs-work-table caption{display:block}}