/* The one site header and footer (templates/partials/site_header.html, site_footer.html;
   PLAN §6.1, §6.9). Self-contained, so it renders the same on the marketing pages, Help,
   Contact, the legal pages and sign-in, whatever each page's own stylesheet defines. */
/* The header (POLISH.md finding 6): 64 px, one family of controls. Text links, then one ghost pill
   ("Sign up"), and the menu button the same pill's round sibling. The page's own call to action is
   the one filled button in each screen. Over an ink first screen the header is ink too, so the first
   screen reads as one surface. */
.vg-site-header{position:sticky;top:0;z-index:60;width:100%;font-family:var(--ds-font-sans,Inter,system-ui,sans-serif);--vg-h-text:var(--ds-gray-700,#334155);--vg-h-strong:var(--ds-gray-900,#0e1525);--vg-h-line:var(--ds-gray-200,#e3e8ef);--vg-h-pill:var(--ds-gray-300,#cdd5e0);--vg-h-hover:var(--ds-gray-100,#eef2f7)}
.vg-site-nav{border-bottom:1px solid var(--vg-h-line);background:rgba(255,255,255,.84);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5)}
.vg-site-inner{box-sizing:border-box;width:var(--ds-shell,min(1200px,calc(100% - 2.5rem)));margin-inline:auto;min-height:var(--ds-header,64px);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.vg-site-brand{display:inline-flex;align-items:center;flex-shrink:1;min-width:0;text-decoration:none;border-radius:var(--ds-radius-sm,8px)}
.vg-site-brand img{display:block;height:34px;width:auto}
.vg-site-brand .vg-site-logo-ink{display:none}
.vg-site-links{display:flex;align-items:center;gap:1.75rem;font-size:.875rem;font-weight:500;letter-spacing:-.005em}
.vg-site-links a,.vg-site-text{color:var(--vg-h-text);text-decoration:none;transition:color var(--ds-dur-fast,.12s) ease}
.vg-site-links a:hover,.vg-site-text:hover{color:var(--vg-h-strong)}
.vg-site-actions{display:flex;align-items:center;gap:1.5rem;flex-shrink:0}
.vg-site-actions form{margin:0}
.vg-site-text{font-size:.875rem;font-weight:500}
.vg-site-btn,.vg-site-ghost{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 1rem;border-radius:999px;font:inherit;font-size:.875rem;font-weight:600;letter-spacing:-.005em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background var(--ds-dur-fast,.12s) ease,border-color var(--ds-dur-fast,.12s) ease}
.vg-site-btn,.vg-site-ghost{border:1px solid var(--vg-h-pill);background:transparent;color:var(--vg-h-strong)}
.vg-site-btn:hover,.vg-site-ghost:hover{background:var(--vg-h-hover)}
.vg-site-burger,.vg-site-close{box-sizing:border-box;width:40px;height:40px;align-items:center;justify-content:center;background:transparent;border:1px solid var(--vg-h-pill);border-radius:999px;cursor:pointer;flex-shrink:0;color:var(--vg-h-strong);padding:0;transition:background var(--ds-dur-fast,.12s) ease}
.vg-site-burger:hover,.vg-site-close:hover{background:var(--vg-h-hover)}
.vg-site-burger{display:none}
.vg-site-close{display:flex}
.vg-site-burger svg,.vg-site-close svg{width:18px;height:18px}
.vg-site-header :is(a,button):focus-visible{outline:none;box-shadow:var(--ds-ring,0 0 0 3px rgba(61,126,245,.5))}
/* The current page (FIX-ROUND.md F1.8, F1.10): its link in the strong colour with an accent underline;
   on sign-up, the Sign up pill shows as active rather than inviting a click to the same page. */
.vg-site-links a[aria-current="page"],.vg-site-text[aria-current="page"]{color:var(--vg-h-strong);text-decoration:underline;text-decoration-color:var(--vg-h-accent);text-decoration-thickness:2px;text-underline-offset:.55em}
.vg-site-header{--vg-h-accent:var(--ds-accent,#2563eb)}
.vg-site-btn[aria-current="page"]{border-color:var(--vg-h-strong);background:var(--vg-h-hover);cursor:default}
.vg-site-menu-links a[aria-current="page"]{background:var(--ds-gray-50,#f6f8fb);box-shadow:inset 3px 0 0 var(--ds-accent,#2563eb)}
/* Over an ink first screen (the page sets body.vg-ink-top). */
body.vg-ink-top .vg-site-header{--vg-h-accent:var(--ds-accent-on-ink,#7aa7ff);--vg-h-text:var(--ds-ink-text-2,#c3cddb);--vg-h-strong:#fff;--vg-h-line:rgba(148,163,184,.12);--vg-h-pill:rgba(148,163,184,.3);--vg-h-hover:rgba(255,255,255,.07)}
body.vg-ink-top .vg-site-nav{background:rgba(6,9,18,.96)}
body.vg-ink-top .vg-site-nav .vg-site-brand img{display:none}
body.vg-ink-top .vg-site-nav .vg-site-brand .vg-site-logo-ink{display:block}
body.vg-ink-top .vg-site-header :is(a,button):focus-visible{box-shadow:var(--ds-ring-ink,0 0 0 3px rgba(122,167,255,.75))}
/* The menu on a phone. */
.vg-site-menu{position:fixed;inset:0;z-index:100;display:none;flex-direction:column;background:var(--ds-white,#fff);opacity:0;pointer-events:none;font-family:var(--ds-font-sans,Inter,system-ui,sans-serif)}
.vg-site-menu.is-open{display:flex;opacity:1;pointer-events:auto}
.vg-site-menu-header{display:flex;align-items:center;justify-content:space-between;padding:0 1.25rem;min-height:var(--ds-header,64px);border-bottom:1px solid var(--ds-gray-200,#e3e8ef)}
.vg-site-menu .vg-site-close{border-color:var(--ds-gray-300,#cdd5e0);color:var(--ds-gray-900,#0e1525)}
.vg-site-menu-links{display:flex;flex-direction:column;gap:2px;padding:.75rem 1rem;overflow-y:auto}
.vg-site-menu-links a{display:block;padding:.85rem .75rem;border-radius:var(--ds-radius-md,12px);font-size:1.0625rem;font-weight:550;letter-spacing:-.01em;color:var(--ds-gray-900,#0e1525);text-decoration:none}
.vg-site-menu-links a:hover{background:var(--ds-gray-50,#f6f8fb)}
.vg-site-menu-actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:auto;padding:1rem 1.25rem calc(1rem + env(safe-area-inset-bottom,0px));border-top:1px solid var(--ds-gray-200,#e3e8ef)}
.vg-site-menu-actions .vg-site-btn,.vg-site-menu-actions .vg-site-ghost,.vg-site-menu-actions form,.vg-site-menu-actions form button{width:100%;min-height:44px;color:var(--ds-gray-900,#0e1525);border-color:var(--ds-gray-300,#cdd5e0)}
.vg-site-menu-actions .vg-site-btn{background:var(--ds-accent,#2563eb);border-color:var(--ds-accent,#2563eb);color:#fff}
@media (max-width:860px){.vg-site-links,.vg-site-text{display:none}.vg-site-burger{display:flex}.vg-site-actions{gap:.5rem}}
@media (max-width:420px){.vg-site-brand img{height:30px}.vg-site-btn{padding:0 .9rem}}
/* The footer (POLISH.md finding 22): the brand and four columns on one grid, small caps headings, the
   risk and billing statements in a legal row under a hairline. */
.vg-site-footer{border-top:1px solid var(--ds-gray-200,#e3e8ef);background:var(--ds-gray-25,#fbfcfe);color:var(--ds-gray-600,#4a5568);font-family:var(--ds-font-sans,Inter,system-ui,sans-serif);font-size:.875rem}
.vg-site-footer-grid{box-sizing:border-box;width:var(--ds-shell,min(1200px,calc(100% - 2.5rem)));margin-inline:auto;padding:4rem 0 3rem;display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:2.5rem 2rem}
.vg-site-footer strong{display:block;margin-bottom:.85rem;color:var(--ds-gray-900,#0e1525);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.vg-site-footer a{display:block;margin:.6rem 0;color:var(--ds-gray-600,#4a5568);font-weight:500;line-height:1.35;text-decoration:none;transition:color var(--ds-dur-fast,.12s) ease}
.vg-site-footer a:hover{color:var(--ds-gray-900,#0e1525)}
.vg-site-footer .vg-site-brand img{height:32px}
.vg-site-footer-brand p{max-width:21rem;margin:1rem 0 0;color:var(--ds-gray-600,#4a5568);font-size:.875rem;line-height:1.6}
.vg-site-footer p a{display:inline;margin:0;color:var(--ds-gray-900,#0e1525);text-decoration:underline;text-decoration-color:var(--ds-gray-300,#cdd5e0);text-underline-offset:3px}
.vg-site-footer .vg-site-play{display:inline-flex;align-items:center;min-height:36px;margin-top:1.25rem;padding:0 .9rem;border:1px solid var(--ds-gray-300,#cdd5e0);border-radius:999px;color:var(--ds-gray-900,#0e1525);font-weight:600}
.vg-site-footer-legal{box-sizing:border-box;width:var(--ds-shell,min(1200px,calc(100% - 2.5rem)));margin-inline:auto;padding:1.5rem 0 4.5rem;border-top:1px solid var(--ds-gray-200,#e3e8ef);display:grid;gap:.4rem}
.vg-site-footer-legal p{max-width:72rem;margin:0;color:var(--ds-gray-500,#66738a);font-size:.75rem;line-height:1.6}
@media (max-width:1040px){.vg-site-footer-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.vg-site-footer-brand{grid-column:1/-1}}
@media (max-width:640px){.vg-site-footer-grid{grid-template-columns:1fr 1fr;padding-top:3rem;gap:2rem 1.5rem}}
/* While the cookie bar is up (the server sets body.vg-ck-pending without a consent cookie; the banner
   script removes it), every first screen keeps the bar's real height free at its bottom (POLISH.md
   finding 2): one line and 36 px choices at 1440, two short lines and 44 px choices on a phone. The
   first screens are composed to end above it, never padded empty (each page's own stylesheet). */
:root{--vg-ck-reserve:0px}
.vg-ck-pending{--vg-ck-reserve:64px}
.vg-ck-pending .vg-first-screen{box-sizing:border-box}
@media(max-width:680px){.vg-ck-pending{--vg-ck-reserve:118px}}