/* NAV BAR CSS (exact copy from homepage) */
.hamburger-btn { background: none; border: none; cursor: pointer; padding: 8px; margin-top: 4px; border-radius: 8px; transition: background 0.2s; }
.hamburger-btn:hover { background: var(--border-medium); }
.hamburger-btn .bar { display: block; width: 24px; height: 2.5px; background: rgba(255,255,255,0.7); border-radius: 1px; margin-bottom: 5px; }
.hamburger-btn .bar:last-child { margin-bottom: 0; }
.hamburger-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 90; }
.hamburger-backdrop.open { display: block; }
.hamburger-menu { display: none; position: absolute; top: 52px; right: 0; width: 220px; background: var(--bg-tertiary); border-radius: 12px; border: 1px solid var(--border-medium); box-shadow: 0 16px 48px var(--overlay); padding: 6px 0; z-index: 100; }
.hamburger-menu.open { display: block; }
.hamburger-menu-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-secondary); transition: color 0.2s; text-decoration: none; }
.hamburger-menu-item:hover { color: var(--text-primary); }
.hamburger-menu-item.active { color: var(--accent-green-bright); }
.theme-toggle{display:inline-flex;background:none;border:1px solid var(--hero-border);border-radius:8px;cursor:pointer;padding:7px 8px;color:var(--hero-text-secondary);align-items:center;justify-content:center;transition:background .2s ease,color .2s ease,border-color .2s ease}.theme-toggle:hover{background:var(--hero-hover);color:var(--hero-text-primary);border-color:var(--hero-text-faint)}.theme-toggle:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.theme-toggle svg{width:18px;height:18px;display:block}.theme-icon-moon{display:none}[data-theme="light"] .theme-icon-sun{display:none}[data-theme="light"] .theme-icon-moon{display:block}
.theme-toggle:hover { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.25); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-icon-moon { display: none; }
[data-theme="light"] .theme-icon-sun { display: none; }
[data-theme="light"] .theme-icon-moon { display: block; }
.optb-nav .hamburger-btn { display: none; }
.optb-nav { display: flex; align-items: center; padding: 0 40px; height: 54px; border-bottom: none; gap: 24px; background: transparent; position: absolute; top: 0; left: 0; right: 0; z-index: 100; }
.optb-nav .optb-logo { font-family: "Alfa Slab One", serif; font-size: 20px; color: #fff; text-decoration: none; white-space: nowrap; }
.optb-nav .optb-nav-right { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.optb-nav .optb-links { display: flex; gap: 20px; }
.optb-nav .optb-links a { font-size: 11.5px; color: rgba(255,255,255,0.45); letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; font-weight: 600; padding: 0; }
.optb-nav .optb-links a:hover { color: #fff; }
.optb-nav .theme-toggle { color: rgba(255,255,255,0.7); border-color: rgba(255,255,255,0.2); }
.optb-nav .theme-toggle:hover { color: #fff; border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.1); }
.optb-nav .hamburger-btn { color: rgba(255,255,255,0.7); }
.optb-nav .hamburger-btn:hover { color: #fff; }
/* ── SEARCH ── */
.search-wrap{position:relative;}
.search-btn{background:none;border:1px solid rgba(255,255,255,0.2);cursor:pointer;padding:7px 8px;color:rgba(255,255,255,0.7);display:flex;align-items:center;justify-content:center;transition:all .2s;border-radius:8px;}
.search-btn:hover{color:#fff;border-color:rgba(255,255,255,0.4);background:rgba(255,255,255,0.1);}
.search-btn svg{width:18px;height:18px;}
.search-input-wrap{position:absolute;top:50%;right:0;transform:translateY(-50%);width:0;opacity:0;overflow:hidden;transition:width .3s ease,opacity .3s ease;display:flex;align-items:center;}
.search-input-wrap.open{width:260px;opacity:1;}
.search-input-wrap input{width:100%;padding:8px 14px;border-radius:10px;border:1px solid rgba(255,255,255,0.15);background:rgba(0,0,0,0.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#fff;font-size:14px;outline:none;font-family:inherit;}
.search-input-wrap input::placeholder{color:rgba(255,255,255,0.4);}
.search-input-wrap input:focus{border-color:rgba(255,255,255,0.3);}
.search-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:320px;max-height:400px;overflow-y:auto;background:rgba(20,20,20,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.1);border-radius:12px;box-shadow:0 16px 48px rgba(0,0,0,0.5);display:none;z-index:300;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.15) transparent;}
.search-dropdown.visible{display:block;}
.search-result{display:flex;align-items:center;gap:12px;padding:10px 14px;text-decoration:none;color:#fff;transition:background .15s;}
.search-result:hover{background:rgba(255,255,255,0.08);}
.search-result img{width:36px;height:54px;border-radius:4px;object-fit:cover;flex-shrink:0;}
.search-result-title{font-size:14px;font-weight:600;}
.search-no-results{padding:16px 14px;color:rgba(255,255,255,0.4);font-size:13px;text-align:center;}
.optb-menu { display: none; position: fixed; top: 54px; right: 16px; width: 220px; background: var(--bg-tertiary, #1a1a1a); border-radius: 12px; border: 1px solid var(--border-medium, #333); box-shadow: 0 16px 48px rgba(0,0,0,0.4); padding: 6px 0; z-index: 200; }
.optb-menu.open { display: block; }
.optb-menu .hamburger-menu-item { display: flex; align-items: center; padding: 12px 16px; font-size: 13px; font-weight: 600; color: var(--text-secondary); text-decoration: none; transition: color 0.2s; }
.optb-menu .hamburger-menu-item:hover { color: var(--text-primary); }
.optb-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 190; }
.optb-backdrop.open { display: block; }
@media (max-width: 700px) {
  .optb-nav { padding: 0 16px; height: 48px; gap: 16px; }
  .optb-nav .optb-links { display: none; }
  .optb-nav .theme-toggle { margin-left: auto; }
  .optb-nav .hamburger-btn { display: block; }
  .optb-menu { top: 48px; }
  .search-wrap{position:static;}
  .search-input-wrap{position:fixed;top:0;left:0;right:0;transform:none;height:48px;padding:6px 16px;background:rgba(0,0,0,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:400;}
  .search-input-wrap.open{width:auto;}
  .search-dropdown{position:fixed;top:48px;left:8px;right:8px;width:auto;max-height:60vh;z-index:400;}
}

/* ── THEME VARIABLES (dark default) ── */
/* === DARK (default) ============================================ */
/* === DARK (default) — token-version: v2 ======================== */
:root{
  --bg:#0a0a0a;--bg-card:#18181b;--bg-tertiary:#222;--bg-elevated:#1f1f23;
  --text-primary:#fff;--text-body:rgba(255,255,255,.85);--text-secondary:rgba(255,255,255,.7);--text-tertiary:rgba(255,255,255,.6);--text-muted:rgba(255,255,255,.45);--text-faint:rgba(255,255,255,.35);--text-xfaint:rgba(255,255,255,.3);
  --border-subtle:rgba(255,255,255,.06);--border-light:rgba(255,255,255,.08);--border-medium:rgba(255,255,255,.1);--border-strong:rgba(255,255,255,.15);
  --hover-bg:rgba(255,255,255,.04);--hover-subtle:rgba(255,255,255,.02);--overlay:rgba(0,0,0,.5);--shadow-card:0 1px 3px rgba(0,0,0,.3);--shadow-elevated:0 16px 48px rgba(0,0,0,.5);--focus-ring:rgba(34,197,94,.55);
  --accent-green:#22c55e;--accent-green-bright:#22c55e;--accent-green-text:#22c55e;--accent-green-bg:rgba(34,197,94,.1);--accent-green-border:rgba(34,197,94,.25);--accent-green-on:#052e16;
  --accent-red:#ef4444;--accent-red-text:#ef4444;--accent-red-bg:rgba(239,68,68,.08);--accent-red-border:rgba(239,68,68,.25);--accent-red-on:#fff;
  --accent-yellow:#eab308;--accent-yellow-text:#eab308;--accent-yellow-bg:rgba(234,179,8,.1);
  --accent-blue:#3b82f6;--accent-blue-text:#3b82f6;--accent-blue-bg:rgba(59,130,246,.1);
  --accent-purple:#a855f7;--accent-purple-text:#a855f7;--accent-purple-bg:rgba(168,85,247,.1);
  --vp-5:#4ade80;--vp-4:#a3e635;--vp-3:#facc15;--vp-2:#fb923c;--vp-1:#f87171;
  --mult-high:#22c55e;--mult-good:#6b9a5b;--mult-mid:#eab308;--mult-low:#ef4444;
  --scrollbar-track:rgba(255,255,255,.03);--scrollbar-thumb:rgba(255,255,255,.08);
  --hero-bg:#111;--hero-bg-deep:#0a0a0a;--hero-overlay:rgba(17,17,17,.75);--hero-overlay-strong:rgba(17,17,17,.92);
  --hero-text-primary:#fff;--hero-text-body:rgba(255,255,255,.85);--hero-text-secondary:rgba(255,255,255,.7);--hero-text-muted:rgba(255,255,255,.5);--hero-text-faint:rgba(255,255,255,.4);--hero-text-xfaint:rgba(255,255,255,.3);
  --hero-border:rgba(255,255,255,.12);--hero-border-subtle:rgba(255,255,255,.08);--hero-hover:rgba(255,255,255,.1);
}
/* === LIGHT (opt-in) — token-version: v2 — AA on #fafafa ======== */
[data-theme="light"]{
  --bg:#fafafa;--bg-card:#fff;--bg-tertiary:#f0f0f0;--bg-elevated:#fff;
  /* text scale: primary→body→secondary all AAA; tertiary AA; muted/faint AA-large.
     The lower steps are deliberately muted for hierarchy — they're used only
     for small bold uppercase labels (.col-header, .writeup-date, etc.) which
     read fine at AA-large (3:1) given the bold weight + tracking. */
  --text-primary:#0f172a;--text-body:rgba(15,23,42,.88);--text-secondary:rgba(15,23,42,.72);--text-tertiary:rgba(15,23,42,.62);--text-muted:rgba(15,23,42,.55);--text-faint:rgba(15,23,42,.48);--text-xfaint:rgba(15,23,42,.36);
  --border-subtle:rgba(15,23,42,.06);--border-light:rgba(15,23,42,.1);--border-medium:rgba(15,23,42,.14);--border-strong:rgba(15,23,42,.22);
  --hover-bg:rgba(15,23,42,.05);--hover-subtle:rgba(15,23,42,.025);--overlay:rgba(15,23,42,.4);--shadow-card:0 1px 3px rgba(15,23,42,.08);--shadow-elevated:0 16px 48px rgba(15,23,42,.18);--focus-ring:rgba(21,128,61,.6);
  --accent-green:#15803d;--accent-green-bright:#15803d;--accent-green-text:#15803d;--accent-green-bg:rgba(21,128,61,.1);--accent-green-border:rgba(21,128,61,.3);--accent-green-on:#fff;
  --accent-red:#dc2626;--accent-red-text:#b91c1c;--accent-red-bg:rgba(220,38,38,.08);--accent-red-border:rgba(220,38,38,.3);--accent-red-on:#fff;
  --accent-yellow:#b45309;--accent-yellow-text:#b45309;--accent-yellow-bg:rgba(180,83,9,.1);
  --accent-blue:#1d4ed8;--accent-blue-text:#1d4ed8;--accent-blue-bg:rgba(29,78,216,.08);
  --accent-purple:#7e22ce;--accent-purple-text:#7e22ce;--accent-purple-bg:rgba(126,34,206,.08);
  --vp-5:#15803d;--vp-4:#4d7c0f;--vp-3:#b45309;--vp-2:#c2410c;--vp-1:#b91c1c;
  --mult-high:#15803d;--mult-good:#4d7c0f;--mult-mid:#b45309;--mult-low:#b91c1c;
  --scrollbar-track:rgba(15,23,42,.03);--scrollbar-thumb:rgba(15,23,42,.14);
  /* hero-* tokens intentionally inherited from :root — hero stays dark */
}
/* === LIGHT (opt-in) — WCAG AA contrast on #fafafa ============= */


/* ── LIGHT THEME ── */


* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, "system-ui", "SF Pro Text", "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── CINEMATIC HERO (Apple TV inspired) ── */
.hero {
  position: relative;
  width: 100%;
  min-height: 70vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  overflow: hidden;
}
.hero-bg .poster-backdrop {
  position: absolute; inset: 0;
}
.hero-bg .poster-backdrop img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
}
.hero-bg::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 70% 20%, rgba(59,130,246,0.10), transparent),
    radial-gradient(ellipse 60% 40% at 30% 70%, rgba(139,92,246,0.08), transparent);
  z-index: 1;
}
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    #0a0a0a 0%, rgba(10,10,10,0.95) 10%,
    rgba(10,10,10,0.6) 35%, rgba(10,10,10,0.15) 55%,
    rgba(10,10,10,0.3) 100%);
  z-index: 2;
}
.hero-content {
  position: relative; z-index: 3;
  width: 100%; max-width: 900px;
  margin: 0 auto;
  padding: 0 40px 48px;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.hero-poster { display: none;
  width: 180px; margin-bottom: 22px;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
}
.hero-poster img { width: 100%; display: block; }
.hero-text { width: 100%; }
.hero-text h1 {
  font-size: 56px; font-weight: 800; letter-spacing: -0.03em;
  line-height: 1.05; margin-bottom: 12px;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0,0,0,0.6);
}
.hero-meta {
  display: flex; gap: 8px; align-items: center;
  justify-content: center;
  font-size: 14px; color: rgba(255,255,255,0.55);
  margin-bottom: 16px; flex-wrap: wrap;
}
.hero-meta .dot { opacity: 0.3; }
.hero-meta .rating-badge {
  padding: 2px 8px; border: 1px solid rgba(255,255,255,0.2);
  border-radius: 4px; font-size: 12px; font-weight: 600;
}
.hero-tagline {
  font-size: 15px; color: rgba(255,255,255,0.45);
  max-width: 520px; margin: 0 auto 20px; line-height: 1.6;
}
/* Review scores — "logo forward" (flat, de-chipped): bare logo + bold value
   pairs, no pill backgrounds/borders. Part of the July 2026 design system —
   don't reintroduce chip chrome here. */
.hero-scores {
  display: flex; gap: 12px 26px; flex-wrap: wrap; justify-content: center; align-items: center;
}
.score-pill {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: #fff;
  text-decoration: none;
  opacity: 0.92;
  transition: opacity 0.2s, transform 0.2s;
}
.score-pill:hover { opacity: 1; transform: translateY(-1px); }
.score-pill .pill-icon { font-size: 16px; line-height: 1; }
.score-pill .pill-icon img { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; }
@media (max-width: 600px) {
  /* Compact enough that all 6 sources fit one line at 390px (≈324px used
     of ~350px available). Emoji icons keep their inline 16px (a !important
     override would also clobber the CS badge's inline 9px). */
  .hero-scores { gap: 8px 12px; }
  .score-pill { font-size: 12.5px; gap: 5px; }
  .score-pill .pill-icon img { width: 15px; height: 15px; }
}
@media (max-width: 359px) {
  /* Very narrow screens can't fit 6 on one line — switch to a centered
     3-column grid so the wrap is balanced (3+3 / 3+2), never a 5+1 orphan. */
  .hero-scores { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; }
}

/* ── SECTION DIVIDER (lines + label) ── */
.compare-cta {
  display: flex; align-items: center; gap: 16px;
  max-width: 1200px; margin: 0 auto;
  padding: 16px 64px 0;
}
.compare-cta::before, .compare-cta::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(255,255,255,0.08);
}
.compare-cta-label {
  margin: 0; /* it's an <h2> now — kill the UA heading margins */
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .compare-cta { padding: 14px 24px 0; gap: 12px; }
}
[data-theme="light"] .compare-cta::before, [data-theme="light"] .compare-cta::after { background: rgba(0,0,0,0.08); }
[data-theme="light"] .compare-cta-label { color: rgba(0,0,0,0.4); }

/* ── COMPARE BUTTON (below bo-strip) ── */
.compare-btn-wrap {
  max-width: 1200px; margin: 0 auto;
  padding: 24px 64px 0;
  display: flex; justify-content: center;
}
.compare-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  padding: 10px 22px; border-radius: 100px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.compare-btn:hover { color: rgba(255,255,255,0.95); border-color: rgba(255,255,255,0.28); background: rgba(255,255,255,0.06); }
.compare-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 700px) {
  .compare-btn-wrap { padding: 20px 24px 0; }
  .compare-btn { font-size: 11px; padding: 9px 18px; }
}
[data-theme="light"] .compare-btn { color: rgba(0,0,0,0.65); border-color: rgba(0,0,0,0.12); background: rgba(0,0,0,0.02); }
[data-theme="light"] .compare-btn:hover { color: rgba(0,0,0,0.95); border-color: rgba(0,0,0,0.28); background: rgba(0,0,0,0.05); }

/* ── HERO-TO-CONTENT TRANSITION ── */
.hero-fade {
  background: #0a0a0a;
  padding-bottom: 36px;
}

/* ── BOX OFFICE SUMMARY — TWO-TIER MARQUEE (inside transition zone) ──
   Money stats (Opening Weekend / Domestic Total / Worldwide Total) render
   big and centered in .bo-marquee; everything else (Budget, Legs, Rank,
   Theaters, …) renders as a compact inline row in .bo-meta below. The
   split is computed in build.js (boCardsTop / boCardsBottom). */
.bo-marquee {
  max-width: 1100px; margin: 0 auto;
  padding: 30px 64px 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  text-align: center;
}
.bo-m-stat { padding: 0 18px; }
.bo-m-stat + .bo-m-stat { border-left: 1px solid rgba(255,255,255,0.1); }
.bo-m-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.42); margin-bottom: 10px;
}
.bo-m-value {
  font-size: 46px; font-weight: 800; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: -0.025em; line-height: 1;
}
.bo-m-sub { font-size: 12px; color: rgba(255,255,255,0.4); margin-top: 9px; }
.bo-m-sub .green { color: #22c55e; }
.bo-meta {
  max-width: 1100px; margin: 26px auto 0;
  padding: 18px 64px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: center; flex-wrap: wrap; gap: 14px 44px;
}
.bo-meta-item { white-space: nowrap; }
.bo-meta-label {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.42); margin-right: 9px;
}
.bo-meta-value { font-size: 16px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }

/* ── SECTION CONTAINER ── */
.section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 64px;
}
.bo-table-divider-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 64px;
}
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.section-header-toggle-only { justify-content: flex-end; margin-bottom: 10px; }
.section-header h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-body);
}

/* ── TOGGLE ── */
.toggle-group {
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border-medium);
}
.toggle-btn {
  padding: 5px 14px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  background: transparent;
  color: var(--text-muted);
  border: none;
  cursor: pointer;
  transition: all .2s;
}
.toggle-btn:not(:last-child) { border-right: 1px solid var(--border-medium); }
.toggle-btn.active {
  background: var(--accent-green-bg);
  color: var(--accent-green-bright);
}

/* ── DATA TABLE ── */
.bo-table-wrap { overflow-x: auto; }
.bo-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.bo-table thead th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-xfaint);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-light);
  font-weight: 500;
  white-space: nowrap;
}
.bo-table thead th:not(:first-child) { text-align: right; }
.bo-table tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  white-space: nowrap;
}
.bo-table tbody td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.bo-table tbody tr:hover { background: var(--hover-subtle); }
.bo-table .pos { color: var(--accent-green-bright); }
.bo-table .neg { color: var(--accent-red); }
.bo-table .rank { color: var(--text-faint); font-size: 11px; }
.bo-table .note { font-size: 11px; color: var(--text-xfaint); font-weight: 400; }
.display-note { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; font-weight: 500; }

/* ── CAST & CREW SECTION ── */
.credits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
}
.credit-row {
  display: flex;
  gap: 6px;
  font-size: 12px;
  line-height: 1.85;
}
.credit-label {
  color: var(--text-xfaint);
  flex-shrink: 0;
  min-width: 100px;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .4px;
  padding-top: 1px;
}
.credit-value { color: var(--text-tertiary); }

/* ── CHART SECTIONS (flat editorial) ──
   De-carded: charts sit directly on the page. Titles are small-caps with a
   hairline rule (except .no-rule, e.g. the split donut, where a full-width
   rule floating over a centered donut reads oddly). .chart-container has an
   EXPLICIT height on purpose — with only a max-height, Chart.js canvases can
   ratchet taller when container widths change (maintainAspectRatio:false +
   auto-height parent feedback loop). Do not revert to max-height. */
.chart-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 44px; }
.chart-card { background: transparent; border: none; border-radius: 0; padding: 8px 0 0; min-width: 0; }
.chart-card h3 {
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .13em;
  color: var(--text-faint); border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 9px; margin-bottom: 16px;
}
.chart-card h3.no-rule { border-bottom: none; text-align: center; }
.chart-container { position: relative; width: 100%; height: 300px; min-width: 0; }
.section-divider { height: 1px; background: var(--border-subtle); max-width: 1100px; margin: 0 auto; }
.profit-gauge { text-align: center; padding: 0 0 20px; }
.profit-gauge .gauge-label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-xfaint); margin-bottom: 8px; font-weight: 600; }
.profit-gauge .gauge-value { font-size: 36px; font-weight: 800; font-variant-numeric: tabular-nums; color: #e5e7eb; }
.profit-gauge .gauge-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.profit-breakeven { font-size: 11px; color: var(--text-faint); text-align: center; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.compare-bar { margin-bottom: 14px; }
.compare-bar .cb-label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; display: flex; justify-content: space-between; }
.compare-bar .cb-track { height: 24px; background: var(--border-light); border-radius: 6px; overflow: hidden; }
.compare-bar .cb-fill { height: 100%; border-radius: 6px; }
.chart-card-title {
  font-size: 10px; text-transform: uppercase; letter-spacing: .13em; color: var(--text-faint);
  font-weight: 600; border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 9px; margin-bottom: 16px;
}
.drop-chart-wrap { height: 280px; position: relative; }

/* ── PREDICTION CARD (v8 — collapsible, green bar, factor grid) ── */
.pred-section { max-width: 1200px; margin: 0 auto; padding: 28px 64px 40px; }
.pred-divider {
  display: flex; align-items: center; gap: 16px;
  margin: 0 auto 26px;
}
.pred-divider::before, .pred-divider::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(255,255,255,0.08);
}
.pred-divider-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
}
[data-theme="light"] .pred-divider::before, [data-theme="light"] .pred-divider::after { background: rgba(0,0,0,0.08); }
[data-theme="light"] .pred-divider-label { color: rgba(0,0,0,0.4); }
.pred-card {
  padding: 0;
}
.pred-head { text-align: center; margin-bottom: 14px; position: relative; }
.pred-head .pred-headline { font-size: 36px; font-weight: 800; color: var(--text-primary); line-height: 1; letter-spacing: -.005em; font-variant-numeric: tabular-nums; }
.pred-delta { position: absolute; top: 50%; right: 0; transform: translateY(-50%); font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 6px; letter-spacing: .04em; }
.pred-delta.down { background: rgba(239,83,80,.15); color: #ef5350; }
.pred-delta.up { background: rgba(74,222,128,.15); color: #4ade80; }

/* Bar */
.pred-bar-wrap { margin: 0 auto; position: relative; padding: 22px 4px 26px; }
.pred-bar-labels { position: relative; height: 16px; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.pred-bar-labels span { position: absolute; font-size: 11px; color: var(--text-muted); transform: translateX(-50%); white-space: nowrap; font-weight: 500; }
.pred-bar { position: relative; height: 8px; background: var(--hover-bg); border-radius: 5px; overflow: visible; }
.pred-bar-wider { position: absolute; top: 0; height: 8px; background: rgba(34,197,94,.25); border-radius: 4px; }
.pred-bar-narrow { position: absolute; top: 0; height: 8px; background: rgba(34,197,94,.6); border-radius: 3px; }
.pred-bar-tick { position: absolute; top: -3px; width: 2px; height: 14px; background: rgba(255,255,255,.85); border-radius: 1px; transform: translateX(-50%); }
.pred-bar-current { position: absolute; top: -4px; width: 16px; height: 16px; background: var(--accent-green-bright); border-radius: 50%; transform: translateX(-50%); box-shadow: 0 0 0 3px rgba(34,197,94,.12), 0 0 8px rgba(34,197,94,.3); }
.pred-bar-current-lbl { position: absolute; bottom: -22px; font-size: 11px; color: var(--text-secondary); font-weight: 600; transform: translateX(-50%); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Toggle (quiet link-style) */
.pred-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; width: fit-content; margin: 16px auto 4px; padding: 6px 8px; background: transparent; border: none; color: var(--text-muted); font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; transition: color .15s; }
.pred-toggle:hover { color: var(--text-primary); }
.pred-toggle .pred-toggle-text { white-space: nowrap; }
.pred-toggle .arrow { display: inline-block; font-size: 11px; line-height: 1; transition: transform .2s; }
.pred-card.expanded .pred-toggle .arrow { transform: rotate(180deg); }
.pred-expand { display: none; margin-top: 8px; }
.pred-card.expanded .pred-expand { display: block; }

/* Description */
.pred-desc { padding: 11px 14px; background: rgba(255,255,255,.035); border-radius: 8px; font-size: 12px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 14px; }
.pred-desc strong { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.pred-desc .pred-learn { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--border-strong); transition: color .15s; }
.pred-desc .pred-learn:hover { color: var(--accent-green-text); text-decoration-color: var(--accent-green-text); }

/* Factor grid — 3-col desktop, 2-col mobile, fixed pct width */
.pred-factors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pred-factor { display: flex; align-items: center; gap: 14px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.05); border-radius: 9px; padding: 9px 14px; }
.pred-factor .pred-factor-pct { font-size: 17px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; flex-shrink: 0; width: 50px; text-align: left; }
.pred-factor .pred-factor-pct.pos { color: #4ade80; }
.pred-factor .pred-factor-pct.neg { color: #f87171; }
.pred-factor .pred-factor-pct.neu { color: var(--text-muted); }
.pred-factor .pred-factor-pct.base { color: var(--text-primary); font-size: 16px; }
.pred-factor-baseline { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.09); }
.pred-factor-baseline .pred-factor-pct { width: 64px; }
.pred-factor .pred-factor-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.pred-factor .pred-factor-name { font-size: 11px; color: var(--text-primary); font-weight: 600; }
.pred-factor .pred-factor-detail { font-size: 10px; color: var(--text-tertiary); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 900px) {
  .pred-section { padding: 24px 40px 32px; }
  .pred-divider { margin-bottom: 18px; }
  .pred-factors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bo-table-divider-wrap { padding: 0 40px; }
}
@media (max-width: 600px) {
  .pred-section { padding: 22px 20px 28px; }
  .bo-table-divider-wrap { padding: 0 20px; }
  .pred-divider { margin-bottom: 16px; gap: 12px; }
  .pred-divider-label { font-size: 10px; }
  .pred-card { padding: 0; }
  .pred-head { margin-bottom: 12px; }
  .pred-head .pred-headline { font-size: 27px; }
  .pred-delta { position: static; transform: none; display: inline-block; margin-top: 6px; font-size: 10px; padding: 3px 7px; }
  .pred-bar-wrap { padding: 18px 2px 22px; }
  .pred-bar-labels span { font-size: 10px; }
  .pred-bar { height: 7px; }
  .pred-bar-wider, .pred-bar-narrow { height: 7px; }
  .pred-bar-tick { top: -3px; height: 13px; }
  .pred-bar-current { top: -3px; width: 13px; height: 13px; box-shadow: 0 0 0 3px rgba(34,197,94,.18), 0 0 11px rgba(34,197,94,.55); }
  .pred-bar-current-lbl { font-size: 9px; bottom: -19px; }
  /* Hide midpoint label on mobile — at narrow widths floor/mid/ceiling labels
     overlap when the prediction range is tight (Phase 2 movies like PHM where
     floor:ceiling ratio is high). The midpoint tick on the bar still shows
     the position; the headline range above gives the exact narrow band. */
  .pred-bar-mid-lbl { display: none; }
  .pred-toggle { font-size: 11px; gap: 6px; margin: 12px auto 4px; padding: 6px 8px; }
  .pred-toggle .arrow { font-size: 10px; }
  .pred-desc { font-size: 11px; padding: 10px 12px; line-height: 1.55; margin-bottom: 12px; }
  .pred-factors { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .pred-factor { gap: 10px; padding: 7px 10px; }
  .pred-factor .pred-factor-pct { font-size: 15px; width: 42px; }
  .pred-factor-baseline .pred-factor-pct { width: 56px; font-size: 14px; }
  .pred-factor .pred-factor-name { font-size: 10px; }
  .pred-factor .pred-factor-detail { font-size: 9px; }
}

/* ── FOOTER ── */
.site-footer {
  text-align: center;
  padding: 32px 24px;
  font-size: 11px;
  color: var(--text-xfaint);
  border-top: 1px solid var(--border-subtle);
  margin-top: 16px;
}

/* ── RESPONSIVE: TABLET ── */
@media (max-width: 900px) {
  .hero-poster { display: none; width: 200px; }
  .hero-text h1 { font-size: 48px; }
  .bo-marquee { padding: 26px 40px 0; }
  .bo-m-value { font-size: 34px; }
  .bo-meta { margin-top: 20px; padding: 14px 40px 0; gap: 12px 28px; }
  .section { padding: 20px 40px; }
  .credits-grid { grid-template-columns: 1fr; }
  .chart-row { grid-template-columns: 1fr; }
}
/* ── RESPONSIVE: MOBILE ── */
@media (max-width: 600px) {
  .hero { min-height: 85vh; }
  .hero-content { padding: 0 20px 32px; }
  .hero-poster { display: none; width: 180px; margin-bottom: 20px; }
  .hero-text h1 { font-size: 36px; }
  .hero-tagline { font-size: 14px; }
  /* Mobile marquee — big tier compresses to 22px numerals; labels get a
     fixed min-height (flex-end aligned) so 1-line and 2-line labels keep
     the values on a shared baseline. */
  .bo-marquee { padding: 24px 14px 0; }
  .bo-m-stat { padding: 0 8px; }
  .bo-m-label { font-size: 9px; letter-spacing: 0.08em; margin-bottom: 6px; line-height: 1.3;
    min-height: 2.6em; display: flex; align-items: flex-end; justify-content: center; }
  .bo-m-value { font-size: 22px; }
  .bo-m-sub { font-size: 10px; margin-top: 5px; line-height: 1.3; }
  .bo-meta { margin-top: 18px; padding: 14px 16px 0; gap: 10px 22px; }
  .bo-meta-label { font-size: 9px; margin-right: 7px; }
  .bo-meta-value { font-size: 14px; }
  .section { padding: 20px 20px; }
  .credits-grid { grid-template-columns: 1fr; }
  .drop-chart-wrap { height: 200px; }
  .chart-container { height: 240px; }
}

/* ── Similar Movies + Box Office Comparisons (added Jul 2026) ── */
.ss-sim { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.ss-card { text-decoration: none; color: inherit; display: block; }
.ss-ph { display: block; aspect-ratio: 2/3; border-radius: 9px; overflow: hidden; background: #18181b; box-shadow: 0 10px 26px rgba(0,0,0,.45); transition: transform .16s, box-shadow .16s; }
.ss-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-card:hover .ss-ph { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(0,0,0,.6); }
.ss-ct { display: block; font-size: 13px; font-weight: 600; margin-top: 10px; color: #fff; }
.ss-cm { display: block; font-size: 11px; color: rgba(255,255,255,.35); margin-top: 1px; }
.ss-cg { display: block; font-size: 12.5px; color: #eab308; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }

.ss-cmp { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.featured-card { border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 20px 20px 18px; background: transparent; display: flex; gap: 22px; align-items: center; text-decoration: none; color: inherit; transition: border-color .15s, background .15s; }
.featured-card:hover { border-color: rgba(255,255,255,.15); background: rgba(255,255,255,.04); }
.fc-fan { display: flex; flex-shrink: 0; width: 203px; justify-content: center; padding: 8px 4px 4px 8px; }
.fc-fan img { display: block; width: 68px; height: 102px; border-radius: 7px; object-fit: cover; border: 2px solid #111; margin-left: -27px; box-shadow: 0 8px 22px rgba(0,0,0,.42); background: #18181b; }
.fc-fan img:first-child { margin-left: 0; }
.fc-fan img:nth-child(1) { transform: rotate(-7deg); }
.fc-fan img:nth-child(2) { transform: rotate(-2deg) translateY(-4px); }
.fc-fan img:nth-child(3) { transform: rotate(3deg); }
.fc-fan img:nth-child(4) { transform: rotate(8deg) translateY(3px); }
.fc-tx { min-width: 0; }
.fc-eb { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.35); display: block; }
.fc-t { font-size: 15.5px; font-weight: 800; color: #fff; line-height: 1.3; margin-top: 2px; display: block; }
.fc-m { font-size: 12px; color: rgba(255,255,255,.45); margin-top: 3px; line-height: 1.45; display: block; }

.ss-cta-wrap { margin-top: 16px; text-align: center; }
.ss-cta { display: inline-block; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.7); text-decoration: none; border: 1px solid rgba(255,255,255,.15); border-radius: 100px; padding: 9px 20px; transition: color .15s, border-color .15s, background .15s; }
.ss-cta:hover { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.04); }
.ss-empty { text-align: center; padding: 6px 0 4px; }
.ss-empty-txt { font-size: 13.5px; color: rgba(255,255,255,.5); margin: 0 0 16px; }
.ss-cta-solid { background: #fff; color: #111; border-color: #fff; }
.ss-cta-solid:hover { background: rgba(255,255,255,.9); color: #111; border-color: #fff; }

@media (max-width: 760px) {
  .ss-sim { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .ss-cmp { grid-template-columns: 1fr; }
}

/* == Chart tooltip card - ported from the Jul 22 2026 compare-view redesign ==
   Theme-aware hairline card. Replaces the old hardcoded-dark inline-cssText
   tooltip, so it now follows light mode via the site tokens instead of
   re-deriving colors in JS. .solo = single-series chart (no series label). */
.bo-tt{position:absolute;z-index:9999;pointer-events:none;opacity:0;transition:opacity .12s,left .08s ease-out,top .08s ease-out;min-width:170px;background:var(--bg-elevated,#1f1f23);border:1px solid var(--border-medium,rgba(255,255,255,.1));border-radius:12px;padding:11px 13px 9px;box-shadow:var(--shadow-elevated,0 16px 48px rgba(0,0,0,.5))}
.bo-tt .tt-t{font-size:9px;font-weight:700;color:var(--text-faint,rgba(255,255,255,.35));letter-spacing:.14em;text-transform:uppercase;padding-bottom:7px;border-bottom:1px solid var(--border-subtle,rgba(255,255,255,.06));margin-bottom:7px}
.bo-tt .tt-r{display:flex;align-items:center;gap:8px;padding:2.5px 0}
.bo-tt .tt-d{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.bo-tt .tt-n{font-size:11px;font-weight:600;color:var(--text-secondary,rgba(255,255,255,.7));flex:1;padding-right:14px;white-space:nowrap}
.bo-tt .tt-v{font-size:12px;font-weight:800;color:var(--text-primary,#fff);font-variant-numeric:tabular-nums}
.bo-tt .tt-r.lead .tt-v{font-size:12.5px}
.bo-tt .tt-r.solo .tt-v{flex:1}