/* NOX featured rail: complete artwork and an integrated caption. */
.hero-reel { --hero-accent:#ef334b; width:100% !important; height:auto !important; min-height:0; margin:0 auto !important; padding:12px 0 6px !important; isolation:isolate; }
.hero-reel + .section-best { margin-top:20px !important; }
.hero-reel .hero2-stage { --rail-gutter:0px; position:relative; container-type:inline-size; width:100%; height:auto !important; min-height:0; margin-inline:auto; overflow:hidden; border:0 !important; border-radius:0; background:transparent; box-shadow:none; isolation:isolate; }
.hero-reel .hero2-track { --deck-drag-x:0px; position:relative; inset:auto; box-sizing:border-box; display:grid !important; grid-template-columns:minmax(0,1fr); align-items:start; gap:0; width:100%; height:auto; padding:8px var(--rail-gutter) 12px !important; overflow:visible !important; cursor:grab; touch-action:pan-y pinch-zoom; user-select:none; }
.hero-reel .hero2-track.is-dragging { cursor:grabbing; }
.hero-reel .hero2-card,
.hero-reel .hero2-card[data-chat],
.hero-reel .hero2-campaign {
  --hero-accent:#ef334b;
  position:relative !important; inset:auto; box-sizing:border-box; grid-area:1 / 1;
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr; align-self:stretch;
  width:100% !important; height:auto !important; min-width:0 !important; aspect-ratio:auto !important;
  margin:0; overflow:hidden; border:1px solid #303034 !important; border-radius:14px !important;
  background:#171719; box-shadow:none !important; cursor:pointer; visibility:hidden; opacity:0;
  transform:translate3d(110%,0,0); transform-origin:center;
  transition:transform .46s cubic-bezier(.22,.8,.25,1),opacity .3s ease,visibility .46s;
  isolation:isolate; -webkit-user-drag:none;
}
.hero-reel .hero2-card[aria-current="true"] { z-index:3; visibility:visible; opacity:1; transform:translate3d(var(--deck-drag-x),0,0) !important; }
.hero-reel .hero2-card.is-next { z-index:2; visibility:visible; opacity:.4; transform:translate3d(calc(100% + 14px),0,0) scale(.96) !important; }
.hero-reel .hero2-card.is-prev { z-index:2; visibility:visible; opacity:.4; transform:translate3d(calc(-100% - 14px),0,0) scale(.96) !important; }
.hero-reel .hero2-card.is-after-next { visibility:hidden; opacity:0; }
.hero-reel .hero2-card:focus-visible { outline:2px solid #ff5268; outline-offset:-3px; }
.hero-reel .hero2-track.is-dragging .hero2-card { transition-duration:0s; }
/* The artwork carries the title: never crop it or overlay UI copy. */
.hero-reel .hero2-img,
.hero-reel .hero2-campaign .hero2-img,
.hero-reel .villains-hero-card .hero2-img,
.hero-reel .hero2-card[data-chat="seola"] .hero2-img {
  position:relative; z-index:0 !important; inset:auto !important; display:block;
  width:100% !important; height:auto !important; aspect-ratio:3 / 2; object-fit:contain !important;
  object-position:center !important; filter:none !important; mask-image:none !important;
  -webkit-mask-image:none !important; transform:none !important; border-radius:0;
  user-select:none; -webkit-user-drag:none;
}
.hero-reel .hero2-caption { position:relative; z-index:1; inset:auto; display:grid; grid-template-columns:minmax(0,1fr) 40px; grid-template-areas:"tag cta" "copy cta"; align-content:center; align-items:center; gap:7px 14px; min-height:96px; box-sizing:border-box; padding:16px 20px; border-top:1px solid #303034; background:#171719; color:#f5f5f5; text-align:left; pointer-events:none; }
.hero-reel .hero2-caption > span { grid-area:tag; color:#ed8d98; font:600 12px/1.5 var(--c-sans); letter-spacing:-.01em; }
.hero-reel .hero2-caption > p { grid-area:copy; margin:0; color:#f5f5f5; font:700 18px/1.5 var(--c-sans); letter-spacing:-.025em; word-break:keep-all; overflow-wrap:anywhere; text-wrap:pretty; }
.hero-reel .hero2-caption > em { grid-area:cta; display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid #71303b; border-radius:50%; background:#352027; color:#ff6b7e; font:0/1 var(--c-sans); }
.hero-reel .hero2-caption > em i { font-size:19px; }
.hero-reel .hero2-card::before,
.hero-reel .hero2-card::after,
.hero-reel .hero2-grad,
.hero-reel .hero2-backdrop,
.hero-reel .hero2-body,
.hero-reel .hero2-counter,
.hero-reel .hero2-console,
.hero-reel .hero2-pagination,
.hero-reel .hero2-progress { display:none !important; }
.hero-reel .hero2-nav { position:absolute; z-index:5; top:calc((100cqw - 2 * var(--rail-gutter)) / 3 + 8px) !important; bottom:auto !important; display:grid !important; place-items:center; width:42px !important; height:42px !important; margin:0; padding:0; border:1px solid #46464a !important; border-radius:50%; background:#1b1b1f !important; color:#f5f5f5; box-shadow:none; transform:translateY(-50%); cursor:pointer; transition:background .18s ease,border-color .18s ease; }
.hero-reel .hero2-nav.prev { left:calc(var(--rail-gutter) - 21px) !important; }
.hero-reel .hero2-nav.next { right:calc(var(--rail-gutter) - 21px) !important; }
.hero-reel .hero2-nav:hover { background:#332127 !important; border-color:#ba4558 !important; }
.hero-reel .hero2-nav:focus-visible { outline:2px solid #ff5268; outline-offset:3px; }
.hero-reel .hero2-nav i { font-size:19px; }
@media (max-width:767px) {
  .hero-reel { padding:6px 0 2px !important; }
  .hero-reel + .section-best { margin-top:14px !important; }
  /* Phones: the banner keeps the same 16px side gutter as the thumbnail rails below it. */
  .hero-reel .hero2-stage { --rail-gutter:16px; }
  .hero-reel .hero2-card,
  .hero-reel .hero2-card[data-chat],
  .hero-reel .hero2-campaign { border-radius:12px !important; }
  .hero-reel .hero2-caption { min-height:94px; padding:13px 14px; grid-template-columns:minmax(0,1fr) 32px; gap:6px 10px; }
  .hero-reel .hero2-caption > span { font-size:12px; }
  .hero-reel .hero2-caption > p { font-size:16px; line-height:1.5; }
  .hero-reel .hero2-caption > em { width:32px; height:32px; }
  .hero-reel .hero2-caption > em i { font-size:17px; }
  .hero-reel .hero2-nav { width:36px !important; height:40px !important; border-radius:10px; }
  .hero-reel .hero2-nav.prev { left:calc(var(--rail-gutter) + 6px) !important; }
  .hero-reel .hero2-nav.next { right:calc(var(--rail-gutter) + 6px) !important; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-reel *, .hero-reel *::before, .hero-reel *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
/* Desktop: the featured rail spans the full content width, so keep the card height in check with a wider crop that preserves the title area. */
@media (min-width:768px) {
  .hero-reel .hero2-img,
  .hero-reel .hero2-campaign .hero2-img,
  .hero-reel .villains-hero-card .hero2-img,
  .hero-reel .hero2-card[data-chat="seola"] .hero2-img { aspect-ratio:16 / 9; object-fit:cover !important; object-position:center 28% !important; }
}

/* Desktop rail: caption rides on the artwork, arrows sit inside the frame, one rounded card. */
@media (min-width:768px) {
  .hero-reel .hero2-card,
  .hero-reel .hero2-card[data-chat],
  .hero-reel .hero2-campaign { grid-template-rows:auto; border:0 !important; border-radius:18px !important; background:#0d0d10; }
  .hero-reel .hero2-caption { position:absolute; left:0; right:0; bottom:0; z-index:2; min-height:0; padding:44px 30px 26px; border-top:0; background:linear-gradient(180deg, rgba(8,8,10,0) 0%, rgba(8,8,10,.55) 45%, rgba(8,8,10,.86) 100%); grid-template-columns:minmax(0,1fr) auto; gap:8px 18px; }
  .hero-reel .hero2-caption > span { font:700 12px/1.4 var(--c-sans); letter-spacing:.14em; text-transform:uppercase; color:#ff9aa6; }
  .hero-reel .hero2-caption > p { font:800 24px/1.35 var(--c-sans); letter-spacing:-.03em; color:#fff; text-shadow:0 4px 18px rgba(0,0,0,.6); max-width:24em; }
  .hero-reel .hero2-caption > em { width:auto; height:44px; padding:0 18px 0 20px; border-radius:999px; border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.12); color:#fff; font:700 13px/1 var(--c-sans); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
  .hero-reel .hero2-caption > em i { font-size:16px; }
  .hero-reel .hero2-card:hover .hero2-caption > em { background:#ef334b; border-color:#ff6b7e; }
  .hero-reel .hero2-nav { top:50% !important; transform:translateY(-50%); width:44px !important; height:44px !important; border:1px solid rgba(255,255,255,.22) !important; background:rgba(10,10,12,.55) !important; color:#fff !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
  .hero-reel .hero2-nav.prev { left:16px !important; }
  .hero-reel .hero2-nav.next { right:16px !important; }
  .hero-reel .hero2-nav:hover { background:rgba(239,51,75,.85) !important; border-color:#ff6b7e !important; }
}