/* 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;
  /* Two gradients, each monotonic, each eased — see the long note on
     .pf-hero::after in account/account.css. The single five-stop version
     this replaces dipped to 15% at 55% and climbed back to 30% at the
     top, and that reversal drew a visible shelf across the middle of any
     flat backdrop. Kept hardcoded dark, as it was — the movie hero has
     never had a light-theme variant. */
  background:
    linear-gradient(to bottom,
      rgba(10,10,10,.30) 0%,
      rgba(10,10,10,.27) 8%,
      rgba(10,10,10,.19) 18%,
      rgba(10,10,10,.10) 28%,
      rgba(10,10,10,.035) 36%,
      rgba(10,10,10,0) 44%),
    linear-gradient(to top,
      #0a0a0a 0%,
      rgba(10,10,10,.97) 8%,
      rgba(10,10,10,.90) 16%,
      rgba(10,10,10,.80) 24%,
      rgba(10,10,10,.67) 32%,
      rgba(10,10,10,.53) 40%,
      rgba(10,10,10,.40) 48%,
      rgba(10,10,10,.28) 56%,
      rgba(10,10,10,.18) 64%,
      rgba(10,10,10,.105) 72%,
      rgba(10,10,10,.055) 80%,
      rgba(10,10,10,.022) 88%,
      rgba(10,10,10,0) 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) ─────────────────────────────────────
   The compare button keeps the frosted-chip recipe. The rating row no longer
   does — see the note below it. */
.bow-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(10,10,10,0.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 100px;
  padding: 8px 18px;
  font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,0.85);
  text-decoration: none; cursor: pointer;
  font-family: inherit;
  transition: border-color 0.2s;
}
.bow-chip:hover { border-color: rgba(255,255,255,0.3); }
.bow-chip:focus-visible { outline: 2px solid rgba(34,197,94,0.55); outline-offset: 3px; }

.compare-btn-wrap {
  max-width: 1200px; margin: 0 auto;
  padding: 24px 64px 0;
  display: flex; justify-content: center;
}
.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; }
}

/* ── RATING ROW (hero, under the score row) ──────────────────────────────
   Was two frosted pills; they were the only chip chrome left under a score
   row that was deliberately de-chipped in July, and on a phone they wrapped
   flush against each other with no gap. This is one flat line instead:

       You  ★★★☆☆   │   Users  4.4  (42)

   It stays on one line at 390px, which the pills never did.

   Stars AND your number are both visible once you have rated — the D1 band
   shows them side by side, matching the Users segment opposite. They used to
   swap (stars fade out, number fades in, stars back on hover), which meant the
   rated state showed a bare number and the control looked inert.

   Because both are always on screen the row's width now changes when a rating
   is saved, which is fine: it only happens on save, never mid-hover. rate.js
   deliberately does not repaint the number during a hover preview, so the
   stars move under the cursor and the width does not. Touch has no hover, so
   rate.js adds .is-open on the first tap and only saves on the second.

   The hero band stays dark in BOTH themes (.hero-fade is #0a0a0a with no light
   override), so there are deliberately no [data-theme="light"] rules here. --- */
.bow-rating-row { display: flex; justify-content: center; margin-top: 20px; }

/* Option D1 from _rating-options-for-review.html — one outlined band holding the
   brand cell, the site's user average and your own rating, so both numbers read
   as belonging to this site rather than to the row of other people's scores
   above. Segments are separated by hairlines, not gaps. */
.bow-band {
  display: flex; align-items: center;
  border: 1px solid rgba(255,255,255,0.22); border-radius: 12px;
  overflow: hidden; background: transparent;
}
.bow-brand {
  display: flex; align-items: center; gap: 7px; padding: 9px 13px;
  border-right: 1px solid rgba(255,255,255,0.18);
}
.bow-brand-tile {
  width: 19px; height: 19px; border-radius: 5px; background: #efeeea;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.bow-brand-tile b {
  font-family: "Alfa Slab One", serif; font-size: 11px; color: #101010;
  line-height: 1; font-weight: 400; transform: translateY(0.5px);
}
.bow-brand-wm {
  font-family: "Alfa Slab One", serif; font-size: 10px;
  color: rgba(255,255,255,0.62); line-height: 1.15; text-align: left;
}
.bow-seg { padding: 9px 15px; }
.bow-seg + .bow-seg { border-left: 1px solid rgba(255,255,255,0.18); }
.bow-rate[hidden] { display: none; }

.bow-rate {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; font-family: inherit;
}
.bow-rate:focus-visible { outline: 2px solid rgba(34,197,94,0.55); outline-offset: 4px; border-radius: 6px; }
.bow-rate-label {
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

/* stars then number, side by side — never a swap */
.bow-rate-swap { display: inline-flex; align-items: center; gap: 8px; line-height: 0; }
.bow-rate-stars { display: inline-flex; gap: 3px; }
.bow-rate-value {
  font-size: 13.5px; font-weight: 800; color: #fff;
  font-variant-numeric: tabular-nums; line-height: 1; pointer-events: none;
}
/* unrated, rate.js leaves this empty — no stray flex gap for a span with nothing in it */
.bow-rate-value:empty { display: none; }

.bow-rate-star {
  position: relative; width: 14px; height: 14px; flex-shrink: 0;
  background: none; border: none; padding: 0; cursor: pointer; line-height: 0;
}
.bow-rate-star svg { width: 14px; height: 14px; display: block; }
.bow-rate-star .bow-rate-outline { stroke: rgba(255,255,255,0.52); stroke-width: 1.6; fill: none; }
.bow-rate-fill {
  position: absolute; inset: 0; width: 0; overflow: hidden;
  pointer-events: none; transition: width 0.12s ease;
}
.bow-rate-fill svg { fill: #22c55e; stroke: #22c55e; stroke-width: 1.6; }
/* Fingers, not cursors. The hit area grows with a pseudo-element rather than
   padding — padding would push the stars 14px apart and break the row. */
.bow-rate-star::after { content: ''; position: absolute; inset: -8px -3px; }

.bow-rate.is-saving { opacity: 0.6; pointer-events: none; }
/* A save that fails says so rather than silently repainting the old rating.
   Both message states hide the swap and let the label run long — "You" is
   three characters, the messages are not. */
.bow-rate.is-error .bow-rate-swap,
.bow-rate.is-signedout .bow-rate-swap { display: none; }
.bow-rate.is-error .bow-rate-label { color: var(--accent-red-text, #ef4444); }
/* Session over rather than stale: the row becomes a way back in, so it reads
   as an invitation rather than a failure — green like the other calls to
   action on the page, not red. */
.bow-rate.is-signedout .bow-rate-label { color: var(--accent-green-text, #22c55e); }
/* Signed out and collapsed, that label is not a field caption any more, it is
   the only thing in the row asking to be tapped. 8.5px/0.13em is the size the
   word "YOU" wants; "Rate this movie" carrying the same weight as the amber
   Users average next to it wants a step up. */
.bow-rate.is-signedout .bow-rate-cta { color: var(--accent-green-text, #22c55e); }
.bow-rate.is-signedout:hover .bow-rate-cta { color: #4ade80; }

/* ── Signed out: one grid cell, two states ──────────────────────────────
   The call to action and the label+stars sit in the SAME cell, so the
   segment is always as wide as the wider of the two and swapping between
   them cannot reflow the row. On a mouse the swap happens on hover, and
   the pill is inline-flex centred in the hero: if the segment resized, the
   whole pill would re-centre under the pointer and slide the stars out
   from where they just appeared, so you would rate whatever landed under
   your cursor. Reserving the width is what makes hover-to-open safe. */
.bow-rate.bow-rate--cta { display: grid; grid-template-columns: auto; align-items: center; }
.bow-rate.bow-rate--cta > .bow-rate-cta,
.bow-rate.bow-rate--cta > .bow-rate-pair { grid-area: 1 / 1; justify-self: center; }
.bow-rate-pair { display: inline-flex; align-items: center; gap: 8px; }
.bow-rate-cta {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 0.14s ease;
}
/* Expanded, the CTA is gone and "You" + the stars take the cell. Collapsed,
   the reverse. Visibility rather than display so neither stops contributing
   its width to the grid. */
.bow-rate.bow-rate--cta:not(.is-signedout) > .bow-rate-cta { opacity: 0; visibility: hidden; }
.bow-rate.bow-rate--cta.is-signedout > .bow-rate-pair { opacity: 0; visibility: hidden; }
/* The base .is-signedout rule display:none's the swap for the expired-session
   state. Inside the two-state grid it has to keep occupying its cell, or the
   pair collapses and the segment resizes on hover after all. */
.bow-rate.bow-rate--cta.is-signedout .bow-rate-swap { display: inline-flex; }

.bow-uravg { display: inline-flex; align-items: center; gap: 8px; cursor: default; }
.bow-uravg-k {
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.bow-uravg-val {
  font-size: 13.5px; font-weight: 800; color: #fff;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.bow-uravg-sub { font-size: 10.5px; font-weight: 600; color: rgba(255,255,255,0.36); }

/* The site average is amber; your own rating stays green, so the two numbers in
   the band are never mistaken for each other. */
.bow-uravg-stars { display: inline-flex; gap: 3px; line-height: 0; }
.bow-uravg-star { position: relative; display: block; width: 14px; height: 14px; flex: 0 0 auto; }
.bow-uravg-star svg { width: 14px; height: 14px; display: block; }
.bow-uravg-star-o svg { fill: none; stroke: rgba(255,255,255,0.38); stroke-width: 1.6; }
.bow-uravg-star-f { position: absolute; inset: 0; overflow: hidden; }
.bow-uravg-star-f svg { fill: #fbbf24; stroke: #fbbf24; stroke-width: 1.6; }

/* On a phone the band keeps the tile but drops the wordmark, and the site
   average shows as a number only — five amber stars plus five green ones is
   more star than a 390px row can carry. */
@media (max-width: 600px) {
  .bow-rating-row { margin-top: 16px; }
  .bow-brand { padding: 8px 10px; gap: 6px; }
  .bow-brand-wm { display: none; }
  .bow-seg { padding: 8px 11px; }
  .bow-uravg, .bow-rate { gap: 6px; }
  .bow-uravg-stars { display: none; }
  .bow-uravg-sub { font-size: 9.5px; }
  .bow-rate-star, .bow-rate-star svg { width: 13px; height: 13px; }
  .bow-rate-star::after { inset: -11px -4px; }
}

/* ── 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; }

/* Theater-count caption. The theater chart is the one chart on the page whose
   y-axis is zero-based (see bOpts's `zero` arg) — which is honest about how much
   of its footprint a film kept, but squashes a normal 15-20% contraction into the
   top of the plot. A reader read the old auto-fitted axis as a collapse to near
   zero (The Odyssey, 3,942 -> 3,217 = -18.4%, Aug 2026). This states the magnitude
   in text so nothing depends on reading it off pixel heights. */
.chart-cap { display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; margin: 8px 2px 0; font-size: 11.5px; color: var(--text-muted);
  font-variant-numeric: tabular-nums; }
.chart-cap:empty { display: none; }
/* Same .neg/.pos tokens the data tables use (.bo-table .neg / .pos) rather than a
   second red invented here — those classes are scoped to .bo-table, so the colour
   has to be restated, but the VALUES are deliberately identical. A caption whose
   job is to say "this is a normal contraction" should not shout in a red the rest
   of the page doesn't use. */
.chart-cap .cap-delta { font-weight: 700; }
.chart-cap .cap-delta.neg { color: var(--accent-red); }
.chart-cap .cap-delta.pos { color: var(--accent-green-bright); }
/* Divider rules. These have to inset by the same gutter as the content column
   at EVERY width, which they previously did not: .section-divider capped at
   1100px with no padding, so above ~1228px it looked correctly inset, and
   anywhere below 1100px it ran the full bleed of the viewport — while
   .bo-table-divider-wrap, which is padded, kept its 64px inset the whole way
   down. Two dividers on the same page, one touching the edges and one not,
   and only in a middle band of widths.

   background-clip:content-box is what fixes it without touching any markup:
   the element keeps the section's own 1200/64 geometry, and the background —
   which IS the line — is clipped to the content box, so the padding shows
   nothing. The gutters below mirror .bo-table-divider-wrap exactly; if one
   changes, change both. */
.section-divider {
  height: 1px;
  background: var(--border-subtle);
  background-clip: content-box;
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 64px;
}
.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; }
  .section-divider { padding: 0 40px; }
}
@media (max-width: 600px) {
  .pred-section { padding: 22px 20px 28px; }
  .bo-table-divider-wrap { padding: 0 20px; }
  .section-divider { 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; }
/* Poster is a CSS background, not an <img>, so Google cannot choose it as this
   page's search-result thumbnail — five clean posters here used to outrank the
   film's own cropped hero backdrop. The rail's own lazy loading is done by the
   IntersectionObserver beside it in movie-template.hbs. */
.ss-ph { display: block; aspect-ratio: 2/3; border-radius: 9px; overflow: hidden;
  background-color: #18181b; background-size: cover; background-position: center; box-shadow: 0 10px 26px rgba(0,0,0,.45); transition: transform .16s, box-shadow .16s; }
/* .ss-ph img removed — the poster is a background now. */
.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}

/* ── Predict the Final entry point (design frame 4h) ────────────────────────
   Injected by /account/final-call.js only when the film actually has a call
   window, so .pred-head keeps its original centred single-stat layout on the
   ~1,700 catalogue films that are not in the game. Everything below is scoped
   to .has-twin for that reason.

   .has-twin is the split head; .has-trio (further down) widens it from two
   stats to three by adding the BOW users median between the model and the
   member's own call. The `twin` names predate the third column and are kept
   because final-call.js and this file are the only two places they appear —
   renaming both at once only buys a deploy window where a cached copy of one
   disagrees with a fresh copy of the other. */
.pred-head.has-twin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
}
.pred-head.has-twin .pred-twin-col {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 26px;
  position: relative;
}
/* The 1px rule between the two stats. A border on the second column rather
   than a separate element, so there is nothing to keep in sync if one side is
   ever hidden. */
.pred-head.has-twin .pred-twin-you {
  border-left: 1px solid var(--border-light, rgba(255,255,255,.1));
}
.pred-head.has-twin .pred-twin-lbl {
  margin-top: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-faint, rgba(255,255,255,.4));
}
/* The model range is the established number, so it keeps its weight; the
   member's call matches its size but sits muted until it exists. */
.pred-head.has-twin .pred-twin-val {
  font-size: 36px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.005em;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.pred-head.has-twin .pred-twin-val.is-empty {
  color: var(--text-faint, rgba(255,255,255,.35));
}
/* Label and action on one line under the number, so "Your call" reads as the
   twin of "The model" opposite it. */
.pred-head.has-twin .pred-twin-row {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pred-head.has-twin .pred-twin-row .pred-twin-lbl { margin-top: 0; }
.pred-head.has-twin .pred-twin-cta {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-green-text, #22c55e);
  text-decoration: none;
}
.pred-head.has-twin .pred-twin-cta:hover { text-decoration: underline; }

/* .pred-delta was absolutely positioned against .pred-head; final-call.js moves
   it inside the model column, so re-anchor it there. */
.pred-head.has-twin .pred-twin-col .pred-delta {
  position: static;
  transform: none;
  display: inline-block;
  margin-top: 8px;
}

@media (max-width: 700px) {
  /* Side by side at 36px would wrap mid-number on a phone. Stack, and turn the
     vertical rule into a horizontal one. */
  .pred-head.has-twin { flex-direction: column; gap: 18px; }
  .pred-head.has-twin .pred-twin-col { padding: 0; width: 100%; }
  .pred-head.has-twin .pred-twin-you {
    border-left: none;
    border-top: 1px solid var(--border-light, rgba(255,255,255,.1));
    padding-top: 18px;
  }
  .pred-head.has-twin .pred-twin-val,
  .pred-head.has-twin .pred-headline { font-size: 30px; }
}

/* ── the third stat: BOW users (design frame 4h) ────────────────────────────
   final-call.js adds .has-trio alongside .has-twin, so everything above still
   applies to the columns and only the container geometry changes here. Grid
   rather than flex because the mobile layout is not a stack — the model keeps
   a full-width row of its own and the two single-number stats sit side by side
   underneath it, which is a 2-row grid and an awkward thing to express in
   flex.

   Equal thirds: the widest range the model publishes ("$1.07B–$1.14B") sets
   about 175px at 30px, well inside a third of the 1072px content width, so
   weighting the model column only made the three labels sit unevenly. */
.pred-head.has-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 0;
  text-align: center;
}
.pred-head.has-trio .pred-twin-col { padding: 0 18px; }
/* Two rules now, one before each of the right-hand stats. Still borders on the
   columns themselves rather than separate elements, for the same reason as
   before: nothing to keep in sync if a column is ever dropped. */
.pred-head.has-trio .pred-twin-users,
.pred-head.has-trio .pred-twin-you {
  border-left: 1px solid var(--border-light, rgba(255,255,255,.1));
}
.pred-head.has-trio .pred-twin-val,
.pred-head.has-trio .pred-headline { font-size: 30px; }

/* The call count under the median. Same faint weight as the labels beside it —
   it is context, not a stat — and separated by the site's middot rather than a
   second element. */
.pred-head.has-trio .pred-twin-sub {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-faint, rgba(255,255,255,.4));
  font-variant-numeric: tabular-nums;
  /* The row is centred as a unit, so anything that changes this element's
     width slides "BOW USERS" sideways. The template serves it empty and the
     count arrives a round trip later, so without a reserved box the label
     visibly re-centres the moment the number lands. 62px covers every count
     the copy produces up to "12,843 calls" and "No calls yet", which is well
     past any plausible field size. */
  min-width: 62px;
  text-align: left;
}
.pred-head.has-trio .pred-twin-sub::before {
  content: '·';
  margin-right: 8px;
}
/* Same reasoning one level down: the separator has to hold its space while the
   column is unresolved, but a lone middot hanging off "BOW USERS" for the
   length of a round trip looks like a rendering fault. Hidden, not removed. */
.pred-head.has-trio .pred-twin-sub.is-pending::before { visibility: hidden; }
/* "The model" has no second item on its line, so it keeps the block spacing
   the single-stat version used rather than sitting in a row. */
.pred-head.has-trio .pred-twin-lbl-solo { display: block; }

@media (max-width: 1000px) {
  /* Three columns of 30px numerals stop fitting before the tablet breakpoint
     does — the range is the first thing to break, so step it down early. */
  .pred-head.has-trio .pred-twin-val,
  .pred-head.has-trio .pred-headline { font-size: 26px; }
  .pred-head.has-trio .pred-twin-col { padding: 0 12px; }
}

@media (max-width: 700px) {
  /* The model keeps a row to itself; users and your call split the row below
     it, because each is a single figure and stacking all three would push the
     bar most of a screen down the page. */
  .pred-head.has-trio {
    grid-template-columns: 1fr 1fr;
    row-gap: 18px;
    /* Stretch, not the centring the desktop row uses. "Your call" carries a
       label and an action that wrap onto two lines at this width while
       "BOW users" stays on one, so centring each column inside the row leaves
       the taller one sitting ~10px higher — its top rule breaks the line the
       other column's rule draws, and the two figures miss each other's
       baseline. Stretching makes both columns the row's height, so the rules
       meet as one edge and the numbers line up under it. */
    align-items: stretch;
  }
  .pred-head.has-trio .pred-twin-col { padding: 0 12px; width: auto; }
  .pred-head.has-trio .pred-twin-col:first-child {
    grid-column: 1 / -1;
    padding: 0;
  }
  /* Undoes the two-stat mobile rule above, which turned this rule horizontal
     on the assumption the columns were stacked. Here they are side by side. */
  /* The rule these two carry is a real edge the numbers sit under, so it needs
     more clearance than the 18px gap between grid rows — at 18px the digits
     read as resting on the line rather than below it. */
  .pred-head.has-trio .pred-twin-users,
  .pred-head.has-trio .pred-twin-you {
    border-top: 1px solid var(--border-light, rgba(255,255,255,.1));
    padding-top: 22px;
  }
  .pred-head.has-trio .pred-twin-users { border-left: none; }
  .pred-head.has-trio .pred-twin-you {
    border-left: 1px solid var(--border-light, rgba(255,255,255,.1));
  }
  .pred-head.has-trio .pred-headline { font-size: 28px; }
  .pred-head.has-trio .pred-twin-val { font-size: 24px; }
}

@media (max-width: 600px) {
  .pred-head.has-trio .pred-headline { font-size: 25px; }
  .pred-head.has-trio .pred-twin-val { font-size: 21px; }
  .pred-head.has-trio .pred-twin-lbl,
  .pred-head.has-trio .pred-twin-sub,
  .pred-head.has-trio .pred-twin-cta { font-size: 9.5px; letter-spacing: .08em; }
  .pred-head.has-trio .pred-twin-sub::before { margin-right: 5px; }
  .pred-head.has-trio .pred-twin-sub { min-width: 54px; }
  .pred-head.has-trio .pred-twin-row { gap: 6px; }
  /* LONGHAND, deliberately. The `padding` shorthand here would reset the
     padding-top the 700px block sets on the two lower columns, and the rule
     they carry on their top border would then sit 1px off the digits. */
  .pred-head.has-trio .pred-twin-col { padding-left: 12px; padding-right: 12px; }
}

/* ── users / your-call markers on the bar ───────────────────────────────────
   The same two markers /play/final/ draws on its card, ported onto the movie
   page so the three headline figures are placed against the model's range
   rather than only stated above it. Added by final-call.js, which derives the
   positions from the bar's own labels — see barScale() there.

   The bar already carries one label under it ("$553.1M so far"), so a marker
   label can collide with it. final-call.js measures and assigns .lbl-row-1 /
   .lbl-row-2 to anything that would overlap, and tags the wrapper with the
   number of rows in use so the section grows to fit instead of clipping.

   The users tick keeps the board's solid neutral bar rather than going dashed
   like the green one: dashed at 2px over the mid-green band loses half its ink
   and all but disappears. It is instead shorter and a step dimmer than
   .pred-bar-tick, which sits on this bar at the model's midpoint in near-white
   — so the model's mark stays the brightest thing on the bar and the crowd's
   reads as secondary, with its own label directly underneath to name it. */
.pred-section .pred-bar-users {
  position: absolute; top: -2px; width: 2px; height: 12px;
  background: var(--text-muted); border-radius: 1px;
  transform: translateX(-50%);
}
.pred-section .pred-bar-you {
  position: absolute; top: -5px; width: 0; height: 18px;
  border-left: 2px dashed var(--accent-green-text, #22c55e);
  transform: translateX(-50%);
}
.pred-section .pred-bar-users-lbl,
.pred-section .pred-bar-you-lbl {
  position: absolute; bottom: -22px;
  font-size: 11px; font-weight: 600;
  transform: translateX(-50%); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pred-section .pred-bar-users-lbl { color: var(--text-secondary); }
.pred-section .pred-bar-you-lbl { color: var(--accent-green-text, #22c55e); font-weight: 700; }
.pred-section .pred-bar .lbl-row-1 { bottom: -40px; }
.pred-section .pred-bar .lbl-row-2 { bottom: -58px; }
.pred-section .pred-bar-wrap.rows-2 { padding-bottom: 46px; }
.pred-section .pred-bar-wrap.rows-3 { padding-bottom: 64px; }

@media (max-width: 600px) {
  .pred-section .pred-bar-users-lbl,
  .pred-section .pred-bar-you-lbl { font-size: 9px; bottom: -19px; }
  .pred-section .pred-bar .lbl-row-1 { bottom: -34px; }
  .pred-section .pred-bar .lbl-row-2 { bottom: -49px; }
  .pred-section .pred-bar-wrap.rows-2 { padding-bottom: 40px; }
  .pred-section .pred-bar-wrap.rows-3 { padding-bottom: 55px; }
  .pred-section .pred-bar-users { top: -2px; height: 11px; }
  .pred-section .pred-bar-you { top: -4px; height: 15px; }
}

/* Community rating chip — the visible counterpart to the aggregateRating in the
   movie page's JSON-LD. Google will not honour a rating a page marks up but
   never shows, so this element and that markup ship together or not at all;
   scripts/check-review-schema.py fails the build if the markup is present
   without it.

   NOTE: this file is the SOURCE. build.js copies it to assets/movie.css on
   every build (see the copyFileSync near the search-index write), so editing
   website-deploy/assets/movie.css directly is silently undone on the next
   build — which is exactly what happened the first time this rule was added. */
/* (the old .bow-uravg chip rules lived here; the flat rating row above
   replaces them — leaving them would win on source order and clobber it) */

/* ═══ ACCOUNT CARD — signed-out upsell (account.card) ═══════════════════════
   Same component as the homepage instances (index.html keeps its own inline
   copy — keep the two in sync). Sits between the box office summary and the
   prediction section on every movie page; the inline script in the template
   hides it for signed-in visitors via the same sb-*-auth-token check
   account/nav-auth.js trusts. Deliberately dark in both themes, like the
   homepage card. */
.acct-banner{max-width:1200px;margin:0 auto;padding:28px 64px 0}
.acct-banner .ab-card{display:block;position:relative;overflow:hidden;border-radius:14px;min-height:190px;background:#161616;border:1px solid rgba(255,255,255,.08);text-decoration:none}
.acct-banner .ab-panels{position:absolute;top:0;bottom:0;right:0;width:62%;overflow:hidden}
.acct-banner .ab-panels img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:brightness(.45);display:block}
.acct-banner .ab-grad{position:absolute;inset:0;background:linear-gradient(to right,#161616 0%,#161616 30%,rgba(22,22,22,.96) 36%,rgba(22,22,22,.88) 42%,rgba(22,22,22,.75) 48%,rgba(22,22,22,.60) 54%,rgba(22,22,22,.45) 60%,rgba(22,22,22,.32) 67%,rgba(22,22,22,.23) 75%,rgba(22,22,22,.18) 85%,rgba(22,22,22,.16) 100%)}
.acct-banner .ab-content{position:relative;z-index:2;padding:32px 38px;max-width:620px}
.acct-banner .ab-title{font-size:27px;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:#fff}
.acct-banner .ab-sub{font-size:14px;color:rgba(255,255,255,.55);margin-top:10px}
.acct-banner .ab-cta{display:inline-flex;align-items:center;background:#22c55e;color:#052e16;border-radius:100px;padding:10px 24px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:18px;transition:background .2s}
.acct-banner .ab-card:hover .ab-cta{background:#4ade80}
/* ── Account card: panel-split features (Aug 2026) ─────────────────────────
   Replaces the .ab-sub sentence on the GENERIC card only. Above 900px: a
   triptych of feature cells over the film still's right side (.ab-feats).
   At 900px and below: the cells swap for stacked plates between the title
   and the CTA (.ab-plates). The .ab-sub styles stay for the compare page's
   contextual card, which keeps its sentence. */
/* The still used to start as a hard vertical line at the panel's left edge —
   the veil dims it but never reaches full opacity there. Masking the image
   itself fades the photo out over its left third, so it dissolves into the
   card instead of beginning abruptly. */
.acct-banner .ab-panels img{-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.03) 5.5%,rgba(0,0,0,.10) 11%,rgba(0,0,0,.22) 16.5%,rgba(0,0,0,.35) 22%,rgba(0,0,0,.50) 27.5%,rgba(0,0,0,.65) 33%,rgba(0,0,0,.78) 38.5%,rgba(0,0,0,.90) 44%,rgba(0,0,0,.97) 49.5%,#000 55%);mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.03) 5.5%,rgba(0,0,0,.10) 11%,rgba(0,0,0,.22) 16.5%,rgba(0,0,0,.35) 22%,rgba(0,0,0,.50) 27.5%,rgba(0,0,0,.65) 33%,rgba(0,0,0,.78) 38.5%,rgba(0,0,0,.90) 44%,rgba(0,0,0,.97) 49.5%,#000 55%)}
.acct-banner .ab-feats{position:absolute;top:0;bottom:0;right:0;width:56%;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr auto auto auto 1fr;row-gap:7px;justify-items:center;align-items:center;background:linear-gradient(to right,rgba(8,8,8,0) 0%,rgba(8,8,8,.02) 8%,rgba(8,8,8,.07) 16%,rgba(8,8,8,.14) 24%,rgba(8,8,8,.22) 32%,rgba(8,8,8,.29) 40%,rgba(8,8,8,.33) 48%,rgba(8,8,8,.35) 58%,rgba(8,8,8,.35) 100%)}
.acct-banner .ab-feat{display:contents}
.acct-banner .ab-feat:nth-child(1)>*{grid-column:1}
.acct-banner .ab-feat:nth-child(2)>*{grid-column:2}
.acct-banner .ab-feat:nth-child(3)>*{grid-column:3}
.acct-banner .ab-feat>svg{grid-row:2;color:#22c55e}
.acct-banner .ab-feat-l{grid-row:3;align-self:start;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.85);text-align:center;padding:0 10px}
.acct-banner .ab-feat-d{grid-row:4;font-size:10px;font-weight:500;color:rgba(255,255,255,.55);line-height:1.35;text-align:center;padding:0 10px;min-height:2.7em}
@media(max-width:1080px){.acct-banner .ab-feat-d{font-size:9.5px;padding:0 6px}.acct-banner .ab-feat-l{font-size:10px;letter-spacing:.06em;padding:0 4px}}
.acct-banner .ab-plates{display:none}
@media(max-width:900px){
  .acct-banner .ab-feats{display:none}
  /* Higher specificity than the 700px max-width:320px rule (written for the
     old sub sentence): the plates want the card's full width. */
  .acct-banner .ab-card .ab-content{max-width:none}
  .acct-banner .ab-plates{display:flex;flex-direction:column;gap:7px;margin-top:14px}
  .acct-banner .ab-plate{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(10,10,10,.45)}
  .acct-banner .ab-plate svg{color:#22c55e;flex-shrink:0}
  .acct-banner .ab-plate-t{display:flex;flex-direction:column;gap:1px}
  .acct-banner .ab-plate-l{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.85)}
  .acct-banner .ab-plate-d{font-size:10.5px;font-weight:500;color:rgba(255,255,255,.55);line-height:1.35}
}

.acct-banner .ab-card:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@media(max-width:1000px){.acct-banner .ab-content{max-width:560px}}
@media(max-width:900px){.acct-banner{padding:24px 40px 0}}
@media(max-width:700px){
  .acct-banner .ab-card{min-height:0;border-radius:12px}
  .acct-banner .ab-panels{width:100%}
  .acct-banner .ab-grad{background:linear-gradient(to right,rgba(22,22,22,.92),rgba(22,22,22,.6) 70%)}
  .acct-banner .ab-content{padding:20px 18px;max-width:320px}
  .acct-banner .ab-title{font-size:19px}
  .acct-banner .ab-sub{font-size:11.5px;max-width:230px}
  .acct-banner .ab-cta{padding:8px 18px;font-size:10px;margin-top:14px}
}
@media(max-width:600px){.acct-banner{padding:22px 20px 0}}

/* The account card carries no bottom padding of its own, because on most pages
   the prediction section directly below supplies its own 28px top gutter. On a
   film with no prediction block the next thing is the "Box office performance"
   divider, whose wrap is zero-padded vertically — so the card's bottom edge ran
   straight into the divider rule. Give the divider the same pre-divider gutter
   the prediction section leaves (40/32/28) when it follows the card directly. */
.acct-banner + .bo-table-divider-wrap{padding-top:40px}
@media(max-width:900px){.acct-banner + .bo-table-divider-wrap{padding-top:32px}}
@media(max-width:600px){.acct-banner + .bo-table-divider-wrap{padding-top:28px}}