/* REXSA public website — one component system. Palette and scales: tokens.css. */
*,*::before,*::after {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font: var(--fs-body)/1.7 var(--font-sans);
  -webkit-font-smoothing: antialiased
}

body.is-locked {
  overflow: hidden
}

[hidden] {
  display: none!important
}

a {
  color: inherit;
  text-decoration: none
}

button,input,textarea,select {
  font: inherit
}

button,a,input,summary {
  -webkit-tap-highlight-color: transparent
}

button {
  color: inherit;
  cursor: pointer
}

button:disabled {
  cursor: not-allowed
}

img,svg {
  display: block;
  max-width: 100%
}

img {
  height: auto
}

svg {
  flex-shrink: 0
}

button svg,.btn svg,.text-link svg {
  width: 20px;
  height: 20px
}

button {
  border: 0
}

h1,h2,h3,h4,p,figure {
  margin: 0
}

h1,h2,h3,h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: var(--tracking-heading)
}

h1 {
  font-size: var(--fs-h1)
}

h2 {
  font-size: var(--fs-h2)
}

h3 {
  font-size: 1.5rem
}

h4 {
  font-size: 1.125rem
}

p {
  overflow-wrap: break-word
}

ul,ol {
  padding: 0;
  margin: 0
}

dl,dd {
  margin: 0
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0
}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 5px
}

::selection {
  background: var(--accent);
  color: white
}

main {
  min-height: 65svh;
  padding-top: var(--header-h)
}

main:focus {
  outline: none
}

.page-home main {
  padding-top: 0
}

.container {
  width: min(calc(100% - var(--gutter)*2),var(--container));
  margin-inline: auto
}

.container--wide {
  max-width: var(--container-wide)
}

.band {
  padding-block: var(--section-y)
}

.band--tight {
  padding-block: var(--s-7)
}

.band--ruled,.band--ruled-strong {
  border-top: 1px solid var(--border)
}

.pagehead {
  padding: var(--s-9) 0 var(--s-7)
}

.pagehead .eyebrow {
  margin-bottom: var(--s-6)
}

.pagehead__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-6)
}

.pagehead__meta {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-5)
}

.pagehead__sub {
  color: var(--text-secondary);
  margin-top: var(--s-5);
  max-width: 55ch
}

.pagehead__actions {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-7);
  margin-bottom: var(--s-7)
}

.section-heading>.lead {
  max-width: 30ch
}

.section-head {
  margin-bottom: var(--s-6)
}

.display {
  font-size: var(--fs-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.05
}

.lead {
  color: var(--text-secondary);
  font-size: var(--fs-body-lg);
  line-height: 1.8;
  max-width: 42ch
}

.eyebrow,.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.7
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--text-secondary);
  margin-bottom: var(--s-7)
}

.eyebrow>span:first-child {
  color: var(--text-primary)
}

.eyebrow i {
  width: 28px;
  height: 1px;
  background: var(--border-strong)
}

.label {
  color: var(--text-muted)
}

.label--ink {
  color: var(--text-primary)
}

.mono {
  font-family: var(--font-mono);
  font-size: .9em;
  overflow-wrap: anywhere
}

.small {
  font-size: .8125rem
}

.muted,.dim {
  color: var(--text-secondary)
}

.h1 {
  font-size: var(--fs-h1)
}

.h2 {
  font-size: var(--fs-h2)
}

.h3 {
  font-size: 1.5rem
}

.h4 {
  font-size: 1.125rem
}

.actions,.row {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  flex-wrap: wrap
}

.row--center {
  justify-content: center
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  min-height: 50px;
  padding: 13px 23px;
  font-size: .8125rem;
  font-weight: 600;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  background: var(--surface);
  color: white;
  text-align: center;
  transition: background var(--t-base),border-color var(--t-base),transform var(--t-base) var(--ease)
}

.btn:hover {
  background: var(--rexsa-text-secondary);
  border-color: var(--text-muted)
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent)
}

.btn--primary:hover {
  background: var(--accent-pressed);
  border-color: var(--accent-pressed);
  transform: translateY(-2px)
}

.btn--quiet {
  background: transparent
}

.btn--danger {
  color: var(--error)
}

.btn--block {
  display: flex;
  width: 100%
}

.btn--sm {
  min-height: 40px;
  padding: 8px 14px;
  font-size: .75rem
}

.btn--lg {
  min-height: 54px
}

.btn--spaced {
  margin-top: var(--s-6)
}

.btn--spaced-sm {
  margin-top: var(--s-3)
}

.btn:disabled,.btn--disabled {
  color: var(--text-muted);
  border-color: var(--border);
  background: var(--surface);
  transform: none
}

.btn[aria-busy=true] {
  opacity: .65;
  cursor: wait
}

.text-link,.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  font-size: .8125rem;
  font-weight: 600;
  min-height: 44px
}

.text-link .arrow,.btn .arrow {
  transition: transform var(--t-base) var(--ease)
}

.text-link:hover .arrow,.btn:hover .arrow {
  transform: translateX(4px)
}

.arrow {
  width: 20px;
  height: 20px
}

.arrow--up {
  transform: rotate(-45deg)
}

.text-link:hover .arrow--up {
  transform: translate(2px,-2px) rotate(-45deg)
}

.link {
  text-decoration: underline;
  text-underline-offset: 4px
}

.link:hover {
  color: var(--focus)
}

.back-link {
  display: inline-block;
  font-size: .8125rem;
  color: var(--text-secondary);
  margin-bottom: var(--s-7);
  padding-block: 8px
}

/* Shared navigation and footer */
.masthead {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-header);
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: background var(--t-base),border-color var(--t-base)
}

.masthead.is-scrolled,.masthead.is-open,body:not(.page-home) .masthead {
  background: rgba(0,0,0,.94);
  border-color: var(--border)
}

.masthead__inner {
  height: 100%;
  width: min(calc(100% - var(--gutter)*2),var(--container));
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6)
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0
}

.wordmark>span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .19em
}

.rx-logo {
  width: 30px;
  height: 30px;
  object-fit: contain
}

.mainnav {
  display: flex;
  gap: var(--s-7);
  height: 100%;
  align-items: center
}

.mainnav a {
  font-size: .75rem;
  color: var(--text-secondary);
  padding: 10px 0;
  position: relative
}

.mainnav a:hover,.mainnav a[aria-current] {
  color: white
}

.mainnav a[aria-current]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 16px;
  height: 2px;
  background: var(--accent)
}

.masthead__actions {
  display: flex;
  align-items: center;
  gap: var(--s-5)
}

.nav-account {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-size: .75rem;
  min-height: 44px
}

.navtoggle {
  display: none;
  width: 44px;
  height: 44px;
  background: transparent;
  position: relative
}

.navtoggle span {
  display: block;
  width: 22px;
  height: 1px;
  background: white;
  position: absolute;
  left: 11px;
  top: 17px;
  transition: transform var(--t-base)
}

.navtoggle span+span {
  top: 25px
}

.is-open .navtoggle span {
  transform: translateY(4px) rotate(45deg)
}

.is-open .navtoggle span+span {
  transform: translateY(-4px) rotate(-45deg)
}

.navsheet {
  position: fixed;
  inset: var(--header-h) 0 0;
  background: var(--bg-subtle);
  padding: var(--s-6) var(--gutter);
  overflow-y: auto
}

.navsheet nav a {
  display: flex;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--border);
  font: 500 1.7rem var(--font-display)
}

.navsheet nav a small {
  font: var(--fs-label) var(--font-mono);
  color: var(--text-muted)
}

.navsheet a .arrow {
  margin-left: auto
}

.navsheet>[class=label] {
  margin-top: var(--s-7)
}

.navsheet a[aria-current] {
  color: var(--focus)
}

.sitefoot {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-top: var(--s-8)
}

.sitefoot__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--s-7);
  padding-bottom: var(--s-8)
}

.sitefoot__brand p {
  max-width: 29ch;
  font-size: .8125rem;
  color: var(--text-muted);
  margin-top: var(--s-5)
}

.sitefoot nav h2 {
  margin-bottom: var(--s-5)
}

.sitefoot nav a {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8125rem;
  color: var(--text-secondary);
  padding: 5px 0
}

.sitefoot nav a:hover {
  color: white
}

.sitefoot nav svg {
  width: 14px;
  height: 14px
}

.sitefoot__bottom {
  border-top: 1px solid var(--border);
  padding: var(--s-5) 0;
  display: flex;
  justify-content: space-between;
  gap: var(--s-5);
  color: var(--text-muted);
  font-size: .6875rem
}

/* Full-viewport chapters. Proximity only, no nested scroll containers. */
.chapter {
  min-height: 100svh;
  position: relative;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + var(--s-7)) 0 var(--s-8);
  scroll-margin-top: 0
}

.chapter--surface {
  background: var(--surface)
}

.chapter__bottom {
  position: absolute;
  bottom: var(--s-6);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.chapter-dots {
  position: fixed;
  right: 17px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: grid;
  gap: 5px
}

.chapter-dots a {
  padding: 8px;
  position: relative
}

.chapter-dots a::before {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  background: var(--border-strong);
  border-radius: 50%;
  transition: background var(--t-base),transform var(--t-base)
}

.chapter-dots a[aria-current]::before {
  background: var(--accent);
  transform: scale(1.7)
}

.scroll-cue {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-size: .6875rem;
  color: var(--text-secondary)
}

.scroll-cue>span {
  font-size: 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  width: 32px;
  height: 42px;
  text-align: center;
  padding-top: 6px
}

.hero {
  overflow: clip;
  padding-top: var(--header-h);
  background: var(--bg)
}

.hero__layout {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  position: relative
}

.hero__copy {
  position: relative;
  z-index: 2;
  padding-block: var(--s-7) var(--s-9)
}

.hero__copy .eyebrow {
  margin-bottom: var(--s-6)
}

.blue-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0
}

.hero h1 {
  font-size: clamp(3.8rem,7.2vw,7.5rem);
  font-weight: 500;
  letter-spacing: -.065em;
  line-height: 1.025
}

.hero h1>span {
  color: var(--text-muted)
}

.hero .lead {
  margin-top: var(--s-6);
  max-width: 38ch;
  font-size: 1rem
}

.hero .actions {
  margin-top: var(--s-7)
}

.hero__meta {
  display: flex;
  gap: var(--s-5);
  color: var(--text-muted);
  font: 9px var(--font-mono);
  letter-spacing: .1em;
  margin-top: var(--s-8)
}

.hero__meta span+span::before {
  content: '+';
  margin-right: var(--s-5)
}

.hero__visual {
  margin-right: -6%;
  position: relative
}

.hero__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size: 70px 70px;
  opacity: .16;
  mask-image: radial-gradient(ellipse,black,transparent 65%)
}

.orbit {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  color: var(--border)
}

.orbit__drawing {
  width: 100%;
  height: 100%;
  transform: rotate(-18deg)
}

.orbit__core {
  color: var(--text-primary);
  position: absolute;
  inset: 37%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.orbit__core .rx-logo {
  width: 56px;
  height: 56px;
  margin-bottom: var(--s-3)
}

.orbit__core>span {
  font: 600 1.1rem var(--font-display);
  letter-spacing: .3em;
  margin-left: .3em
}

.orbit__core>small {
  font: 6px var(--font-mono);
  letter-spacing: .15em;
  white-space: nowrap;
  color: var(--text-muted);
  margin-top: var(--s-3)
}

.orbit__annotation {
  font: 8px var(--font-mono);
  letter-spacing: .15em;
  position: absolute;
  color: var(--text-muted);
  background: var(--bg);
  padding: 8px
}

.orbit__annotation--top {
  top: 12%;
  right: 3%
}

.orbit__annotation--bottom {
  bottom: 12%;
  left: 3%
}

.orbit__rotation {
  transform-origin: 300px 300px;
  animation: orbit-drift 30s linear infinite
}

.orbit--small {
  max-width: 430px
}

.orbit--small .orbit__annotation {
  background: var(--surface)
}

@keyframes orbit-drift {
  to {
    transform: rotate(360deg)
  }
}

.intro-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-9);
  align-items: center
}

.intro-layout .lead {
  margin: var(--s-6) 0
}

.tool-composition {
  border: 1px solid var(--border);
  border-radius: var(--r-surface);
  padding: var(--s-6);
  background: var(--bg)
}

.tool-composition__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-6)
}

.tool-composition__head svg {
  width: 18px;
  color: var(--text-muted)
}

.tool-line {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-6) 0;
  border-top: 1px solid var(--border)
}

.tool-line__icon {
  width: 40px;
  color: var(--text-secondary)
}

.tool-line__icon svg {
  width: 28px
}

.tool-line h3 {
  font-size: 1.125rem;
  letter-spacing: -.03em
}

.tool-line p {
  font-size: .7rem;
  color: var(--text-muted);
  margin-top: 6px
}

.tool-line__index {
  font: 10px var(--font-mono);
  margin-left: auto;
  color: var(--text-muted)
}

.tool-composition__note {
  font-size: .6875rem;
  color: var(--text-muted);
  padding-top: var(--s-5);
  border-top: 1px solid var(--border)
}

.showcase {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  border-top: 1px solid var(--border);
  margin-top: var(--s-7)
}

.showcase__nav {
  padding-top: var(--s-5)
}

.showcase__nav button {
  display: flex;
  align-items: center;
  text-align: left;
  gap: var(--s-5);
  background: transparent;
  width: 100%;
  padding: 22px 24px 22px 0;
  font: 500 1.3rem var(--font-display);
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  transition: color var(--t-base),padding-left var(--t-base)
}

.showcase__nav button>span {
  font: 10px var(--font-mono)
}

.showcase__nav .arrow {
  margin-left: auto;
  opacity: 0
}

.showcase__nav button[aria-selected=true] {
  color: white;
  padding-left: 16px
}

.showcase__nav button[aria-selected=true] .arrow {
  opacity: 1;
  color: var(--accent)
}

.showcase__panels {
  padding: var(--s-7);
  background: var(--surface);
  margin-left: var(--s-7);
  min-height: 410px
}

.showcase__symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  margin-bottom: var(--s-7);
  color: var(--text-secondary)
}

.showcase__symbol svg {
  width: 32px;
  height: 32px
}

.showcase__panel h3 {
  font-size: 2.5rem;
  margin: var(--s-4) 0
}

.showcase__panel p {
  color: var(--text-secondary);
  font-size: .875rem;
  max-width: 43ch;
  margin-bottom: var(--s-5)
}

.process-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-9)
}

.process-heading .lead {
  margin: var(--s-6) 0
}

.journey {
  list-style: none
}

.journey li {
  display: flex;
  gap: var(--s-6);
  padding-bottom: var(--s-7);
  position: relative
}

.journey li:not(:last-child)::after {
  content: '';
  position: absolute;
  width: 1px;
  left: 23px;
  top: 48px;
  bottom: 0;
  background: var(--border)
}

.journey__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  font: 11px var(--font-mono);
  flex-shrink: 0
}

.journey h3 {
  padding-top: 10px;
  font-size: 1.4rem
}

.journey p {
  margin-top: var(--s-3);
  font-size: .8125rem;
  color: var(--text-secondary);
  max-width: 45ch
}

.game-gallery {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: var(--s-5)
}

.game-tile {
  position: relative;
  isolation: isolate;
  min-height: 400px;
  overflow: hidden;
  border-radius: var(--r-control);
  background: var(--surface)
}

.game-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .8s var(--ease);
  filter: saturate(.35)
}

.game-tile:hover .game-art {
  transform: scale(1.035)
}

.game-tile__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,rgba(0,0,0,.35),transparent 25%,rgba(0,0,0,.94))
}

.game-tile__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: var(--s-5)
}

.game-tile__top>.label {
  color: white
}

.game-tile__bottom {
  position: absolute;
  inset: auto var(--s-6) var(--s-6)
}

.game-tile h2,.game-tile h3 {
  font-size: clamp(1.7rem,2.2vw,2.5rem);
  margin-bottom: var(--s-5)
}

.game-tile__bottom p {
  font-size: .8125rem;
  color: var(--text-secondary);
  margin-bottom: var(--s-5)
}

.game-tile__bottom a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .75rem;
  font-weight: 600;
  min-height: 44px
}

.stretched-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2
}

.game-tile__bottom:has(.stretched-link) {
  position: static;
  padding: var(--s-6);
  margin-top: 220px
}

.game-tile--soon .game-art {
  filter: grayscale(1);
  opacity: .7
}

.game-art--abstract {
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden
}

.game-art--abstract>span {
  font: 700 8rem var(--font-display);
  letter-spacing: -.09em;
  color: var(--rexsa-text-secondary);
  transform: rotate(-90deg);
  opacity: .85
}

.art-crosshair {
  position: absolute;
  inset: 20%;
  border: 1px solid var(--border-strong);
  border-radius: 50%
}

.art-crosshair::before,.art-crosshair::after {
  content: '';
  position: absolute;
  background: var(--border-strong)
}

.art-crosshair::before {
  width: 140%;
  height: 1px;
  left: -20%;
  top: 50%
}

.art-crosshair::after {
  height: 140%;
  width: 1px;
  top: -20%;
  left: 50%
}

.state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 10px/1.6 var(--font-mono);
  color: var(--text-secondary);
  white-space: nowrap
}

.state>span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0
}

.state--on>span {
  background: var(--accent)
}

.game-tile .state {
  background: rgba(0,0,0,.7);
  padding: 5px 9px;
  border-radius: var(--r-full);
  color: white
}

.approach-title {
  max-width: 950px;
  margin-bottom: var(--s-9)
}

.principles {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--s-8)
}

.principles svg {
  width: 28px;
  height: 28px;
  color: var(--text-secondary);
  margin-bottom: var(--s-6)
}

.principles h3 {
  font-size: 1.375rem;
  margin-bottom: var(--s-4)
}

.principles p {
  color: var(--text-secondary);
  font-size: .8125rem
}

.faq-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--s-9);
  align-items: start
}

.faq-layout .display {
  font-size: clamp(2.5rem,4vw,4.5rem)
}

.faq-layout .lead {
  margin-top: var(--s-6)
}

.accordion {
  border-top: 1px solid var(--border)
}

details>summary {
  list-style: none;
  cursor: pointer
}

details>summary::-webkit-details-marker {
  display: none
}

.accordion summary,.compare-list summary {
  display: flex;
  gap: var(--s-5);
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  font-size: .875rem
}

.accordion details,.compare-list details {
  border-bottom: 1px solid var(--border)
}

.accordion__plus {
  width: 14px;
  height: 14px;
  position: relative;
  flex-shrink: 0
}

.accordion__plus::before,.accordion__plus::after {
  content: '';
  position: absolute;
  background: var(--text-muted);
  inset: 6px 0 auto;
  height: 1px;
  transition: transform var(--t-base)
}

.accordion__plus::after {
  transform: rotate(90deg)
}

details[open]>summary .accordion__plus::after {
  transform: rotate(0)
}

.accordion__body {
  padding: 0 var(--s-7) var(--s-5) 0;
  font-size: .8125rem;
  color: var(--text-secondary);
  animation: fade-in var(--t-base) var(--ease)
}

.finale {
  text-align: center;
  overflow: clip;
  min-height: 90svh
}

.finale .eyebrow {
  justify-content: center
}

.finale h2 {
  font-size: clamp(4rem,9vw,9rem);
  letter-spacing: -.07em;
  line-height: 1
}

.finale h2 span {
  color: var(--text-muted)
}

.finale .lead {
  margin: var(--s-6) auto
}

.finale .btn {
  margin-top: var(--s-5)
}

.finale__signature {
  font: 700 clamp(6rem,21vw,23rem)/.7 var(--font-display);
  letter-spacing: -.05em;
  color: var(--surface);
  position: absolute;
  bottom: -4%;
  left: 0;
  right: 0;
  z-index: -1
}

.finale .container {
  isolation: isolate
}

/* Catalogue and package configurator */
.collection-page {
  padding-bottom: var(--s-7)
}

.game-gallery--catalogue {
  gap: var(--s-5);
  grid-template-columns: repeat(3,1fr)
}

.game-gallery--catalogue .game-tile {
  min-height: 540px
}

.game-gallery--catalogue .game-tile__bottom:has(.stretched-link) {
  margin-top: 250px
}

.collection-note {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-7) 0;
  font-size: .8125rem;
  color: var(--text-secondary)
}

.product-detail .pagehead {
  padding-top: var(--s-7)
}

.product-detail h1 {
  font-size: clamp(2.25rem,4vw,4.25rem)
}

.product-detail .section-heading {
  margin: 0
}

.product-currency {
  flex-shrink: 0
}

.product-currency .field__label {
  margin-bottom: var(--s-3)
}

.segmented {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-control)
}

.segmented button {
  min-height: 36px;
  min-width: 60px;
  background: transparent;
  border-radius: 3px;
  font: 11px var(--font-mono);
  color: var(--text-muted)
}

.segmented button[aria-pressed=true] {
  background: var(--rexsa-text-secondary);
  color: white
}

.configurator {
  display: grid;
  grid-template-columns: 260px minmax(0,1fr);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  scroll-margin-top: calc(var(--header-h) + 20px)
}

.package-nav {
  padding: var(--s-6) var(--s-6) var(--s-6) 0
}

.package-nav a {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 20px 14px;
  border-radius: var(--r-control);
  font-size: .875rem;
  color: var(--text-secondary);
  min-height: 70px
}

.package-nav a[aria-selected=true] {
  background: var(--surface);
  color: white
}

.package-nav a[aria-selected=true] .arrow {
  color: var(--accent)
}

.package-nav .arrow {
  width: 16px;
  margin-left: auto
}

.package-nav__number {
  font: 10px var(--font-mono);
  color: var(--text-muted)
}

.package-nav small {
  display: block;
  font-size: .625rem;
  margin-top: 5px;
  color: var(--text-muted)
}

.package-panels {
  min-width: 0;
  background: var(--surface)
}

.product-panel {
  padding: var(--s-7);
  scroll-margin-top: calc(var(--header-h) + 20px)
}

.product-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-6)
}

.product-panel__intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-6)
}

.product-panel__intro h2 {
  font-size: 2.5rem;
  margin-bottom: var(--s-5)
}

.product-panel__intro .lead {
  font-size: .875rem;
  max-width: 50ch
}

.product-symbol {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border: 1px solid var(--border);
  border-radius: 50%;
  flex-shrink: 0
}

.product-symbol svg {
  width: 32px;
  height: 32px;
  color: var(--text-muted)
}

.feature-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px var(--s-5);
  list-style: none;
  margin: var(--s-6) 0;
  font-size: .75rem
}

.feature-list li {
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  color: var(--text-secondary)
}

.feature-list li>span {
  color: var(--accent);
  font-size: 16px
}

.purchase-form {
  margin-top: var(--s-7)
}

.duration-picker legend {
  margin-bottom: var(--s-4)
}

.duration-options {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: var(--s-3)
}

.duration-option {
  position: relative;
  cursor: pointer;
  min-width: 0
}

.duration-option>input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  top: 18px;
  left: 18px
}

.duration-option>span {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  padding: 18px 14px;
  transition: background var(--t-base),border-color var(--t-base)
}

.duration-option>span>span {
  font-size: .6875rem;
  color: var(--text-secondary)
}

.duration-option strong {
  font: 500 .875rem var(--font-mono);
  letter-spacing: -.04em
}

.duration-option input:checked+span {
  border-color: var(--accent);
  background: var(--accent-wash)
}

.duration-option input:focus-visible+span {
  outline: 2px solid var(--focus);
  outline-offset: 4px
}

.purchase-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  margin-top: var(--s-6)
}

.purchase-total__price {
  font: 500 clamp(1.8rem,3vw,2.7rem)/1.5 var(--font-display);
  letter-spacing: -.05em
}

.purchase-note {
  font-size: .6875rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: var(--s-5);
  margin-top: var(--s-6)
}

.unpriced {
  margin-top: var(--s-7);
  border-top: 1px solid var(--border);
  padding-top: var(--s-6)
}

.unpriced h3 {
  font-size: 1.375rem
}

.unpriced p {
  color: var(--text-secondary);
  font-size: .8125rem;
  margin: var(--s-3) 0
}

.compare-list {
  margin-top: var(--s-7)
}

.compare-list summary>span:first-child {
  font: 500 1.2rem var(--font-display);
  width: 24%
}

.compare-list summary>span:nth-child(2) {
  flex: 1
}

.compare-list details>div {
  padding: 0 0 var(--s-6);
  max-width: 780px;
  color: var(--text-secondary);
  font-size: .875rem
}

.support-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  border-top: 1px solid var(--border);
  padding: var(--s-7) 0 var(--s-8)
}

.support-strip h2 {
  font-size: 1.75rem
}

.support-strip p {
  color: var(--text-secondary);
  font-size: .8125rem;
  margin-top: var(--s-3)
}

/* Documentation */
.docs-page {
  padding-bottom: var(--s-9)
}

.docs-page>.pagehead {
  padding-top: 54px;
  padding-bottom: 30px
}

.docs-page>.pagehead h1 {
  font-size: clamp(2rem,3vw,2.625rem);
  line-height: 1.08;
  margin-top: 12px
}

.guide-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px
}

.guide-lang {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface)
}

.guide-lang button {
  border: 0;
  border-radius: 6px;
  padding: 8px 12px;
  background: transparent;
  color: var(--text-muted);
  font: 600 .6875rem var(--font-sans);
  cursor: pointer
}

.guide-lang button[aria-pressed=true] {
  background: var(--accent);
  color: white
}

@media (max-width: 640px) {
  .guide-head {
    align-items: flex-start;
    flex-direction: column
  }
  .guide-lang {
    align-self: stretch
  }
  .guide-lang button {
    flex: 1
  }
}

.doc-intro {
  color: var(--text-secondary);
  font-size: .8125rem;
  max-width: 34ch
}

.doc-intro .text-link {
  margin-top: var(--s-4);
  color: white
}

.doc {
  display: grid;
  grid-template-columns: 250px minmax(0,1fr);
  gap: 52px;
  align-items: start
}

.doc__rail {
  position: sticky;
  top: calc(var(--header-h) + 28px);
  max-height: calc(100svh - var(--header-h) - 50px);
  overflow-y: auto
}

.doc-progress {
  margin-bottom: var(--s-6)
}

.doc-progress>div {
  display: flex;
  justify-content: space-between;
  gap: var(--s-3);
  align-items: center;
  margin-bottom: var(--s-3)
}

.doc-progress .label {
  font-size: 10px
}

.doc-progress .mono {
  font-size: 11px
}

progress {
  width: 100%;
  height: 2px;
  border: 0;
  border-radius: 0;
  background: var(--border)
}

progress::-webkit-progress-bar {
  background: var(--border)
}

progress::-webkit-progress-value {
  background: var(--accent)
}

progress::-moz-progress-bar {
  background: var(--accent)
}

.doc__contents>summary {
  display: none
}

.doc__nav {
  display: grid;
  gap: 4px
}

.doc__nav-link {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 10px 12px;
  color: var(--text-secondary);
  border-radius: var(--r-control);
  font-size: .8125rem
}

.doc__nav-link>span:first-child {
  font: 10px var(--font-mono);
  color: var(--text-muted)
}

.doc__nav-link[aria-current] {
  background: var(--surface);
  color: white;
  box-shadow: inset 2px 0 var(--accent)
}

.doc__nav-link small {
  margin-left: auto;
  color: var(--focus)
}

.doc-support {
  margin-top: var(--s-5);
  font-size: .75rem
}

.doc__section {
  scroll-margin-top: calc(var(--header-h) + 20px);
  min-height: 0
}

.doc__section:focus {
  outline: none
}

.doc__section-head {
  background: var(--surface);
  width: min(100%,440px);
  padding: 18px 22px;
  border-radius: 12px;
  margin-bottom: 12px
}

.doc__section-head .eyebrow {
  margin-bottom: var(--s-5)
}

.doc__section-head h2 {
  font-size: 1.75rem;
  line-height: 1.15;
  margin: 7px 0 0
}

.doc__section-head>p {
  font-size: .875rem;
  line-height: 1.45;
  color: var(--text-secondary)
}

.doc__section-head .s-chapter {
  font-size: .6875rem;
  letter-spacing: .08em;
  color: var(--accent)
}

.doc__steps {
  list-style: none
}

.docstep {
  margin-bottom: 0;
  border-bottom: 1px solid var(--border);
  padding: 22px 0
}

.docstep__copy {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-size: .9375rem;
  line-height: 1.55;
  margin-bottom: 0
}

.docstep__main {
  min-width: 0;
  flex: 1
}

.docstep__image-toggle {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: 600 .75rem var(--font-sans);
  cursor: pointer
}

.docstep__image-toggle::after {
  content: '↓';
  margin-left: 7px;
  font-size: .6875rem
}

.docstep__image-toggle[aria-expanded=true]::after {
  content: '↑'
}

.docstep__image-toggle:hover {
  color: white
}

.doc-section-image {
  margin: 18px 0 0 33px
}

.docstep__num {
  color: var(--text-muted);
  font: 11px var(--font-mono);
  flex-shrink: 0
}

.docstep__shot {
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  overflow: hidden;
  background: transparent;
  width: min(100%,400px);
  margin-top: 14px
}

.docstep__shot[hidden] {
  display: none
}

.docstep__shot img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%
}

.docstep__shot--portrait {
  width: min(100%,280px)
}

.docstep__shot a {
  display: block;
  position: relative
}

.docstep__shot a>span {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0,0,0,.9);
  color: white;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 10px
}

.doc-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding-top: 24px;
  padding-bottom: var(--s-6)
}

.doc-footnote {
  color: var(--text-muted);
  font-size: .6875rem;
  max-width: 75ch;
  padding-top: var(--s-5)
}

.image-dialog {
  color: white;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-surface);
  padding: 16px;
  max-width: min(94vw,1200px);
  max-height: 94svh;
  box-shadow: var(--shadow-overlay)
}

.image-dialog::backdrop {
  background: var(--scrim)
}

.image-dialog__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px
}

.image-dialog img {
  max-height: 75svh;
  margin: auto;
  object-fit: contain
}

.image-dialog p {
  font-size: .75rem;
  color: var(--text-secondary);
  margin-top: var(--s-3)
}

/* Service status */
.status-overview {
  min-height: calc(100svh - var(--header-h));
  padding: var(--s-8) 0
}

.status-overview__main {
  display: flex;
  justify-content: space-between;
  gap: var(--s-8);
  align-items: center;
  margin-bottom: var(--s-8)
}

.status-overview__main .lead {
  margin-top: var(--s-5);
  font-size: 1rem
}

.status-signal {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  margin-bottom: var(--s-5)
}

.status-signal>span {
  display: block;
  background: var(--accent);
  width: 4px;
  height: 12px
}

.status-signal>span:nth-child(2) {
  height: 20px
}

.status-signal>span:nth-child(3) {
  height: 28px
}

.status-signal--attention>span {
  background: var(--warning)
}

.status-readout {
  border-left: 1px solid var(--border);
  padding-left: var(--s-8);
  min-width: 260px
}

.status-readout>strong {
  display: block;
  font: 400 2.4rem var(--font-display);
  margin: var(--s-4) 0
}

.status-readout__note {
  border-top: 1px solid var(--border);
  padding-top: var(--s-5);
  margin-top: var(--s-6);
  font-size: .6875rem;
  color: var(--text-muted)
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--s-7);
  border-top: 1px solid var(--border);
  padding-top: var(--s-6)
}

.service-grid article {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--s-3) var(--s-4)
}

.service-icon {
  grid-row: span 2
}

.service-icon svg {
  width: 23px;
  height: 23px;
  color: var(--text-muted)
}

.service-grid h2 {
  font-size: 1.05rem
}

.service-grid p {
  grid-column: 1/-1;
  font-size: .6875rem;
  color: var(--text-muted);
  margin-top: var(--s-3)
}

.availability {
  border-top: 1px solid var(--border)
}

.availability-game {
  padding: var(--s-7) 0;
  border-bottom: 1px solid var(--border)
}

.availability-game header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-6);
  margin-bottom: var(--s-5)
}

.availability-game header>div {
  display: flex;
  align-items: center;
  gap: var(--s-5)
}

.availability-game h3 {
  font-size: 1.75rem
}

.availability-game dl {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--s-3) var(--s-7);
  padding: var(--s-5) 0
}

.availability-game dl>div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 0
}

.availability-game dt {
  font-size: .8125rem
}

.availability-game .text-link {
  margin-top: var(--s-4);
  font-size: .75rem
}

/* Auth and shared form controls */
.auth-layout {
  min-height: calc(100svh - var(--header-h) - 65px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--s-9);
  padding-block: var(--s-7)
}

.auth-visual {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding: var(--s-7);
  background: var(--surface);
  border-radius: var(--r-surface);
  overflow: hidden
}

.auth-visual .orbit {
  align-self: center;
  margin: -30px 0
}

.auth-visual h2 {
  font-size: clamp(2rem,3vw,3.5rem);
  position: relative;
  z-index: 1
}

.auth-visual p {
  font-size: .8125rem;
  color: var(--text-muted);
  margin-top: var(--s-4);
  max-width: 35ch
}

.authcard {
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
  padding-block: var(--s-6)
}

.authcard__head {
  margin-bottom: var(--s-7)
}

.authcard__head>.label {
  display: block;
  margin-bottom: var(--s-5)
}

.authcard__title {
  font-size: clamp(2rem,3vw,2.75rem)
}

.authcard__sub {
  color: var(--text-secondary);
  font-size: .8125rem;
  margin-top: var(--s-4)
}

.authcard__foot {
  font-size: .75rem;
  color: var(--text-secondary);
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border)
}

.authcard__foot a {
  color: white
}

.auth-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px var(--gutter);
  color: var(--text-muted);
  font-size: .625rem
}

.auth-footer>div {
  display: flex;
  gap: var(--s-5)
}

.form {
  display: grid;
  gap: var(--s-5)
}

.field__label {
  display: block;
  font-size: .6875rem;
  letter-spacing: .02em;
  font-weight: 600;
  margin-bottom: 9px
}

.input,.textarea,select.input {
  width: 100%;
  min-width: 0;
  min-height: 50px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-control);
  background: var(--surface);
  color: white;
  padding: 13px 14px;
  font-size: .8125rem;
  transition: border-color var(--t-base),background var(--t-base)
}

.input:focus,.textarea:focus {
  border-color: var(--focus);
  background: var(--surface-raised)
}

.input::placeholder,.textarea::placeholder {
  color: var(--text-muted)
}

.input[aria-invalid=true] {
  border-color: var(--error)
}

.field__hint {
  font-size: .625rem;
  color: var(--text-muted);
  margin-top: 7px
}

.field__aside {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px
}

.field__aside a {
  font-size: .6875rem
}

.form__grid {
  display: grid;
  gap: var(--s-5)
}

.form__grid--2 {
  grid-template-columns: 1fr 1fr
}

.password-control {
  position: relative
}

.password-control .input {
  padding-right: 64px
}

.password-toggle {
  position: absolute;
  right: 8px;
  top: 5px;
  height: 40px;
  min-width: 44px;
  background: transparent;
  color: var(--text-secondary);
  font-size: .625rem
}

.form .btn[type=submit] {
  background: var(--accent);
  border-color: var(--accent)
}

.form .btn[type=submit]:hover {
  background: var(--accent-pressed)
}

.note {
  padding: var(--s-5);
  background: var(--surface);
  border-left: 2px solid var(--border-strong);
  font-size: .8125rem;
  margin-bottom: var(--s-5)
}

.note__label {
  display: block;
  font: 10px var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: var(--s-3)
}

.note p {
  color: var(--text-secondary)
}

.note--spaced {
  margin-top: var(--s-5)
}

.note--error {
  border-color: var(--error)
}

.note--error .note__label {
  color: var(--error)
}

.note--warn {
  border-color: var(--warning)
}

.note--ok {
  border-color: var(--accent)
}

.note--ok .note__label {
  color: var(--focus)
}

.waiting {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  color: var(--text-secondary);
  font-size: .75rem
}

.spinner {
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  flex-shrink: 0
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

/* Checkout, account, invoices and downloads */
.checkout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--s-9);
  align-items: start;
  padding-bottom: var(--s-8)
}

.checkout__h {
  margin-bottom: var(--s-3)
}

.checkout__note {
  margin-bottom: var(--s-6)
}

.method {
  display: flex;
  align-items: center;
  width: 100%;
  gap: var(--s-5);
  padding: 22px 0;
  background: transparent;
  text-align: left;
  border-bottom: 1px solid var(--border)
}

.method__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-control);
  flex-shrink: 0
}

.method__icon svg {
  width: 21px;
  height: 21px
}

.method__name {
  display: block;
  font: 500 1.15rem var(--font-display)
}

.method__desc {
  display: block;
  font-size: .6875rem;
  color: var(--text-muted);
  margin-top: 5px
}

.method__go {
  width: 20px;
  height: 20px;
  margin-left: auto;
  color: var(--accent)
}

.method[aria-disabled=true] {
  color: var(--text-muted)
}

.method[aria-disabled=true]>.tag {
  margin-left: auto
}

.method:hover:not([aria-disabled]) .method__icon {
  border-color: var(--accent)
}

.checkout__aside {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  background: var(--surface);
  padding: var(--s-7);
  border-radius: var(--r-surface)
}

.summary__head {
  margin-bottom: var(--s-6)
}

.summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s-5);
  padding: 9px 0;
  font-size: .75rem
}

.summary__key {
  color: var(--text-secondary)
}

.summary__val {
  text-align: right
}

.summary__total {
  border-top: 1px solid var(--border);
  padding-top: var(--s-5);
  margin-top: var(--s-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4)
}

.summary__total-val {
  font: 500 2.2rem var(--font-display);
  letter-spacing: -.05em
}

.summary__was {
  display: block;
  font-size: .875rem;
  text-decoration: line-through;
  color: var(--text-muted);
  text-align: right
}

.promo {
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border)
}

.promo__row {
  display: flex;
  gap: var(--s-3)
}

.promo__msg {
  font-size: .6875rem;
  margin-top: var(--s-3);
  min-height: 20px
}

.promo__msg.is-error,.promo__msg.error {
  color: var(--error)
}

.promo__msg.is-ok {
  color: var(--focus)
}

.tag {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  font: 10px/1.6 var(--font-mono);
  color: var(--text-secondary)
}

.tag__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor
}

.tag--ok {
  color: var(--focus)
}

.tag--warn {
  color: var(--warning)
}

.tag--error {
  color: var(--error)
}

.tag--accent {
  color: var(--focus)
}

.spec {
  font-size: .8125rem
}

.spec__row {
  display: grid;
  grid-template-columns: minmax(100px,1fr) 2fr;
  gap: var(--s-5);
  padding: 16px 0
}

.spec--ruled .spec__row {
  border-bottom: 1px solid var(--border)
}

.spec dt {
  color: var(--text-muted)
}

.spec dd {
  min-width: 0;
  overflow-wrap: anywhere
}

.spec__val--mono {
  font-family: var(--font-mono);
  font-size: .75rem
}

.copyline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4)
}

.invoice-layout {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--s-8);
  padding: var(--s-6) 0 var(--s-9)
}

.invoice-primary {
  background: var(--surface);
  padding: var(--s-7);
  border-radius: var(--r-surface)
}

.invoice-detail {
  padding-block: var(--s-5)
}

.invoice-detail>.label {
  margin-bottom: var(--s-5)
}

.keybox {
  padding: var(--s-6) 0;
  display: flex;
  align-items: center;
  gap: var(--s-4)
}

.keybox__value {
  font: 500 1.15rem/1.7 var(--font-mono);
  overflow-wrap: anywhere;
  min-width: 0
}

.pay__lead {
  margin: var(--s-4) 0
}

.invoice__note {
  margin-top: var(--s-5)
}

.stack--loose>*+* {
  margin-top: var(--s-7)
}

.scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  z-index: var(--z-overlay);
  overflow: auto
}

.dialog {
  width: min(100%,520px);
  max-height: 90svh;
  overflow-y: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-surface);
  background: var(--surface);
  padding: var(--s-6);
  box-shadow: var(--shadow-overlay)
}

.dialog__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-5);
  margin-bottom: var(--s-5)
}

.icon-x {
  background: transparent;
  padding: 10px;
  flex-shrink: 0
}

.icon-x svg {
  width: 20px;
  height: 20px
}

.dialog__spec {
  margin: var(--s-5) 0
}

.dialog__actions {
  display: grid;
  gap: var(--s-3)
}

.dash {
  display: block;
  padding-bottom: var(--s-8)
}

.dash__rail {
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--s-7)
}

.dash__nav {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: var(--s-5)
}

.dash__nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 20px;
  background: transparent;
  border-bottom: 2px solid transparent;
  font-size: .8125rem;
  color: var(--text-muted)
}

.dash__nav-link[aria-selected=true] {
  color: white;
  border-bottom-color: var(--accent)
}

.dash__sub {
  margin-bottom: var(--s-6)
}

.dash__panel {
  min-width: 0
}

.figures {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--s-6);
  border-bottom: 1px solid var(--border);
  padding-bottom: var(--s-6);
  margin-bottom: var(--s-6)
}

.figure__val {
  font: 400 2.8rem var(--font-display);
  letter-spacing: -.05em
}

.figure__key {
  font-size: 9px;
  margin-top: var(--s-2)
}

.order {
  padding: var(--s-6);
  margin-bottom: var(--s-4);
  background: var(--surface);
  border-radius: var(--r-control)
}

.order__top {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  align-items: center;
  margin-bottom: var(--s-5)
}

.order__no {
  font: 10px var(--font-mono);
  overflow-wrap: anywhere
}

.order__title {
  font-size: 1.25rem
}

.order__meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr 1fr;
  gap: var(--s-5);
  margin: var(--s-5) 0
}

.order__meta dt {
  font-size: 9px;
  margin-bottom: 7px
}

.order__meta dd {
  font-size: .6875rem;
  overflow-wrap: anywhere
}

.order__action {
  display: flex;
  justify-content: flex-end
}

.pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-5);
  margin-top: var(--s-6);
  font-size: .6875rem
}

.pager__list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}

.pager__link {
  min-width: 36px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 4px
}

.pager__link[aria-current] {
  background: var(--accent);
  border-color: var(--accent)
}

.pager__link[aria-disabled] {
  opacity: .4
}

.reviewitem {
  padding: var(--s-6) 0;
  border-bottom: 1px solid var(--border)
}

.reviewitem__head {
  display: flex;
  justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-5)
}

.reviewitem__head .small {
  font-size: 10px
}

.reviewitem__text {
  margin: var(--s-5) 0;
  color: var(--text-secondary);
  font-size: .875rem
}

.stars {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  position: relative;
  gap: 4px;
  margin-bottom: var(--s-5)
}

.stars input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px
}

.stars label {
  padding: 4px;
  color: var(--border-strong);
  cursor: pointer
}

.stars svg {
  width: 26px;
  height: 26px
}

.stars input:checked~label,.stars label:hover,.stars label:hover~label {
  color: var(--focus)
}

.stars input:focus-visible+label {
  outline: 2px solid var(--focus);
  outline-offset: 2px
}

.stars--static {
  flex-direction: row
}

.stars--static svg {
  color: var(--border-strong)
}

.stars--static .is-on {
  color: var(--focus)
}

.reviewitem form>.btn {
  margin-top: var(--s-5)
}

.pwform {
  max-width: 700px
}

.empty {
  padding: var(--s-8) var(--s-6);
  text-align: center;
  background: var(--surface);
  border-radius: var(--r-surface)
}

.empty__title {
  font-size: 2rem
}

.empty__body {
  color: var(--text-secondary);
  font-size: .875rem;
  max-width: 45ch;
  margin: var(--s-4) auto var(--s-6)
}

.download-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--s-8);
  padding-bottom: var(--s-9)
}

.download-intro {
  background: var(--surface);
  padding: var(--s-7);
  border-radius: var(--r-surface)
}

.download-intro>svg {
  width: 48px;
  height: 48px;
  color: var(--text-muted);
  margin-bottom: var(--s-7)
}

.download-intro h2 {
  margin-bottom: var(--s-4)
}

.download-intro .lead {
  font-size: .875rem;
  margin-bottom: var(--s-6)
}

.dl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--border)
}

.dl-row h3 {
  font-size: 1.1rem
}

.dl-row p {
  margin-top: var(--s-3)
}

.steps {
  list-style: none;
  counter-reset: step
}

.steps__item {
  counter-increment: step;
  display: flex;
  gap: var(--s-5);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--border)
}

.steps__item::before {
  content: '0' counter(step);
  font: 11px var(--font-mono);
  padding-top: 5px;
  color: var(--text-muted)
}

.steps__title {
  font-size: 1.125rem
}

.steps__body {
  font-size: .8125rem;
  color: var(--text-secondary);
  margin-top: var(--s-3)
}

/* Policy reader */
.legal-layout {
  display: grid;
  grid-template-columns: 260px minmax(0,720px);
  gap: var(--s-9);
  padding-bottom: var(--s-9);
  align-items: start
}

.legal__toc {
  position: sticky;
  top: calc(var(--header-h) + 24px)
}

.legal__toc h2 {
  margin-bottom: var(--s-4)
}

.legal__toc-list {
  display: grid
}

.legal__toc-link {
  font-size: .75rem;
  padding: 8px 0;
  color: var(--text-secondary)
}

.legal__toc-link:hover {
  color: white
}

.legal__section {
  padding-bottom: var(--s-7);
  margin-bottom: var(--s-7);
  border-bottom: 1px solid var(--border);
  scroll-margin-top: calc(var(--header-h) + 24px)
}

.legal__h {
  font-size: 1.5rem;
  margin-bottom: var(--s-5)
}

.legal__section p,.legal__section li {
  font-size: .875rem;
  color: var(--text-secondary);
  line-height: 1.9
}

.legal__section p+p {
  margin-top: var(--s-4)
}

.legal__section ul {
  padding-left: 20px;
  margin-top: var(--s-4)
}

.legal__section li {
  margin-bottom: var(--s-3)
}

.prose {
  white-space: pre-line;
  line-height: 1.8;
  color: var(--text-secondary);
  max-width: 75ch
}

/* Motion, progressive enhancement, accessibility */
.sr-only,.visually-hidden {
  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;
  top: 10px;
  left: 10px;
  transform: translateY(-200%);
  background: var(--accent);
  padding: 12px 20px;
  z-index: 200
}

.skip-link:focus {
  transform: none
}

.reveal-ready {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-reveal) var(--ease),transform var(--t-reveal) var(--ease)
}

.reveal-ready.is-visible {
  opacity: 1;
  transform: none
}

.product-panel,.showcase__panel {
  animation: fade-in .35s var(--ease)
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(7px)
  }
  to {
    opacity: 1;
    transform: none
  }
}

@media(min-width:1100px) and (min-height:700px) and (prefers-reduced-motion:no-preference) {
  html.snap-pages {
    scroll-snap-type: y proximity
  }
  .snap-pages .chapter {
    scroll-snap-align: start
  }
}

@media(min-width:1700px) {
  .hero__visual {
    margin-right: -12%
  }
  .hero h1 {
    font-size: 8rem
  }
  .game-tile {
    min-height: 480px
  }
}

@media(max-width:1100px) {
  .intro-layout,.process-layout,.faq-layout {
    gap: var(--s-7)
  }
  .hero h1 {
    font-size: 6.6vw
  }
  .mainnav {
    gap: var(--s-6)
  }
  .principles {
    gap: var(--s-6)
  }
  .doc {
    grid-template-columns: 220px minmax(0,1fr);
    gap: var(--s-6)
  }
  .configurator {
    grid-template-columns: 210px minmax(0,1fr)
  }
  .product-panel {
    padding: var(--s-6)
  }
  .duration-options {
    grid-template-columns: repeat(2,1fr)
  }
  .checkout {
    gap: var(--s-7)
  }
  .checkout__aside {
    padding: var(--s-6)
  }
  .auth-layout {
    gap: var(--s-7)
  }
  .legal-layout {
    gap: var(--s-7)
  }
  .availability-game dl {
    grid-template-columns: repeat(2,1fr)
  }
}

@media(max-width:900px) {
  .mainnav {
    display: none
  }
  .navtoggle {
    display: block
  }
  .chapter-dots {
    display: none
  }
  .hero__layout {
    grid-template-columns: 1fr 1fr
  }
  .hero__copy {
    padding-bottom: var(--s-9)
  }
  .hero h1 {
    font-size: 7.6vw
  }
  .hero .actions {
    gap: var(--s-3)
  }
  .hero__meta {
    gap: var(--s-3);
    font-size: 7px
  }
  .hero__meta span+span::before {
    margin-right: var(--s-3)
  }
  .orbit__annotation {
    font-size: 6px
  }
  .orbit__core .rx-logo {
    width: 38px;
    height: 38px
  }
  .orbit__core>span {
    font-size: .75rem
  }
  .orbit__core>small {
    font-size: 4px
  }
  .hero .lead {
    font-size: .875rem
  }
  .intro-layout,.process-layout {
    grid-template-columns: 1fr;
    gap: var(--s-7)
  }
  .intro-layout>div:first-child,.process-heading {
    max-width: 600px
  }
  .tool-composition {
    max-width: 650px
  }
  .journey {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-6)
  }
  .journey li {
    padding: 0;
    gap: var(--s-4)
  }
  .journey li::after {
    display: none
  }
  .game-gallery {
    gap: var(--s-3)
  }
  .game-tile__top {
    padding: 16px
  }
  .game-tile__top>.label {
    display: none
  }
  .game-tile__bottom,.game-tile__bottom:has(.stretched-link) {
    padding: var(--s-5)
  }
  .game-tile__bottom {
    inset: auto 0 0
  }
  .game-tile h2,.game-tile h3 {
    font-size: 1.75rem
  }
  .sitefoot__top {
    gap: var(--s-6);
    grid-template-columns: 1.5fr 1fr 1fr 1fr
  }
  .faq-layout {
    grid-template-columns: 1fr;
    gap: var(--s-7)
  }
  .faq-layout>div:first-child {
    max-width: 600px
  }
  .doc {
    display: block
  }
  .doc__rail {
    position: sticky;
    top: var(--header-h);
    z-index: 10;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 16px 0;
    max-height: 60svh;
    margin-bottom: var(--s-6)
  }
  .doc-progress {
    margin-bottom: 8px
  }
  .doc__contents>summary {
    display: flex;
    justify-content: space-between;
    font-size: .75rem;
    min-height: 32px;
    align-items: center
  }
  .doc__nav {
    padding: var(--s-4) 0;
    grid-template-columns: 1fr 1fr
  }
  .doc-support {
    display: none
  }
  .doc__section {
    scroll-margin-top: calc(var(--header-h) + 130px)
  }
  .auth-visual {
    padding: var(--s-6)
  }
  .auth-visual .orbit {
    margin: -10px 0
  }
  .checkout {
    grid-template-columns: 1fr 1fr
  }
  .invoice-layout {
    gap: var(--s-6)
  }
  .invoice-primary {
    padding: var(--s-6)
  }
  .order__meta {
    grid-template-columns: 1fr 1fr
  }
  .order__top {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--s-3)
  }
}

@media(max-width:700px) {
  .chapter {
    padding: var(--s-8) 0;
    min-height: 100svh
  }
  .chapter .eyebrow {
    margin-bottom: var(--s-6)
  }
  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--s-5);
    margin-bottom: var(--s-6)
  }
  .hero {
    padding-top: calc(var(--header-h) + 32px);
    padding-bottom: 80px;
    align-items: flex-start
  }
  .hero__layout {
    display: flex;
    flex-direction: column;
    align-items: stretch
  }
  .hero__copy {
    padding: 0
  }
  .hero h1 {
    font-size: clamp(3.8rem,15vw,6rem)
  }
  .hero .eyebrow {
    font-size: 9px
  }
  .hero .lead {
    font-size: .875rem;
    max-width: 35ch;
    margin-top: var(--s-5)
  }
  .hero .actions {
    margin-top: var(--s-5);
    gap: var(--s-5)
  }
  .hero .btn {
    font-size: .75rem;
    padding: 12px 18px;
    gap: var(--s-4)
  }
  .hero .text-link {
    font-size: .6875rem;
    gap: 8px
  }
  .hero__meta {
    display: none
  }
  .hero__visual {
    width: min(88%,370px);
    margin: -3px auto -10px
  }
  .orbit__core .rx-logo {
    width: 40px;
    height: 40px
  }
  .orbit__core>span {
    font-size: .8125rem
  }
  .orbit__core>small {
    font-size: 5px
  }
  .orbit__annotation {
    font-size: 6px
  }
  .hero .chapter__bottom {
    bottom: var(--s-5)
  }
  .chapter__bottom>.label {
    font-size: 9px
  }
  .hero__visual::before {
    background-size: 45px 45px
  }
  .intro-layout {
    gap: var(--s-7)
  }
  .tool-composition {
    padding: var(--s-5)
  }
  .tool-line {
    gap: var(--s-4);
    padding: var(--s-5) 0
  }
  .tool-line h3 {
    font-size: 1rem
  }
  .tool-line p {
    font-size: .625rem
  }
  .tool-line__icon {
    width: 28px
  }
  .tool-line__index {
    display: none
  }
  .showcase {
    grid-template-columns: 1fr
  }
  .showcase__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-block: var(--s-5)
  }
  .showcase__nav button {
    width: auto;
    border: 1px solid var(--border);
    border-radius: var(--r-control);
    padding: 12px 15px;
    font: 500 .75rem var(--font-sans)
  }
  .showcase__nav button[aria-selected=true] {
    padding-left: 15px;
    background: var(--surface);
    border-color: var(--accent)
  }
  .showcase__nav button>span,.showcase__nav .arrow {
    display: none
  }
  .showcase__panels {
    padding: var(--s-6);
    margin: 0;
    min-height: 360px
  }
  .showcase__symbol {
    margin-bottom: var(--s-5);
    width: 64px;
    height: 64px
  }
  .journey {
    grid-template-columns: 1fr;
    gap: var(--s-6)
  }
  .journey__number {
    width: 40px;
    height: 40px
  }
  .journey h3 {
    font-size: 1.2rem;
    padding-top: 8px
  }
  .journey p {
    font-size: .8125rem
  }
  .game-gallery,.game-gallery--catalogue {
    grid-template-columns: 1fr
  }
  .game-tile,.game-gallery--catalogue .game-tile {
    min-height: 350px
  }
  .game-tile__bottom:has(.stretched-link),.game-gallery--catalogue .game-tile__bottom:has(.stretched-link) {
    margin-top: 150px;
    padding: var(--s-6)
  }
  .game-tile__top {
    padding: var(--s-5)
  }
  .game-tile__top>.label {
    display: block
  }
  .game-tile__bottom {
    padding: var(--s-6)
  }
  .game-art {
    object-position: center 35%
  }
  .game-art--abstract>span {
    transform: none;
    font-size: 10rem
  }
  .art-crosshair {
    inset: 10% 27%
  }
  .game-tile h2,.game-tile h3 {
    font-size: 2rem
  }
  .principles {
    grid-template-columns: 1fr;
    gap: var(--s-7)
  }
  .principles article {
    display: grid;
    grid-template-columns: 35px 1fr;
    gap: var(--s-3) var(--s-5)
  }
  .principles svg {
    grid-row: span 2;
    margin: 0;
    width: 24px
  }
  .principles h3 {
    font-size: 1.2rem;
    margin: 0
  }
  .principles p {
    grid-column: 2
  }
  .approach-title {
    margin-bottom: var(--s-7)
  }
  .accordion summary {
    font-size: .8125rem;
    padding: 22px 0
  }
  .finale {
    min-height: 85svh
  }
  .finale h2 {
    font-size: clamp(3.75rem,17vw,6rem)
  }
  .finale .lead {
    font-size: .875rem;
    max-width: 28ch
  }
  .finale__signature {
    bottom: 3%
  }
  .sitefoot {
    padding-top: var(--s-7)
  }
  .sitefoot__top {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-7) var(--s-5);
    padding-bottom: var(--s-7)
  }
  .sitefoot__brand {
    grid-column: 1/-1
  }
  .sitefoot__brand p {
    max-width: 38ch
  }
  .sitefoot nav h2 {
    font-size: 9px;
    margin-bottom: var(--s-3)
  }
  .sitefoot nav a {
    font-size: .75rem;
    min-height: 36px
  }
  .sitefoot__bottom {
    font-size: .625rem;
    align-items: center
  }
  .pagehead {
    padding-top: var(--s-7)
  }
  .pagehead__row {
    display: block
  }
  .pagehead__actions {
    margin-top: var(--s-5)
  }
  .pagehead__meta .mono {
    font-size: 10px
  }
  .collection-note {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-6) 0
  }
  .product-detail .pagehead .section-heading {
    gap: var(--s-6)
  }
  .product-currency {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%
  }
  .product-currency .field__label {
    margin: 0
  }
  .configurator {
    grid-template-columns: 1fr
  }
  .package-nav {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 8px;
    padding: var(--s-5) 0
  }
  .package-nav a {
    padding: 14px 12px;
    min-height: 52px;
    border: 1px solid var(--border);
    font-size: .75rem;
    gap: 8px
  }
  .package-nav a[aria-selected=true] {
    border-color: var(--accent)
  }
  .package-nav__number {
    display: none
  }
  .package-nav small {
    font-size: 8px
  }
  .product-panel {
    padding: var(--s-5)
  }
  .product-panel__intro h2 {
    font-size: 2.1rem
  }
  .product-panel__intro .lead {
    font-size: .8125rem
  }
  .product-symbol {
    display: none
  }
  .feature-list {
    gap: 12px;
    grid-template-columns: 1fr;
    font-size: .75rem
  }
  .product-panel__head .label {
    font-size: 9px
  }
  .duration-option>span {
    padding: 16px 12px
  }
  .purchase-total {
    align-items: stretch;
    flex-direction: column
  }
  .purchase-total>.btn {
    width: 100%
  }
  .purchase-total__price {
    font-size: 2.3rem
  }
  .compare-list summary {
    gap: var(--s-4)
  }
  .compare-list summary>span:first-child {
    width: auto;
    flex: 1;
    font-size: 1rem
  }
  .compare-list summary>span:nth-child(2) {
    display: none
  }
  .support-strip {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: var(--s-7)
  }
  .doc-intro {
    max-width: none
  }
  .doc__rail {
    padding-block: 12px
  }
  .doc__nav {
    grid-template-columns: 1fr
  }
  .doc__section-head {
    padding: 20px
  }
  .doc__section-head h2 {
    font-size: 1.6rem
  }
  .doc__section-head p {
    font-size: .8125rem
  }
  .docstep__copy {
    font-size: .8125rem;
    gap: var(--s-3)
  }
  .docstep__shot a>span {
    bottom: 7px;
    right: 7px;
    padding: 4px 8px;
    font-size: 8px
  }
  .doc-pagination {
    flex-wrap: wrap;
    gap: var(--s-4)
  }
  .doc-pagination .btn {
    padding: 12px 14px;
    font-size: .6875rem;
    gap: 8px
  }
  .status-overview {
    padding: var(--s-7) 0
  }
  .status-overview__main {
    display: block;
    margin-bottom: var(--s-7)
  }
  .status-overview__main h1 {
    font-size: 3rem
  }
  .status-readout {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding: var(--s-5) 0 0;
    margin-top: var(--s-6);
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--s-3)
  }
  .status-readout>strong {
    font-size: 1.6rem;
    margin: 0;
    text-align: right
  }
  .status-readout .text-link {
    font-size: .6875rem
  }
  .status-readout__note {
    border: 0;
    padding: 0;
    margin: 0;
    order: 3;
    font-size: .625rem
  }
  .service-grid {
    grid-template-columns: 1fr;
    gap: var(--s-6)
  }
  .service-grid article {
    grid-template-columns: 24px 1fr auto
  }
  .service-icon {
    grid-row: auto
  }
  .service-grid p {
    margin: 0;
    grid-column: 2/-1
  }
  .availability-game dl {
    grid-template-columns: 1fr;
    gap: 0
  }
  .availability-game header {
    gap: var(--s-3)
  }
  .availability-game header>div {
    gap: var(--s-3)
  }
  .availability-game h3 {
    font-size: 1.5rem
  }
  .availability-game header .label {
    font-size: 9px
  }
  .auth-layout {
    display: block;
    min-height: calc(100svh - var(--header-h) - 65px);
    padding: var(--s-6) 0
  }
  .auth-visual {
    display: none
  }
  .authcard {
    padding: var(--s-6) 0
  }
  .authcard__head {
    margin-bottom: var(--s-6)
  }
  .authcard__title {
    font-size: 2.25rem
  }
  .is-auth .masthead .text-link {
    font-size: .625rem;
    gap: 8px
  }
  .auth-footer {
    font-size: 9px
  }
  .checkout {
    display: flex;
    flex-direction: column;
    gap: var(--s-7)
  }
  .checkout__aside {
    position: static;
    order: -1;
    width: 100%;
    padding: var(--s-5)
  }
  .checkout__main {
    width: 100%
  }
  .summary__total-val {
    font-size: 2rem
  }
  .checkout .promo {
    padding-top: var(--s-5);
    margin-top: var(--s-5)
  }
  .checkout .method .tag {
    font-size: 8px
  }
  .checkout .method__desc {
    font-size: .625rem
  }
  .method {
    gap: var(--s-4)
  }
  .method__name {
    font-size: 1rem
  }
  .invoice-layout {
    grid-template-columns: 1fr;
    padding-top: 0
  }
  .invoice-primary {
    padding: var(--s-5)
  }
  .keybox {
    align-items: flex-start;
    flex-direction: column
  }
  .keybox__value {
    font-size: .9375rem
  }
  .spec__row {
    grid-template-columns: 100px minmax(0,1fr);
    gap: var(--s-4);
    font-size: .75rem
  }
  .spec__val--mono {
    font-size: .6875rem
  }
  .copyline {
    align-items: flex-start;
    flex-direction: column
  }
  .dash__rail {
    margin-bottom: var(--s-6)
  }
  .dash__nav {
    gap: 0
  }
  .dash__nav-link {
    padding: 16px 5px;
    font-size: .625rem;
    text-align: center
  }
  .dash__sub {
    font-size: 9px
  }
  .figure__val {
    font-size: 2.4rem
  }
  .figure__key {
    font-size: 8px
  }
  .order {
    padding: var(--s-5)
  }
  .order__title {
    font-size: 1.2rem
  }
  .order__meta {
    gap: var(--s-5)
  }
  .order__action .btn {
    width: 100%
  }
  .reviewitem__head {
    flex-direction: column;
    gap: var(--s-3)
  }
  .form__grid--2 {
    grid-template-columns: 1fr
  }
  .empty {
    padding: var(--s-7) var(--s-5)
  }
  .empty__title {
    font-size: 1.7rem
  }
  .empty__body {
    font-size: .8125rem
  }
  .pager {
    flex-direction: column;
    align-items: flex-start
  }
  .download-layout {
    grid-template-columns: 1fr;
    gap: var(--s-7)
  }
  .download-intro {
    padding: var(--s-6)
  }
  .legal-layout {
    display: block
  }
  .legal__toc {
    position: static;
    margin-bottom: var(--s-7);
    padding-bottom: var(--s-6);
    border-bottom: 1px solid var(--border)
  }
  .legal__toc-list {
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--s-5)
  }
  .legal__toc-link {
    font-size: .6875rem
  }
  .legal__section p,.legal__section li {
    font-size: .8125rem
  }
  .dialog {
    padding: var(--s-5)
  }
  .dialog__head h2 {
    font-size: 1.25rem
  }
  .scrim {
    padding: var(--s-4)
  }
}

@media(max-width:374px) {
  .hero h1 {
    font-size: 3.55rem
  }
  .hero .actions {
    gap: var(--s-3)
  }
  .hero .btn {
    padding: 12px 14px;
    font-size: .6875rem
  }
  .hero .text-link {
    font-size: .625rem
  }
  .hero .eyebrow {
    font-size: 8px;
    letter-spacing: .07em
  }
  .hero__visual {
    width: 90%;
    margin-top: 10px
  }
  .hero .lead {
    font-size: .8125rem
  }
  .masthead__inner {
    gap: 10px
  }
  .wordmark>span {
    font-size: 1rem
  }
  .rx-logo {
    width: 26px;
    height: 26px
  }
  .masthead__actions {
    gap: var(--s-2)
  }
  .nav-account {
    font-size: .625rem;
    gap: 8px
  }
  .eyebrow {
    font-size: 9px;
    gap: 8px
  }
  .product-panel {
    padding: var(--s-4)
  }
  .duration-option strong {
    font-size: .8125rem
  }
  .purchase-note {
    font-size: .625rem
  }
  .status-overview__main h1 {
    font-size: 2.65rem
  }
  .state {
    font-size: 9px
  }
  .availability-game header>div>.label {
    display: none
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto!important;
    scroll-snap-type: none!important
  }
  *,*::before,*::after {
    animation: none!important;
    transition: none!important
  }
  .reveal-ready {
    opacity: 1;
    transform: none
  }
}

@media print {
  html,body {
    background: white!important;
    color: black!important;
    scroll-snap-type: none!important
  }
  .masthead,.sitefoot,.chapter-dots,.doc__rail,.doc-pagination,.doc-support,.auth-visual,.btn,.skip-link {
    display: none!important
  }
  main {
    padding: 0
  }
  .container {
    width: 100%;
    max-width: none
  }
  .doc,.legal-layout {
    display: block
  }
  .doc__section[hidden] {
    display: block!important
  }
  .doc__section-head,.note {
    background: none;
    color: black
  }
  .doc__section {
    break-before: page
  }
  .docstep {
    break-inside: avoid
  }
  .docstep__shot img {
    max-height: 500px
  }
  .legal__section p,.legal__section li,.doc__section-head p {
    color: #303030
  }
}

/* Transaction-specific compositions. */
.summary__head h2 {
  font-size: 1.8rem;
  margin-top: var(--s-4)
}

.checkout__h {
  font-size: 1.7rem
}

.dialog::backdrop {
  background: var(--scrim)
}

.invoice-amount {
  font: 500 clamp(2rem,4vw,3.5rem)/1.4 var(--font-display);
  letter-spacing: -.05em;
  margin-block: var(--s-3)
}

.invoice-amount small {
  font: 11px var(--font-mono);
  color: var(--text-muted);
  letter-spacing: 0
}

.invoice-primary>.lead {
  font-size: .875rem
}

.invoice-actions {
  margin-top: var(--s-7);
  gap: var(--s-5)
}

.invoice-record-link,.payment-record,.download-changelog {
  margin-top: var(--s-6)
}

[data-poll-message] {
  margin-top: var(--s-4);
  font-size: .6875rem
}

.download-date {
  margin-top: var(--s-5);
  font-size: .6875rem
}

.download-layout section>.label {
  display: block;
  margin-bottom: var(--s-5)
}

.download-layout .steps {
  margin-top: var(--s-5)
}

.legal-updated {
  margin-top: var(--s-6);
  font-size: 9px
}

/* Account header and content width. */
.dash__main {
  max-width: 980px;
  margin-inline: auto
}

.account-greeting {
  font: 11px var(--font-mono);
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary);
  margin-bottom: var(--s-5)
}

.account-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: white;
  font-size: 11px
}

@media(max-width:700px) {
  .checkout__h {
    font-size: 1.5rem
  }
  .invoice-actions .btn {
    width: 100%
  }
  .legal-updated {
    font-size: 8px
  }
}

.package-mobile {
  display: none
}

@media(max-width:700px) {
  .is-enhanced .package-mobile {
    display: block;
    padding: var(--s-5) 0
  }
  .is-enhanced .package-nav {
    display: none
  }
  .product-detail .pagehead {
    padding-top: var(--s-5);
    padding-bottom: var(--s-6)
  }
  .product-detail .back-link {
    margin-bottom: var(--s-5)
  }
  .product-detail .pagehead .eyebrow {
    margin-bottom: var(--s-5)
  }
  .docs-page .pagehead {
    padding-bottom: var(--s-5)
  }
  .docs-page .pagehead .section-heading {
    margin-bottom: var(--s-5)
  }
}