/* Story Becomes · the buyer's movie page, /film/<token> (film/index.html, film.js), the plain 404.html, and the
   Privacy Policy and the Terms (privacy/index.html, terms/index.html).
   Light, and black on the OS's dark setting the way the app's pages turn (ink and paper swap). The colour
   values are the site's tokens (style.css :root, the same as app-frontend/assets/brand.css --sb-*;
   tools/test/brand-tokens.test.mjs checks they agree). */
:root {
  color-scheme: light dark;
  --ink: #000; --paper: #fff;
  --ink-2: #5c5c5c;          /* secondary text on white */
  --line-soft: #d9d6d6;      /* the waiting bar's track */
  --font: "Manrope", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #fff; --paper: #000; --ink-2: #a3a3a3; --line-soft: #3a3a3a; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.5 var(--font); }
main { max-width: 860px; margin: 0 auto; padding: 28px 16px 64px; }
.brand { font-weight: 800; letter-spacing: -.02em; text-decoration: none; color: var(--ink); display: inline-block; margin-bottom: 28px; }
h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 10px; }
.step { color: var(--ink-2); margin: 0 0 22px; font-size: 1.1rem; }
.fine { color: var(--ink-2); font-size: .9rem; }
.go { color: var(--ink); font-weight: 700; }
video { width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 14px; display: block; }
.wait { height: 6px; background: var(--line-soft); border-radius: 6px; overflow: hidden; margin: 8px 0 14px; }
.wait span { display: block; height: 100%; width: 30%; background: var(--ink); border-radius: 6px; animation: w 1.8s ease-in-out infinite; }
@keyframes w { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .wait span { animation: none; } }
/* an unpaid order (film.js): its lines one per row, the free trailer with one big play button, and the way back to checkout */
.step .ln { display: block; }
.step .ln + .ln { margin-top: .2rem; }
.tr__box { position: relative; }
.tr__play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; padding: 0; border-radius: 14px; cursor: pointer; background: radial-gradient(circle at 50% 45%, rgba(0,0,0,.1), rgba(0,0,0,.5)); }
.tr__play[hidden] { display: none; }
.tr__btn { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: #fff; color: #000; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.tr__btn svg { width: 2rem; height: 2rem; margin-left: .25rem; }
.tr__play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.tr__go { display: inline-block; margin-top: 18px; padding: 14px 20px; background: var(--ink); color: var(--paper); border-radius: 0 10px 10px 0; text-decoration: none; font-size: 1.1rem; }
.tr__go:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.tr__nokey { margin: 18px 0 0; font-size: 1rem; } /* no resume key on this tab: where the way back to checkout is */
.bar { position: relative; height: 10px; border: 1.5px solid var(--ink); border-radius: 0 6px 6px 0; overflow: hidden; margin: 8px 0 12px; }
.bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(.03); transition: transform 2.4s cubic-bezier(.2, .7, .3, 1); }
@media (prefers-reduced-motion: reduce) { .bar i { transition: none; } }
/* the Privacy Policy and the Terms: one readable column of headings, lines and lists */
.legal { max-width: 720px; }
.legal h2 { font-size: 1.3rem; line-height: 1.2; letter-spacing: -.02em; margin: 2.25rem 0 .6rem; }
.legal h3 { font-size: 1.05rem; line-height: 1.3; margin: 1.5rem 0 .4rem; }
.legal p, .legal li { margin: 0 0 .55rem; }
.legal ul { padding-left: 1.25rem; margin: 0 0 .9rem; }
.legal a, .legal-links a { color: var(--ink); }
/* the Privacy Policy and Terms links at the foot of these pages */
.legal-links { margin-top: 2.5rem; }