/* Vision Movie landing page: the manifesto bands between the hero and How it works.
   Loads after polish.css; uses its tokens only. */
.vm-manifesto p{font-size:18.5px;line-height:1.68;max-width:62ch;color:var(--txt-2);margin:0 0 1.1em}
.vm-manifesto p b{color:var(--txt)}
.vm-manifesto .vm-big{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(24px,2.6vw,32px);
  line-height:1.3;color:var(--gold);max-width:32ch;margin:1.2em 0}
.vm-not{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:30px}
.vm-not h3{margin:0 0 8px}
.vm-not p{font-size:16.5px;margin:0}
.vm-close{text-align:center}
.vm-close .wrap{display:flex;flex-direction:column;align-items:center}
.vm-origin{font-size:17px;line-height:1.65;max-width:56ch;color:var(--txt-2);margin:18px auto 40px}
.vm-origin a{white-space:nowrap}
.vm-final{max-width:28ch;margin:0 auto}
.band h2.vm-final{max-width:28ch}
.vm-final b{display:block;margin-top:.3em;color:var(--gold)}
/* phones: the lines break before these phrases, never leaving one word alone (Mal, 2026-10-04) */
.vm-final{text-wrap:balance}
.vm-nw{white-space:nowrap}
/* landing background in black and white (Mal, 2026-10-03) */
body.home::before{filter:grayscale(1)}
/* LOCKED by Mal 2026-10-12 (iPhone-tested) - change only on request.
   The landing background picture (Mal, 2026-10-12, his second choice the same evening): young Judy in the cream singlet
   on black, a portrait (files/assets/home/judy-bg-3.jpg 1440 tall; -phone 1080 tall). Same fit, faintness and
   black-and-white as the base rule in site.css; only the picture changes. Vision Movie only. */
body.home::before{background-image:url(/assets/home/judy-bg-3.jpg)}
@media(max-width:600px){body.home::before{background-image:url(/assets/home/judy-bg-3-phone.jpg)}}

/* The desktop wide-film hero (film on top, copy centred) now lives in the base: site.css + hero-wide.js. This pack
   only swaps in its own film and poster (brand.json). */
/* Phones too (Mal, 2026-10-12): the landing film is the wide young-Judy movie on every screen, so the 16:9 frame applies
   under 861px as well - full width, film first, copy centred beneath. hero-wide.js turns hero-wide on from the
   data-tall-shape="wide" hint; site.css styles it only from 861px up. */
@media(max-width:860px){
  .home .hero.hero-wide{padding-top:10px}
  .home .hero.hero-wide .wrap>div:last-child{order:-1}
  .home .hero.hero-wide .phone{width:100%;max-width:100%;margin:0 auto;aspect-ratio:16/9;border-radius:14px;background:#000}
  .home .hero.hero-wide .phone video{background:#000;object-fit:contain}
  .home .hero.hero-wide .phone .sound{bottom:12px}
  .home .hero.hero-wide .phone .expand{right:12px;top:12px}
  .home .hero.hero-wide .wrap>div:first-child{text-align:center}
  .home .hero.hero-wide .display{text-wrap:balance}
  .home .hero.hero-wide .lede,.home .hero.hero-wide .thesis{margin-left:auto;margin-right:auto}
  .home .hero.hero-wide .cta{justify-content:center}
  .home .hero.hero-wide .thesis::before{left:50%;transform:translateX(-50%)}
}

/* Landing FAQ (2026-10-03): native <details>, no script. */
.vm-faq .vm-faq-lede{font-size:18.5px;line-height:1.68;max-width:62ch;color:var(--txt-2);margin:0 0 28px}
.vm-faqs{max-width:760px;margin:0 0 34px}
.vm-faqs details{border-top:1px solid var(--line);padding:18px 0}
.vm-faqs details:last-child{border-bottom:1px solid var(--line)}
.vm-faqs summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  font:500 19px/1.4 var(--serif);color:var(--txt)}
.vm-faqs summary::-webkit-details-marker{display:none}
.vm-faqs summary::after{content:"+";flex:none;color:var(--gold);font:300 28px/1 var(--sans);transition:transform .15s ease}
.vm-faqs details[open] summary::after{transform:rotate(45deg)}
.vm-faqs summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px}
.vm-faqs details p{font-size:17px;line-height:1.7;color:var(--txt-2);margin:12px 0 0;max-width:62ch}
.vm-faq .vm-faq-more{font-size:17px;color:var(--txt-2);margin:0 0 26px}
@media(max-width:560px){.vm-faqs summary{font-size:17.5px}.vm-faqs details p{font-size:16.5px}}
/* Start buttons on the landing page (Mal, 2026-10-13, from his screenshots): see-through gold-tinted pill with a thin gold
   ring held 3px off it (an outline, so the gap shows whatever is behind). Keyboard focus turns the ring white.
   Landing page only; every other page keeps the solid dark button. */
html body.home .btn-primary{background:rgba(233,185,73,.12);border-color:#24201c;color:#fff;box-shadow:none;outline:2px solid #e9b949;outline-offset:3px}
html body.home .btn-primary:hover{background:rgba(233,185,73,.2);border-color:#24201c;color:#fff}
html body.home .btn-primary:focus-visible{outline-color:#fff}
/* How it works: the four card headings are gold (Mal, 2026-10-14). Fixed site gold, landing page only. */
html body.home .step h3{color:#e8b567}