/* Scroll Movies website: shared tokens, the self-hosted display font, buttons, footer, and the legal/support pages.
   Palette is the app's own (ScrollMovies/App/Theme.swift): blue-black house lights, marquee gold, one red. */
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url(/assets/fonts/archivo-latin.woff2) format("woff2-variations"),url(/assets/fonts/archivo-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62% 125%;
  src:url(/assets/fonts/archivo-latin-ext.woff2) format("woff2-variations"),url(/assets/fonts/archivo-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ground:#0B0B10;--panel:#16161E;--panel2:#21212B;--rule:#2C2C38;
  --ink:#F4F3F7;--ink2:#B3B2BF;--ink3:#8E8D9C;
  --gold:#F3C04B;--gold-hover:#FFD36E;--like:#FF4D6D;--screen:#4FD1E0;--mint:#6BD49D;
  --display:"Archivo",-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --shadow:0 30px 80px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--gold);color:var(--ground);padding:10px 16px;border-radius:999px;font-weight:700}
.skip:focus{left:12px}

/* The one call to action: gold pill, dark text. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;background:var(--gold);color:var(--ground);font:800 17px/1 var(--display);font-stretch:108%;letter-spacing:.005em;padding:17px 30px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;transition:background .15s,transform .15s;box-shadow:0 10px 30px rgba(243,192,75,.22)}
.btn:hover{background:var(--gold-hover);transform:translateY(-1px)}
.btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--rule)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink3);background:rgba(255,255,255,.03)}

.brand{display:inline-flex;align-items:center;gap:10px;font:900 19px/1 var(--display);font-stretch:125%;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.brand img{width:32px;height:32px;border-radius:8px}
.brand{white-space:nowrap}
@media (max-width:400px){.brand{font-size:16px;gap:8px}.brand img{width:28px;height:28px}}

/* Footer with the TMDB credit, used on every page. */
.site-foot{border-top:1px solid var(--rule);color:var(--ink3);font-size:14px;line-height:1.55}
.site-foot .inner{max-width:1120px;margin:0 auto;padding:28px 24px 36px;display:grid;gap:18px}
.site-foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.site-foot a{color:var(--ink2);text-decoration:none}
.site-foot a:hover{color:var(--ink);text-decoration:underline}
.credit{display:flex;align-items:center;gap:14px;flex-wrap:wrap;max-width:760px}
.credit img{width:110px;height:auto;flex:none}
.credit p{margin:0}

/* Legal, support and 404 pages */
.doc .wrap{max-width:760px;margin:0 auto;padding:28px 22px 72px}
.doc header.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:6px 0 44px;flex-wrap:wrap}
.doc header.top nav a{color:var(--ink2);margin-left:18px;font-size:15px;text-decoration:none}
.doc header.top nav a:hover,.doc header.top nav a[aria-current]{color:var(--ink)}
.doc h1{font:900 44px/1.05 var(--display);font-stretch:112%;letter-spacing:-.015em;margin:0 0 10px}
.doc h2{font:800 25px/1.2 var(--display);font-stretch:108%;margin:44px 0 12px;color:var(--ink)}
.doc h3{font:700 17px var(--sans);margin:26px 0 6px;color:var(--ink)}
.doc p,.doc li{color:var(--ink2)}
.doc li{margin:7px 0}
.doc strong{color:var(--ink)}
.doc a{color:var(--gold);text-decoration:none}
.doc a:hover{text-decoration:underline}
.doc .meta{color:var(--ink3);font-size:14px;margin:0 0 30px}
.doc table{width:100%;border-collapse:collapse;margin:14px 0;font-size:15px}
.doc th,.doc td{text-align:left;vertical-align:top;padding:11px 9px;border-bottom:1px solid var(--rule);color:var(--ink2)}
.doc th{color:var(--ink);font-weight:600}
.doc .card{background:var(--panel);border:1px solid var(--rule);border-left:3px solid var(--gold);border-radius:14px;padding:20px 22px;margin:22px 0}
.doc code{font-size:.9em;background:var(--panel2);padding:1px 6px;border-radius:5px;color:var(--ink)}
.doc .optout{font:700 14px var(--sans);color:var(--ground);background:var(--gold);border:0;border-radius:999px;padding:10px 16px;min-height:44px;cursor:pointer;margin:4px 6px 4px 0}
.doc .consent-status{display:block;color:var(--ink3);font-size:14px;margin:4px 0}
.doc .toc{columns:2;column-gap:28px;padding-left:20px;font-size:15px}
.doc .toc li{margin:4px 0}
.doc .site-foot{margin-top:64px}
.doc .site-foot .inner{padding-inline:0}
@media (max-width:600px){
  .doc h1{font-size:34px}
  .doc header.top nav a{margin:0 16px 0 0}
  .doc .toc{columns:1}
  .doc table,.doc tbody,.doc tr,.doc td{display:block;width:100%}
  .doc table tr:first-child{display:none}
  .doc tr{border-bottom:1px solid var(--rule);padding:10px 0}
  .doc td{border:0;padding:2px 0}
  .doc td:first-child{color:var(--ink);font-weight:600}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}