/* Vision Movie's public header, on every page of this pack (2026-10-12).
   The logo was 132px tall and 349px wide when this was first measured (172px / 455px since 2026-10-14, see below), and with eight links and "Start your bold vision here" the row needs about
   1500px - more than the base's 1120/1360px header column, so the Start button ran off the right of the window
   and the page scrolled sideways. The row may now be as wide as the window (up to 1646px, where everything fits at
   full size), and where it still cannot hold the links, the links give way - never the logo or the button.
   The widths are measured (Chrome and
   Safari's engine, with room for a 17px scrollbar): re-run web/tools/verify-header-fit.mjs whenever a link is added
   or the button's words change. */
html .nav .wrap{max-width:1646px}
/* landing page: eight links and the long button. Compact links until the full-size row fits; under 1360 the two
   links to this page's own sections (How it works, Price) go first, so a 1280px laptop keeps the other six; none
   below 1220. */
@media(max-width:1645px){html body.home .nav .wrap{gap:9px}html body.home .nav a.link{font-size:14.5px;letter-spacing:.02em}}
@media(max-width:1465px){html body.home .nav a.link[href^="#"]{display:none}}
@media(max-width:1325px){html body.home .nav a.link{display:none}}
/* other pages, by how many links the header has (a.link:nth-of-type(8) is the seventh link: the logo is the first <a>).
   Headers with fewer links: see the 1206 rule below. */
@media(max-width:1365px){html body:not(.home) .nav .wrap:has(a.link:nth-of-type(8)) a.link{display:none}}
@media(max-width:1285px){html body:not(.home) .nav .wrap:has(a.link:nth-of-type(7)) a.link{display:none}}
/* 2026-10-14 (Mal, LOCKED): the header logo is 30% bigger on Vision Movie - 172px tall (455px wide) where it was 132px
   (349px), bar 172px. Vision Movie only: the shared vm-brand.css keeps 132px for the other modules. Every width above
   moved up by the 106px the logo gained (the max-width, and where the links shrink and hide); headers with fewer links
   used to fit from 1101 and now hide their links up to 1206. The stacked layout (logo on its own row, button centred
   beneath) starts at 800 instead of 640, because logo + long button are now 715px and need the side padding too. There the logo keeps its shape and
   is as tall as the screen allows: up to 172px, 156px on phones (570 and under; it was 120), never wider than the
   screen - on a 390px phone that is about 135px tall. */
html .nav .wrap{height:172px}
html .nav .brand.vm-logo img{height:172px}
@media(max-width:1206px){html body:not(.home) .nav a.link{display:none}}
/* the base's compact links stop at 1420; with the bigger logo the full-size row of a seven-link header needs 106px more */
@media(max-width:1526px){html body:not(.home) .nav .wrap{gap:12px}html body:not(.home) .nav a.link{font-size:14.5px;letter-spacing:.02em}}
@media(max-width:800px){
  html .nav .wrap{height:auto;flex-wrap:wrap;justify-content:center;row-gap:0;padding-bottom:12px}
  html .nav .brand.vm-logo{flex:0 0 100%;display:flex;justify-content:center}
  html .nav .brand.vm-logo img{height:auto;width:auto;max-height:172px;max-width:100%}
  html .nav .spacer{display:none}
}
@media(max-width:570px){html .nav .brand.vm-logo img{height:auto;max-height:156px}}
/* 2026-10-16 (Mal, LOCKED): Upgrade is only for people who have bought their movie - it shows inside the app from page 2
   onwards and nowhere else. brand.json removes it from every footer outside the app; in the app (one footer for every
   page) it is hidden while page 1 is the page showing. */
body.app:has(#p1:not([hidden])) .bugfoot a[href="/upgrade"]{display:none}