@font-face {
  font-family: Manrope;
  src: url("assets/manrope-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
* {
  box-sizing: border-box;
}
html {
  background: #080c10;
  color-scheme: dark;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  color: #eef5f9;
  font-size: 16px;
  line-height: 1.65;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
textarea {
  font: inherit;
}
button,
summary {
  cursor: pointer;
}
img {
  max-width: 100%;
}
button {
  color: inherit;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2,
h3 {
  text-wrap: balance;
}
h2 {
  font-size: clamp(35px, 4.1vw, 58px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.055em;
  margin-bottom: 24px;
}
h3 {
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.035em;
}
p {
  margin-bottom: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  right: 20px;
  top: 12px;
  z-index: 40;
  padding: 14px 20px;
  background: #76d8f4;
  color: #08151d;
  border-radius: 8px;
  transform: translateY(-150%);
  font-weight: 700;
}
.skip-link:focus {
  transform: translateY(0);
}
.section-space {
  padding-block: 118px;
}
.section-heading {
  max-width: 780px;
  margin-bottom: 48px;
}
.section-heading p {
  max-width: 590px;
  color: #a0adb8;
}
.muted-heading {
  color: #8197a8;
}
.small-label {
  display: block;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0.03em;
  color: #a9c4d3;
  margin-bottom: 18px;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  font-weight: 700;
  transition: color 0.25s;
}
.text-link .icon {
  transition: transform 0.25s;
}
.text-link:hover {
  color: #b3ecff;
}
.text-link:hover .icon {
  transform: translateX(-4px);
}
:root {
  --ink: #080c10;
  --surface: #10171d;
  --surface-2: #151e25;
  --text: #eef5f9;
  --muted: #a0adb8;
  --line: #25313a;
  --accent: #76d8f4;
  --accent-bright: #b3ecff;
  --radius: 16px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
html {
  scroll-padding-top: 110px;
}
body {
  font-family: Manrope, "Segoe UI", sans-serif;
  background: var(--ink);
}
.shell {
  width: min(1360px, calc(100% - 96px));
  margin-inline: auto;
}
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -0.1em;
}
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.header-sentinel {
  position: absolute;
  top: 36px;
  width: 1px;
  height: 1px;
}
.ps-header {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 80px;
  background: #080c10ee;
  border-bottom: 1px solid #25313a80;
  transition: background 0.25s;
}
.ps-header.is-scrolled {
  background: #0c131bef;
  backdrop-filter: blur(18px);
  border-color: #35434e;
}
.ps-nav-inner {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.ps-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  line-height: 1.14;
  font-weight: 750;
  letter-spacing: -0.045em;
}
.brand-second {
  display: block;
  color: #b1c4d1;
  font-size: 15px;
  letter-spacing: -0.025em;
  font-weight: 500;
}
.ps-emblem {
  display: block;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid #90ddf255;
  background: #dff4fa;
}
.ps-emblem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.8);
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
  color: #b4c2cd;
}
.menu-toggle {
  display: none;
}
.nav-link {
  position: relative;
  padding-block: 14px;
  transition: color 0.2s;
}
.nav-link:hover,
.nav-link[aria-current] {
  color: var(--accent-bright);
}
.nav-link[aria-current]::after {
  content: "";
  position: absolute;
  bottom: 7px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--accent);
}
.nav-action {
  border: 0;
  margin-right: 18px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  min-height: 50px;
  padding: 14px 21px;
  gap: 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 750;
  transition:
    transform 0.25s var(--ease),
    background 0.25s,
    border-color 0.25s,
    color 0.25s;
}
.button-primary {
  background: var(--accent);
  color: #08151d;
  box-shadow: inset 0 1px 0 #edffff66;
}
.button-secondary {
  background: #10171d;
  border-color: #35434e;
  color: #e5f0f6;
}
.button-primary:hover {
  background: var(--accent-bright);
  transform: translateY(-2px);
}
.button-secondary:hover {
  border-color: #78bad1;
  background: #172730;
  transform: translateY(-2px);
}
.button-arrow {
  width: 0.85em;
  transition: transform 0.25s var(--ease);
}
.button:hover .button-arrow {
  transform: translate(-2px, -2px);
}
.button:active {
  transform: scale(0.97);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}
.ps-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  min-height: 650px;
  padding-block: 76px 92px;
}
.hero-copy {
  position: relative;
  z-index: 2;
  padding: 0;
}
.eyebrow {
  font:
    600 12px/1.5 Manrope,
    sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 28px;
}
.ps-hero h1 {
  max-width: 800px;
  font-size: clamp(48px, 5.8vw, 88px);
  line-height: 1.06;
  letter-spacing: -0.065em;
  font-weight: 650;
  margin-bottom: 26px;
}
.ps-hero h1 span {
  color: var(--accent);
}
.hero-summary {
  font-size: 17px;
  line-height: 1.85;
  max-width: 490px;
  color: #aabac6;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.hero-art {
  position: absolute;
  z-index: -1;
  left: -40px;
  top: 6px;
  width: 64%;
  height: 650px;
  pointer-events: none;
  mask-image: linear-gradient(
    to right,
    transparent 1%,
    #000 23%,
    #000 90%,
    transparent 100%
  );
}
.hero-art picture,
.hero-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    var(--ink),
    transparent 15%,
    transparent 85%,
    var(--ink)
  );
}
.core-reflection {
  position: absolute;
  inset: 27% 22%;
  border-radius: 50%;
  opacity: 0.1;
  background: #68d8ff;
  filter: blur(60px);
}
.core-signal {
  position: absolute;
  height: 4px;
  width: 4px;
  border-radius: 50%;
  background: #b6f1ff;
  box-shadow: 0 0 14px #58c9f0;
}
.signal-one {
  top: 42%;
  left: 30%;
}
.signal-two {
  bottom: 30%;
  left: 53%;
}
.assurance {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-block: 25px;
  border-block: 1px solid var(--line);
  color: #a9bac7;
  font-size: 13px;
}
.assurance span {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.assurance .icon {
  color: var(--accent);
  font-size: 17px;
}
.hero-art picture {
  transform: translate3d(var(--pointer-x, 0px), var(--pointer-y, 0px), 0);
  transition: transform 0.6s var(--ease);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-enter {
    animation: hero-rise 0.85s var(--ease) both;
  }
  .hero-enter:nth-child(2) {
    animation-delay: 0.08s;
  }
  .hero-enter:nth-child(3) {
    animation-delay: 0.16s;
  }
  .hero-enter:nth-child(4) {
    animation-delay: 0.24s;
  }
  .hero-art {
    animation: art-arrive 1.2s var(--ease) both;
  }
  .core-signal {
    animation: signal-blink 4s ease-in-out infinite;
  }
  .signal-two {
    animation-delay: 2s;
  }
}
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes art-arrive {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes signal-blink {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(0.6);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}
@media (max-width: 1100px) {
  .shell {
    width: calc(100% - 56px);
  }
  .site-nav {
    gap: 18px;
  }
  .nav-action {
    margin-right: 0;
  }
  .ps-hero {
    min-height: 590px;
  }
  .hero-art {
    left: -28px;
    width: 68%;
    height: 590px;
  }
  .ps-hero h1 {
    font-size: clamp(46px, 6.6vw, 74px);
  }
}
@media (max-width: 839px) {
  .menu-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    font-size: 13px;
  }
  .menu-lines {
    width: 18px;
    height: 10px;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
  }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 20px;
    left: 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 0 0 16px 16px;
    background: #10171dfc;
    box-shadow: 0 30px 50px #0008;
  }
  .site-nav.open {
    display: flex;
  }
  .site-nav > .nav-link {
    padding: 16px;
  }
  .site-nav .nav-action {
    margin-top: 14px;
  }
}
@media (max-width: 767px) {
  .shell {
    width: calc(100% - 40px);
  }
  .ps-header,
  .ps-nav-inner {
    min-height: 76px;
  }
  .menu-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    font-size: 13px;
  }
  .menu-lines {
    width: 18px;
    height: 10px;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
  }
  .site-nav {
    display: none;
    position: absolute;
    top: 76px;
    right: 20px;
    left: 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 0 0 16px 16px;
    background: #10171dfc;
    box-shadow: 0 30px 50px #0008;
  }
  .site-nav.open {
    display: flex;
  }
  .site-nav > .nav-link {
    padding: 16px;
  }
  .site-nav .nav-action {
    margin-top: 14px;
  }
  .ps-hero {
    display: block;
    min-height: 0;
    padding-block: 52px 0;
  }
  .ps-hero h1 {
    font-size: clamp(39px, 8.5vw, 65px);
    line-height: 1.12;
    letter-spacing: -0.06em;
  }
  .eyebrow {
    font-size: 11px;
    letter-spacing: 0.12em;
    margin-bottom: 20px;
  }
  .hero-summary {
    font-size: 16px;
    line-height: 1.7;
  }
  .desktop-break {
    display: none;
  }
  .hero-actions {
    gap: 10px;
    margin-top: 24px;
  }
  .hero-actions .button {
    padding: 13px 16px;
    font-size: 13px;
  }
  .hero-art {
    position: relative;
    width: calc(100% + 40px);
    height: auto;
    aspect-ratio: 1.5;
    margin-right: -20px;
    left: auto;
    top: auto;
    mask-image: linear-gradient(
      to bottom,
      transparent,
      #000 10%,
      #000 85%,
      transparent
    );
    margin-top: 12px;
  }
  .assurance {
    gap: 16px;
    flex-wrap: wrap;
    justify-content: flex-start;
    font-size: 12px;
    padding-block: 22px;
  }
  .assurance span {
    flex: 1 1 40%;
  }
  .ps-footer {
    align-items: flex-start;
    flex-direction: column;
  }
  .ps-brand {
    font-size: 16px;
  }
  .ps-emblem {
    width: 42px;
    height: 42px;
  }
}
@media (max-width: 374px) {
  .hero-actions .button {
    width: 100%;
  }
  .ps-hero h1 {
    font-size: 36px;
  }
  .assurance span {
    flex-basis: 100%;
  }
}

/* Surface system: 16px cards, 8px buttons, 12px brand frame. Layers: art 0, content 1, nav 30, skip link 40. */
.start-section {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(48px, 9vw, 140px);
  align-items: center;
}
.start-copy {
  max-width: 440px;
}
.start-copy p {
  color: var(--muted);
  margin-bottom: 26px;
}
.start-copy h2 {
  font-size: clamp(36px, 4vw, 54px);
}
.start-choices {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 32px;
  background: linear-gradient(-115deg, #141f28, #0d131a);
}
.choice-prompt {
  margin-bottom: 10px;
  color: #b7c7d2;
  font-size: 14px;
}
.choice-link {
  display: grid;
  grid-template-columns: 44px 1fr 16px;
  gap: 16px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.choice-link:last-child {
  border-bottom: 0;
  padding-bottom: 4px;
}
.choice-icon {
  color: var(--accent);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #182c36;
}
.choice-link strong {
  display: block;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.025em;
}
.choice-link small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
}
.choice-link > .icon {
  color: #7492a5;
  transition:
    transform 0.25s,
    color 0.25s;
}
.choice-link:hover > .icon {
  color: var(--accent);
  transform: translateX(-5px);
}
.products-section {
  padding-top: 30px;
}
.solutions-grid {
  display: grid;
  grid-template-columns: 1.18fr 1fr;
  gap: 20px;
}
.solution-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  transition:
    transform 0.35s var(--ease),
    border-color 0.35s;
}
.solution-card:hover {
  transform: translateY(-4px);
  border-color: #466576;
}
.solution-card h3 {
  font-size: 35px;
  margin-bottom: 18px;
}
.solution-card p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
.solution-card .text-link {
  margin-top: 25px;
}
.solution-content {
  position: relative;
  z-index: 1;
}
.solution-rdma {
  grid-row: span 2;
  min-height: 594px;
  background: #0a1118;
}
.solution-rdma .solution-content {
  max-width: 290px;
}
.solution-rdma .product-hardware {
  position: absolute;
  z-index: 0;
  width: 80%;
  max-width: none;
  height: 85%;
  left: -23%;
  bottom: -3%;
  object-fit: cover;
  mask-image: linear-gradient(to right, transparent, #000 30%);
  opacity: 0.78;
}
.solution-rdma p {
  max-width: 260px;
}
.solution-rdma .category-price {
  color: #aac7d6;
  margin-top: 30px;
}
.category-price strong {
  color: var(--text);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.04em;
  margin-inline: 5px;
}
.category-price span {
  font-size: 14px;
}
.solution-firmware {
  min-height: 316px;
  background: radial-gradient(ellipse at 100% 90%, #1c3e50, #111d27 70%);
}
.solution-firmware p {
  max-width: 330px;
}
.firmware-motif {
  position: absolute;
  left: 30px;
  bottom: -4px;
  color: #73d7f41f;
  font-size: 128px;
  transform: rotate(12deg);
  pointer-events: none;
}
.solution-guidance {
  min-height: 256px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #10171c;
}
.solution-guidance h3 {
  font-size: 28px;
}
.rdma-section {
  background: #0c131a;
  border-block: 1px solid #25313a80;
}
.rdma-section .section-heading {
  max-width: 740px;
}
.rdma-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 40px;
  align-items: stretch;
}
.network-map {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 220px;
  padding: 30px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(-180deg, #13222c, #0c141b);
}
.network-node {
  flex: 0 1 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  min-width: 0;
}
.network-node > .icon {
  color: #a6c0d2;
  font-size: 32px;
  margin-bottom: 12px;
}
.network-node strong {
  font-size: 14px;
  font-weight: 600;
}
.network-node span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.router-node > .icon {
  color: var(--accent);
}
.network-path {
  position: relative;
  flex: 1;
  min-width: 12px;
  height: 2px;
  background: #315b70;
  margin-bottom: 52px;
  overflow: hidden;
}
.network-path i {
  display: block;
  position: absolute;
  inset: 0;
  background: linear-gradient(-90deg, transparent, #a7eaff, transparent);
}
.requirement-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-block: 30px;
}
.requirement-grid > div {
  padding: 0;
}
.requirement-grid .icon {
  color: var(--accent);
  font-size: 18px;
  margin-bottom: 14px;
}
.requirement-grid h3 {
  font-size: 16px;
  margin-bottom: 10px;
}
.requirement-grid p {
  font-size: 14px;
  color: #b2c2cd;
  line-height: 1.7;
}
.benefit-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  list-style: none;
  padding: 22px 0 0;
  margin: 0;
  border-top: 1px solid var(--line);
}
.benefit-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #adc1cf;
}
.benefit-list .icon {
  color: var(--accent);
  font-size: 11px;
}
.rdma-guide-link {
  margin: 18px 0 0;
  font-size: 14px;
}
.rdma-guide-link a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  text-decoration: none;
}
.rdma-guide-link a:hover {
  text-decoration: underline;
}
.game-guide h1 {
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  margin: 8px 0 16px;
}
.game-guide-lead {
  max-width: 42rem;
  font-size: 17px;
  line-height: 1.55;
  color: #c5d4df;
}
.game-guide-extra.section-space {
  padding-block: 24px 56px;
}
.game-guide-extra h2 {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
  margin: 0 0 12px;
}
.game-guide-extra .game-guide-lead + h2 {
  margin-top: 40px;
}
.game-guide-points {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  max-width: 40rem;
}
.game-guide-points li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: #adc1cf;
  font-size: 15px;
  line-height: 1.45;
}
.game-guide-points .icon {
  color: var(--accent);
  margin-top: 3px;
  flex-shrink: 0;
}
.game-guide-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.game-guide-note {
  margin-top: 22px;
  max-width: 40rem;
  font-size: 13px;
  color: #7f93a3;
}
.game-guide-more h2 {
  font-size: 22px;
  margin-bottom: 14px;
}
.game-guide-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.game-guide-list a {
  color: var(--accent);
  text-decoration: none;
}
.game-guide-list a:hover {
  text-decoration: underline;
}
.rdma-pricing {
  display: flex;
  flex-direction: column;
  padding: 36px;
  border: 1px solid #356078;
  border-radius: var(--radius);
  background: linear-gradient(-140deg, #1b3545, #12202c 55%, #0e1720);
}
.rdma-pricing .small-label {
  margin-bottom: 30px;
}
.price-intro {
  color: #b3c8d7;
  font-size: 13px;
}
.rdma-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  line-height: 1.4;
}
.rdma-price strong {
  color: var(--accent);
  font-size: 70px;
  font-weight: 600;
  letter-spacing: -0.06em;
}
.rdma-price span {
  color: #b3c8d7;
  font-size: 16px;
}
.pricing-note {
  font-size: 14px;
  color: #b0c3d1;
  margin-block: 14px 28px;
}
.short-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-block: 20px;
  margin-bottom: 28px;
  border-block: 1px solid #395363;
}
.short-plans > div {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.short-plans > div + div {
  padding-right: 22px;
  border-right: 1px solid #395363;
}
.short-plans strong {
  font-size: 22px;
  font-weight: 600;
}
.short-plans span {
  font-size: 13px;
  color: #b0c3d1;
}
.rdma-pricing .button {
  margin-top: auto;
}
.price-footnote {
  margin-top: 15px;
  text-align: center;
  font-size: 12px;
  color: #a6bac8;
}
.firmware-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: start;
}
.firmware-brand {
  display: grid;
  justify-items: center;
  gap: 12px;
  font-size: 12px;
  color: #b0c7d5;
}
.firmware-brand .ps-emblem {
  width: 90px;
  height: 90px;
  border-radius: 20px;
  box-shadow: 0 0 45px #76d8f414;
  transition: transform 0.4s;
}
.firmware-brand:hover .ps-emblem {
  transform: translateY(-4px);
}
.firmware-catalog {
  border: 1px solid #334b5a;
  border-radius: var(--radius);
  overflow: hidden;
  background: #101820;
}
.firmware-option {
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 110px;
}
.firmware-option:last-child {
  border-bottom: 0;
}
.firmware-option > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 36px;
  gap: 32px;
  align-items: center;
  padding: 25px 32px;
  list-style: none;
  transition: background 0.2s;
}
.firmware-option > summary::-webkit-details-marker {
  display: none;
}
.firmware-option > summary:hover {
  background: #162630;
}
.firmware-option[open] > summary {
  background: #182b38;
}
.tier-name strong {
  display: block;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
}
.tier-name small {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: #aac0ce;
}
.firmware-protections {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.firmware-protections li {
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 9px;
  border: 1px solid #2a4556;
  border-radius: 7px;
  background: #0a141c;
  overflow: hidden;
}
.firmware-protections li[data-mark="ricochet"] {
  background: #000;
}
.firmware-protection-logo {
  display: block;
  width: auto;
  height: 30px;
  object-fit: contain;
}
.firmware-specs .firmware-protections,
.comparison .firmware-protections,
.catalog-card .firmware-protections {
  margin-top: 0;
}
.catalog-card .firmware-protections {
  margin: 10px 0 2px;
}
.tier-price {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.tier-price strong {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.04em;
}
.tier-price small {
  color: #aac0ce;
  font-size: 12px;
}
.expand-icon {
  height: 34px;
  width: 34px;
  display: grid;
  place-items: center;
  background: #213746;
  border-radius: 50%;
  font-size: 12px;
  color: var(--accent);
}
.expand-icon .icon {
  transition: transform 0.3s;
}
.firmware-option[open] .expand-icon .icon {
  transform: rotate(-180deg);
}
.firmware-details {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  padding: 32px;
  background: #0c151d;
}
.firmware-description > p {
  max-width: 480px;
  color: #d2e0e9;
  font-size: 16px;
  line-height: 1.75;
}
.firmware-description > p + p {
  margin-top: 10px;
}
.feature-list {
  list-style: none;
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 24px 0 0;
}
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #aabfcd;
  font-size: 14px;
  line-height: 1.7;
}
.feature-list .icon {
  color: var(--accent);
  font-size: 11px;
  margin-top: 6px;
}
.firmware-specs {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 24px;
  padding-right: 32px;
  border-right: 1px solid var(--line);
}
.firmware-specs > div span {
  display: block;
  color: #91a8ba;
  font-size: 12px;
  margin-bottom: 8px;
}
.firmware-specs > div strong {
  display: block;
  font-size: 14px;
  font-weight: 550;
}
.firmware-specs > .button {
  grid-column: 1/-1;
  justify-self: start;
}
.spec-footnote {
  color: #94aaba;
  font-size: 12px;
  line-height: 1.7;
}
.firmware-specs .spec-footnote {
  grid-column: 1/-1;
}
.comparison {
  margin-top: 22px;
}
.comparison > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 8px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 650;
  color: #c5d9e5;
}
.comparison > summary::-webkit-details-marker {
  display: none;
}
.comparison > summary .icon {
  color: var(--accent);
}
.comparison-content {
  padding-top: 24px;
}
.comparison table {
  border-collapse: collapse;
  width: 100%;
  text-align: right;
  font-size: 14px;
}
.comparison caption {
  text-align: right;
  padding-bottom: 20px;
  color: var(--muted);
  font-size: 13px;
}
.comparison th,
.comparison td {
  padding: 16px 20px;
}
.comparison thead {
  background: #12222c;
  color: var(--accent);
  font-size: 12px;
}
.comparison tbody tr:nth-child(2n) {
  background: #10191f;
}
.comparison tbody th {
  font-weight: 600;
}
.comparison tbody td {
  color: #acc2d0;
}
.comparison .spec-footnote {
  margin-top: 20px;
}
.firmware-notice {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 24px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0e171f;
  font-size: 13px;
  color: #a4b8c7;
}
.firmware-notice > .icon {
  color: var(--accent);
  margin-top: 5px;
  font-size: 17px;
}
.firmware-notice strong {
  display: block;
  color: #d6e5ef;
  font-size: 14px;
  margin-bottom: 6px;
}
.firmware-notice p {
  max-width: 1040px;
  line-height: 1.75;
}
.process-section {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 100px;
  border-top: 1px solid var(--line);
}
.process-heading {
  position: sticky;
  top: 130px;
  align-self: start;
  max-width: 420px;
}
.process-heading > p:not(.eyebrow) {
  color: var(--muted);
  margin-bottom: 28px;
}
.process-journey {
  list-style: none;
  margin: 0;
  padding: 0;
}
.process-journey li {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 28px;
  padding-bottom: 48px;
}
.process-journey li:last-child {
  padding-bottom: 0;
}
.process-journey li::before {
  content: "";
  position: absolute;
  right: 25px;
  top: 52px;
  bottom: 0;
  width: 1px;
  background: #315367;
}
.process-journey li:last-child::before {
  display: none;
}
.step-number {
  display: grid;
  place-items: center;
  align-self: start;
  width: 52px;
  height: 52px;
  border: 1px solid #315367;
  background: #0f1f2b;
  border-radius: 50%;
  font-size: 13px;
  color: var(--accent);
  transition: background 0.5s;
}
.process-journey li.is-visible .step-number {
  background: #204157;
}
.process-journey h3 {
  font-size: 22px;
  margin-bottom: 12px;
  padding-top: 10px;
}
.process-journey p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
  max-width: 480px;
}
.support-section {
  padding-top: 24px;
}
.discord-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  padding: 64px;
  border: 1px solid #335467;
  border-radius: 20px;
  background: radial-gradient(ellipse at 0 0, #193344, #101b24 70%);
}
.discord-symbol {
  display: block;
  font-size: 38px;
  color: var(--accent);
  margin-bottom: 32px;
}
.discord-intro h2 {
  font-size: clamp(34px, 3.8vw, 50px);
}
.discord-intro > p {
  color: #abc2d1;
  max-width: 460px;
}
.discord-intro .button {
  margin-top: 30px;
}
.discord-intro .join-note {
  font-size: 12px;
  margin-top: 18px;
  max-width: 360px;
  line-height: 1.75;
}
.ticket-guide {
  padding-top: 12px;
}
.ticket-guide h3 {
  font-size: 20px;
  margin-bottom: 28px;
}
.ticket-guide ol {
  display: grid;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ticket-guide li {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 18px;
}
.ticket-guide li > span {
  width: 32px;
  height: 32px;
  border: 1px solid #466678;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--accent);
  font-size: 13px;
}
.ticket-guide strong {
  font-size: 15px;
  font-weight: 650;
}
.ticket-guide li p {
  color: #a4bdce;
  font-size: 14px;
  line-height: 1.7;
  margin-top: 6px;
}
.ticket-checklist {
  margin-top: 30px;
}
.ticket-checklist > summary {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--accent);
  font-weight: 600;
  font-size: 14px;
  list-style: none;
}
.ticket-checklist > summary::-webkit-details-marker {
  display: none;
}
.ticket-checklist textarea {
  width: 100%;
  margin-block: 20px 12px;
  padding: 16px;
  resize: none;
  min-height: 235px;
  border: 1px solid #466678;
  border-radius: 8px;
  background: #0a131a;
  color: #c8dce8;
  font-size: 13px;
  line-height: 1.6;
}
.copy-status {
  min-height: 1.5em;
  font-size: 13px;
  color: var(--accent);
  margin-top: 10px;
}
.support-promises {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 60px;
  padding-top: 50px;
}
.support-promises .icon {
  color: var(--accent);
  margin-bottom: 18px;
  font-size: 21px;
}
.support-promises h3 {
  font-size: 18px;
  margin-bottom: 12px;
}
.support-promises p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.8;
}
.final-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid var(--line);
  padding: 110px 0 120px;
}
.final-section h2 {
  font-size: clamp(48px, 6.7vw, 92px);
  letter-spacing: -0.06em;
  line-height: 1.05;
  margin-bottom: 26px;
}
.final-section h2 > span {
  color: var(--accent);
}
.final-section > p {
  color: var(--muted);
  margin-bottom: 32px;
}
.final-wordmark {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 20px;
  font-size: clamp(200px, 35vw, 510px);
  letter-spacing: -0.1em;
  font-weight: 800;
  line-height: 1.2;
  color: transparent;
  -webkit-text-stroke: 1px #2a566880;
  mask-image: linear-gradient(135deg, #000, transparent 90%);
  user-select: none;
}
.ps-footer {
  padding-block: 38px 24px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.footer-top {
  display: grid;
  grid-template-columns: 1fr 1.2fr auto;
  gap: 36px;
  align-items: center;
  padding-bottom: 32px;
}
.footer-top .ps-brand {
  color: var(--text);
}
.footer-top > p {
  line-height: 1.8;
}
.footer-links {
  display: grid;
  gap: 10px;
  justify-items: start;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  border-top: 1px solid #25313a70;
  padding-top: 24px;
  font-size: 12px;
}
.footer-bottom a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
}
.back-arrow {
  transform: rotate(90deg);
}
@media (prefers-reduced-motion: no-preference) {
  .network-path i {
    animation: signal-travel 3.2s ease-in-out infinite;
  }
  .path-second i {
    animation-delay: 1.1s;
  }
  [data-reveal].is-pending {
    opacity: 0;
    transform: translateY(22px);
  }
  [data-reveal] {
    transition:
      opacity 0.65s var(--ease),
      transform 0.65s var(--ease);
  }
  .firmware-option[open] .firmware-details {
    animation: hero-rise 0.3s var(--ease);
  }
  .site-nav.open {
    animation: hero-rise 0.3s var(--ease);
  }
}
@keyframes signal-travel {
  from {
    transform: translateX(120%);
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  to {
    transform: translateX(-120%);
    opacity: 0.2;
  }
}
.motion-paused *,
.hero-art.is-offscreen * {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .hero-art picture {
    transform: none !important;
  }
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .ps-header,
  .ps-header.is-scrolled {
    background: #080c10;
    backdrop-filter: none;
  }
}
@media (min-width: 1920px) {
  .ps-hero {
    min-height: 720px;
  }
  .hero-art {
    height: 710px;
    width: 70%;
    left: -90px;
  }
  .ps-hero h1 {
    font-size: 90px;
  }
}
@media (max-width: 1100px) {
  .section-space {
    padding-block: 88px;
  }
  .start-section {
    gap: 50px;
  }
  .solutions-grid {
    gap: 16px;
  }
  .solution-card {
    padding: 30px;
  }
  .solution-rdma .solution-content {
    max-width: 240px;
  }
  .rdma-layout {
    gap: 28px;
    grid-template-columns: 1.3fr 1fr;
  }
  .rdma-pricing {
    padding: 28px;
  }
  .firmware-details {
    gap: 25px;
  }
  .firmware-specs {
    padding-right: 24px;
  }
  .process-section {
    gap: 60px;
  }
  .discord-panel {
    padding: 40px;
    gap: 40px;
  }
  .support-promises {
    gap: 32px;
  }
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
  .footer-links {
    grid-column: 2;
  }
}
@media (max-width: 767px) {
  .section-space {
    padding-block: 68px;
  }
  .section-heading {
    margin-bottom: 32px;
  }
  h2 {
    font-size: clamp(32px, 7.5vw, 48px);
  }
  .section-heading p {
    font-size: 15px;
  }
  .section-heading p br {
    display: none;
  }
  .start-section {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .start-copy h2 br {
    display: none;
  }
  .start-choices {
    padding: 24px;
  }
  .choice-link {
    gap: 13px;
  }
  .choice-link strong {
    font-size: 15px;
  }
  .choice-link small {
    font-size: 12px;
  }
  .choice-prompt {
    font-size: 13px;
  }
  .products-section {
    padding-top: 16px;
  }
  .solutions-grid {
    grid-template-columns: 1fr;
  }
  .solution-rdma {
    grid-row: auto;
    min-height: 440px;
  }
  .solution-rdma .solution-content {
    max-width: 60%;
  }
  .solution-rdma .product-hardware {
    height: 94%;
    width: 75%;
    left: -27%;
  }
  .solution-card {
    padding: 28px;
  }
  .solution-card h3 {
    font-size: 29px;
  }
  .solution-card p {
    font-size: 14px;
  }
  .solution-firmware {
    min-height: 270px;
  }
  .solution-guidance {
    min-height: 220px;
  }
  .rdma-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .network-map {
    padding: 26px 12px;
    gap: 7px;
    min-height: 200px;
  }
  .network-node {
    flex-basis: 105px;
  }
  .network-node strong {
    font-size: 13px;
  }
  .network-node span {
    font-size: 12px;
  }
  .network-path {
    min-width: 10px;
  }
  .requirement-grid {
    gap: 26px;
  }
  .benefit-list {
    display: grid;
    gap: 14px;
  }
  .rdma-pricing {
    padding: 28px;
  }
  .rdma-price strong {
    font-size: 66px;
  }
  .firmware-header {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .firmware-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 28px;
    gap: 12px;
  }
  .firmware-brand .ps-emblem {
    width: 52px;
    height: 52px;
    border-radius: 12px;
  }
  .firmware-header .section-heading {
    margin-bottom: 12px;
  }
  .firmware-option > summary {
    grid-template-columns: minmax(0, 1fr) auto 24px;
    gap: 12px;
    padding: 22px 20px;
  }
  .tier-name strong {
    font-size: 18px;
  }
  .tier-name small {
    font-size: 12px;
    max-width: 170px;
  }
  .tier-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    line-height: 1.5;
  }
  .tier-price strong {
    font-size: 23px;
  }
  .tier-price small {
    font-size: 12px;
  }
  .expand-icon {
    height: 25px;
    width: 25px;
    font-size: 10px;
  }
  .firmware-details {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 20px;
  }
  .firmware-description > p {
    font-size: 15px;
  }
  .firmware-specs {
    padding: 24px 0 0;
    border-right: 0;
    border-top: 1px solid var(--line);
  }
  .feature-list li {
    font-size: 13px;
  }
  .comparison table,
  .comparison tbody {
    display: block;
  }
  .comparison thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .comparison caption {
    display: block;
  }
  .comparison tr {
    display: grid;
    grid-template-columns: 1fr;
    padding: 20px;
    margin-bottom: 12px;
    border-radius: 12px;
    background: #10191f;
  }
  .comparison td,
  .comparison th {
    display: block;
    padding: 5px 0;
  }
  .comparison tbody th {
    font-size: 16px;
    margin-bottom: 8px;
  }
  .comparison td::before {
    content: attr(data-label) ": ";
    color: #d2e1ea;
  }
  .comparison td {
    font-size: 13px;
  }
  .firmware-notice {
    padding: 20px;
    gap: 12px;
  }
  .process-section {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .process-heading {
    position: static;
    max-width: 560px;
  }
  .process-journey li {
    gap: 20px;
    padding-bottom: 32px;
    grid-template-columns: 44px 1fr;
  }
  .step-number {
    width: 44px;
    height: 44px;
  }
  .process-journey li::before {
    right: 21px;
    top: 44px;
  }
  .process-journey h3 {
    font-size: 19px;
    padding-top: 8px;
  }
  .process-journey p {
    font-size: 14px;
  }
  .support-section {
    padding-top: 12px;
  }
  .discord-panel {
    grid-template-columns: 1fr;
    padding: 28px;
    gap: 40px;
  }
  .discord-intro h2 {
    font-size: 36px;
  }
  .discord-intro > p {
    font-size: 15px;
  }
  .discord-intro .button {
    width: 100%;
    font-size: 13px;
    padding: 14px 16px;
    gap: 10px;
  }
  .discord-intro .button-arrow {
    display: none;
  }
  .ticket-guide {
    padding-top: 28px;
    border-top: 1px solid #355264;
  }
  .ticket-guide h3 {
    font-size: 19px;
  }
  .ticket-guide li {
    gap: 14px;
  }
  .support-promises {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 36px;
  }
  .support-promises > div {
    display: grid;
    grid-template-columns: 25px 1fr;
    column-gap: 16px;
  }
  .support-promises .icon {
    grid-row: span 2;
    margin-top: 4px;
  }
  .support-promises h3 {
    margin-bottom: 6px;
  }
  .final-section {
    padding-block: 68px 80px;
  }
  .final-wordmark {
    font-size: 280px;
    left: -40px;
    top: 40px;
    opacity: 0.5;
  }
  .final-section h2 {
    font-size: 56px;
  }
  .final-section > p {
    font-size: 15px;
  }
  .footer-top {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .footer-links {
    grid-column: auto;
  }
  .footer-bottom {
    flex-wrap: wrap;
    gap: 12px;
  }
  html:not(.js) .site-nav {
    display: flex;
    position: static;
    flex-basis: 100%;
    border: 0;
    box-shadow: none;
  }
  html:not(.js) .ps-nav-inner {
    flex-wrap: wrap;
    padding-block: 16px;
  }
  html:not(.js) .menu-toggle {
    display: none;
  }
}
@media (max-width: 374px) {
  .shell {
    width: calc(100% - 32px);
  }
  .hero-art {
    width: calc(100% + 32px);
    margin-right: -16px;
  }
  .solution-card {
    padding: 24px;
  }
  .solution-rdma .solution-content {
    max-width: 80%;
  }
  .solution-rdma .product-hardware {
    opacity: 0.3;
  }
  .requirement-grid {
    grid-template-columns: 1fr;
  }
  .firmware-option > summary {
    padding: 20px 14px;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr) auto 20px;
  }
  .tier-name strong {
    font-size: 16px;
  }
  .tier-price strong {
    font-size: 21px;
  }
  .tier-name small {
    font-size: 12px;
  }
  .expand-icon {
    width: 20px;
    height: 20px;
  }
  .discord-panel {
    padding: 22px;
  }
  .discord-intro h2 {
    font-size: 31px;
  }
  .final-section h2 {
    font-size: 47px;
  }
  .start-choices {
    padding: 20px;
  }
  .choice-link {
    grid-template-columns: 34px 1fr 12px;
    gap: 10px;
  }
  .choice-icon {
    width: 32px;
    height: 36px;
  }
}

/* Buyer vouches */
.vouches-section {
  border-top: 1px solid var(--line);
}
.vouches-heading {
  max-width: 560px;
  margin-bottom: 40px;
}
.vouches-heading > p:not(.eyebrow) {
  color: var(--muted);
}
.vouch-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.vouch-card {
  display: flex;
}
.vouch-card figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 28px;
  border: 1px solid #335467;
  border-radius: 20px;
  background: radial-gradient(ellipse at 0 0, #193344, #101b24 70%);
}
.vouch-card blockquote {
  margin: 0;
}
.vouch-card blockquote p {
  margin: 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.7;
}
.vouch-card blockquote p::before {
  content: "\201C";
  color: var(--accent);
}
.vouch-card blockquote p::after {
  content: "\201D";
  color: var(--accent);
}
.vouch-card figcaption {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
}
@media (max-width: 1100px) {
  .vouch-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .vouch-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .vouch-card figure {
    padding: 22px;
  }
}

/* The 404 page (404.html) */
.not-found-actions { margin-top:32px; }

@media (max-width: 767px) {
  .firmware-protections {
    gap: 5px;
    margin-top: 8px;
  }
  .firmware-protections li {
    height: 31px;
    padding: 0 6px;
  }
  .firmware-protection-logo {
    height: 23px;
  }
}

/* Checkout is intentionally a compact extension of the existing surface system. */
.checkout-body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 85% 0%, #12384a55, transparent 30rem),
    linear-gradient(-180deg, #0a1117 0%, var(--ink) 42rem);
}
.checkout-header {
  border-bottom: 1px solid #263641;
  background: #080c10d9;
  backdrop-filter: blur(18px);
}
.checkout-bar {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.checkout-shell {
  padding-block: 48px clamp(54px, 8vw, 108px);
}
.checkout-intro {
  max-width: 700px;
  margin-bottom: 32px;
}
.checkout-intro h1 {
  margin-bottom: 14px;
  font-size: clamp(36px, 4.6vw, 58px);
  font-weight: 650;
  line-height: 1.04;
  letter-spacing: -0.065em;
}
.checkout-intro h1 span {
  color: var(--accent);
}
.checkout-intro > p:last-child {
  max-width: 620px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
}
.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  align-items: start;
  gap: clamp(22px, 3vw, 42px);
}
.checkout-panel {
  --panel-pad: 32px;
  min-width: 0;
  border: 1px solid #314551;
  border-radius: var(--radius);
  background: linear-gradient(-145deg, #111b23 0%, #0d141a 100%);
  box-shadow: 0 24px 80px #00000024;
}
.checkout-panel-heading {
  padding: 30px 32px 22px;
  border-bottom: 1px solid var(--line);
}
.checkout-panel-heading .small-label {
  margin-bottom: 10px;
}
.checkout-panel-heading h2 {
  margin: 0;
  font-size: 25px;
}
.checkout-product-list {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.checkout-product {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  min-height: 94px;
  padding: 20px 32px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.25s, box-shadow 0.25s;
}
.checkout-product:last-child {
  border-bottom: 0;
}
.checkout-requirements {
  padding: 24px 32px 28px;
  border-top: 1px solid var(--line);
  border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
  background: #0c151b;
}
.checkout-body--receipt .checkout-layout { grid-template-columns: minmax(0,1fr); max-width: 800px; }
.checkout-body--receipt .account-panel,
.checkout-body--receipt .checkout-products,
.checkout-body--receipt .checkout-fields,
.checkout-body--receipt .payment-methods,
.checkout-body--receipt .checkout-panel-heading,
.checkout-body--receipt #checkout-action,
.checkout-body--receipt .checkout-fine-print { display: none; }
.checkout-body--receipt #checkout-order-receipt { padding: 24px; border: 1px solid var(--line); border-radius: 16px; }
.checkout-requirements .small-label {
  margin-bottom: 8px;
}
.checkout-requirements h3 {
  margin-bottom: 8px;
  font-size: 15px;
  letter-spacing: -0.02em;
}
.checkout-requirements p {
  color: #a9c0cc;
  font-size: 13px;
  line-height: 1.7;
}
.checkout-requirements .checkout-warranty {
  margin-top: 7px;
  color: var(--accent-bright);
  font-size: 12px;
  font-weight: 700;
}
.checkout-product:hover {
  background: #17242d;
}
.checkout-product:has(input:checked) {
  z-index: 1;
  background: linear-gradient(-90deg, #193745, #15242c);
  box-shadow: inset -3px 0 var(--accent);
}
.checkout-product input,
.checkout-term input,
.payment-method input,
.crypto-choice input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.checkout-product-copy,
.checkout-product-price {
  min-width: 0;
}
.checkout-product-copy strong,
.checkout-product-price strong,
.checkout-product-copy small,
.checkout-product-price small {
  display: block;
}
.checkout-product-copy strong {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.checkout-product-copy small,
.checkout-product-price small {
  margin-top: 4px;
  color: #9fb6c3;
  font-size: 12px;
  line-height: 1.5;
}
.checkout-product-price {
  text-align: left;
  white-space: nowrap;
}
.checkout-product-price strong {
  color: var(--accent-bright);
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.04em;
}
/* Folding sections: Game licenses, RDMA Solution, Firmware. */
.checkout-group {
  border-bottom: 1px solid var(--line);
}
.checkout-group > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 16px;
  padding: 20px var(--panel-pad);
  list-style: none;
  cursor: pointer;
  transition: background 0.2s;
}
.checkout-group > summary::-webkit-details-marker {
  display: none;
}
.checkout-group > summary::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 9px;
  height: 9px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg) translate(2px, -2px);
  transition: transform 0.2s;
}
.checkout-group[open] > summary::after {
  transform: rotate(135deg) translate(2px, -2px);
}
.checkout-group > summary:hover {
  background: #17242d;
}
.checkout-group > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.checkout-group-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.checkout-group-meta {
  grid-column: 1;
  color: #9fb6c3;
  font-size: 12px;
}
.checkout-group-body {
  display: grid;
  gap: 12px;
  padding: 0 var(--panel-pad) 22px;
}
.checkout-product-list--focused {
  display: grid;
  gap: 12px;
  padding: 16px var(--panel-pad) 22px;
}
.checkout-qty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-top: 12px;
}
.checkout-qty > span {
  color: #c6d7e1;
  font-size: 13px;
  font-weight: 700;
}
.checkout-cart-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.checkout-cart-copy {
  margin: 0;
}
.checkout-family {
  padding: 16px;
  border: 1px solid #263b47;
  border-radius: 12px;
  background: #0c151b;
}
.checkout-family-head {
  display: grid;
  gap: 3px;
  margin: 0 0 12px;
}
.checkout-family-head strong {
  font-size: 15px;
  letter-spacing: -0.02em;
}
.checkout-family-head small {
  color: #9fb6c3;
  font-size: 12px;
  line-height: 1.5;
}
.checkout-terms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 8px;
}
.checkout-term {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid #354955;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.checkout-term:hover {
  border-color: #578097;
}
.checkout-term:has(input:checked) {
  border-color: var(--accent);
  background: #18333f;
  box-shadow: 0 0 0 1px var(--accent);
}
.checkout-term:has(input:focus-visible) {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}
.checkout-term-name {
  color: #c6d7e1;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.checkout-term-price {
  color: var(--accent-bright);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.03em;
}
.checkout-group-body .checkout-product {
  min-height: 0;
  padding: 14px 16px;
  border: 1px solid #263b47;
  border-radius: 12px;
  background: #0c151b;
}
.checkout-group-body .checkout-product:last-child {
  border-bottom: 1px solid #263b47;
}
.checkout-group-body .checkout-product:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
/* "Your order" line at the top of the payment panel. */
.checkout-summary {
  margin: 22px var(--panel-pad) 0;
  padding: 14px 16px;
  border: 1px solid #2c4452;
  border-radius: 12px;
  background: #0c151b;
}
.checkout-summary .small-label {
  margin-bottom: 6px;
}
.checkout-summary-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
}
.checkout-summary-line strong:first-child {
  font-size: 15px;
  letter-spacing: -0.02em;
}
.checkout-summary-line strong:last-child {
  color: var(--accent-bright);
  font-size: 19px;
  white-space: nowrap;
}
.checkout-summary-note {
  margin: 6px 0 0;
  color: #9fb6c3;
  font-size: 12px;
}
.checkout-summary-note:empty {
  display: none;
}
.checkout-body--receipt .checkout-summary {
  display: none;
}
.checkout-payment {
  padding-bottom: 32px;
}
.checkout-fields {
  display: grid;
  gap: 18px;
  padding: 28px 32px 24px;
}
.checkout-fields[hidden],
.payment-methods[hidden],
.checkout-fine-print[hidden],
.checkout-license-delivery[hidden],
.payment-method[hidden] {
  display: none;
}
.checkout-fields label,
.crypto-quote > label {
  display: block;
  margin-bottom: 8px;
  color: #c6d7e1;
  font-size: 13px;
  font-weight: 700;
}
.checkout-fields label > span[aria-hidden] {
  color: var(--accent);
}
.checkout-optional {
  color: #8097a5;
  font-weight: 500;
}
.checkout-fields input,
.checkout-fields textarea,
.checkout-input {
  width: 100%;
  border: 1px solid #354955;
  border-radius: 8px;
  padding: 13px 14px;
  resize: none;
  outline: none;
  color: var(--text);
  background: #0a1117;
  line-height: 1.5;
  font-size: 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field-help {
  margin: 7px 0 0;
  color: #8198a6;
  font-size: 11px;
  line-height: 1.5;
}
.checkout-fields input::placeholder,
.checkout-fields textarea::placeholder,
.checkout-input::placeholder {
  color: #708693;
}
.checkout-fields input:focus,
.checkout-fields textarea:focus,
.checkout-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px #76d8f41c;
}
.payment-methods {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: 0 32px;
  padding: 0;
  border: 0;
}
/* Instant choices first, then the ways our team checks by hand. */
.payment-method-row {
  display: grid;
  gap: 10px;
}
.payment-method-row[hidden],
.payment-method-row--main:not(:has(.payment-method:not([hidden]))) {
  display: none;
}
.payment-method-row--main {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.payment-method-row--more {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.payment-method-more-label {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  color: #8198a6;
  font-size: 12px;
  font-weight: 700;
}
.payment-method-row--more .payment-method {
  padding: 12px 14px;
}
.payment-method-row--more .payment-method strong {
  font-size: 13px;
}
.payment-methods legend {
  width: 100%;
  margin-bottom: 10px;
  color: #c6d7e1;
  font-size: 13px;
  font-weight: 700;
}
.payment-method {
  position: relative;
  display: block;
  min-width: 0;
  padding: 15px 16px;
  border: 1px solid #354955;
  border-radius: 10px;
  color: #a9c0cc;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.payment-method:hover {
  border-color: #578097;
  transform: translateY(-1px);
}
.payment-method:has(input:checked) {
  border-color: var(--accent);
  background: #18333f;
  color: var(--text);
}
.payment-method strong,
.payment-method small {
  display: block;
}
.payment-method strong {
  font-size: 14px;
}
.payment-method small {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.45;
}
.checkout-status {
  min-height: 1.5em;
  margin: 18px 32px 0;
  color: #a9c4d3;
  font-size: 13px;
}
.checkout-status[data-kind="error"] {
  color: #ffada4;
}
.checkout-status[data-kind="success"] {
  color: #9be7bf;
}
.checkout-license-delivery { display:grid; gap:12px; padding:20px; margin:16px 0; border:1px solid #356078; border-radius:var(--radius); background:#101e27; }
.checkout-license-delivery h3 { margin:0; font-size:20px; }
.checkout-license-delivery p { margin:0; color:var(--muted); line-height:1.6; }
.checkout-license-delivery code { display:block; overflow-wrap:anywhere; padding:12px; border-radius:8px; background:#080c10; color:var(--accent); font-size:16px; letter-spacing:.04em; }
.checkout-license-delivery [hidden] { display:none; }
#checkout-action {
  margin: 2px 32px 0;
}
.checkout-pay-button {
  width: 100%;
  margin-top: 2px;
}
.checkout-pay-button:disabled {
  cursor: wait;
  opacity: 0.68;
  transform: none;
}
.checkout-scoped-quote {
  display: grid;
  gap: 11px;
  padding: 22px;
  border: 1px solid #477a90;
  border-radius: 12px;
  background: #0b1820;
}
.checkout-scoped-quote .small-label {
  margin: 0;
}
.checkout-scoped-quote h3 {
  margin: 0;
  font-size: 22px;
}
.checkout-scoped-quote p:not(.small-label) {
  margin: 0;
  color: #a8bfcb;
  font-size: 13px;
  line-height: 1.65;
}
.checkout-scoped-quote .button {
  margin-top: 4px;
}
.checkout-gift-card {
  display: grid;
  gap: 11px;
  padding: 22px;
  border: 1px solid #86663e;
  border-radius: 12px;
  background: linear-gradient(-135deg, #211a12, #0d171d 70%);
}
.checkout-gift-card .small-label,
.checkout-gift-card h3,
.checkout-gift-card p {
  margin: 0;
}
.checkout-gift-card h3 {
  font-size: 22px;
}
.checkout-gift-card p:not(.small-label) {
  color: #cdbca6;
  font-size: 13px;
  line-height: 1.65;
}
.checkout-gift-card .checkout-gift-warning {
  color: #f1d09c;
}
.checkout-rewarble-steps {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-right: 20px;
  color: #cdbca6;
  font-size: 13px;
  line-height: 1.65;
}
.checkout-rewarble-total strong {
  color: #f1d09c;
}
.checkout-rewarble-steps a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.checkout-rewarble-steps a:hover {
  color: var(--accent-bright);
}
.checkout-fine-print,
.checkout-support,
.checkout-unavailable {
  margin: 16px 32px 0;
  color: #91a9b6;
  font-size: 12px;
  line-height: 1.7;
}
.checkout-support a,
.spec-footnote a {
  color: var(--accent-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.checkout-unavailable {
  margin-inline: 0;
  padding: 16px;
  border: 1px solid #5d483c;
  border-radius: 8px;
  color: #e5c4ab;
  background: #2a1d18;
}
.crypto-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.crypto-options .small-label,
.crypto-options .checkout-pay-button {
  grid-column: 1 / -1;
}
.crypto-options .small-label {
  margin: 0 0 4px;
}
.crypto-choice {
  position: relative;
  min-width: 0;
  padding: 14px;
  border: 1px solid #354955;
  border-radius: 8px;
  color: #a9c0cc;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.crypto-choice:has(input:checked) {
  border-color: var(--accent);
  background: #18333f;
  color: var(--text);
}
.crypto-choice strong,
.crypto-choice small {
  display: block;
}
.crypto-choice strong {
  font-size: 14px;
}
.crypto-choice small {
  overflow: hidden;
  margin-top: 2px;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crypto-quote {
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid #477a90;
  border-radius: 12px;
  background: #0b1820;
}
.crypto-quote .small-label {
  margin: 0;
}
.crypto-amount {
  margin: 0;
  color: var(--accent-bright);
  font-size: clamp(25px, 4vw, 35px);
  font-weight: 650;
  letter-spacing: -0.055em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.crypto-amount span {
  color: #91b6c8;
  font-size: 0.48em;
  letter-spacing: -0.02em;
}
.crypto-network,
.crypto-expiry {
  color: #a8bfcb;
  font-size: 12px;
  line-height: 1.6;
}
.crypto-address {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid #2f4855;
  border-radius: 8px;
  background: #081116;
}
.crypto-address > span {
  color: #a8bfcb;
  font-size: 11px;
  font-weight: 700;
}
.crypto-address code {
  overflow-wrap: anywhere;
  color: #e3f5fb;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  user-select: all;
}
.crypto-address .button {
  width: max-content;
  min-height: 38px;
  padding: 8px 12px;
  font-size: 12px;
}
.crypto-quote .checkout-fine-print {
  margin: 0;
}
.checkout-confirmation {
  padding: 24px;
  border: 1px solid #386b58;
  border-radius: 12px;
  background: #0c1d19;
}
.checkout-confirmation .small-label {
  margin-bottom: 10px;
  color: #9be7bf;
}
.checkout-confirmation h3 {
  margin-bottom: 8px;
  font-size: 22px;
}
.checkout-confirmation p:not(.small-label) {
  margin-bottom: 18px;
  color: #b1d1c2;
  font-size: 13px;
}
@media (prefers-reduced-motion: no-preference) {
  .checkout-panel,
  .checkout-intro {
    animation: hero-rise 0.55s var(--ease) both;
  }
  .checkout-payment {
    animation-delay: 0.08s;
  }
}
@media (max-width: 920px) {
  .checkout-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 767px) {
  .payment-methods {
    grid-template-columns: 1fr;
  }
  .checkout-bar {
    min-height: 72px;
  }
  .checkout-shell {
    padding-block: 32px 64px;
  }
  .checkout-intro {
    margin-bottom: 24px;
  }
  .checkout-intro h1 {
    font-size: clamp(34px, 10vw, 48px);
  }
  .checkout-panel {
    --panel-pad: 20px;
  }
  .checkout-panel-heading,
  .checkout-fields,
  .checkout-requirements {
    padding-inline: 20px;
  }
  .checkout-product {
    gap: 14px;
    min-height: 86px;
    padding: 18px 20px;
  }
  .checkout-product-copy strong {
    font-size: 14px;
  }
  .checkout-product-copy small {
    font-size: 11px;
  }
  .checkout-product-price strong {
    font-size: 17px;
  }
  .payment-methods,
  .checkout-status,
  #checkout-action,
  .checkout-fine-print,
  .checkout-support {
    margin-inline: 20px;
  }
  .crypto-options {
    grid-template-columns: 1fr;
  }
  .crypto-options .small-label,
  .crypto-options .checkout-pay-button {
    grid-column: auto;
  }
  .payment-method-row--main {
    grid-template-columns: 1fr;
  }
  /* The other ways to pay sit side by side as short buttons; their steps appear once chosen. */
  .payment-method-row--more .payment-method small {
    display: none;
  }
  .payment-method-row--more .payment-method {
    padding: 11px 10px;
    text-align: center;
  }
  .checkout-group > summary {
    padding-block: 18px;
  }
  .checkout-terms {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }
  .checkout-family {
    padding: 14px 12px;
  }
  .checkout-term {
    padding: 9px 10px;
  }
  .checkout-term-name {
    font-size: 11px;
  }
  .checkout-term-price {
    font-size: 16px;
  }
}
@media (max-width: 410px) {
  .checkout-bar .ps-brand > span:last-child {
    display: none;
  }
  .checkout-product {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .checkout-product-copy small {
    display: none;
  }
  .payment-methods {
    grid-template-columns: 1fr;
  }
  .checkout-panel {
    --panel-pad: 16px;
  }
  .checkout-panel-heading,
  .checkout-fields,
  .checkout-requirements {
    padding-inline: 16px;
  }
  .checkout-product {
    padding-inline: 16px;
  }
  .payment-methods,
  .checkout-status,
  #checkout-action,
  .checkout-fine-print,
  .checkout-support {
    margin-inline: 16px;
  }
}

.payment-shell {
  padding-block: 48px clamp(54px, 8vw, 108px);
}
.payment-hero {
  max-width: 760px;
  margin-bottom: 32px;
}
.payment-hero h1 {
  margin: 10px 0 14px;
  font-size: clamp(36px, 4.6vw, 58px);
  font-weight: 650;
  letter-spacing: -0.07em;
  line-height: 1.02;
}
.payment-hero h1 span {
  color: var(--accent);
}
.payment-hero > p:last-of-type {
  max-width: 650px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
}
.payment-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.payment-safety,
.payment-card {
  border: 1px solid #314551;
  border-radius: var(--radius);
  background: linear-gradient(-145deg, #111b23 0%, #0d141a 100%);
  box-shadow: 0 24px 80px #00000024;
}
.payment-safety {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  max-width: 920px;
  margin-bottom: 48px;
  padding: 25px 28px;
  border-color: #3d6475;
  background: linear-gradient(-110deg, #102731, #101a21);
}
.payment-safety-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #4f8599;
  border-radius: 50%;
  color: var(--accent-bright);
  background: #153541;
}
.payment-safety-icon .icon {
  width: 17px;
  height: 17px;
}
.payment-safety .small-label,
.payment-card .small-label {
  margin: 0 0 7px;
}
.payment-safety h2,
.payment-section-heading h2,
.payment-card h2 {
  margin: 0;
  letter-spacing: -0.04em;
}
.payment-safety h2 {
  font-size: 22px;
}
.payment-safety p:last-child,
.payment-card-note {
  margin: 10px 0 0;
  color: #a8bfcb;
  font-size: 13px;
  line-height: 1.7;
}
.payment-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.payment-section-heading h2 {
  font-size: clamp(29px, 3vw, 42px);
}
.payment-copy-status {
  min-height: 1.5em;
  margin: 0;
  color: var(--accent-bright);
  font-size: 13px;
  text-align: left;
}
.payment-copy-status[data-error] {
  color: #ffada4;
}
.payment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.payment-card {
  min-width: 0;
  padding: 24px;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.payment-card:hover {
  border-color: #5e9ab1;
  box-shadow: 0 26px 86px #00000038;
  transform: translateY(-3px);
}
.payment-card-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}
.payment-card h2 {
  font-size: 23px;
}
.payment-card h2 span {
  color: var(--accent);
  font-size: 0.62em;
  letter-spacing: -0.01em;
}
.payment-network {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid #315967;
  border-radius: 999px;
  color: #a8d8e5;
  background: #112a33;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}
.payment-network .icon {
  width: 11px;
  height: 11px;
}
.payment-network-warning {
  border-color: #6c593e;
  color: #ebca9b;
  background: #291f16;
}
.payment-address {
  display: grid;
  gap: 9px;
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #2f4855;
  border-radius: 10px;
  background: #081116;
}
.payment-address > span {
  color: #a8bfcb;
  font-size: 11px;
  font-weight: 700;
}
.payment-address code {
  overflow-wrap: anywhere;
  color: #e3f5fb;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
  user-select: all;
}
.payment-copy {
  width: max-content;
  min-height: 38px;
  padding: 8px 12px;
  font-size: 12px;
}
.payment-copy .icon {
  width: 12px;
  height: 12px;
}
.payment-card-confirm {
  border-color: #655239;
}
.payment-card-card {
  max-width: 760px;
  margin-top: 18px;
}
.payment-card-card .button {
  margin-top: 20px;
}
.payment-card-gift {
  max-width: 860px;
  margin-top: 18px;
  border-color: #68513a;
  background: linear-gradient(-135deg, #211912, #111b23 72%);
}
.payment-gift-steps {
  display: grid;
  gap: 7px;
  margin: 18px 0 0;
  padding-right: 20px;
  color: #c5b49c;
  font-size: 13px;
  line-height: 1.65;
}
.payment-gift-steps a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.payment-card-gift .button {
  margin-top: 20px;
}
.payment-other-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
  margin-top: 16px;
}
.payment-other-grid .payment-card {
  max-width: none;
  margin-top: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .payment-hero,
  .payment-safety,
  .payment-card {
    animation: hero-rise 0.55s var(--ease) both;
  }
  .payment-safety {
    animation-delay: 0.07s;
  }
  .payment-card:nth-child(2) { animation-delay: 0.04s; }
  .payment-card:nth-child(3) { animation-delay: 0.08s; }
  .payment-card:nth-child(4) { animation-delay: 0.12s; }
  .payment-card:nth-child(5) { animation-delay: 0.16s; }
  .payment-card:nth-child(6) { animation-delay: 0.2s; }
}
@media (max-width: 720px) {
  .payment-shell { padding-block: 32px 64px; }
  .payment-grid, .payment-other-grid { grid-template-columns: 1fr; }
  .payment-section-heading { align-items: start; flex-direction: column; }
  .payment-copy-status { text-align: right; }
}
@media (max-width: 480px) {
  .payment-hero h1 { font-size: clamp(34px, 10vw, 48px); }
  .payment-safety { gap: 14px; padding: 20px; }
  .payment-card { padding: 20px; }
  .payment-card-top { align-items: stretch; flex-direction: column; }
  .payment-network { width: max-content; text-align: right; }
}

.catalog-categories { display:flex; flex-wrap:wrap; gap:12px; margin:0 0 28px; }
.catalog-categories a { padding:12px 18px; border:1px solid var(--line); border-radius:100px; color:var(--accent); }
.catalog-categories a:hover { background:#17303c; }
.catalog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.catalog-card { --card-accent:#76d8f4; --card-accent-dim:#1a4252; --card-glow:#76d8f424; position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; min-width:0; gap:16px; padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(-145deg,#11232d,#0c141b); transition:transform .2s var(--ease),border-color .2s,box-shadow .2s; }
.catalog-card::before { content:""; position:absolute; z-index:2; top:0; right:22px; left:22px; height:2px; background:linear-gradient(-90deg,transparent,var(--card-accent),transparent); opacity:.62; pointer-events:none; transition:opacity .2s; }
.catalog-card::after { content:""; position:absolute; z-index:0; top:-56px; left:-28px; width:150px; height:120px; background:radial-gradient(circle,var(--card-glow),transparent 68%); pointer-events:none; }
.catalog-card > * { position:relative; z-index:1; }
.catalog-card[data-catalog="networking"] { --card-accent:#67d0e8; --card-accent-dim:#163e4c; --card-glow:#67d0e828; }
.catalog-card[data-catalog="accounts"] { --card-accent:#8fd4ef; --card-accent-dim:#1a3e4e; --card-glow:#8fd4ef22; }
.catalog-card[data-catalog="support"] { --card-accent:#b3ecff; --card-accent-dim:#1c4658; --card-glow:#b3ecff24; }
.catalog-card[data-tier="1"] { --card-accent:#5eafc8; --card-accent-dim:#163848; --card-glow:#5eafc81c; }
.catalog-card[data-tier="2"] { --card-accent:#6ec8e2; --card-accent-dim:#184252; --card-glow:#6ec8e226; }
.catalog-card[data-tier="3"] { --card-accent:#76d8f4; --card-accent-dim:#1a4556; --card-glow:#76d8f42c; }
.catalog-card[data-tier="4"] { --card-accent:#93e4fb; --card-accent-dim:#1c4e60; --card-glow:#93e4fb36; }
.catalog-card[data-tier="5"] { --card-accent:#b3ecff; --card-accent-dim:#21566c; --card-glow:#b3ecff42; }
.catalog-card:hover,.catalog-card:focus-within { transform:translateY(-4px); border-color:var(--card-accent); box-shadow:0 16px 34px #04080c80,0 0 22px var(--card-glow); }
.catalog-card:hover::before,.catalog-card:focus-within::before { opacity:1; }
.catalog-head { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; }
.catalog-mark { width:56px; height:56px; display:grid; place-items:center; flex:none; border-radius:14px; color:var(--card-accent); background:radial-gradient(circle at 32% 28%,#ffffff1f,transparent 46%),linear-gradient(-165deg,var(--card-accent-dim),#0e1c24 78%); border:1px solid #34586a; box-shadow:inset 0 1px 0 #ffffff16,0 10px 18px #04080c38; }
.catalog-mark .icon { width:24px; height:24px; }
.catalog-meter { display:flex; align-items:flex-end; gap:4px; height:18px; }
.catalog-meter span { display:block; width:4px; border-radius:2px; background:#243844; }
.catalog-meter span:nth-child(1) { height:6px; }
.catalog-meter span:nth-child(2) { height:9px; }
.catalog-meter span:nth-child(3) { height:12px; }
.catalog-meter span:nth-child(4) { height:15px; }
.catalog-meter span:nth-child(5) { height:18px; }
.catalog-card[data-tier="1"] .catalog-meter span:nth-child(-n+1),
.catalog-card[data-tier="2"] .catalog-meter span:nth-child(-n+2),
.catalog-card[data-tier="3"] .catalog-meter span:nth-child(-n+3),
.catalog-card[data-tier="4"] .catalog-meter span:nth-child(-n+4),
.catalog-card[data-tier="5"] .catalog-meter span:nth-child(-n+5) { background:var(--card-accent); box-shadow:0 0 8px var(--card-glow); }
.catalog-card[data-line="option"] .catalog-meter { align-items:center; }
.catalog-card[data-line="option"] .catalog-meter span { width:6px; height:6px; border-radius:50%; }
.catalog-card h3 { font-size:23px; letter-spacing:-.035em; }
.catalog-card > p:not(.small-label),.accounts-inquiry > p { color:var(--muted); line-height:1.75; }
.catalog-price { margin-top:auto; color:var(--accent); font-size:20px; }
.catalog-card .text-link { font-size:14px; }
.accounts-card { display:grid; grid-template-columns:1fr 1fr; gap:40px; padding:40px; border:1px solid #356078; border-radius:var(--radius); background:linear-gradient(-120deg,#193747,#101a24 70%); }
.accounts-card h3 { font-size:26px; margin:12px 0 22px; }
.accounts-inquiry .button { margin:22px 0 12px; }
.account-panel { padding:24px; margin:20px 0; border:1px solid var(--line); border-radius:var(--radius); background:#101e27; }
.account-panel p { color:var(--muted); line-height:1.7; margin:10px 0 18px; }
.account-panel h2 { margin:6px 0 0; font-size:clamp(22px, 2.4vw, 28px); letter-spacing:-0.03em; line-height:1.2; }
.account-shell.section-space { padding-block:48px 72px; }
.account-shell > h1 { margin:10px 0 4px; font-size:clamp(34px, 4vw, 48px); letter-spacing:-0.05em; }
.account-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.account-actions [hidden] { display:none; }
.account-email-form { display:grid; gap:12px; max-width:520px; margin-top:20px; }
.account-email-form[hidden] { display:none; }
.account-email-form label { display:grid; gap:6px; color:var(--text); font-size:13px; font-weight:700; }
.account-email-form input { width:100%; min-height:42px; padding:9px 12px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:#0b151d; }
.account-email-form p { margin:0; font-size:12px; }
.account-reset-link { padding:0; border:0; background:none; color:var(--accent); font:inherit; font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.account-reset-link:hover { color:var(--accent-bright); }
.account-reset-link:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.order-list { display:grid; gap:16px; }
.order-card { border:1px solid var(--line); padding:24px; border-radius:var(--radius); overflow-wrap:anywhere; }
.order-card h2 { font-size:22px; margin:12px 0; }
.order-card p { color:var(--muted); line-height:1.8; }
.owner-orders { padding:16px 18px; margin:12px 0; border:1px solid #f5c46b55; border-radius:12px; background:#16140d; }
.owner-orders[hidden] { display:none; }
.owner-orders > h2 { margin:2px 0 0; font-size:20px; letter-spacing:-0.02em; }
.owner-orders > p { color:var(--muted); font-size:14px; line-height:1.5; margin:4px 0 12px; }
.owner-orders .small-label { font-size:11px; }
.owner-orders .order-list { gap:8px; }
.owner-orders .order-card { padding:12px 14px; border-radius:10px; }
.owner-orders .order-card h2 { font-size:16px; margin:6px 0; }
.owner-orders .order-card p { font-size:13px; line-height:1.5; margin:4px 0; }
.owner-orders .order-card .button { min-height:36px; padding:6px 12px; font-size:13px; }
.owner-orders .small-label { color:#f5c46b; }
.owner-order { background:#0b151d; }
.owner-key-form { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:12px; margin-top:8px; }
.owner-key-form label { display:grid; gap:6px; color:var(--text); font-size:13px; font-weight:700; }
.owner-key-form input { width:100%; min-height:44px; padding:9px 12px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:#080c10; font-family:ui-monospace, SFMono-Regular, Consolas, monospace; }
.owner-key-form input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.owner-key-form .account-status { grid-column:1 / -1; margin:0; }
.owner-key-form .account-status:empty { display:none; }
.owner-key-form--multi { grid-template-columns:1fr; max-width:560px; }
.owner-key-form--multi .button { justify-self:start; }
.owner-order-tools { display:flex; flex-wrap:wrap; align-items:end; gap:10px; margin:0 0 12px; }
.owner-order-views { display:inline-flex; padding:3px; border:1px solid var(--line); border-radius:10px; background:#080c10; }
.owner-view { padding:8px 14px; border:0; border-radius:8px; color:var(--muted); background:transparent; font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.owner-view[aria-pressed=true] { color:#06121a; background:var(--accent); }
.owner-view:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.owner-order-search { display:grid; gap:6px; flex:1 1 260px; color:var(--text); font-size:13px; font-weight:700; }
.owner-order-search input { width:100%; min-height:44px; padding:9px 12px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:#080c10; }
.owner-order-search input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.owner-stock-form { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:12px; margin-bottom:12px; }
.owner-stock-form .stock-pick,.owner-stock-form .stock-paste { display:grid; gap:6px; align-content:start; min-width:0; }
.owner-stock-form input[type=search] { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:#080c10; font:inherit; font-size:16px; }
.owner-stock-form input[type=search]:focus-visible { outline:0; border-color:#2dd4bf; box-shadow:0 0 0 3px #2dd4bf2e; }
.stock-matches { max-height:212px; margin:0; padding:4px; overflow-y:auto; list-style:none; border:1px solid var(--line); border-radius:8px; background:#080c10; scrollbar-width:thin; scrollbar-color:#2c4150 transparent; }
.stock-match { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 8px; border-radius:6px; font-size:13px; cursor:pointer; }
.stock-match span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stock-match b { flex:none; color:#6ee8d1; font-size:12px; }
.stock-match b.is-empty { color:#94a3b8; font-weight:600; }
.stock-match:hover { background:#13293a; }
.stock-match.is-picked { color:#06121a; background:var(--accent); }
.stock-match.is-picked b { color:#06121a; }
.stock-match--none { color:var(--muted); cursor:default; }
.stock-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.stock-actions .account-status { margin:0; font-size:13px; }
.owner-stock-form label { color:var(--text); font-size:13px; font-weight:700; }
.owner-stock-form select,.owner-stock-form textarea { width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:#080c10; }
.owner-stock-form textarea { min-height:164px; max-height:320px; overflow-y:auto; resize:none; field-sizing:content; font-family:ui-monospace, SFMono-Regular, Consolas, monospace; font-size:14px; }
.owner-stock-form select:focus-visible,.owner-stock-form textarea:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.owner-stock-form .button { justify-self:start; min-height:40px; padding:8px 16px; }
.owner-stock-form .account-status:empty { display:none; }
.stock-list { display:grid; gap:6px; color:var(--muted); font-size:14px; }
.stock-row { border:1px solid var(--line); border-radius:8px; background:#0b151d; }
.stock-row > summary { display:flex; align-items:center; gap:10px; padding:6px 12px; cursor:pointer; list-style:none; }
.stock-row-name { flex:1; min-width:0; color:var(--text); font-size:14px; font-weight:650; }
.stock-row > summary small { flex:none; color:#94a3b8; font-size:12px; }
.stock-row > summary .order-status { flex:none; }
.stock-row .stock-keys { margin:0; padding:0 12px 10px; }
.stock-keys-empty { color:var(--muted); font-size:13px; }
.stock-keys { display:grid; gap:4px; margin:10px 0 0; padding:0; list-style:none; }
.stock-keys li { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 10px 2px 4px; font-size:13px; border:1px solid var(--line); border-radius:8px; background:#080c10; }
.stock-keys code { overflow-wrap:anywhere; }
.stock-keys button { flex:none; min-height:28px; padding:2px 10px; border:1px solid var(--line); border-radius:6px; color:var(--muted); background:transparent; font:inherit; font-size:13px; cursor:pointer; }
.stock-keys button:hover,.stock-keys button:focus-visible { color:#ff8a8a; border-color:#ff8a8a88; }
.owner-stock-use { margin-top:8px; }
@media(max-width:600px) { .owner-orders { padding:14px; } .owner-key-form { grid-template-columns:1fr; } }
.account-status { color:var(--accent); margin:14px 0; }
@media(max-width:1000px) { .catalog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .catalog-grid,.accounts-card { grid-template-columns:1fr; } .catalog-card,.accounts-card { padding:24px; } .catalog-categories a { font-size:13px; } .catalog-mark { width:48px; height:48px; border-radius:12px; } .catalog-mark .icon { width:22px; height:22px; } .catalog-head { min-height:48px; } }
@media(prefers-reduced-motion:reduce) { .catalog-card,.catalog-card::before { transition:none; } .catalog-card:hover,.catalog-card:focus-within { transform:none; } }

.hardware-jump { display:flex; flex-wrap:wrap; gap:12px; margin:0 0 36px; }
.hardware-jump a { padding:12px 18px; border:1px solid var(--line); border-radius:100px; color:var(--accent); }
.hardware-jump a:hover { background:#17303c; }
.hardware-group { margin-bottom:48px; }
.hardware-group-title { font-size:clamp(26px, 3vw, 34px); margin:0 0 18px; }
.hardware-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; }
.hardware-grid-bundles { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.hardware-grid-bundles .hardware-card { border-color:#356078; background:linear-gradient(-120deg, #193747, #101a24 68%); }
.hardware-card, .hardware-feature { min-width:0; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(-180deg, #121c24, #0c141b); }
.hardware-card { display:flex; flex-direction:column; overflow:hidden; transition:transform .2s var(--ease), border-color .2s; }
.hardware-card:hover { transform:translateY(-4px); border-color:var(--accent); }
.hardware-photo { aspect-ratio:1; background:#080c10; }
.hardware-photo img { display:block; width:100%; height:100%; object-fit:contain; }
.hardware-photo--studio { position:relative; display:grid; grid-template: minmax(0,1fr) / minmax(0,1fr); place-items:center; isolation:isolate; overflow:hidden; background:radial-gradient(ellipse at 50% 42%, #1d3540 0%, #101c25 48%, #0a1117 80%); }
.hardware-photo--studio::before { content:""; position:absolute; inset:75% 18% 8%; z-index:-1; background:radial-gradient(ellipse, #0009, transparent 68%); }
.hardware-photo--studio .hardware-product-image { min-width:0; min-height:0; width:82%; height:82%; filter:drop-shadow(0 12px 10px #0005); }
.hardware-photo-model { position:absolute; top:20px; right:20px; max-width:calc(100% - 40px); color:#ccecf5; font-size:12px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.hardware-photo--studio .hardware-photo-brand { position:absolute; left:18px; bottom:18px; width:28px; height:28px; object-fit:contain; border-radius:50%; opacity:.8; }
.hardware-photo-caption { position:absolute; right:20px; bottom:20px; color:var(--muted); font-size:11px; letter-spacing:.02em; }
.hardware-body, .hardware-feature-copy { display:flex; flex-direction:column; gap:10px; padding:18px 18px 20px; }
.hardware-card h4, .hardware-feature h4 { margin:0; color:var(--text); font-size:18px; font-weight:650; letter-spacing:-.03em; line-height:1.25; text-wrap:balance; }
.hardware-body > p, .hardware-feature-copy > p { color:var(--muted); font-size:14px; line-height:1.55; }
.hardware-details { border:1px solid var(--line); border-radius:10px; background:#0a1117; font-size:13px; }
.hardware-details summary { cursor:pointer; padding:10px 12px; color:var(--text); font-weight:650; list-style-position:inside; }
.hardware-details summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:10px; }
.hardware-details[open] summary { border-bottom:1px solid var(--line); }
.hardware-detail-section { padding:10px 12px 4px; }
.hardware-detail-section h5 { margin:0 0 6px; color:var(--text); font-size:13px; font-weight:700; letter-spacing:-.01em; }
.hardware-detail-section ul { margin:0; padding-right:18px; color:var(--muted); line-height:1.5; }
.hardware-detail-section li + li { margin-top:4px; }
.hardware-price { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 12px; margin-top:auto; }
.hardware-price strong { color:var(--text); font-size:22px; font-weight:650; letter-spacing:-.03em; }
.hardware-was s { color:#8197a8; font-size:15px; }
.hardware-save { color:var(--accent); font-size:13px; font-weight:750; }
.hardware-cta { margin-top:6px; min-height:44px; padding:10px 14px; }
.hardware-feature { display:grid; grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr); gap:8px 28px; align-items:center; padding:18px; border-color:#356078; background:linear-gradient(-120deg, #193747, #101a24 68%); }
.hardware-feature .hardware-photo { border-radius:12px; overflow:hidden; aspect-ratio:4/3; }
.hardware-feature-copy { padding:12px 0 12px 18px; }
.hardware-feature h4 { font-size:clamp(28px, 3vw, 40px); letter-spacing:-.04em; }
.hardware-feature .hardware-price strong { font-size:32px; }
.hardware-feature .button { margin-top:8px; align-self:flex-start; }
.hardware-footnote { margin-top:8px; }
@media(max-width:1100px) { .hardware-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media(max-width:800px) {
  .hardware-feature { grid-template-columns:1fr; padding:14px; }
  .hardware-feature-copy { padding:8px 6px 10px; }
}
@media(max-width:600px) {
  .hardware-grid, .hardware-grid-bundles { grid-template-columns:1fr; }
  .hardware-jump a { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) { .hardware-card { transition:none; } .hardware-card:hover { transform:none; } }
.fortnite-card-logo { display:block; width:200px; max-width:100%; height:auto; object-fit:contain; margin-bottom:24px; filter:brightness(0) invert(1); }

/* Game license cards (PureDMA reseller catalog). */
.license-search { margin:0 0 24px; max-width:760px; }
.license-search label { display:block; margin-bottom:8px; color:var(--text); font-size:14px; font-weight:700; }
.license-search-input { display:flex; gap:8px; }
.license-search input { flex:1; min-width:0; padding:14px 16px; border:1px solid #356078; border-radius:12px; color:var(--text); background:#0c151d; font:inherit; }
.license-search button { padding:10px 16px; border:1px solid var(--line); border-radius:12px; color:var(--text); background:#101e27; cursor:pointer; }
.license-search p { margin:8px 0 0; color:var(--muted); font-size:13px; }
.license-supplier-label { display:block; margin-bottom:6px; color:var(--accent); font-size:11px; }
.rie-banner { display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0; background:#0b141c; }
.rie-banner>img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; }
.rie-banner-caption { padding:16px 20px; color:var(--muted); font-size:13px; line-height:1.6; border-bottom:1px solid var(--line); }
.rie-plan-price { font-size:26px; color:var(--accent); }
.rie-coverage>h3 { margin:0 0 10px; font-size:24px; }
.rie-coverage>p { color:var(--muted); line-height:1.7; }
.rie-game-label { display:block; margin:22px 0 8px; font-weight:700; }
.rie-coverage select { display:block; width:100%; padding:12px; border:1px solid #356078; border-radius:10px; color:var(--text); background:#0b1821; font:inherit; }
.rie-all-games { margin:16px 0 24px; }
.rie-all-games summary { padding:12px 0; cursor:pointer; color:var(--accent); }
.rie-game-list { display:flex; flex-wrap:wrap; gap:8px; }
.rie-game-list button { padding:8px 12px; border:1px solid var(--line); border-radius:100px; color:var(--text); background:#0c151d; cursor:pointer; }
.rie-game-list button[aria-pressed=true] { border-color:var(--accent); color:var(--accent); background:#17313b; }
.rie-game-heading { margin:14px 0 8px; font-size:22px; }
.rie-game-source { margin-bottom:20px; color:var(--muted); font-size:12px; line-height:1.6; }
.rie-feature-host>.license-features { padding:0; border:0; background:transparent; }
@media(max-width:600px) { .rie-banner-caption { padding:12px 14px; } .license-search-input { gap:6px; } .license-search button { padding-inline:12px; } }
.game-license-page.section-space { padding-block:48px 72px; }
.game-license-top { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:12px 32px; margin-bottom:24px; }
.game-license-heading { max-width:720px; margin-bottom:0; }
.game-license-heading h1 { max-width:none; margin:10px 0 10px; font-size:clamp(34px, 4vw, 52px); font-weight:650; line-height:1.05; letter-spacing:-0.055em; }
.game-license-heading > p:last-child { margin-bottom:0; }
.license-grid { display:block; }
.license-store-loading,.license-store-menu { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:20px; padding:2px 2px 14px; }
/* While the store loads, keep the space the catalog will need, so nothing below it jumps when it arrives (2026-10-30). */
[data-game-license-catalog]:has(> .license-store-loading) { min-height:max(900px,100vh); }
.license-grid { scroll-margin-top:90px; }
.license-back { margin-bottom:20px; }
.license-store-menu[hidden] { display:none; }
.license-store-skeleton { display:block; min-height:188px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(-105deg,#101c25 35%,#183241 50%,#101c25 65%); background-size:220% 100%; }
.license-store-item { appearance:none; min-width:0; padding:0; overflow:hidden; scroll-snap-align:start; color:var(--text); text-align:right; border:1px solid var(--line); border-radius:var(--radius); background:#0c151d; cursor:pointer; transition:transform .18s var(--ease),border-color .18s,background-color .18s; }
.license-store-item > img { display:block; width:100%; aspect-ratio:16/9; object-fit:contain; border-bottom:1px solid var(--line); }
.license-store-item-copy { display:grid; gap:8px; padding:14px; }
.license-store-item-copy > strong { font-size:16px; line-height:1.2; }
.license-store-item-meta { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:11px; }
.license-menu-status { color:#a9e8bd; font-weight:750; }
.license-menu-status--updating { color:#ffe29c; }
.license-menu-status--unavailable { color:#ffb4af; }
.license-menu-price { text-align:left; }
.license-store-item:hover { transform:translateY(-2px); border-color:#4d7c91; }
.license-store-item[aria-selected="true"] { border-color:var(--accent); background:#122530; box-shadow:inset 0 0 0 1px #76d8f455; }
.license-store-item:active { transform:translateY(1px); }
.license-store-item:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.license-panel-host { margin-top:20px; }
.license-product-panel { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr); align-items:stretch; overflow:hidden; border:1px solid #356078; border-radius:var(--radius); background:linear-gradient(-120deg,#193747,#101a24 70%); }
.license-card-details { display:flex; flex-direction:column; align-items:stretch; padding:30px; }
.license-product-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.license-product-heading h2 { margin:0; font-size:clamp(26px,3vw,38px); letter-spacing:-.04em; }
.license-product-intro { margin:12px 0 22px; color:var(--muted); font-size:14px; line-height:1.6; }
.license-media { min-width:0; margin:0; padding:14px; border-left:1px solid var(--line); background:#0b141c; }
.license-media-stage { position:relative; overflow:hidden; aspect-ratio:16/9; border-radius:calc(var(--radius) - 6px); background:#101a24; touch-action:pan-y; -webkit-user-select:none; user-select:none; }
.license-media-stage img { display:block; width:100%; height:100%; object-fit:contain; }
.license-media-brand { position:absolute; top:10px; right:10px; display:flex; align-items:center; gap:8px; padding:7px 10px; border:1px solid #76d8f477; border-radius:8px; color:#eaf9ff; background:#07121de6; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; box-shadow:0 8px 18px #02070b66; }
.license-media-brand[hidden] { display:none; }
.license-media-brand img { width:22px; height:22px; object-fit:contain; }
.license-media-thumbnails { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(88px,1fr); gap:8px; margin-top:10px; position:relative; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:thin; scrollbar-color:#3d7189 #0b141c; }
.license-media-choice { min-width:88px; padding:0; overflow:hidden; border:1px solid #2b4858; border-radius:10px; background:#101a24; cursor:pointer; opacity:.68; transition:opacity .18s ease,border-color .18s ease,transform .18s ease; }
.license-media-choice img { display:block; width:100%; aspect-ratio:16/10; object-fit:contain; }
.license-media-choice:hover,.license-media-choice[aria-pressed="true"] { opacity:1; border-color:var(--accent); }
.license-media-choice:active { transform:translateY(1px); }
.license-media-choice:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.license-plan-grid { display:grid; gap:12px; }
.license-plan { position:relative; display:grid; gap:12px; padding:14px 16px; border:1px solid #2b4858; border-radius:14px; background:linear-gradient(-180deg,#0e1c26,#0a141b); transition:border-color .2s ease,box-shadow .2s ease; }
.license-plan:hover,.license-plan:focus-within { border-color:#4d7c91; box-shadow:0 12px 30px #02070b66; }
.license-plan--out,.license-plan--unavailable,.license-plan--updating { background:#0a131a; }
.license-plan--out .license-plan-price,.license-plan--unavailable .license-plan-price,.license-plan--updating .license-plan-price { opacity:.55; }
.license-plan-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.license-plan-term { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; min-width:0; }
.license-plan-term > strong { font-size:18px; line-height:1; letter-spacing:.02em; }
.license-plan-badges { display:contents; }
.license-stock { --stock:#a9e8bd; display:inline-flex; align-items:center; gap:7px; color:var(--stock); font-size:12px; font-weight:750; }
.license-stock::before { content:""; flex:none; width:8px; height:8px; border-radius:50%; background:currentColor; box-shadow:0 0 10px currentColor; }
.license-stock--low,.license-stock--updating { --stock:#ffe29c; }
.license-stock--out,.license-stock--unavailable { --stock:#ffb4af; }
.license-in-cart { padding:3px 9px; border:1px solid #76d8f455; border-radius:100px; color:var(--accent); background:#76d8f414; font-size:11px; font-weight:800; letter-spacing:.02em; }
.license-in-cart[hidden] { display:none; }
.license-plan-price { display:grid; justify-items:end; gap:5px; text-align:left; }
.license-plan-price > strong { color:var(--accent); font-size:24px; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.license-plan-price > small { color:var(--muted); font-size:12px; }
.license-plan-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.license-buttons { display:flex; gap:8px; margin-right:auto; }
.license-qty { display:inline-flex; align-items:center; overflow:hidden; border:1px solid #2b4858; border-radius:12px; background:#08111a; }
.license-qty-step { display:grid; place-items:center; width:36px; height:40px; padding:0; border:0; color:var(--text); background:transparent; font-size:20px; line-height:1; cursor:pointer; transition:background-color .15s ease,color .15s ease; }
.license-qty-step:hover:not(:disabled) { color:var(--accent); background:#76d8f41a; }
.license-qty-step:disabled { color:#52636f; cursor:not-allowed; }
.license-qty-input { width:42px; height:40px; padding:0; border:0; border-inline:1px solid #1d3442; border-radius:0; color:var(--text); background:transparent; text-align:center; font:inherit; font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; -moz-appearance:textfield; appearance:textfield; }
.license-qty-input::-webkit-outer-spin-button,.license-qty-input::-webkit-inner-spin-button { margin:0; -webkit-appearance:none; }
.license-qty-step:focus-visible,.license-qty-input:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; }
.license-buy,.license-add,.license-sold-out { min-height:40px; padding:8px 12px; white-space:nowrap; font-size:13px; }
.license-sold-out { width:100%; opacity:.7; cursor:not-allowed; }
.license-add[data-state="added"] { color:#a9e8bd; border-color:#4f8f68; }
.license-add[data-state="full"] { color:#ffe29c; border-color:#78633a; }
@media(prefers-reduced-motion:no-preference) { .license-stock--low::before { animation:license-stock-pulse 1.6s ease-in-out infinite; } }
@keyframes license-stock-pulse { 50% { opacity:.35; } }
.license-status { flex:none; margin:2px 0 0; padding:6px 10px; border:1px solid #356078; border-radius:100px; color:#a9e8bd; background:#173528; font-size:12px; font-weight:700; }
.license-status--updating { color:#ffe29c; border-color:#78633a; background:#3b321e; }
.license-status--unavailable { color:#ffb4af; border-color:#754543; background:#3d2425; }
.license-cart-link { display:table; width:max-content; margin:0 auto 18px 0; }
.license-cart-link[hidden] { display:none; }
.license-product-panel--features { grid-template-areas:"media details" "features details"; grid-template-rows:auto 1fr; }
.license-product-panel--features .license-media { grid-area:media; }
.license-product-panel--features { overflow:clip; }
.license-product-panel--features .license-card-details { grid-area:details; align-self:start; position:sticky; top:88px; }
.license-features { grid-area:features; display:flex; flex-direction:column; gap:14px; min-width:0; padding:20px 14px 22px; border-top:1px solid var(--line); border-left:1px solid var(--line); background:#0b141c; }
.license-features-head h3 { margin:0; color:var(--text); font-size:22px; letter-spacing:-.03em; }
.license-features-head p { margin:4px 0 0; color:var(--muted); font-size:13px; line-height:1.5; }
.license-media-zoomable { cursor:zoom-in; }
.license-media-expand { position:absolute; z-index:3; top:10px; left:10px; display:grid; place-items:center; width:40px; height:40px; padding:0; border:1px solid #76d8f466; border-radius:50%; color:#eaf9ff; background:#07121de6; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-size:20px; line-height:1; cursor:pointer; transition:border-color .18s ease,transform .18s ease; }
.license-media-expand:hover { border-color:var(--accent); transform:scale(1.08); }
.license-media-expand:focus-visible,.license-viewer-button:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
html.license-viewer-open { overflow:hidden; }
.license-viewer { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; color:var(--text); background:#04080c; }
.license-viewer[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; }
.license-viewer::backdrop { background:#000000d9; }
.license-viewer-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; }
.license-viewer-count { padding:7px 14px; border:1px solid #2b4858; border-radius:100px; color:var(--text); background:#07121dd9; font-size:14px; font-weight:700; }
.license-viewer-actions { display:flex; gap:10px; }
.license-viewer-button { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid #76d8f466; border-radius:50%; color:#eaf9ff; background:#0c1a24; font-size:24px; line-height:1; cursor:pointer; transition:border-color .18s ease,background-color .18s ease; }
.license-viewer-button:hover { border-color:var(--accent); background:#12303f; }
.license-viewer-stage { position:relative; display:grid; min-height:0; padding:0 72px; }
.license-viewer-image { width:100%; height:100%; min-height:0; object-fit:contain; -webkit-user-select:none; user-select:none; touch-action:pan-y pinch-zoom; }
.license-viewer-caption { margin:0; padding:12px 18px 18px; color:var(--muted); font-size:14px; text-align:center; }
@media(max-width:800px) {
  .license-viewer-stage { padding:0 8px; }
}
.license-catalog-message { color:var(--muted); padding:24px; }
.checkout-product-group-heading { grid-column:1/-1; padding:18px var(--panel-pad, 32px) 2px; color:var(--accent); font-weight:700; }
.checkout-cart-row { grid-column:1/-1; margin:0 var(--panel-pad, 32px); padding:12px 16px; border:1px solid var(--line); border-radius:10px; }
.checkout-cart-total { grid-column:1/-1; margin:10px var(--panel-pad, 32px); text-align:left; }
.checkout-cart-edit { grid-column:1/-1; margin:0 var(--panel-pad, 32px) 18px; }
@media(prefers-reduced-motion:no-preference) { .license-store-skeleton { animation:license-store-shimmer 1.6s linear infinite; } }
@keyframes license-store-shimmer { to { background-position:320% 0; } }
@media(max-width:800px) {
  .license-product-panel { grid-template-columns:1fr; }
  .license-product-panel--features { grid-template-areas:"media" "details" "features"; grid-template-rows:none; }
  .license-product-panel--features .license-card-details { position:static; }
  .license-media { border-left:0; border-bottom:1px solid var(--line); }
  .license-features { border-left:0; }
  .license-card-details { padding:22px; }
}
@media(max-width:600px) {
  .license-store-loading,.license-store-menu { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .license-store-item-copy { padding:12px; }
  .license-store-item-meta { flex-wrap:wrap; }
  .license-store-item-copy > strong { font-size:14px; }
  .license-media { padding:10px; }
  .license-features { padding:18px 10px 20px; }
  .license-media-thumbnails { grid-auto-columns:82px; }
  .license-product-heading { align-items:center; }
  .license-plan { padding:12px; }
  .license-plan-price > strong { font-size:22px; }
  .license-buttons { flex:1 1 150px; display:grid; grid-template-columns:1fr 1fr; margin-right:0; }
  .license-buy,.license-add,.license-sold-out { padding:8px 10px; font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .license-media-choice,.license-store-item,.license-plan,.license-qty-step { transition:none; } .license-store-item:hover { transform:none; } }

/* Side arrows: game tile row and screenshot gallery */
@property --license-fade-start { syntax:"<length>"; inherits:false; initial-value:0px; }
@property --license-fade-end { syntax:"<length>"; inherits:false; initial-value:0px; }
.license-arrow { position:absolute; z-index:3; top:50%; display:grid; place-items:center; width:44px; height:44px; padding:0; color:#eaf9ff; border:1px solid #76d8f466; border-radius:50%; background:radial-gradient(circle at 30% 22%,#245168f2,#07121de6 72%); box-shadow:0 10px 26px #02070b99,inset 0 1px 0 #ffffff2e; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); cursor:pointer; transform:translateY(-50%); transition:transform .24s var(--ease),opacity .24s ease,border-color .24s ease,box-shadow .24s ease; }
.license-arrow svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .24s var(--ease); }
.license-arrow--prev { right:12px; }
.license-arrow--next { left:12px; }
.license-arrow:hover { border-color:var(--accent); transform:translateY(-50%) scale(1.09); box-shadow:0 0 0 4px #76d8f41f,0 0 24px #76d8f45c,0 10px 26px #02070b99,inset 0 1px 0 #ffffff38; }
.license-arrow--prev:hover svg { transform:translateX(2px); }
.license-arrow--next:hover svg { transform:translateX(-2px); }
.license-arrow:active { transform:translateY(-50%) scale(.95); }
.license-arrow:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.license-arrow:disabled { opacity:0; pointer-events:none; transform:translateY(-50%) scale(.8); }
.license-media-stage::before,.license-media-stage::after,.rie-game-media-stage::before,.rie-game-media-stage::after { content:""; position:absolute; top:0; bottom:0; z-index:1; width:16%; pointer-events:none; }
.license-media-stage::before,.rie-game-media-stage::before { right:0; background:linear-gradient(-90deg,#07121d73,transparent); }
.license-media-stage::after,.rie-game-media-stage::after { left:0; background:linear-gradient(-270deg,#07121d73,transparent); }
.license-media-stage .license-media-brand { z-index:2; }
.license-media-count { position:absolute; left:12px; bottom:12px; z-index:3; padding:6px 12px; border:1px solid #76d8f455; border-radius:100px; color:#eaf9ff; background:#07121dd9; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-size:12px; font-weight:800; letter-spacing:.06em; font-variant-numeric:tabular-nums; box-shadow:0 8px 18px #02070b66; }
.license-media-choice[aria-pressed="true"] { box-shadow:0 0 0 2px #76d8f433,0 8px 18px #02070b88; }
@media(max-width:600px) {
  .license-arrow { width:40px; height:40px; }
  .license-arrow--prev { right:8px; }
  .license-arrow--next { left:8px; }
  .license-media-count { left:8px; bottom:8px; padding:5px 10px; }
}
@media(prefers-reduced-motion:reduce) {
  .license-arrow,.license-arrow svg,.license-store-nav .license-store-menu { transition:none; }
  .license-arrow:hover { transform:translateY(-50%); }
  .license-arrow--prev:hover svg,.license-arrow--next:hover svg { transform:none; }
}
@media(forced-colors:active) { .license-arrow { color:ButtonText; border-color:ButtonText; background:ButtonFace; } }
/* Loading state that already shows the real pictures */
.license-store-skeleton { overflow:hidden; }
.license-store-skeleton > img { display:block; width:100%; box-sizing:content-box; aspect-ratio:460/215; object-fit:contain; border-bottom:1px solid var(--line); }
/* Width and height attributes reserve the space; the aspect ratio sets the real height. */
.license-store-item > img,.license-media-choice img { height:auto; }
.license-store-skeleton > img { height:auto; }
.license-panel-skeleton { pointer-events:none; }
.license-panel-skeleton .license-media::after { content:""; display:block; height:56px; margin-top:10px; border-radius:10px; background:linear-gradient(-105deg,#101c25 35%,#183241 50%,#101c25 65%); background-size:220% 100%; }
.license-skeleton-line { min-height:0; height:22px; margin-bottom:14px; }
.license-skeleton-title { width:55%; height:34px; }
.license-skeleton-block { height:220px; margin-bottom:0; }
@media(prefers-reduced-motion:no-preference) { .license-panel-skeleton .license-media::after { animation:license-store-shimmer 1.6s linear infinite; } }

/* Rie: each game has its own media and complete feature list. */
.rie-product-panel { grid-template-areas:"media details" "features features"; grid-template-rows:auto auto; }
.rie-product-panel .license-card-details { position:static; }
.rie-product-panel .rie-banner { align-self:start; }
.rie-product-panel .rie-coverage { border-left:0; padding:26px; gap:0; }
.rie-coverage select { max-width:540px; }
.rie-game-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.rie-game-list button { display:flex; flex-direction:column; min-width:0; padding:0; overflow:hidden; border-radius:10px; text-align:right; }
.rie-game-list button img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; }
.rie-game-list button span { padding:10px; font-size:12px; line-height:1.4; }
.rie-game-heading { font-size:28px; }
.rie-game-detail { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:30px; }
.rie-game-media { min-width:0; margin:0; }
.rie-game-media:focus { outline:none; }
.rie-game-media:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.rie-game-media-stage { position:relative; width:100%; min-width:0; max-width:100%; min-height:200px; aspect-ratio:16/9; overflow:hidden; border:1px solid #2b4858; border-radius:14px; background:#050b10; box-shadow:inset 0 0 0 1px #ffffff08; touch-action:pan-y; -webkit-user-select:none; user-select:none; }
.rie-game-media-frame { position:absolute; inset:0; z-index:0; }
.rie-game-media-open { display:block; position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; color:#effaff; background:#050b10; cursor:zoom-in; }
.rie-game-media-open>img { display:block; width:100%; height:100%; object-fit:contain; }
.rie-game-media-stage iframe,.rie-game-media-stage video { position:absolute; inset:0; width:100%; height:100%; border:0; }
.rie-demo-play { position:absolute; right:50%; top:50%; display:grid; place-items:center; width:68px; height:68px; padding-right:4px; transform:translate(50%,-50%); border:1px solid #b8f3ff; border-radius:50%; color:#06131b; background:#76d8f4ed; box-shadow:0 8px 30px #0009; font-size:26px; }
.rie-demo-label { position:absolute; right:16px; bottom:14px; z-index:2; padding:7px 12px; border-radius:8px; background:#07121de8; font-size:13px; font-weight:700; }
.rie-image-expand { position:absolute; left:12px; top:12px; z-index:2; display:grid; place-items:center; width:38px; height:38px; border:1px solid #76d8f466; border-radius:50%; background:#07121de8; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-size:22px; }
.rie-game-media-caption { margin:0; padding:12px 2px 10px; color:var(--muted); font-size:13px; line-height:1.6; }
.rie-game-media-strip { position:relative; min-width:0; }
.rie-game-media-choices { display:flex; gap:8px; overflow-x:auto; padding:4px 2px 10px; overscroll-behavior-inline:contain; scrollbar-width:thin; scrollbar-color:#3d7189 #0b141c; mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 14px),transparent); }
.rie-game-media-choice { display:flex; flex-direction:column; flex:0 0 118px; padding:0; overflow:hidden; border:1px solid #2b4858; border-radius:10px; color:var(--muted); background:#0c1923; cursor:pointer; opacity:.72; transition:opacity .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease; }
.rie-game-media-choice img { width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; }
.rie-game-media-choice span { padding:7px 8px; overflow:hidden; font-size:11px; font-weight:700; letter-spacing:.02em; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
.rie-game-media-choice:hover { opacity:1; border-color:#4d7c91; }
.rie-game-media-choice[aria-pressed=true] { opacity:1; border-color:var(--accent); color:var(--accent); background:#17313f; box-shadow:0 0 0 2px #76d8f433,0 8px 18px #02070b88; }
.rie-game-media-choice:active { transform:translateY(1px); }
.rie-game-media-choice:focus-visible,.rie-game-media-open:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
@media(prefers-reduced-motion:reduce) { .rie-game-media-choice { transition:none; } }
.rie-media-note,.rie-feature-total { margin:0 0 20px; color:var(--muted); font-size:13px; line-height:1.7; }
/* Feature lists (js/rie-game-detail.js), owner 2026-10-30: one row per feature with an icon tile, a bold title and a
   short line under it, grouped by category, sliding in as the list scrolls into view. Icons: /assets/ui/feature-icons.svg. */
.rie-game-features { --feat-accent:var(--accent); min-width:0; }
.feat-head { display:flex; align-items:center; gap:12px; margin:0 0 6px; }
.feat-head-icon { display:grid; flex:none; place-items:center; width:42px; height:42px; border:1px solid #2b5263; border-radius:12px; color:var(--feat-accent); background:linear-gradient(-150deg,#123241,#0c1a24); box-shadow:0 0 22px -6px color-mix(in srgb,var(--feat-accent) 55%,transparent); }
.feat-head-icon .feat-svg { width:19px; height:19px; }
.feat-head-text { display:grid; gap:2px; min-width:0; }
.rie-game-features .feat-head h5 { margin:0; color:var(--feat-accent); font-size:20px; line-height:1.25; }
.feat-head .rie-feature-total { margin:0; }
.feat-svg { display:block; width:16px; height:16px; fill:currentColor; transition:transform .2s ease; }
.rie-feature-group { margin:20px 0 0; padding-top:16px; border-top:1px solid #213846; }
.feat-group-title { display:flex; align-items:center; gap:9px; margin:0 0 12px; color:#c3d9e5; font-size:12.5px; line-height:1.4; letter-spacing:.08em; text-transform:uppercase; }
.feat-group-icon { display:grid; flex:none; place-items:center; width:26px; height:26px; border-radius:8px; color:var(--feat-accent); background:color-mix(in srgb,var(--feat-accent) 12%,#0b1620); }
.feat-group-icon .feat-svg { width:13px; height:13px; }
.feat-group-count { padding:1px 8px; border:1px solid #29404f; border-radius:999px; color:#9fb4c2; font-size:11px; letter-spacing:0; }
.feat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); gap:10px; margin:0; padding:0; list-style:none; }
.feat-item { display:flex; align-items:flex-start; gap:12px; min-width:0; padding:12px 14px; border:1px solid #1f3442; border-radius:12px; background:linear-gradient(-160deg,#101c26,#0c151d); transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .2s ease,background-color .2s ease,box-shadow .2s ease; }
.feat-item:hover { border-color:color-mix(in srgb,var(--feat-accent) 45%,#1f3442); box-shadow:0 10px 26px -18px color-mix(in srgb,var(--feat-accent) 70%,transparent); }
.feat-icon { display:grid; flex:none; place-items:center; width:34px; height:34px; border:1px solid #24485a; border-radius:10px; color:var(--feat-accent); background:#0f2430; transition:color .2s ease,background-color .2s ease,box-shadow .2s ease; }
/* Hover lights the tile up in the list's own colour; the icon keeps that colour (owner, 2026-10-30: "when you hover over
   one of them, the icon turns black" on the crimson Blurred lists, whose darker tile hid the old dark icon). */
.feat-item:hover .feat-icon { border-color:var(--feat-accent); color:var(--feat-accent); background:color-mix(in srgb,var(--feat-accent) 18%,#0b1620); box-shadow:0 0 18px -4px color-mix(in srgb,var(--feat-accent) 75%,transparent); }
.feat-item:hover .feat-icon .feat-svg { transform:scale(1.12); }
.feat-copy { display:grid; gap:3px; min-width:0; padding-top:1px; }
.feat-copy strong { color:#f1f8ff; font-size:14px; font-weight:700; line-height:1.35; overflow-wrap:anywhere; }
.feat-desc { color:#9fb4c2; font-size:12.5px; line-height:1.5; overflow-wrap:anywhere; }
.feat-item:not(:has(.feat-desc)) { align-items:center; }
.feat-item:not(:has(.feat-desc)) .feat-copy { padding-top:0; }
.feat-item--plain .feat-copy strong { color:#dbe9f1; font-size:13.5px; font-weight:500; line-height:1.5; }
.feat-chips { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.feat-chip { display:inline-flex; align-items:center; gap:7px; padding:7px 12px; border:1px solid #24485a; border-radius:999px; color:#dff3fb; background:#0f2430; font-size:13px; font-weight:600; line-height:1.3; transition:opacity .45s var(--ease),transform .45s var(--ease); }
.feat-chip .feat-svg { width:13px; height:13px; color:var(--feat-accent); }
/* Slide-in: only while the script runs it (feat-animate), so the list is never hidden without it. */
.feat-animate .feat-group:not(.is-in) .feat-item,.feat-animate .feat-group:not(.is-in) .feat-chip { opacity:0; transform:translateY(12px); }
.feat-animate .feat-group.is-in .feat-item,.feat-animate .feat-group.is-in .feat-chip { transition-delay:calc(var(--i,0) * 38ms),calc(var(--i,0) * 38ms),0s,0s,0s; }
@media(prefers-reduced-motion:reduce) { .feat-item,.feat-chip,.feat-icon,.feat-svg { transition:none; } .feat-item:hover .feat-icon .feat-svg { transform:none; } }
/* Product types on the store (js/product-types.js), owner 2026-10-30: "a separate section like dma products, AI products,
   software products". A switch at the top (#all, #dma, #ai, #software) and a section for each type. */
.license-type-bar { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 22px; }
.license-type-chip { display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:7px 15px 7px 9px; border:1px solid #2b4858; border-radius:999px; color:#c3d9e5; background:linear-gradient(-160deg,#122331,#0c1720); font-size:14.5px; font-weight:750; text-decoration:none; transition:border-color .18s ease,color .18s ease,background-color .18s ease,box-shadow .18s ease,transform .18s ease; }
.license-type-chip .feat-svg { width:15px; height:15px; color:var(--type-accent,var(--accent)); transition:color .18s ease; }
.license-type-chip[data-type="ai"] { --type-accent:#a78bfa; }
.license-type-chip[data-type="software"] { --type-accent:#fbbf24; }
.license-type-count { min-width:26px; padding:2px 8px; border-radius:999px; color:#f1f8ff; background:#1b2f3c; font-size:11.5px; text-align:center; }
.license-type-chip:hover { border-color:var(--type-accent,var(--accent)); color:#f1f8ff; transform:translateY(-1px); }
.license-type-chip[aria-current="true"] { border-color:var(--type-accent,var(--accent)); color:#06121a; background:var(--type-accent,var(--accent)); box-shadow:0 10px 26px -12px var(--type-accent,var(--accent)); }
.license-type-chip[aria-current="true"] .feat-svg { color:#06121a; }
.license-type-chip[aria-current="true"] .license-type-count { color:#06121a; background:#06121a26; }
.license-type-chip:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.license-type-section { margin-top:34px; }
.license-type-bar + .license-type-section { margin-top:0; }
.license-store-link { text-decoration:none; }
.license-brand-badge[data-brand="Private Solutions"] { --brand:#5eead4; }
@media(max-width:600px) {
  .license-type-bar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .license-type-chip { justify-content:center; padding:7px 10px; font-size:14px; }
}
@media(prefers-reduced-motion:reduce) { .license-type-chip { transition:none; } .license-type-chip:hover { transform:none; } }
/* PureDMA lists (js/game-licenses.js featureShowcase), owner 2026-10-30: the same icon rows and slide-in as above.
   Tabs pick a category; each section is a card with its own icon; the cards stack in two columns. */
.pure-features { --feat-accent:var(--accent); gap:16px; }
.pure-features .feat-head { margin:0; }
.pure-features .feat-head h3 { margin:0; color:#f1f8ff; font-size:22px; line-height:1.2; letter-spacing:-.03em; }
.license-feature-tabs { display:flex; flex-wrap:wrap; gap:8px; }
.license-feature-tab { display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:6px 12px 6px 8px; border:1px solid #2b4858; border-radius:100px; color:#c3d9e5; background:#101a24; font:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:border-color .18s ease,color .18s ease,background-color .18s ease,box-shadow .18s ease; }
.license-feature-tab .feat-svg { width:14px; height:14px; color:var(--accent); transition:color .18s ease; }
.license-feature-tab-count { min-width:24px; padding:2px 7px; border-radius:100px; color:var(--text); background:#1b2f3c; font-size:11px; text-align:center; }
.license-feature-tab:hover { border-color:var(--accent); color:var(--text); }
.license-feature-tab[aria-selected="true"] { border-color:var(--accent); color:#06121a; background:var(--accent); box-shadow:0 8px 22px -12px var(--accent); }
.license-feature-tab[aria-selected="true"] .feat-svg { color:#06121a; }
.license-feature-tab[aria-selected="true"] .license-feature-tab-count { color:#06121a; background:#06121a26; }
.license-feature-tab:focus-visible,.license-feature-more:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.pure-features .license-feature-panel { columns:2 260px; column-gap:12px; }
.pure-feat-card { break-inside:avoid; min-width:0; margin:0 0 12px; padding:14px 12px 12px; border:1px solid #1f3442; border-radius:14px; background:linear-gradient(-160deg,#101c26,#0b141c); }
.pure-feat-card .feat-group-title { margin:0 0 10px; padding-inline:2px; }
.pure-feat-devices { margin:0; }
.pure-feat-list { display:grid; gap:2px; margin:0; padding:0; list-style:none; }
.pure-feat-list--short { grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr)); column-gap:4px; }
.pure-feat-row.feat-item { align-items:center; gap:10px; padding:5px 8px; border-color:transparent; border-radius:9px; background:transparent; }
.pure-feat-row.feat-item:hover { border-color:#1f3442; background:#0f1d27; box-shadow:none; }
.pure-feat-row.feat-item:has(.feat-desc) { align-items:flex-start; padding-block:7px; }
.pure-feat-row .feat-copy { gap:2px; padding-top:2px; }
.pure-feat-row .feat-copy strong { font-size:13.5px; }
.pure-feat-row[hidden] { display:none; }
.pure-feat-row .feat-icon { width:26px; height:26px; border-radius:8px; }
.pure-feat-row .feat-icon .feat-svg { width:12px; height:12px; }
.pure-feat-text { min-width:0; color:#dbe9f1; font-size:13.5px; line-height:1.4; overflow-wrap:anywhere; }
.license-feature-more { margin:8px 8px 0 0; padding:2px 0; border:0; color:var(--accent); background:none; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; }
.license-feature-more:hover { text-decoration:underline; }
@media(min-width:1000px) {
  .rie-plan { grid-template-columns:minmax(0,1fr) auto; align-items:center; }
  .rie-plan .license-plan-head { display:grid; gap:3px; }
  .rie-plan .button { padding:10px 12px; font-size:12px; white-space:nowrap; }
}
@media(max-width:900px) { .rie-game-detail { grid-template-columns:1fr; gap:24px; } }
@media(max-width:800px) { .rie-product-panel { grid-template-areas:"media" "details" "features"; } }
@media(max-width:600px) {
  .rie-product-panel .rie-coverage { padding:20px 14px; }
  .rie-game-media-choice { flex-basis:96px; }
}
.spectra-product-media { padding:22px; align-self:start; }
.spectra-hold { margin:12px 0; padding:12px 16px; border:1px solid #78602f; border-radius:10px; color:#f3d28a; background:#332915; line-height:1.6; }
.spectra-plan-unavailable { color:#d9bb7c; font-size:13px; }
.spectra-bundle-saving { margin:14px 0; color:#ccecf5; font-size:14px; line-height:1.7; }
.spectra-requirements { margin:16px 0 24px; padding:16px 20px; border:1px solid #2b4858; border-radius:12px; background:#0c1923; }
.spectra-requirements h4 { margin:0 0 10px; font-size:16px; }
.spectra-requirements ul { margin:0; padding-right:18px; color:var(--muted); font-size:14px; line-height:1.8; }
.spectra-all-features { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:30px; }
.spectra-all-features>h5,.spectra-all-features>p,.spectra-all-features>.feat-head { grid-column:1/-1; }
@media(max-width:700px) { .spectra-all-features { grid-template-columns:1fr; } .spectra-product-media { padding:14px; } }

/* Sensory and CyNickal: dense feature-rich pages that still scan quickly. */
.reseller-product-panel { --reseller-accent:#76d8f4; border-color:color-mix(in srgb,var(--reseller-accent) 30%,#203b49); }
.reseller-product-panel[data-supplier="cynickal"] { --reseller-accent:#96a8ff; }
.reseller-product-panel[data-supplier="strong"] { --reseller-accent:#a78bfa; }
.reseller-product-panel[data-supplier="nextoptimizer"] { --reseller-accent:#ff6b61; }
.reseller-product-panel .eyebrow,.reseller-product-panel .rie-plan-price { color:var(--reseller-accent); }
.reseller-product-panel .rie-game-features { --feat-accent:var(--reseller-accent); }
.reseller-product-panel .license-card-details { min-width:0; border-top:3px solid var(--reseller-accent); background:linear-gradient(-150deg,color-mix(in srgb,var(--reseller-accent) 9%,#0b141c),#081118 55%); }
.reseller-product-panel h2,.reseller-product-panel .license-product-intro { overflow-wrap:anywhere; }
.reseller-product-summary { max-width:58ch; }
.reseller-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:16px 0; }
.reseller-facts span { padding:10px 8px; border:1px solid color-mix(in srgb,var(--reseller-accent) 25%,#28404e); border-radius:9px; color:#dcecf4; background:#07121a99; font-size:11px; font-weight:750; line-height:1.35; text-align:center; }
.reseller-plan-grid { gap:10px; }
.reseller-plan-grid .rie-plan { border-color:color-mix(in srgb,var(--reseller-accent) 25%,#28404e); background:linear-gradient(-100deg,color-mix(in srgb,var(--reseller-accent) 7%,#0c1923),#0c1923); }
.reseller-product-panel .button-primary { border-color:var(--reseller-accent); color:#061117; background:var(--reseller-accent); }
.reseller-product-panel .spectra-requirements { border-color:color-mix(in srgb,var(--reseller-accent) 24%,#2b4858); }
.reseller-product-panel .spectra-requirements h3 { margin:0 0 10px; font-size:16px; }
.reseller-product-media { background:radial-gradient(circle at 50% 20%,color-mix(in srgb,var(--reseller-accent) 12%,transparent),transparent 58%); }
.reseller-product-panel .rie-game-media-choice[aria-pressed=true] { border-color:var(--reseller-accent); color:var(--reseller-accent); }
@media(max-width:520px) { .reseller-facts { grid-template-columns:1fr; } .reseller-facts span { text-align:right; } }

@media(max-width:360px) { .license-store-loading,.license-store-menu { grid-template-columns:1fr; } }

/* XMA product page: reuses the checkout/payments surface system. */
.xma-shell { padding-block: 48px clamp(46px, 7vw, 96px); }
.xma-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; margin-bottom: clamp(48px, 6vw, 80px); }
.xma-hero h1 { margin: 10px 0 16px; font-size: clamp(36px, 4.6vw, 60px); font-weight: 650; letter-spacing: -0.065em; line-height: 1.04; }
.xma-hero h1 span { color: var(--accent); }
.xma-hero-copy > p:not(.eyebrow) { max-width: 560px; color: var(--muted); font-size: 16px; line-height: 1.8; }
.xma-hero-actions, .xma-order-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; }
.xma-hero-art { min-width: 0; border: 1px solid #356078; border-radius: var(--radius); overflow: hidden; background: #080c10; box-shadow: 0 24px 80px #00000040; }
.xma-hero-art img { display: block; width: 100%; height: auto; object-fit: contain; }
.xma-section { margin-bottom: clamp(56px, 8vw, 104px); }
.xma-section .section-heading { margin-bottom: 32px; }
.xma-section .section-heading h2 { font-size: clamp(30px, 3.6vw, 48px); letter-spacing: -0.05em; line-height: 1.1; margin-bottom: 14px; }
.xma-grid { display: grid; gap: 16px; }
.xma-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.xma-card { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(-145deg, #11232d, #0c141b); }
.xma-card h3 { font-size: 18px; letter-spacing: -0.03em; line-height: 1.3; }
.xma-card p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.xma-mark { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #34586a; border-radius: 12px; color: var(--accent); background: linear-gradient(-165deg, #1a4252, #0e1c24 78%); }
.xma-mark .icon { width: 20px; height: 20px; }
.xma-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0; margin: 0; }
.xma-steps li { display: flex; gap: 18px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #0e171f; }
.xma-steps h3 { font-size: 18px; letter-spacing: -0.03em; margin-bottom: 8px; }
.xma-steps p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.xma-steps .step-number { flex: none; }
.xma-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.xma-tier { --tier-lift: 0px; --tier-scale: 1; --tier-glow: transparent; position: relative; isolation: isolate; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 32px 28px 28px; border: 1px solid #314551; border-radius: var(--radius); background: linear-gradient(-145deg, #111b23, #0d141a); box-shadow: 0 24px 80px #00000024, 0 0 0 1px transparent, 0 0 32px var(--tier-glow); transform: translateY(var(--tier-lift)) scale(var(--tier-scale)); transform-origin: center top; transition: transform 0.32s var(--ease), border-color 0.32s var(--ease), box-shadow 0.32s var(--ease), background 0.32s var(--ease); }
.xma-tier::before { content: ""; position: absolute; z-index: 1; inset: 0 18px auto; height: 2px; border-radius: 999px; background: linear-gradient(-90deg, transparent, var(--accent), transparent); opacity: 0; pointer-events: none; transition: opacity 0.32s var(--ease); }
.xma-tier-choice { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.xma-tier-face { display: flex; flex-direction: column; flex: 1; gap: 14px; min-width: 0; cursor: pointer; }
.xma-tier-popular { border-color: #356078; background: linear-gradient(-140deg, #1b3545, #12202c 55%, #0e1720); }
.xma-tier:hover, .xma-tier:focus-within { --tier-lift: -6px; --tier-scale: 1.018; --tier-glow: #76d8f42e; z-index: 1; border-color: #4d8aa8; }
.xma-tier:hover::before, .xma-tier:focus-within::before { opacity: 0.9; }
.xma-tier:has(.xma-tier-choice:checked) { --tier-lift: -8px; --tier-scale: 1.028; --tier-glow: #76d8f452; z-index: 2; border-color: var(--accent); box-shadow: 0 28px 72px #00000055, 0 0 0 1px #76d8f466, 0 0 42px var(--tier-glow); }
.xma-tier:has(.xma-tier-choice:checked)::before { opacity: 1; }
.xma-tier:has(.xma-tier-face:active) { --tier-lift: -3px; --tier-scale: 1.01; }
.xma-tier:has(.xma-tier-choice:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }
.xma-tier .small-label { margin: 0; }
.xma-tier h3 { font-size: 28px; letter-spacing: -0.045em; }
.xma-tier-summary { color: var(--muted); font-size: 14px; line-height: 1.6; }
.xma-badge { position: absolute; top: 18px; left: 18px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: var(--accent); color: #08151d; font-size: 11px; font-weight: 750; }
.xma-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; line-height: 1.2; }
.xma-price strong { color: var(--accent); font-size: 54px; font-weight: 600; letter-spacing: -0.06em; }
.xma-price span { color: #b3c8d7; font-size: 16px; }
.xma-setup { padding-bottom: 18px; border-bottom: 1px solid #395363; color: #b3c8d7; font-size: 14px; }
.xma-setup strong { color: var(--text); font-size: 18px; }
.xma-tier .feature-list { margin-top: 4px; }
.xma-notes { list-style: none; display: grid; gap: 8px; padding: 14px 0 0; margin: auto 0 0; border-top: 1px solid #395363; color: #a6bac8; font-size: 13px; line-height: 1.6; }
.xma-tier-cta { position: relative; z-index: 2; margin-top: 10px; width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .xma-tier { transition: border-color 0.2s, box-shadow 0.2s; transform: none; }
  .xma-tier:hover, .xma-tier:focus-within, .xma-tier:has(.xma-tier-choice:checked), .xma-tier:has(.xma-tier-face:active) { --tier-lift: 0px; --tier-scale: 1; transform: none; }
}
.xma-order { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 36px; margin-bottom: 28px; border: 1px solid #356078; border-radius: var(--radius); background: linear-gradient(-120deg, #193747, #101a24 70%); }
.xma-order > div:first-child { max-width: 680px; }
.xma-order h2 { font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.045em; margin-bottom: 12px; }
.xma-order p { color: #b3c8d7; font-size: 15px; line-height: 1.75; }
.xma-order .small-label { margin-bottom: 12px; }
.xma-payment { margin-top: 14px; color: var(--text) !important; }
.xma-order-actions { margin-top: 0; flex: none; flex-direction: column; align-items: flex-start; }
.xma-footnote { max-width: 860px; }
@media (max-width: 1100px) {
  .xma-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xma-tiers { grid-template-columns: 1fr; max-width: 560px; }
  .xma-steps { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .xma-hero { grid-template-columns: 1fr; }
  .xma-order { flex-direction: column; align-items: flex-start; padding: 26px 22px; }
  .xma-order-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
}
@media (max-width: 600px) {
  .xma-grid-4 { grid-template-columns: 1fr; }
  .xma-hero-actions .button, .xma-order-actions .button { width: 100%; }
  .xma-tier { padding: 30px 22px 24px; }
  .xma-price strong { font-size: 46px; }
  .xma-steps li { padding: 20px; }
}

/* Home page, shared header and footer (compact redesign). Loaded last so it can refine older rules. */

/* Compact header */
.ps-header,
.ps-nav-inner {
  min-height: 68px;
}
.ps-nav-inner {
  gap: 24px;
}
.ps-emblem {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.site-nav {
  gap: 26px;
}
.nav-link {
  padding-block: 10px;
}
.nav-link[aria-current]::after {
  bottom: 3px;
}
.nav-action {
  min-height: 42px;
  padding: 9px 16px;
  margin-right: 10px;
}

/* Shared home sections */
.home-section {
  padding-block: 44px;
}
.home-heading {
  margin-bottom: 24px;
}
.home-heading h2 {
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.2;
  letter-spacing: -0.04em;
  font-weight: 650;
  margin: 0 0 6px;
}
.home-heading p {
  margin: 0;
  color: var(--muted);
}

/* Hero: short and plain, never a full screen */
.home-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: 40px;
  padding-block: 44px 28px;
}
.home-hero .eyebrow {
  margin-bottom: 16px;
}
.home-hero h1 {
  max-width: 680px;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.055em;
  font-weight: 650;
  margin: 0 0 18px;
}
.home-hero h1 span {
  color: var(--accent);
}
.home-hero-text {
  max-width: 540px;
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #b4c2cd;
}
.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.home-hero-art {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid #25313a;
  border-radius: 20px;
  background: #0b1217;
}
.home-hero-art picture {
  display: block;
}
.home-hero-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.home-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding-block: 16px;
  border-block: 1px solid var(--line);
  color: #a9bac7;
  font-size: 14px;
}
.home-trust span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.home-trust .icon {
  color: var(--accent);
  font-size: 17px;
}

/* What we offer */
.offer-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.offer-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(-145deg, #11232d, #0c141b);
  transition:
    transform 0.2s var(--ease),
    border-color 0.2s;
}
.offer-card:hover,
.offer-card:focus-within {
  transform: translateY(-3px);
  border-color: var(--accent);
}
.offer-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border-radius: 12px;
  color: var(--accent);
  background: linear-gradient(-165deg, #1a4252, #0e1c24 78%);
  border: 1px solid #34586a;
}
.offer-mark .icon {
  width: 20px;
  height: 20px;
}
.offer-card h3 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.03em;
}
.offer-card p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}
.offer-price {
  margin-top: auto;
  padding-top: 8px;
  color: var(--accent);
  font-size: 18px;
}
.offer-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 700;
}
.offer-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.offer-link:focus-visible {
  outline-offset: 2px;
}
.home-also {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.home-also a {
  color: var(--accent);
}
.home-also a:hover {
  color: var(--accent-bright);
  text-decoration: underline;
}

/* How it works */
.home-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.home-steps li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.home-step-number {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #08151d;
  font-weight: 800;
}
.home-steps h3 {
  margin: 0 0 4px;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.home-steps p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

/* Buyer messages: short strip */
.vouch-grid-compact {
  gap: 14px;
}
.vouch-grid-compact .vouch-card figure {
  gap: 14px;
  padding: 18px 20px;
  border-radius: 14px;
}
.vouch-grid-compact .vouch-card blockquote p {
  font-size: 15px;
  line-height: 1.55;
}
.vouch-grid-compact .vouch-card figcaption {
  font-size: 13px;
}

.vouch-more {
  margin-top: 14px;
}
.vouch-more summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
}
.vouch-more summary::-webkit-details-marker {
  display: none;
}
.vouch-more summary:hover {
  color: var(--accent-bright);
}
.vouch-more summary .icon {
  transition: transform 0.2s;
}
.vouch-more[open] summary .icon {
  transform: rotate(-180deg);
}
.vouch-more .vouch-grid {
  margin-top: 8px;
}

/* Customer reviews: two slow marquees of live Discord vouches */
.reviews-stat {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
}
.reviews-marquee {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.reviews-row {
  display: flex;
  width: max-content;
  animation: reviews-marquee 48s linear infinite;
}
.reviews-row.is-reverse {
  animation-duration: 62s;
  animation-direction: reverse;
}
.reviews-track {
  display: flex;
  gap: 14px;
  padding-left: 14px;
}
.review-card {
  flex: 0 0 min(320px, 78vw);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(-145deg, #11232d, #0c141b);
  color: var(--text);
}
.review-stars {
  margin: 0;
  color: var(--accent);
  letter-spacing: 0.12em;
  font-size: 14px;
  line-height: 1;
}
.review-stars-empty {
  color: #3a4c58;
}
.review-card time {
  color: var(--muted);
  font-size: 12px;
}
.review-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}
.review-reply {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  border-right: 2px solid var(--line);
  padding-right: 10px;
}
.review-buyer {
  margin: 0;
  color: #8fb3c4;
  font-size: 13px;
  font-weight: 700;
}
.review-product {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}
.review-product .icon {
  width: 14px;
  height: 14px;
}
.reviews-marquee:hover .reviews-row,
.reviews-marquee:focus-within .reviews-row {
  animation-play-state: paused;
}
@keyframes reviews-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(50%);
  }
}
@media (max-width: 767px) {
  .reviews-marquee {
    margin-inline: -20px;
    padding-inline: 0;
  }
  .review-card {
    flex-basis: min(300px, 82vw);
    padding: 16px;
  }
}

/* Quick questions */
.home-faq {
  display: grid;
  gap: 10px;
  max-width: 860px;
}
.home-faq details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.home-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 20px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
}
.home-faq summary::-webkit-details-marker {
  display: none;
}
.home-faq summary .icon {
  color: var(--accent);
  transition: transform 0.2s;
}
.home-faq details[open] summary .icon {
  transform: rotate(-180deg);
}
.home-faq details p {
  margin: 0;
  padding: 0 20px 18px;
  color: var(--muted);
  max-width: 680px;
}
.home-faq details p a {
  color: var(--accent);
  text-decoration: underline;
}

/* Final call to action */
.home-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 32px 36px;
  border: 1px solid #356078;
  border-radius: 20px;
  background: linear-gradient(-120deg, #193747, #101a24 70%);
}
.home-cta h2 {
  margin: 0 0 6px;
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -0.04em;
  line-height: 1.2;
}
.home-cta p {
  margin: 0;
  color: #b4c2cd;
}
.home-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: none;
}

/* Footer */
.ps-footer {
  margin-top: 28px;
  padding-block: 36px 20px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 28px;
}
.footer-about .ps-brand {
  color: var(--text);
}
.footer-about p {
  margin: 14px 0 0;
  line-height: 1.7;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.footer-col h2 {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
.footer-col a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
}
.footer-col a:hover {
  color: var(--accent-bright);
}

/* Products and support pages: tighter top spacing than the old long home page */
.page-products .section-space,
.page-support .section-space {
  padding-block: 56px;
}
.page-products .products-section {
  padding-top: 40px;
}
.page-support .support-section {
  padding-top: 40px;
}

@media (max-width: 1100px) {
  .offer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .home-hero {
    grid-template-columns: 1fr 0.8fr;
    gap: 28px;
  }
}
@media (max-width: 839px) {
  .site-nav {
    top: 100%;
  }
  .site-nav .nav-action {
    margin-right: 0;
  }
  .home-steps {
    grid-template-columns: 1fr;
  }
  .home-cta {
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 767px) {
  .ps-header,
  .ps-nav-inner {
    min-height: 64px;
  }
  .site-nav {
    top: 64px;
  }
  .home-section {
    padding-block: 32px;
  }
  .home-hero {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-block: 28px 20px;
  }
  .home-hero h1 {
    font-size: clamp(32px, 9vw, 42px);
  }
  .home-hero-text {
    font-size: 16px;
  }
  .home-hero-actions {
    margin-top: 20px;
  }
  .home-hero-actions .button {
    flex: 1 1 100%;
  }
  .home-hero-art {
    border-radius: 16px;
  }
  .home-trust {
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
  }
  .offer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .offer-card {
    padding: 16px;
  }
  .offer-card p {
    font-size: 14px;
  }
  .offer-price {
    font-size: 16px;
  }
  .offer-link {
    font-size: 13px;
  }
  .vouch-grid-compact .vouch-card figure {
    padding: 16px;
  }
  .home-cta {
    padding: 24px 20px;
  }
  .home-cta-actions,
  .home-cta-actions .button {
    width: 100%;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .footer-about {
    grid-column: 1 / -1;
  }
  .page-products .section-space,
  .page-support .section-space {
    padding-block: 40px;
  }
}
@media (max-width: 767px) {
  /* Compact one-column category cards: icon on the left, text on the right */
  .offer-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .offer-card {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 14px;
    row-gap: 4px;
    padding: 14px 16px;
  }
  .offer-mark {
    grid-row: 1 / span 4;
    margin: 0;
  }
  .offer-price {
    margin-top: 0;
    padding-top: 2px;
  }
  /* Buyer messages become a swipe strip instead of a tall stack */
  .vouch-grid-compact {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    margin-inline: -20px;
    padding: 0 20px 10px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
  }
  .vouch-grid-compact .vouch-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
  .vouch-more .vouch-grid-compact {
    display: grid;
    overflow: visible;
    margin-inline: 0;
    padding: 0;
    grid-template-columns: 1fr;
  }
  .home-trust {
    gap: 6px;
    padding-block: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .offer-card,
  .home-faq summary .icon {
    transition: none;
  }
  .offer-card:hover,
  .offer-card:focus-within {
    transform: none;
  }
  .reviews-marquee {
    display: grid;
    gap: 14px;
    overflow: visible;
    mask-image: none;
    margin-inline: 0;
  }
  .reviews-row {
    display: contents;
    animation: none;
    width: auto;
    transform: none;
  }
  .reviews-track {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    padding-left: 0;
  }
  .reviews-track-clone {
    display: none;
  }
  .review-card {
    flex: none;
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) and (min-width: 768px) {
  .reviews-track {
    grid-template-columns: 1fr 1fr;
  }
}

/* Hardware banner: brand PCIe card image beside the section heading (not a product photo) */
.hardware-banner,
.rdma-banner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 40px;
  margin-bottom: 40px;
}
.hardware-banner .section-heading,
.rdma-banner .section-heading {
  margin-bottom: 0;
}
.hardware-banner-art,
.rdma-banner-art {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border: 1px solid #25313a;
  border-radius: 20px;
  background: #0b1217;
}
.hardware-banner-art img,
.rdma-banner-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 839px) {
  .hardware-banner,
  .rdma-banner {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 28px;
  }
  .hardware-banner-art,
  .rdma-banner-art {
    border-radius: 16px;
  }
}
.home-refer {
  justify-content: flex-start;
  border-color: #2f6b5c;
  background: linear-gradient(-120deg, #173c38, #101a24 70%);
}
.home-refer > div:not(.home-cta-actions) {
  flex: 1;
}
.home-refer-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #1f4b43;
  color: #7ff0c4;
  font-size: 24px;
}
@media (max-width: 640px) {
  .home-refer { flex-direction: column; align-items: flex-start; }
}

/* Status page: one compact list of every product. Motion respects prefers-reduced-motion. */

.page-status {
  --status-online: #36e0c4;
  --status-updating: #f0b429;
  --status-hold: #ffb27a;
  --status-offline: #8b9aab;
}

/* Top: title on the left, one-line summary on the right */

.status-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 32px;
  padding-block: 36px 0;
}

.status-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.status-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-online);
  color: var(--status-online);
}

.status-top h1 {
  margin: 8px 0 6px;
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.05em;
}

.status-lead {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.status-summary {
  --state: var(--status-online);
  display: grid;
  gap: 2px;
  min-width: 220px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-right: 3px solid var(--state);
  border-radius: 12px;
  background: #0f171e;
}

.status-summary[data-state="updating"] { --state: var(--status-updating); }
.status-summary[data-state="offline"] { --state: var(--status-offline); }

.status-summary p {
  margin: 0;
}

.status-summary-count {
  font-size: 15px;
  font-weight: 650;
}

.status-summary-count strong {
  color: var(--state);
  font-size: 26px;
  letter-spacing: -0.03em;
}

.status-summary-count span {
  color: #6c7d8a;
  font-size: 18px;
}

.status-summary-text {
  color: var(--text);
  font-size: 13px;
}

.status-checked {
  color: var(--muted);
  font-size: 12px;
}

/* Supplier filter */

.status-board-section {
  padding-block: 22px 64px;
}

.status-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.status-filter {
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: #0f171e;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.status-filter span {
  margin-right: 4px;
  color: var(--muted);
  font-weight: 600;
}

.status-filter:hover {
  border-color: #4d7c91;
}

.status-filter[aria-pressed="true"] {
  border-color: var(--accent);
  background: #12303d;
}

.status-filter:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Groups and rows */

.status-group {
  margin-bottom: 22px;
}

.status-group[hidden] {
  display: none;
}

.status-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin-bottom: 8px;
}

.status-group-head h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.status-group-head span {
  color: var(--muted);
  font-size: 12px;
}

.status-list,
.status-board-loading {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.status-row a {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto 12px;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 8px 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  background: #0f171e;
  transition: border-color 0.15s, background-color 0.15s;
}

.status-row a:hover {
  border-color: #4d7c91;
  background: #12202a;
}

.status-row a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.status-row-art {
  overflow: hidden;
  width: 64px;
  height: 36px;
  border-radius: 6px;
  background: #16222c;
}

.status-row-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.status-row-copy {
  display: grid;
  min-width: 0;
}

.status-row-copy strong {
  overflow: hidden;
  font-size: 14px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-row-copy span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-row-go {
  color: var(--muted);
  font-size: 13px;
}

.status-row--offline .status-row-art img {
  filter: grayscale(1) brightness(0.7);
}

.status-row--skeleton {
  min-height: 56px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(-105deg, #101c25 35%, #183241 50%, #101c25 65%);
  background-size: 220% 100%;
}

.status-pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-pill--online { color: var(--status-online); }
.status-pill--updating { color: var(--status-updating); }
.status-pill--hold { color: var(--status-hold); }
.status-pill--offline { color: var(--status-offline); }

/* Rie's game-by-game list */

.status-rie {
  margin-top: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0c141a;
}

.status-rie summary {
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
}

.status-rie summary strong {
  color: var(--status-online);
}

.status-rie-games {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 8px;
  padding: 0;
  list-style: none;
}

.status-rie-games li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
}

.status-rie-games .is-working { color: #cfeee8; }
.status-rie-games .is-working .status-pill-dot { color: var(--status-online); background: var(--status-online); }
.status-rie-games .is-updating { border-color: #f0b42955; color: var(--status-updating); }
.status-rie-games em { font-style: normal; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }

.status-rie-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.status-board-error {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--muted);
}

.status-footnote {
  margin-top: 24px;
}

/* Motion */

@media (prefers-reduced-motion: no-preference) {
  .status-row--skeleton {
    animation: status-shimmer 1.4s ease-in-out infinite;
  }

  .status-live-dot,
  .status-pill--online .status-pill-dot {
    animation: status-pulse 2s ease-out infinite;
  }

  .status-row a:hover .status-row-go {
    transform: translateX(-3px);
  }

  .status-row-go {
    transition: transform 0.15s;
  }
}

@keyframes status-shimmer {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}

@keyframes status-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 60%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Small screens */

@media (max-width: 560px) {
  .status-top {
    padding-block: 24px 0;
  }

  .status-summary {
    width: 100%;
  }

  .status-row a {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .status-row-art {
    width: 52px;
    height: 30px;
  }

  .status-row-go {
    display: none;
  }
}

/* While the list loads, keep the space it will need, so the footer does not jump down when it arrives (2026-10-30). */
.status-board:has(> .status-board-loading) {
  min-height: max(560px, 75vh);
}

/* The "alive" layer: motion, light and clearer navigation. Loaded last. All looping motion sits behind
   prefers-reduced-motion: no-preference, and nothing here is needed to read or use the pages. */

html {
  scroll-padding-top: calc(var(--header-h, 68px) + 64px);
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Smooth page changes: the header stays put and the page behind it fades. The rule that switches this on sits
   inline in every page head (src/page-transition.js), because Chrome can miss it when it only lives in this file. */
@media (prefers-reduced-motion: no-preference) {
  .ps-header {
    view-transition-name: ps-header;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.22s;
  }
}

/* Progress line and back-to-top */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: 3px;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  transform-origin: 100% 50%;
  transform: scaleX(var(--p, 0));
  background: linear-gradient(-90deg, #76d8f4, #8b9cff, #36e0c4);
  box-shadow: 0 0 12px #76d8f488;
}
.to-top {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid #76d8f466;
  border-radius: 50%;
  color: #eaf9ff;
  background: #0c1a24ee;
  box-shadow: 0 10px 26px #02070b99;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.3s var(--ease),
    visibility 0s 0.3s,
    border-color 0.2s;
}
.to-top[hidden] {
  display: none;
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s;
}
.to-top:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}
.to-top:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Header links draw their underline on hover */
.nav-link:not([aria-current])::after {
  content: "";
  position: absolute;
  bottom: 7px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease);
}
.nav-link:hover::after {
  transform: scaleX(1);
}

/* Buttons: a light sweep on hover and a press */
.button {
  position: relative;
  overflow: hidden;
}
.button-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(-105deg, transparent 30%, #ffffff55 50%, transparent 70%);
  transform: translateX(120%);
  pointer-events: none;
}
.button-primary:hover::before {
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease);
}
.button:active {
  transform: translateY(0) scale(0.98);
}

/* A soft light that follows the pointer across cards */
.offer-card,
.gl-card a,
.route-card,
.home-steps li,
.hardware-card {
  position: relative;
}
.spot {
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), #76d8f426, transparent 62%);
  transition: opacity 0.25s ease;
}
:hover > .spot {
  opacity: 1;
}

/* ---------- Home: hero ---------- */
/* The glow behind the hero reaches 60px past the page margin on purpose. Clip at the screen edge so it can never
   make the page scroll sideways (clip, unlike hidden, keeps the sticky bars working). */
main {
  overflow-x: clip;
}
.home-hero {
  position: relative;
  isolation: isolate;
}
.hero-aurora {
  position: absolute;
  inset: -40px -60px -10px;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse at 62% 40%, #000 25%, transparent 76%);
  mask-image: radial-gradient(ellipse at 62% 40%, #000 25%, transparent 76%);
}
.hero-aurora i {
  position: absolute;
  width: min(46vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(72px);
  will-change: transform;
}
.hero-aurora i:nth-child(1) {
  right: 52%;
  top: -12%;
  background: #2aa9d8;
  opacity: 0.34;
}
.hero-aurora i:nth-child(2) {
  right: 22%;
  top: 28%;
  background: #5b6bff;
  opacity: 0.2;
}
.hero-aurora i:nth-child(3) {
  right: 68%;
  top: 42%;
  background: #36e0c4;
  opacity: 0.16;
}
.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 10px;
  border-radius: 50%;
  background: #4fe3a1;
  box-shadow: 0 0 0 0 #4fe3a188;
  vertical-align: 1px;
}
.hero-rotator {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.4em;
  margin: 18px 0 0;
  color: #b4c2cd;
  font-size: 17px;
}
/* All the words sit in one grid cell, so the box is as wide as the longest word and never clips anything. The
   question mark belongs to each word, so it stays right next to it. */
.rot {
  display: inline-grid;
}
.rot b {
  grid-area: 1 / 1;
  color: var(--accent);
  font-weight: 750;
  white-space: nowrap;
  opacity: 0;
}
.rot b::after {
  content: "?";
  color: #b4c2cd;
  font-weight: 400;
}
.rot b:first-child {
  opacity: 1;
}
.home-hero-art {
  box-shadow:
    0 30px 80px -34px #2aa9d880,
    0 0 0 1px #76d8f41f;
}
.home-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 60% at 50% 40%, #76d8f433, transparent 72%);
  mix-blend-mode: screen;
}
.home-hero-art img {
  transform: none;
  transition: transform 0.25s ease-out;
}
.hero-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.hero-quick a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: #cfe3ee;
  background: #0d1820b8;
  font-size: 13px;
  font-weight: 700;
  transition:
    transform 0.25s var(--ease),
    border-color 0.2s,
    background 0.2s,
    color 0.2s;
}
.hero-quick .icon {
  color: var(--accent);
  transition: transform 0.3s var(--ease);
}
.hero-quick a:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  color: #fff;
  background: #123040;
}
.hero-quick a:hover .icon {
  transform: scale(1.18) rotate(6deg);
}
.home-trust span {
  transition: color 0.2s;
}
.home-trust span:hover {
  color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-aurora i:nth-child(1) {
    animation: aurora-a 19s ease-in-out infinite alternate;
  }
  .hero-aurora i:nth-child(2) {
    animation: aurora-b 24s ease-in-out infinite alternate;
  }
  .hero-aurora i:nth-child(3) {
    animation: aurora-c 21s ease-in-out infinite alternate;
  }
  .pulse-dot {
    animation: pulse-dot 2.4s ease-out infinite;
  }
  .rot b {
    animation: rot 12.5s infinite both;
  }
  .rot b:nth-child(2) {
    animation-delay: 2.5s;
  }
  .rot b:nth-child(3) {
    animation-delay: 5s;
  }
  .rot b:nth-child(4) {
    animation-delay: 7.5s;
  }
  .rot b:nth-child(5) {
    animation-delay: 10s;
  }
  .home-hero-art {
    animation: float 7s ease-in-out infinite;
  }
  .home-hero-art::after {
    animation: glow 5.5s ease-in-out infinite;
  }
  .home-hero-copy > * {
    animation: rise 0.8s var(--ease) both;
  }
  .home-hero-copy > :nth-child(2) {
    animation-delay: 0.06s;
  }
  .home-hero-copy > :nth-child(3) {
    animation-delay: 0.12s;
  }
  .home-hero-copy > :nth-child(4) {
    animation-delay: 0.18s;
  }
  .home-hero-copy > :nth-child(5) {
    animation-delay: 0.24s;
  }
  .home-hero-copy > :nth-child(6) {
    animation-delay: 0.3s;
  }
  .home-hero.is-offscreen .hero-aurora i,
  .home-hero.is-offscreen .home-hero-art,
  .home-hero.is-offscreen .home-hero-art::after,
  .home-hero.is-offscreen .rot b,
  .home-hero.is-offscreen .pulse-dot,
  body.motion-paused * {
    animation-play-state: paused !important;
  }
}
@keyframes aurora-a {
  to {
    transform: translate3d(9%, 12%, 0) scale(1.15);
  }
}
@keyframes aurora-b {
  to {
    transform: translate3d(-12%, -10%, 0) scale(0.9);
  }
}
@keyframes aurora-c {
  to {
    transform: translate3d(14%, -8%, 0) scale(1.2);
  }
}
@keyframes pulse-dot {
  0% {
    box-shadow: 0 0 0 0 #4fe3a199;
  }
  70%,
  100% {
    box-shadow: 0 0 0 10px #4fe3a100;
  }
}
/* One word at a time: it rises in, holds, then lifts away and fades. Never two words at once, nothing cut off. */
@keyframes rot {
  0% {
    opacity: 0;
    transform: translateY(0.45em);
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  3.5%,
  15% {
    opacity: 1;
    transform: none;
    animation-timing-function: ease-in;
  }
  19%,
  100% {
    opacity: 0;
    transform: translateY(-0.45em);
  }
}
@keyframes float {
  50% {
    transform: translateY(-9px);
  }
}
@keyframes glow {
  50% {
    opacity: 0.45;
  }
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* ---------- Home: offer cards, game strip, steps, questions, final call ---------- */
.offer-grid {
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
}
.offer-card {
  overflow: hidden;
}
.offer-card > *:not(.spot) {
  position: relative;
  z-index: 1;
}
.offer-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 20px;
  left: 20px;
  height: 2px;
  background: linear-gradient(-90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.25s;
}
.offer-card:hover::before {
  opacity: 0.9;
}
.offer-card:hover {
  box-shadow:
    0 18px 38px #04080c88,
    0 0 26px #76d8f41c;
}
.offer-mark {
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s;
}
.offer-card:hover .offer-mark {
  transform: rotate(7deg) scale(1.1);
  box-shadow:
    0 0 0 6px #76d8f418,
    0 10px 24px -8px #76d8f499;
}
.offer-link .icon,
.gl-go .icon {
  transition: transform 0.3s var(--ease);
}
.offer-card:hover .offer-link .icon,
.gl-card a:hover .gl-go .icon {
  transform: translateX(-5px);
}

.gl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.gl-card a {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 10px 10px 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(-160deg, #11232d, #0c141b);
  transition:
    transform 0.25s var(--ease),
    border-color 0.2s,
    box-shadow 0.25s;
}
.gl-card a:hover,
.gl-card a:focus-visible {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow:
    0 16px 34px #04080c88,
    0 0 24px #76d8f41c;
}
.gl-card a > *:not(.spot) {
  position: relative;
  z-index: 1;
}
/* Official game covers are mostly Steam header art (460 x 215). The frame uses the same shape, so those covers
   fill it exactly. A cover of another shape is shown whole over a blurred copy of itself instead of dark bars.
   The hover zoom stays inside the rounded frame. */
.gl-art {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 460 / 215;
  border-radius: 10px;
  background: #0b141c;
}
.gl-art img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition:
    transform 0.6s var(--ease),
    filter 0.4s;
}
.gl-art .cover-fill {
  position: absolute;
  inset: 0;
  object-fit: cover;
  filter: blur(14px) brightness(0.7) saturate(1.2);
  transform: scale(1.2);
}
.gl-card a:hover .gl-art img,
.gl-card a:focus-visible .gl-art img {
  transform: scale(1.08);
  filter: saturate(1.15) brightness(1.06);
}
.gl-card a:hover .gl-art .cover-fill,
.gl-card a:focus-visible .gl-art .cover-fill {
  transform: scale(1.3);
  filter: blur(14px) brightness(0.75) saturate(1.3);
}
@media (prefers-reduced-motion: reduce) {
  .gl-card a:hover .gl-art img,
  .gl-card a:focus-visible .gl-art img {
    transform: none;
  }
  .gl-card a:hover .gl-art .cover-fill,
  .gl-card a:focus-visible .gl-art .cover-fill {
    transform: scale(1.2);
  }
}
.gl-state {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 3px 9px;
  border: 1px solid #ffffff2a;
  border-radius: 100px;
  color: #eaf9ff;
  background: #07121dd9;
  font-size: 11px;
  font-weight: 750;
}
.gl-state[hidden] {
  display: none;
}
.gl-state[data-state="ok"]::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: #4fe3a1;
  vertical-align: 1px;
}
.gl-name {
  padding-inline: 4px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.gl-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-inline: 4px;
  font-size: 13px;
}
.gl-price {
  color: var(--accent);
  font-weight: 750;
}
.gl-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #cfe3ee;
  font-weight: 700;
}
.gl-band-note {
  margin-top: 16px;
}

.home-steps {
  position: relative;
}
.home-steps li {
  transition:
    transform 0.25s var(--ease),
    border-color 0.2s;
}
.home-steps li:hover {
  transform: translateY(-3px);
  border-color: #3d7189;
}
.home-steps li > *:not(.spot) {
  position: relative;
  z-index: 1;
}
.home-step-number {
  position: relative;
  z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .home-step-number {
    animation: ring 3.2s ease-out infinite;
  }
  .home-steps li:nth-child(2) .home-step-number {
    animation-delay: 0.6s;
  }
  .home-steps li:nth-child(3) .home-step-number {
    animation-delay: 1.2s;
  }
}
@keyframes ring {
  0% {
    box-shadow: 0 0 0 0 #76d8f488;
  }
  60%,
  100% {
    box-shadow: 0 0 0 12px #76d8f400;
  }
}

.home-faq details {
  transition:
    border-color 0.2s,
    background 0.2s;
}
.home-faq details:hover,
.home-faq details[open] {
  border-color: #3d7189;
}
@supports (interpolate-size: allow-keywords) {
  .home-faq details {
    interpolate-size: allow-keywords;
  }
  .home-faq details::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
      block-size 0.3s var(--ease),
      content-visibility 0.3s allow-discrete;
  }
  .home-faq details[open]::details-content {
    block-size: auto;
  }
}

.home-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.home-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -50% auto auto -20%;
  width: 60%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, #76d8f433, transparent);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .home-cta::before {
    animation: aurora-a 14s ease-in-out infinite alternate;
  }
}

/* ---------- Products page ---------- */
.jump-bar {
  position: sticky;
  top: var(--header-h, 68px);
  z-index: 25;
  border-bottom: 1px solid var(--line);
  background: #0a1117ea;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.jump-bar-inner {
  display: flex;
  gap: 8px;
  padding-block: 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.jump-bar-inner::-webkit-scrollbar {
  display: none;
}
.jump-bar a {
  flex: none;
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 100px;
  color: #b4c2cd;
  font-size: 13px;
  font-weight: 700;
  transition:
    transform 0.2s var(--ease),
    border-color 0.2s,
    background 0.2s,
    color 0.2s;
}
.jump-bar a:hover {
  transform: translateY(-1px);
  border-color: #78bad1;
  color: #fff;
}
.jump-bar a[aria-current="true"] {
  border-color: var(--accent);
  color: #06121a;
  background: var(--accent);
}

.route-guide {
  margin: 0 0 22px;
  padding: 18px;
  border: 1px solid #2b4858;
  border-radius: var(--radius);
  background: linear-gradient(-135deg, #12303f66, #0c141b);
}
.route-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: #dcecf5;
  font-size: 15px;
  font-weight: 700;
}
.route-title .icon {
  color: var(--accent);
}
.route-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.route-card {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 12px 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0b151d;
  transition:
    transform 0.25s var(--ease),
    border-color 0.2s,
    background 0.2s;
}
.route-card:hover,
.route-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent);
  background: #102431;
}
.route-card > *:not(.spot) {
  position: relative;
  z-index: 1;
}
.route-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #34586a;
  border-radius: 10px;
  color: var(--accent);
  background: linear-gradient(-165deg, #1a4252, #0e1c24 78%);
  transition: transform 0.35s var(--ease);
}
.route-card:hover .route-mark {
  transform: rotate(8deg) scale(1.08);
}
.route-text {
  display: grid;
  min-width: 0;
  gap: 2px;
}
.route-q {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.route-text strong {
  font-size: 15px;
}
.route-go {
  margin-right: auto;
  color: var(--accent);
  transition: transform 0.3s var(--ease);
}
.route-card:hover .route-go {
  transform: translateX(-4px);
}

/* Smaller summary tiles */
.page-products .catalog-grid {
  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
  gap: 14px;
}
.page-products .catalog-card {
  gap: 8px;
  padding: 18px;
}
.page-products .catalog-head {
  min-height: 44px;
}
.page-products .catalog-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}
.page-products .catalog-mark .icon {
  width: 20px;
  height: 20px;
}
.page-products .catalog-card h3 {
  margin: 0;
  font-size: 18px;
}
.page-products .catalog-card > p:not(.small-label) {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: 13.5px;
  line-height: 1.55;
}
.page-products .catalog-price {
  font-size: 17px;
}
.catalog-card > .spot,
.hardware-card > .spot {
  z-index: 0;
}

/* Hardware: smaller pictures, denser cards */
.page-products .hardware-banner {
  grid-template-columns: 1.2fr 0.8fr;
  gap: 28px;
  margin-bottom: 26px;
}
.page-products .hardware-banner-art {
  height: 230px;
  max-height: 230px;
  aspect-ratio: auto;
}
.page-products .hardware-grid {
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 14px;
}
.page-products .hardware-grid-bundles {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.page-products .hardware-card {
  transition:
    transform 0.25s var(--ease),
    border-color 0.2s,
    box-shadow 0.25s;
}
.page-products .hardware-card:hover {
  box-shadow:
    0 16px 34px #04080c88,
    0 0 22px #76d8f41a;
}
.page-products .hardware-photo {
  aspect-ratio: 16 / 10;
}
.page-products .hardware-photo--studio .hardware-product-image {
  width: 74%;
  height: 84%;
  transition: transform 0.5s var(--ease);
}
.page-products .hardware-card:hover .hardware-product-image {
  transform: scale(1.08) translateY(-2px);
}
.page-products .hardware-photo-model {
  top: 10px;
  right: 12px;
  max-width: calc(100% - 24px);
  font-size: 10.5px;
}
.page-products .hardware-photo--studio .hardware-photo-brand {
  left: 10px;
  bottom: 10px;
  width: 22px;
  height: 22px;
}
.page-products .hardware-photo-caption {
  right: 12px;
  bottom: 10px;
  font-size: 10px;
}
.page-products .hardware-body {
  gap: 8px;
  padding: 12px 14px 14px;
}
.page-products .hardware-card h4 {
  font-size: 16px;
}
.page-products .hardware-body > p {
  font-size: 13px;
  line-height: 1.5;
}
.page-products .hardware-price strong {
  font-size: 19px;
}
.page-products .hardware-cta {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 13px;
}
.page-products .hardware-grid-bundles .hardware-card {
  display: grid;
  grid-template-columns: minmax(120px, 38%) 1fr;
}
.page-products .hardware-grid-bundles .hardware-photo {
  aspect-ratio: auto;
  min-height: 150px;
}
.page-products .hardware-group {
  margin-bottom: 34px;
}
.page-products .hardware-group-title {
  margin-bottom: 14px;
  font-size: clamp(22px, 2.4vw, 28px);
}
@media (max-width: 600px) {
  .page-products .hardware-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .page-products .hardware-grid-bundles {
    grid-template-columns: 1fr;
  }
  .page-products .hardware-body {
    padding: 10px 11px 12px;
  }
  .page-products .hardware-card h4 {
    font-size: 15px;
  }
  .page-products .hardware-body > p {
    display: none;
  }
  .page-products .hardware-banner {
    grid-template-columns: 1fr;
  }
  .page-products .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-products .catalog-card {
    padding: 14px;
  }
  .page-products .catalog-card > p:not(.small-label) {
    display: none;
  }
  .page-products .catalog-card .text-link {
    font-size: 13px;
  }
  .route-grid {
    grid-template-columns: 1fr;
  }
  .gl-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .gl-card a {
    padding: 8px 8px 12px;
  }
  .gl-name {
    font-size: 14px;
  }
  .gl-go {
    display: none;
  }
  .to-top {
    left: 12px;
    bottom: 12px;
  }
}
@media (max-width: 420px) {
  .page-products .hardware-grid-bundles .hardware-card {
    grid-template-columns: 1fr;
  }
}

/* Signed in: the header's sign-in button becomes a small profile chip with your picture and name. */
.nav-action.is-signed-in {
  gap: 9px;
  padding: 5px 5px 5px 15px;
  border: 1px solid #76d8f440;
  border-radius: 999px;
  color: #eaf9ff;
  background: #0f1d26;
  font-weight: 650;
}
.nav-action.is-signed-in:hover,
.nav-action.is-signed-in:focus-visible {
  border-color: #76d8f4aa;
  background: #13252f;
}
.nav-avatar {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  background: #1a2b36;
}
.nav-avatar-initial {
  display: grid;
  place-items: center;
  color: #06121a;
  background: var(--accent);
  font-size: 13px;
  font-weight: 800;
}
.nav-profile-name {
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Phones: the menu holds the full chip, and a small picture sits next to the Menu button. */
.nav-mini-profile {
  display: none;
}
@media (max-width: 839px) {
  .nav-mini-profile:not([hidden]) {
    display: grid;
    margin-right: auto;
    margin-left: -10px;
    border-radius: 50%;
  }
  .nav-mini-profile .nav-avatar {
    width: 40px;
    height: 40px;
    box-shadow: 0 0 0 1px #76d8f466;
  }
}

/* Profile menu that opens from your picture in the header */
.account-menu {
  position: fixed;
  z-index: 50;
  width: min(310px, calc(100vw - 24px));
  padding: 16px;
  border: 1px solid #2d4250;
  border-radius: 14px;
  color: var(--text);
  background: #0d171e;
  box-shadow: 0 24px 60px #000000b0;
}
.account-menu[hidden] {
  display: none;
}
.account-menu-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.account-menu-head .nav-avatar {
  width: 48px;
  height: 48px;
  font-size: 18px;
}
.account-menu-head strong {
  display: block;
  font-size: 16px;
  overflow-wrap: anywhere;
}
.account-menu-head span:not(.nav-avatar) {
  display: block;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.account-menu-via {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  color: #a9c0cc;
  font-size: 13px;
}
.account-menu-via .icon {
  width: 16px;
  height: 16px;
  color: #8b9cff;
}
.account-menu-stats {
  margin: 6px 0 12px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 650;
}
.account-menu-links {
  display: grid;
  gap: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.account-menu-links a {
  padding: 9px 10px;
  border-radius: 8px;
  color: #dbe8ef;
  font-size: 14px;
}
.account-menu-links a:hover,
.account-menu-links a:focus-visible {
  color: #fff;
  background: #15252f;
}
.account-menu-signout {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #ffb4b4;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}
.account-menu-signout:hover,
.account-menu-signout:focus-visible {
  border-color: #ffb4b466;
  background: #2a1517;
}
@media (prefers-reduced-motion: no-preference) {
  .account-menu:not([hidden]) {
    animation: account-menu-in 0.16s var(--ease) both;
  }
}
@keyframes account-menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* My orders: profile card, totals and clearer order cards */
.account-profile {
  margin: 20px 0 30px;
  padding: 26px;
  border: 1px solid #314551;
  border-radius: var(--radius);
  background: linear-gradient(-145deg, #111b23 0%, #0d141a 100%);
}
.account-profile[hidden],
.account-panel[hidden],
.account-orders-title[hidden] {
  display: none;
}
.account-profile-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}
.account-profile-picture .nav-avatar {
  width: 68px;
  height: 68px;
  font-size: 26px;
  box-shadow: 0 0 0 3px #76d8f433;
}
.account-profile-who h2 {
  margin: 0;
  font-size: 26px;
  overflow-wrap: anywhere;
}
.account-profile-handle {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 6px 0 0;
  color: var(--muted);
}
.account-profile-via {
  color: #8b9cff;
}
.account-profile-main .button {
  margin-right: auto;
}
.account-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0 0;
}
.account-stats div {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0c151b;
}
.account-stats dt {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.account-stats dd {
  margin: 6px 0 0;
  color: #eaf9ff;
  font-size: 22px;
  font-weight: 750;
}
.account-profile-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 18px 0 0;
}
.account-orders-title {
  margin: 30px 0 14px;
  font-size: 22px;
}
.order-list {
  display: grid;
  gap: 14px;
}
.order-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.order-card-top .small-label {
  margin: 0;
}
.order-status {
  padding: 3px 10px;
  border-radius: 999px;
  color: #b4c2cd;
  background: #ffffff12;
  font-size: 12px;
  font-weight: 700;
}
.order-status--paid {
  color: #4fe3a1;
  background: #4fe3a11c;
}
.order-status--pending,
.order-status--partially_paid {
  color: #f5c46b;
  background: #f5c46b1c;
}
.account-license-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.account-license-key code {
  padding: 6px 10px;
  border-radius: 8px;
  color: var(--accent);
  background: #080c10;
  font-size: 14px;
  letter-spacing: 0.03em;
  overflow-wrap: anywhere;
}
.account-copy {
  padding: 6px 12px;
  border: 1px solid #76d8f455;
  border-radius: 8px;
  color: #eaf9ff;
  background: #10202a;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.account-copy:hover,
.account-copy:focus-visible {
  border-color: var(--accent);
}
@media (max-width: 640px) {
  .account-profile {
    padding: 20px;
  }
  .account-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .account-profile-main .button {
    width: 100%;
    margin-right: 0;
  }
}

/* Referrals page and store credit at checkout */
.referrals-intro {
  max-width: 640px;
  color: var(--muted);
  line-height: 1.7;
}
.referrals-link {
  margin: 24px 0 0;
  padding: 20px;
  border: 1px solid #2c4452;
  border-radius: 14px;
  background: #0c151b;
}
.referrals-link h2,
.referrals-how h2 {
  margin: 0 0 12px;
  font-size: 18px;
}
.referrals-link-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.referrals-link-row code {
  flex: 1 1 260px;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--accent);
  background: #080c10;
  font-size: 14px;
  overflow-wrap: anywhere;
}
.referrals-how {
  margin: 26px 0 0;
}
.referrals-how ol {
  margin: 0;
  padding-right: 22px;
  color: var(--muted);
  line-height: 1.8;
}
.referrals-fine {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.checkout-credit {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px var(--panel-pad) 0;
  padding: 12px 16px;
  border: 1px solid #2c4452;
  border-radius: 12px;
  background: #0c151b;
  cursor: pointer;
}
.checkout-credit[hidden] {
  display: none;
}
.checkout-credit.is-applied {
  border-color: var(--accent);
}
.checkout-credit input {
  margin-top: 3px;
  accent-color: var(--accent);
}
.checkout-credit span {
  display: grid;
  gap: 2px;
  font-weight: 650;
}
.checkout-credit small {
  color: var(--muted);
  font-weight: 400;
}
/* Server Booster discount: Discord boost pink next to the site's cyan. */
.checkout-booster {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px var(--panel-pad) 0;
  padding: 10px 14px;
  border: 1px solid #4a2f52;
  border-radius: 12px;
  background: linear-gradient(-90deg, rgba(255, 115, 250, 0.09), rgba(118, 216, 244, 0.05));
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.checkout-booster[hidden] {
  display: none;
}
.checkout-booster.is-applied {
  border-color: #ff73fa;
}
.checkout-booster strong {
  color: var(--text);
  font-weight: 650;
}
.checkout-booster a {
  color: #ff9cf5;
}
.checkout-booster-icon {
  font-size: 16px;
  line-height: 1.25;
}

/* Vivid storefront: cyan / mint identity, amber highlights, authentic payment brand colors. */
:root { --accent:#49e0ff; --accent-bright:#9cf4ff; --mint:#7cf4bc; --sun:#ffd077; --line:#294454; --muted:#b2c6d4; }
html { background:#080f18; }
body { background:radial-gradient(ellipse at 8% 2%,#0f567047,transparent 36rem),radial-gradient(ellipse at 98% 22%,#17583c2b,transparent 42rem),#080f18; }
.ps-header,.checkout-header { border-bottom-color:#356073; background:#0a1522ed; }
.ps-emblem { border:1px solid #49e0ff66; box-shadow:0 0 22px #17cce41c; }
.ps-brand { color:#f3fbff; }
.button-primary { color:#03141d; background:linear-gradient(-110deg,#46dfff,#80f4c1); border-color:#9df3ed; box-shadow:0 5px 25px #1fd6dc26; font-weight:800; }
.button-primary:hover { color:#03141d; background:linear-gradient(-110deg,#91efff,#a1ffce); box-shadow:0 8px 32px #1fd6dc42; }
.button-secondary { background:#102737; border-color:#315467; }
.button-secondary:hover { background:#153547; border-color:#63daed; }
.eyebrow,.small-label { color:#82e8ff; }
.home-hero { padding-top:64px; padding-bottom:42px; }
.home-hero h1 { font-size:clamp(38px,4.6vw,66px); font-weight:750; }
.home-hero h1 span,.checkout-intro h1 span,.payment-hero h1 span { color:#7cf4d6; background:linear-gradient(-100deg,#5ee5ff,#9bf4b8); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.home-hero-art { border:1px solid #55cee88c; border-radius:24px; box-shadow:0 24px 80px #0006,0 0 65px #32b7da29; transform:rotate(-2deg); }
.home-hero-art img { filter:saturate(1.35) contrast(1.04); }
.hero-art-caption { position:absolute; inset:auto 0 0; display:grid; gap:3px; padding:28px 24px 18px; background:linear-gradient(transparent,#07121cf5); }
.hero-art-caption span { color:#7deaff; font-size:10px; font-weight:800; letter-spacing:.18em; }
.hero-art-caption strong { font-size:21px; color:#f4fbff; letter-spacing:-.03em; }
.hero-quick a { border-color:#326174; background:#102c3b; }
.hero-quick .icon { color:#70e6fa; }
.hero-quick li:nth-child(2n) .icon { color:#9af0ba; }
.home-trust { border-color:#31515d; color:#d3e3ed; background:#10232d7a; border-radius:12px; padding:16px 20px; }
.home-trust span:nth-child(2) .icon { color:#ffd077; }
.home-trust span:nth-child(3) .icon { color:#7cf4bc; }
/* A useful visual bridge between browsing and checkout, with method scope visible. */
.payment-brand-rail { display:flex; flex-wrap:wrap; align-items:center; gap:18px 30px; margin:28px 0 36px; padding:22px 26px; border:1px solid #315164; border-radius:16px; background:linear-gradient(-105deg,#122a3a,#10222c 66%,#143329); }
.payment-rail-label { color:#a9c0d0; font-size:12px; line-height:1.65; margin-left:auto; }
.payment-rail-label strong { font-size:16px; color:#effaff; }
.payment-rail-item { display:flex; align-items:center; gap:12px; color:#f1f8ff; font-weight:750; font-size:13px; }
.payment-rail-item small { display:block; margin-top:2px; color:#a5bdca; font-weight:500; font-size:11px; }
.payment-rail-more { color:#7ee8ff; font-size:12px; font-weight:750; margin-right:auto; }
.payment-logo { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:64px; height:42px; padding:8px 10px; border:1px solid #ffffff24; border-radius:9px; background:#213e53; }
.payment-logo img { display:block; width:100%; height:100%; object-fit:contain; }
.payment-logo--stripe { background:#635bff; }
.payment-logo--paypal { background:#084aba; }
.payment-logo--btc,.payment-logo--eth { background:#fff; padding:6px; width:42px; }
.payment-logo--btc img,.payment-logo--eth img { width:30px; height:30px; }
.payment-logo--wallets { width:112px; gap:9px; background:#172131; }
.payment-logo--wallets img { width:45%; }
.payment-logo--gift { color:#30210c; background:#b66c16; }
.payment-logo--voucher { background:#137b67; }
.payment-logo--wallet { background:#3c587d; }
.payment-logo--sol,.payment-logo--ltc,.payment-logo--usdt,.payment-logo--usdc { width:46px; height:46px; padding:2px; background:transparent; border:0; }
/* Category colors follow the section all the way through its icon and starting price. */
.offer-card { --category:#49e0ff; border-color:color-mix(in srgb,var(--category) 35%,#20303d); background:radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--category) 17%,transparent),transparent 70%),#0e1c29; padding:26px 22px; }
.offer-card[data-offer=firmware] { --category:#b2d5ff; }
.offer-card[data-offer=xma] { --category:#7cf4bc; }
.offer-card[data-offer=rdma] { --category:#ffd077; }
.offer-card[data-offer=licenses] { --category:#6be7ed; }
.offer-mark { width:50px; height:50px; color:var(--category); border-color:color-mix(in srgb,var(--category) 55%,transparent); background:color-mix(in srgb,var(--category) 17%,#091723); box-shadow:0 6px 24px color-mix(in srgb,var(--category) 10%,transparent); }
.offer-mark .icon { width:24px; height:24px; }
.offer-price,.offer-link { color:var(--category); }
.home-heading h2 { color:#f3faff; font-weight:750; }
.home-heading h2::before { content:""; display:inline-block; width:5px; height:.78em; margin-left:13px; border-radius:4px; background:linear-gradient(#48e1ff,#8af5ba); vertical-align:baseline; }
.home-step-number { color:#052231; background:#6ee8e7; border-color:#a3f2e0; }
.home-steps li:nth-child(2) .home-step-number { background:#ffd077; border-color:#ffe3a6; }
.home-steps li:nth-child(3) .home-step-number { background:#8cf3bc; border-color:#baffd6; }
.home-cta { background:radial-gradient(ellipse at 0 0,#28647388,transparent 65%),linear-gradient(-110deg,#102b3b,#153b32); border-color:#459b9a; }
.gl-card { border-color:#305a6a; background:#112a37; box-shadow:0 8px 26px #0003; }
.gl-name { color:#f1f9ff; font-weight:800; }
.gl-price { color:#8cf3bc; }
/* The catalog uses all the available width. Cards retain their own real artwork. */
.game-license-heading h1 { font-weight:800; color:#f4fbff; }
.license-search { padding:18px 22px; border:1px solid #31576d; border-radius:14px; background:#102637; }
.license-search input { background:#081722; border-color:#3b7187; }
.license-store-menu { gap:22px; }
.license-store-item { position:relative; display:flex; flex-direction:column; border-color:#34556a; border-radius:16px; background:linear-gradient(-155deg,#16374c,#0c1b29); box-shadow:0 10px 24px #02091266; }
.license-store-item::before { content:""; position:absolute; inset:0 0 0 auto; width:3px; background:#51deff; z-index:1; }
.license-store-item[data-provider=Spectra]::before { background:#8af0b1; }
.license-store-item[data-provider=Rie]::before { background:#ffd077; }
.license-store-item[data-provider=Limitless]::before { background:#ff3345; }
.license-store-item > img { aspect-ratio:16/9; object-fit:contain; transition:transform .25s ease; }
.license-store-item:hover { transform:translateY(-5px); border-color:#7ce4ff; box-shadow:0 16px 38px #0006; }
.license-store-item-copy { flex:1; padding:18px; gap:10px; }
.license-store-item-copy > strong { font-size:18px; }
.license-supplier-label { width:fit-content; color:#96f1cf; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
.license-store-item-meta { flex-wrap:wrap; margin-top:auto; gap:10px; align-items:center; }
.license-menu-price { color:#a5ffce; font-size:13px; font-weight:800; text-align:right; }
.license-menu-status { font-size:10px; padding:4px 7px; border:1px solid #7cf4bc3b; border-radius:6px; background:#102f2c; }
.license-menu-status--unavailable { border-color:#ffd07733; color:#ffd99b; background:#382b1a; }
.license-product-panel { border-color:#397c93; background:linear-gradient(-130deg,#153a4c,#102131 60%); }
.catalog-card { border-color:#305c70; }
.catalog-card[data-catalog=networking] { border-color:#977337; }
.catalog-card[data-catalog=xma] { border-color:#3e896c; }
/* Payment selection: recognizable logos, readable names, strong selected state. */
.checkout-panel { border-color:#315f75; box-shadow:0 16px 50px #0003; }
.checkout-panel-heading { background:linear-gradient(-110deg,#15384a,#112535); border-bottom-color:#31566b; }
.checkout-panel-heading h2 { color:#f2fbff; }
.checkout-summary { border-color:#3d8b8d; background:linear-gradient(-105deg,#173e4b,#173b32); }
.payment-method-row--more { grid-template-columns:repeat(2,minmax(0,1fr)); }
.payment-method { display:flex; flex-direction:column; align-items:flex-start; gap:12px; min-height:142px; padding:18px; border:1px solid #35576c; border-radius:13px; background:linear-gradient(-140deg,#173347,#10212f); }
.payment-method[hidden] { display:none; }
.payment-method::after { content:""; position:absolute; left:13px; top:15px; width:17px; height:17px; border:1px solid #688293; border-radius:50%; background:#08131c; }
.payment-method:has(input:checked) { border-color:#70edcd; background:linear-gradient(-140deg,#1c454e,#14392e); box-shadow:inset 0 0 0 1px #70edcd55,0 4px 22px #36e0c414; }
.payment-method:has(input:checked)::after { border:5px solid #8af6cf; background:#10332b; }
.payment-method:has(input:focus-visible) { outline:3px solid #a2f1ff; outline-offset:3px; }
.payment-method[data-payment=paypal] { background:linear-gradient(-140deg,#133761,#10233b); border-color:#346aaa; }
.payment-method[data-payment=card] { background:linear-gradient(-140deg,#2c2b64,#171f39); border-color:#6663a7; }
.payment-method[data-payment=paypal]:has(input:checked),.payment-method[data-payment=card]:has(input:checked) { border-color:#9ff7e7; box-shadow:inset 0 0 0 1px #8df3e599; }
.payment-method strong { color:#f1f8ff; font-size:14px; }
.payment-method small { color:#b4cddd; font-size:12px; line-height:1.5; }
.payment-method-row--more .payment-method { padding:16px; text-align:right; }
.checkout-group > summary { color:#bdf6ef; }
.checkout-term:has(input:checked) { border-color:#69f0ca; background:#1c4b47; }
.checkout-fields input:focus,.checkout-fields textarea:focus { border-color:#67e5ff; box-shadow:0 0 0 3px #50e0ff1c; }
.payment-card { border-color:#355f72; background:linear-gradient(-135deg,#153143,#0e202e); }
.payment-card-top { justify-content:flex-start; gap:16px; }
.payment-card-top .payment-network { margin-right:auto; }
.payment-card h2 span { color:#88e7fa; }
.payment-card-card-crypto { border-color:#6864b0; }
.ps-footer { border-top-color:#345868; }
@media(max-width:1000px) { .payment-brand-rail { gap:18px; padding:20px; } .payment-rail-label { flex-basis:100%; } .payment-rail-more { margin-right:0; } }
@media(max-width:767px) {
  .home-hero { padding-top:36px; gap:26px; }
  .home-hero-art { transform:none; }
  .payment-brand-rail { display:grid; grid-template-columns:1fr 1fr; gap:20px 12px; padding:20px 16px; }
  .payment-rail-label { grid-column:1/-1; }
  .payment-rail-label br { display:none; }
  .payment-rail-label strong { margin-right:6px; }
  .payment-rail-item { gap:9px; font-size:12px; align-items:flex-start; }
  .payment-rail-item small { font-size:10px; }
  .payment-rail-more { align-self:center; }
  .payment-rail-item .payment-logo { width:46px; height:34px; padding:7px; }
  .payment-method-row--main { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .payment-method { min-height:132px; padding:15px 12px; }
  .payment-method-row--more .payment-method small { display:block; }
  .payment-method-row--more .payment-method { text-align:right; padding:14px 12px; }
  .payment-method .payment-logo--wallets { width:94px; }
  .license-store-menu { gap:12px; }
  .license-store-item-copy { padding:13px; }
  .license-store-item-copy > strong { font-size:15px; }
  .license-menu-price { font-size:12px; }
  .license-search { padding:16px; }
  .home-trust { padding:16px; }
}
@media(max-width:380px) { .payment-brand-rail { grid-template-columns:1fr; } .payment-rail-item .payment-logo { width:48px; } .payment-method-row--main,.payment-method-row--more { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .license-store-item > img { transition:none; } .license-store-item:hover,.license-store-item:hover > img { transform:none; } }
@media(forced-colors:active) { .payment-logo { forced-color-adjust:none; } .payment-method:has(input:checked) { outline:2px solid Highlight; } }
/* Game-first browsing: a grid of games, then the products for one game. */
.license-section-title { margin:6px 0 14px; font-size:clamp(20px,2.2vw,26px); letter-spacing:-.02em; }
.license-section-title:not(:first-child) { margin-top:42px; }
.license-section-note { margin:-6px 0 18px; color:var(--muted); }
.license-game-heading { margin:18px 0 10px; font-size:clamp(28px,3.4vw,40px); letter-spacing:-.04em; }
.license-game-heading:focus { outline:none; }
.license-game-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px; }
.license-game-tile { position:relative; display:flex; flex-direction:column; overflow:hidden; color:var(--text); text-decoration:none; border:1px solid #34556a; border-radius:16px; background:linear-gradient(-155deg,#16374c,#0c1b29); box-shadow:0 10px 24px #02091266; transition:transform .2s ease,border-color .2s,box-shadow .2s; }
.license-game-tile > img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; border-bottom:1px solid #34556a; transition:transform .25s ease; }
/* Game covers sit in a frame the shape of Steam header art (460 x 215), which most official covers fill exactly.
   A cover of another shape is shown whole over a blurred copy of itself, never dark bars. Hover zooms inside the frame. */
.license-game-art { position:relative; display:block; overflow:hidden; box-sizing:content-box; aspect-ratio:460/215; border-bottom:1px solid #34556a; background:#0b141c; }
.license-game-art > img { position:relative; display:block; width:100%; height:100%; object-fit:contain; transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .4s; }
.license-game-art > .cover-fill { position:absolute; inset:0; object-fit:cover; filter:blur(14px) brightness(.7) saturate(1.2); transform:scale(1.2); }
.license-game-tile:hover .license-game-art > img,.license-game-tile:focus-visible .license-game-art > img { transform:scale(1.08); filter:saturate(1.15) brightness(1.06); }
.license-game-tile:hover .license-game-art > .cover-fill,.license-game-tile:focus-visible .license-game-art > .cover-fill { transform:scale(1.3); filter:blur(14px) brightness(.75) saturate(1.3); }
.license-game-tile:hover,.license-game-tile:focus-visible { transform:translateY(-4px); border-color:#7ce4ff; box-shadow:0 16px 38px #0006; }
.license-game-tile:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.license-game-tile-copy { display:grid; gap:8px; padding:14px 16px 16px; }
.license-game-tile-copy > strong { font-size:17px; line-height:1.2; }
.license-game-tile-meta { color:#a5ffce; font-size:13px; font-weight:750; }
.license-game-tile-suppliers { display:flex; flex-wrap:wrap; gap:6px; }
.license-supplier-chip { padding:3px 7px; border:1px solid #51deff44; border-radius:6px; color:#bfefff; background:#0f2a39; font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
@media(max-width:640px) { .license-game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .license-game-tile-copy { padding:11px 12px 13px; } .license-game-tile-copy > strong { font-size:15px; } .license-game-tile-meta { font-size:12px; } }
@media(prefers-reduced-motion:reduce) { .license-game-tile,.license-game-tile > img,.license-game-art > img { transition:none; } .license-game-tile:hover,.license-game-tile:hover .license-game-art > img { transform:none; } .license-game-tile:hover .license-game-art > .cover-fill { transform:scale(1.2); } }
.gl-suppliers { display:flex; flex-wrap:wrap; gap:6px; padding:0 16px; }

/* Slim site announcement; production text is configured in announcement-config.js. */
:root { --announcement-height:0px; }
.site-announcement { position:sticky; top:0; z-index:75; display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; min-height:44px; padding:0 max(12px,calc((100vw - 1360px)/2)); color:#e7ecff; background:linear-gradient(-100deg,#111c30,#1a2947 50%,#111c30); border-bottom:1px solid #46578166; }
.site-announcement[hidden] { display:none; }
.site-announcement a { grid-column:2; justify-self:center; display:flex; justify-content:center; align-items:center; gap:10px; min-width:0; min-height:44px; padding:8px 0; font-size:13px; font-weight:600; letter-spacing:0; line-height:1.5; text-align:center; text-decoration:none; }
.site-announcement a:hover { color:#fff; }
.site-announcement .announcement-discord { width:22px; height:18px; color:#b6bfff; }
.site-announcement .announcement-arrow { width:12px; height:12px; margin-right:2px; opacity:.6; }
.site-announcement a:hover .announcement-arrow { opacity:1; }
.site-announcement button { grid-column:3; justify-self:end; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:6px; padding:0; color:#a7b6d2; background:transparent; cursor:pointer; }
.site-announcement button .icon { width:14px; height:14px; }
.site-announcement button:hover { color:#fff; background:#ffffff0a; }
.site-announcement a:focus-visible,.site-announcement button:focus-visible { outline:2px solid #b8c5ff; outline-offset:-3px; border-radius:4px; }
/* Keep the official Discord silhouette legible wherever it is used. */
.icon--discord { width:20px; height:20px; }
.ps-header .nav-action:not(.is-signed-in) { gap:10px; color:#f5f6ff; background:#303c7b; border:1px solid #6c79bd; box-shadow:none; font-size:13px; font-weight:650; }
.ps-header .nav-action:not(.is-signed-in):hover { background:#3c4a91; border-color:#9da9ee; }
.ps-header,.checkout-header { top:var(--announcement-height); }
.scroll-progress { top:var(--announcement-height); }
html { scroll-padding-top:calc(var(--announcement-height) + 95px); }
/* Compact checkout: focused form, itemized review, no marketing blocks. */
.checkout-body:not(.payment-page) .checkout-header { position:sticky; z-index:45; }
.checkout-shell { max-width:1120px; padding-block:24px 60px; }
.checkout-intro { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:18px; }
.checkout-intro .eyebrow { margin:0 0 6px; font-size:10px; letter-spacing:.12em; }
.checkout-intro h1 { margin:0 0 5px; color:#f1f8ff; font-size:clamp(26px,3vw,34px); line-height:1.2; letter-spacing:-.045em; }
.checkout-intro p:last-child { max-width:none; margin:0; font-size:13px; line-height:1.6; color:#a2b8c8; }
.checkout-intro > a { flex:0 0 auto; font-size:12px; }
.checkout-signin { margin-bottom:18px; border:1px solid #2a4253; border-radius:10px; background:#10202c; }
.checkout-signin > summary { padding:12px 16px; font-size:12px; color:#e4f2fa; }
.checkout-signin > summary span { margin-right:6px; color:#81dae9; }
.checkout-signin .account-panel { margin:0; padding:16px; border:0; border-top:1px solid #2a4253; border-radius:0; box-shadow:none; }
.checkout-signin .account-panel h2 { font-size:18px; }
.checkout-signin .account-panel p { font-size:12px; }
.checkout-layout { display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:24px; align-items:start; }
.checkout-main-column { display:grid; gap:14px; min-width:0; }
.checkout-layout .checkout-panel { min-width:0; border:1px solid #294353; border-radius:12px; background:#101c27; box-shadow:0 10px 24px #0002; }
.checkout-picker-toggle { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px; color:#c8dae8; font-size:12px; cursor:pointer; }
.checkout-picker-toggle > span:last-child { color:#7de5f4; font-size:11px; }
.checkout-picker-content { border-top:1px solid #294353; }
.checkout-products .checkout-panel-heading { display:none; }
.checkout-products .checkout-requirements { margin:12px 16px; padding:12px; }
.checkout-product-list--focused { padding:14px 16px 16px; }
.checkout-qty { margin-top:10px; }
.checkout-qty > span { font-size:12px; }
.checkout-cart-row { margin-inline:0; }
.checkout-products .checkout-requirements h3 { font-size:14px; }
.checkout-products .checkout-requirements p { font-size:11px; }
.checkout-group > summary { padding:14px 16px; }
.checkout-family { padding:12px 16px; }
.checkout-product { padding:14px 16px; min-height:70px; }
.checkout-terms { gap:6px; }
.checkout-term { padding:10px 9px; }
.checkout-term-price { font-size:16px; }
.checkout-panel-heading { padding:17px 20px 12px; border-bottom:1px solid #243c4d; background:transparent; }
.checkout-panel-heading .small-label { display:none; }
.checkout-panel-heading h2 { margin:0; font-size:18px; line-height:1.3; letter-spacing:-.025em; }
.checkout-fields { display:grid; gap:12px; margin:0; padding:18px 20px 12px; }
.checkout-fields label { margin-bottom:5px; font-size:12px; }
.checkout-fields input { min-height:42px; padding:10px 12px; border-radius:7px; font-size:13px; }
.checkout-fields textarea { min-height:72px; padding:10px 12px; font-size:13px; border-radius:7px; }
.checkout-fields .field-help { font-size:10px; margin-top:5px; }
.checkout-optional-fields { border-top:1px solid #243c4d; }
.checkout-optional-fields > summary { padding:10px 0; color:#9bc6da; font-size:11px; }
.checkout-optional-fields > summary span { color:#7792a7; margin-right:8px; }
.checkout-optional-fields > div { margin-block:4px 12px; }
.checkout-layout .payment-methods { display:block; margin:4px 20px 14px; padding:0; }
.payment-methods legend { margin-bottom:9px; color:#edf6ff; font-size:13px; }
.payment-method-row { gap:8px; }
.payment-method-row--main,.payment-method-row--more { grid-template-columns:repeat(2,minmax(0,1fr)); }
.checkout-layout .payment-method { display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:10px; min-height:72px; padding:11px 11px 11px 26px; border:1px solid #324a5f; border-radius:8px; background:#142635; box-shadow:none; }
.checkout-layout .payment-method[hidden] { display:none; }
.checkout-layout .payment-method::after { width:13px; height:13px; top:12px; left:9px; }
.checkout-layout .payment-method:has(input:checked) { border-color:#6ee8d1; background:#183c3c; box-shadow:inset 0 0 0 1px #6ee8d140; }
.checkout-layout .payment-method:has(input:checked)::after { border-width:4px; }
.checkout-layout .payment-logo { width:42px; height:30px; padding:5px 6px; border-radius:6px; }
.checkout-layout .payment-logo img { width:100%; height:100%; }
.checkout-layout .payment-logo--btc,.checkout-layout .payment-logo--eth { width:32px; height:32px; padding:4px; }
.checkout-layout .payment-logo--wallets { width:42px; flex-direction:column; gap:1px; padding:3px; height:36px; }
.checkout-layout .payment-logo--wallets img { width:100%; height:45%; }
.checkout-layout .payment-method strong { color:#eef6fc; font-size:11px; line-height:1.4; }
.checkout-layout .payment-method small { margin-top:3px; display:block; font-size:10px; color:#9cb8cb; line-height:1.4; }
.payment-more { margin-top:10px; border-top:1px solid #2c4252; }
.payment-more > summary { padding:12px 0 8px; font-size:11px; color:#a8c9da; }
.payment-more > summary span { color:#728d9f; margin-right:6px; }
.payment-more[hidden] { display:none; }
.payment-method-more-label { display:none; }
.checkout-layout #checkout-action { margin:0 20px 12px; }
.checkout-layout .checkout-gift-card { padding:12px 14px; border-color:#2c4859; border-radius:8px; background:#102632; }
.checkout-layout .checkout-gift-card h3 { font-size:15px; margin:0 0 6px; }
.checkout-layout .checkout-gift-card .small-label { display:none; }
.checkout-layout .checkout-gift-card p,.checkout-layout .checkout-gift-card li { font-size:11px; line-height:1.65; }
.checkout-layout .checkout-gift-card .button { min-height:42px; padding:10px 12px; margin-top:10px; font-size:12px; }
.checkout-layout .checkout-status { margin:4px 20px; min-height:0; font-size:12px; }
.checkout-layout .checkout-status:empty { display:none; }
.checkout-layout .checkout-fine-print { margin:10px 20px; font-size:10px; line-height:1.65; color:#7e9aaf; }
.checkout-layout .checkout-support { margin:10px 20px 18px; font-size:11px; }
.checkout-layout .checkout-credit { margin:12px 20px; padding:12px; font-size:12px; }
/* Item rows use real catalog imagery. Totals are derived from the existing fee / credit calculation. */
.checkout-layout .checkout-review { position:sticky; top:calc(var(--announcement-height) + 92px); padding:20px; background:#101b25; }
.order-review-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px; }
.order-review-heading h2 { margin:0; color:#f5faff; font-size:20px; line-height:1.25; letter-spacing:-.03em; }
.order-review-heading > span { font-size:10px; color:#839cac; }
.order-review-items { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.order-review-item { display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:start; gap:11px; padding:0 0 17px; margin-bottom:17px; border-bottom:1px solid #2a3f4e; }
.order-review-item img { display:block; width:64px; height:50px; border-radius:6px; object-fit:contain; background:#18303f; }
.order-review-item-copy { min-width:0; }
.order-review-item-copy strong { display:block; font-size:12px; line-height:1.55; font-weight:600; color:#bdddec; overflow-wrap:anywhere; }
.order-review-item-copy small { display:block; margin-top:4px; color:#7e9dad; font-size:10px; }
.order-review-item-price { color:#e7faff; font-size:12px; font-weight:650; white-space:nowrap; }
.order-review-totals dl { display:grid; gap:12px; margin:0 0 18px; }
.order-review-totals dl > div { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.order-review-totals dl > div[hidden] { display:none; }
.order-review-totals dt { font-size:12px; color:#91aebf; }
.order-review-totals dd { margin:0; font-size:12px; font-weight:650; color:#d4e9f4; }
.order-review-total { display:flex; align-items:center; justify-content:space-between; padding-top:15px; border-top:1px solid #2a3f4e; font-size:15px; font-weight:700; color:#edf8ff; }
.order-review-total strong { color:#91f3d3; font-size:23px; letter-spacing:-.035em; }
.checkout-review .checkout-summary-note { margin:9px 0 0; color:#8daebe; font-size:10px; line-height:1.6; }
.order-review-delivery { margin:15px 0; padding:11px 0; border-block:1px solid #223a49; color:#91b1c2; font-size:11px; line-height:1.65; }
.order-review-help { color:#84daec; font-size:11px; }
@media(max-width:800px) {
 .checkout-shell { padding-block:20px 45px; }
 .checkout-layout { grid-template-columns:1fr; gap:16px; }
 .checkout-review { grid-row:1; }
 .checkout-layout .checkout-review { position:static; padding:17px; }
 .checkout-intro { align-items:flex-start; }
 .checkout-intro > a { font-size:10px; padding-top:3px; }
 .checkout-intro p:last-child { max-width:270px; font-size:12px; }
 .order-review-heading { margin-bottom:13px; }
 .order-review-item { grid-template-columns:66px minmax(0,1fr) auto; }
 .checkout-signin { margin-bottom:14px; }
}
@media(max-width:420px) {
 .checkout-shell { padding-inline:16px; }
 .checkout-layout { gap:12px; }
 .checkout-signin > summary span { display:block; margin:4px 14px 0 0; font-size:10px; }
 .checkout-panel-heading { padding:15px 16px 12px; }
 .checkout-fields { padding:14px 16px 8px; }
 .checkout-layout .payment-methods { margin:4px 16px 12px; }
 .checkout-layout #checkout-action { margin:0 16px 12px; }
 .checkout-layout .payment-method { grid-template-columns:32px minmax(0,1fr); gap:7px; padding-right:8px; }
 .checkout-layout .payment-logo { width:31px; padding:4px; }
 .checkout-layout .payment-logo--wallets { width:31px; }
 .checkout-layout .checkout-fine-print,.checkout-layout .checkout-support,.checkout-layout .checkout-status { margin-inline:16px; }
 .payment-more > summary span { display:block; margin:3px 14px 0 0; font-size:10px; }
 .site-announcement { padding-inline:4px; }
 .site-announcement a { font-size:12px; gap:9px; }
}
.checkout-shell.shell { width:calc(100% - 48px); max-width:1080px; padding-inline:0; }
.checkout-payment-notes { margin:0 20px 12px; border-top:1px solid #243c4d; }
.checkout-payment-notes summary { padding:10px 0; color:#829faf; font-size:10px; }
.checkout-layout .checkout-payment-notes .checkout-fine-print { margin:0; }
.checkout-payment-notes:has(.checkout-fine-print[hidden]) { display:none; }
@media(max-width:600px) {
 .checkout-shell.shell { width:calc(100% - 32px); }
 .checkout-intro h1 { font-size:27px; }
 .checkout-intro > a { display:none; }
 .checkout-layout .payment-method-row--main,.checkout-layout .payment-method-row--more { grid-template-columns:1fr; }
 .checkout-layout .payment-method { grid-template-columns:42px minmax(0,1fr); gap:11px; min-height:64px; padding:10px 12px 10px 30px; }
 .checkout-layout .payment-method strong { font-size:12px; }
 .checkout-layout .payment-method small { font-size:10px; }
 .checkout-layout .payment-logo { width:42px; height:30px; }
 .checkout-layout .payment-logo--wallets { width:42px; }
 .checkout-layout .checkout-review { padding:16px; }
 .order-review-heading { margin-bottom:13px; }
 .order-review-item { padding-bottom:12px; margin-bottom:12px; }
 .order-review-totals dl { gap:8px; margin-bottom:12px; }
 .order-review-total { padding-top:11px; }
 .order-review-delivery { margin:10px 0 0; padding:10px 0 0; border-bottom:0; }
 .order-review-help { display:none; }
 .checkout-payment-notes { margin-inline:16px; }
 .checkout-signin > summary span { display:inline; margin:0 3px 0 0; }
 .checkout-signin > summary { font-size:11px; }
}

/* Denser browsing and product details, scoped to the game store. */
.page-game-licenses .game-license-page { max-width:1180px; padding-block:24px 48px; }
.license-store-toolbar { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,360px); align-items:end; gap:16px 28px; margin-bottom:16px; }
.page-game-licenses .game-license-top { margin:0; }
.page-game-licenses .game-license-heading h1 { margin:0 0 7px; font-size:30px; line-height:1.15; letter-spacing:-.04em; }
.page-game-licenses .game-license-heading > p { margin:0; max-width:580px; font-size:13px; line-height:1.5; color:var(--muted); }
.page-game-licenses .license-search { max-width:none; margin:0; padding:0; border:0; border-radius:0; background:none; }
.page-game-licenses .license-search label { margin-bottom:5px; font-size:12px; }
.page-game-licenses .license-search input { min-height:40px; padding:8px 11px; border-radius:8px; font-size:13px; }
.page-game-licenses .license-search button { min-height:40px; padding:8px 12px; border-radius:8px; font-size:12px; }
.page-game-licenses .license-search p { margin:5px 0 0; font-size:11px; line-height:1.4; }
.page-game-licenses .payment-brand-rail { display:flex; flex-wrap:wrap; gap:12px 24px; margin:0 0 16px; padding:10px 14px; border-radius:10px; }
.page-game-licenses .payment-rail-label { display:none; }
.page-game-licenses .payment-rail-item { gap:8px; font-size:12px; }
.page-game-licenses .payment-rail-item small { font-size:10px; }
.page-game-licenses .payment-rail-item .payment-logo { width:40px; height:30px; padding:6px 7px; border-radius:6px; }
.page-game-licenses .payment-rail-item .payment-logo--btc { width:30px; padding:4px; }
.page-game-licenses .payment-rail-item .payment-logo--btc img { width:22px; height:22px; }
.page-game-licenses .payment-rail-more { margin-right:auto; font-size:11px; }
/* Once a product is open, prioritize its picture, terms and price over marketing. */
.game-license-page[data-store-view="product"] .payment-brand-rail { display:none; }
.game-license-page[data-store-view="product"] .game-license-heading > p,
.game-license-page[data-store-view="game"] .game-license-heading > p { display:none; }
.game-license-page[data-store-view="product"] .game-license-heading h1,
.game-license-page[data-store-view="game"] .game-license-heading h1 { margin:0; font-size:22px; }
.game-license-page[data-store-view="product"] .license-search label,
.game-license-page[data-store-view="product"] .license-search p { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.page-game-licenses .license-back { min-height:34px; margin:0 0 10px; padding:7px 12px; font-size:12px; }
.page-game-licenses .license-game-heading { margin:2px 0 7px; font-size:26px; }
.page-game-licenses .license-section-title { margin:0 0 12px; font-size:22px; }
.page-game-licenses .license-section-title:not(:first-child) { margin-top:26px; }
.page-game-licenses .license-section-note { margin:0 0 12px; font-size:13px; }
.page-game-licenses .license-game-grid { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.page-game-licenses .license-game-tile-copy { gap:8px; padding:13px 15px; }
.page-game-licenses .license-game-tile-copy > strong { font-size:17px; }
.page-game-licenses .license-game-tile-meta { font-size:13px; }
.page-game-licenses .license-store-menu { gap:14px; }
.page-game-licenses .license-store-item-copy { padding:12px 14px; gap:8px; }
.page-game-licenses .license-store-item-copy > strong { font-size:16px; }
.page-game-licenses .license-product-panel { grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); }
.page-game-licenses .license-media { padding:12px; }
.page-game-licenses .rie-banner > img,
.page-game-licenses .license-media-stage,
.page-game-licenses .rie-game-media-stage { height:clamp(180px,23vw,285px); min-height:0; aspect-ratio:auto; }
.page-game-licenses .license-card-details { padding:20px; }
.page-game-licenses .license-product-panel--features .license-card-details { top:calc(var(--announcement-height) + 82px); }
.page-game-licenses .license-card-details > .eyebrow { margin:0 0 8px; font-size:10px; }
.page-game-licenses .license-product-heading h2,
.page-game-licenses .license-card-details > h2 { margin:0; font-size:25px; line-height:1.2; }
.page-game-licenses .license-product-intro { margin:10px 0 14px; font-size:13px; line-height:1.55; }
.page-game-licenses .license-plan-grid { gap:9px; }
.page-game-licenses .license-plan { padding:11px 12px; gap:9px; border-radius:10px; }
.page-game-licenses .license-plan-term > strong { font-size:15px; }
.page-game-licenses .license-plan-price > strong,
.page-game-licenses .rie-plan-price { font-size:22px; }
.page-game-licenses .rie-plan { grid-template-columns:minmax(0,1fr) auto; align-items:center; }
.page-game-licenses .rie-plan .license-plan-head { display:grid; gap:4px; }
.page-game-licenses .license-plan .button { min-height:40px; padding:9px 13px; font-size:12px; white-space:nowrap; }
.page-game-licenses .license-media-thumbnails { grid-auto-columns:76px; gap:6px; }
.page-game-licenses .license-media-choice { min-width:76px; }
.page-game-licenses .rie-game-media-choices { gap:6px; padding-bottom:6px; }
.page-game-licenses .rie-game-media-choice { flex-basis:86px; }
.page-game-licenses .rie-game-media-choice span { padding:5px 6px; font-size:11px; }
.page-game-licenses .rie-game-media-caption { padding:8px 0; font-size:12px; }
.page-game-licenses .license-features { padding:16px 12px; gap:12px; }
.page-game-licenses .rie-game-heading { margin-block:0 12px; font-size:21px; }
.page-game-licenses .spectra-requirements { margin:12px 0 16px; padding:12px 14px; }
@media(max-width:800px) {
  .page-game-licenses .game-license-page { width:calc(100% - 32px); padding-top:18px; }
  .license-store-toolbar { grid-template-columns:1fr; gap:12px; margin-bottom:12px; }
  .page-game-licenses .game-license-heading h1 { font-size:26px; }
  .page-game-licenses .license-product-panel { grid-template-columns:minmax(0,1fr); }
  .page-game-licenses .license-product-panel--features { grid-template-areas:"details" "media" "features"; }
  .page-game-licenses .license-product-panel--features .license-card-details { position:static; }
  .page-game-licenses .license-card-details { padding:16px; }
  .page-game-licenses .license-product-heading h2,
  .page-game-licenses .license-card-details > h2 { font-size:22px; }
  .page-game-licenses .license-product-intro { margin:8px 0 12px; }
  .page-game-licenses .license-game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .page-game-licenses .payment-brand-rail { gap:12px; padding:10px 12px; }
  .page-game-licenses .payment-rail-item { font-size:11px; gap:6px; }
  .page-game-licenses .payment-rail-item small { font-size:9px; }
  .page-game-licenses .payment-rail-more { margin-right:0; }
}
@media(max-width:420px) {
  .page-game-licenses .payment-brand-rail { display:grid; grid-template-columns:1fr 1fr; }
  .page-game-licenses .license-store-item-copy { padding:10px; }
  .page-game-licenses .license-store-item-copy > strong { font-size:14px; }
  .page-game-licenses .license-game-tile-copy { padding:10px; }
}
@media(max-width:560px) { .page-game-licenses .license-plan .button { padding-inline:7px; } }
@media(max-width:400px) { .page-game-licenses .license-plan .button { padding-inline:5px; } }

/* Bundle artwork fills its own column, instead of leaving an unfinished panel below it. */
.page-game-licenses .rie-product-panel .rie-banner { align-self:stretch; display:flex; flex-direction:column; min-height:0; padding:0; background:#0b141c; }
.page-game-licenses .rie-product-panel .rie-banner > img { flex:1 1 0; width:100%; height:0; min-height:0; aspect-ratio:auto; object-fit:contain; }
.page-game-licenses .rie-product-panel .rie-banner-caption { flex:none; margin:0; padding:14px 16px; border-top:1px solid var(--line); border-bottom:0; background:#0b141c; }
@media(max-width:800px) {
  .page-game-licenses .rie-product-panel .rie-banner > img { flex:none; height:auto; }
  .page-game-licenses .rie-product-panel .rie-banner-caption { padding:12px 14px; }
}
/* Trending: a short row of picks above the full game list. */
.page-game-licenses .license-trending-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.license-trending-tile { border-color:#ffb457; box-shadow:0 10px 24px #02091266,0 0 0 1px #ffb45733; }
.license-trending-tile:hover,.license-trending-tile:focus-visible { border-color:#ffd08a; }
.license-trending-badge { justify-self:start; align-self:flex-start; width:max-content; margin-bottom:2px; padding:3px 9px; border-radius:999px; background:linear-gradient(-135deg,#ffb457,#ff7a45); color:#1b0e02; font-size:11px; font-weight:850; letter-spacing:.06em; text-transform:uppercase; }
@media(max-width:900px) { .page-game-licenses .license-trending-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Product changelog: small, factual supplier notes below every listing. */
.page-game-licenses .license-updates { margin-top:14px; overflow:hidden; border:1px solid #31576a; border-radius:12px; background:#0b151e; }
.page-game-licenses .license-updates-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 16px; border-bottom:1px solid #294858; background:linear-gradient(-90deg,#122838,#0d1a24); }
.page-game-licenses .license-updates-heading h3 { margin:0; font-size:16px; letter-spacing:-.01em; }
.page-game-licenses .license-updates-count { flex:none; color:#8ce5d7; font-size:11px; font-weight:750; }
.page-game-licenses .license-updates-list { display:grid; }
.page-game-licenses .license-update-item { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:start; padding:14px 16px; }
.page-game-licenses .license-update-item + .license-update-item { border-top:1px solid #223d4a; }
.page-game-licenses .license-update-copy h4 { margin:0 0 5px; color:#f3fbff; font-size:14px; }
.page-game-licenses .license-update-copy p { margin:0; color:#bdd0db; font-size:13px; line-height:1.5; }
.page-game-licenses .license-update-meta { display:grid; justify-items:end; gap:4px; margin:0; color:#8298a5; font-size:11px; line-height:1.4; text-align:left; }
.page-game-licenses .license-update-source { color:#8ce5d7; font-weight:750; }
.page-game-licenses .license-updates-empty { margin:0; padding:14px 16px; color:#9eb2bd; font-size:13px; line-height:1.5; }
@media(max-width:600px) {
  .page-game-licenses .license-updates-heading { align-items:flex-start; padding:12px 14px; }
  .page-game-licenses .license-update-item { grid-template-columns:1fr; gap:9px; padding:13px 14px; }
  .page-game-licenses .license-update-meta { justify-items:start; text-align:right; }
  .page-game-licenses .license-updates-empty { padding:13px 14px; }
}

.hardware-card { position:relative; }
.hardware-product-link { color:inherit; }
.hardware-product-link::after { content:""; position:absolute; inset:0; z-index:1; }
.hardware-product-link:focus-visible::after { outline:3px solid var(--accent); outline-offset:-3px; border-radius:var(--radius); }
.hardware-card .hardware-cta { position:relative; z-index:2; }
.hardware-detail-page { max-width:1120px; padding-block:24px 56px; }
.hardware-back { min-height:38px; margin-bottom:16px; padding:8px 12px; font-size:12px; }
.hardware-back .icon { transform:rotate(-180deg); }
.hardware-detail-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:start; }
.hardware-detail-photo { margin:0; padding:20px; border:1px solid var(--line); border-radius:16px; background:radial-gradient(ellipse at 50% 42%,#1d3540,#0a1117 80%); }
.hardware-detail-photo img { display:block; width:100%; height:320px; object-fit:contain; }
.hardware-detail-photo figcaption { margin-top:8px; font-size:11px; color:var(--muted); text-align:center; }
.hardware-gallery { display:flex; flex-direction:column; gap:10px; min-width:0; }
.hardware-gallery:focus { outline:none; }
.hardware-gallery:focus-visible { outline:3px solid var(--accent); outline-offset:4px; border-radius:16px; }
.hardware-gallery-nav { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:12px; }
.hardware-gallery-arrow { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:1px solid var(--line); border-radius:999px; background:#081722; color:var(--text); cursor:pointer; }
.hardware-gallery-arrow .icon { width:14px; height:14px; }
.hardware-gallery-arrow[data-hardware-gallery-prev] .icon { transform:rotate(-180deg); }
.hardware-gallery-count { min-width:4.5em; color:var(--muted); font-size:12px; text-align:center; }
.hardware-gallery-thumbs { display:flex; flex-wrap:wrap; gap:8px; }
.hardware-gallery-thumb { width:72px; height:72px; padding:6px; border:1px solid var(--line); border-radius:10px; background:#081722; cursor:pointer; }
.hardware-gallery-thumb[aria-current="true"] { border-color:var(--accent); }
.hardware-gallery-thumb img { display:block; width:100%; height:100%; object-fit:contain; }
.hardware-detail-summary { display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding-block:10px; min-width:0; }
.hardware-detail-summary .small-label { margin:0; font-size:11px; }
.hardware-detail-summary h1 { margin:0; font-size:clamp(28px,3vw,38px); line-height:1.15; }
.hardware-detail-summary > p { margin:0; }
.hardware-detail-price { color:var(--mint); font-size:28px; font-weight:800; }
.hardware-detail-price small { display:block; color:var(--muted); font-size:12px; font-weight:500; margin-top:5px; }
.hardware-detail-delivery,.hardware-delivery-pending { color:var(--muted); font-size:13px; line-height:1.6; }
.hardware-detail-specs { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:18px; margin-top:28px; }
.hardware-detail-specs > section { padding:20px; border:1px solid var(--line); border-radius:12px; background:#0c1924; }
.hardware-detail-specs h2,.hardware-detail-specs h3 { margin:0 0 12px; font-size:18px; }
.hardware-detail-specs li,.hardware-detail-specs p { font-size:14px; line-height:1.7; color:var(--muted); }
.hardware-detail-specs ul { padding-right:18px; margin:0; }
.hardware-detail-specs a { color:var(--accent); text-decoration:none; }
.hardware-detail-specs a:hover { text-decoration:underline; }
.checkout-shipping { padding:16px 20px; border-top:1px solid var(--line); }
.checkout-shipping[hidden] { display:none; }
.checkout-shipping h3 { margin:0 0 8px; font-size:16px; }
.checkout-shipping p { margin:0 0 12px; font-size:12px; color:var(--muted); }
.shipping-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.shipping-fields label { display:block; margin-bottom:5px; color:var(--muted); font-size:12px; }
.shipping-fields input { width:100%; padding:11px; border:1px solid #35576c; border-radius:8px; color:var(--text); background:#081722; font:inherit; font-size:13px; }
.shipping-field-wide { grid-column:1/-1; }
@media(max-width:700px) {
  .hardware-detail-page { width:calc(100% - 32px); }
  .hardware-detail-hero { grid-template-columns:1fr; gap:16px; }
  .hardware-detail-photo img { height:230px; }
  .hardware-gallery-thumb { width:58px; height:58px; }
  .hardware-detail-summary { gap:12px; }
  .shipping-fields { grid-template-columns:1fr; }
}

.hardware-request-address { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; font-size:13px; color:var(--muted); padding:14px; background:#081722; border-radius:8px; }
.checkout-hardware-request p { font-size:13px; color:var(--muted); }
#checkout-order-receipt .button { margin:8px 0 8px 8px; }
[data-hardware-search] { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
[data-hardware-search] input { padding:10px; background:#081722; border:1px solid var(--line); border-radius:8px; color:var(--text); }
.checkout-layout .payment-methods[hidden],
.checkout-body--receipt .checkout-layout .payment-methods,
.checkout-body--receipt .checkout-layout .checkout-fields,
.checkout-body--receipt .checkout-shipping,
.checkout-body--receipt .checkout-signin { display:none; }

.hardware-request-receipt .checkout-review { display:none; }

.hardware-express-option { display:flex; align-items:flex-start; gap:10px; margin:14px 0; padding:12px; border:1px solid var(--line); border-radius:8px; font-size:13px; cursor:pointer; }
.hardware-express-option input { margin-top:4px; accent-color:var(--accent); }
.hardware-express-option small { display:block; margin-top:3px; color:var(--muted); font-size:11px; }

/* Focused checkout: restrained spacing and one clear level of hierarchy. */
.checkout-refined .site-announcement { min-height:32px; grid-template-columns:32px minmax(0,1fr) 32px; }
.checkout-refined .site-announcement a { min-height:32px; padding:4px 0; font-size:12px; }
.checkout-refined .site-announcement button { width:32px; height:32px; }
.checkout-refined .checkout-bar.shell { width:calc(100% - 40px); max-width:1000px; min-height:58px; }
.checkout-refined .checkout-bar .ps-brand { gap:8px; font-size:14px; }
.checkout-refined .checkout-bar .brand-second { font-size:12px; }
.checkout-refined .checkout-bar .ps-emblem { width:32px; height:32px; border-radius:8px; }
.checkout-refined .checkout-bar > .text-link { font-size:12px; }
.checkout-refined .checkout-shell.shell { width:calc(100% - 40px); max-width:1000px; padding-block:22px 40px; }
.checkout-refined .checkout-intro { max-width:none; margin-bottom:8px; gap:12px; }
.checkout-refined .checkout-intro .eyebrow { display:none; }
.checkout-refined .checkout-intro h1 { margin:0; font-size:24px; line-height:1.25; letter-spacing:-.035em; }
.checkout-refined .checkout-intro p:last-child { margin-top:4px; font-size:12px; color:#a7bdca; }
.checkout-refined .checkout-signin { margin:0 0 14px; border:0; border-radius:0; background:transparent; }
.checkout-refined .checkout-signin > summary { width:fit-content; min-height:32px; padding:6px 0; font-size:12px; }
.checkout-refined .checkout-signin > summary span { margin-right:4px; color:#9ccbd8; }
.checkout-refined .checkout-signin .account-panel { margin-top:6px; border:1px solid var(--line); border-radius:8px; }
.checkout-refined .checkout-layout { grid-template-columns:minmax(0,1fr) 320px; gap:20px; }
.checkout-refined .checkout-main-column { gap:12px; }
.checkout-refined .checkout-layout .checkout-panel { border-radius:10px; background:#0f1b25; box-shadow:none; }
.checkout-refined .checkout-picker-toggle { padding:10px 16px; font-size:12px; }
.checkout-refined .checkout-picker-content { border-color:#243744; }
.checkout-refined .checkout-product-list--focused { padding:12px 16px; }
.checkout-refined .checkout-product-list--focused .checkout-family { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:0; border:0; border-radius:0; background:transparent; }
.checkout-refined .checkout-product-list--focused .checkout-family-head { flex:1 1 180px; margin:0; }
.checkout-refined .checkout-family-head strong { font-size:14px; line-height:1.45; letter-spacing:-.02em; }
.checkout-refined .checkout-family-head small { font-size:11px; }
.checkout-refined .checkout-family-head small:empty { display:none; }
.checkout-refined .checkout-terms { display:flex; flex-wrap:wrap; gap:6px; }
.checkout-refined .checkout-term { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:100px; min-height:40px; padding:8px 10px; border-radius:6px; background:#0b141d; }
.checkout-refined .checkout-term:has(input:checked) { border-color:#61c9c8; background:#153133; box-shadow:none; }
.checkout-refined .checkout-term-name { font-size:11px; letter-spacing:0; text-transform:none; }
.checkout-refined .checkout-term-price { font-size:14px; color:#d5f6f1; }
.checkout-refined .checkout-qty { width:100%; margin-top:0; }
.checkout-refined .checkout-products .checkout-requirements { margin:0; padding:0 16px; border:0; border-top:1px solid #243744; border-radius:0; background:transparent; }
.checkout-refined .checkout-requirements > summary { padding:10px 0; color:#9db8c7; font-size:12px; cursor:pointer; }
.checkout-refined .checkout-requirements > div { padding:0 0 12px; }
.checkout-refined .checkout-requirements p { margin:0 0 6px; color:#a7bdca; font-size:12px; line-height:1.55; }
.checkout-refined .checkout-requirements p:last-child { margin-bottom:0; }
.checkout-refined .checkout-panel-heading { padding:13px 16px 10px; }
.checkout-refined .checkout-panel-heading h2 { font-size:16px; }
.checkout-refined .checkout-fields { gap:10px; padding:12px 16px 6px; }
.checkout-refined .checkout-fields label { font-size:12px; }
.checkout-refined .checkout-fields input { min-height:40px; padding:9px 11px; font-size:14px; }
.checkout-refined .checkout-fields .field-help { margin:4px 0 0; font-size:11px; }
.checkout-refined .checkout-optional-fields > summary { min-height:34px; padding:8px 0; font-size:11px; }
.checkout-refined .checkout-layout .payment-methods { margin:6px 16px 10px; }
.checkout-refined .payment-methods legend { margin-bottom:7px; font-size:12px; }
.checkout-refined .payment-method-row--main,.checkout-refined .payment-method-row--more { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.checkout-refined .checkout-layout .payment-method { grid-template-columns:34px minmax(0,1fr); gap:8px; min-height:58px; padding:9px 10px 9px 24px; border-radius:7px; background:#11222f; }
.checkout-refined .checkout-layout .payment-method strong { font-size:12px; }
.checkout-refined .checkout-layout .payment-method small { font-size:11px; }
.checkout-refined .checkout-layout .payment-logo,.checkout-refined .checkout-layout .payment-logo--wallets { width:34px; height:28px; padding:4px; }
.checkout-refined .checkout-layout .payment-method:has(input:checked) { border-color:#61c9c8; background:#153133; box-shadow:none; }
.checkout-refined .payment-more { margin-top:7px; }
.checkout-refined .payment-more > summary { padding:9px 0; font-size:11px; }
.checkout-refined .checkout-layout #checkout-action { margin:0 16px 10px; }
.checkout-refined .checkout-layout .checkout-gift-card { padding:12px; background:#0b1720; border-color:#243b48; }
.checkout-refined .checkout-layout .checkout-gift-card h3 { margin-bottom:5px; font-size:14px; }
.checkout-refined .checkout-layout .checkout-gift-card p,.checkout-refined .checkout-layout .checkout-gift-card li { margin-bottom:6px; font-size:12px; line-height:1.5; }
.checkout-refined .checkout-layout .checkout-gift-card .button { min-height:42px; width:100%; margin-top:6px; padding:10px 12px; font-size:13px; }
.checkout-refined .checkout-payment-notes { margin:0 16px 8px; }
.checkout-refined .checkout-layout .checkout-support { margin:8px 16px 12px; font-size:11px; }
.checkout-refined .checkout-layout .checkout-status { margin:6px 16px; font-size:12px; }
.checkout-refined .checkout-layout .checkout-review { top:calc(var(--announcement-height) + 74px); padding:16px; }
.checkout-refined .order-review-heading { margin-bottom:14px; }
.checkout-refined .order-review-heading h2 { font-size:17px; }
.checkout-refined .order-review-item { grid-template-columns:56px minmax(0,1fr) auto; gap:10px; padding-bottom:13px; margin-bottom:13px; }
.checkout-refined .order-review-item img { width:56px; height:44px; }
.checkout-refined .order-review-item-copy strong { font-size:12px; line-height:1.45; }
.checkout-refined .order-review-item-copy small { margin-top:3px; }
.checkout-refined .order-review-totals dl { gap:8px; margin-bottom:12px; }
.checkout-refined .order-review-total { padding-top:12px; font-size:14px; }
.checkout-refined .order-review-total strong { font-size:24px; }
.checkout-refined .checkout-review .checkout-summary-note { font-size:11px; line-height:1.5; }
.checkout-refined .order-review-delivery { margin:12px 0 0; padding:12px 0 0; border-bottom:0; font-size:12px; line-height:1.55; }
.checkout-refined .order-review-help { display:inline-block; margin-top:10px; font-size:11px; }
.checkout-refined .checkout-shipping { padding:12px 16px; }
.checkout-refined .shipping-fields { gap:10px; }
.checkout-refined .shipping-fields input { min-height:40px; padding:9px 10px; }
.checkout-refined .hardware-express-option { margin-block:10px; }
@media(max-width:900px) {
 .checkout-refined .checkout-layout { grid-template-columns:1fr; gap:12px; }
 .checkout-refined .checkout-layout .checkout-review { position:static; grid-row:1; }
 .checkout-refined .checkout-shell.shell { max-width:580px; padding-top:16px; }
 .checkout-refined .checkout-intro h1 { font-size:23px; }
 .checkout-refined .checkout-layout .payment-method { min-height:62px; }
 .checkout-refined .checkout-fields input,.checkout-refined .checkout-fields textarea,.checkout-refined .shipping-fields input { font-size:16px; }
 .checkout-refined .checkout-bar .ps-brand > span:last-child { display:block; }
 .checkout-refined .checkout-review .order-review-heading { margin-bottom:10px; }
 .checkout-refined .order-review-item { padding-bottom:10px; margin-bottom:10px; }
 .checkout-refined .order-review-delivery { font-size:11px; margin-top:10px; padding-top:10px; }
}
@media(max-width:420px) {
 .checkout-refined .checkout-shell.shell,.checkout-refined .checkout-bar.shell { width:calc(100% - 28px); }
 .checkout-refined .checkout-intro > a { display:none; }
 .checkout-refined .checkout-intro p:last-child { max-width:none; font-size:12px; }
 .checkout-refined .checkout-signin > summary span { display:inline; }
 .checkout-refined .checkout-layout .payment-method { grid-template-columns:28px minmax(0,1fr); padding-right:8px; gap:6px; }
 .checkout-refined .checkout-layout .payment-logo,.checkout-refined .checkout-layout .payment-logo--wallets { width:28px; padding:3px; }
 .checkout-refined .checkout-layout .payment-method small { font-size:10px; }
 .checkout-refined .checkout-family-head { flex-basis:100%; }
 .checkout-refined .checkout-term { min-width:90px; }
}
/* Preserve the existing request-only and completed-order visibility rules. */
.checkout-refined .checkout-layout .payment-methods[hidden],
.checkout-refined .checkout-layout .checkout-credit[hidden],
.checkout-refined.checkout-body--receipt .checkout-layout .payment-methods,
.checkout-refined.checkout-body--receipt .checkout-layout .checkout-fields,
.checkout-refined.checkout-body--receipt .checkout-shipping,
.checkout-refined.checkout-body--receipt .checkout-signin,
.checkout-refined.hardware-request-receipt .checkout-review { display:none; }

.checkout-refined .checkout-products:has(.checkout-product-list--focused) > .checkout-picker-toggle { display:none; }
.checkout-refined .checkout-products:has(.checkout-product-list--focused) .checkout-picker-content { border-top:0; }
.checkout-refined .checkout-layout .checkout-stripe-card { padding:0; border:0; background:transparent; }
.checkout-refined .checkout-layout .checkout-stripe-card > p:not(.checkout-gift-warning) { margin:0 0 8px; font-size:11px; color:#9db8c7; }
.checkout-refined .checkout-layout .checkout-stripe-card .checkout-pay-button { margin-top:0; }
.checkout-refined .checkout-layout .payment-method::after { width:12px; height:12px; left:8px; top:11px; }
.checkout-refined .checkout-layout .payment-method:has(input:checked)::after { border-width:3px; }
@media(min-width:901px) {
 .checkout-refined .payment-method-row--main { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .checkout-refined .checkout-layout .payment-method-row--main .payment-method { grid-template-columns:28px minmax(0,1fr); gap:7px; min-height:78px; padding:10px 8px 10px 20px; }
 .checkout-refined .checkout-layout .payment-method-row--main .payment-logo { width:28px; padding:3px; }
 .checkout-refined .checkout-layout .payment-method-row--main .payment-method small { font-size:10px; }
}
@media(max-width:900px) {
 .checkout-refined .order-review-help { display:none; }
}

.checkout-refined .order-review-breakdown > summary { display:none; }
@media(max-width:900px) {
 .checkout-refined .order-review-breakdown > summary { display:list-item; padding:0 0 10px; color:#9db8c7; font-size:12px; cursor:pointer; }
 .checkout-refined .order-review-breakdown[open] > summary { padding-bottom:12px; }
 .checkout-refined .order-review-total { padding-top:10px; }
 .checkout-refined .payment-method-row--main [data-payment="wallet-pay"] { grid-column:1/-1; min-height:48px; }
}
.checkout-refined .checkout-layout .payment-method[hidden],
.checkout-refined .checkout-layout .checkout-fields[hidden] { display:none; }

/* Illustrated product switcher. The arrow and menu share one consistent state. */
.product-picker { position:relative; width:100%; max-width:680px; margin:10px 0 22px; isolation:isolate; }
.product-picker.is-open { z-index:30; }
.product-picker select[hidden] { display:none; }
.product-picker-trigger { display:grid; grid-template-columns:56px minmax(0,1fr) 32px; align-items:center; gap:14px; width:100%; min-height:72px; padding:12px 14px; border:1px solid #36586c; border-radius:12px; color:#eef8ff; background:linear-gradient(-110deg,#142a38,#0b1822); text-align:right; cursor:pointer; transition:border-color .18s,box-shadow .18s; }
.product-picker-trigger:hover { border-color:#72bdd2; }
.product-picker-trigger:focus-visible { outline:2px solid #7ce4ff; outline-offset:3px; }
.product-picker.is-open .product-picker-trigger { border-color:#65d9da; box-shadow:0 0 0 3px #65d9da12; }
.product-picker-cover { display:block; width:56px; height:40px; object-fit:contain; border:1px solid #34505e; border-radius:6px; background:#07111a; }
.product-picker-copy { display:grid; gap:4px; min-width:0; }
.product-picker-title { color:#eef8ff; font-size:15px; line-height:1.4; font-weight:650; overflow-wrap:anywhere; }
.product-picker-subtitle { color:#8fb1c3; font-size:11px; line-height:1.4; }
.product-picker-arrow { display:grid; place-items:center; width:32px; height:32px; border:1px solid #36586c; border-radius:8px; background:#1c3544; color:#a8edf0; }
.product-picker-arrow::before { content:""; width:7px; height:7px; margin-top:-4px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(-45deg); transition:transform .18s,margin .18s; }
.product-picker.is-open .product-picker-arrow::before { margin-top:3px; transform:rotate(-225deg); }
.product-picker-menu { position:absolute; top:calc(100% + 8px); right:0; left:0; overflow:hidden; padding:6px; border:1px solid #426779; border-radius:12px; background:#0d1b26; box-shadow:0 18px 45px #0009; }
.product-picker-menu[hidden] { display:none; }
.product-picker-menu-heading { padding:8px 10px 10px; color:#8eb8c9; font-size:11px; font-weight:600; border-bottom:1px solid #273e4b; }
.product-picker-list { max-height:min(330px,50vh); overflow-y:auto; overscroll-behavior:contain; padding-top:5px; scrollbar-width:thin; scrollbar-color:#426779 #0d1b26; }
.product-picker-option { display:grid; grid-template-columns:48px minmax(0,1fr) 20px; align-items:center; gap:12px; min-height:54px; padding:8px 10px; border:1px solid transparent; border-radius:7px; color:#cbdde7; font-size:13px; line-height:1.4; cursor:pointer; }
.product-picker-option > img { display:block; width:48px; height:34px; border-radius:4px; object-fit:contain; background:#07111a; }
.product-picker-option:hover,.product-picker-option.is-active { background:#193443; color:#f2fbff; }
.product-picker-option[aria-selected="true"] { border-color:#3c686d; background:#153238; color:#b9f5e4; }
.product-picker-check { width:7px; height:12px; margin-right:5px; border-left:2px solid #8af2cc; border-bottom:2px solid #8af2cc; transform:rotate(-45deg); visibility:hidden; }
.product-picker-option[aria-selected="true"] .product-picker-check { visibility:visible; }
@media(max-width:600px) {
 .product-picker-trigger { grid-template-columns:44px minmax(0,1fr) 30px; gap:10px; min-height:68px; padding:10px; }
 .product-picker-cover { width:44px; height:34px; }
 .product-picker-title { font-size:14px; }
 .product-picker-arrow { width:30px; height:30px; }
 .product-picker-option { grid-template-columns:40px minmax(0,1fr) 18px; gap:9px; padding:8px; }
 .product-picker-option > img { width:40px; height:30px; }
}
@media(prefers-reduced-motion:reduce) { .product-picker-trigger,.product-picker-arrow::before { transition:none; } }

/* Legal pages: terms, privacy, refund and shipping */
.legal{max-width:820px;margin:0 auto;padding:56px 24px 80px}
.legal h1{font-size:clamp(32px,5vw,44px);margin:0 0 8px}
.legal h2{font-size:21px;margin:32px 0 10px}
.legal p,.legal li{line-height:1.7;color:rgba(255,255,255,.82)}
.legal ul{padding-right:22px;margin:8px 0 12px}
.legal li{margin:4px 0}
.legal a{text-decoration:underline}
@media (min-width:900px){.footer-grid:has(.footer-col[aria-label="Terms"]){grid-template-columns:2fr 1fr 1fr 1fr}}

.page-vexel-loader main{position:relative;overflow:hidden}
.page-vexel-loader main::before{content:"";position:absolute;inset:-12rem -20% auto;height:42rem;background:radial-gradient(circle at 55% 35%,rgba(92,229,255,.16),transparent 42%),radial-gradient(circle at 28% 20%,rgba(143,104,255,.12),transparent 34%);pointer-events:none}
.vexel-loader-page,.vexel-loader-steps{position:relative;z-index:1}
.vexel-loader-hero{max-width:760px;margin-bottom:30px}
.vexel-loader-hero h1{margin:8px 0 14px;font-size:clamp(40px,7vw,76px);line-height:.98;letter-spacing:-.05em}
.vexel-loader-lead{max-width:680px;margin:0;color:var(--muted);font-size:clamp(16px,2vw,20px);line-height:1.7}
.vexel-loader-card{overflow:hidden;border:1px solid rgba(112,221,255,.28);border-radius:24px;background:linear-gradient(-145deg,rgba(14,27,38,.98),rgba(8,14,21,.98));box-shadow:0 34px 90px rgba(0,0,0,.32)}
.vexel-loader-banner{display:block;width:100%;height:auto;aspect-ratio:1600/534;object-fit:contain;border-bottom:1px solid rgba(112,221,255,.18)}
.vexel-loader-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(440px,.9fr);gap:28px;padding:30px}
.vexel-loader-content h2{margin:7px 0 10px;font-size:clamp(24px,3vw,34px)}
.vexel-loader-kicker{margin:0;color:#70e9ff;font-size:12px;font-weight:800;letter-spacing:.16em}
.vexel-loader-note{max-width:600px;margin:0;color:var(--muted);font-size:14px;line-height:1.65}
.vexel-loader-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0}
.vexel-loader-meta div{padding:13px 14px;border:1px solid rgba(122,183,210,.18);border-radius:12px;background:rgba(8,15,22,.72)}
.vexel-loader-meta dt{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.vexel-loader-meta dd{margin:5px 0 0;font-size:14px;font-weight:800;overflow-wrap:anywhere}
.vexel-loader-actions{grid-column:1/-1;display:flex;gap:12px;flex-wrap:wrap;padding-top:4px}
.vexel-loader-steps{padding-top:8px}
.vexel-loader-steps>h2{margin:8px 0 24px;font-size:clamp(28px,4vw,44px)}
.vexel-loader-steps ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none;counter-reset:none}
.vexel-loader-steps li{display:flex;gap:14px;padding:22px;border:1px solid rgba(122,183,210,.18);border-radius:16px;background:rgba(10,19,27,.82)}
.vexel-loader-steps li>span{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:10px;background:linear-gradient(-135deg,#61e8ff,#9b78ff);color:#061016;font-weight:900}
.vexel-loader-steps strong{display:block;margin:4px 0 8px}
.vexel-loader-steps li p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.vexel-loader-steps code{color:#bdf5ff}
.vexel-loader-help{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:22px;padding:24px 26px;border:1px solid rgba(152,116,255,.28);border-radius:18px;background:linear-gradient(-110deg,rgba(89,50,144,.18),rgba(14,25,35,.86))}
.vexel-loader-help h2,.vexel-loader-help p{margin:0}.vexel-loader-help p{margin-top:6px;color:var(--muted)}
.vexel-loader-back{display:inline-flex;align-items:center;gap:9px;margin-top:20px;color:#9eeeff;font-weight:800;text-decoration:none}
.vexel-loader-back .icon{width:14px;transform:rotate(-180deg)}
.vexel-loader-callout{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:4px;padding:16px;border:1px solid rgba(112,221,255,.24);border-radius:14px;background:linear-gradient(-110deg,rgba(54,194,227,.09),rgba(130,83,227,.08))}
.vexel-loader-callout h3{margin:3px 0 5px;font-size:16px}.vexel-loader-callout p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.vexel-loader-kicker{color:#75eaff;font-size:10px;font-weight:900;letter-spacing:.14em}
.vexel-loader-callout .button{flex:0 0 auto;padding:10px 12px;font-size:12px;white-space:nowrap}
@media(max-width:860px){.vexel-loader-content{grid-template-columns:1fr}.vexel-loader-steps ol{grid-template-columns:1fr}.vexel-loader-help{align-items:flex-start;flex-direction:column}.vexel-loader-help .button{width:100%}}
@media(max-width:560px){.vexel-loader-card{border-radius:17px}.vexel-loader-content{padding:20px}.vexel-loader-meta{grid-template-columns:repeat(2,minmax(0,1fr))}.vexel-loader-actions .button{width:100%}.vexel-loader-callout{align-items:stretch;flex-direction:column}.vexel-loader-callout .button{width:100%}}
.vexel-loader-hash{grid-column:1/-1}.vexel-loader-hash code{display:block;color:#bdf5ff;font-size:12px;line-height:1.5;overflow-wrap:anywhere}
.trial-request{display:grid;gap:14px;margin-top:4px;padding:16px;border:1px solid rgba(155,120,255,.28);border-radius:14px;background:linear-gradient(-110deg,rgba(105,70,190,.12),rgba(54,194,227,.06))}
.trial-request h3{margin:3px 0 5px;font-size:16px}.trial-request p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.trial-request-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.trial-request-form label{display:grid;gap:5px;color:var(--muted);font-size:12px;font-weight:700}
.trial-request-form input{min-height:40px;padding:8px 11px;border:1px solid rgba(122,183,210,.3);border-radius:8px;background:rgba(6,12,18,.8);color:var(--text);font:inherit;font-size:13px}
.trial-request-form input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.trial-request-form .button{grid-column:1/-1;justify-self:start}
.trial-request-status,.trial-request-done{grid-column:1/-1;color:#bdf5ff}
.trial-request-status:empty{display:none}
.trial-request-trap{position:absolute!important;right:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:560px){.trial-request-form{grid-template-columns:1fr}.trial-request-form .button{width:100%;justify-self:stretch}}

/* Smoother buying: checkout start screen, reassurance line, order progress, Buy again. */
.checkout-refined .checkout-layout[hidden],
.checkout-refined .checkout-signin[hidden] { display:none; }

.checkout-start { margin:6px 0 40px; padding:22px; border:1px solid #2c4a5c; border-radius:14px; background:linear-gradient(-160deg,#112433,#0d1822 60%); box-shadow:0 18px 40px #02091255; }
.checkout-start h2 { margin:0 0 4px; font-size:22px; letter-spacing:-.03em; }
.checkout-start > p { margin:0; color:#a7bdca; font-size:14px; }
.checkout-start-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:18px 0 16px; }
.checkout-start-tile { display:grid; gap:4px; align-content:start; min-height:104px; padding:16px; border:1px solid #31576a; border-radius:12px; background:#0b151e; transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease); }
.checkout-start-tile strong { color:#f3fbff; font-size:16px; }
.checkout-start-tile strong::after { content:" \2192"; color:#76d8f4; }
.checkout-start-tile small { color:#a7bdca; font-size:13px; line-height:1.45; }
.checkout-start-tile:hover,
.checkout-start-tile:focus-visible { border-color:#76d8f4; transform:translateY(-2px); box-shadow:0 10px 26px #76d8f42b; }
.checkout-start-help { color:#a7bdca; font-size:13px; }
.checkout-start-help a { color:#8ce5d7; text-decoration:underline; text-underline-offset:3px; }
@media(max-width:800px) { .checkout-start-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:420px) { .checkout-start { padding:16px; } .checkout-start-tile { min-height:0; padding:13px; } }

.checkout-trust { display:flex; flex-wrap:wrap; gap:6px 16px; margin:10px 0 2px; padding:0; list-style:none; color:#a7bdca; font-size:12px; }
.checkout-trust li::before { content:"\2713"; margin-left:6px; color:#6fe3b4; font-weight:800; }

.order-progress { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:12px 0 4px; padding:0; list-style:none; counter-reset:step; }
.order-progress li { position:relative; padding:8px 34px 8px 10px; border:1px solid #294858; border-radius:10px; background:#0b151e; color:#8298a5; font-size:12px; font-weight:700; line-height:1.35; counter-increment:step; }
.order-progress li::before { content:counter(step); position:absolute; right:9px; top:50%; display:grid; place-items:center; width:18px; height:18px; margin-top:-9px; border-radius:50%; background:#1b2d39; color:#a7bdca; font-size:11px; }
.order-progress li[data-done] { border-color:#2f7a63; color:#d9fff1; }
.order-progress li[data-done]::before { content:"\2713"; background:linear-gradient(-135deg,#6fe3b4,#76d8f4); color:#04211a; }
.order-progress li[data-current] { border-color:#ffb457; color:#ffe2b8; }
.order-progress li[data-current]::before { background:#ffb457; color:#1b0e02; }
@media(max-width:520px) { .order-progress { grid-template-columns:1fr; } }

.order-buy-again { justify-self:start; margin-top:8px; min-height:38px; padding:8px 16px; font-size:13px; }

/* Game page: compare every product for one game. */
.license-compare { margin-top:22px; overflow:hidden; border:1px solid #31576a; border-radius:12px; background:#0b151e; }
.license-compare-title { margin:0; padding:13px 16px; border-bottom:1px solid #294858; background:linear-gradient(-90deg,#122838,#0d1a24); font-size:16px; letter-spacing:-.01em; }
.license-compare-scroll { overflow-x:auto; }
.license-compare table { width:100%; min-width:620px; border-collapse:collapse; font-size:13px; }
.license-compare th, .license-compare td { padding:11px 16px; border-top:1px solid #1d3542; text-align:right; vertical-align:top; }
.license-compare thead th { border-top:0; color:#8ce5d7; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.license-compare tbody th a { color:#f3fbff; font-weight:750; }
.license-compare tbody th a:hover, .license-compare tbody th a:focus-visible { color:#76d8f4; text-decoration:underline; }
.license-compare tbody th small { display:block; margin-top:2px; color:#8298a5; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.license-compare td { color:#bdd0db; }
.license-compare-prices { padding-bottom:5px !important; }
.license-compare-prices span { display:inline-block; margin:0 0 6px 6px; padding:2px 8px; border:1px solid #294858; border-radius:999px; background:#0f1d28; color:#d9f6ff; white-space:nowrap; }
.license-compare tbody tr:hover { background:#0f1e29; }

/* My orders: email an order again without signing in. */
.find-order { margin:28px 0 8px; padding:20px; border:1px solid #2c4a5c; border-radius:14px; background:linear-gradient(-160deg,#112433,#0d1822 60%); }
.find-order h2 { margin:0 0 4px; font-size:20px; letter-spacing:-.02em; }
.find-order > p { margin:0 0 12px; color:#a7bdca; font-size:14px; }
.find-order-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto; gap:12px; align-items:end; }
.find-order-form label { display:grid; gap:6px; font-size:13px; font-weight:700; }
.find-order-form input { min-height:44px; padding:10px 12px; border:1px solid #31576a; border-radius:10px; background:#0b151e; color:#eef5f9; font:inherit; }
.find-order-form input:focus-visible { outline:2px solid #76d8f4; outline-offset:1px; }
.find-order-form .button { min-height:44px; }
@media(max-width:700px) { .find-order-form { grid-template-columns:1fr; } }
@media(max-width:700px) {
  .license-compare table { min-width:0; }
  .license-compare thead { display:none; }
  .license-compare tbody tr { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; padding:12px 14px; border-top:1px solid #1d3542; }
  .license-compare tbody th, .license-compare tbody td { padding:0; border:0; }
  .license-compare-prices, .license-compare-delivery { grid-column:1/-1; }
  .license-compare-delivery::before { content:attr(data-label) ": "; color:#8298a5; font-weight:700; }
}

/* Supplier name on each product cover, in the supplier's colour. */
/* Sits on the bottom-right corner of the cover: pulled up by its own height plus the gap, so the card text does not move. */
.license-brand-badge { --brand:#5fd6f1; position:relative; z-index:2; display:inline-flex; align-items:center; align-self:flex-end; box-sizing:border-box; height:24px; margin:-32px auto 8px 8px; padding:0 9px 0 10px; border:1px solid var(--brand); border-radius:999px; background:#050b10e0; color:var(--brand); font-size:11px; font-weight:850; letter-spacing:.08em; line-height:1.2; text-transform:uppercase; box-shadow:0 4px 14px #0009,0 0 12px color-mix(in srgb,var(--brand) 45%,transparent); pointer-events:none; backdrop-filter:blur(4px); }
.license-brand-badge::before { content:""; flex:none; width:7px; height:7px; margin-left:6px; border-radius:50%; background:var(--brand); box-shadow:0 0 8px var(--brand); }
.license-brand-badge[data-brand=Spectra] { --brand:#8af0b1; }
.license-brand-badge[data-brand=Rie] { --brand:#ffd077; }
.license-brand-badge[data-brand=Vexel] { --brand:#c39bff; }
.license-brand-badge[data-brand=Limitless] { --brand:#ff5a68; }
.license-brand-badge[data-brand=Sensory] { --brand:#ff86cf; }
.license-brand-badge[data-brand=CyNickal] { --brand:#ffab5c; }
.license-brand-badge[data-brand=Polarity] { --brand:#86a8ff; }
.license-brand-badge[data-brand=Evo] { --brand:#c9c2ff; }
.license-brand-badge[data-brand=Poseidon] { --brand:#7cc4ff; }
.license-brand-badge[data-brand=STRONG] { --brand:#a78bfa; }
.license-brand-badge[data-brand=NextOptimizer] { --brand:#ff6b61; }
.license-brand-badge[data-brand=Blurred] { --brand:#ff5a5a; }
@media(max-width:600px) { .license-brand-badge { height:20px; margin:-26px auto 6px 6px; padding:0 7px 0 8px; font-size:9.5px; } .license-brand-badge::before { width:6px; height:6px; margin-left:5px; } }

/* Live Discord count: green pulse, real numbers from Discord. */
.discord-live { display:inline-flex; align-items:center; gap:6px; padding:2px 8px 2px 9px; border:1px solid #3ba55d66; border-radius:999px; background:#0d2a1c99; color:#9ff0c2; font-size:12px; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
.discord-live[hidden] { display:none; }
.discord-live::before { content:""; flex:none; width:7px; height:7px; border-radius:50%; background:#3ba55d; box-shadow:0 0 0 0 #3ba55d99; animation:discord-live-pulse 2s ease-out infinite; }
.discord-live--hero { margin-right:8px; }
@keyframes discord-live-pulse { 0% { box-shadow:0 0 0 0 #3ba55daa; } 70% { box-shadow:0 0 0 7px #3ba55d00; } 100% { box-shadow:0 0 0 0 #3ba55d00; } }
@media(prefers-reduced-motion:reduce) { .discord-live::before { animation:none; } }
@media(max-width:520px) { .site-announcement .discord-live { padding:1px 6px 1px 7px; font-size:11px; } .discord-live--hero { margin:4px 0 0; } }
.checkout-refund-note { margin:4px 0 0; color:#8fa5b2; font-size:11.5px; line-height:1.5; }
.checkout-refund-note a { color:#8ce5d7; text-decoration:underline; text-underline-offset:2px; }
.site-announcement a { flex-wrap:nowrap; white-space:nowrap; }
@media(max-width:520px) {
  .site-announcement .discord-live-members { display:none; }
  .home-trust .discord-live--hero { display:flex; width:max-content; margin:6px 0 0; }
}

/* Coupon code box at checkout, and the vouch offer on the receipt. */
.checkout-coupon { margin:12px var(--panel-pad, 20px) 0; padding:10px 14px; border:1px dashed #36556a; border-radius:12px; background:#0c151b; }
.checkout-coupon[hidden], .checkout-body--receipt .checkout-coupon { display:none; }
.checkout-coupon summary { cursor:pointer; color:#cfe3ee; font-size:14px; font-weight:700; }
.checkout-coupon.is-applied { border-style:solid; border-color:#f0c94a; }
.checkout-coupon-row { display:flex; gap:8px; margin-top:10px; }
.checkout-coupon-row input { flex:1; min-width:0; min-height:42px; padding:8px 12px; border:1px solid var(--line, #2c4452); border-radius:8px; color:var(--text, #fff); background:#080c10; font-family:ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing:.04em; text-transform:uppercase; }
.checkout-coupon-row input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.checkout-coupon-row input[readonly] { color:#ffe08a; }
.checkout-coupon-row .button { min-height:42px; padding:0 16px; }
.checkout-coupon .field-help { margin:8px 0 0; }
.checkout-coupon .field-help[data-tone="ok"] { color:#ffe08a; }
.checkout-coupon .field-help[data-tone="error"] { color:#ff8f8f; }
.vouch-offer, .checkout-refined .checkout-requirements > .vouch-offer { display:grid; justify-items:start; gap:8px; margin-top:16px; padding:16px 18px; border:1px solid #f0c94a; border-radius:14px; background:linear-gradient(-150deg,#2a2410,#12161a 70%); }
.vouch-offer strong { color:#ffe08a; font-size:17px; }
.vouch-offer p { margin:0; color:#d6dde2; }
.vouch-offer .text-link { color:var(--accent, #5fd6f1); font-size:13px; font-weight:600; }
#checkout-order-receipt .vouch-offer .button { margin:4px 0 0; }
/* Owner panel: vouch coupons. */
.owner-coupon-form { display:flex; flex-wrap:wrap; align-items:end; gap:10px; margin-bottom:16px; }
.owner-coupon-form label { display:grid; gap:6px; color:var(--text); font-size:13px; font-weight:700; }
.owner-coupon-form input { min-height:44px; padding:9px 12px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:#080c10; }
.owner-coupon-form input[type="number"] { width:90px; }
.owner-coupon-form .account-status { flex-basis:100%; margin:0; }
.owner-coupon-new { margin:0 0 16px; padding:14px 16px; border:1px solid #f0c94a; border-radius:12px; background:#17140a; }
.owner-coupon-new code { font-size:20px; color:#ffe08a; }
.owner-coupon-new textarea { width:100%; margin:8px 0; padding:10px; border:1px solid var(--line); border-radius:8px; color:var(--text); background:#080c10; font:inherit; resize:none; field-sizing:content; min-height:72px; }
.owner-coupon-list { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
.owner-coupon-list li { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; }
.owner-coupon-list code { color:#ffe08a; }
.owner-coupon-list small { color:var(--muted); }
.owner-coupon-list .button { margin-right:auto; min-height:34px; padding:0 12px; font-size:13px; }

/* Home: booster and vouch perks inside the Refer and Earn card (2026-10-25). */
.home-perks { display:flex; flex-wrap:wrap; gap:8px 10px; margin:14px 0 0; padding:0; list-style:none; }
.home-perks li { display:block; padding:7px 12px; border:1px solid #ff8ad94d; border-radius:999px; color:#d9e6ee; background:#2a1a3a99; font-size:14px; line-height:1.35; }
.home-perks li + li { border-color:#ffd0774d; background:#33291699; }
.home-perks strong { margin-left:4px; color:#ff9ce0; font-weight:800; }
.home-perks li + li strong { color:#ffd077; }
.home-perks a { color:#ffffff; text-decoration:underline; text-underline-offset:2px; }
.home-cta .home-perks-note { margin-top:8px; color:#8fa3b1; font-size:12.5px; }
@media (max-width:640px) { .home-perks li { border-radius:12px; } }
/* Home game tiles: supplier chips line up with the game name; starting price first, product count after it. */
.gl-suppliers { padding:0 4px; }
.gl-price { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; }
.gl-price strong:empty { display:none; }
.gl-price small { color:#9fb3c0; font-size:12px; font-weight:650; }
/* Home: the 8 game tiles fill two even rows of four instead of six plus two. */
@media (min-width:900px) { .gl-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:641px) and (max-width:899px) { .gl-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Static per-game pages at /game-licenses/<game>/ (src/game-seo-pages.js). */
.seo-game-crumbs {
  font-size: 13px;
  color: #7f93a3;
  margin-bottom: 18px;
}
.seo-game-crumbs a {
  color: var(--accent);
  text-decoration: none;
}
.seo-game-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 36px;
  align-items: center;
}
.seo-game-cover {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px -30px rgba(118, 216, 244, 0.55);
}
.seo-game-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.seo-game-product {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(-160deg, var(--surface-2), var(--surface));
}
.seo-game-product header {
  display: grid;
  gap: 6px;
}
/* Each product card shows the same picture as its store tile (owner, 2026-10-30: the text-only cards looked "boring and dull"). */
.seo-game-product {
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.seo-game-product:hover {
  border-color: #4d7c91;
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -24px rgba(118, 216, 244, 0.55);
}
.seo-game-product-media {
  position: relative;
  display: block;
  overflow: clip;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0b1620;
}
.seo-game-product-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.35s ease;
}
.seo-game-product:hover .seo-game-product-media img {
  transform: scale(1.04);
}
.seo-game-product-media .license-brand-badge {
  position: absolute;
  left: 8px;
  bottom: 8px;
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .seo-game-product,
  .seo-game-product-media img {
    transition: none;
  }
  .seo-game-product:hover,
  .seo-game-product:hover .seo-game-product-media img {
    transform: none;
  }
}
.seo-game-product h3 {
  margin: 0;
  font-size: 19px;
}
.seo-game-product .eyebrow {
  margin: 0;
}
.seo-game-product .button {
  margin-top: auto;
  justify-content: center;
}
.seo-game-status {
  justify-self: start;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(118, 216, 244, 0.12);
  color: var(--accent-bright);
}
.seo-game-status--available {
  background: rgba(74, 222, 128, 0.14);
  color: #86efac;
}
.seo-game-status--updating {
  background: rgba(250, 204, 21, 0.14);
  color: #fde68a;
}
.seo-game-status--unavailable {
  background: rgba(248, 113, 113, 0.14);
  color: #fca5a5;
}
.seo-game-plans {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.seo-game-plans li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #adc1cf;
  text-transform: capitalize;
}
.seo-game-plans strong {
  color: var(--text);
}
.seo-game-titles {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.seo-game-titles li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
}
.seo-game-faq details {
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
  max-width: 48rem;
}
.seo-game-faq summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--text);
}
.seo-game-faq p {
  margin: 10px 0 0;
  color: #adc1cf;
  line-height: 1.55;
}
.license-all-games {
  margin-top: 40px;
}
.license-all-games h2 {
  font-size: 20px;
  margin-bottom: 12px;
}
@media (max-width: 860px) {
  .seo-game-hero {
    grid-template-columns: 1fr;
  }
  .seo-game-cover {
    order: -1;
    max-width: 480px;
  }
}
/* Featured product on a game guide, e.g. Spectra 2PC AI on /gta6-dma/. */
.guide-spotlight-card {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 36px;
  align-items: start;
  padding: 28px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: radial-gradient(circle at 0 0, rgba(118, 216, 244, 0.12), transparent 55%), linear-gradient(-160deg, var(--surface-2), var(--surface));
}
.guide-spotlight-card h2 {
  margin: 6px 0 12px;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.2;
}
.guide-spotlight-card h3 {
  margin: 24px 0 0;
  font-size: 17px;
}
.guide-spotlight-card .seo-game-plans {
  max-width: 320px;
  margin-top: 18px;
}
.page-game-guide .eyebrow .seo-game-status {
  margin-right: 8px;
  letter-spacing: normal;
  text-transform: none;
  vertical-align: middle;
}
@media (max-width: 860px) {
  .guide-spotlight-card {
    grid-template-columns: 1fr;
    padding: 20px;
  }
}
/* /dma-for-beginners/ (src/dma-beginners-page.js) */
a.seo-beginner-game {
  color: inherit;
  text-decoration: none;
  overflow: clip;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
a.seo-beginner-game:hover,
a.seo-beginner-game:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.seo-beginner-game .seo-game-cover {
  box-shadow: none;
}
.seo-game-product > p {
  margin: 0;
  color: #adc1cf;
  line-height: 1.55;
}
.seo-beginner-steps {
  list-style: none;
  counter-reset: beginner-step;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
  max-width: 48rem;
}
.seo-beginner-steps li {
  counter-increment: beginner-step;
  position: relative;
  padding: 18px 72px 18px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(-160deg, var(--surface-2), var(--surface));
}
.seo-beginner-steps li::before {
  content: counter(beginner-step);
  position: absolute;
  right: 20px;
  top: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #080c10;
  background: linear-gradient(-135deg, #6ee8d1, #76d8f4);
}
.seo-beginner-steps h3 {
  margin: 0 0 6px;
  font-size: 18px;
}
.seo-beginner-steps p {
  margin: 0;
  color: #adc1cf;
  line-height: 1.55;
}
.seo-beginner-games {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
@media (max-width: 560px) {
  .seo-beginner-games {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .seo-beginner-games .seo-game-product {
    padding: 12px;
    gap: 10px;
  }
  .seo-beginner-games h3 {
    font-size: 16px;
  }
  .seo-beginner-games .seo-game-status {
    font-size: 11px;
    padding: 3px 8px;
  }
}

/* Game page header band (owner, 2026-10-30: "so much empty space ... add the call of duty media in the background").
   One compact band over the game's gameplay loop or blurred cover, the lead product beside the heading,
   and the product cards right below. The band's picture spans the full screen width; main clips sideways overflow. */
.seo-band {
  position: relative;
  isolation: isolate;
  padding-block: 26px 40px;
}
.seo-band-media {
  position: absolute;
  z-index: -1;
  inset-block: 0;
  right: 50%;
  width: 100vw;
  overflow: hidden;
  pointer-events: none;
  background: #080c10;
  transform: translateX(50%);
}
.seo-band-still {
  position: absolute;
  inset: -40px;
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  object-fit: cover;
  filter: blur(14px) saturate(1.3) brightness(0.72);
  opacity: 0.8;
}
.seo-band-reel {
  opacity: 0.92;
}
.seo-band-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(-180deg, #080c10 0%, #080c1000 14%, #080c1000 72%, #080c10 100%),
    linear-gradient(-90deg, #080c10f2 0%, #080c10d9 32%, #080c1080 58%, #080c1033 100%),
    radial-gradient(760px 420px at 88% 32%, #2dd4bf1c, transparent 70%);
}
.seo-band-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 36px;
  align-items: center;
}
.seo-band .seo-game-crumbs {
  margin-bottom: 12px;
}
.seo-band-copy .eyebrow {
  margin: 0;
}
.seo-band-copy h1 {
  margin: 6px 0 12px;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-shadow: 0 4px 26px #000000b3;
}
.seo-band-lead {
  max-width: 40rem;
  margin: 0;
  color: #d4e3ec;
  font-size: 16px;
  line-height: 1.55;
  text-shadow: 0 2px 14px #000000cc;
}
.seo-band-facts {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.seo-band-facts li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border: 1px solid #2c4a5a;
  border-radius: 999px;
  background: #0b1620cc;
  backdrop-filter: blur(6px);
  color: #e4f1f8;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.seo-band-facts .icon {
  width: 14px;
  height: 14px;
  color: var(--accent);
}
.seo-band .game-guide-actions {
  margin-top: 20px;
}
.seo-lead {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid #2c4a5a;
  border-radius: var(--radius);
  background: linear-gradient(-160deg, #0f1b25f2, #0b141cf2);
  box-shadow: 0 30px 70px -30px #000000, 0 0 0 1px #76d8f41a;
  backdrop-filter: blur(8px);
}
.seo-lead-media {
  position: relative;
  display: block;
  overflow: clip;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0b1620;
}
.seo-lead-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.seo-lead .eyebrow {
  margin: 4px 0 0;
}
.seo-lead h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}
.seo-lead-price {
  margin: 0;
  color: #adc1cf;
  font-size: 14px;
}
.seo-lead-price strong {
  color: #f1f8ff;
  font-size: 24px;
}
.seo-lead .button {
  justify-content: center;
}
/* The rest of the page is tighter too, so the cards sit right under the header. */
.page-seo-game .section-space {
  padding-block: 40px;
}
.page-seo-game .seo-products.section-space {
  padding-block: 8px 40px;
}
.seo-products > h2 {
  margin: 0;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.2;
}
@media (max-width: 860px) {
  .seo-band {
    padding-block: 16px 28px;
  }
  .seo-band-inner {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .seo-band-shade {
    background:
      linear-gradient(-180deg, #080c10d9 0%, #080c10b3 45%, #080c10f2 85%, #080c10 100%),
      radial-gradient(500px 320px at 80% 20%, #2dd4bf1a, transparent 70%);
  }
  .page-seo-game .section-space {
    padding-block: 32px;
  }
  /* The first product card right below shows the same picture, so the lead box stays a short strip on phones. */
  .seo-lead-media {
    display: none;
  }
}


/* Store extras (2026-10-25): header search, currency, Guides page, starter bundles,
   "Why buy from us", remote setup and footer socials. Loaded before ui-guardrails.css and checkout-polish.css. */

/* ---------- Header: search, currency ---------- */
.nav-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.header-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #2c4150;
  border-radius: 10px;
  color: #c5d4de;
  background: #0f1b25;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.header-tool:hover,
.header-tool:focus-visible,
.header-tool[aria-expanded="true"] {
  color: #fff;
  border-color: var(--accent);
  background: #13293a;
}
.header-tool .icon {
  width: 15px;
  height: 15px;
}
.currency-button .icon {
  width: 10px;
  height: 10px;
  transition: transform 0.2s ease;
}
.currency-button[aria-expanded="true"] .icon {
  transform: rotate(-180deg);
}
.header-search-phone {
  display: none;
}
.currency-picker {
  position: relative;
}
.currency-picker[hidden] {
  display: none;
}
.currency-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 10px);
  left: 0;
  width: 250px;
  padding: 14px;
  border: 1px solid #2d4250;
  border-radius: 14px;
  background: #0d171e;
  box-shadow: 0 24px 60px #000000b0, 0 0 30px #2dd4bf14;
}
.currency-menu[hidden] {
  display: none;
}
.currency-menu-title {
  margin: 0 0 8px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.currency-menu ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.currency-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #c5d4de;
  background: transparent;
  font: inherit;
  font-size: 14px;
  text-align: right;
  cursor: pointer;
}
.currency-menu button strong {
  min-width: 36px;
  color: #f1f8ff;
}
.currency-menu button:hover,
.currency-menu button:focus-visible {
  background: #13293a;
}
.currency-menu button[aria-pressed="true"] {
  border-color: #2dd4bf66;
  background: #2dd4bf14;
}
.currency-menu button[aria-pressed="true"] strong {
  color: #5eead4;
}
.currency-menu-note {
  margin: 10px 0 0;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.5;
}

.site-nav > .nav-link,
.nav-action > span {
  white-space: nowrap;
}
/* Smaller laptops: tighter spacing and a shorter sign-in button, so everything fits on one line. */
@media (min-width: 1200px) and (max-width: 1359px) {
  .site-nav {
    gap: 18px;
  }
  .nav-action-long {
    display: none;
  }
  .nav-action {
    margin-right: 0;
  }
}

/* Below 1200px the links move into the Menu button, like phones (same width as js/navigation.js). */
.nav-mini-profile {
  display: none;
}
@media (max-width: 1199px) {
  .ps-nav-inner {
    gap: 10px;
  }
  .ps-nav-inner > .ps-brand {
    margin-left: auto;
  }
  .header-search-phone {
    display: inline-flex;
  }
  .header-search-desktop {
    display: none;
  }
  .menu-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    color: var(--text);
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    font-size: 13px;
  }
  .menu-lines {
    width: 18px;
    height: 10px;
    border-top: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
  }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    right: 20px;
    left: 20px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 0 0 16px 16px;
    background: #10171dfc;
    box-shadow: 0 30px 50px #0008;
  }
  .site-nav.open {
    display: flex;
  }
  .site-nav > .nav-link {
    padding: 16px;
  }
  .site-nav .nav-tools {
    padding: 8px 16px;
  }
  .site-nav .nav-action {
    margin: 14px 0 0;
  }
  .nav-mini-profile:not([hidden]) {
    display: grid;
    margin-left: -4px;
    border-radius: 50%;
  }
  .nav-mini-profile .nav-avatar {
    width: 40px;
    height: 40px;
    box-shadow: 0 0 0 1px #76d8f466;
  }
  .currency-menu {
    right: 0;
    left: auto;
  }
}

/* ---------- Search dialog ---------- */
.site-search {
  width: min(760px, calc(100vw - 24px));
  max-height: min(720px, calc(100dvh - 48px));
  margin: max(40px, 7vh) auto auto;
  padding: 0;
  overflow: hidden;
  border: 1px solid #2d4250;
  border-radius: 20px;
  color: var(--text);
  background:
    radial-gradient(120% 60% at 0% 0%, #2dd4bf14, transparent 60%),
    radial-gradient(90% 50% at 100% 0%, #76d8f412, transparent 55%),
    #0d171e;
  box-shadow: 0 40px 90px #000000c0, 0 0 0 1px #ffffff08 inset, 0 0 60px #2dd4bf24;
}
.site-search::backdrop {
  background: #04080ccc;
  backdrop-filter: blur(8px);
}
.site-search[open] {
  animation: search-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes search-in {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
}
.site-search-box {
  display: flex;
  flex-direction: column;
  max-height: inherit;
  container-type: inline-size;
}
.site-search-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 0;
}
.site-search-field {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid #29404f;
  border-radius: 14px;
  background: #0b1620;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.site-search-field:focus-within {
  border-color: #2dd4bf;
  box-shadow: 0 0 0 3px #2dd4bf2e, 0 0 24px #2dd4bf1f;
}
.site-search-field .icon {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  color: #5eead4;
}
.site-search-field input {
  flex: 1;
  min-width: 0;
  height: 50px;
  border: 0;
  outline: 0;
  color: #f1f8ff;
  background: transparent;
  font: inherit;
  font-size: 16px;
  appearance: none;
}
.site-search-field input::placeholder {
  color: #7d93a3;
}
.site-search-field input::-webkit-search-cancel-button {
  appearance: none;
}
.site-search-close {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid #2c4150;
  border-radius: 14px;
  color: #c5d4de;
  background: #0f1b25;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.site-search-close:hover,
.site-search-close:focus-visible {
  color: #fff;
  border-color: var(--accent);
}
.site-search-body {
  min-height: 0;
  padding: 0 16px 14px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #2c4150 transparent;
}
.site-search-label {
  margin: 16px 4px 10px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

/* Popular games: big covers */
.site-search-games {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-search-game {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: clip;
  border: 1px solid #ffffff14;
  border-radius: 14px;
  color: inherit;
  background: linear-gradient(-180deg, #112330, #0d1922);
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.site-search-game img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.35s ease, filter 0.35s ease;
}
.site-search-game-copy {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2px;
  padding: 9px 12px 11px;
  border-top: 1px solid #ffffff0f;
  background: inherit;
}
.site-search-game-copy strong {
  overflow: hidden;
  color: #f1f8ff;
  font-size: 14px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-search-game-copy small {
  color: #6ee8d1;
  font-size: 12px;
  font-weight: 700;
}
.site-search-game:hover,
.site-search-game:focus-visible {
  outline: 0;
  border-color: #2dd4bf;
  box-shadow: 0 12px 30px #0009, 0 0 0 1px #2dd4bf, 0 0 26px #2dd4bf40;
  transform: translateY(-2px);
}
.site-search-game:hover img,
.site-search-game:focus-visible img {
  filter: saturate(1.15);
  transform: scale(1.06);
}

/* Result rows */
.site-search-results {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-search-result {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 8px 8px 12px;
  border: 1px solid transparent;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s;
}
.site-search-result:hover,
.site-search-result:focus-visible {
  outline: 0;
  border-color: #2dd4bf59;
  background: linear-gradient(-90deg, #2dd4bf1a, #13293a 45%);
}
.site-search-thumb {
  position: relative;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 96px;
  height: 54px;
  overflow: clip;
  border: 1px solid #ffffff14;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 35%, #1d3a4a, #0c1822 75%);
}
.site-search-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.site-search-thumb.is-icon {
  border-color: #2dd4bf33;
  background: linear-gradient(-135deg, #14f19530, #0f1b25 55%, #76d8f426);
}
.site-search-thumb.is-icon .icon {
  width: 22px;
  height: 22px;
  color: #5eead4;
  filter: drop-shadow(0 0 8px #2dd4bf80);
}
.site-search-result:hover .site-search-thumb,
.site-search-result:focus-visible .site-search-thumb {
  border-color: #2dd4bf66;
}
.site-search-copy {
  display: grid;
  flex: 1;
  gap: 3px;
  min-width: 0;
}
.site-search-copy strong {
  overflow: hidden;
  color: #f1f8ff;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-search-copy mark {
  border-radius: 3px;
  color: #6ee8d1;
  background: none;
}
.site-search-copy small {
  display: flex;
  gap: 8px;
  min-width: 0;
  color: #94a3b8;
  font-size: 13px;
}
.site-search-copy small span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-search-price {
  flex-shrink: 0;
  color: #6ee8d1;
  font-weight: 700;
}
.site-search-price + span::before {
  content: "·";
  margin-left: 8px;
  color: #5b7284;
}
.site-search-kind {
  flex-shrink: 0;
  padding: 3px 9px;
  border: 1px solid #2dd4bf40;
  border-radius: 999px;
  color: #5eead4;
  background: #2dd4bf12;
  font-size: 11px;
  font-weight: 700;
}
.site-search-result[data-kind="hardware"] .site-search-kind,
.site-search-result[data-kind="starter-bundle"] .site-search-kind,
.site-search-result[data-kind="firmware"] .site-search-kind,
.site-search-result[data-kind="xma"] .site-search-kind,
.site-search-result[data-kind="rdma"] .site-search-kind {
  border-color: #76d8f440;
  color: #8fe1f7;
  background: #76d8f412;
}
.site-search-result[data-kind="service"] .site-search-kind,
.site-search-result[data-kind="trial"] .site-search-kind,
.site-search-result[data-kind="accounts"] .site-search-kind {
  border-color: #a78bfa4d;
  color: #c4b5fd;
  background: #a78bfa14;
}
.site-search-result[data-kind="guide"] .site-search-kind,
.site-search-result[data-kind="page"] .site-search-kind {
  border-color: #fcd34d40;
  color: #fde68a;
  background: #fcd34d0f;
}
.site-search-go {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: #5eead4;
  opacity: 0;
  transform: translateX(4px);
  transition: opacity 0.15s, transform 0.15s;
}
.site-search-result:hover .site-search-go,
.site-search-result:focus-visible .site-search-go {
  opacity: 1;
  transform: none;
}
.site-search-empty {
  margin: 14px 20px 18px;
  color: #a9c0cd;
  font-size: 14px;
}
.site-search-empty a {
  color: var(--accent);
}
.site-search-foot {
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 10px 20px;
  border-top: 1px solid #1f3240;
  color: #94a3b8;
  background: #0a131a;
  font-size: 12px;
}
.site-search-foot kbd {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  margin-left: 4px;
  padding: 0 6px;
  place-items: center;
  border: 1px solid #2c4150;
  border-bottom-width: 2px;
  border-radius: 6px;
  color: #c5d4de;
  background: #0f1b25;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
}
html.search-open {
  overflow: hidden;
}
@container (max-width: 560px) {
  .site-search-games {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .site-search-result {
    gap: 12px;
  }
  .site-search-thumb {
    width: 76px;
    height: 46px;
  }
  .site-search-kind,
  .site-search-go {
    display: none;
  }
}
@media (max-width: 640px), (hover: none) {
  .site-search-foot {
    display: none;
  }
}

/* ---------- Home: starter bundles ---------- */
.bundle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bundle-card a {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 16px 16px 18px;
  overflow: hidden;
  border: 1px solid #305a6a;
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  background:
    radial-gradient(ellipse at 50% 0, #2dd4bf26, transparent 65%),
    linear-gradient(-160deg, #112a37, #0c141b);
  box-shadow: 0 8px 26px #0003;
  transition: transform 0.25s var(--ease), border-color 0.2s, box-shadow 0.25s;
}
.bundle-card a:hover,
.bundle-card a:focus-visible {
  transform: translateY(-4px);
  border-color: #5eead4;
  box-shadow: 0 16px 34px #04080c88, 0 0 28px #2dd4bf26;
}
.bundle-art {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  margin-bottom: 4px;
}
.bundle-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 22px #0009);
  transition: transform 0.4s var(--ease);
}
.bundle-card a:hover .bundle-art img {
  transform: scale(1.04) rotate(1deg);
}
.bundle-save {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  color: #04261a;
  background: linear-gradient(-135deg, #14f195, #5eead4);
  font-size: 12px;
  font-weight: 750;
  box-shadow: 0 6px 18px #14f19533;
}
.bundle-name {
  color: #f1f8ff;
  font-size: 18px;
  font-weight: 700;
}
.bundle-desc {
  color: #a9c0cd;
  font-size: 14px;
  line-height: 1.5;
}
.bundle-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #24404f;
}
.bundle-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.bundle-price strong {
  color: #5eead4;
  font-size: 22px;
}
.bundle-price s {
  color: #7f98a8;
  font-size: 14px;
}
.bundle-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 650;
}
.bundle-go .icon {
  transition: transform 0.3s var(--ease);
}
.bundle-card a:hover .bundle-go .icon {
  transform: translateX(-5px);
}

/* ---------- Home: why buy from us ---------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.why-card {
  position: relative;
  padding: 24px;
  overflow: hidden;
  border: 1px solid #24404f;
  border-radius: var(--radius);
  background: radial-gradient(ellipse at 100% 0, #14f19514, transparent 60%), #0e1c29;
  transition: border-color 0.2s, box-shadow 0.25s;
}
.why-card:hover {
  border-color: #2dd4bf88;
  box-shadow: 0 0 26px #2dd4bf1c;
}
.why-mark {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border: 1px solid #2dd4bf66;
  border-radius: 12px;
  color: #5eead4;
  background: #2dd4bf17;
}
.why-mark .icon {
  width: 20px;
  height: 20px;
}
.why-card h3 {
  margin: 0 0 8px;
  color: #f1f8ff;
  font-size: 17px;
}
.why-card p {
  margin: 0;
  color: #a9c0cd;
  font-size: 14px;
  line-height: 1.6;
}
.why-card a {
  color: var(--accent);
}

@media (max-width: 999px) {
  .why-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 639px) {
  .why-grid {
    grid-template-columns: 1fr;
  }
  .bundle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .bundle-card a {
    padding: 10px 12px 14px;
  }
  .bundle-save {
    top: 10px;
    right: 10px;
    font-size: 11px;
  }
  .bundle-name {
    font-size: 16px;
  }
  .bundle-desc {
    font-size: 13px;
  }
  .bundle-go {
    display: none;
  }
  .bundle-price strong {
    font-size: 19px;
  }
}

/* ---------- Products: remote setup ---------- */
.remote-setup-card {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
  gap: 28px;
  padding: 32px;
  overflow: clip;
  border: 1px solid #2d5566;
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse at 0 0, #14f1951a, transparent 55%),
    linear-gradient(-140deg, #12283a, #0e1720);
}
.remote-setup-copy h2 {
  margin: 6px 0 12px;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
}
.remote-setup-copy > p {
  color: #a9c0cd;
}
.remote-setup-copy .benefit-list {
  flex-direction: column;
  margin-top: 18px;
}
.remote-setup-copy .benefit-list li {
  font-size: 15px;
}
.remote-setup-note {
  margin: 18px 0 0;
  color: #94a3b8;
  font-size: 14px;
}
.remote-setup-price {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  border: 1px solid #356078;
  border-radius: 14px;
  background: linear-gradient(-140deg, #1b3545, #12202c 55%, #0e1720);
}
.remote-setup-amount {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}
.remote-setup-amount strong {
  color: #5eead4;
  font-size: 56px;
  font-weight: 650;
  letter-spacing: -0.05em;
}
.remote-setup-amount span {
  color: #b3c8d7;
}
.remote-setup-price .pricing-note {
  margin: 0 0 8px;
}
@media (max-width: 839px) {
  .remote-setup-card {
    grid-template-columns: 1fr;
    padding: 24px;
  }
}

/* ---------- Products: woofer service ---------- */
.woofer-card {
  display: grid;
  gap: 28px;
  padding: 32px;
  overflow: clip;
  border: 1px solid #2d5566;
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse at 100% 0, #22d3ee1f, transparent 55%),
    radial-gradient(ellipse at 0 100%, #14f19514, transparent 50%),
    linear-gradient(-140deg, #12283a, #0e1720);
}
.woofer-banner img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #356078;
  border-radius: 14px;
  box-shadow: 0 18px 50px #00000059, 0 0 40px #2dd4bf1f;
}
.woofer-body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr);
  gap: 28px;
}
.woofer-copy h2 {
  margin: 6px 0 12px;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.1;
}
.woofer-copy > p {
  color: #a9c0cd;
}
.woofer-copy .benefit-list {
  flex-direction: column;
  margin-top: 18px;
}
.woofer-copy .benefit-list li {
  font-size: 15px;
}
.woofer-side {
  display: grid;
  gap: 14px;
  align-content: start;
}
.woofer-box {
  padding: 18px 20px;
  border: 1px solid #29404f;
  border-radius: 14px;
  background: #0f1b25;
}
.woofer-box h3 {
  margin: 0 0 10px;
  font-size: 16px;
}
.woofer-box ul {
  margin: 0;
  padding-right: 18px;
  color: #c4d5df;
  font-size: 14px;
}
.woofer-box ul li + li {
  margin-top: 4px;
}
.woofer-box .woofer-marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0;
  list-style: none;
}
.woofer-marks li + li {
  margin-top: 0;
}
.woofer-mark-text {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #356078;
  border-radius: 8px;
  color: #f1f8ff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.woofer-muted {
  margin: 10px 0 0;
  color: #94a3b8;
  font-size: 13px;
}
.woofer-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.woofer-tier {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border: 1px solid #356078;
  border-radius: 14px;
  background: linear-gradient(-140deg, #1b3545, #12202c 55%, #0e1720);
}
.woofer-tier--new {
  border-color: #5eead4;
  box-shadow: 0 0 0 1px #5eead433, 0 0 34px #2dd4bf26;
}
.woofer-tier-head {
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.woofer-tier-kind {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #76d8f4;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.woofer-tier-kind .icon {
  width: 14px;
  height: 14px;
}
.woofer-new {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(-90deg, #14f195, #2dd4bf);
  color: #062016;
  font-size: 12px;
  font-weight: 800;
}
.woofer-tier h3 {
  margin: 0;
  font-size: 20px;
}
.woofer-tier-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}
.woofer-tier-price strong {
  color: #5eead4;
  font-size: 40px;
  font-weight: 650;
  letter-spacing: -0.04em;
}
.woofer-tier-price span {
  color: #b3c8d7;
}
.woofer-tier-note {
  flex: 1;
  margin: 0 0 6px;
  color: #a9c0cd;
  font-size: 14px;
}
.woofer-tier .button {
  justify-content: center;
}
.woofer-manual {
  display: flex;
  gap: 14px;
  padding: 18px 20px;
  border: 1px solid #5c4a1f;
  border-radius: 14px;
  background: #1d1a10;
  color: #e8dcc0;
}
.woofer-manual > .icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: #f0c94a;
}
.woofer-manual strong {
  color: #fbe7a8;
}
.woofer-manual ul {
  margin: 8px 0;
  padding-right: 18px;
  font-size: 14px;
}
.woofer-manual p {
  margin: 0;
  font-size: 14px;
}
@media (max-width: 839px) {
  .woofer-card {
    padding: 24px;
  }
  .woofer-body {
    grid-template-columns: 1fr;
  }
}

/* ---------- Guides page ---------- */
.guides-hero {
  padding-bottom: 8px;
}
.guides-hero h1 {
  margin: 6px 0 10px;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.08;
}
.guides-hero > p:last-child {
  max-width: 640px;
  color: #a9c0cd;
}
.guides-body {
  display: grid;
  gap: 40px;
  padding-block: 24px 56px;
}
.guides-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.guide-card {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 16px 18px;
  border: 1px solid #24404f;
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  background: linear-gradient(-160deg, #10222e, #0c141b);
  transition: transform 0.25s var(--ease), border-color 0.2s, box-shadow 0.25s;
}
.guide-card:hover,
.guide-card:focus-visible {
  transform: translateY(-3px);
  border-color: #5eead4;
  box-shadow: 0 12px 28px #04080c88, 0 0 22px #2dd4bf1c;
}
.guide-card-mark {
  display: inline-grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #2dd4bf55;
  border-radius: 10px;
  color: #5eead4;
  background: #2dd4bf14;
}
.guide-card-mark .icon {
  width: 18px;
  height: 18px;
}
.guide-card-copy {
  display: grid;
  flex: 1;
  gap: 3px;
  min-width: 0;
}
.guide-card-copy strong {
  color: #f1f8ff;
}
.guide-card-copy small {
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.5;
}
.guide-card > .icon {
  flex-shrink: 0;
  color: var(--accent);
}

/* ---------- Footer socials ---------- */
.footer-socials {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.footer-social {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #2c4150;
  border-radius: 10px;
  color: #c5d4de;
  background: #0f1b25;
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.footer-social:hover,
.footer-social:focus-visible {
  color: #fff;
  border-color: var(--accent);
  transform: translateY(-2px);
}
.footer-social .icon {
  width: 17px;
  height: 17px;
}

/* ---------- Checkout: total in the buyer's currency ---------- */
.order-review-approx {
  margin: 6px 0 0;
  color: #94a3b8;
  font-size: 12px;
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  .site-search[open] {
    animation: none;
  }
  .site-search-game,
  .site-search-game img,
  .site-search-go {
    transition: none;
  }
}

/* ---------- Products: Private RDMA ---------- */
.prdma-card {
  position: relative;
  display: grid;
  gap: 28px;
  padding: 32px;
  overflow: clip;
  border: 1px solid #2f6a73;
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse at 85% -10%, #2dd4bf33, transparent 55%),
    radial-gradient(ellipse at -10% 110%, #14f1951c, transparent 50%),
    radial-gradient(ellipse at 50% 50%, #76d8f40d, transparent 70%),
    linear-gradient(-150deg, #10283a, #0c1822 60%, #0b141c);
  box-shadow: 0 0 0 1px #5eead414, 0 30px 80px #0000005c, 0 0 60px #2dd4bf14;
}
.prdma-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(-90deg, transparent, #14f195, #2dd4bf, #76d8f4, transparent);
  opacity: 0.85;
}
.prdma-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 1fr);
  gap: 32px;
  align-items: center;
}
.prdma-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.prdma-new {
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(-90deg, #14f195, #2dd4bf);
  color: #062016;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.prdma-copy h2 {
  margin: 8px 0 14px;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.08;
}
.prdma-gradient {
  white-space: nowrap;
  background: linear-gradient(-90deg, #14f195, #2dd4bf 45%, #76d8f4);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.prdma-copy > p {
  color: #a9c0cd;
  font-size: 16px;
}
.prdma-copy .benefit-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px 18px;
  margin-top: 18px;
}
.prdma-copy .benefit-list li {
  font-size: 15px;
}
.prdma-visual {
  display: grid;
  gap: 12px;
  padding: 22px;
  border: 1px solid #2f5566;
  border-radius: 18px;
  background: linear-gradient(-160deg, #0f2231, #0b1620);
  box-shadow: inset 0 0 40px #2dd4bf12;
}
.prdma-node {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid #29404f;
  border-radius: 14px;
  background: #0f1b25;
}
.prdma-node .prdma-tile {
  grid-row: span 2;
}
.prdma-node strong {
  color: #f1f8ff;
  font-size: 15px;
}
.prdma-node span:last-child {
  color: #94a3b8;
  font-size: 13px;
}
.prdma-node--main {
  border-color: #3a7d80;
  box-shadow: 0 0 24px #2dd4bf1f;
}
.prdma-tile {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid #356078;
  border-radius: 12px;
  background: linear-gradient(-140deg, #173a47, #0f2230);
  color: #5eead4;
}
.prdma-tile .icon {
  width: 20px;
  height: 20px;
}
.prdma-link {
  display: grid;
  justify-items: center;
  gap: 6px;
}
.prdma-link-line {
  position: relative;
  width: 3px;
  height: 46px;
  overflow: clip;
  border-radius: 3px;
  background: linear-gradient(#2dd4bf55, #76d8f455);
}
.prdma-link-line i {
  position: absolute;
  right: -1px;
  width: 5px;
  height: 10px;
  border-radius: 3px;
  background: #5eead4;
  box-shadow: 0 0 10px #5eead4;
  top: -12px;
}
.prdma-link-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #76d8f4;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.prdma-link-label .icon {
  width: 13px;
  height: 13px;
}
@media (prefers-reduced-motion: no-preference) {
  .prdma-link-line i {
    animation: prdma-flow 1.8s linear infinite;
  }
  .prdma-link-line i:nth-child(2) {
    animation-delay: 0.6s;
  }
  .prdma-link-line i:nth-child(3) {
    animation-delay: 1.2s;
  }
}
@keyframes prdma-flow {
  to {
    transform: translateY(70px);
  }
}
.prdma-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 4px;
}
.prdma-stats span {
  display: grid;
  gap: 2px;
  padding: 10px 8px;
  border: 1px solid #243a48;
  border-radius: 12px;
  background: #0b1620;
  color: #94a3b8;
  font-size: 12px;
  text-align: center;
}
.prdma-stats strong {
  color: #5eead4;
  font-size: 20px;
  line-height: 1.1;
}
.prdma-from {
  margin: 4px 0 0;
  color: #a9c0cd;
  font-size: 15px;
  text-align: center;
}
.prdma-from strong {
  color: #f1f8ff;
  font-size: 22px;
}
.prdma-nics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 18px;
}
.prdma-nic,
.prdma-driver {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 22px;
  border: 1px solid #356078;
  border-radius: 16px;
  background: linear-gradient(-150deg, #173244, #10202c 55%, #0d1821);
  container-type: inline-size;
}
.prdma-nic--8126 {
  border-color: #3f7f8f;
  box-shadow: 0 0 34px #76d8f41a;
}
.prdma-nic-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.prdma-nic-head > div {
  flex: 1;
  min-width: 0;
}
.prdma-nic-head h3 {
  margin: 0;
  font-size: 19px;
}
.prdma-nic-head p {
  margin: 2px 0 0;
  color: #94a3b8;
  font-size: 13px;
}
.prdma-speed {
  flex-shrink: 0;
  padding: 4px 10px;
  border: 1px solid #2dd4bf66;
  border-radius: 999px;
  background: #2dd4bf1a;
  color: #5eead4;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.prdma-plans {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.prdma-plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  border: 1px solid #29404f;
  border-radius: 12px;
  background: #0f1b25;
}
.prdma-plan--featured {
  border-color: #2dd4bf80;
  background: linear-gradient(-90deg, #12302f, #0f1b25 70%);
}
.prdma-plan-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.prdma-plan-info strong {
  color: #f1f8ff;
  font-size: 15px;
}
.prdma-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: linear-gradient(-90deg, #14f195, #2dd4bf);
  color: #062016;
  font-size: 11px;
  font-weight: 800;
}
.prdma-plan-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 0;
  white-space: nowrap;
}
.prdma-plan-price strong {
  color: #f1f8ff;
  font-size: 18px;
}
.prdma-plan-price span {
  color: #94a3b8;
  font-size: 13px;
}
.prdma-plan .button {
  min-height: 40px;
  padding: 8px 14px;
}
@container (max-width: 380px) {
  .prdma-plan {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .prdma-plan .button {
    grid-column: 1 / -1;
    justify-content: center;
  }
}
.prdma-bottom {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
}
.prdma-driver {
  border-color: #5eead4;
  box-shadow: 0 0 0 1px #5eead433, 0 0 34px #2dd4bf26;
}
.prdma-driver > p {
  margin: 0;
  color: #a9c0cd;
  font-size: 14px;
}
.prdma-driver .woofer-tier-kind {
  margin-bottom: 2px;
}
.prdma-driver-price strong {
  font-size: 28px;
}
.prdma-bottom .woofer-box .button {
  margin-top: 12px;
}
@media (max-width: 899px) {
  .prdma-hero {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 599px) {
  .prdma-card {
    padding: 20px;
  }
  .prdma-nic,
  .prdma-driver {
    padding: 16px;
  }
}

.media-section { min-width:0; }
.media-spotlight { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); overflow:hidden; border:1px solid #34545e; border-radius:20px; background:radial-gradient(ellipse at 100% 0,#174c473d,transparent 70%),#101e29; margin-bottom:28px; }
.media-feature-art { position:relative; display:grid; align-items:center; min-width:0; background:#060d14; overflow:hidden; }
.media-feature-art>img { width:100%; height:100%; max-height:370px; object-fit:contain; display:block; }
.media-feature-badge { display:inline-flex; align-items:center; gap:8px; position:absolute; top:16px; right:16px; padding:7px 10px; background:#07111ded; border:1px solid #537980; border-radius:7px; color:#e4fcf6; font-size:11px; font-weight:750; letter-spacing:.05em; }
.media-feature-badge .icon { width:16px; height:16px; }
.media-feature-copy { padding:clamp(20px,3vw,34px); display:flex; flex-direction:column; justify-content:center; min-width:0; }
.media-eyebrow { margin:0 0 12px; color:#82e7d7; text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:.12em; }
.media-feature-copy h3 { margin:0 0 12px; font-size:clamp(22px,2.5vw,32px); letter-spacing:-.045em; line-height:1.2; text-wrap:balance; }
.media-feature-copy>p:not(.media-eyebrow) { color:#a7bdcb; margin:0; font-size:14px; line-height:1.65; max-width:42ch; }
.media-feature-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:22px; }
.media-feature-watch { display:inline-flex; align-items:center; gap:9px; background:#80ecd5; color:#071c20; border:0; border-radius:9px; min-height:44px; padding:11px 17px; font:inherit; font-size:13px; font-weight:850; cursor:pointer; }
.media-feature-watch .icon { width:20px; height:20px; }
.media-feature-navigation { display:flex; align-items:center; justify-content:space-between; border-top:1px solid #2b4350; margin-top:24px; padding-top:14px; color:#90a9b9; font-size:12px; font-variant-numeric:tabular-nums; }
.media-feature-navigation>div { display:flex; gap:8px; }
.media-feature-navigation button,.media-player-navigation button { border:1px solid #36505f; border-radius:8px; background:#142b37; color:#d9edf5; min-height:44px; min-width:44px; font:inherit; cursor:pointer; }
.media-feature-navigation button { font-size:20px; }
.media-section button:disabled { opacity:.35; cursor:default; }
.media-rail-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:14px; }
.media-rail-heading h3 { margin:0; font-size:16px; letter-spacing:-.025em; }
.media-rail-tools { display:flex; align-items:center; gap:16px; color:#91acbb; font-size:12px; }
.media-player-navigation { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 20px; border-bottom:1px solid #294451; }
.media-player-navigation button { padding:8px 12px; font-size:12px; }
.media-player-navigation>span { color:#9fb9c9; font-size:12px; }
.media-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; }
.media-heading h1,.media-heading h2 { margin:0 0 8px; color:var(--text); font-size:clamp(28px,3vw,40px); letter-spacing:-.045em; line-height:1.12; }
.media-heading p { margin:0; color:var(--muted); font-size:15px; }
.media-all { display:inline-flex; align-items:center; gap:9px; flex-shrink:0; color:#8bead9; font-weight:750; font-size:14px; }
.media-toolbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:18px; }
.media-filters { display:flex; flex-wrap:nowrap; gap:8px; width:100%; min-width:0; overflow-x:auto; padding:4px 2px 10px; scrollbar-width:thin; scrollbar-color:#385564 transparent; }
.media-filters button { flex:0 0 auto; }
.media-toolbar { min-width:0; }
.media-source { margin:-7px 0 14px; color:#93aebe; font-size:11px; }
.media-player-source { margin:0; padding:10px 20px 0; color:#9db7c8; font-size:12px; }
.media-filters button,.media-arrows button { min-height:44px; border:1px solid #2b4554; background:#101f2a; color:#b5cbd6; border-radius:10px; padding:10px 15px; font:inherit; font-size:13px; font-weight:750; cursor:pointer; }
.media-filters button[aria-pressed="true"] { border-color:#6ee8d1; color:#071b1b; background:#6ee8d1; }
.media-filters button { display:flex; align-items:center; gap:10px; text-align:right; padding:7px 7px 7px 12px; }
.media-filters button>img { width:56px; height:36px; object-fit:cover; border-radius:5px; }
.media-filters button>.icon { width:30px; height:30px; margin:0 7px; }
.media-filters button small { display:block; opacity:.75; font-size:10px; font-weight:500; margin-top:2px; }
.media-card.is-featured { border-color:#70d6c3; box-shadow:inset 0 -2px #70d6c3; }
.media-arrows { display:flex; gap:8px; flex-shrink:0; }
.media-arrows button { width:44px; padding:0; font-size:21px; }
.media-track { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 40px)/3); gap:20px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:#385564 transparent; padding:2px 2px 14px; }
.media-card { min-width:0; scroll-snap-align:start; overflow:clip; border:1px solid #284451; border-radius:16px; background:linear-gradient(-145deg,#142b39,#0c1923); }
.media-card[hidden] { display:none; }
.media-watch { display:block; position:relative; aspect-ratio:16/9; background:#080f18; overflow:hidden; }
.media-watch img { display:block; width:100%; height:100%; object-fit:contain; }
.media-play { position:absolute; top:50%; right:50%; transform:translate(50%,-50%); display:grid; place-items:center; width:54px; height:44px; background:#09151de8; border:1px solid #86e8d577; border-radius:12px; color:#8bead9; }
.media-play .icon { width:27px; height:27px; }
.media-card-copy { padding:17px 18px 19px; }
.media-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 0 9px; font-size:12px; font-weight:700; color:#96d6e4; }
.media-meta span { color:#a9becd; font-weight:500; }
.media-card h3 { font-size:17px; line-height:1.4; margin:0 0 17px; letter-spacing:-.025em; }
.media-card h3 a { color:#f1f8ff; text-decoration:none; }
.media-product { display:inline-flex; align-items:center; gap:10px; color:#8bead9; font-size:13px; font-weight:750; }
.media-product .icon { width:14px; height:14px; }
.media-section :is(button,a):focus-visible,.media-track:focus-visible { outline:2px solid #6ee8d1; outline-offset:4px; }
.media-library { padding-top:48px; }
.media-library .media-track { grid-auto-flow:row; grid-template-columns:repeat(3,minmax(0,1fr)); overflow:visible; }
.media-dialog { width:min(960px,calc(100% - 32px)); max-height:90dvh; overflow:auto; padding:0; border:1px solid #385766; border-radius:16px; background:#0d1923; color:#f1f8ff; }
.media-dialog::backdrop { background:#02070de8; backdrop-filter:blur(8px); }
.media-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; }
.media-dialog-head h2 { font-size:17px; margin:0; }
.media-dialog-head button { display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; border:1px solid #385766; border-radius:10px; background:#152d3b; color:#f1f8ff; cursor:pointer; }
.media-player { aspect-ratio:16/9; background:#080f18; }
.media-player iframe { display:block; border:0; width:100%; height:100%; }
.media-player video { display:block; width:100%; height:100%; object-fit:contain; }
.media-dialog-foot { display:flex; justify-content:space-between; flex-wrap:wrap; gap:18px; padding:20px; }
.media-dialog-foot a { display:inline-flex; align-items:center; gap:9px; color:#8bead9; font-size:14px; font-weight:700; }
@media(prefers-reduced-motion:no-preference) { .media-card { transition:transform .22s ease,border-color .22s ease; } .media-card:hover { transform:translateY(-2px); border-color:#61cdbb; } .media-play { transition:background .2s ease; } .media-watch:hover .media-play { background:#184b4b; } }
@media(max-width:1024px) { .media-track { grid-auto-columns:calc((100% - 20px)/2.25); } .media-library .media-track { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .media-heading { align-items:flex-start; gap:12px; flex-direction:column; } .media-heading p { max-width:32ch; font-size:14px; } .media-toolbar { align-items:flex-start; } .media-filters { gap:6px; } .media-filters button { padding:9px 11px; font-size:12px; } .media-arrows { display:none; } .media-track { grid-auto-columns:86%; gap:12px; } .media-library .media-track { grid-template-columns:1fr; } .media-card-copy { padding:16px; } .media-library { padding-top:32px; } }
@media(max-width:760px) { .media-spotlight { grid-template-columns:1fr; border-radius:14px; } .media-feature-art { aspect-ratio:16/9; } .media-feature-copy { padding:20px; } .media-feature-copy>p:not(.media-eyebrow) { display:none; } .media-feature-actions { margin-top:8px; } .media-feature-navigation { margin-top:16px; padding-top:10px; } .media-filters { display:flex; width:100%; } .media-filters button { min-width:0; padding:7px; font-size:11px; } .media-filters button>img { width:42px; height:32px; } .media-toolbar { gap:8px; } .media-feature-badge { top:10px; right:10px; } }

/* "Which firmware do I need?" on /products/ (src/components/firmware-compare.js).
   Wide boxes show all six options; below 880px the two menus pick which two to show. */

.fw-compare-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 10px 16px;
  border: 1px solid #2dd4bf59;
  border-radius: 999px;
  color: #bff7ec;
  background: linear-gradient(-135deg, #14f19514, #2dd4bf0a);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.fw-compare-link .icon {
  width: 14px;
  height: 14px;
  color: #5eead4;
}
.fw-compare-link:hover,
.fw-compare-link:focus-visible {
  border-color: #2dd4bf;
  box-shadow: 0 0 22px #2dd4bf33;
  transform: translateY(-1px);
}

.fw-compare {
  margin-top: 64px;
  scroll-margin-top: 110px;
  container-type: inline-size;
}
.fw-compare-head {
  max-width: 720px;
}
.fw-compare-head h2 {
  margin: 6px 0 10px;
  color: #f1f8ff;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.fw-compare-head p:last-child {
  color: #a9c0cd;
  font-size: 16px;
  line-height: 1.6;
}

/* Quick picks by game */
.fw-picks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.fw-pick {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  overflow: clip;
  border: 1px solid #29404f;
  border-radius: 18px;
  background:
    radial-gradient(120% 80% at 0% 0%, #2dd4bf14, transparent 60%),
    #0f1b25;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.fw-pick:hover {
  border-color: #2dd4bf73;
  box-shadow: 0 18px 40px #0007, 0 0 30px #2dd4bf1f;
  transform: translateY(-2px);
}
.fw-pick-icon {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid #2dd4bf40;
  border-radius: 12px;
  color: #5eead4;
  background: linear-gradient(-135deg, #14f19530, #0f1b25 60%, #76d8f426);
}
.fw-pick-icon .icon {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 0 8px #2dd4bf80);
}
.fw-pick-question {
  margin: 0;
  color: #f1f8ff;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.35;
}
.fw-pick-answers {
  display: grid;
  gap: 6px;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}
.fw-pick-answers a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #2c4150;
  border-radius: 10px;
  color: #e3eef5;
  background: #0b1620;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  transition: border-color 0.15s, background-color 0.15s;
}
.fw-pick-answers a span {
  flex: 1;
  min-width: 0;
}
.fw-pick-answers a b {
  color: #6ee8d1;
}
.fw-pick-answers a .icon {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  color: #5eead4;
}
.fw-pick-answers a:hover,
.fw-pick-answers a:focus-visible {
  border-color: #2dd4bf;
  background: #13293a;
}
.fw-pick-note {
  margin: 0;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.5;
}

/* Phone menus: compare any two */
.fw-pickers {
  display: none;
}
.fw-select {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.fw-select-label {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.fw-select-box {
  position: relative;
  display: block;
}
.fw-select select {
  width: 100%;
  height: 44px;
  padding: 10px 12px 10px 36px;
  border: 1px solid #29404f;
  border-radius: 8px;
  color: #f1f8ff;
  background: #0b1620;
  font: inherit;
  font-size: 16px;
  appearance: none;
  cursor: pointer;
}
.fw-select select:focus-visible {
  outline: 0;
  border-color: #2dd4bf;
  box-shadow: 0 0 0 3px #2dd4bf2e;
}
.fw-select-box .icon {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 14px;
  height: 14px;
  color: #5eead4;
  transform: translateY(-50%);
  pointer-events: none;
}

/* The table */
.fw-table-box {
  --fw-label: 210px;
  margin-top: 28px;
  overflow: clip;
  border: 1px solid #29404f;
  border-radius: 20px;
  background: #0d1820;
  box-shadow: 0 30px 70px #0006;
}
.fw-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 14px;
}
.fw-table col,
.fw-table .fw-corner,
.fw-table tbody th {
  width: var(--fw-label);
}
.fw-table th,
.fw-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #1c2f3c;
  text-align: right;
  vertical-align: middle;
  overflow-wrap: anywhere;
}
.fw-table tbody tr:last-child > * {
  border-bottom: 0;
}
.fw-table tbody th {
  color: #a9c0cd;
  font-size: 13px;
  font-weight: 650;
}
.fw-table tbody tr:hover > * {
  background: #11222e;
}
.fw-table thead th,
.fw-table thead td {
  padding: 0;
  vertical-align: top;
  background: #0f1d28;
}
.fw-head {
  --tier: #5eead4;
  position: relative;
  display: grid;
  gap: 4px;
  height: 100%;
  padding: 22px 16px 18px;
  border-top: 3px solid var(--tier);
  background: linear-gradient(-180deg, color-mix(in srgb, var(--tier) 16%, transparent), transparent 75%);
}
.fw-head-name {
  color: #f1f8ff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}
.fw-head-tier {
  min-height: 2.7em;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.35;
}
.fw-head-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin-top: 8px;
}
.fw-head-price strong {
  color: var(--tier);
  font-size: 26px;
  font-weight: 750;
  letter-spacing: -0.02em;
  text-shadow: 0 0 24px color-mix(in srgb, var(--tier) 45%, transparent);
}
.fw-head-price small {
  color: #a9c0cd;
  font-size: 12px;
}
th[data-fw="elite"] .fw-head { --tier: #76d8f4; }
th[data-fw="slotted-elite"] .fw-head { --tier: #a78bfa; }
th[data-fw="slotted-ultimate"] .fw-head { --tier: #fbbf24; }
th[data-fw="option-2a"] .fw-head { --tier: #f472b6; }
th[data-fw="option-2b"] .fw-head { --tier: #fb923c; }

.fw-made {
  color: #e3eef5;
  font-size: 13px;
  line-height: 1.5;
}
.fw-row-ac > * {
  background: #0b151d;
}
.fw-ac {
  display: flex;
  align-items: center;
  gap: 10px;
}
.fw-ac-logo {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 84px;
  height: 34px;
  overflow: clip;
  border: 1px solid #2a4556;
  border-radius: 8px;
  background: #0a141c;
}
.fw-ac-logo img {
  width: 74px;
  height: 26px;
  object-fit: contain;
}
.fw-ac-name {
  display: block;
  color: #e3eef5;
  font-size: 13px;
}
.fw-ac small {
  display: block;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 500;
}
.fw-yes,
.fw-partial {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d6e5ef;
  font-size: 13px;
  font-weight: 650;
}
.fw-yes .icon,
.fw-partial .icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 5px;
  border-radius: 50%;
  color: #5eead4;
  background: #14f19522;
  box-shadow: 0 0 14px #2dd4bf33;
}
.fw-yes-text {
  align-items: flex-start;
  font-weight: 500;
  line-height: 1.45;
}
.fw-partial {
  color: #fde68a;
}
.fw-partial .icon {
  color: #fcd34d;
  background: #fcd34d1f;
  box-shadow: none;
}
.fw-no {
  color: #4d6475;
  font-size: 16px;
  font-weight: 700;
}
.fw-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fw-cards li {
  padding: 3px 8px;
  border: 1px solid #2dd4bf59;
  border-radius: 999px;
  color: #6ee8d1;
  background: #2dd4bf14;
  font-size: 12px;
  font-weight: 700;
}
.fw-cards li.is-off {
  border-color: #1f3240;
  color: #4d6475;
  background: none;
  text-decoration: line-through;
}
.fw-tag {
  display: inline-block;
  padding: 3px 9px;
  border: 1px solid #a78bfa4d;
  border-radius: 999px;
  color: #c4b5fd;
  background: #a78bfa14;
  font-size: 12px;
  font-weight: 700;
}
.fw-row-buy td {
  padding-top: 16px;
  padding-bottom: 18px;
}
.fw-buy {
  width: 100%;
  min-height: 40px;
  justify-content: center;
  padding: 8px 12px;
  font-size: 14px;
}
.fw-footnote {
  margin: 14px 4px 0;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.6;
}

/* Common questions */
.fw-faq {
  margin-top: 36px;
}
.fw-faq-title {
  margin: 0 0 14px;
  color: #f1f8ff;
  font-size: 20px;
}
.fw-faq dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}
.fw-faq-item {
  padding: 22px 24px;
  border: 1px solid #243a48;
  border-radius: 16px;
  background: #0f1b25;
}
.fw-faq-item dt {
  margin-bottom: 8px;
  color: #f1f8ff;
  font-size: 15px;
  font-weight: 700;
}
.fw-faq-item dd {
  margin: 0;
  color: #a9c0cd;
  font-size: 14px;
  line-height: 1.65;
}
.fw-faq-item dd strong {
  color: #e3eef5;
}
.fw-faq a {
  color: var(--accent);
}
.fw-faq-more {
  margin: 16px 4px 0;
  color: #a9c0cd;
  font-size: 14px;
}

@container (max-width: 1100px) {
  .fw-table-box {
    --fw-label: 150px;
  }
  .fw-picks,
  .fw-faq dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fw-head-name {
    min-height: 2.5em;
  }
  .fw-ac {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .fw-table th,
  .fw-table td {
    padding: 12px 12px;
  }
  .fw-head {
    padding: 18px 12px 14px;
  }
  .fw-head-price strong {
    font-size: 22px;
  }
}
@container (max-width: 879px) {
  .fw-pickers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 28px;
  }
  .fw-table-box {
    --fw-label: 30%;
    margin-top: 14px;
  }
  .fw-table [data-fw]:not(.is-picked) {
    display: none;
  }
  .fw-table th,
  .fw-table td {
    padding: 12px 10px;
  }
  .fw-head {
    padding: 16px 10px 12px;
  }
  .fw-picks {
    gap: 10px;
  }
  .fw-pick {
    padding: 18px;
  }
  .fw-ac small {
    display: none;
  }
  .fw-buy {
    padding: 8px 6px;
  }
  .fw-buy .icon {
    display: none;
  }
  .fw-head-name {
    font-size: 15px;
  }
}
@container (max-width: 620px) {
  .fw-picks,
  .fw-faq dl {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .fw-compare-link,
  .fw-pick {
    transition: none;
  }
}

/* Home hero, 2026-10-28: a search box in the hero, and the PS shield panel turned into a shop window
   (popular games with prices, then the starter kit). Same colours, glow and motion as before. */

.home-hero .home-hero-text {
  max-width: 560px;
}

/* Search box that opens the site search (js/site-search.js) */
.hero-search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 520px);
  min-height: 54px;
  margin-top: 24px;
  padding: 0 18px;
  border: 1px solid #2dd4bf66;
  border-radius: 14px;
  color: #94a3b8;
  background: linear-gradient(-135deg, #0b1620, #0e1d28);
  box-shadow: 0 0 0 4px #2dd4bf0f, 0 14px 40px -18px #2aa9d880;
  font: inherit;
  font-size: 16px;
  text-align: right;
  cursor: text;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.hero-search .icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #5eead4;
}
.hero-search span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero-search:hover,
.hero-search:focus-visible {
  outline: 0;
  border-color: #2dd4bf;
  box-shadow: 0 0 0 4px #2dd4bf2e, 0 14px 40px -14px #2aa9d8a0;
}
.home-hero .home-hero-actions {
  margin-top: 16px;
}

/* Shop window: shield on top, shop underneath. Upright, so the prices read easily. */
.home-hero-art.hero-window {
  display: flex;
  flex-direction: column;
  aspect-ratio: auto;
  overflow: clip;
  transform: none;
}
.hero-window picture {
  position: relative;
  height: clamp(150px, 15vw, 210px);
  overflow: clip;
}
.hero-window picture {
  display: flex;
  justify-content: center;
}
.hero-window picture img {
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.hero-window picture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(-180deg, transparent 45%, #0b1217 100%);
}
.hw-shop {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  padding: 4px 16px 16px;
}
.hw-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #7deaff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hw-games {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hw-games a {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  padding: 7px;
  border: 1px solid #ffffff14;
  border-radius: 12px;
  color: inherit;
  background: #0f1b25;
  text-decoration: none;
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
.hw-games img {
  grid-row: 1 / span 2;
  width: 64px;
  height: auto;
  aspect-ratio: 460 / 215;
  border-radius: 6px;
  object-fit: contain;
}
.hw-name {
  overflow: hidden;
  color: #f1f8ff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hw-from {
  color: #6ee8d1;
  font-size: 12px;
  font-weight: 700;
}
.hw-games a:hover,
.hw-games a:focus-visible {
  outline: 0;
  border-color: #2dd4bf;
  box-shadow: 0 0 22px #2dd4bf33;
  transform: translateY(-2px);
}
.hw-kit {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 12px;
  border: 1px solid #2dd4bf4d;
  border-radius: 12px;
  color: inherit;
  background: linear-gradient(-110deg, #14f1951c, #0f1b25 55%);
  text-decoration: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.hw-kit img {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  object-fit: contain;
  background: radial-gradient(circle at 50% 40%, #1d3a4a, #0c1822 75%);
}
.hw-kit-copy {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}
.hw-kit-copy strong {
  color: #f1f8ff;
  font-size: 14px;
}
.hw-kit-copy small {
  overflow: hidden;
  color: #94a3b8;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hw-kit-price {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
  color: #6ee8d1;
  font-size: 16px;
  font-weight: 800;
}
.hw-kit-price .icon {
  width: 13px;
  height: 13px;
  transition: transform 0.18s;
}
.hw-kit:hover,
.hw-kit:focus-visible {
  outline: 0;
  border-color: #2dd4bf;
  box-shadow: 0 0 26px #2dd4bf33;
}
.hw-kit:hover .hw-kit-price .icon {
  transform: translateX(-3px);
}

@media (max-width: 767px) {
  .hero-search {
    width: 100%;
  }
  .hero-window picture {
    height: 150px;
  }
  .hw-games a {
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 8px;
  }
  .hw-games img {
    width: 48px;
  }
  .hw-name {
    font-size: 13px;
    white-space: normal;
  }
}
@media (max-width: 380px) {
  .hw-games {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-search,
  .hw-games a,
  .hw-kit,
  .hw-kit-price .icon {
    transition: none;
  }
}

/* Home hero reel, 2026-10-29: a muted gameplay loop behind the hero (js/hero-reel.js), tinted to the site's
   mint and cyan, with soft sparks and a slow shine on the headline. Loaded after home-hero.css. */

/* Full screen width behind the hero. main clips sideways overflow, so 100vw never makes the page scroll. */
.hero-backdrop {
  position: absolute;
  z-index: -2;
  inset-block: 0;
  right: 50%;
  width: 100vw;
  overflow: hidden;
  pointer-events: none;
  background: #080c10;
  transform: translateX(50%);
}
.hero-reel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}
.hero-backdrop-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(-115deg, #0a4a5c, #0d5a4f 55%, #16406e);
  mix-blend-mode: color;
  opacity: 0.42;
}
.hero-backdrop-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(-180deg, #080c10 0%, #080c1000 14%, #080c1000 58%, #080c10 100%),
    linear-gradient(-90deg, #080c10eb 0%, #080c10c4 28%, #080c1066 50%, #080c1021 70%, #080c104d 100%);
}

/* Sparks drifting up through the reel */
.hero-sparks i {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #a7f6e6;
  box-shadow: 0 0 8px 2px #2dd4bf8c;
  opacity: 0;
}
.hero-sparks i:nth-child(3n) {
  width: 2px;
  height: 2px;
  background: #9ad8ff;
  box-shadow: 0 0 7px 2px #38bdf880;
}
.hero-sparks i:nth-child(4n + 1) {
  width: 4px;
  height: 4px;
}
.hero-sparks i:nth-child(1) { right: 6%; top: 70%; }
.hero-sparks i:nth-child(2) { right: 14%; top: 34%; }
.hero-sparks i:nth-child(3) { right: 21%; top: 82%; }
.hero-sparks i:nth-child(4) { right: 29%; top: 18%; }
.hero-sparks i:nth-child(5) { right: 37%; top: 64%; }
.hero-sparks i:nth-child(6) { right: 44%; top: 40%; }
.hero-sparks i:nth-child(7) { right: 51%; top: 86%; }
.hero-sparks i:nth-child(8) { right: 57%; top: 12%; }
.hero-sparks i:nth-child(9) { right: 62%; top: 56%; }
.hero-sparks i:nth-child(10) { right: 68%; top: 30%; }
.hero-sparks i:nth-child(11) { right: 73%; top: 78%; }
.hero-sparks i:nth-child(12) { right: 79%; top: 46%; }
.hero-sparks i:nth-child(13) { right: 84%; top: 16%; }
.hero-sparks i:nth-child(14) { right: 89%; top: 66%; }
.hero-sparks i:nth-child(15) { right: 93%; top: 36%; }
.hero-sparks i:nth-child(16) { right: 97%; top: 84%; }
.hero-sparks i:nth-child(17) { right: 33%; top: 46%; }
.hero-sparks i:nth-child(18) { right: 48%; top: 22%; }

/* A slow light sweep across the coloured half of the headline */
.home-hero h1 span {
  background-image: linear-gradient(-100deg, #5ee5ff 0%, #9bf4b8 34%, #effffb 48%, #9bf4b8 62%, #5ee5ff 100%);
  background-size: 260% 100%;
  background-position: 0% 0;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-sparks i {
    animation: hero-spark 7s ease-in-out infinite;
  }
  .hero-sparks i:nth-child(2n) { animation-duration: 9s; animation-delay: -2s; }
  .hero-sparks i:nth-child(3n) { animation-duration: 8s; animation-delay: -5s; }
  .hero-sparks i:nth-child(5n) { animation-duration: 11s; animation-delay: -7s; }
  .hero-sparks i:nth-child(7n) { animation-delay: -3.5s; }
  .home-hero h1 span {
    animation: hero-shine 8s ease-in-out infinite;
  }
  .home-hero.is-offscreen .hero-sparks i,
  .home-hero.is-offscreen h1 span {
    animation-play-state: paused;
  }
}
@keyframes hero-spark {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.6); }
  18% { opacity: 0.95; }
  55% { opacity: 0.55; }
  100% { opacity: 0; transform: translate3d(-14px, -64px, 0) scale(1.1); }
}
@keyframes hero-shine {
  0%, 50% { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}

/* Phones: the reel sits behind the words only, then fades out above the shop window. */
@media (max-width: 767px) {
  .hero-backdrop {
    bottom: auto;
    height: 720px;
  }
  .hero-backdrop-shade {
    background:
      linear-gradient(-180deg, #080c10 0%, #080c1000 12%, #080c1059 52%, #080c10 100%),
      linear-gradient(-90deg, #080c10d1, #080c107a);
  }
}

/* Smooth scrolling and page changes, 2026-10-29. js/smooth-scroll.js runs Lenis on mouse and trackpad;
   these are the rules Lenis needs, plus a softer page change. Loaded after hero-reel.css. */

/* Lenis (from its lenis.css) */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}
.lenis [data-lenis-prevent],
.lenis [data-scroll-native] {
  overscroll-behavior: contain;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}
/* Lenis moves the page itself; the browser's own smooth scrolling on top of it made link jumps stutter (2026-10-30). */
html.lenis {
  scroll-behavior: auto;
}

/* Page changes: the old page fades out quickly, the new one fades in and rises a few pixels.
   The header keeps its own name (alive.css), so it stays still. */
@media (prefers-reduced-motion: no-preference) {
  /* Clicks during the fade reach the new page instead of the transition layer, so the first click always counts. */
  ::view-transition {
    pointer-events: none;
  }
  ::view-transition-old(root) {
    animation: 0.12s ease-out both ps-page-out;
  }
  ::view-transition-new(root) {
    animation: 0.22s cubic-bezier(0.2, 0.8, 0.2, 1) both ps-page-in;
  }
}
@keyframes ps-page-out {
  to {
    opacity: 0;
  }
}
@keyframes ps-page-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Language and currency, 2026-10-29: one header button ("EN | USD") opening a two-column menu, like the big
   stores. js/locale-menu.js opens it, js/i18n.js handles languages, js/currency.js the currency column.
   2026-10-30: 19 languages, so the language list itself is two columns. Sides use logical properties
   (inset-inline-end, border-inline-start, text-align: start) so the menu mirrors on Arabic and Urdu pages. */

.locale-picker {
  position: relative;
}
.locale-button {
  gap: 7px;
  padding: 0 11px;
}
.locale-button .icon {
  width: 14px;
  height: 14px;
  color: #5eead4;
}
.locale-button .locale-chevron {
  width: 10px;
  height: 10px;
  color: inherit;
  transition: transform 0.2s ease;
}
.locale-button[aria-expanded="true"] .locale-chevron {
  transform: rotate(-180deg);
}
.locale-currency {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.locale-currency[hidden] {
  display: none;
}
.locale-divider {
  width: 1px;
  height: 14px;
  background: #33495a;
}
.locale-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  width: min(690px, calc(100vw - 32px));
  overflow: clip;
  border: 1px solid #2d4250;
  border-radius: 14px;
  background: linear-gradient(-180deg, #0f1b25, #0b141c);
  box-shadow: 0 24px 60px #000000b0, 0 0 30px #2dd4bf14;
  animation: locale-in 0.18s ease both;
}
.locale-menu[hidden] {
  display: none;
}
/* Only the languages until today's rates load. */
.locale-menu:has([data-currency-picker][hidden]) {
  grid-template-columns: minmax(0, 1fr);
  width: min(470px, calc(100vw - 32px));
}
@keyframes locale-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.locale-col {
  min-width: 0;
  padding: 12px;
}
.locale-col + .locale-col {
  border-inline-start: 1px solid #1f3442;
}
.locale-col[hidden] {
  display: none;
}
.locale-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 4px 10px;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.locale-title .icon {
  width: 12px;
  height: 12px;
  color: #5eead4;
}
.locale-coin {
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
  border: 1px solid #5eead4;
  border-radius: 50%;
  color: #5eead4;
  font-size: 9px;
  letter-spacing: 0;
}
.locale-col ul {
  display: grid;
  align-content: start;
  gap: 3px;
  max-height: min(70vh, 540px);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  scrollbar-color: #2c4150 transparent;
  scrollbar-width: thin;
}
.locale-languages ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.locale-col button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #c5d4de;
  background: transparent;
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.locale-col button b {
  display: grid;
  height: 30px;
  place-items: center;
  border: 1px solid #2c4150;
  border-radius: 8px;
  color: #c5d4de;
  background: #0b1620;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.locale-col button span {
  display: grid;
  min-width: 0;
  color: #f1f8ff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
/* The language's own name, in its own script and direction. It hugs its text, so "العربية" still lines up with the
   other names at the start of the row. */
.locale-col button .locale-name {
  justify-self: start;
  max-width: 100%;
}
.locale-col button small {
  overflow: hidden;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.locale-col button .icon {
  width: 12px;
  height: 12px;
  color: #14f195;
  opacity: 0;
}
.locale-col button:hover,
.locale-col button:focus-visible {
  outline: 0;
  border-color: #2c4150;
  background: #13293a;
}
.locale-col button[aria-pressed="true"] {
  border-color: #2dd4bf66;
  background: linear-gradient(-110deg, #14f1951f, #2dd4bf0d);
}
.locale-col button[aria-pressed="true"] b {
  border-color: #2dd4bf;
  color: #062019;
  background: linear-gradient(-135deg, #5eead4, #14f195);
}
.locale-col button[aria-pressed="true"] .icon {
  opacity: 1;
}
.locale-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 16px 12px;
  border-top: 1px solid #1f3442;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.5;
}
.locale-note[hidden] {
  display: none;
}

/* Below 1200px the picker sits in the Menu panel: the columns open in place, currencies under the languages,
   and the panel itself scrolls (no second scroll area inside it). */
@media (max-width: 1199px) {
  .site-nav .locale-menu {
    position: static;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    margin-top: 10px;
    box-shadow: none;
  }
  .site-nav .locale-menu:has([data-currency-picker][hidden]) {
    width: 100%;
  }
  .site-nav .locale-col + .locale-col {
    border-inline-start: 0;
    border-top: 1px solid #1f3442;
  }
  .site-nav .locale-col ul {
    max-height: none;
    overflow: visible;
  }
  .site-nav .locale-languages ul {
    grid-template-columns: repeat(auto-fill, minmax(min(190px, calc(50% - 2px)), 1fr));
  }
  .site-nav .locale-col[data-currency-picker] ul {
    grid-template-columns: repeat(auto-fill, minmax(min(150px, calc(50% - 2px)), 1fr));
  }
}
@media (max-width: 420px) {
  .locale-col {
    padding: 10px 8px;
  }
  .locale-col button {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 8px;
    padding: 7px 6px;
  }
  .locale-col button .icon {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .locale-menu {
    animation: none;
  }
  .locale-button .locale-chevron,
  .locale-col button {
    transition: none;
  }
}

/* Cart, 2026-10-29: header button with a count, and a cart panel that slides in from the right (js/cart.js).
   Same colours and glow as the rest of the store. Loaded after home-hero.css, before ui-guardrails.css. */

/* ---------- Header button ---------- */
.cart-button {
  position: relative;
}
.cart-badge {
  position: absolute;
  top: -7px;
  left: -7px;
  display: grid;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  place-items: center;
  border-radius: 999px;
  color: #062019;
  background: linear-gradient(-135deg, #5eead4, #14f195);
  box-shadow: 0 0 0 2px #080c10, 0 0 14px #2dd4bf88;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.cart-badge[hidden] {
  display: none;
}
.cart-badge.is-bumped {
  animation: cart-bump 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes cart-bump {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.header-cart-phone {
  display: none;
}
@media (max-width: 1199px) {
  .header-cart-phone {
    display: inline-flex;
  }
  .header-cart-desktop {
    display: none;
  }
}

/* ---------- Cart panel ---------- */
html.cart-open {
  overflow: hidden;
}
.cart-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(440px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  overflow: visible;
}
.cart-drawer::backdrop {
  background: #02060acc;
  opacity: 0;
  backdrop-filter: blur(3px);
  transition: opacity 0.26s ease;
}
.cart-drawer.is-open::backdrop {
  opacity: 1;
}
.cart-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-right: 1px solid #29404f;
  background:
    radial-gradient(120% 50% at 100% 0%, #2dd4bf14, transparent 60%),
    linear-gradient(-180deg, #0f1b25, #0a131a);
  box-shadow: 30px 0 80px #000000b3, 0 0 40px #2dd4bf14;
  transform: translateX(-100%);
  transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cart-drawer.is-open .cart-panel {
  transform: none;
}
.cart-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  border-bottom: 1px solid #1f3442;
}
.cart-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #f1f8ff;
  font-size: 20px;
  line-height: 1.2;
}
.cart-title .icon {
  width: 18px;
  height: 18px;
  color: #5eead4;
}
.cart-head-count {
  margin-left: auto;
  color: #94a3b8;
  font-size: 13px;
  font-weight: 650;
}
.cart-close {
  display: grid;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid #2c4150;
  border-radius: 10px;
  color: #c5d4de;
  background: #0f1b25;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.cart-close .icon {
  width: 16px;
  height: 16px;
}
.cart-close:hover,
.cart-close:focus-visible {
  outline: 0;
  color: #fff;
  border-color: #2dd4bf;
}
.cart-added {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 20px 0;
  padding: 10px 12px;
  border: 1px solid #2dd4bf55;
  border-radius: 10px;
  color: #c9fbef;
  background: linear-gradient(-110deg, #14f19524, #0f1b25 70%);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  animation: cart-added-in 0.35s ease both;
}
.cart-added[hidden] {
  display: none;
}
.cart-added .icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: #14f195;
}
@keyframes cart-added-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.cart-body {
  flex: 1;
  min-height: 0;
  padding: 14px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #2c4150 transparent;
  scrollbar-width: thin;
}
.cart-lines {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cart-line {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 36px;
  align-items: start;
  gap: 12px;
  padding: 10px;
  border: 1px solid #ffffff12;
  border-radius: 12px;
  background: #0f1b25;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.cart-line.is-new {
  border-color: #2dd4bf88;
  box-shadow: 0 0 0 3px #2dd4bf1f, 0 0 26px #2dd4bf1a;
}
.cart-line-pic {
  display: grid;
  width: 84px;
  aspect-ratio: 16 / 9;
  place-items: center;
  overflow: clip;
  border-radius: 8px;
  color: #5eead4;
  background: radial-gradient(circle at 50% 40%, #1d3a4a, #0c1822 75%);
}
.cart-line-pic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cart-line-pic .icon {
  width: 22px;
  height: 22px;
}
.cart-line-copy {
  display: grid;
  justify-items: start;
  gap: 4px;
  min-width: 0;
}
.cart-line-name {
  display: -webkit-box;
  overflow: hidden;
  color: #f1f8ff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
a.cart-line-name:hover {
  color: #5eead4;
}
.cart-line-term {
  padding: 2px 8px;
  border: 1px solid #2c4150;
  border-radius: 999px;
  color: #a9c0cd;
  font-size: 12px;
  font-weight: 650;
}
.cart-line-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
}
.cart-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid #29404f;
  border-radius: 9px;
  background: #0b1620;
}
.cart-qty-step {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  color: #c5d4de;
  background: transparent;
  font: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.cart-qty-step:hover:not(:disabled),
.cart-qty-step:focus-visible {
  outline: 0;
  color: #fff;
  background: #13293a;
}
.cart-qty-step:disabled {
  opacity: 0.35;
  cursor: default;
}
.cart-qty-value {
  min-width: 26px;
  color: #f1f8ff;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.cart-line-price {
  color: #6ee8d1;
  font-size: 15px;
  font-weight: 800;
}
.cart-line-remove {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #94a3b8;
  background: transparent;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.cart-line-remove .icon {
  width: 14px;
  height: 14px;
}
.cart-line-remove:hover,
.cart-line-remove:focus-visible {
  outline: 0;
  color: #fca5a5;
  border-color: #f8717155;
  background: #2a1215;
}
.cart-foot {
  display: grid;
  gap: 10px;
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid #1f3442;
  background: #0b141ccc;
}
.cart-foot[hidden] {
  display: none;
}
.cart-subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0;
  color: #a9c0cd;
  font-size: 14px;
  font-weight: 650;
}
.cart-subtotal strong {
  color: #f1f8ff;
  font-size: 22px;
}
.cart-note {
  margin: 0;
  color: #94a3b8;
  font-size: 12px;
}
.cart-checkout {
  justify-content: center;
  width: 100%;
  min-height: 50px;
  font-size: 16px;
}
.cart-keep {
  justify-self: center;
  padding: 6px 10px;
  border: 0;
  color: #a9c0cd;
  background: none;
  font: inherit;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.cart-keep:hover,
.cart-keep:focus-visible {
  color: #fff;
}
.cart-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 48px 8px;
  text-align: center;
}
.cart-empty-mark {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border: 1px solid #2dd4bf44;
  border-radius: 18px;
  color: #5eead4;
  background: radial-gradient(circle at 50% 30%, #14f19533, #0f1b25);
}
.cart-empty-mark .icon {
  width: 26px;
  height: 26px;
}
.cart-empty h3 {
  margin: 6px 0 0;
  color: #f1f8ff;
  font-size: 18px;
}
.cart-empty p {
  max-width: 290px;
  margin: 0 0 8px;
  color: #94a3b8;
  font-size: 14px;
}
.cart-empty .button {
  justify-content: center;
  width: 100%;
  max-width: 290px;
}

/* ---------- "Add to cart" next to "Buy now" ---------- */
.cart-add .icon {
  width: 14px;
  height: 14px;
}
.plan-cart-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.plan-cart-actions > .button {
  flex: 1 1 120px;
  justify-content: center;
}
/* Firmware rows keep their buttons at natural width under the specs. */
.firmware-specs > .plan-cart-actions {
  grid-column: 1 / -1;
}
.firmware-specs > .plan-cart-actions > .button {
  flex: 0 1 auto;
}
.firmware-specs > .plan-cart-actions span {
  display: inline;
  margin: 0;
  color: inherit;
  font-size: inherit;
}

@media (max-width: 480px) {
  .cart-head,
  .cart-body,
  .cart-foot {
    padding-inline: 16px;
  }
  .cart-added {
    margin-inline: 16px;
  }
  .cart-line {
    grid-template-columns: 68px minmax(0, 1fr) 34px;
    gap: 10px;
  }
  .cart-line-pic {
    width: 68px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cart-panel,
  .cart-drawer::backdrop,
  .cart-line,
  .cart-close,
  .cart-line-remove {
    transition: none;
  }
  .cart-badge.is-bumped,
  .cart-added {
    animation: none;
  }
}

/* ---------- Checkout: a cart with several kinds of product ---------- */
.checkout-cart-note {
  margin: 10px 0 0;
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.5;
}
.checkout-cart-orders {
  display: grid;
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.checkout-cart-orders li {
  padding: 12px 14px;
  border: 1px solid #243a48;
  border-radius: 10px;
  background: #0b1620;
}
.checkout-cart-orders strong {
  color: #f1f8ff;
  font-size: 14px;
}
.checkout-cart-order-state {
  margin: 6px 0 0;
  color: #c5d4de;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
/* "Edit your cart" is a button that opens the cart panel; it looks like the store's other text links. */
button.checkout-cart-edit {
  justify-self: start;
  width: auto;
  padding: 0;
  border: 0;
  color: #5eead4;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
button.checkout-cart-edit:hover,
button.checkout-cart-edit:focus-visible {
  color: #fff;
}

/* Blurred (owner, 2026-10-29: "literally the best dma providers ... make it look really really nice, appealing and fancy").
   Crimson premium look for Blurred's tiles and product panel only; every other supplier keeps its own style. */
@property --blurred-spin { syntax:"<angle>"; inherits:false; initial-value:0deg; }
@keyframes blurred-spin { to { --blurred-spin:360deg; } }
@keyframes blurred-shine { 0% { background-position:260% 0; } 55%,100% { background-position:-160% 0; } }
@keyframes blurred-pulse { 0%,100% { box-shadow:0 0 0 1px #ff5a5a66,0 0 22px #ff3b3b55; } 50% { box-shadow:0 0 0 1px #ff8a8a99,0 0 34px #ff3b3b88; } }

/* Store tiles: animated crimson border, glow and a "Top pick" ribbon on the cover. */
.license-store-item[data-provider="Blurred"] { position:relative; border:1.5px solid transparent; background:linear-gradient(-160deg,#1a0d10,#0c151d 60%) padding-box,conic-gradient(from var(--blurred-spin),#ff3b3b,#ffb0b0,#c21f2a,#ff5a5a,#7a0f17,#ff3b3b) border-box; animation:blurred-spin 6s linear infinite; box-shadow:0 10px 30px #ff3b3b26,0 0 0 1px #ff5a5a1f; }
.license-store-item[data-provider="Blurred"]:hover { border-color:transparent; box-shadow:0 14px 38px #ff3b3b47,0 0 0 1px #ff5a5a40; }
.license-store-item[data-provider="Blurred"][aria-selected="true"] { border-color:transparent; background:linear-gradient(-160deg,#2a1014,#122530 70%) padding-box,conic-gradient(from var(--blurred-spin),#ff3b3b,#ffd0d0,#c21f2a,#ff5a5a,#7a0f17,#ff3b3b) border-box; box-shadow:0 0 0 1px #ff8a8a66,0 16px 40px #ff3b3b4d; }
.blurred-ribbon { position:absolute; z-index:3; top:8px; right:8px; padding:4px 10px; border-radius:999px; color:#fff; background:linear-gradient(-90deg,#ff3b3b,#c21f2a); font-size:11px; font-weight:850; letter-spacing:.06em; text-transform:uppercase; box-shadow:0 4px 14px #0009,0 0 14px #ff3b3b99; pointer-events:none; }
.blurred-ribbon::before { content:"★ "; }
.license-store-item[data-provider="Blurred"] .license-store-item-copy > strong { color:#fff; }

/* Per-game pages and game guides: Blurred product cards get the same crimson border and glow as the store tile. */
.seo-game-product[data-provider="Blurred"] { border:1.5px solid transparent; background:linear-gradient(-160deg,#1d0c10,#0c151d 60%) padding-box,conic-gradient(from var(--blurred-spin),#ff3b3b,#ffb0b0,#c21f2a,#ff5a5a,#7a0f17,#ff3b3b) border-box; animation:blurred-spin 6s linear infinite; box-shadow:0 10px 30px #ff3b3b26,0 0 0 1px #ff5a5a1f; }
.seo-game-product[data-provider="Blurred"]:hover { border-color:transparent; box-shadow:0 18px 44px -18px #ff3b3b80,0 0 0 1px #ff5a5a40; }
.seo-game-product[data-provider="Blurred"] .eyebrow,.seo-game-product[data-provider="Blurred"] .seo-game-plans strong { color:#ff8a8a; }
.seo-game-product[data-provider="Blurred"] .seo-game-product-media { border-color:#ff5a5a55; }
.seo-game-product[data-provider="Blurred"] .button { border-color:#ff5a5a66; }

/* The lead product beside a game page's heading. */
.seo-lead[data-provider="Blurred"] { border:1.5px solid transparent; background:linear-gradient(-160deg,#1d0c10f2,#0b141cf2 60%) padding-box,conic-gradient(from var(--blurred-spin),#ff3b3b,#ffb0b0,#c21f2a,#ff5a5a,#7a0f17,#ff3b3b) border-box; animation:blurred-spin 6s linear infinite; box-shadow:0 30px 70px -30px #000,0 0 40px -6px #ff3b3b59; }
.seo-lead[data-provider="Blurred"] .eyebrow { color:#ff8a8a; }
.seo-lead[data-provider="Blurred"] .seo-lead-price strong { color:#ff6b6b; text-shadow:0 0 18px #ff3b3b66; }
.seo-lead[data-provider="Blurred"] .seo-lead-media { border-color:#ff5a5a55; }
.seo-lead[data-provider="Blurred"] .button-primary { border-color:#ff6b6b; color:#fff; background:linear-gradient(-110deg,#c21f2a 0%,#ff3b3b 40%,#ffb0b0 50%,#ff3b3b 60%,#c21f2a 100%) 0 0/250% 100%; text-shadow:0 1px 2px #0007; box-shadow:0 8px 24px #ff3b3b4d; animation:blurred-shine 4.5s ease-in-out infinite; }

/* Product panel. */
.reseller-product-panel[data-supplier="blurred"] { --reseller-accent:#ff5a5a; position:relative; border:1.5px solid transparent; background:linear-gradient(#0a1016,#0a1016) padding-box,conic-gradient(from var(--blurred-spin),#ff3b3b,#ffb0b0 18%,#7a0f17 40%,#ff5a5a 62%,#c21f2a 80%,#ff3b3b) border-box; animation:blurred-spin 9s linear infinite; box-shadow:0 0 0 1px #ff5a5a1a,0 24px 70px #ff3b3b2e; }
.reseller-product-panel[data-supplier="blurred"] .license-card-details { border-top-color:transparent; background:radial-gradient(520px 260px at 100% 0%,#ff3b3b2e,transparent 70%),radial-gradient(420px 300px at 0% 100%,#c21f2a24,transparent 70%),linear-gradient(-150deg,#1d0c10,#0a1118 60%); }
.reseller-product-panel[data-supplier="blurred"] .eyebrow { color:#ff8a8a; letter-spacing:.14em; }
.reseller-product-panel[data-supplier="blurred"] h2 { background:linear-gradient(-180deg,#ffffff 30%,#ffc2c2); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 18px #ff3b3b55); }
.blurred-top-pick { display:inline-flex; align-items:center; gap:8px; width:fit-content; max-width:100%; margin:4px 0 6px; padding:7px 8px 7px 14px; border-radius:999px; color:#fff; background:linear-gradient(-90deg,#ff3b3b,#c21f2a); font-size:13px; font-weight:800; line-height:1.3; animation:blurred-pulse 3.2s ease-in-out infinite; }
.blurred-top-pick::before { content:"★"; display:grid; flex:none; place-items:center; width:22px; height:22px; border-radius:50%; color:#d3232e; background:#fff; font-size:13px; }
.reseller-product-panel[data-supplier="blurred"] .reseller-facts span { border-color:#ff5a5a40; background:#1a0b0f99; color:#ffe1e1; }
.reseller-product-panel[data-supplier="blurred"] .license-plan { border-color:#ff5a5a40; background:linear-gradient(-150deg,#1a0c10,#0b131a); }
.reseller-product-panel[data-supplier="blurred"] .license-plan:hover { border-color:#ff8a8a99; box-shadow:0 0 22px #ff3b3b2e; }
.reseller-product-panel[data-supplier="blurred"] .rie-plan-price { color:#ff8a8a; text-shadow:0 0 16px #ff3b3b66; }
.reseller-product-panel[data-supplier="blurred"] .button-primary { border-color:#ff6b6b; color:#fff; background:linear-gradient(-110deg,#c21f2a 0%,#ff3b3b 40%,#ffb0b0 50%,#ff3b3b 60%,#c21f2a 100%) 0 0/250% 100%; text-shadow:0 1px 2px #0007; box-shadow:0 8px 24px #ff3b3b4d; animation:blurred-shine 4.5s ease-in-out infinite; }
.reseller-product-panel[data-supplier="blurred"] .button-primary:hover { box-shadow:0 10px 30px #ff3b3b80; }
.reseller-product-panel[data-supplier="blurred"] .button-secondary { border-color:#ff5a5a66; }
.reseller-product-panel[data-supplier="blurred"] .rie-game-features { --feat-accent:#ff6b6b; }
.reseller-product-panel[data-supplier="blurred"] .feat-head-icon { border-color:#ff5a5a66; background:linear-gradient(-150deg,#3a1218,#160b0e); }
.reseller-product-panel[data-supplier="blurred"] .feat-icon,.reseller-product-panel[data-supplier="blurred"] .feat-chip { border-color:#ff5a5a40; background:#1d0d11; }
.reseller-product-panel[data-supplier="blurred"] .feat-item { border-color:#3a1c22; background:linear-gradient(-160deg,#170d11,#0c1118); }
.reseller-product-panel[data-supplier="blurred"] .feat-item:hover { border-color:#ff5a5a66; }
.reseller-product-panel[data-supplier="blurred"] .feat-item:hover .feat-icon { border-color:#ff6b6b; background:#3a1218; }
.reseller-product-panel[data-supplier="blurred"] .feat-group-count { border-color:#ff5a5a40; }

@media(prefers-reduced-motion:reduce) {
  .license-store-item[data-provider="Blurred"],.seo-game-product[data-provider="Blurred"],.seo-lead[data-provider="Blurred"],.seo-lead[data-provider="Blurred"] .button-primary,.reseller-product-panel[data-supplier="blurred"],.blurred-top-pick,.reseller-product-panel[data-supplier="blurred"] .button-primary { animation:none; }
}

/* Blurred DMA landing pages (/blurred-dma/ and /blurred-dma/<product>/, src/blurred-pages.js).
   Same band header and product cards as the game pages, with Blurred's crimson accents from blurred.css. */
.page-blurred .seo-band-lead + .seo-band-lead { margin-top: 10px; }
.page-blurred .seo-band-copy .eyebrow { color: #ff8a8a; }
.page-blurred .seo-lead[data-provider="Blurred"] { border-color: #ff5a5a66; box-shadow: 0 18px 50px -24px #ff3b3b99, 0 0 0 1px #ff5a5a26; }
.page-blurred .seo-lead-media { position: relative; display: block; }
.page-blurred .seo-game-products h3 a { color: inherit; text-decoration: none; }
.page-blurred .seo-game-products h3 a:hover { color: #ffb0b0; }

/* Why buy here: four short reasons in tiles that collapse to one column on phones. */
.blurred-why-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.blurred-why-list li { display: flex; align-items: flex-start; gap: 12px; padding: 18px; border: 1px solid #243a48; border-radius: 14px; background: linear-gradient(-160deg, #151a22, #0f1b25); color: #d4e3ec; line-height: 1.5; }
.blurred-why-list .icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 2px; color: #ff6b6b; }

/* Plans: one row per term with the price and a Buy button. */
.blurred-plan-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.blurred-plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 6px 12px; align-items: center; padding: 18px; border: 1.5px solid transparent; border-radius: 14px; background: linear-gradient(-160deg, #1d0c10, #0c151d 60%) padding-box, linear-gradient(-135deg, #ff3b3b, #7a0f17 55%, #ff5a5a) border-box; box-shadow: 0 10px 30px #ff3b3b1f; }
.blurred-plan-term { color: #a9c0cd; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.blurred-plan-price { grid-column: 1; color: #f1f8ff; font-size: 26px; font-weight: 850; line-height: 1.1; }
.blurred-plan .button { grid-column: 2; grid-row: 1 / span 2; }

/* Features: one tile per group, check marks in Blurred red. */
.blurred-feature-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.blurred-feature-group { padding: 20px; border: 1px solid #243a48; border-radius: 14px; background: linear-gradient(-160deg, #101c27, #0f1b25); }
.blurred-feature-group h3 { margin: 0 0 12px; color: #ff8a8a; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; }
.blurred-feature-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.blurred-feature-group li { display: flex; align-items: flex-start; gap: 10px; color: #d4e3ec; font-size: 14px; line-height: 1.5; }
.blurred-feature-group .icon { flex-shrink: 0; width: 14px; height: 14px; margin-top: 4px; color: #ff6b6b; }

/* What you need. */
.blurred-needs-list { margin: 16px 0 0; padding: 20px 40px 20px 24px; border: 1px solid #243a48; border-radius: 14px; background: #0f1b25; color: #d4e3ec; line-height: 1.6; display: grid; gap: 6px; }

/* Videos: poster links that open YouTube (no player on the page). */
.blurred-video-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.blurred-video { position: relative; display: block; overflow: clip; border: 1px solid #243a48; border-radius: 14px; background: #0b1620; color: #f1f8ff; text-decoration: none; aspect-ratio: 16 / 9; }
.blurred-video img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease, filter 0.35s ease; }
.blurred-video:hover img { transform: scale(1.04); filter: brightness(1.1); }
.blurred-video-play { position: absolute; top: 50%; right: 50%; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #ff3b3bd9; box-shadow: 0 0 24px #ff3b3b99; transform: translate(50%, -50%); }
.blurred-video-play .icon { width: 20px; height: 20px; margin-right: 3px; color: #fff; }
.blurred-video-label { position: absolute; inset: auto 0 0 0; padding: 28px 14px 12px; background: linear-gradient(-180deg, transparent, #050b10e6); font-size: 14px; font-weight: 750; line-height: 1.3; }
@media (prefers-reduced-motion: reduce) { .blurred-video img { transition: none; } .blurred-video:hover img { transform: none; } }
/* Game pages: a Blurred card's name links to its Blurred DMA page. */
.seo-game-product[data-provider="Blurred"] h3 a { color: inherit; text-decoration: none; }
.seo-game-product[data-provider="Blurred"] h3 a:hover { color: #ffb0b0; text-decoration: underline; }

/* NextCheat pages (/nextcheat/, /nextcheat/tarkov/ and /nextcheat/<product>/, src/nextcheat-pages.js).
   Same band, cards, plans and questions as the Blurred pages (blurred-pages.css), in NextOptimizer's coral. */
.page-nextcheat .seo-band-copy .eyebrow { color: #ff9a8f; }
.page-nextcheat .seo-lead[data-provider="NextOptimizer"] { border-color: #ff6b6166; box-shadow: 0 18px 50px -24px #ff6b6199, 0 0 0 1px #ff6b6126; }
.page-nextcheat .seo-lead[data-provider="NextOptimizer"] .seo-lead-media { position: relative; display: block; }
.page-nextcheat .blurred-why-list .icon,
.page-nextcheat .blurred-feature-group .icon { color: #ff8a80; }
.page-nextcheat .blurred-feature-group h3 { color: #ff9a8f; }
.page-nextcheat .blurred-plan { background: linear-gradient(-160deg, #1f100e, #0c151d 60%) padding-box, linear-gradient(-135deg, #ff6b61, #7a2a17 55%, #ff9a8f) border-box; box-shadow: 0 10px 30px #ff6b611f; }

/* Pro, Lite and Chams side by side: one card each, one column on phones. */
.nextcheat-versions { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.nextcheat-version { display: flex; flex-direction: column; gap: 14px; padding: 24px; overflow: clip; border: 1px solid #243a48; border-radius: 16px; background: linear-gradient(-160deg, #1a1210, #101c27 45%, #0f1b25); transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; }
.nextcheat-version:hover { border-color: #ff6b6180; box-shadow: 0 16px 40px -22px #ff6b6199; transform: translateY(-2px); }
.nextcheat-version h3 { margin: 0; font-size: 20px; line-height: 1.25; }
.nextcheat-version h3 a { color: #f1f8ff; text-decoration: none; }
.nextcheat-version h3 a:hover { color: #ffb4ab; }
.nextcheat-version-best { margin: 0; color: #a9c0cd; font-size: 15px; line-height: 1.5; }
.nextcheat-version-facts { margin: 0; display: grid; gap: 10px; }
.nextcheat-version-facts div { display: grid; gap: 2px; }
.nextcheat-version-facts dt { color: #ff9a8f; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.nextcheat-version-facts dd { margin: 0; color: #d4e3ec; font-size: 15px; line-height: 1.45; }
.nextcheat-version-prices { list-style: none; margin: 0; padding: 12px 0 0; display: grid; gap: 8px; border-top: 1px solid #243a48; }
.nextcheat-version-prices li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: #a9c0cd; font-size: 14px; }
.nextcheat-version-prices strong { color: #f1f8ff; font-size: 16px; font-weight: 800; }
.nextcheat-version .button { margin-top: auto; justify-content: center; }

/* NextCheat and NextOptimizer are the same: one short paragraph in a card. */
.nextcheat-same-text { max-width: 75ch; margin: 16px 0 0; padding: 20px 24px; border: 1px solid #243a48; border-right: 3px solid #ff6b61; border-radius: 14px; background: #0f1b25; color: #d4e3ec; line-height: 1.65; }

/* NextCheat's full feature list: one toggle per category, groups in columns, NextCheat's highlights in coral. */
.nextcheat-features-note { margin: 8px 0 0; color: #a9c0cd; }
.nextcheat-cats { margin-top: 18px; display: grid; gap: 12px; }
.nextcheat-cat { overflow: clip; border: 1px solid #243a48; border-radius: 16px; background: linear-gradient(-160deg, #161a22, #0f1b25); }
.nextcheat-cat[open] { border-color: #ff6b6159; box-shadow: 0 14px 40px -26px #ff6b6199; }
.nextcheat-cat > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; padding: 18px 24px; cursor: pointer; list-style: none; color: #f1f8ff; }
.nextcheat-cat-title { font-weight: 800; font-size: 18px; }
.nextcheat-cat-count { padding: 3px 10px; border: 1px solid #ff6b6155; border-radius: 999px; background: #ff6b611f; color: #ffc2bb; font-size: 13px; font-weight: 700; }
.nextcheat-groups { padding: 4px 24px 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px 24px; }
.nextcheat-group h3 { margin: 0 0 10px; color: #ff9a8f; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.nextcheat-group h3 span { margin-right: 4px; color: #a9c0cd; }
.nextcheat-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.nextcheat-group li { display: flex; align-items: flex-start; gap: 10px; color: #d4e3ec; font-size: 14px; line-height: 1.45; }
.nextcheat-group li .icon { flex-shrink: 0; width: 13px; height: 13px; margin-top: 4px; color: #5eead4; }
.nextcheat-group li strong { display: block; color: #f1f8ff; font-weight: 700; }
.nextcheat-group li small { display: block; color: #a9c0cd; font-size: 13px; }
.nextcheat-group li.is-top .icon { color: #ff8a80; }
.nextcheat-group li.is-top strong::after { content: "\2605"; margin-right: 6px; color: #ff8a80; font-size: 11px; }
.page-nextcheat .nextcheat-count { border-color: #ff6b6155; background: #ff6b611f; color: #ffc2bb; }
.nextcheat-version-count { margin: -6px 0 0; color: #ff9a8f; font-size: 14px; font-weight: 800; letter-spacing: 0.04em; }

@media (prefers-reduced-motion: reduce) {
  .nextcheat-version { transition: none; }
  .nextcheat-version:hover { transform: none; }
}

/* /learn/ guides: readable article width, theme tables, card grid (src/learn-pages.js). */
.learn-article,
.learn-hub {
  max-width: 880px;
}
.learn-article h1,
.learn-hub h1 {
  margin-bottom: 12px;
}
.learn-meta {
  margin: 4px 0 20px;
  font-size: 14px;
  color: #a9c0cd;
}
.learn-body h2,
.learn-hub h2 {
  margin: 32px 0 10px;
  font-size: 22px;
  color: #f1f8ff;
}
.learn-body p {
  margin: 0 0 12px;
  line-height: 1.7;
  color: #c4d4de;
}
.learn-body a,
.learn-hub .game-guide-lead a {
  color: #6ee8d1;
}
.learn-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 8px;
}
.learn-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  line-height: 1.6;
  color: #c4d4de;
}
.learn-list .icon {
  flex-shrink: 0;
  margin-top: 5px;
  color: #5eead4;
}
.learn-table-wrap {
  overflow-x: auto;
  margin: 8px 0 16px;
  border: 1px solid #243a48;
  border-radius: 12px;
  scrollbar-width: thin;
  scrollbar-color: #29404f transparent;
}
.learn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.learn-table th,
.learn-table td {
  padding: 10px 14px;
  text-align: start;
  border-bottom: 1px solid #243a48;
  vertical-align: top;
}
.learn-table th {
  background: #101c27;
  color: #f1f8ff;
  font-weight: 700;
}
.learn-table td {
  color: #c4d4de;
}
.learn-table tr:last-child td {
  border-bottom: 0;
}
.learn-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.learn-card {
  display: grid;
  gap: 6px;
  height: 100%;
  padding: 20px;
  border: 1px solid #243a48;
  border-radius: 14px;
  background: #0f1b25;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.learn-card:hover {
  border-color: #2dd4bf;
  transform: translateY(-2px);
}
.learn-card strong {
  color: #f1f8ff;
  font-size: 17px;
}
.learn-card span {
  color: #a9c0cd;
  font-size: 14px;
  line-height: 1.5;
}
@media (prefers-reduced-motion: reduce) {
  .learn-card {
    transition: none;
  }
  .learn-card:hover {
    transform: none;
  }
}

/* Home page "Try before you buy" (src/components/try.js): two demo posters and three real ways to try.
   The demo pages themselves load their own stylesheet, /assets/arena/arena.css. */
.try-home { position:relative; isolation:isolate; overflow:clip; padding:clamp(20px,3vw,36px); border-radius:30px; border:1px solid #20394a;
  background:radial-gradient(70% 55% at 0% 0%,rgba(45,212,191,.17),transparent 62%),radial-gradient(60% 55% at 100% 100%,rgba(118,216,244,.16),transparent 62%),linear-gradient(-180deg,#0d1922,#091219); }
.try-home::before { content:""; position:absolute; inset:0; z-index:-1; background:repeating-linear-gradient(-90deg,rgba(118,216,244,.05) 0 1px,transparent 1px 44px),repeating-linear-gradient(0deg,rgba(118,216,244,.05) 0 1px,transparent 1px 44px); -webkit-mask:linear-gradient(180deg,#000,transparent 55%); mask:linear-gradient(180deg,#000,transparent 55%); pointer-events:none; }
.try-home-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 24px; margin-bottom:24px; }
.try-home-head > div { max-width:720px; }
.try-home-head h2 { margin:0; font-size:clamp(28px,3.4vw,42px); line-height:1.1; letter-spacing:-.02em; color:#f3faff; }
.try-home-head p { margin:10px 0 0; color:#a9c0cd; }
.try-home-head .try-home-chip { display:inline-flex; align-items:center; gap:8px; margin:0 0 14px; padding:6px 12px; border-radius:999px; background:rgba(20,241,149,.12); border:1px solid rgba(20,241,149,.38); color:#a5f6d3; font-size:12.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.try-home-chip .icon { width:12px; height:12px; }
.try-home-posters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.try-poster { position:relative; isolation:isolate; display:block; border-radius:22px; overflow:clip; border:1px solid #28434f; color:#f1f8ff; text-decoration:none; box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 6px rgba(94,234,212,.05); }
.try-poster img { display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; transition:transform .9s ease; }
.try-poster::after { content:""; position:absolute; inset:0; background:radial-gradient(60% 60% at 50% 50%,rgba(5,10,14,.15),rgba(5,10,14,.6)); pointer-events:none; }
.try-poster:hover img { transform:scale(1.035); }
.try-poster:focus-visible { outline:2px solid #76d8f4; outline-offset:3px; }
.try-poster-label { position:absolute; z-index:1; right:50%; top:50%; transform:translate(50%,-50%); display:flex; flex-direction:column; align-items:center; gap:8px; width:max-content; max-width:88%; text-align:center; }
.try-poster-play { display:grid; place-items:center; width:64px; height:64px; border-radius:50%; color:#03211b; background:linear-gradient(-110deg,#76d8f4,#14f195); box-shadow:0 0 0 8px rgba(94,234,212,.18),0 18px 40px -10px rgba(20,241,149,.6); transition:transform .3s ease; }
.try-poster-play .icon { width:22px; height:22px; margin-right:3px; }
.try-poster:hover .try-poster-play { transform:scale(1.08); }
.try-poster-label b { font-size:clamp(20px,2.6vw,32px); letter-spacing:-.02em; text-shadow:0 2px 14px rgba(0,0,0,.7); }
.try-poster-label small { font-size:14px; font-weight:700; color:#d6f5ee; text-shadow:0 1px 8px rgba(0,0,0,.8); }
.try-home-note { margin:14px 2px 0; font-size:13px; color:#9fb3bf; }
.try-home-chips { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0; padding:0; list-style:none; }
.try-home-chips li { padding:6px 12px; border-radius:999px; font-size:13px; font-weight:700; color:#bfe9df; background:rgba(45,212,191,.08); border:1px solid rgba(45,212,191,.22); }
.try-home-ways { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:16px; margin:22px 0 0; padding:0; list-style:none; }
.try-home-way { --tone:#5eead4; display:flex; flex-direction:column; height:100%; border-radius:20px; overflow:clip; background:#0c1720; border:1px solid #20394a; color:inherit; text-decoration:none; transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease; }
.try-home-way-cyan { --tone:#76d8f4; }
.try-home-way-discord { --tone:#8f9bff; }
.try-home-way:hover { transform:translateY(-5px); border-color:color-mix(in srgb,var(--tone) 70%,transparent); box-shadow:0 22px 46px -16px color-mix(in srgb,var(--tone) 50%,transparent); }
.try-home-way:focus-visible { outline:2px solid #76d8f4; outline-offset:3px; }
.try-home-pic { position:relative; display:block; height:132px; overflow:clip; flex-shrink:0; }
.try-home-pic img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }
.try-home-way:hover .try-home-pic img { transform:scale(1.06); }
.try-home-pic::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,#0c1720,rgba(12,23,32,.2) 70%); }
.try-home-way-discord .try-home-pic { background:radial-gradient(60% 90% at 70% 50%,rgba(88,101,242,.5),transparent 70%),linear-gradient(-120deg,#141a44,#0d2a33); }
.try-home-way-discord .try-home-pic img { object-fit:contain; padding:6px 0; mix-blend-mode:lighten; }
.try-home-badge { position:absolute; z-index:1; right:16px; top:12px; padding:5px 10px; border-radius:999px; font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#03211b; background:linear-gradient(-110deg,#76d8f4,#14f195); }
.try-home-copy { display:flex; flex:1; flex-direction:column; gap:9px; padding:4px 24px 24px; }
.try-home-copy b { font-size:19px; letter-spacing:-.01em; color:#f1f8ff; }
.try-home-copy > span:not(.try-home-link) { color:#a9c0cd; font-size:14.5px; }
.try-home-link { display:inline-flex; align-items:center; gap:6px; margin-top:auto; padding-top:4px; font-weight:800; color:var(--tone); }
.try-home-link .icon { width:14px; height:14px; }
@media (max-width:700px) { .try-home-posters { grid-template-columns:minmax(0,1fr); } .try-home { border-radius:24px; } }
@media (prefers-reduced-motion:reduce) { .try-poster img, .try-home-pic img, .try-home-way, .try-poster-play { transition:none; } }

/* More languages, 2026-10-30: Russian, Turkish, Arabic, Chinese, Japanese, Korean, Vietnamese, Indonesian, Thai,
   Hindi, Urdu and Punjabi (js/languages.js). Loaded after the page styles, just before the UI guardrails (which stay
   last).
   1. Manrope's Cyrillic, Latin Extended and Vietnamese letters, self-hosted (font-src 'self'). Each file only
      downloads when a page uses letters in its range.
   2. Good system fonts for scripts Manrope does not have, chosen by the page language. Manrope stays first, so
      prices, numbers and Latin names look the same in every language.
   3. Line breaking for Chinese, Japanese, Korean and Thai.
   Arabic and Urdu pages (dir="rtl") load a mirrored copy of the whole stylesheet instead: see rtl.css. */

@font-face {
  font-family: Manrope;
  src: url("assets/manrope-vietnamese-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: Manrope;
  src: url("assets/manrope-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Manrope;
  src: url("assets/manrope-cyrillic-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* 2. System fonts per script. */
html:lang(hi) body {
  font-family: Manrope, "Nirmala UI", "Noto Sans Devanagari", "Segoe UI", sans-serif;
}
html:lang(pa) body {
  font-family: Manrope, "Nirmala UI", "Noto Sans Gurmukhi", Raavi, "Segoe UI", sans-serif;
}
html:lang(ar) body {
  font-family: Manrope, "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
}
html:lang(ur) body {
  font-family: Manrope, "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Segoe UI", Tahoma, sans-serif;
}
html:lang(zh) body {
  font-family: Manrope, "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif;
}
html:lang(ja) body {
  font-family: Manrope, "Yu Gothic UI", "Yu Gothic", Meiryo, "Hiragino Sans", "Noto Sans JP", sans-serif;
}
html:lang(ko) body {
  font-family: Manrope, "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}
html:lang(th) body {
  font-family: Manrope, "Leelawadee UI", "Noto Sans Thai", Tahoma, sans-serif;
}
/* Scripts with tall letters (marks above and below the line) need a little more room between lines. */
html:is(:lang(hi), :lang(pa), :lang(th), :lang(ar)) body {
  line-height: 1.7;
}
/* Nastaliq Urdu is taller still. */
html:lang(ur) body {
  line-height: 1.85;
}
/* Wide letter spacing and capitals only suit Latin and Cyrillic; other scripts have no capitals and must not be
   pulled apart (Arabic letters join, Thai and Indic marks stack). */
html:is(:lang(ar), :lang(ur), :lang(hi), :lang(pa), :lang(th), :lang(zh), :lang(ja), :lang(ko)) :is(.eyebrow, .section-kicker, .locale-title, .kicker, small, .badge, .tag, .pill) {
  letter-spacing: 0;
}
html:is(:lang(ar), :lang(ur)) body * {
  letter-spacing: 0 !important;
}

/* 3. Line breaking. Chinese and Japanese break between characters (strict rules keep small kana and closing marks off
   the start of a line); Korean breaks between words like English; Thai breaks at words using the browser's dictionary.
   Long names and codes may still break anywhere rather than spill out of their box. */
html:is(:lang(zh), :lang(ja)) body {
  line-break: strict;
  overflow-wrap: break-word;
}
html:lang(ko) body {
  word-break: keep-all;
  overflow-wrap: break-word;
}
html:lang(th) body {
  line-break: normal;
  overflow-wrap: break-word;
}

/* Header polish (2026-10-30, owner: "more polished and clean looking and visually appealing", plus Try free).
   A glass bar with a soft mint line, the page links in one rail, search / language / cart in one group, and a
   picture-only profile chip (the name is in its menu). Same mint and cyan as the rest of the store.
   Loaded after languages.css, before ui-guardrails.css. */

/* ---------- Bar ---------- */
.ps-header,
.ps-header.is-scrolled {
  background: linear-gradient(-180deg, #0b1620f2, #08121bec);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid #1a2c38;
}
.ps-header::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(-90deg, transparent 4%, #2dd4bf59 28%, #76d8f485 50%, #8b9cff4d 72%, transparent 96%);
  pointer-events: none;
}

/* Icons sit in front of each page link; the desktop bar only shows the Try free one. */
.nav-ico {
  display: none;
}
.nav-ico .icon {
  width: 14px;
  height: 14px;
}

/* ---------- Desktop bar ---------- */
@media (min-width: 1200px) {
  .ps-header,
  .ps-nav-inner {
    min-height: 72px;
  }
  .ps-nav-inner {
    gap: 14px;
  }
  .site-nav {
    gap: 10px;
  }
  .nav-links,
  .nav-tools {
    display: inline-flex;
    align-items: center;
    padding: 4px;
    border: 1px solid #1c3140;
    border-radius: 14px;
    background: linear-gradient(-180deg, #0f1c27d9, #0b1620d9);
    box-shadow: inset 0 1px 0 #ffffff0a, 0 10px 26px #0000002e;
  }
  .nav-links {
    gap: 2px;
  }
  .nav-links .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    color: #a9bdca;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.005em;
    white-space: nowrap;
    transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
  }
  /* The rail highlight replaces the old underline. */
  .nav-links .nav-link::after,
  .nav-links .nav-link:not([aria-current])::after {
    display: none;
  }
  .nav-links .nav-link:hover,
  .nav-links .nav-link:focus-visible {
    color: #f1f8ff;
    background: #ffffff0d;
  }
  .nav-links .nav-link[aria-current] {
    color: #eafffb;
    background: linear-gradient(-180deg, #153631, #10292c);
    box-shadow: inset 0 0 0 1px #2dd4bf4d, 0 0 18px #2dd4bf1f;
  }
  .nav-links .nav-link--try {
    color: #8ff2dd;
  }
  .nav-links .nav-link--try:hover,
  .nav-links .nav-link--try:focus-visible {
    color: #c9fff3;
    background: #2dd4bf14;
  }
  .nav-link--try .nav-ico {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    color: #03211b;
    background: linear-gradient(-135deg, #5eead4, #76d8f4);
    box-shadow: 0 0 12px #2dd4bf4d;
    transition: transform 0.2s;
  }
  .nav-link--try .nav-ico .icon {
    width: 8px;
    height: 8px;
    margin-inline-start: 1px;
  }
  .nav-link--try:hover .nav-ico {
    transform: scale(1.08);
  }

  /* Search, language and cart: one group with thin dividers. */
  .nav-tools {
    gap: 0;
  }
  .nav-tools > * + * {
    position: relative;
  }
  .nav-tools > * + *::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 9px;
    bottom: 9px;
    width: 1px;
    background: #1f3442;
    pointer-events: none;
  }
  .nav-tools .header-tool {
    min-width: 38px;
    height: 36px;
    border-color: transparent;
    border-radius: 10px;
    color: #b8cad6;
    background: transparent;
  }
  .nav-tools .header-tool:hover,
  .nav-tools .header-tool:focus-visible,
  .nav-tools .header-tool[aria-expanded="true"] {
    color: #fff;
    border-color: transparent;
    background: #ffffff0f;
  }
  .nav-tools .cart-badge {
    top: -5px;
    left: -5px;
  }

  /* Sign in: Discord blue, softer and rounder. */
  .ps-header .nav-action:not(.is-signed-in) {
    min-height: 44px;
    padding: 0 16px;
    gap: 9px;
    border: 1px solid #8a94ff66;
    border-radius: 13px;
    color: #fff;
    background: linear-gradient(-180deg, #5562e8, #4350c8);
    box-shadow: inset 0 1px 0 #ffffff29, 0 8px 22px #4350c838;
    font-size: 13.5px;
    font-weight: 700;
  }
  .ps-header .nav-action:not(.is-signed-in):hover,
  .ps-header .nav-action:not(.is-signed-in):focus-visible {
    border-color: #a9b1ffa0;
    background: linear-gradient(-180deg, #606dee, #4b58d2);
  }

  /* Signed in: picture and a small arrow; the name and handle are in the menu it opens. */
  .ps-header .nav-action.is-signed-in {
    gap: 8px;
    min-height: 44px;
    padding: 4px 4px 4px 12px;
    border: 1px solid #1c3140;
    border-radius: 999px;
    background: linear-gradient(-180deg, #0f1c27d9, #0b1620d9);
    box-shadow: inset 0 1px 0 #ffffff0a;
  }
  .ps-header .nav-action.is-signed-in:hover,
  .ps-header .nav-action.is-signed-in:focus-visible,
  .ps-header .nav-action.is-signed-in[aria-expanded="true"] {
    border-color: #2dd4bf66;
    background: #10212c;
  }
  .ps-header .nav-action.is-signed-in .nav-profile-name {
    display: none;
  }
  .ps-header .nav-action.is-signed-in .nav-avatar {
    width: 34px;
    height: 34px;
    box-shadow: 0 0 0 2px #0b1620, 0 0 0 3px #2dd4bf73;
  }
  .ps-header .nav-action.is-signed-in::after {
    content: "";
    width: 10px;
    height: 10px;
    background: #8fa6b4;
    -webkit-mask: url("/assets/ui/chevron-right.svg") center / contain no-repeat;
    mask: url("/assets/ui/chevron-right.svg") center / contain no-repeat;
    transform: rotate(-90deg);
    transition: transform 0.2s;
  }
  .ps-header .nav-action.is-signed-in[aria-expanded="true"]::after {
    transform: rotate(90deg);
  }
}

/* Every language must fit on one line (Polish, French and Spanish words are long): the sign-in button says just
   "Sign in" next to the Discord logo, and narrower screens get a tighter rail and "EN" without the currency or the
   arrow (the currency column is still in the menu). */
@media (min-width: 1200px) {
  .nav-action-long {
    display: none;
  }
}
@media (min-width: 1200px) and (max-width: 1439px) {
  .nav-links .nav-link {
    padding: 8px 8px;
    font-size: 13.5px;
  }
  .site-nav,
  .ps-nav-inner {
    gap: 6px;
  }
  .nav-tools .locale-currency,
  .nav-tools .locale-chevron {
    display: none;
  }
}
@media (min-width: 1200px) and (max-width: 1279px) {
  .nav-links .nav-link {
    padding: 8px 6px;
    font-size: 13px;
  }
  .nav-links .nav-link--try {
    gap: 6px;
  }
  .ps-header .nav-action:not(.is-signed-in) {
    padding: 0 12px;
  }
}

/* ---------- Menu (below 1200px) ---------- */
@media (max-width: 1199px) {
  /* Fully solid: even 2% see-through let the bright hero headline show behind the links. */
  .site-nav {
    padding: 12px;
    border-color: #1c3140;
    border-radius: 0 0 18px 18px;
    background: #0b141c;
  }
  .nav-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .site-nav .nav-links > .nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
    color: #d6e4ec;
    font-size: 15px;
    font-weight: 600;
  }
  .site-nav .nav-links > .nav-link::after {
    display: none;
  }
  .site-nav .nav-links > .nav-link:hover,
  .site-nav .nav-links > .nav-link:focus-visible,
  .site-nav .nav-links > .nav-link[aria-current] {
    color: #f1f8ff;
    background: #ffffff0a;
  }
  .site-nav .nav-links > .nav-link[aria-current] {
    box-shadow: inset 0 0 0 1px #2dd4bf40;
  }
  .nav-links .nav-ico {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid #1c3140;
    border-radius: 10px;
    color: #5eead4;
    background: #0f1c27;
  }
  .nav-links .nav-link--try {
    color: #8ff2dd;
  }
  .nav-links .nav-link--try .nav-ico {
    border-color: transparent;
    color: #03211b;
    background: linear-gradient(-135deg, #5eead4, #76d8f4);
  }
  .site-nav .nav-tools {
    padding: 10px 10px 0;
    border-top: 1px solid #1c3140;
    margin-top: 8px;
  }
}

/* Site-wide UI guardrails (2026-10-25). The rules and reasons are in CLAUDE.md, "UI/UX & Design System Guardrails". */
:root {
  --chevron:url("/assets/ui/chevron-right.svg");
  --shield-check:url("/assets/ui/shield-check.svg");
}
/* No browser disclosure triangles. Safari draws ::-webkit-details-marker even on flex summaries. */
summary { list-style:none; }
summary::-webkit-details-marker { display:none; }
/* Plain text toggles share one chevron. A new <details> joins this list or brings its own icon. */
:is(.checkout-signin,.checkout-requirements,.checkout-coupon,.checkout-optional-fields,.payment-more,.checkout-payment-notes,.order-review-breakdown,.rie-all-games,.status-rie,.seo-faq-item,.nextcheat-cat) > summary { transition:color .15s ease; }
:is(.checkout-signin,.checkout-requirements,.checkout-coupon,.checkout-optional-fields,.payment-more,.checkout-payment-notes,.order-review-breakdown,.rie-all-games,.status-rie,.seo-faq-item,.nextcheat-cat,.stock-row) > summary::before { content:""; display:inline-block; flex:none; width:12px; height:12px; margin-left:8px; vertical-align:-1px; background:currentColor; -webkit-mask:var(--chevron) center/contain no-repeat; mask:var(--chevron) center/contain no-repeat; transition:transform .2s ease; }
:is(.checkout-signin,.checkout-requirements,.checkout-coupon,.checkout-optional-fields,.payment-more,.checkout-payment-notes,.order-review-breakdown,.rie-all-games,.status-rie,.seo-faq-item,.nextcheat-cat,.stock-row)[open] > summary::before { transform:rotate(-90deg); }
:is(.checkout-signin,.checkout-requirements,.checkout-coupon,.checkout-optional-fields,.payment-more,.checkout-payment-notes,.order-review-breakdown,.rie-all-games,.status-rie,.seo-faq-item,.nextcheat-cat) > summary:hover { color:#fff; }
@media (prefers-reduced-motion:reduce) { summary::before { transition:none; } }
/* No resize handles. Text boxes are sized for their content instead. */
textarea { resize:none; }

/* Checkout polish (2026-10-25): one inner edge for the whole payment card, roomier payment choices,
   matching fields, chevron toggles and a framed order review. Loaded last so it wins over older layers. */

/* 1. Every block in the payment card sits on the same 16px inner edge; nothing reaches the border. */
.checkout-refined .checkout-layout .checkout-payment { --panel-pad:16px; container:co-pay / inline-size; overflow:clip; padding-bottom:0; }
.checkout-refined .checkout-layout .checkout-fields { gap:14px; padding:14px var(--panel-pad) 4px; }
.checkout-refined .checkout-layout .payment-methods { margin:10px var(--panel-pad) 12px; }
.checkout-refined .checkout-layout #checkout-action,
.checkout-refined .checkout-layout .checkout-status { margin-inline:var(--panel-pad); }
.checkout-refined .checkout-layout .checkout-trust { gap:6px 18px; margin:14px var(--panel-pad) 0; color:#b6c8d3; }
.checkout-refined .checkout-layout .checkout-refund-note { margin:8px var(--panel-pad) 12px; }
.checkout-refined .checkout-layout .checkout-payment-notes { margin:0 var(--panel-pad); }
.checkout-refined .checkout-layout .checkout-payment-notes .checkout-fine-print { margin:0 0 10px; }
.checkout-refined .checkout-layout .checkout-support { margin:10px var(--panel-pad) 16px; }

/* 2. Text toggles: chevron (ui-guardrails.css), readable contrast, even spacing. */
.checkout-refined :is(.checkout-optional-fields,.payment-more,.checkout-payment-notes,.checkout-requirements) > summary { min-height:0; padding:10px 0; color:#c5d4de; font-size:12px; font-weight:600; }
.checkout-refined :is(.checkout-optional-fields,.payment-more) > summary span { margin-right:6px; color:#7f98a8; font-weight:500; }
.checkout-refined :is(.checkout-optional-fields,.payment-more,.checkout-payment-notes,.checkout-requirements) > summary:hover { color:#fff; }
@media(max-width:420px) { .checkout-refined .payment-more > summary span { margin-right:20px; } }
@media(max-width:900px) { .checkout-refined .order-review-breakdown > summary { display:block; } }

/* 3. Fields: one height, one surface, one focus ring. The notes box grows with its text instead of a drag handle. */
.checkout-refined .checkout-fields label { display:block; margin-bottom:6px; }
.checkout-refined .checkout-fields :is(input,textarea),
.checkout-refined .shipping-fields input,
.checkout-refined .checkout-coupon-row input { min-height:44px; padding:10px 12px; border:1px solid #29404f; border-radius:8px; background:#0b1620; color:#eef5f9; line-height:1.5; box-shadow:none; transition:border-color .15s ease,box-shadow .15s ease; }
.checkout-refined .checkout-fields :is(input,textarea):focus,
.checkout-refined .shipping-fields input:focus,
.checkout-refined .checkout-coupon-row input:focus-visible { border-color:#2dd4bf; outline:none; box-shadow:0 0 0 3px #2dd4bf2e; }
.checkout-refined .checkout-fields textarea { display:block; min-height:88px; max-height:220px; overflow-y:auto; resize:none; field-sizing:content; }
.checkout-refined .checkout-fields .field-help { margin:6px 0 0; color:#8fa5b2; font-size:11.5px; }
.checkout-refined .checkout-optional-fields > div { margin-block:2px 12px; }
.checkout-refined .checkout-optional-fields > div + div { margin-top:14px; }
@media(min-width:901px) { .checkout-refined .checkout-fields textarea { font-size:14px; } }

/* 4. Payment choices. Narrow card: one full-width row each, radio on the right.
      Wide card (560px+): the instant methods sit side by side as small tiles, radio in the logo row,
      so a title can never run under the radio. */
.checkout-refined .checkout-layout .payment-method-row--main,
.checkout-refined .checkout-layout .payment-method-row--more { grid-template-columns:minmax(0,1fr); gap:8px; }
.checkout-refined .checkout-layout .payment-methods .payment-method { position:relative; display:grid; grid-template-columns:40px minmax(0,1fr); align-items:center; gap:12px; min-height:64px; padding:12px 12px 12px 44px; border-radius:10px; text-align:right; }
.checkout-refined .checkout-layout .payment-methods .payment-method strong { display:block; color:#f1f8ff; font-size:13px; line-height:1.35; }
.checkout-refined .checkout-layout .payment-methods .payment-method small { display:block; margin-top:3px; color:#a9c0cd; font-size:11.5px; line-height:1.45; }
.checkout-refined .checkout-layout .payment-methods .payment-method::after { top:50%; left:14px; width:18px; height:18px; margin-top:-9px; border:2px solid #5d7a8a; border-radius:50%; background:#08131c; box-sizing:border-box; }
.checkout-refined .checkout-layout .payment-methods .payment-method:has(input:checked) { border-color:#6ee8d1; background:#153133; box-shadow:0 0 0 1px #6ee8d140,0 6px 22px #2dd4bf12; }
.checkout-refined .checkout-layout .payment-methods .payment-method:has(input:checked)::after { border:5px solid #6ee8d1; background:#08131c; }
.checkout-refined .checkout-layout .payment-methods .payment-method:hover:not(:has(input:checked)) { border-color:#4b6b7d; }
.checkout-refined .checkout-layout .payment-methods .payment-method[hidden] { display:none; }
.checkout-refined .checkout-layout .payment-methods [data-payment="wallet-pay"] { grid-column:auto; }
/* Logos: the same 40px rounded tile for every method; brand colours stay. */
.checkout-refined .checkout-layout .payment-methods .payment-logo { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:40px; height:40px; padding:8px; border:1px solid #ffffff1f; border-radius:10px; }
.checkout-refined .checkout-layout .payment-methods .payment-logo img { width:100%; height:100%; object-fit:contain; }
.checkout-refined .checkout-layout .payment-methods :is(.payment-logo--btc,.payment-logo--eth) { padding:6px; background:#0f2230; }
.checkout-refined .checkout-layout .payment-methods .payment-logo--wallets { flex-direction:column; gap:3px; padding:6px 5px; background:#111a26; }
.checkout-refined .checkout-layout .payment-methods .payment-logo--wallets img { width:100%; height:auto; min-height:0; flex:1 1 0; }
@container co-pay (min-width:560px) {
  .checkout-refined .checkout-layout .payment-method-row--main { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
  .checkout-refined .checkout-layout .payment-method-row--more { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .checkout-refined .checkout-layout .payment-method-row--main .payment-method { grid-template-columns:minmax(0,1fr); align-content:start; align-items:start; gap:10px; min-height:0; padding:14px; }
  .checkout-refined .checkout-layout .payment-method-row--main .payment-method::after { top:25px; margin-top:0; }
}

/* 5. Order review: framed thumbnail and a calm delivery note. */
.checkout-refined .order-review-item { grid-template-columns:60px minmax(0,1fr) auto; }
.order-review-thumb { display:block; width:60px; height:48px; padding:5px; border:1px solid #243a48; border-radius:12px; background:#0b1620; overflow:hidden; }
.checkout-refined .order-review-thumb img { display:block; width:100%; height:100%; border-radius:7px; background:transparent; object-fit:contain; }
.checkout-refined .checkout-review .order-review-delivery { position:relative; margin:14px 0 0; padding:10px 36px 10px 12px; border:1px solid #2dd4bf38; border-radius:10px; background:linear-gradient(-135deg,#2dd4bf14,#5ee5ff08); color:#cfe5ec; font-size:12px; line-height:1.5; }
.checkout-refined .checkout-review .order-review-delivery::before { content:""; position:absolute; right:12px; top:11px; width:16px; height:16px; background:#5eead4; -webkit-mask:var(--shield-check) center/contain no-repeat; mask:var(--shield-check) center/contain no-repeat; }
.checkout-refined .checkout-review .order-review-delivery:empty { display:none; }

/* Right-to-left pages only (Arabic, Urdu), 2026-10-30. scripts/build.mjs writes build/styles-rtl.css: every rule of
   styles.css mirrored by rtlcss (left <-> right, paddings, borders, corners, arrows drawn in CSS, translateX), then this
   file, which is not mirrored. scripts/localize.mjs points Arabic and Urdu pages at it. Other pages never load it. */

/* Codes, keyboard keys, emails and links typed by the buyer stay left to right inside Arabic text. Prices are wrapped
   in a left-to-right isolate by the translation step (isolatePrices in js/i18n.js). */
code,
kbd,
pre,
samp,
input[type="email"],
input[type="url"] {
  direction: ltr;
  unicode-bidi: isolate;
}
pre {
  text-align: left;
}

/* Language and currency menu: the small English names ("Simplified Chinese") read left to right, so a long one is cut
   at its own end ("Simplified Chi…"), still lined up on the right with the names above them. */
.locale-col button small {
  unicode-bidi: plaintext;
  text-align: right;
}

/* The demo arena is a game screen, not a page: its canvas, menu and HUD keep the left-to-right layout from
   assets/arena/arena.css (which is not mirrored). */
.arena {
  direction: ltr;
}

/* Arrow icons point the reading direction, so "forward" points left. The drawing flips inside the icon; hover nudges
   and rotations set on the icon itself (already mirrored) still apply. */
svg.icon > use[href="#icon-arrow-right"],
svg.icon > use[href="#icon-arrow-up-right"] {
  transform: scaleX(-1);
  transform-box: fill-box;
  transform-origin: center;
}