/* VanillaDev Global Shell · Phase 2.4 · 2026-08-20 */
:root{--vd-shell-paper:#fbfaf6;--vd-shell-line:rgba(8,91,68,.14);--vd-shell-text:#52655d;--vd-shell-deep:#063f33;--vd-shell-green:#087657;--vd-shell-dark:#071813;--vd-shell-cream:#f5f0e7}
.vd-shell-header,.vd-shell-footer,.vd-mobile-panel{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.vd-shell-header{min-height:92px;padding:0 clamp(22px,4.5vw,76px);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;border-bottom:1px solid var(--vd-shell-line);background:rgba(251,250,246,.96);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);position:sticky;top:0;z-index:1000;color:#1f2925}
.vd-brand{display:inline-flex;align-items:center;gap:12px;width:max-content;color:inherit;text-decoration:none;font-weight:680;white-space:nowrap}
.vd-brand-mark{width:29px;height:29px;display:block;flex:none;background:url('/brand/vanilladev-v-evergreen.png') center/contain no-repeat}
.vd-brand-name{font-size:19px;letter-spacing:-.035em}.vd-brand-name span{color:var(--vd-shell-green);font-weight:500}
.vd-shell-nav{justify-self:center;display:flex;align-items:center;gap:clamp(18px,2.3vw,38px);font-size:13px;color:var(--vd-shell-text)}
.vd-shell-nav a{position:relative;display:inline-flex;align-items:center;gap:9px;min-height:92px;color:inherit;text-decoration:none;white-space:nowrap;transition:color .18s ease}
.vd-shell-nav a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--vd-shell-green);transform:scaleX(0);transform-origin:center;transition:transform .18s ease}
.vd-shell-nav a:hover,.vd-shell-nav a:focus-visible,.vd-shell-nav a[aria-current="page"]{color:var(--vd-shell-deep)}
.vd-shell-nav a[aria-current="page"]:after{transform:scaleX(1)}
.vd-nav-arrow,.vd-action-arrow{position:relative;display:inline-block;flex:none;width:13px;height:9px;color:currentColor;opacity:.58;transition:transform .18s ease,opacity .18s ease}
.vd-nav-arrow:before,.vd-action-arrow:before{content:"";position:absolute;left:0;top:4px;width:10px;height:1px;background:currentColor}
.vd-nav-arrow:after,.vd-action-arrow:after{content:"";position:absolute;right:0;top:1px;width:5px;height:5px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.vd-shell-nav a:hover .vd-nav-arrow,.vd-shell-nav a:focus-visible .vd-nav-arrow{opacity:1;transform:translateX(2px)}
.vd-action-arrow--up{transform:rotate(-45deg)}
.vd-shell-cta{justify-self:end;display:inline-flex;align-items:center;gap:11px;padding:15px 20px;background:var(--vd-shell-green);color:#fff!important;text-decoration:none;font-size:13px;font-weight:650;box-shadow:0 12px 28px rgba(8,118,87,.16);transition:background .18s ease,transform .18s ease}
.vd-shell-cta:hover,.vd-shell-cta:focus-visible{background:var(--vd-shell-deep);transform:translateY(-1px)}.vd-shell-cta .vd-action-arrow{opacity:.9}
.vd-menu-toggle{display:none;width:44px;height:44px;padding:0;border:1px solid var(--vd-shell-line);background:transparent;place-content:center;gap:6px;cursor:pointer}.vd-menu-toggle span{display:block;width:18px;height:1px;background:var(--vd-shell-deep);transition:transform .2s ease}.vd-menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}.vd-menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.vd-mobile-panel{display:none;position:fixed;z-index:999;inset:78px 0 0;background:rgba(251,250,246,.99);padding:28px 22px 40px;overflow:auto}.vd-mobile-panel.is-open{display:block}.vd-mobile-panel nav{display:grid;border-top:1px solid var(--vd-shell-line)}.vd-mobile-panel nav a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 2px;border-bottom:1px solid var(--vd-shell-line);color:var(--vd-shell-deep);text-decoration:none;font-size:18px}.vd-mobile-panel nav a[aria-current="page"]{color:var(--vd-shell-green);font-weight:650}.vd-mobile-panel .vd-mobile-cta{margin-top:26px;display:flex;align-items:center;justify-content:space-between;padding:17px 18px;background:var(--vd-shell-green);color:#fff;text-decoration:none;font-weight:650}
.vd-shell-footer{background:var(--vd-shell-dark);color:#dce6e1;padding:clamp(48px,6vw,76px) clamp(22px,4.5vw,76px) 30px;border-top:1px solid rgba(255,255,255,.08)}
.vd-footer-grid{display:grid;grid-template-columns:minmax(230px,1.35fr) repeat(4,minmax(120px,.55fr));gap:clamp(28px,4vw,70px)}
.vd-footer-brand .vd-brand-mark{background-image:url('/brand/vanilladev-v-beige.png')}.vd-footer-brand .vd-brand-name span{color:#d7c89f}.vd-footer-brand{color:#fff}.vd-footer-intro p{max-width:330px;margin:22px 0 0;color:#a9bbb3;font-size:13px;line-height:1.7}.vd-footer-col strong{display:block;margin-bottom:17px;color:#789287;font:600 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase}.vd-footer-col nav{display:grid;gap:12px}.vd-footer-col a{width:max-content;max-width:100%;color:#c9d5d0;text-decoration:none;font-size:13px;transition:color .18s}.vd-footer-col a:hover,.vd-footer-col a:focus-visible{color:#fff}.vd-footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:52px;padding-top:24px;border-top:1px solid rgba(255,255,255,.09);color:#7f968c;font-size:11px}.vd-footer-top{display:inline-flex;align-items:center;gap:9px;color:#aabbb4!important;text-decoration:none}
/* Replace legacy arrow art everywhere with one restrained arrow language. */
.ui-arrow{--arrow-rotation:0deg!important;position:relative!important;display:inline-block!important;flex:none!important;width:13px!important;height:9px!important;transform:rotate(var(--vd-arrow-rotation,0deg))!important;color:currentColor!important;opacity:.68!important;background:none!important}
.ui-arrow:before{content:""!important;position:absolute!important;left:0!important;top:4px!important;width:10px!important;height:1px!important;background:currentColor!important}
.ui-arrow:after{content:""!important;position:absolute!important;right:0!important;top:1px!important;width:5px!important;height:5px!important;border:0!important;border-top:1px solid currentColor!important;border-right:1px solid currentColor!important;transform:rotate(45deg)!important;background:none!important}
.ui-arrow-up-right{--vd-arrow-rotation:-45deg}.ui-arrow-down-right{--vd-arrow-rotation:45deg}.ui-arrow-right{--vd-arrow-rotation:0deg}.ui-arrow-up{--vd-arrow-rotation:-90deg}.ui-arrow-down{--vd-arrow-rotation:90deg}
/* Homepage had a fixed 88px Next header before; compensate for the new in-flow shell. */
body.static-home .hero{min-height:calc(100svh - 92px)!important;padding-top:42px!important}
/* Legal pages previously reserved space for a fixed header. */
body.vd-legal-page .legal-document{padding-top:92px!important}
@media(max-width:1050px){.vd-shell-nav{gap:18px}.vd-shell-nav a{font-size:12px}.vd-shell-header{padding-inline:26px}.vd-shell-cta{padding:14px 16px}}
@media(max-width:900px){.vd-shell-header{min-height:78px;grid-template-columns:auto 1fr auto auto;gap:12px;padding:0 16px}.vd-shell-nav{display:none}.vd-shell-cta{margin-left:auto}.vd-menu-toggle{display:grid}.vd-mobile-panel{inset-top:78px}.vd-footer-grid{grid-template-columns:1.4fr 1fr 1fr}.vd-footer-intro{grid-column:1/-1}.vd-footer-bottom{align-items:flex-start;flex-direction:column}.vd-brand-name{font-size:17px}body.static-home .hero{min-height:calc(100svh - 78px)!important;padding-top:34px!important}}
@media(max-width:620px){.vd-shell-header{grid-template-columns:auto 1fr auto}.vd-shell-cta{display:none}.vd-menu-toggle{grid-column:3}.vd-footer-grid{grid-template-columns:1fr 1fr}.vd-footer-intro{grid-column:1/-1}.vd-shell-footer{padding-inline:20px}.vd-mobile-panel{padding-inline:18px}}

/* Phase 2.4: final primary information architecture */
.vd-shell-nav{gap:clamp(14px,1.75vw,30px)}
.vd-shell-nav a[aria-current="page"] .vd-nav-arrow{opacity:1}
@media(max-width:1180px){.vd-shell-header{gap:22px;padding-inline:24px}.vd-shell-nav{gap:14px}.vd-shell-nav a{font-size:12px}.vd-shell-cta{padding-inline:16px}}