/* Versus site system (2026-10-17).
   Loaded last on every page that uses the main navbar/footer, so one container,
   one accent, one type case, one button pair and one surface apply site-wide.
   The /games and /lp/mw4 pages use their own generated stylesheet and do not load this. */

/* ---------- Tokens ---------- */
:root {
  --max: 1104px;
  --gutter: clamp(20px, 4vw, 48px);
  --bg: #0a0c0e;
  --nav: #0a0c0e;
  --surface: #111417;
  --surface-2: #161a1e;
  --line: #22282d;
  --accent: #f4ce64;
  --accent-hover: #ffdd80;
  --accent-ink: #1a1408;
  --radius-card: 16px;
  --radius-control: 10px;
  --nav-h: 68px;
  --section-y: 96px;
}
@media (max-width: 760px) { :root { --section-y: 64px; } }

html, body { background: var(--bg); }
.container { width: min(var(--max), calc(100% - 2 * var(--gutter))); }

/* Every page section uses the same content width as the navbar and footer. */
main .container, .hero-carousel .container {
  width: min(var(--max), calc(100% - 2 * var(--gutter))) !important;
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}
.weapon-page { max-width: none; width: min(var(--max), calc(100% - 2 * var(--gutter))); padding-inline: 0; }
.aim-board-page { width: min(var(--max), calc(100% - 2 * var(--gutter))) !important; }
.admin-page { width: min(var(--max), calc(100% - 2 * var(--gutter))) !important; max-width: none !important; margin-inline: auto !important; padding-inline: 0 !important; }

/* ---------- One accent ----------
   Product colour stays on the product icon files only; buttons, highlights and
   in-page accents use the Versus gold on every product page. */
body.product-remap, body.aim-landing, body.product-vpn, body.mate-landing, body.product-boost,
body.clipper-landing, body.product-audio, body.product-landing, [data-product-id] {
  --product-accent: var(--accent);
  --product-on-accent: var(--accent-ink);
  --suite-accent: var(--accent);
}

/* ---------- Case ----------
   No all-caps anywhere: display headings, eyebrows, labels, nav and buttons are set
   in the case they are written in. */
body *:not(kbd):not(abbr) { text-transform: none !important; }

/* ---------- Buttons: one primary, one ghost ---------- */
.btn {
  min-height: 44px;
  border-radius: var(--radius-control);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
}
.btn-gold { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-gold:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); box-shadow: none; transform: none; }
.btn-outline {
  border-color: rgba(255, 255, 255, .18);
  color: var(--text-1);
  background: rgba(255, 255, 255, .04);
}
.btn-outline:hover { border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .07); color: var(--text-0); box-shadow: none; transform: none; }
/* Disabled: a neutral surface with grey text, never a muddy olive gold. */
.btn:disabled, .btn[aria-disabled="true"], button.btn-gold:disabled,
.btn-gold:disabled, .btn-gold[aria-disabled="true"] {
  background: var(--disabled-bg) !important;
  border-color: var(--disabled-line) !important;
  color: var(--disabled-ink) !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed;
}

/* ---------- Navbar: same height, blur and brand as the /games nav ---------- */
.navbar {
  background: rgba(10, 12, 14, .92);
  border-bottom: 1px solid transparent;
}
.navbar.is-scrolled { border-bottom-color: rgba(255, 255, 255, .07); box-shadow: none; }
.navbar::before { background: rgba(7, 9, 11, .62); }
.navbar .nav-brand { gap: 10px; }
.navbar .nav-brand img { width: 28px; height: 28px; }
.navbar .nav-brand span { color: var(--text-0); font-size: 16px; font-weight: 800; letter-spacing: .02em; }
@media (min-width: 1201px) {
  .navbar .nav-links { gap: 4px; }
  .navbar .nav-links > a, .navbar .drop > .drop-trigger {
    height: 38px; padding: 0 12px; border-radius: 8px;
    color: var(--text-2); font-size: 14px; font-weight: 600; letter-spacing: 0;
  }
  .navbar .nav-links > a::before, .navbar .drop > .drop-trigger::before { content: none; }
  .navbar .nav-links > a:hover, .navbar .drop:hover > .drop-trigger, .navbar .drop.is-open > .drop-trigger { background: rgba(255, 255, 255, .06); color: var(--text-0); }
  .navbar .nav-links > a.active, .navbar .drop-trigger.active { color: var(--accent); }
}
.drop-kicker { letter-spacing: 0; font-size: 13px; color: var(--text-3); }

/* ---------- Footer: same treatment as the /games footer ---------- */
.site-foot { background: var(--bg); padding: 72px 0 40px; border-top: 0 !important; }
.site-foot .foot-row h3 { margin: 0 0 14px; color: var(--text-4); font-size: 13px; font-weight: 600; letter-spacing: 0; }
.site-foot .foot-row a { color: var(--text-2); font-size: 14px; }
.site-foot .foot-row a:hover { color: var(--accent); }
.site-foot .foot-brand p { color: var(--text-3); }
/* The cookie bar no longer pads the body (that exposed a lighter band under the
   footer); the footer itself makes room for it. */
body.cookie-on { padding-bottom: 0 !important; }
body.cookie-on .site-foot { padding-bottom: calc(40px + 72px); }
@media (max-width: 760px) {
  body.cookie-on .site-foot { padding-bottom: calc(32px + 170px); }
  body.cookie-on:not(:has(.site-foot)) { padding-bottom: 170px !important; }
}
body.cookie-on:not(:has(.site-foot)) { padding-bottom: 72px !important; }

/* ---------- Cards ---------- */
.price-card { border-radius: var(--radius-card); }

/* ---------- Motion: only the hero animates (landing-motion.js); nothing fades in per section ---------- */
[data-reveal] { opacity: 1 !important; transform: none !important; }

/* ---------- Shared state card (errors, empty and fallback states) ---------- */
.state-card {
  display: grid; justify-items: start; gap: 10px;
  max-width: 560px; margin: 24px 0; padding: 28px;
  border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface);
}
.state-card.is-centered { justify-items: center; margin-inline: auto; text-align: center; }
.state-card-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.state-card-icon svg { width: 22px; height: 22px; }
.state-card h3 { margin: 4px 0 0; color: var(--text-1); font-size: 18px; line-height: 1.3; }
.state-card p { margin: 0; color: var(--text-3); font-size: 15px; line-height: 1.6; }
.state-card .btn { margin-top: 8px; }

/* ---------- Former all-caps labels: drop the wide tracking that only suited capitals ---------- */
.account-store .compact-name-demo small{letter-spacing:.005em}
.account-inventory-kind{letter-spacing:.005em}
.account-inventory-list .account-inventory-item.is-equipped::after{letter-spacing:.005em}
.account-ticket-state{letter-spacing:.005em}
.account-ticket-new{letter-spacing:.005em}
.account-ticket-role{letter-spacing:.005em}
.account-ticket-reply label{letter-spacing:.005em}
.account-dashboard .free-app-card .dash-meta dt{letter-spacing:.005em}
.account-dashboard .license-seat-state{letter-spacing:.005em}
.account-dashboard .free-app-grid .free-app-card .free-app-meta dt{letter-spacing:.005em}
.admin-page .admin-tabs .admin-tab-group{letter-spacing:.005em}
.invoice-kicker{letter-spacing:.005em}
.invoice-label{letter-spacing:.005em}
.admin-alert-route{letter-spacing:.005em}
.partner-admin-selected-label{letter-spacing:.005em}
.pricing-products-label{letter-spacing:.005em}
.arena-page .spin-reward b{letter-spacing:.005em}
.auth-card .auth-or{letter-spacing:.005em}
.campaign h1{letter-spacing:.005em}
.product-label{letter-spacing:.005em}
.platform-row>span{letter-spacing:.005em}
.partner-lockup p{letter-spacing:.005em}
.campaign-vpn .vpn-kicker{letter-spacing:.005em}
.campaign-vpn .vpn-partner-brand small{letter-spacing:.005em}
.cl-eyebrow{letter-spacing:.005em}
.community-summary dd{letter-spacing:.005em}
.board-section-count{letter-spacing:.005em}
.shared-config-state{letter-spacing:.005em}
.arena-page .comm-hero h1{letter-spacing:.005em}
.community-index-head h2{letter-spacing:.005em}
.board-section-head h2{letter-spacing:.005em}
.board-section .board-stat span{letter-spacing:.005em}
.shout-heading h2{letter-spacing:.005em}
.board-head h2{letter-spacing:.005em}
.board-result-count{letter-spacing:.005em}
.thread-sub{letter-spacing:.005em}
.fm-thread-tools > summary{letter-spacing:.005em}
.forum-compose h2{letter-spacing:.005em}
.experience-hero-brand{letter-spacing:.005em}
.fs-section h2{letter-spacing:.005em}
.fs-section h3{letter-spacing:.005em}
.fs-banner h2{letter-spacing:.005em}
.hub-stage-facts dt{letter-spacing:.005em}
.hub-kicker{letter-spacing:.005em}
.hub-tab-top small{letter-spacing:.005em}
.j-feature-copy .j-feature-label{letter-spacing:.005em}
.partner-table th{letter-spacing:.005em}
body.product-remap .remap-product-identity{letter-spacing:.005em}
.product-eyebrow{letter-spacing:.005em}
body.product-remap h1.remap-hero-title{letter-spacing:.005em}
body.product-remap main h2{letter-spacing:.005em}
body.product-remap .remap-h{letter-spacing:.005em}
body.product-remap .about-point h3{letter-spacing:.005em}
body.product-remap div.remap-hero-title{letter-spacing:.005em}
.versus-review-card footer{letter-spacing:.005em}
.studio-scope{letter-spacing:.005em}
.studio-validation-chip{letter-spacing:.005em}
.nav-action{letter-spacing:.005em}
.nav-links > a{letter-spacing:.005em}
.drop > .drop-trigger{letter-spacing:.005em}
.drop-kicker{letter-spacing:.005em}
.product-platforms{letter-spacing:.005em}
.btn{letter-spacing:.005em}
.hero-partner{letter-spacing:.005em}
.hero-note strong{letter-spacing:.005em}
.signal-flow span{letter-spacing:.005em}
.engine-more{letter-spacing:.005em}
.learn-more{letter-spacing:.005em}
.engine-ready{letter-spacing:.005em}
.engine-fields dt{letter-spacing:.005em}
.engine-tabs strong{letter-spacing:.005em}
.spotlight-copy h2{letter-spacing:.005em}
.docs-side p{letter-spacing:.005em}
.page .docs-side p{letter-spacing:.005em}
.auth-or{letter-spacing:.005em}
.auth-tabs button{letter-spacing:.005em}
.price-toggle button{letter-spacing:.005em}
.price-tag{letter-spacing:.005em}
.price-card h3{letter-spacing:.005em}
.price-pc{letter-spacing:.005em}
.pale-kicker{letter-spacing:.005em}
.foot-os{letter-spacing:.005em}
.announce-kicker{letter-spacing:.005em}
.announce-unit small{letter-spacing:.005em}
.admin-metrics span{letter-spacing:.005em}
.docs-side h3{letter-spacing:.005em}
.docs-search span{letter-spacing:.005em}
.docs-eyebrow{letter-spacing:.005em}
.note-card time{letter-spacing:.005em}
.note-meta span{letter-spacing:.005em}
.changelog-filters button{letter-spacing:.005em}
.change-meta span{letter-spacing:.005em}
.avatar-hint{letter-spacing:.005em}
.member-rank-row{letter-spacing:.005em}
.member-stats dt{letter-spacing:.005em}
.account-links span{letter-spacing:.005em}
.forum-member-rank{letter-spacing:.005em}
.identity-meta{letter-spacing:.005em}
.identity-edit{letter-spacing:.005em}
.forum-cols{letter-spacing:.005em}
.board-stat span{letter-spacing:.005em}
.pin-chip{letter-spacing:.005em}
.post-role{letter-spacing:.005em}
.post-member-meta{letter-spacing:.005em}
.forum-editor-preview-head{letter-spacing:.005em}
.offer-kicker{letter-spacing:.005em}
.offer-small{letter-spacing:.005em}
.member-role{letter-spacing:.005em}
.admin-tabs button{letter-spacing:.005em}
.plate-mock small{letter-spacing:.005em}
.account-tabs button{letter-spacing:.005em}
.product-wait{letter-spacing:.005em}
.dash-meta dt{letter-spacing:.005em}
.bill-facts dt{letter-spacing:.005em}
.bill-list-title{letter-spacing:.005em}
.bill-head{letter-spacing:.005em}
.bill-head b{letter-spacing:.005em}
.shop-bar a{letter-spacing:.005em}
.wallet-chip span{letter-spacing:.005em}
.arena-cta span{letter-spacing:.005em}
.shop-filters button{letter-spacing:.005em}
.shop-card .pale-kicker{letter-spacing:.005em}
.ai-modes button{letter-spacing:.005em}
.ai-thread-list button{letter-spacing:.005em}
.post-badge{letter-spacing:.005em}
.thread-copy .cfg-chip{letter-spacing:.005em}
.rail-head{letter-spacing:.005em}
.drop-product-name .product-soon{letter-spacing:.005em}
.legal-head h1{letter-spacing:.005em}
.legal-toc p{letter-spacing:.005em}
.foot-row h3{letter-spacing:.005em}
.legal-kicker{letter-spacing:.005em}
.product-hero h1{letter-spacing:.005em}
.cl-hero h1{letter-spacing:.005em}
.suite-aim-title{letter-spacing:.005em}
.suite-next h2{letter-spacing:.005em}
.product-section h2{letter-spacing:.005em}
.cl-section h2{letter-spacing:.005em}
.aim-training h2{letter-spacing:.005em}
.aim-routines h2{letter-spacing:.005em}
.aim-inputs h2{letter-spacing:.005em}
.suite-product-kicker{letter-spacing:.005em}
.support-admin .support-ai-roles > article > span{letter-spacing:.005em}
.vpn-hero-benefits strong{letter-spacing:.005em}

/* State card actions + pricing fallback */
.state-card-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.state-card-actions .btn { margin: 0; }
.price-fallback-note { margin: 0 auto 28px; }
.price-card.is-fallback { min-height: 0; padding-block: 28px; }
.price-card.is-fallback .price-amt-pending { margin-top: 18px; color: var(--text-4); font-size: 16px; font-weight: 600; }

/* Auth retry: a ghost button with breathing room, not a light slab under the primary. */
.auth-retry { width: 100%; margin-top: 12px; }

/* Product walkthrough videos: the element follows the recording's own ratio (no letterbox,
   so the control bar matches the picture) and starts as a poster with one play button. */
.free-showcase video { aspect-ratio: auto; height: auto; }
.free-showcase-frame.has-play { position: relative; }
.video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 0 22px 0 8px; border: 0; border-radius: 999px;
  background: rgba(10, 12, 14, .82); color: var(--text-0); font: 700 15px/1 var(--font);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45); cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.video-play span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }
.video-play svg { width: 18px; height: 18px; margin-left: 2px; }
.video-play:hover span { background: var(--accent-hover); }
.free-showcase-frame.is-playing .video-play { display: none; }

/* Remap: stacked "How it works" steps lose the desktop column divider on mobile. */
@media (max-width: 760px) {
  body.product-remap .about-point { border-left: 0; padding: 0 0 24px; }
}

/* ---------- Home ---------- */
/* One section rhythm instead of mixed paddings that left ~200px dead gaps. */
.hub-home main > section:not(.hub-hero) { padding-block: var(--section-y) !important; }
.hub-home main > section + section { margin-top: 0 !important; }
/* Hero art: one straight, framed screenshot instead of a fan of skewed windows. */
.hub-home main .hub-hero-scene.has-deck > .hub-deck,
.hub-home .hub-hero-scene .hub-deck,
.hub-home .hub-hero-scene .hub-scene-routes,
.hub-home .hub-hero-scene .hub-scene-wave,
.hub-home .hub-hero-scene .hub-scene-reticle { display: none !important; }
.hub-home .hub-hero-scene { perspective: none !important; min-height: 0 !important; }
.hub-home .hub-hero-scene .hub-screen {
  position: relative !important; top: auto !important; right: auto !important; width: 100% !important;
  transform: none !important; border: 1px solid var(--frame) !important; border-radius: 14px !important; overflow: hidden;
  box-shadow: 0 40px 120px -50px rgba(244, 206, 100, .35), 0 24px 60px rgba(0, 0, 0, .55) !important;
}
.hub-home .hub-hero-scene .hub-preview-image { transform: none !important; }
/* FAQ: centred head (title, then subtext) above the accordion, same display weight as other headings. */
.hub-home main .hub-faq .faq-heading,
.hub-home main .hub-faq .faq-heading h2,
.hub-home main .hub-faq .faq-heading .lede { text-align: center !important; margin-inline: auto !important; }
.hub-home main .hub-faq .faq-heading h2 { font-family: "Versus Display", var(--font); font-weight: 800; letter-spacing: -.025em; }
/* Support launcher sits clear of the content column. */
.support-launcher { bottom: 24px !important; right: 24px !important; }

/* ---------- Imagery ---------- */
/* Game key art keeps its logo: crop from the upper third, not the centre. */
.vpn-game-card img, .hub-stage-media img, .game-tile img, .game-card img { object-position: center 28%; }

/* ---------- Guide articles (vpn-*, remap-alternatives, mate-voice, boost-does-it-work, audio-equalizer-apo) ---------- */
.reading-guide main { padding-top: calc(var(--announce-h) + var(--nav-h)); }
.article-hero { padding: 56px 0 48px; border-bottom: 1px solid var(--line); }
.article-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.article-hero h1 { margin: 0 0 18px; font-family: "Versus Display", var(--font); font-weight: 800; font-size: clamp(36px, 4.2vw, 56px); line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
.article-hero .lede { max-width: 54ch; margin: 0; color: var(--text-2); font-size: 18px; line-height: 1.6; }
.article-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.article-hero-art { margin: 0; border: 1px solid var(--frame); border-radius: var(--radius-card); overflow: hidden; background: var(--surface); aspect-ratio: 16 / 10; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .7); }
.article-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
@media (max-width: 900px) {
  .article-hero { padding: 32px 0 36px; }
  .article-hero-grid { grid-template-columns: 1fr; gap: 28px; }
}
/* Readable article column, aligned to the page grid rather than floating centred. */
.reading-guide .product-section > .container { max-width: none; }
.reading-guide .product-section > .container > * { max-width: 720px; }
.reading-guide .product-section { padding-block: 28px; }
.reading-guide .product-section:first-of-type { padding-top: 48px; }
.reading-guide .product-section h2 { margin: 0 0 14px; font-family: "Versus Display", var(--font); font-weight: 800; font-size: clamp(24px, 2.2vw, 28px); line-height: 1.2; letter-spacing: -.02em; }
.reading-guide .product-section p, .reading-guide .product-section li { color: var(--text-2); font-size: 17px; line-height: 1.75; }

/* ---------- Community signed-out view: blurred board preview under the join card ---------- */
.forum-gate { position: relative; display: grid; min-height: 460px; place-items: center; }
.forum-gate-preview { position: absolute; inset: 0; display: grid; align-content: start; gap: 10px; padding-top: 8px; filter: blur(5px); opacity: .45; pointer-events: none; user-select: none; }
.forum-gate-row { display: grid; grid-template-columns: 200px 1fr auto; gap: 20px; align-items: center; padding: 18px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.forum-gate-row strong { color: var(--text-0); font-size: 16px; }
.forum-gate-row span { color: var(--text-3); font-size: 14px; }
.forum-gate-row em { font-style: normal; color: var(--text-3); font-size: 13px; }
.forum-gate .forum-lock { position: relative; z-index: 1; border-radius: var(--radius-card); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
[data-forum]:has(.forum-gate) .forum-crumb { display: none; }

/* ---------- Art credits pages: standard shell, styled links ---------- */
.art-credits { padding-top: calc(var(--announce-h) + var(--nav-h) + 48px); }
.art-credits p a, .art-credits > a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(244, 206, 100, .4); text-underline-offset: 3px; }
.art-credits p a:hover, .art-credits > a:hover { text-decoration-color: var(--accent); }
.art-credits h1 { font-family: "Versus Display", var(--font); font-weight: 800; font-size: clamp(32px, 3.6vw, 44px); letter-spacing: -.025em; }
.art-credits p { color: var(--text-2); }

/* Partner attribution: plain text, no wide tracking. */
.hero-partner strong, .hero-partner span { letter-spacing: .01em !important; }

/* ---------- VPN page ---------- */
/* Result counts are for screen readers only; on screen they read as debug output. */
.vpn-game-results { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The 26px pseudo-subheading between the H2 and the body becomes the lede. */
.vpn-benefit-lede { font-size: 18px !important; font-weight: 500 !important; line-height: 1.55 !important; color: var(--text-2) !important; letter-spacing: 0 !important; }
/* No ghost logo bleeding off the Discord card. */
.vpn-discord-watermark { display: none !important; }
/* Signal explainer cards share one height. */
.vpn-signal-explainer { align-items: stretch; }
.vpn-signal-explainer > * { height: auto; }
@media (max-width: 640px) {
  .vpn-hero-benefits { grid-template-columns: 1fr !important; }
  .vpn-hero-benefits * { font-size: 14px; }
}

/* One hero top offset on the product pages (Audio and Boost started ~40px under the nav). */
.product-landing .product-hero { padding-top: calc(var(--announce-h) + var(--nav-h) + 72px) !important; }
/* Related guides: an odd last item spans the row instead of leaving an empty cell. */
.related-guide-list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---------- One surface system for cards ---------- */
/* Leaderboards: same page background and card treatment as the rest of the site. */
.aim-board-site main { background: var(--bg) !important; }
.aim-board-layout { border: 1px solid var(--line) !important; border-radius: var(--radius-card); background: var(--surface) !important; overflow: hidden; }
.aim-board-layout > aside { border-right-color: var(--line) !important; background: var(--surface-2) !important; }
.aim-kicker { letter-spacing: .01em !important; }
/* Support desk sidebar, community lock, waitlist form and status table: rounded, quiet borders. */
.support-options, .forum-lock, .waitlist-card, .waitlist-form, .status-table, .status-panel {
  border-radius: var(--radius-card) !important;
  border-color: var(--line) !important;
}
.support-options { background: var(--surface) !important; }
/* Text-link actions become ghost buttons. */
a.support-link, .support-options > a:not(.btn) {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--radius-control);
  color: var(--text-1); text-decoration: none; font-weight: 600;
}

/* Home details */
.hub-home .hub-tool-list > article { display: flex; flex-direction: column; }
.hub-home .hub-tool-list > article > a:last-child { margin-top: auto; padding-top: 14px; }
/* Loadouts: the screenshot takes ~60% of the card so its UI is readable. */
.hub-home .hub-loadouts { display: grid !important; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) !important; gap: 40px !important; align-items: center; padding: 40px !important; }
.hub-home .hub-loadouts img { width: 100% !important; max-width: none !important; height: auto; border-radius: 12px; border: 1px solid var(--line); }
@media (max-width: 900px) { .hub-home .hub-loadouts { grid-template-columns: 1fr !important; padding: 24px !important; } }
/* VPN and Remap stage cards: screenshots inset inside the card instead of bleeding off both edges. */
.hub-home .hub-stage-shot { max-width: calc(100% - 48px) !important; margin-inline: 24px !important; border-radius: 12px; }
.hub-final-link { font-size: 15px; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
/* Mobile product rail: one horizontal scroller instead of 2 columns with a lone Boost tile. */
@media (max-width: 640px) {
  .hub-home .hub-preview-tabs { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; padding-bottom: 6px; }
  .hub-home .hub-preview-tabs > a { flex: 0 0 44%; scroll-snap-align: start; }
}

/* Product name labels: no single-word colour accent. */
.product-label em, .product-label span, [class*="eyebrow"] em, .cl-eyebrow em, .cl-eyebrow span { color: inherit !important; }
.product-name strong, .product-name em, .cl-product-name strong, .cl-product-name em { color: inherit !important; }
.cl-product strong { color: inherit !important; }

/* Clip sharing buttons follow the site button system, including the neutral disabled state. */
.clip-button { border-radius: var(--radius-control); font-weight: 700; }
.clip-button:disabled, .clip-button.primary:disabled { opacity: 1; background: var(--disabled-bg); border-color: var(--disabled-line); color: var(--disabled-ink); }
/* Empty connection code: show placeholder dashes until the code arrives. */
#device-code:empty::before { content: "— — — —"; color: #4f565d; letter-spacing: .2em; }

/* Hero screenshots sit straight and framed on every product page (no skewed perspective). */
.mate-landing .mate-hero-media, .hub-hero-scene .hub-screen, .product-shot, .cl-hero-shot { transform: none !important; }
.mate-landing .mate-hero-media img { border-radius: 12px; }

/* =====================================================================
   Anti-slop pass (2026-10-17)
   One display face, one restrained type scale, the gold accent kept to the
   primary action and the current nav item, no coloured left-border cards and
   no blue/violet hero washes.
   ===================================================================== */
@font-face { font-family: "Versus Display"; src: url("/fonts/Outfit-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
:root {
  --font-display: "Versus Display", "Versus Text", "Segoe UI", system-ui, sans-serif;
  /* Type scale: hero 40-60, page title 32-44, section 28-40, guide/card section 24-28. */
  --fs-hero: clamp(40px, 4.2vw, 60px);
  --fs-page: clamp(32px, 3vw, 44px);
  --fs-h2: clamp(28px, 2.8vw, 40px);
  --fs-h2-sm: clamp(24px, 2.2vw, 28px);
  --lh-display: 1.06;
  --ls-display: -.02em;
  --text-1: #f3f6f7;
  --text-2: #c9d2d6;
  --text-3: #a9b4ba;
  --text-4: #7d8a91;
  --line-soft: rgba(255, 255, 255, .1);
  --line-strong: rgba(255, 255, 255, .18);
  --disabled-bg: #23272b;
  --disabled-line: #2c3136;
  --disabled-ink: #858e96;
  --accent-soft: #1c1910;
  --text-0: #fff;
  --frame: #2a3036;
}

/* ---------- Display font token on every page title and section heading ---------- */
main h1, main h2, .campaign h1, .campaign h2, .comm-hero h1, .aim-board-hero h1 {
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
}

/* ---------- Hero h1: 40-60px on the landing pages ---------- */
body:not(.reading-guide):is(.hub-home, .product-landing, .product-remap, .product-vpn, .mate-landing,
    .clipper-landing, .aim-landing) main :is(section, header, div) > h1,
body:not(.reading-guide).product-vpn main .vpn-slide-title,
body.campaign .campaign-hero h1 {
  font-size: var(--fs-hero) !important;
  line-height: var(--lh-display) !important;
  letter-spacing: var(--ls-display) !important;
}

/* ---------- Utility page titles (community, support, status, legal, docs, journal, leaderboards) ---------- */
.comm-hero h1, .support-heading h1, .status-heading h1, .legal-head h1, .aim-board-hero h1,
.journal-site main h1, .notes-page h1, body:not(.hub-home):not(.product-landing):not(.product-remap):not(.product-vpn):not(.mate-landing):not(.clipper-landing):not(.aim-landing):not(.campaign) main .docs-hero h1 {
  font-size: var(--fs-page) !important;
  line-height: 1.1 !important;
  letter-spacing: var(--ls-display) !important;
}

/* ---------- Section h2: one size (28-40px) on the landing pages ---------- */
body:not(.reading-guide):is(.hub-home, .product-landing, .product-remap, .product-vpn, .mate-landing,
    .clipper-landing, .aim-landing) main section h2:not(.vpn-slide-title),
body.campaign main section h2, body.campaign section h2 {
  font-size: var(--fs-h2) !important;
  line-height: 1.1 !important;
  letter-spacing: var(--ls-display) !important;
}
.reading-guide .related-guides-heading h2 { font-size: var(--fs-h2-sm) !important; letter-spacing: -.015em !important; }

/* ---------- Headline accents: no single gold word or second line in a heading ---------- */
:is(h1, h2) > :is(em, span:not([class])), :is(h1, h2) > br + :is(em, span:not([class])) {
  color: inherit !important;
  font-style: normal;
  -webkit-text-fill-color: currentColor;
  background: none;
}

/* ---------- Accent budget: gold stays on the primary button and the current nav item ---------- */
/* Cookie bar and support launcher sit on every screen, so they are neutral. */
.cookie { border-top-color: var(--line) !important; }
.cookie a { color: var(--text-1) !important; text-decoration-color: var(--line-strong); }
.cookie a:hover { text-decoration-color: currentColor; }
.support-launcher { background: var(--surface-2) !important; color: var(--text-1) !important; border: 1px solid var(--line-strong) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .45) !important; }
.support-launcher:hover { background: #1f2428 !important; border-color: rgba(255, 255, 255, .32) !important; }
/* Partner line: a plain credit, not a second highlight. */
.hero-partner, .hero-partner span { color: var(--text-3) !important; }
.hero-partner strong { color: var(--text-1) !important; border-left-color: var(--line-strong) !important; }
/* Secondary text links next to the primary button: white with an underline. */
.product-text-link, .cl-text-link, .mate-link, .vpn-text-link, .status-link, .status-jump, .help-support-link,
body.product-vpn .vpn-hero .vpn-text-link, .campaign-vpn .vpn-text-link {
  color: var(--text-1) !important;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
}
:is(.product-text-link, .cl-text-link, .mate-link, .vpn-text-link, .status-link, .help-support-link):hover { text-decoration-color: currentColor; }
/* Small badges and counters are labels, not calls to action. */
.hub-tab-top small, .hub-product-label span, .drop-product-name .product-soon {
  color: var(--text-2) !important;
  border-color: var(--line-strong) !important;
  background: transparent !important;
}

/* ---------- No coloured left-border cards ---------- */
.game-card, .post, .board-row, .board-section .board-row, .thread-list .thread-row,
.board-section .board-row:hover, .thread-list .thread-row:hover,
.thread-row.is-pin, .thread-list .thread-row.is-pin {
  border-left-width: 1px !important;
  border-left-color: var(--line-soft) !important;
}
.board-section .board-row:hover, .thread-list .thread-row:hover { border-color: rgba(255, 255, 255, .2) !important; transform: none !important; }
.game-card { border: 1px solid var(--line-soft); border-radius: var(--radius-control); }
.callout, .docs-empty, .account-review-reminder {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-control);
}
.support-ai-roles > div { border-left-color: var(--line) !important; }
.aim-demo-copy { border-left: 0 !important; padding-left: 0 !important; }

/* ---------- No blue or violet washes behind the heroes ---------- */
.product-vpn .vpn-hero, .mate-landing .mate-hero { background: linear-gradient(135deg, #0d1113 0%, #080a0b 74%) !important; }
.hub-home .hub-stage-pattern { display: none !important; }

/* ---------- Campaign VPN page: same gold accent and charcoal as the rest of the site ---------- */
body.campaign.campaign-vpn {
  --accent: #f4ce64;
  --accent-hover: #ffdd80;
  --accent-rgb: 244, 206, 100;
  --on-accent: #1a1408;
}
.campaign-vpn .vpn-hero:before { background: linear-gradient(100deg, #0a0c0eed 10%, #0a0c0ec2 58%, #0a0c0eaa), url('/art/campaign/charcoal-material-20260930.webp') center/cover !important; }
.campaign-vpn .vpn-hero-media:before { display: none !important; }
.campaign-vpn .vpn-session:after { background: linear-gradient(90deg, #0a0c0efa 0%, #0a0c0eeb 32%, #0a0c0e8c 52%, #0a0c0e1f 74%, #0a0c0e00 100%), linear-gradient(0deg, #0a0c0ef2, transparent 42%), linear-gradient(180deg, #0a0c0e99, transparent 30%) !important; }
.campaign-vpn .vpn-hero-index, .campaign-vpn .vpn-hero-index a + a { border-color: var(--line) !important; }
.campaign-vpn .vpn-hero-index b { color: var(--text-3) !important; }

/* Labels, counters, kickers and secondary links that were still gold. */
.help-product-index small, .docs-side nav a, details > nav > a, .legal-kicker, .aim-kicker, .aim-board-heading > span,
.suite-product-kicker strong, .aim-platform-line strong, .experience-hero-brand small, .status-shortcut small,
.campaign .product-label, .recovery-help a, figcaption a, button.support-link {
  color: var(--text-2) !important;
}
.suite-product-kicker span, .experience-hero-brand small { border-color: var(--line-strong) !important; background: transparent !important; }
figcaption a, .recovery-help a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
/* Product screenshots: a quiet frame, not a gold top rule. */
.product-shot, .product-shot > a, .cl-hero-shot, .aim-product-shot, .hero-inset, .auth-card.recovery-card, .auth-load-error, .admin-gate {
  border-color: var(--line) !important;
}

/* Gold held back below the fold too: definition labels, step numbers, eyebrows and
   secondary links read in the neutral text colours; buttons, selected tabs and the
   play control keep the accent. */
main :is(dt, .product-step-number, .cl-editor-features > li > span, .cl-share-details > article > span,
  .product-facts strong, .product-eyebrow, .cl-eyebrow, .hub-product-label, .engine-ready, .aim-routine-title > span,
  .aim-input-details h3, .free-video-chapters button > span, .free-showcase-media figcaption > span,
  .vpn-lobby-heading > p, .aim-demo figcaption, .hub-mate-copy h3 > em, .fs-practice-path small, div > span > small),
.campaign :is(.vpn-kicker, .price-pc, .vpn-partner-brand strong > span, strong > span) {
  color: var(--text-2) !important;
}
main :is(.product-step-number, .cl-editor-features > li > span, .cl-share-details > article > span) { color: var(--text-4) !important; }
main :is(.fs-link, .hub-text-link, .hub-card-foot > a, .hub-tool-list > article > a, .hub-community-links > a, .hub-shared-plan > a,
  .learn-more, .engine-more, .suite-next-links > a, .status-contact, .remap-overlay-included > a, .faq-answer a, .device-card .learn-more),
.campaign .campaign-account-link a {
  color: var(--text-1) !important;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
}
main :is(.fs-link, .hub-text-link, .learn-more, .engine-more, .suite-next-links > a, .faq-answer a):hover { text-decoration-color: currentColor; }
main details.faq > summary { color: var(--text-1) !important; }
body.product-remap .pad-hots .hot { color: var(--text-1) !important; }
body.product-remap .pad-hots .hot { border-color: var(--line-strong) !important; }
body.product-remap .cover-card .cover-caption { background: rgba(10, 12, 14, .82) !important; color: var(--text-1) !important; }
body.product-remap .engine-stage, main > section.spotlight-band, main > section.why-band, .hub-home main > section.hub-final,
.hub-home .hub-final > .container, .hub-home .hub-tool-list > article { border-color: var(--line) !important; }
/* VPN hero: the three-line headline fits its column; no decorative rotated outline behind it. */
body:not(.reading-guide).product-vpn main .vpn-hero-copy h1,
body:not(.reading-guide).product-vpn main .vpn-slide-title { font-size: clamp(38px, 3.6vw, 52px) !important; }
body.product-vpn main .vpn-hero::after { display: none !important; }
.suite-product-kicker, .suite-product-kicker > span { color: var(--text-2) !important; }
/* Community signed-out preview: no sideways scroll on phones. */
.forum-gate { overflow: hidden; }
@media (max-width: 640px) {
  .forum-gate-row { grid-template-columns: minmax(0, 1fr) auto; }
  .forum-gate-row span { display: none; }
}

/* ---------- "Included in every plan" (compact pricing): one centred card with a 3-column check grid ---------- */
body [data-price-mode="compact"] .price-shared {
  max-width: 1104px; margin: 40px auto 0; padding: 36px 40px 38px;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px;
  background: radial-gradient(90% 120% at 50% 0%, rgba(244, 206, 100, .06), transparent 60%), #0e1214;
  text-align: center;
}
body [data-price-mode="compact"] .price-shared h3 {
  margin: 0; color: #fff; font-family: "Versus Display", var(--font); font-weight: 800;
  font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -.02em;
}
body [data-price-mode="compact"] .price-shared .price-shared-lede {
  max-width: 60ch; margin: 10px auto 0; color: #b9c2c8; font-size: 15px; line-height: 1.6; text-align: center;
}
body [data-price-mode="compact"] .price-shared ul {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 32px;
  max-width: none; margin: 28px 0 0; padding: 26px 0 0; list-style: none; text-align: left;
  border: 0; border-top: 1px solid rgba(255, 255, 255, .08); border-radius: 0; background: none;
}
body [data-price-mode="compact"] .price-shared li {
  position: static; display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 0; border: 0;
  color: #dfe4e7; font-size: 15px; line-height: 1.45; text-align: left;
}
body [data-price-mode="compact"] .price-shared li::before {
  content: ""; position: static; flex: none; width: 22px; height: 22px; margin-top: -1px; transform: none;
  border: 1px solid rgba(244, 206, 100, .55); border-radius: 50%;
  background: rgba(244, 206, 100, .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.5 3 3 6-6.5' fill='none' stroke='%23f4ce64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}
body [data-price-mode="compact"] .price-shared-terms { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .08); }
body [data-price-mode="compact"] .price-shared-terms p { text-align: center; }
@media (max-width: 1000px) { body [data-price-mode="compact"] .price-shared ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  body [data-price-mode="compact"] .price-shared { padding: 28px 20px 30px; margin-top: 28px; }
  body [data-price-mode="compact"] .price-shared ul { grid-template-columns: 1fr; gap: 12px; }
}


/* ---------- Section heads: title first, subtext directly under it, both centred (user rule) ----------
   Applies to full-width section heads. Two-column copy-plus-media sections, closing CTA bands and
   long-form article headings keep their own alignment. */
/* Home: product groups and FAQ */
body.hub-home main .hub-section-head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 16px; max-width: 860px; margin: 0 auto 48px; text-align: center; }
body.hub-home main .hub-section-head > * { margin-inline: auto; }
body.hub-home main .hub-section-head > p { max-width: 62ch; margin-top: 0; }
body.hub-home main .hub-faq-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; max-width: 860px; margin-inline: auto; }
body.hub-home main .hub-faq .faq-heading { position: static; display: grid; justify-items: center; gap: 14px; }
body.hub-home main .hub-faq .faq-heading .lede { max-width: 60ch; margin: 0 auto !important; }
body.hub-home main .hub-faq .faq-heading .learn-more { margin: 8px auto 0 !important; }
/* Product FAQs (VPN, Mate, Remap, Aim) */
body main .faq-band .faq-heading { text-align: center; }
body main .faq-band .faq-heading > * { margin-inline: auto; text-align: center; }
/* Product head rows: title + note/link pairs (Remap, Aim) */
body main .engine-head { flex-direction: column; flex-wrap: nowrap; align-items: center; justify-content: flex-start; text-align: center; gap: 10px; }
body main .engine-head h2 { max-width: none; }
body main .engine-head p { margin-inline: auto; }
body main .aim-training .engine-head { align-items: center; }
/* Free product showcase heads (Mate, Aim, Audio; Boost and Clipper already centre) */
body main .free-showcase-copy { margin-inline: auto; text-align: center; }
body main .free-showcase-copy > :is(h2, p) { margin-inline: auto; }
/* "Explore more of Versus" and product availability rows: stacked, centred, actions underneath */
body main .suite-next > .container { flex-direction: column; align-items: center; justify-content: flex-start; gap: 24px; text-align: center; }
body main .suite-next p { margin-inline: auto; }
body main .suite-next-links { justify-content: center; }
body main .product-availability { flex-direction: column; align-items: center; justify-content: flex-start; gap: 24px; text-align: center; }
body main .product-availability > div > * { margin-inline: auto; }
/* Campaign pages */
body.campaign .section-head { margin-inline: auto; text-align: center; }
body.campaign .section-head p { margin-inline: auto; }
body.campaign .campaign-pricing .campaign-account-link { text-align: center; }

/* ---------- Home: community and reviews rhythm ----------
   Community sits on a raised surface that fades in and out of the page ink (no hard grey rule),
   with a centred head (title, subtext, actions) above the collectibles board. Reviews stay on the ink. */
body.hub-home main .hub-community {
  border-block: 0;
  background: linear-gradient(180deg, var(--landing-ink, #0a0c0e) 0, #0e1317 140px, #0e1317 calc(100% - 140px), var(--landing-ink, #0a0c0e) 100%);
}
body.hub-home main .hub-community-grid { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 40px; text-align: center; }
body.hub-home main .hub-community-grid > div:first-child { max-width: 720px; }
body.hub-home main .hub-community-grid > div:first-child > p { margin-inline: auto; }
body.hub-home main .hub-community-grid .hub-actions { justify-content: center; }
body.hub-home main .hub-community-board { width: 100%; max-width: 760px; }
body.hub-home main .versus-reviews { border-block: 0; }

/* ---------- Palette pass (2026-10-18) ----------
   Lighter greys and gold tints from older passes move onto the dark tokens above.
   Remap and Aim cards keep their look (home "VPN and Remap" stage cards are left as they are). */
.aim-site .site-foot { background: var(--bg); border-top-color: var(--line); }
.hub-preview .hub-screen figcaption { background: var(--surface); }
.hub-home .hub-tools-layout .hub-tool-list > article, .hub-home .hub-tools-layout .hub-tool-list > article:first-child { background: var(--surface); }
.hub-home .hub-tools-layout .hub-tool-list > article:hover { background: var(--surface-2); }
.vpn-tour .vpn-tour-tabs > button:not([aria-selected="true"]) { background: var(--surface); }
.vpn-tour-panels .vpn-tour-description { background: var(--surface); }
.vpn-cod-section .vpn-cod-art { background: var(--surface); }
.loadouts-page .wl-empty, .wl-empty { background: var(--surface); }
.community .identity-plate, .identity-plate { background: rgba(17, 20, 23, .92); }
.hub-final .container { background: var(--surface); }
.legal-head { background-image: linear-gradient(var(--surface), var(--bg)); }
.comm-hero { background-image: none; }
.auth-screen { background-image: none; }
[data-price-mode="compact"] .price-shared, .price-shared { background-image: none; }

/* Glass navbar on scroll everywhere, including the account pages (auth-layout.css sets a solid bar). */
body:has(.auth-screen) .navbar.is-scrolled { background-color: transparent; }

/* Campaign landing pages (/lp/versus-vpn-gaming, /lp/versus-remap-controller): the bar stays on screen
   and turns to glass once the page scrolls, like the main navbar. */
.campaign .campaign-nav { position: sticky; top: 0; z-index: 60; transition: background-color .22s ease, border-color .22s ease; }
.campaign .campaign-nav.is-scrolled { background: rgba(8, 9, 11, .68); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border-bottom-color: rgba(255, 255, 255, .08); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .campaign .campaign-nav.is-scrolled { background: rgba(8, 9, 11, .95); } }
@media (prefers-reduced-transparency: reduce) { .campaign .campaign-nav.is-scrolled { background: #08090b; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Campaign closing band: a dark card instead of a solid blue or yellow block. */
.campaign .close-inner, .campaign-vpn .vpn-close .close-inner { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.campaign .close-inner:before { background: var(--ink); opacity: .04; }
.campaign .close-copy h2, .campaign .vpn-close h2 { color: var(--ink); }
.campaign .close-copy p, .campaign .vpn-close-action p { color: var(--muted); }
.campaign .vpn-close .vpn-kicker, .campaign .vpn-close-action small { color: var(--muted); }
.campaign .close-copy .btn, .campaign .vpn-close-action .btn { background: var(--accent); color: var(--on-accent); }
.campaign .close-copy .btn:hover, .campaign .vpn-close-action .btn:hover { background: var(--accent-hover); color: var(--on-accent); }
@media (max-width: 900px) { .campaign main .container.close-inner { padding-inline: 24px; } }