@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --ink: #101417;
  --ink-2: #242b30;
  --paper: #f6f5f1;
  --white: #fff;
  --line: #d8d8d3;
  --muted: #677077;
  --cyan: #19dfd0;
  --coral: #ff5c4d;
  --yellow: #f5d845;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Inter", Arial, sans-serif;
  --content: 760px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.75; }
body.modal-open { overflow: hidden; }
a { color: inherit; }
button, input { font: inherit; }
img { display: block; max-width: 100%; }
::selection { background: var(--cyan); color: var(--ink); }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 8px 14px; background: white; color: black; }
.skip-link:focus { top: 12px; }

.site-header { position: absolute; inset: 0 0 auto; z-index: 20; color: white; border-bottom: 1px solid rgba(255,255,255,.18); }
.site-header.is-stuck { position: fixed; background: rgba(11,15,18,.94); backdrop-filter: blur(16px); animation: drop .25s ease; }
@keyframes drop { from { transform: translateY(-100%); } }
.header-inner { max-width: 1380px; height: 76px; margin: auto; padding: 0 34px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; color: white; text-decoration: none; }
.brand-logo { width: 184px; height: auto; }
.desktop-nav { display: flex; align-items: center; gap: 24px; }
.desktop-nav a { color: rgba(255,255,255,.78); text-decoration: none; font-size: 13px; font-weight: 600; text-transform: uppercase; }
.desktop-nav a:hover { color: var(--cyan); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.menu-button { width: 42px; height: 42px; border: 0; color: white; background: transparent; cursor: pointer; display: none; place-content: center; gap: 5px; }
.menu-button span { width: 22px; height: 2px; display: block; background: currentColor; transition: .2s; }
.mobile-nav { display: none; padding: 8px 22px 20px; background: #0d1114; }
.mobile-nav a { display: block; padding: 10px 4px; border-bottom: 1px solid #293035; text-decoration: none; font-weight: 600; }

.hero { position: relative; height: min(850px, 94vh); min-height: 680px; color: white; overflow: hidden; background: #07121a; }
.hero > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,9,12,.93) 0%, rgba(5,9,12,.72) 35%, rgba(5,9,12,.12) 69%), linear-gradient(0deg, rgba(5,9,12,.7) 0%, transparent 38%); }
.hero-content { position: absolute; inset: 0; width: min(1380px, calc(100% - 68px)); margin: auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-top: 45px; }
.category, .eyebrow { color: var(--cyan); text-decoration: none; text-transform: uppercase; font-size: 12px; font-weight: 700; }
.category::before { content: ""; display: inline-block; width: 35px; height: 2px; margin-right: 10px; vertical-align: middle; background: var(--cyan); }
.hero h1 { max-width: 800px; margin: 18px 0 14px; font: 800 clamp(72px, 8.5vw, 144px)/.76 var(--display); text-transform: uppercase; letter-spacing: 0; }
.hero-deck { max-width: 570px; margin: 20px 0; color: rgba(255,255,255,.83); font-size: 17px; line-height: 1.65; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 0; margin: 4px 0 28px; color: rgba(255,255,255,.55); font-size: 11px; text-transform: uppercase; }
.hero-meta span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 12px 3px; background: var(--coral); }
.hero-meta strong { color: white; }
.primary-cta { display: inline-flex; align-items: center; gap: 34px; padding: 13px 14px 13px 20px; color: var(--ink); background: var(--cyan); text-decoration: none; font-size: 13px; font-weight: 800; text-transform: uppercase; transition: transform .2s, background .2s; }
.primary-cta b { display: grid; place-items: center; width: 30px; height: 30px; color: white; background: var(--ink); font-size: 17px; }
.primary-cta:hover { transform: translateY(-2px); background: white; }
.scroll-cue { position: absolute; bottom: 25px; right: 35px; display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.6); font-size: 10px; text-transform: uppercase; writing-mode: vertical-rl; }
.scroll-cue span { width: 1px; height: 38px; background: var(--coral); }

.top-banner-wrap { min-height: 146px; max-width: 1200px; margin: 34px auto 0; padding: 0 32px; }
.top-banner-wrap:empty { background: #0c1419; }
.top-article-banner { position: relative; min-height: 146px; padding: 24px 28px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; overflow: hidden; color: white; background: #0c1419; }
.top-banner-art { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,13,17,.98) 0%, rgba(8,13,17,.84) 46%, rgba(8,13,17,.28) 100%), url("nte-hero.png") center 58% / cover; }
.top-article-banner::after { content: ""; position: absolute; width: 170px; height: 170px; right: 25%; top: -100px; border: 26px solid rgba(25,223,208,.14); transform: rotate(45deg); }
.top-banner-copy { position: relative; z-index: 1; }
.top-banner-copy > span { display: block; margin-bottom: 8px; color: var(--cyan); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.top-banner-copy strong { display: block; font: 800 32px/.88 var(--display); }
.top-banner-copy small { display: block; margin-top: 10px; color: #8f999e; font-size: 9px; }
.top-article-banner > a { position: relative; z-index: 1; padding: 11px 12px 11px 16px; display: flex; align-items: center; gap: 24px; color: var(--ink); background: var(--cyan); text-decoration: none; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.top-article-banner > a b { width: 28px; height: 28px; display: grid; place-items: center; color: white; background: var(--ink); font-size: 16px; }
.top-article-banner > a:hover { background: white; }

.article-shell { max-width: 1200px; margin: 0 auto; padding: 86px 32px 100px; display: grid; grid-template-columns: 260px minmax(0, var(--content)); gap: 90px; align-items: start; }
.article { min-width: 0; }
.article p { color: var(--ink-2); }
.standfirst { margin: 0 0 38px; color: var(--ink) !important; font: 600 27px/1.45 var(--display); }
.standfirst::first-letter { float: left; margin: 8px 10px 0 0; color: var(--coral); font: 800 84px/.7 var(--display); }
.article-video { width: 100%; max-width: 100%; min-width: 0; margin: 36px 0 42px; overflow: hidden; }
.video-frame { position: relative; width: 100%; max-width: 100%; min-width: 0; aspect-ratio: 16 / 9; overflow: hidden; background: #080d10; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 8px 8px 0 #d9d9d4; }
.video-frame::before { content: ""; position: absolute; z-index: 2; inset: 0 auto auto 0; width: 54px; height: 4px; background: var(--coral); pointer-events: none; }
.video-frame video { width: 100%; max-width: 100%; height: 100%; display: block; object-fit: cover; }
.video-label { position: absolute; z-index: 2; top: 15px; left: 16px; padding: 4px 7px; color: white; background: rgba(9,14,17,.82); font-size: 8px; font-weight: 800; text-transform: uppercase; pointer-events: none; }
.article-video figcaption { margin-top: 12px; padding-left: 14px; border-left: 2px solid var(--coral); color: var(--muted); font-size: 10px; }
.article section:not(.closing-cta) { margin-top: 86px; }
.article .section-index { margin: 0 0 10px; color: var(--coral); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.article h2 { max-width: 680px; margin: 0 0 25px; font: 800 54px/.95 var(--display); text-transform: uppercase; }
.article h3 { margin: 32px 0 10px; font: 700 27px/1.15 var(--display); }
.article p + p { margin-top: 20px; }
.article a:not(.primary-cta) { text-decoration-color: var(--coral); text-underline-offset: 3px; }
.quick-facts { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); background: white; }
.quick-facts > div { min-width: 0; padding: 18px; }
.quick-facts > div + div { border-left: 1px solid var(--line); }
.quick-facts span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.quick-facts strong { display: block; font: 700 16px/1.2 var(--display); }

blockquote { position: relative; margin: 40px 0; padding: 26px 35px 26px 94px; border: 0; background: var(--ink); color: white; }
blockquote > span { position: absolute; top: 19px; left: 27px; color: var(--cyan); font: 800 76px/.8 Georgia, serif; }
blockquote p { margin: 0 !important; color: white !important; font: 600 27px/1.3 var(--display); }
.comparison-note { margin-top: 40px; padding: 24px 28px; border-left: 4px solid var(--coral); background: #ebeae5; }
.note-heading { display: flex; align-items: center; gap: 12px; }
.note-heading span { padding: 3px 7px; color: white; background: var(--coral); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.comparison-note h3 { margin: 0; font-size: 23px; }
.comparison-note p { margin: 10px 0 0; font-size: 14px; }

.store-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 30px; border: 1px solid var(--line); }
.store-card { margin: 0; padding: 20px; background: white; }
.store-card + .store-card { border-left: 1px solid var(--line); }
.store-card.featured { box-shadow: inset 0 4px 0 var(--cyan); }
.store-top { display: flex; justify-content: space-between; align-items: center; }
.store-number { color: #9ca2a4; font-size: 10px; font-weight: 700; }
.status { padding: 3px 7px; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.status.live { color: #07685f; background: #d7f8f3; }
.status.soon { color: #8e372f; background: #ffe2de; }
.store-symbol { width: 44px; height: 44px; margin: 27px 0 16px; display: grid; place-items: center; font: 800 21px/1 var(--display); }
.nte-symbol { color: var(--ink); border: 2px solid var(--ink); transform: skew(-8deg); }
.epic-symbol { color: white; background: var(--ink); font-size: 11px; clip-path: polygon(0 0,100% 0,90% 85%,50% 100%,10% 85%); }
.steam-symbol { color: white; background: #166d82; border-radius: 50%; }
.store-card h3 { margin: 0 0 8px; font-size: 22px; }
.store-card p { min-height: 88px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.store-best { display: block; padding-top: 12px; border-top: 1px solid var(--line); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.verdict { margin-top: 18px; padding: 19px 22px; display: grid; grid-template-columns: 100px 1fr; gap: 15px; background: var(--yellow); }
.verdict span { font-size: 10px; font-weight: 800; text-transform: uppercase; }
.verdict p { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.5; }
.security-callout { margin-top: 34px; padding: 22px 25px; display: grid; grid-template-columns: 38px 1fr; gap: 17px; border: 1px solid #f0c4bd; background: #fff7f5; }
.security-icon { width: 35px; height: 35px; display: grid; place-items: center; color: white; background: var(--coral); font-weight: 800; }
.security-callout h3 { margin: 0 0 5px; font-size: 21px; }
.security-callout p { margin: 0; font-size: 13px; line-height: 1.55; }

.spec-table { margin-top: 30px; border: 1px solid var(--line); background: white; }
.spec-row { display: grid; grid-template-columns: 1fr 1.4fr 1.4fr; }
.spec-row + .spec-row { border-top: 1px solid var(--line); }
.spec-row > * { padding: 14px 18px; font-size: 12px; }
.spec-row > * + * { border-left: 1px solid var(--line); }
.spec-head { color: white; background: var(--ink); text-transform: uppercase; }
.spec-head span { font-size: 9px; font-weight: 700; }
.spec-row strong { font: 700 15px/1.4 var(--display); }
.ssd-strip { margin: 16px 0 40px; padding: 22px 25px; border: 1px solid #84ded5; background: #e7faf7; }
.ssd-strip .ssd-label { float: right; color: #08766c; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.ssd-strip strong { display: block; font: 800 26px/1 var(--display); text-transform: uppercase; }
.ssd-strip p { margin: 8px 0 0; font-size: 13px; }
.steps { margin: 20px 0 30px; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 55px 1fr; gap: 5px; padding: 18px 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li > span { color: var(--coral); font: 700 19px/1 var(--display); }
.steps strong { font-size: 14px; }
.steps p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
kbd, code { padding: 2px 6px; border: 1px solid #c8c8c3; background: white; font: 12px Consolas, monospace; }

.free-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin: 30px 0; }
.free-grid > div { padding: 22px; border-top: 3px solid var(--ink); background: white; }
.free-grid > div + div { margin-left: 8px; }
.free-grid > div:last-child { border-color: var(--coral); }
.check, .minus { display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 28px; color: var(--ink); background: var(--cyan); font-weight: 800; }
.minus { color: white; background: var(--coral); }
.free-grid strong { display: block; font: 700 20px/1.1 var(--display); }
.free-grid p { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.feature-band { display: grid; grid-template-columns: repeat(3,1fr); margin: 32px 0; color: white; background: var(--ink); }
.feature-band > div { min-width: 0; padding: 24px; }
.feature-band > div + div { border-left: 1px solid #343b3f; }
.feature-band span { color: var(--coral); font-size: 10px; }
.feature-band strong { display: block; margin: 19px 0 8px; font: 700 19px/1.1 var(--display); }
.feature-band p { margin: 0; color: #aeb5b9; font-size: 11px; line-height: 1.5; }

.timeline { position: relative; margin-top: 35px; }
.timeline::before { content: ""; position: absolute; top: 10px; bottom: 30px; left: 87px; width: 1px; background: #bcc0c0; }
.timeline > div { display: grid; grid-template-columns: 70px 34px 1fr; min-height: 96px; }
.timeline time { padding-top: 2px; font: 700 16px/1 var(--display); text-transform: uppercase; }
.timeline > div > span { position: relative; z-index: 1; width: 11px; height: 11px; margin: 3px auto 0; border: 3px solid var(--paper); background: #8e9598; outline: 1px solid #8e9598; border-radius: 50%; }
.timeline .next > span { background: var(--coral); outline-color: var(--coral); }
.timeline p { margin: 0; color: var(--muted); font-size: 12px; }
.timeline p strong { display: block; margin-bottom: 4px; color: var(--ink); font: 700 20px/1 var(--display); }
.faq-list { border-top: 2px solid var(--ink); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 20px 44px 20px 0; cursor: pointer; list-style: none; font: 700 20px/1.2 var(--display); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span, .faq-list summary span::after { position: absolute; right: 5px; top: 50%; width: 15px; height: 2px; background: var(--ink); }
.faq-list summary span::after { content: ""; right: 0; top: 0; transform: rotate(90deg); transition: .2s; }
.faq-list details[open] summary span::after { transform: rotate(0); }
.faq-list details p { max-width: 650px; margin: -5px 0 20px; color: var(--muted); font-size: 13px; }

.closing-cta { position: relative; margin: 90px -42px 0; padding: 50px 42px; overflow: hidden; color: white; background: var(--ink); }
.closing-cta::after { content: ""; position: absolute; width: 280px; height: 280px; right: -80px; top: -120px; border: 40px solid rgba(25,223,208,.1); transform: rotate(45deg); }
.closing-cta h2 { max-width: 510px; margin: 8px 0 12px; color: white; }
.closing-cta p { max-width: 480px; margin: 0 0 24px; color: #aeb5b9; }
.primary-cta.light { position: relative; z-index: 1; background: white; }
.article-source { padding-top: 25px; border-top: 1px solid var(--line); }
.article-source p { margin: 3px 0; color: var(--muted); font-size: 10px; }
.article-source .affiliate-disclosure { margin-top: 8px; font-weight: 700; }

.article-rail { position: sticky; top: 104px; }
.rail-progress { height: 3px; margin-bottom: 26px; background: #d7d8d5; }
.rail-progress span { display: block; width: 0; height: 100%; background: var(--coral); }
.rail-section { padding-bottom: 25px; }
.rail-label { margin: 0 0 10px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.rail-toc nav { border-left: 1px solid #c8cac7; }
.rail-toc a { display: block; margin-left: -1px; padding: 6px 0 6px 15px; border-left: 2px solid transparent; color: #747b7f; text-decoration: none; font-size: 11px; line-height: 1.35; }
.rail-toc a:hover, .rail-toc a.is-active { border-color: var(--coral); color: var(--ink); font-weight: 700; }
.rail-banner { position: relative; isolation: isolate; min-height: 380px; margin: 12px 0 30px; padding: 22px; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden; border-top: 4px solid #ff4938; color: white; background: #070c12 url("nte-sidebar-chaos.webp") 52% center / cover no-repeat; box-shadow: 0 18px 42px rgba(5,9,12,.3); text-decoration: none; }
.rail-banner::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(3,7,12,.92) 0%, rgba(3,7,12,.65) 27%, rgba(3,7,12,.03) 53%, rgba(3,7,12,.8) 100%), linear-gradient(105deg, rgba(3,7,12,.72), transparent 62%); }
.rail-banner::after { content: ""; position: absolute; z-index: 0; inset: 10px; border: 1px solid rgba(255,255,255,.09); pointer-events: none; }
.banner-kicker { position: relative; z-index: 1; padding: 4px 7px; color: white; background: #ff4938; font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; transform: skewX(-7deg); }
.rail-banner strong { position: relative; z-index: 1; margin-top: 14px; text-shadow: 0 3px 18px rgba(0,0,0,.85), 3px 3px 0 rgba(255,73,56,.42); font: 800 38px/.82 var(--display); }
.banner-cta { position: relative; z-index: 2; margin-top: auto; padding: 13px 22px 13px 17px; overflow: hidden; clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 7px 50%); border-left: 3px solid white; color: white; background: linear-gradient(105deg, #e82018, #ff4b36 66%, #ff6a3d); filter: drop-shadow(0 0 0 rgba(255,55,35,0)); text-shadow: 0 1px 0 rgba(0,0,0,.5); font-size: 10px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; animation: sidebar-cta-attack 2.1s ease-in-out infinite; transition: background .15s ease, transform .15s ease, filter .15s ease; }
.banner-cta::after { content: ""; position: absolute; top: -60%; left: -42%; width: 26px; height: 220%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.88), transparent); transform: rotate(18deg); animation: sidebar-cta-shine 2.8s ease-in-out infinite; }
.banner-cta b { position: relative; z-index: 1; margin-left: 10px; }
.rail-banner:hover .banner-cta { color: white; background: linear-gradient(105deg, #ff1208, #ff6042); filter: drop-shadow(0 0 13px rgba(255,55,35,.72)); transform: translateX(3px) scale(1.035); animation-play-state: paused; }
@keyframes sidebar-cta-attack { 0%, 38%, 100% { filter: drop-shadow(0 0 0 rgba(255,55,35,0)); transform: translateX(0); } 48% { filter: drop-shadow(0 0 12px rgba(255,55,35,.8)); transform: translateX(0) scale(1.035); } 51% { transform: translateX(-2px) skewX(-2deg) scale(1.035); } 54% { transform: translateX(2px) skewX(2deg) scale(1.035); } 58% { filter: drop-shadow(0 0 8px rgba(255,55,35,.5)); transform: translateX(0); } }
@keyframes sidebar-cta-shine { 0%, 30% { left: -42%; opacity: 0; } 42% { opacity: 1; } 62%, 100% { left: 118%; opacity: 0; } }
.related > a { display: grid; grid-template-columns: 30px 1fr; gap: 8px; padding: 11px 0; border-top: 1px solid var(--line); text-decoration: none; }
.related > a:last-child { border-bottom: 1px solid var(--line); }
.related > a span { color: var(--coral); font-size: 9px; }
.related > a strong { font: 700 14px/1.15 var(--display); }

.site-footer { padding: 64px max(32px, calc((100vw - 1200px)/2)); color: white; background: #0d1114; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 70px; }
.footer-brand { margin-bottom: 20px; }
.footer-brand .brand-logo { width: 205px; }
.footer-grid > div p { max-width: 380px; color: #7f898f; font-size: 12px; }
.footer-grid nav { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer-grid nav strong { margin-bottom: 8px; color: #dce0e1; font-size: 10px; text-transform: uppercase; }
.footer-grid nav a, .footer-grid nav button { padding: 0; border: 0; color: #7f898f; background: transparent; text-decoration: none; font-size: 11px; cursor: pointer; }
.footer-grid nav a:hover, .footer-grid nav button:hover { color: var(--cyan); }
.footer-bottom { margin-top: 50px; padding-top: 18px; display: flex; justify-content: space-between; border-top: 1px solid #252c30; color: #5f686d; font-size: 9px; text-transform: uppercase; }

dialog { color: var(--ink); border: 0; box-shadow: 0 28px 80px rgba(0,0,0,.45); }
dialog::backdrop { background: rgba(5,9,12,.82); backdrop-filter: blur(5px); }
.dialog-close { width: 36px; height: 36px; border: 0; background: #e7e7e2; cursor: pointer; font-size: 24px; }
.privacy-dialog { width: min(680px, calc(100% - 28px)); max-height: min(750px, calc(100vh - 40px)); padding: 0; background: var(--paper); }
.privacy-head { position: sticky; top: 0; padding: 26px 32px 20px; display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid var(--line); background: var(--paper); }
.privacy-head h2 { margin: 5px 0 0; font: 800 43px/.9 var(--display); text-transform: uppercase; }
.privacy-copy { padding: 12px 32px 35px; }
.privacy-copy h3 { margin: 26px 0 4px; font: 700 21px/1 var(--display); }
.privacy-copy p { color: var(--ink-2); font-size: 13px; }
.privacy-copy .privacy-date { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.promo-dialog { position: relative; width: min(960px, calc(100% - 34px)); min-height: 560px; padding: 0; overflow: hidden; border: 1px solid #2f3a40; border-top: 5px solid var(--coral); color: white; background: radial-gradient(circle at 81% 42%, #1f4951 0, #101d22 23%, #090e11 52%); }
.promo-dialog[open] { animation: promo-in .38s cubic-bezier(.2,.8,.2,1); }
@keyframes promo-in { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
.promo-dialog::before { content: ""; position: absolute; z-index: 2; width: 240px; height: 240px; left: -145px; bottom: -145px; border: 34px solid rgba(25,223,208,.18); transform: rotate(45deg); }
.promo-art { position: absolute; inset: 0 0 0 43%; overflow: hidden; background: linear-gradient(90deg, #090e11 0%, rgba(9,14,17,.55) 19%, transparent 52%), repeating-linear-gradient(125deg, transparent 0 38px, rgba(25,223,208,.07) 39px 40px); }
.promo-art::before { content: ""; position: absolute; z-index: 1; left: 12%; right: -10%; bottom: -33%; height: 71%; border-radius: 50%; background: radial-gradient(ellipse, rgba(25,223,208,.42), rgba(25,223,208,.06) 52%, transparent 70%); filter: blur(6px); }
.promo-art::after { content: ""; position: absolute; z-index: 4; inset: 0; background: linear-gradient(0deg, #090e11 0%, transparent 23%), linear-gradient(90deg, rgba(9,14,17,.82), transparent 30%); pointer-events: none; }
.promo-orbit { position: absolute; z-index: 0; top: 50%; left: 58%; width: 430px; height: 430px; border: 1px solid rgba(25,223,208,.24); border-radius: 50%; transform: translate(-50%, -50%); animation: promo-orbit 18s linear infinite; }
.promo-orbit::before, .promo-orbit::after { content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); }
.promo-orbit::before { top: 38px; left: 72px; }
.promo-orbit::after { right: 17px; bottom: 126px; }
.promo-orbit-two { width: 315px; height: 315px; border-color: rgba(255,92,74,.2); animation-direction: reverse; animation-duration: 12s; }
.promo-orbit-two::before, .promo-orbit-two::after { background: var(--coral); box-shadow: 0 0 18px var(--coral); }
@keyframes promo-orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }
.promo-character { position: absolute; z-index: 2; right: 1%; bottom: 10px; width: 88%; height: 92%; object-fit: contain; object-position: right bottom; opacity: 0; filter: drop-shadow(0 18px 24px rgba(0,0,0,.6)); transform: translateX(42px) scale(.96); transition: opacity .65s ease, transform .8s cubic-bezier(.2,.75,.25,1); }
.promo-character.is-active { opacity: 1; transform: none; }
.promo-character.is-thumb { right: 3%; bottom: 7%; width: 73%; height: 78%; }
.promo-character.is-chaos { right: -20%; bottom: 4%; width: 150%; height: 85%; object-fit: cover; object-position: center bottom; }
.promo-character.is-before-dawn { right: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.promo-character-meta { position: absolute; z-index: 5; right: 22px; bottom: 21px; min-width: 175px; padding: 9px 12px 10px; border-left: 2px solid var(--cyan); background: rgba(9,14,17,.73); backdrop-filter: blur(8px); text-transform: uppercase; }
.promo-character-meta span { display: block; color: #7f959b; font-size: 7px; font-weight: 800; letter-spacing: .12em; }
.promo-character-meta strong { display: block; margin-top: 3px; font: 700 18px/1 var(--display); }
.promo-character-meta i { position: absolute; top: 10px; right: 10px; color: #687b80; font-size: 7px; font-style: normal; }
.promo-character-meta i b { color: var(--cyan); font-size: 10px; }
.promo-close { position: absolute; z-index: 5; top: 14px; right: 14px; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.35); color: white; background: rgba(9,14,17,.72); cursor: pointer; font-size: 25px; line-height: 1; }
.promo-close:hover { color: var(--ink); background: var(--cyan); border-color: var(--cyan); }
.promo-content { position: relative; z-index: 3; width: 58%; min-height: 555px; padding: 46px 30px 36px 48px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.promo-alert { padding: 5px 9px; color: white; background: var(--coral); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.promo-overline { margin: 26px 0 3px; color: var(--cyan); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.promo-dialog h2 { margin: 0; font: 800 65px/.82 var(--display); letter-spacing: -.035em; text-transform: uppercase; }
.promo-dialog h2 em { color: var(--cyan); font-style: normal; text-shadow: 0 0 30px rgba(25,223,208,.24); }
.promo-content > p:not(.promo-overline) { max-width: 400px; margin: 23px 0; color: #adb5b9; font-size: 13px; line-height: 1.6; }
.promo-actions { display: flex; align-items: center; gap: 20px; }
.promo-actions > a { padding: 12px 12px 12px 17px; display: flex; align-items: center; gap: 25px; color: var(--ink); background: var(--cyan); text-decoration: none; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.promo-actions > a:hover { background: white; }
.promo-actions > a b { width: 27px; height: 27px; display: grid; place-items: center; color: white; background: var(--ink); font-size: 15px; }
.promo-actions > button { padding: 8px 0; border: 0; border-bottom: 1px solid #6b7479; color: #a9b0b4; background: transparent; cursor: pointer; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.promo-actions > button:hover { color: white; border-color: white; }
.promo-content > small { margin-top: 20px; color: #687176; font-size: 8px; text-transform: uppercase; }
.noscript { position: fixed; inset: auto 0 0; z-index: 50; margin: 0; padding: 8px; text-align: center; background: var(--yellow); font-size: 12px; }

/* Article cluster pages */
.article-hero { height: 650px; min-height: 620px; }
.article-hero .hero-content { justify-content: flex-end; padding-bottom: 72px; }
.article-hero h1 { margin-bottom: 8px; font-size: clamp(72px, 7.5vw, 116px); }
.article-hero .hero-deck { max-width: 620px; margin: 14px 0; }
.article-page .article-shell { padding-top: 72px; }
.article-page .article section:first-of-type { margin-top: 70px; }

.input-duel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 30px; }
.input-duel > div { padding: 25px; border-top: 4px solid var(--cyan); background: white; }
.input-duel > div:last-child { border-color: var(--coral); }
.duel-label { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.input-symbol { width: 64px; height: 50px; margin: 30px 0 20px; display: grid; place-items: center; border: 2px solid var(--ink); font: 800 19px/1 var(--display); }
.gamepad-symbol { border-radius: 15px 15px 22px 22px; }
.input-duel h3 { margin: 0 0 14px; }
.input-duel ul { margin: 0; padding: 0; list-style: none; }
.input-duel li { padding: 6px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.activity-score { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 30px; border: 1px solid var(--line); background: white; }
.activity-score div { padding: 15px; }
.activity-score div + div { border-left: 1px solid var(--line); }
.activity-score span { display: block; color: var(--muted); font-size: 8px; font-weight: 700; text-transform: uppercase; }
.activity-score b { font: 700 15px/1.2 var(--display); }

.date-lockup { position: relative; padding: 22px 28px; display: flex; align-items: center; gap: 18px; overflow: hidden; color: white; background: var(--ink); }
.date-lockup > span { margin-right: auto; color: var(--cyan); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.date-lockup > strong { font: 800 78px/.7 var(--display); }
.date-lockup > div { display: flex; flex-direction: column; font: 700 18px/1 var(--display); text-transform: uppercase; }
.date-lockup small { margin-top: 4px; color: #899197; font: 600 11px/1 var(--body); }
.date-lockup em { margin-left: 20px; padding: 5px 8px; color: var(--ink); background: var(--cyan); font-size: 9px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.timeline-large > div { min-height: 125px; }
.timeline-large p strong { font-size: 24px; }
.launch-strip { padding: 18px 22px; display: flex; align-items: center; gap: 20px; border-left: 5px solid #54a7d9; color: white; background: #142b3a; }
.launch-strip span { font-size: 9px; font-weight: 800; text-transform: uppercase; }
.launch-strip strong { margin-right: auto; font: 800 27px/1 var(--display); text-transform: uppercase; }
.launch-strip em { padding: 4px 7px; color: #142b3a; background: white; font-size: 8px; font-style: normal; font-weight: 800; text-transform: uppercase; }
.steam-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 30px; background: var(--line); border: 1px solid var(--line); }
.steam-benefits > div { padding: 22px; background: white; }
.steam-benefits span { color: #357eaa; font-size: 9px; font-weight: 800; }
.steam-benefits strong { display: block; margin: 22px 0 6px; font: 700 20px/1 var(--display); }
.steam-benefits p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

.meta-warning { padding: 18px 22px; display: grid; grid-template-columns: 100px 120px 1fr; align-items: center; gap: 12px; border: 1px solid #efd58c; background: #fff8dc; }
.meta-warning span { font-size: 9px; font-weight: 800; text-transform: uppercase; }
.meta-warning strong { font: 800 22px/1 var(--display); text-transform: uppercase; }
.meta-warning p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.tier-board { margin: 30px 0; border: 1px solid var(--line); }
.tier-row { min-height: 88px; display: grid; grid-template-columns: 82px 1fr; background: white; }
.tier-row + .tier-row { border-top: 1px solid var(--line); }
.tier-row > strong { display: grid; place-items: center; color: var(--ink); background: var(--yellow); font: 800 45px/1 var(--display); }
.tier-row > div { padding: 18px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tier-row span { padding: 7px 10px; border: 1px solid var(--line); font: 700 13px/1 var(--display); }
.tier-a > strong { background: var(--cyan); }
.tier-b > strong { background: #b8d8e1; }
.tier-c > strong { background: #d6d6d1; }
.ranked-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ranked-cards article { position: relative; padding: 0 0 22px; overflow: hidden; border-top: 3px solid var(--coral); background: white; }
.rank-media { position: relative; height: 250px; overflow: hidden; background: var(--ink); }
.rank-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
.rank-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 45%, rgba(0,0,0,.75) 100%); }
.rank-number { position: absolute; right: 14px; top: 4px; color: rgba(255,255,255,.5); font: 800 55px/1 var(--display); z-index: 1; }
.rank-grade { position: absolute; left: 14px; top: 14px; z-index: 1; width: 30px; height: 30px; display: grid; place-items: center; color: var(--ink); background: var(--yellow); font: 800 18px/1 var(--display); }
.ranked-cards h3 { position: relative; margin: 16px 22px 7px; }
.ranked-cards p { position: relative; margin: 0 22px 30px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.ranked-cards article > b { position: absolute; left: 22px; bottom: 17px; color: var(--coral); font-size: 8px; text-transform: uppercase; }
.chiz-feature { margin-top: 12px; padding: 28px; display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; color: white; background: var(--ink); }
.chiz-visual { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.chiz-portrait { width: 100%; height: 150px; border-radius: 12px; object-fit: cover; object-position: top center; border: 2px solid rgba(255,255,255,.25); }
.chiz-badge { padding: 9px; text-align: center; color: var(--ink); background: var(--cyan); font: 800 13px/1 var(--display); text-transform: uppercase; }
.chiz-feature h3 { margin: 0 0 8px; }
.chiz-feature p { margin: 0; color: #aeb5b9; font-size: 12px; line-height: 1.55; }
.role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.role-grid > div { padding: 0 0 22px; overflow: hidden; border: 1px solid var(--line); background: white; }
.role-media { height: 190px; overflow: hidden; }
.role-portrait { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; display: block; }
.role-grid span { display: block; margin: 16px 22px 0; color: var(--coral); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.role-grid strong { display: block; margin: 8px 22px 6px; font: 700 24px/1 var(--display); }
.role-grid p { margin: 0 22px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-top: 20px; }
.roster-card { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line); background: white; }
.roster-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; object-position: top center; flex-shrink: 0; }
.roster-card strong { display: block; font: 700 15px/1.2 var(--display); }
.roster-card span { color: var(--coral); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.team-comps { display: grid; gap: 10px; }
.team-comps article { padding: 22px; border-left: 4px solid var(--cyan); background: white; }
.team-comps article > span { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.team-comps h3 { margin: 3px 0 15px; }
.team-comps article > div { display: flex; flex-wrap: wrap; gap: 6px; }
.team-comps article > div b { padding: 6px 9px; color: white; background: var(--ink); font-size: 9px; }
.team-comps p { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

@media (max-width: 980px) {
  .article-shell { max-width: 820px; grid-template-columns: 1fr; gap: 0; }
  .article-rail { display: none; }
  .desktop-nav { gap: 14px; }
  .desktop-nav a { font-size: 10px; }
  .brand-logo { width: 155px; }
  .hero h1 { font-size: 92px; }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 70px; }
  body { font-size: 15px; }
  .header-inner { height: 64px; padding: 0 18px; }
  .brand-logo { width: 154px; }
  .desktop-nav { display: none; }
  .menu-button { display: grid; }
  .site-header.menu-open .mobile-nav { display: block; }
  .hero { height: 88vh; min-height: 650px; }
  .hero > img { object-position: 60% center; }
  .hero-shade { background: linear-gradient(90deg, rgba(5,9,12,.9), rgba(5,9,12,.15)), linear-gradient(0deg, rgba(5,9,12,.84) 0%, transparent 65%); }
  .hero-content { width: calc(100% - 36px); justify-content: flex-end; padding: 0 0 64px; }
  .hero h1 { margin-top: 12px; font-size: 65px; line-height: .8; }
  .hero-deck { margin: 12px 0; font-size: 14px; }
  .hero-meta { margin-bottom: 18px; font-size: 8px; }
  .hero-meta span:last-child { display: none; }
  .scroll-cue { display: none; }
  .article-shell { padding: 54px 18px 70px; }
  .standfirst { font-size: 22px; }
  .standfirst::first-letter { font-size: 68px; }
  .quick-facts { grid-template-columns: 1fr 1fr; }
  .quick-facts > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .quick-facts > div:nth-child(4) { border-top: 1px solid var(--line); }
  .article section:not(.closing-cta) { margin-top: 65px; }
  .article h2 { font-size: 42px; }
  blockquote { padding: 62px 22px 24px; }
  blockquote > span { left: 20px; }
  blockquote p { font-size: 23px; }
  .store-grid, .free-grid, .feature-band { grid-template-columns: 1fr; }
  .store-card + .store-card { border-left: 0; border-top: 1px solid var(--line); }
  .store-card p { min-height: 0; margin-bottom: 25px; }
  .verdict { grid-template-columns: 1fr; gap: 5px; }
  .spec-row { grid-template-columns: .8fr 1fr 1fr; }
  .spec-row > * { padding: 11px 8px; font-size: 10px; overflow-wrap: anywhere; }
  .spec-row strong { font-size: 12px; }
  .free-grid > div + div { margin: 8px 0 0; }
  .feature-band > div + div { border-left: 0; border-top: 1px solid #343b3f; }
  .closing-cta { margin-left: -18px; margin-right: -18px; padding: 42px 25px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 25px; }
  .footer-grid > div { grid-column: 1 / -1; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 5px; }
  .article-hero { height: 610px; min-height: 610px; }
  .article-hero .hero-content { justify-content: flex-end; padding-bottom: 45px; }
  .article-hero h1 { font-size: 58px; }
  .article-hero .hero-deck { font-size: 13px; }
  .top-banner-wrap { margin-top: 18px; padding: 0 18px; }
  .top-article-banner { min-height: 230px; padding: 22px; grid-template-columns: 1fr; align-content: center; gap: 20px; }
  .top-banner-art { background: linear-gradient(90deg, rgba(8,13,17,.96), rgba(8,13,17,.52)), url("nte-hero.png") 68% center / cover; }
  .top-banner-copy strong { font-size: 28px; }
  .top-article-banner > a { width: max-content; }
  .input-duel, .ranked-cards, .role-grid { grid-template-columns: 1fr; }
  .activity-score { grid-template-columns: 1fr 1fr; }
  .activity-score div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .activity-score div:nth-child(4) { border-top: 1px solid var(--line); }
  .date-lockup { padding: 18px; gap: 10px; }
  .date-lockup > span { display: none; }
  .date-lockup > strong { font-size: 62px; }
  .date-lockup em { margin-left: auto; }
  .launch-strip { align-items: flex-start; flex-direction: column; gap: 7px; }
  .launch-strip strong { margin: 0; font-size: 24px; }
  .steam-benefits { grid-template-columns: 1fr; }
  .meta-warning { grid-template-columns: 1fr 1fr; }
  .meta-warning p { grid-column: 1 / -1; }
  .tier-row { grid-template-columns: 58px 1fr; }
  .tier-row > strong { font-size: 34px; }
  .tier-row > div { padding: 12px; }
  .chiz-feature { grid-template-columns: 1fr; }
  .promo-dialog { min-height: 590px; max-height: calc(100vh - 24px); }
  .promo-art { inset: 0; opacity: .72; }
  .promo-art::after { background: linear-gradient(0deg, #090e11 8%, rgba(9,14,17,.94) 29%, rgba(9,14,17,.23) 61%, rgba(9,14,17,.14)); }
  .promo-character { right: 1%; bottom: 35%; width: 82%; height: 62%; object-position: right bottom; }
  .promo-character.is-thumb { right: 3%; bottom: 40%; width: 64%; height: 54%; }
  .promo-character.is-chaos { right: -22%; bottom: 39%; width: 145%; height: 65%; object-fit: cover; object-position: center bottom; }
  .promo-character.is-before-dawn { right: 0; bottom: 36%; width: 100%; height: 66%; object-fit: cover; object-position: center bottom; }
  .promo-character-meta { right: 16px; bottom: auto; top: 44%; min-width: 150px; }
  .promo-orbit { top: 26%; left: 68%; width: 320px; height: 320px; }
  .promo-orbit-two { width: 230px; height: 230px; }
  .promo-content { width: 100%; min-height: 585px; padding: 55px 24px 30px; justify-content: flex-end; background: linear-gradient(0deg, rgba(9,14,17,.98) 0%, rgba(9,14,17,.78) 52%, transparent 76%); }
  .promo-dialog h2 { font-size: 51px; }
  .promo-content > p:not(.promo-overline) { margin: 18px 0; font-size: 12px; }
  .promo-actions { align-items: flex-start; flex-direction: column; gap: 10px; }
  .promo-content > small { margin-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}