/* chrome-v2.css: shared header, draft bar, skip link, buttons and footer (MVP-261105-02, design direction v1.1).
   Tokens are scoped to the v2 elements so they never collide with the older home.css tokens on other pages. */
/* Self-hosted Inter (v1.4). Inter 4.1 by The Inter Project Authors (Rasmus Andersson), SIL Open Font License 1.1
   (fonts/Inter-OFL-LICENSE.txt). Official release rsms/inter v4.1; download approved by Michael on 6 Nov 2026 (reported
   by the coordinator). Not subset (fontTools not installed). Never SF Pro here: Apple devices get SF from the system. No Google Fonts. */
@font-face{
  font-family:"Inter";
  src:url("fonts/InterVariable.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
.home-v2,.site-header,.site-footer,.draft-bar,.skip{
  --ink:#0B0F12;--ink-raised:#141A1F;--ink-high:#1C232A;
  --on-dark:#F5F5F7;--on-dark-muted:#A1A1A6;
  --line-ui:#7A848E;--line:rgba(245,245,247,.12);
  --amber:#F0B43F;--amber-light:#FFD47A;--btn-ink:#17252C;
  /* v1.4 (6 Nov 2026, Michael: "a font that looks like Apple's but without copyright problems").
     Apple devices get SF Pro from the system via -apple-system / BlinkMacSystemFont: nothing is copied, bundled or hosted.
     SF Pro must never be bundled or self-hosted (Apple licence: Apple platforms only). Everything else gets self-hosted Inter
     (@font-face at the top of this file); system-ui, Segoe UI, Roboto only if it fails to load. No Google Fonts. */
  --font:-apple-system,BlinkMacSystemFont,"Inter","Inter var",system-ui,"Segoe UI",Roboto,sans-serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;
}
.site-header :focus-visible,.site-footer :focus-visible,.skip:focus-visible,.home-v2 :focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* Skip link */
a.skip{position:absolute;left:-999px;top:0;z-index:50;background:var(--ink);color:var(--on-dark);padding:12px 16px;font:500 1rem/1.2 var(--font);border:1.5px solid var(--amber);border-radius:8px}
a.skip:focus{left:8px;top:8px}

/* Draft bar */
.draft-bar{background:var(--ink);color:var(--on-dark-muted);font:400 .875rem/1.45 var(--font);text-align:center;padding:4px 16px;border-bottom:1px solid var(--line)}

/* Buttons */
.btn-primary,.btn-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border-radius:999px;font:500 1rem/1.2 var(--font);text-decoration:none;cursor:pointer;transition:background-color 150ms,color 150ms,border-color 150ms;text-align:center}
.btn-primary{background:var(--amber);color:var(--btn-ink);border:1.5px solid var(--amber)}
.btn-primary:hover{background:var(--amber-light);border-color:var(--amber-light)}
.btn-secondary{background:transparent;color:var(--amber-light);border:1.5px solid var(--amber-light)}
.btn-secondary:hover{background:var(--amber-light);color:var(--btn-ink)}
@media(prefers-reduced-motion:reduce){.btn-primary,.btn-secondary{transition:none}}

/* Header: three ranges (>=1024 full bar; 721-1023 compact 64px; <=720 compact 56px) */
.site-header{position:sticky;top:0;z-index:20;background:rgba(11,15,18,.92);border-bottom:1px solid var(--line);color:var(--on-dark);font-family:var(--font)}
.site-header .wrap{width:min(100% - 2.5rem,72rem);margin-inline:auto}
.site-header .bar{animation:none;transform:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:16px;min-height:56px}
.site-header .wordmark{display:inline-flex;align-items:center;min-height:44px;color:var(--on-dark);text-decoration:none;font-size:1rem;font-weight:600;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.menu-toggle{min-height:44px;min-width:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line-ui);background:transparent;color:var(--on-dark);font:500 1rem/1 var(--font);cursor:pointer}
.menu-toggle[hidden]{display:none}
.site-nav{flex-basis:100%}
.site-nav ul{list-style:none;margin:0;padding:0 0 12px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.site-nav li{margin:0}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;color:rgba(245,245,247,.82);text-decoration:none;font-size:.9375rem;transition:color 150ms}
.site-nav a:hover{color:var(--on-dark)}
.site-nav a[aria-current]{color:var(--on-dark);font-weight:600}
.site-nav a.btn-secondary{color:var(--amber-light);padding:0 20px}
.site-nav a.btn-secondary:hover{color:var(--btn-ink)}
.site-nav a.btn-secondary[aria-current]{background:var(--amber-light);color:var(--btn-ink)}
@media(max-width:379px){.site-header .wordmark{font-size:.9375rem}}
@media(min-width:721px){.site-header .bar{min-height:64px}}
@media(max-width:1023px){
  .js .site-nav{display:none}
  .js .site-nav.open{display:block}
  .js .site-nav.open ul{flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;padding:0 0 16px}
  .js .site-nav.open li a{display:flex;min-height:48px;width:100%;border-top:1px solid var(--line)}
  .js .site-nav.open li.nav-cta{padding-top:12px}
  .js .site-nav.open li.nav-cta a{display:inline-flex;width:auto;min-height:44px;border-top:1.5px solid var(--amber-light)}
}
@media(min-width:1024px){
  .site-header .bar{flex-wrap:nowrap;height:64px}
  .site-header .wordmark{font-size:1.125rem}
  .menu-toggle,.menu-toggle:not([hidden]){display:none}
  .site-nav,.js .site-nav{display:block;flex-basis:auto}
  .site-nav ul{flex-wrap:nowrap;gap:24px;padding:0}
}
@media(prefers-reduced-motion:reduce){.site-nav a{transition:none}}

/* Footer: --ink on every page */
body footer.site-footer{background:var(--ink);color:var(--on-dark-muted);font:400 .875rem/1.45 var(--font);border-top:1px solid var(--line);padding:var(--s7) 0}
.site-footer .wrap{width:min(100% - 2.5rem,72rem);margin-inline:auto}
.site-footer p{margin:0 0 8px;max-width:none}
.site-footer .wordmark-footer{color:var(--on-dark);font-size:1rem;font-weight:600;letter-spacing:-.01em;margin-bottom:var(--s4)}
.site-footer .wordmark-footer a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:0}
.site-footer .footer-cols{display:grid;gap:var(--s5)}
.site-footer .footer-links{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:0 24px}
body .site-footer .footer-links a{color:var(--amber-light);text-decoration:underline;text-underline-offset:.2em;display:inline-flex;align-items:center;min-height:44px;padding:0}
@media(min-width:768px){.site-footer .footer-cols{grid-template-columns:1.4fr 1fr}}

/* A-015 (6 Nov 2026): the MVP logo back in the header and footer on every page. CSS only, so the
   header keeps its height (mark 24x29 inside the 44 px link) and the page HTML is unchanged.
   Files: logo/mvp-mark-small.svg (small-size mark) and logo/mvp-horizontal-reversed.svg, copied from logo/final/svg. */
.site-header .wordmark::before{content:"";flex:none;width:24px;height:29px;margin-right:10px;background:url(logo/mvp-mark-small.svg) center/contain no-repeat}
.site-footer .wordmark-footer{width:159px;height:48px;background:url(logo/mvp-horizontal-reversed.svg) left center/contain no-repeat;color:transparent;overflow:hidden;white-space:nowrap}
.site-footer .wordmark-footer a{display:block;width:100%;height:100%;color:transparent}
@media(forced-colors:active){.site-header .wordmark::before{display:none}.site-footer .wordmark-footer,.site-footer .wordmark-footer a{background:none;color:CanvasText;width:auto;height:auto}}