/* Vision Movie top-bar logo: one image replaces the eye-mark lockup on every page (Mal, 2026-10-03).
   The PNG carries real transparency (alpha from brightness), so the bar shows through and only
   the spectrum glow and the wordmark remain. Heights track the bar heights set in polish.css. */
.brand.vm-logo{gap:0;font-size:0;line-height:0;flex:none}
.brand.vm-logo img{display:block;height:96px;width:auto}
@media(max-width:1160px){.nav .brand.vm-logo img{height:88px}}
@media(max-width:570px){.nav .brand.vm-logo img{height:78px}}
.appbar .brand.vm-logo img{height:76px}
@media(max-width:860px){.appbar .brand.vm-logo img{height:72px}}
@media(max-width:520px){.appbar .brand.vm-logo img{height:62px}}
@media(max-width:790px){.appbar .wrap:has(#acctLink) .brand.vm-logo{font-size:0;gap:0}.appbar .wrap:has(#acctLink) .brand.vm-logo img{height:48px}}
@media(max-width:355px){.appbar .brand.vm-logo img{height:40px}}
/* footer: the same image, larger, centred over the link row */
.brand-stack.vm-logo{gap:0}
.brand-stack.vm-logo img{display:block;width:auto;height:170px}
@media(max-width:570px){.brand-stack.vm-logo img{height:130px}}
/* 2026-10-03 (Mal): header keyed like the footer - a taller bar so the glow has room to fade, no divider
   line under the bars, and the gold buttons become dark grey with white text. */
html .nav,html .appbar{border-bottom:0}
html .btn-primary{background:#24201c;border-color:#24201c;color:#fff;box-shadow:none}
html .btn-primary:hover{background:#322c26;border-color:#322c26;color:#fff}
/* no rule above the footer; a much smaller logo in the app bar (pages 1-10); and the logo above the
   small "report bug" footer on the account, unsubscribe and share pages (Mal, 2026-10-03) */
html .foot{border-top:0}
html .appbar .brand.vm-logo img{height:44px}
@media(max-width:520px){html .appbar .brand.vm-logo img{height:38px}}
.vm-foot-logo{display:flex;justify-content:center;padding:26px 0 0}
.vm-foot-logo .brand-stack.vm-logo img{height:110px}
/* no panel behind the header: the bars are transparent and sit straight on the page (Mal, 2026-10-03) */
html .nav,html .appbar{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
/* 2026-10-03 (Mal): the public header no longer pins while scrolling; the hero's gold glow, whose clipped top
   edge read as a panel outline under the header, is gone; and the thin rules and panel outlines take the
   button colour. */
html .nav{position:static}
html .hero::before{display:none}
html{--line:#24201c;--line-2:#24201c}
/* a little air above the header so the glow is not cropped by the top of the window (Mal, 2026-10-03) */
html .nav{padding-top:12px}
/* app pages 1 and 2: the gold accent becomes blue - progress dot, labels, links, help button, focus rings -
   for as long as one of those two pages is the one showing (Mal, 2026-10-03) */
body:has(#p1:not([hidden])),body:has(#p2:not([hidden])){--gold:#4f8cff;--gold-dim:#2f5fb3;--gold-ink:#fff}

/* 2026-10-03 (Mal): landing header and footer logos three times the page-1 size (132px tall) */
html .nav .wrap{height:132px}
html .nav .brand.vm-logo img{height:132px}
html .brand-stack.vm-logo img,html .vm-foot-logo .brand-stack.vm-logo img{height:132px}
@media(max-width:570px){html .nav .brand.vm-logo img{height:120px}html .brand-stack.vm-logo img{height:120px}}
/* Phones (2026-10-04): the logo and the Start button cannot share one row - together they made every public page
   wider than the screen. Same answer as the app bar below: logo full size on its own row, button centred under it. */
@media(max-width:640px){
  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{max-width:100%}
  html .nav .spacer{display:none}
}
/* page 1: the creator line is a small byline under Hedley's movie, not a heading above it (Mal, 2026-10-03) */
.p1-byline{text-align:center;font:400 14px/1.4 var(--label);letter-spacing:.08em;color:var(--txt-2);margin:14px 0 0}
/* 2026-10-03 (Mal): the in-app bar matches page 1 - same 132px logo, same 132px bar, on every page of the app. */
html .appbar .wrap{height:132px}
html .appbar .brand.vm-logo img,html .appbar .wrap:has(#acctLink) .brand.vm-logo img{height:132px}
/* 2026-10-08 (Mal): the app bar scrolls away on every screen, like the public header. Pinned and see-through, it
   let each page's heading slide up under the logo as soon as you scrolled (seen on page 9). */
html .appbar{position:static}
/* A phone cannot fit a 349px logo beside the buttons: keep the logo full size, put the buttons on a row under it,
   and let the bar scroll away instead of taking a third of the screen. */
@media(max-width:700px){
  html .appbar{position:static}
  html .appbar .wrap{height:auto;flex-wrap:wrap;justify-content:center;row-gap:0;padding-bottom:12px}
  html .appbar .brand.vm-logo{flex:0 0 100%;display:flex;justify-content:center}
  html .appbar .brand.vm-logo img{max-width:100%}
}

/* page 7: Export Final Movie is a blue button (Mal, 2026-10-07) - beats the dark html .btn-primary above */
html #p7 #exportVideo{background:#4f8cff;border-color:#4f8cff;color:#fff}
html #p7 #exportVideo:hover{background:#6a9dff;border-color:#6a9dff;color:#fff}

/* 2026-10-08: the site-wide reading-text style now lives in the base polish.css (both sites). */