:root {
  --colour-charcoal-950: #11131a;
  --colour-midnight-900: #18243a;
  --colour-midnight-700: #263a59;
  --colour-warm-white: #f6f0df;
  --colour-paper-muted: #e8dfc9;
  --colour-ink: #171923;
  --colour-pixel-yellow: #f6c945;
  --colour-arcade-cyan: #42d8d1;
  --colour-retro-green: #64c466;
  --colour-orange-highlight: #f27a35;
  --colour-magenta-signal: #d94f86;
  --colour-line-dark: #405273;
  --colour-line-light: #b9ae95;

  --font-display: "Press Start 2P", "Courier New", monospace;
  --font-body: "Atkinson Hyperlegible", Arial, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lead: 1.125rem;
  --text-h4: 1.375rem;
  --text-h3: clamp(1.5rem, 2.2vw, 1.875rem);
  --text-h2: clamp(1.875rem, 3.5vw, 2.5rem);
  --text-h1: clamp(2.125rem, 5vw, 3.25rem);

  --leading-tight: 1.08;
  --leading-heading: 1.2;
  --leading-card: 1.35;
  --leading-copy: 1.65;
  --leading-compact: 1.45;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3.5rem;
  --space-9: 4.5rem;
  --space-10: 6rem;

  --container-width: 75rem;
  --container-feature-width: 80rem;
  --container-padding: 1.5rem;
  --article-width: 47.5rem;
  --article-narrow-width: 40rem;

  --radius-none: 0;
  --radius-control: 0.25rem;
  --radius-panel: 0.5rem;

  --border-light: 1px solid var(--colour-line-light);
  --border-dark: 1px solid var(--colour-line-dark);
  --border-pixel-light: 2px solid var(--colour-ink);
  --border-pixel-dark: 2px solid var(--colour-line-dark);

  --shadow-raised: 0 6px 0 rgb(0 0 0 / 28%);
  --focus-dark: 0 0 0 3px var(--colour-pixel-yellow);
  --focus-light: 0 0 0 3px var(--colour-charcoal-950);

  --transition-fast: 160ms ease;
  --tap-size: 2.75rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 20rem;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 20rem;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background: var(--colour-charcoal-950);
  color: var(--colour-warm-white);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-copy);
  letter-spacing: 0.01em;
  text-rendering: optimizeLegibility;
}

main,
header,
footer,
section,
article,
aside,
nav,
figure,
form,
fieldset {
  min-width: 0;
}

img,
picture,
svg,
canvas,
video,
iframe {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

img[data-pixel-art],
.pixel-art {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

a {
  color: inherit;
  overflow-wrap: anywhere;
  text-decoration-color: currentColor;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
}

a:hover {
  text-decoration-thickness: 0.14em;
}

button,
input,
select,
textarea {
  margin: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}

button,
select,
summary,
[type="button"],
[type="submit"],
[type="reset"],
label[for] {
  cursor: pointer;
}

button,
[type="button"],
[type="submit"],
[type="reset"] {
  min-height: var(--tap-size);
}

textarea {
  min-height: 7rem;
  resize: vertical;
}

input,
select,
textarea {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--colour-line-light);
  border-radius: var(--radius-control);
  background: var(--colour-warm-white);
  color: var(--colour-ink);
  line-height: 1.4;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  padding: 0.625rem 0.75rem;
}

input[type="checkbox"],
input[type="radio"] {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  accent-color: var(--colour-midnight-900);
}

fieldset {
  margin: 0;
  padding: var(--space-4);
  border: var(--border-light);
}

legend {
  padding-inline: var(--space-2);
  font-weight: 700;
}

::placeholder {
  color: color-mix(in srgb, var(--colour-ink) 62%, transparent);
  opacity: 1;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--colour-pixel-yellow);
  outline-offset: 2px;
}

.surface-light :focus-visible,
.surface-paper :focus-visible {
  outline-color: var(--colour-charcoal-950);
}

::selection {
  background: var(--colour-pixel-yellow);
  color: var(--colour-charcoal-950);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block: 0 var(--space-4);
  color: currentColor;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

h1 {
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
}

h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-tight);
}

h3 {
  font-size: var(--text-h3);
  line-height: var(--leading-heading);
}

h4 {
  font-size: var(--text-h4);
  line-height: var(--leading-card);
}

h5,
h6 {
  font-size: var(--text-base);
  line-height: var(--leading-heading);
}

p {
  margin-block: 0 var(--space-4);
  font-size: var(--text-base);
  line-height: var(--leading-copy);
}

ul,
ol {
  margin-block: 0 var(--space-4);
  padding-inline-start: 1.5rem;
}

ul ul,
ul ol,
ol ul,
ol ol {
  margin-block: var(--space-2) 0;
}

blockquote {
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  border-inline-start: 4px solid var(--colour-pixel-yellow);
  background: color-mix(in srgb, currentColor 6%, transparent);
}

blockquote p:last-child {
  margin-block-end: 0;
}

hr {
  height: 0;
  margin: var(--space-6) 0;
  border: 0;
  border-block-start: 1px solid currentColor;
  opacity: 0.32;
}

figure {
  margin: 0 0 var(--space-5);
}

figcaption,
caption {
  margin-block-start: var(--space-2);
  color: currentColor;
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
  opacity: 0.8;
}

table {
  width: 100%;
  margin-block: 0 var(--space-5);
  border-collapse: collapse;
  border: var(--border-light);
  color: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

th,
td {
  padding: var(--space-3);
  border: var(--border-light);
  text-align: start;
  vertical-align: top;
}

th {
  font-weight: 700;
}

code,
kbd,
samp,
pre {
  font-family: "Courier New", monospace;
}

code,
kbd {
  padding: 0.1em 0.32em;
  border: 1px solid currentColor;
  background: rgb(0 0 0 / 8%);
  font-size: 0.9em;
}

pre {
  max-width: 100%;
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  overflow-x: auto;
  border: var(--border-light);
  background: rgb(0 0 0 / 8%);
  font-size: var(--text-sm);
  line-height: 1.55;
}

small {
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

strong {
  font-weight: 700;
}

details {
  margin-block-end: var(--space-3);
  border: var(--border-light);
  background: transparent;
}

summary {
  min-height: var(--tap-size);
  padding: var(--space-3) var(--space-4);
  font-weight: 700;
}

details > :not(summary) {
  padding-inline: var(--space-4);
}

details > :last-child {
  margin-block-end: var(--space-4);
}

.container,
.container-feature,
.container-article,
.container {
  max-width: calc(var(--container-width) + (var(--container-padding) * 2));
}

.container-feature {
  max-width: calc(var(--container-feature-width) + (var(--container-padding) * 2));
}

.container-article {
  max-width: calc(var(--article-width) + (var(--container-padding) * 2));
}

.section {
  padding-block: var(--space-9);
}

.section-compact {
  padding-block: var(--space-7);
}

.surface-dark {
  background: var(--colour-midnight-900);
  color: var(--colour-warm-white);
}

.surface-dark-secondary {
  background: var(--colour-midnight-700);
  color: var(--colour-warm-white);
}

.surface-light {
  background: var(--colour-warm-white);
  color: var(--colour-ink);
}

.surface-paper {
  background: var(--colour-paper-muted);
  color: var(--colour-ink);
}

.pixel-frame {
  border: var(--border-pixel-dark);
  border-radius: var(--radius-none);
}

.surface-light .pixel-frame,
.surface-paper .pixel-frame {
  border-color: var(--colour-ink);
}

.panel {
  min-width: 0;
  padding: var(--space-5);
  border: var(--border-light);
  border-radius: var(--radius-none);
  background: var(--colour-warm-white);
  color: var(--colour-ink);
}

.panel-dark {
  min-width: 0;
  padding: var(--space-5);
  border: var(--border-dark);
  border-radius: var(--radius-none);
  background: var(--colour-midnight-900);
  color: var(--colour-warm-white);
}

.panel-raised {
  box-shadow: var(--shadow-raised);
}

.panel > :last-child,
.panel-dark > :last-child,
.content-group > :last-child,
.stack > :last-child {
  margin-block-end: 0;
}

.content-group {
  min-width: 0;
}

.stack {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
}

.stack-tight {
  gap: var(--space-2);
}

.stack-loose {
  gap: var(--space-6);
}

.cluster {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.cluster > * {
  min-width: 0;
}

.cluster-start {
  justify-content: flex-start;
}

.cluster-end {
  justify-content: flex-end;
}

.cluster-between {
  justify-content: space-between;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block: 0 var(--space-3);
  color: var(--colour-pixel-yellow);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 1rem;
  height: 2px;
  background: currentColor;
  content: "";
  flex: 0 0 auto;
}

.eyebrow-orange {
  color: var(--colour-orange-highlight);
}

.lead {
  margin-block-end: var(--space-5);
  font-size: var(--text-lead);
  line-height: 1.6;
}

.text-muted {
  opacity: 0.76;
}

.meta {
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

.button,
.button-secondary,
.button-dark {
  display: inline-flex;
  min-width: 0;
  min-height: var(--tap-size);
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.625rem 0.875rem;
  border: 2px solid transparent;
  border-radius: var(--radius-none);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.button {
  border-color: var(--colour-arcade-cyan);
  background: var(--colour-arcade-cyan);
  color: var(--colour-charcoal-950);
}

.button-secondary {
  border-color: currentColor;
  background: transparent;
  color: inherit;
}

.button-dark {
  border-color: var(--colour-arcade-cyan);
  background: var(--colour-midnight-900);
  color: var(--colour-arcade-cyan);
}

.button:hover,
.button-secondary:hover,
.button-dark:hover {
  transform: translateY(-2px);
}

.button:hover {
  border-color: var(--colour-pixel-yellow);
  background: var(--colour-pixel-yellow);
  color: var(--colour-charcoal-950);
}

.button-secondary:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.button-dark:hover {
  border-color: var(--colour-pixel-yellow);
  color: var(--colour-pixel-yellow);
}

.button:focus-visible,
.button-secondary:focus-visible,
.button-dark:focus-visible {
  outline: 3px solid var(--colour-pixel-yellow);
  outline-offset: 2px;
}

.surface-light .button:focus-visible,
.surface-light .button-secondary:focus-visible,
.surface-light .button-dark:focus-visible,
.surface-paper .button:focus-visible,
.surface-paper .button-secondary:focus-visible,
.surface-paper .button-dark:focus-visible {
  outline-color: var(--colour-charcoal-950);
}

.badge,
.label {
  display: inline-flex;
  min-height: 1.5rem;
  align-items: center;
  gap: var(--space-1);
  padding: 0.125rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: var(--radius-control);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.25;
}

.badge-verified {
  border-color: var(--colour-retro-green);
  color: var(--colour-retro-green);
}

.badge-warning {
  border-color: var(--colour-pixel-yellow);
  color: var(--colour-pixel-yellow);
}

.callout {
  margin-block-end: var(--space-5);
  padding: var(--space-4);
  border-inline-start: 4px solid var(--colour-retro-green);
  background: var(--colour-paper-muted);
  color: var(--colour-ink);
}

.callout-tip {
  border-inline-start-color: var(--colour-pixel-yellow);
}

.callout > :last-child {
  margin-block-end: 0;
}

.list-plain {
  margin: 0;
  padding: 0;
  list-style: none;
}

.content-list {
  display: grid;
  gap: var(--space-2);
}

.breadcrumbs {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block: 0 var(--space-4);
  padding: 0;
  color: inherit;
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
  list-style: none;
}

.breadcrumbs li {
  min-width: 0;
}

.breadcrumbs li + li::before {
  margin-inline-end: var(--space-2);
  color: var(--colour-orange-highlight);
  content: "›";
}

.skip-link {
  position: fixed;
  z-index: 1000;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  transform: translateY(-150%);
  padding: var(--space-3) var(--space-4);
  background: var(--colour-pixel-yellow);
  color: var(--colour-charcoal-950);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 47.5rem) {
  :root {
    --container-padding: 1rem;
  }

  .section {
    padding-block: var(--space-7);
  }

  .section-compact {
    padding-block: var(--space-5);
  }

  .panel,
  .panel-dark {
    padding: var(--space-4);
  }

  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media (max-width: 26.25rem) {
  :root {
    --text-h1: clamp(1.875rem, 10vw, 2.25rem);
    --text-h2: 1.75rem;
    --text-h3: 1.375rem;
  }

  .button,
  .button-secondary,
  .button-dark {
    width: 100%;
  }

  .cluster > .button,
  .cluster > .button-secondary,
  .cluster > .button-dark {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .button:hover,
  .button-secondary:hover,
  .button-dark:hover {
    transform: none;
  }
}


.site-header {
  position: relative;
  z-index: 100;
  min-height: 4.5rem;
  border-block-end: 1px solid var(--colour-line-dark);
  background: var(--colour-midnight-900);
  color: var(--colour-warm-white);
}

.site-header__inner {
  display: grid;
  min-height: 4.5rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
}

.site-header__brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
  color: var(--colour-warm-white);
  text-decoration: none;
  white-space: nowrap;
}

.site-header__mark {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  object-fit: contain;
}

.site-header__brand-text {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.site-header__nav {
  min-width: 0;
}

.site-header__nav-list {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__nav-list li,
.site-header__nav-list .site-header__nav-list a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  padding-inline: 0.5rem;
  border-block-end: 2px solid transparent;
  color: var(--colour-warm-white);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.site-header__nav-list a:hover,
.site-header__nav-list a[aria-current="page"] {
  border-block-end-color: var(--colour-pixel-yellow);
  color: var(--colour-arcade-cyan);
}

.site-header__nav-mobile-only {
  display: none !important;
}

.site-header__actions {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
}

.site-header__play-link {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem 0.625rem;
  border: 2px solid var(--colour-arcade-cyan);
  background: var(--colour-midnight-900);
  color: var(--colour-arcade-cyan);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}

.site-header__play-link:hover {
  border-color: var(--colour-pixel-yellow);
  color: var(--colour-charcoal-950);
  background: var(--colour-pixel-yellow);
  transform: translateY(-2px);
}

.site-header__toggle {
  display: none;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--colour-line-dark);
  border-radius: 0;
  background: transparent;
  color: var(--colour-warm-white);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.site-header__toggle-lines {
  display: grid;
  width: 1rem;
  gap: 3px;
}

.site-header__toggle-lines span {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.site-header__toggle[aria-expanded="true"] {
  border-color: var(--colour-arcade-cyan);
  color: var(--colour-arcade-cyan);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-lines span:first-child {
  transform: translateY(5px) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-lines span:nth-child(2) {
  opacity: 0;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-lines span:last-child {
  transform: translateY(-5px) rotate(-45deg);
}

.site-header a:focus-visible,
.site-header button:focus-visible {
  outline: 3px solid var(--colour-pixel-yellow);
  outline-offset: 2px;
}
.container{
  margin: 0 auto;
}
@media (max-width: 67.5rem) {
  .site-header__inner {
    grid-template-columns: auto 1fr auto;
    gap: var(--space-3);
  }

  .site-header__toggle {
    display: inline-flex;
  }

  .site-header__nav {
    position: absolute;
    z-index: 2;
    inset: calc(100% + 1px) var(--space-4) auto;
    display: none;
    max-height: min(32rem, calc(100vh - 5.5rem));
    overflow-y: auto;
    border: 2px solid var(--colour-line-dark);
    background: var(--colour-midnight-900);
    box-shadow: var(--shadow-raised);
  }

  .site-header__nav.is-open {
    display: block;
  }

  .site-header__nav-list {
    display: grid;
    gap: 0;
    padding: var(--space-2);
    
  }

  .site-header__nav-list a {
    width: 100%;
    min-height: 2.75rem;
    padding-inline: var(--space-3);
    border-inline-start: 2px solid transparent;
    border-block-end: 0;
    font-size: var(--text-sm);
  }

  .site-header__nav-list a:hover,
  .site-header__nav-list a[aria-current="page"] {
    border-inline-start-color: var(--colour-pixel-yellow);
    background: var(--colour-midnight-700);
  }

  .site-header__nav-mobile-only {
    display: flex !important;
  }
}

@media (max-width: 35rem) {
  .site-header {
    min-height: 4rem;
  }

  .site-header__inner {
    min-height: 4rem;
    gap: var(--space-2);
  }

  .site-header__mark {
    width: 2rem;
    height: 2rem;
    flex-basis: 2rem;
  }

  .site-header__brand-text {
    font-size: 0.8125rem;
  }

  .site-header__play-link {
    min-width: 2.75rem;
    padding-inline: 0.5rem;
    font-size: 0;
  }

  .site-header__play-link span {
    font-size: 1rem;
  }

  .site-header__toggle-label {
    display: none;
  }

  .site-header__nav {
    inset-inline: var(--space-3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__play-link:hover {
    transform: none;
  }
}


.site-footer {
  border-block-start: 2px solid var(--colour-line-dark);
  background: var(--colour-charcoal-950);
  color: var(--colour-warm-white);
}

.site-footer__main {
  display: grid;
  grid-template-columns: minmax(14rem, 1.2fr) minmax(0, 2fr);
  gap: var(--space-8);
  padding-block: var(--space-8);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.site-footer__identity {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-footer__mark {
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 2.5rem;
  object-fit: contain;
}

.site-footer h2,
.site-footer p,
.site-footer ul {
  margin: 0;
}

.site-footer__identity h2 {
  font-size: 1rem;
  line-height: 1.25;
}

.site-footer__brand p {
  color: var(--colour-paper-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.site-footer__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.site-footer__group h2 {
  color: var(--colour-pixel-yellow);
  font-size: var(--text-xs);
  line-height: 1.4;
  text-transform: uppercase;
}

.site-footer__group ul {
  display: grid;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}

.site-footer__group li,
.site-footer__group .site-footer__group a {
  color: var(--colour-paper-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

.site-footer__group a:hover {
  color: var(--colour-arcade-cyan);
}

.site-footer__bottom {
  border-block-start: 1px solid var(--colour-line-dark);
}

.site-footer__bottom .container {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-4);
}

.site-footer__bottom p {
  margin: 0;
  color: var(--colour-paper-muted);
  font-size: var(--text-xs);
  line-height: var(--leading-compact);
}

.site-footer__bottom span {
  opacity: 0.76;
}

.site-footer a:focus-visible,
.site-consent button:focus-visible,
.site-consent a:focus-visible {
  outline: 3px solid var(--colour-pixel-yellow);
  outline-offset: 2px;
}

.site-consent {
  position: fixed;
  z-index: 200;
  inset: auto var(--space-4) var(--space-4);
  border: 2px solid var(--colour-line-dark);
  background: var(--colour-midnight-900);
  color: var(--colour-warm-white);
  box-shadow: var(--shadow-raised);
}

.site-consent[hidden] {
  display: none;
}

.site-consent.is-hiding {
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.site-consent__inner {
  display: flex;
  max-width: 72rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-inline: auto;
  padding: var(--space-4);
}

.site-consent__copy {
  display: grid;
  gap: var(--space-2);
}

.site-consent h2,
.site-consent p {
  margin: 0;
}

.site-consent h2 {
  font-size: var(--text-sm);
  line-height: var(--leading-heading);
}

.site-consent p {
  color: var(--colour-paper-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

.site-consent__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.site-consent button {
  min-height: 2.75rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid transparent;
  border-radius: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.2;
}

.site-consent__reject {
  border-color: var(--colour-paper-muted) !important;
  background: transparent;
  color: var(--colour-paper-muted);
}

.site-consent__accept {
  border-color: var(--colour-arcade-cyan) !important;
  background: var(--colour-arcade-cyan);
  color: var(--colour-charcoal-950);
}

.site-consent button:hover {
  border-color: var(--colour-pixel-yellow) !important;
  color: var(--colour-charcoal-950);
  background: var(--colour-pixel-yellow);
}

@media (max-width: 47.5rem) {
  .site-footer__main {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding-block: var(--space-7);
  }

  .site-footer__nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-footer__bottom .container {
    grid-template-columns: 1fr;
  }

  .site-consent {
    inset-inline: var(--space-2);
    inset-block-end: var(--space-2);
  }

  .site-consent__inner {
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-4);
  }

  .site-consent__actions {
    width: 100%;
  }

  .site-consent button {
    flex: 1 1 12rem;
  }
}

@media (max-width: 30rem) {
  .site-footer__nav {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__group:last-child {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-consent.is-hiding {
    transition: none;
  }
}


.cookies-page {
  background: var(--colour-warm-white);
  color: var(--colour-ink);
}

.cookies-page a:not(.button) {
  color: inherit;
  font-weight: 700;
  text-decoration-thickness: 0.1em;
}

.cookies-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-8);
}

.cookies-hero::before {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 5px, rgb(66 216 209 / 6%) 6px);
  content: "";
  pointer-events: none;
}

.cookies-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-5);
}

.cookies-hero__reading {
  grid-column: 2 / span 8;
  min-width: 0;
  max-width: 47.5rem;
}

.cookies-hero__reading > :last-child {
  margin-block-end: 0;
}

.cookies-hero__reading .breadcrumbs {
  color: var(--colour-warm-white);
}

.cookies-hero__reading .lead {
  max-width: 42.5rem;
}

.cookies-hero__independence {
  max-width: 42.5rem;
  color: var(--colour-paper-muted);
}

.cookies-date-strip {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-inline-start: 4px solid var(--colour-pixel-yellow);
  background: var(--colour-paper-muted);
  color: var(--colour-ink);
}

.cookies-date-strip__label,
.cookies-definition__label,
.cookies-note__label,
.cookies-external__label {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: uppercase;
}

.cookies-date-strip__label {
  flex: 0 0 auto;
}

.cookies-date-strip strong {
  min-width: 0;
}

.cookies-hero__cabinet {
  grid-column: 10 / span 3;
  align-self: stretch;
  min-width: 0;
  border: 2px solid var(--colour-line-dark);
  border-block-end-width: 10px;
  background: linear-gradient(90deg, transparent 0 42%, rgb(66 216 209 / 16%) 42% 47%, transparent 47% 100%);
  opacity: 0.65;
}

.cookies-section {
  padding-block: var(--space-8);
}

.cookies-reading {
  width: 100%;
  max-width: 43.75rem;
  margin-inline: auto;
}

.cookies-reading > :last-child,
.cookies-changes > :last-child,
.cookies-controls > :last-child,
.cookies-contact__copy > :last-child {
  margin-block-end: 0;
}

.cookies-definition {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  margin-block: var(--space-5);
  padding: var(--space-4);
  border: 2px solid var(--colour-arcade-cyan);
  background: var(--colour-midnight-900);
  color: var(--colour-warm-white);
}

.cookies-definition__label {
  color: var(--colour-arcade-cyan);
}

.cookies-definition p {
  margin: 0;
}

.cookies-use > h2 + p {
  }

.cookies-purpose-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-block-start: var(--space-5);
  border-block: 1px solid var(--colour-line-light);
}

.cookies-purpose {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  column-gap: var(--space-4);
  min-width: 0;
  padding-block: var(--space-5);
  border-block-end: 1px solid var(--colour-line-light);
}

.cookies-purpose:last-child {
  border-block-end: 0;
}

.cookies-purpose__rail,
.cookies-purpose__content {
  min-width: 0;
}

.cookies-purpose__rail {
  padding-block-start: 0.25rem;
}

.cookies-purpose__rail span {
  display: inline-block;
  border-inline-start: 4px solid var(--colour-pixel-yellow);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  line-height: 1.5;
  padding-inline-start: var(--space-2);
  text-transform: uppercase;
}

.cookies-purpose--preferences .cookies-purpose__rail span {
  border-inline-start-color: var(--colour-orange-highlight);
}

.cookies-purpose--measurement .cookies-purpose__rail span {
  border-inline-start-color: var(--colour-retro-green);
}

.cookies-purpose__content h3 {
  margin-block-end: var(--space-3);
  font-size: var(--text-h4);
}

.cookies-purpose__content p {
  margin-block-end: 0;
}

.cookies-controls {
  width: 100%;
  max-width: 47.5rem;
  margin-inline: auto;
}

.cookies-controls__intro {
  max-width: 45rem;
}

.cookies-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.cookies-step {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-5);
}

.cookies-step__number {
  display: inline-flex;
  flex: 0 0 3rem;
  width: 3rem;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--colour-ink);
  background: var(--colour-pixel-yellow);
  color: var(--colour-charcoal-950);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  line-height: 1;
}

.cookies-step__content {
  min-width: 0;
  width: min(100%, 40.625rem);
}

.cookies-step__content h3 {
  margin-block-end: var(--space-3);
  font-size: var(--text-h4);
}

.cookies-note {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
  padding: var(--space-4);
  border: var(--border-light);
  background: var(--colour-paper-muted);
}

.cookies-note__label {
  color: var(--colour-ink);
}

.cookies-note p {
  margin: 0;
}

.cookies-external {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-block: var(--space-5) 0;
  padding: var(--space-5);
  border: 2px solid var(--colour-arcade-cyan);
  background: var(--colour-midnight-900);
  color: var(--colour-warm-white);
}

.cookies-external__label {
  color: var(--colour-retro-green);
}

.cookies-external h3,
.cookies-external p {
  margin: 0;
}

.cookies-external h3 {
  max-width: 38.75rem;
}

.cookies-external p {
  }

.cookies-external__action {
  max-width: 100%;
}

.cookies-changes {
  width: 100%;
  max-width: 42.5rem;
  margin-inline: auto;
  padding-block-start: var(--space-4);
  border-block-start: 2px solid var(--colour-orange-highlight);
}

.cookies-changes__date {
  display: inline-block;
  margin-block-start: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--colour-paper-muted);
}

.cookies-contact {
  padding-block: var(--space-8);
}

.cookies-contact__panel {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.cookies-contact__copy {
  display: flex;
  grid-column: 3 / span 7;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 2px solid var(--colour-ink);
  background: var(--colour-warm-white);
  color: var(--colour-ink);
}

.cookies-contact__copy .eyebrow,
.cookies-contact__copy h2,
.cookies-contact__copy p {
  margin: 0;
}

.cookies-contact__copy p {
  }

.cookies-contact__independence {
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

.cookies-contact__action {
  margin-block-start: var(--space-2);
}

@media (max-width: 60rem) {
  .cookies-hero__reading {
    grid-column: 1 / span 9;
  }

  .cookies-hero__cabinet {
    grid-column: 11 / span 2;
  }

  .cookies-contact__copy {
    grid-column: 2 / span 9;
  }
}

@media (max-width: 47.5rem) {
  .cookies-hero,
  .cookies-section,
  .cookies-contact {
    padding-block: var(--space-6);
  }

  .cookies-hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cookies-hero__reading {
    grid-column: 1;
    max-width: none;
  }

  .cookies-hero__reading .lead,
  .cookies-hero__independence,
  .cookies-date-strip {
  }

  .cookies-hero__cabinet {
    display: none;
  }

  .cookies-purpose {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-3);
  }

  .cookies-purpose__rail {
    padding-block-start: 0;
  }

  .cookies-step {
    flex-direction: column;
    gap: var(--space-3);
  }

  .cookies-step__number {
    flex-basis: 2.75rem;
    width: 2.75rem;
    min-height: 2.75rem;
  }

  .cookies-step__content {
    width: 100%;
  }

  .cookies-contact__panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .cookies-contact__copy {
    grid-column: 1;
    padding: var(--space-5);
  }

  .cookies-external__action,
  .cookies-contact__action {
    width: 100%;
  }
}

@media (max-width: 30rem) {
  .cookies-date-strip {
    flex-direction: column;
    align-items: flex-start;
  }

  .cookies-external,
  .cookies-contact__copy {
    padding: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookies-page .button:hover {
    transform: none;
  }
}


.contact-page {
  background: var(--colour-warm-white);
  color: var(--colour-ink);
}

.contact-page a:focus-visible {
  outline: 3px solid var(--colour-charcoal-950);
  outline-offset: 3px;
}

.contact-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-8);
}

.contact-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: stretch;
  gap: var(--space-6);
}

.contact-hero__copy,
.contact-hero__decor,
.contact-record,
.contact-records__secondary,
.contact-reason,
.contact-limits__column,
.contact-method__panel,
.contact-send__checklist,
.contact-send__action {
  min-width: 0;
}

.contact-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-4);
  max-width: 40.625rem;
}

.contact-hero__copy .breadcrumbs,
.contact-hero__copy .eyebrow,
.contact-hero__copy h1,
.contact-hero__copy p,
.contact-hero__copy .lead,
.contact-hero__copy .contact-hero__status {
  margin: 0;
}

.contact-hero__lead {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
  max-width: 40.625rem;
}

.contact-hero__lead .lead {
  font-size: var(--text-lead);
}

.contact-hero__action {
  width: auto;
}

.contact-hero__status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 40.625rem;
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

.contact-hero__decor {
  position: relative;
  min-height: 22rem;
  border: 2px solid var(--colour-line-dark);
  background-color: var(--colour-midnight-900);
  background-image: repeating-linear-gradient(to bottom, rgb(246 240 223 / 6%) 0, rgb(246 240 223 / 6%) 1px, transparent 1px, transparent 7px);
}

.contact-hero__decor::before,
.contact-hero__decor::after {
  position: absolute;
  width: 2rem;
  height: 2rem;
  border-color: var(--colour-arcade-cyan);
  content: "";
}

.contact-hero__decor::before {
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  border-block-start: 4px solid var(--colour-arcade-cyan);
  border-inline-start: 4px solid var(--colour-arcade-cyan);
}

.contact-hero__decor::after {
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
  border-block-end: 4px solid var(--colour-orange-highlight);
  border-inline-end: 4px solid var(--colour-orange-highlight);
}

.contact-hero__cabinet {
  position: absolute;
  inset-block-end: 2.5rem;
  inset-inline: 24% 14%;
  height: 13rem;
  border: 2px solid var(--colour-midnight-700);
  background: var(--colour-charcoal-950);
}

.contact-hero__cabinet::before {
  position: absolute;
  inset: 1.25rem 1.25rem auto;
  height: 6.5rem;
  border: 2px solid var(--colour-line-dark);
  background: var(--colour-midnight-700);
  content: "";
}

.contact-hero__cabinet::after {
  position: absolute;
  inset-block-end: 1.25rem;
  inset-inline-start: 1.5rem;
  width: 3rem;
  height: 0.75rem;
  background: var(--colour-pixel-yellow);
  box-shadow: 4rem 0 0 var(--colour-orange-highlight), 8rem 0 0 var(--colour-arcade-cyan);
  content: "";
}

.contact-details__intro,
.contact-reasons__intro,
.contact-limits__intro {
  max-width: 42.5rem;
}

.contact-records {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-5);
}

.contact-records__secondary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5);
}

.contact-record {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border: var(--border-light);
}

.contact-record > * {
  margin: 0;
}

.contact-record--email {
  justify-content: center;
  border-inline-start: 4px solid var(--colour-arcade-cyan);
  background: var(--colour-warm-white);
}

.contact-record--phone,
.contact-record--address {
  background: var(--colour-paper-muted);
}

.contact-record--phone {
  border-inline-start: 4px solid var(--colour-orange-highlight);
}

.contact-record--address {
  position: relative;
  border-inline-start: 4px solid var(--colour-midnight-700);
}

.contact-record--address::before {
  width: 0.8rem;
  height: 0.8rem;
  border: 2px solid var(--colour-midnight-700);
  background: var(--colour-warm-white);
  content: "";
}

.contact-record__label,
.contact-reason__label,
.contact-method__label,
.contact-verified__label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
}

.contact-record--email .contact-record__label,
.contact-reason--editorial .contact-reason__label {
  color: var(--colour-midnight-700);
}

.contact-record--phone .contact-record__label {
  color: var(--colour-orange-highlight);
}

.contact-record--address .contact-record__label {
  color: var(--colour-midnight-700);
}

.contact-record__link,
.contact-send__email {
  display: inline-flex;
  min-height: var(--tap-size);
  align-items: center;
  padding: var(--space-2) 0;
  color: var(--colour-midnight-900);
  font-size: var(--text-lead);
  font-weight: 700;
  text-decoration-thickness: 2px;
}

.contact-record address {
  font-style: normal;
  font-size: var(--text-lead);
  font-weight: 700;
  line-height: 1.5;
}

.contact-reasons__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-5);
}

.contact-reason {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border: var(--border-light);
  background: var(--colour-warm-white);
}

.contact-reason > * {
  margin: 0;
}

.contact-reason ul {
  padding-inline-start: 1.25rem;
}

.contact-reason--source {
  border-block-start: 4px solid var(--colour-retro-green);
}

.contact-reason--source .contact-reason__label {
  color: #307b35;
}

.contact-reason--access {
  border-block-start: 4px solid var(--colour-pixel-yellow);
}

.contact-reason--access .contact-reason__label {
  color: #765900;
}

.contact-reason--editorial {
  border-block-start: 4px solid var(--colour-arcade-cyan);
}

.contact-reason__example {
  padding-inline-start: var(--space-3);
  border-inline-start: 2px solid var(--colour-pixel-yellow);
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

.contact-reason a {
  margin-block-start: auto;
  color: var(--colour-midnight-900);
  font-weight: 700;
}

.contact-limits__intro {
  max-width: 43.75rem;
}

.contact-limits__panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-5);
  padding: var(--space-6);
}

.contact-limits__columns {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: stretch;
}

.contact-limits__column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.contact-limits__column > * {
  margin: 0;
}

.contact-limits__column ul {
  padding-inline-start: 1.25rem;
}

.contact-limits__column--editorial {
  padding-inline-end: var(--space-5);
}

.contact-limits__column--official {
  padding-inline-start: var(--space-5);
  border-inline-start: 2px solid var(--colour-arcade-cyan);
}

.contact-verified {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--colour-retro-green);
  background: color-mix(in srgb, var(--colour-retro-green) 12%, var(--colour-midnight-900));
}

.contact-verified > * {
  margin: 0;
}

.contact-verified__label {
  color: var(--colour-retro-green);
}

.contact-verified code {
  white-space: normal;
  overflow-wrap: anywhere;
}

.contact-method__intro {
  max-width: 47.5rem;
  margin-inline: auto;
}

.contact-method__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-5);
}

.contact-method__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
}

.contact-method__panel > * {
  margin: 0;
}

.contact-method__panel--verified {
  border: 2px solid var(--colour-retro-green);
  background: var(--colour-midnight-900);
  color: var(--colour-warm-white);
}

.contact-method__panel--verified .contact-method__label {
  color: var(--colour-retro-green);
}

.contact-method__panel--guidance {
  border: var(--border-light);
  border-inline-start: 4px solid var(--colour-pixel-yellow);
  background: var(--colour-warm-white);
}

.contact-method__panel--guidance .contact-method__label {
  color: #765900;
}

.contact-method__panel--guidance a {
  color: var(--colour-midnight-900);
  font-weight: 700;
}

.contact-send__panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--space-6);
  width: min(100%, 53rem);
  margin-inline: auto;
  padding: var(--space-6);
  background: var(--colour-warm-white);
}

.contact-send__checklist,
.contact-send__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.contact-send__checklist > *,
.contact-send__action > * {
  margin: 0;
}

.contact-send__checklist ul {
  padding: 0;
  list-style: none;
}

.contact-send__checklist li {
  position: relative;
  padding-inline-start: 1.25rem;
}

.contact-send__checklist .contact-send__checklist li::before {
  position: absolute;
  inset-block-start: 0.65em;
  inset-inline-start: 0;
  width: 0.55rem;
  height: 0.55rem;
  background: var(--colour-orange-highlight);
  content: "";
}

.contact-send__action {
  justify-content: center;
  padding-inline-start: var(--space-5);
  border-inline-start: 1px solid var(--colour-line-light);
}

.contact-send__action .button {
  width: auto;
}

.contact-send__email {
  font-size: var(--text-base);
}

.contact-send__disclosure {
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

@media (max-width: 61.25rem) {
  .contact-reasons__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-reason--editorial {
    grid-column: auto;
  }
}

@media (max-width: 56.25rem) {
  .contact-hero__grid {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  }

  .contact-hero__decor {
    display: none;
  }

  .contact-hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-records {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-record--email {
    grid-column: 1 / -1;
  }

  .contact-records__secondary {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
  }
}

@media (max-width: 47.5rem) {
  .contact-hero {
    padding-block: var(--space-7);
  }

  .contact-hero__copy {
    max-width: none;
  }

  .contact-limits__columns,
  .contact-method__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-limits__columns {
    gap: var(--space-5);
  }

  .contact-limits__column--editorial {
    padding-inline-end: 0;
  }

  .contact-limits__column--official {
    padding-inline-start: 0;
    padding-block-start: var(--space-5);
    border-inline-start: 0;
    border-block-start: 2px solid var(--colour-arcade-cyan);
  }
}

@media (max-width: 43.75rem) {
  .contact-send__panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-send__action {
    padding-inline-start: 0;
    padding-block-start: var(--space-5);
    border-inline-start: 0;
    border-block-start: 1px solid var(--colour-line-light);
  }
}

@media (max-width: 32.5rem) {
  .contact-records,
  .contact-records__secondary,
  .contact-reasons__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-record--email,
  .contact-records__secondary {
    grid-column: auto;
  }

  .contact-records__secondary {
    grid-template-rows: none;
  }

  .contact-hero__status {
    align-items: flex-start;
    flex-direction: column;
  }

  .contact-limits__panel,
  .contact-send__panel {
    padding: var(--space-4);
  }

  .contact-send__action .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-page * {
    scroll-behavior: auto;
  }
}


.terms-page {
  background: var(--colour-charcoal-950);
}

.terms-page__masthead {
  border-block-end: 2px solid var(--colour-arcade-cyan);
}

.terms-page__masthead-inner {
  padding-block: var(--space-8);
}

.terms-page__heading-block {
  width: 100%;
  max-width: 47.5rem;
  min-width: 0;
}

.terms-page__heading-block .breadcrumbs {
  color: var(--colour-paper-muted);
}

.terms-page__heading-block h1 {
  max-width: 44rem;
  margin-block-end: var(--space-5);
  font-size: clamp(2rem, 4vw, 2.5rem);
}

.terms-page__lead {
  max-width: 46rem;
  margin-block-end: var(--space-5);
  color: var(--colour-warm-white);
  font-size: var(--text-lead);
  line-height: 1.6;
}

.terms-page__lead a,
.terms-page__document a {
  color: inherit;
  font-weight: 700;
  text-decoration-color: var(--colour-arcade-cyan);
}

.terms-page__lead a:hover,
.terms-page__document a:hover {
  color: var(--colour-arcade-cyan);
}

.terms-page__date-strip {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--colour-line-dark);
  background: var(--colour-midnight-700);
}

.terms-page__date-strip p {
  margin: 0;
  color: var(--colour-warm-white);
}

.terms-page__date-row {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  color: var(--colour-warm-white);
  font-weight: 700;
}

.terms-page__date-label,
.terms-page__availability-label {
  display: inline-flex;
  min-height: 1.5rem;
  min-width: 0;
  align-items: center;
  padding: 0.125rem 0.5rem;
  background: var(--colour-pixel-yellow);
  color: var(--colour-charcoal-950);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.terms-page__paper {
  padding-block: var(--space-9);
}

.terms-page__shell {
  display: flex;
  min-width: 0;
  justify-content: flex-start;
}

.terms-page__document {
  width: 100%;
  max-width: 47.5rem;
  min-width: 0;
}

.terms-page__section {
  width: 100%;
  min-width: 0;
  padding-block: var(--space-7);
  border-block-end: 1px solid var(--colour-line-light);
}

.terms-page__section:first-child {
  padding-block-start: 0;
}

.terms-page__section:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.terms-page__section h2 {
  max-width: 44rem;
  margin-block-end: var(--space-5);
  font-size: clamp(1.375rem, 2.4vw, 1.5rem);
}

.terms-page__section h3 {
  margin-block-end: var(--space-3);
  font-size: clamp(1.1rem, 2vw, 1.375rem);
}

.terms-page__copy {
  width: 100%;
  min-width: 0;
}

.terms-page__copy p:last-child {
  margin-block-end: 0;
}

.terms-page__copy--acceptance {
  max-width: 45rem;
}

.terms-page__practical-note {
  display: flex;
  width: 100%;
  max-width: 47.5rem;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--colour-line-light);
  border-inline-start: 4px solid var(--colour-orange-highlight);
  background: var(--colour-paper-muted);
}

.terms-page__practical-note p {
  margin: 0;
}

.terms-page__independent-notice {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-end: var(--space-5);
  padding: var(--space-5);
  border: 2px solid var(--colour-line-dark);
  background: var(--colour-midnight-900);
  color: var(--colour-warm-white);
}

.terms-page__independent-notice .badge {
  align-self: flex-start;
}

.terms-page__independent-notice h3,
.terms-page__independent-notice p {
  margin: 0;
}

.terms-page__copy--scope {
  max-width: 45rem;
}

.terms-page__legal-disclaimer,
.terms-page__verification-block {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-end: var(--space-5);
  padding: var(--space-4);
}

.terms-page__legal-disclaimer {
  border: 1px solid var(--colour-line-light);
  border-inline-start: 4px solid var(--colour-orange-highlight);
  background: var(--colour-paper-muted);
}

.terms-page__verification-block {
  border: 1px solid var(--colour-line-light);
  border-inline-start: 4px solid var(--colour-retro-green);
  background: color-mix(in srgb, var(--colour-retro-green) 9%, var(--colour-warm-white));
}

.terms-page__verification-block .badge {
  align-self: flex-start;
  color: #276729;
}

.terms-page__legal-disclaimer h3,
.terms-page__legal-disclaimer p,
.terms-page__verification-block h3,
.terms-page__verification-block p {
  margin: 0;
}

.terms-page__copy--mutable {
  max-width: 45rem;
}

.terms-page__inline-check {
  display: inline;
  padding-inline: 0.25em;
  background: var(--colour-pixel-yellow);
  color: var(--colour-charcoal-950);
  font-weight: 700;
}

.terms-page__copy--property,
.terms-page__copy--marks {
  max-width: 44.5rem;
}

.terms-page__permission-note {
  width: 100%;
  max-width: 44.5rem;
  min-width: 0;
  margin-block: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-inline-start: 2px solid var(--colour-arcade-cyan);
  background: color-mix(in srgb, var(--colour-arcade-cyan) 8%, var(--colour-warm-white));
}

.terms-page__permission-note p,
.terms-page__attribution {
  margin-block-end: 0;
}

.terms-page__attribution {
  max-width: 38.75rem;
  margin-block-start: var(--space-3);
  color: color-mix(in srgb, var(--colour-ink) 72%, transparent);
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

.terms-page__section--use {
  width: calc(100% + (var(--space-5) * 2));
  margin-inline: calc(var(--space-5) * -1);
  padding-inline: var(--space-5);
  background: var(--colour-paper-muted);
}

.terms-page__copy--use {
  max-width: 43.75rem;
}

.terms-page__prohibited-list {
  max-width: 43.75rem;
  margin-block-end: var(--space-4);
}

.terms-page__prohibited-list li {
  padding-inline-start: var(--space-1);
}

.terms-page__copy--availability {
  max-width: 42.5rem;
  margin-block-start: var(--space-5);
}

.terms-page__availability-label {
  margin-block-end: var(--space-3);
  background: var(--colour-midnight-900);
  color: var(--colour-warm-white);
}

.terms-page__copy--external {
  max-width: 45rem;
}

.terms-page__action-advisory {
  display: flex;
  width: 100%;
  max-width: 38.75rem;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-start: var(--space-5);
  padding: var(--space-4);
  border: 2px solid var(--colour-pixel-yellow);
  background: color-mix(in srgb, var(--colour-pixel-yellow) 13%, var(--colour-warm-white));
}

.terms-page__action-advisory p {
  margin: 0;
}

.terms-page__copy--liability,
.terms-page__copy--indemnity {
  max-width: 43.75rem;
}

.terms-page__liability-divider {
  width: 100%;
  max-width: 43.75rem;
  height: 1px;
  margin-block: var(--space-5);
  background: var(--colour-line-light);
}

.terms-page__copy--changes,
.terms-page__copy--australian-context {
  max-width: 42.5rem;
}

.terms-page__copy--australian-context {
  margin-block-start: var(--space-5);
}

.terms-page__enquiry-strip {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--colour-line-light);
  border-inline-start: 4px solid var(--colour-retro-green);
  background: var(--colour-paper-muted);
}

.terms-page__enquiry-strip .badge {
  align-self: flex-start;
  color: #276729;
}

.terms-page__enquiry-strip h3,
.terms-page__enquiry-strip p {
  margin: 0;
}

.terms-page__enquiry-strip a {
  display: inline-flex;
  min-height: var(--tap-size);
  align-items: center;
}

.terms-page__closing-meta {
  margin-block: var(--space-4) 0;
  color: color-mix(in srgb, var(--colour-ink) 70%, transparent);
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

.terms-page__document :focus-visible {
  outline: 3px solid var(--colour-charcoal-950);
  outline-offset: 2px;
}

.terms-page__independent-notice :focus-visible {
  outline-color: var(--colour-pixel-yellow);
}

@media (max-width: 56.25rem) {
  .terms-page__masthead-inner {
    padding-block: var(--space-7);
  }

  .terms-page__document,
  .terms-page__heading-block {
    max-width: 46rem;
  }
}

@media (max-width: 47.5rem) {
  .terms-page__masthead-inner {
    padding-block: var(--space-6);
  }

  .terms-page__heading-block h1 {
    font-size: clamp(1.875rem, 8vw, 2rem);
  }

  .terms-page__lead {
    font-size: var(--text-lead);
  }

  .terms-page__date-row {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
  }

  .terms-page__paper {
    padding-block: var(--space-7);
  }

  .terms-page__section {
    padding-block: var(--space-6);
  }

  .terms-page__section h2 {
    font-size: clamp(1.25rem, 6vw, 1.375rem);
  }

  .terms-page__independent-notice,
  .terms-page__enquiry-strip {
    padding: var(--space-4);
  }

  .terms-page__section--use {
    width: calc(100% + (var(--space-4) * 2));
    margin-inline: calc(var(--space-4) * -1);
    padding-inline: var(--space-4);
  }

  .terms-page__action-advisory {
    max-width: 100%;
  }
}

@media (max-width: 26.25rem) {
  .terms-page__date-strip,
  .terms-page__legal-disclaimer,
  .terms-page__verification-block,
  .terms-page__practical-note,
  .terms-page__action-advisory,
  .terms-page__permission-note,
  .terms-page__independent-notice,
  .terms-page__enquiry-strip {
    padding: var(--space-3);
  }
}


.privacy-page {
  background: var(--colour-charcoal-950);
}

.privacy-page a {
  color: inherit;
  font-weight: 700;
  text-decoration-color: var(--colour-orange-highlight);
}

.privacy-page__masthead {
  padding-block: var(--space-9) var(--space-8);
}

.privacy-page__masthead-grid {
  display: grid;
  grid-template-columns: minmax(0, 10rem) minmax(0, 47.5rem);
  align-items: start;
  column-gap: var(--space-6);
}

.privacy-page__masthead-grid > * {
  min-width: 0;
}

.privacy-page__meta-rail {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding-block-start: var(--space-2);
  color: var(--colour-midnight-900);
}

.privacy-page__meta-label,
.privacy-page__meta-date,
.privacy-page__status-label,
.privacy-page__technical-label,
.privacy-page__muted-label,
.privacy-page__security-label,
.privacy-page__external-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: uppercase;
}

.privacy-page__meta-label {
  color: var(--colour-orange-highlight);
}

.privacy-page__meta-date {
  padding-inline-start: var(--space-2);
  border-inline-start: 2px solid var(--colour-pixel-yellow);
}

.privacy-page__scope-copy {
  width: 100%;
  max-width: 47.5rem;
  min-width: 0;
}

.privacy-page__scope-copy .lead {
  max-width: 43.75rem;
}

.privacy-page__date-strip {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  gap: var(--space-2);
  margin-block: 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-block: var(--border-light);
  background: var(--colour-paper-muted);
  color: var(--colour-ink);
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

.privacy-page__date-strip span {
  color: var(--colour-retro-green);
  font-size: 1rem;
}

.privacy-page__scope-note,
.privacy-page__independence-callout,
.privacy-page__request-callout {
  width: 100%;
  min-width: 0;
  padding: var(--space-4) var(--space-5);
  border: var(--border-light);
  border-inline-start: 4px solid var(--colour-retro-green);
  background: var(--colour-paper-muted);
}

.privacy-page__scope-note {
  max-width: 43.75rem;
}

.privacy-page__scope-note > :last-child,
.privacy-page__independence-callout > :last-child,
.privacy-page__request-callout > :last-child,
.privacy-page__overseas-inset > :last-child,
.privacy-page__update-note > :last-child,
.privacy-page__demo-note > :last-child {
  margin-block-end: 0;
}

.privacy-page__status-label {
  margin: 0 0 var(--space-3);
  color: var(--colour-midnight-900);
}

.privacy-page__section,
.privacy-page__closing {
  padding-block: var(--space-9);
}

.privacy-page__reading-frame {
  display: block;
}

.privacy-page__information-copy,
.privacy-page__use-copy,
.privacy-page__services-copy,
.privacy-page__disclosure-copy,
.privacy-page__choices-copy,
.privacy-page__closing-copy {
  width: 100%;
  max-width: 47.5rem;
  min-width: 0;
  margin-inline-start: 11rem;
}

.privacy-page__information-copy > p:not(.eyebrow),
.privacy-page__services-copy > p:not(.eyebrow),
.privacy-page__use-copy > p:not(.eyebrow) {
  max-width: 46.25rem;
}

.privacy-page__category-list {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-block-start: var(--space-5);
  border-block-start: var(--border-light);
}

.privacy-page__category {
  display: grid;
  grid-template-columns: minmax(0, 9.375rem) minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-block-end: var(--border-light);
}

.privacy-page__category > * {
  min-width: 0;
}

.privacy-page__category h3 {
  margin: 0;
  font-size: 1rem;
  line-height: var(--leading-heading);
}

.privacy-page__category h3 + div p:last-child {
  margin-block-end: 0;
}

.privacy-page__category--cyan h3 {
  border-inline-start: 3px solid var(--colour-arcade-cyan);
  padding-inline-start: var(--space-3);
}

.privacy-page__category--yellow h3 {
  border-inline-start: 3px solid var(--colour-pixel-yellow);
  padding-inline-start: var(--space-3);
}

.privacy-page__category--orange h3 {
  border-inline-start: 3px solid var(--colour-orange-highlight);
  padding-inline-start: var(--space-3);
}

.privacy-page__technical-label,
.privacy-page__muted-label,
.privacy-page__security-label {
  display: block;
  margin-block-end: var(--space-2);
  color: var(--colour-midnight-700);
}

.privacy-page__purpose-list {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-5);
  max-width: 44.375rem;
  margin-block: var(--space-5) 0;
  padding: 0;
  list-style: none;
}

.privacy-page__purpose-list > li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  column-gap: var(--space-3);
  padding-block-end: var(--space-5);
  border-block-end: var(--border-light);
}

.privacy-page__purpose-list > li > * {
  min-width: 0;
}

.privacy-page__purpose-list > li:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.privacy-page__purpose-marker {
  display: block;
  width: 100%;
  color: var(--colour-orange-highlight);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.privacy-page__purpose-list h3 {
  margin-block-end: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-heading);
}

.privacy-page__purpose-list p:last-child,
.privacy-page__plain-units p:last-child,
.privacy-page__protection-copy p:last-child,
.privacy-page__choice-guidance p:last-child,
.privacy-page__request-process p:last-child {
  margin-block-end: 0;
}

.privacy-page__disclosure-list {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
  max-width: 47.5rem;
  margin-block-start: var(--space-5);
}

.privacy-page__disclosure-panel {
  width: 100%;
  min-width: 0;
  padding: var(--space-5);
  border: var(--border-light);
  background: var(--colour-warm-white);
}

.privacy-page__disclosure-panel h3,
.privacy-page__plain-units h3,
.privacy-page__protection-copy h3,
.privacy-page__choice-guidance h3,
.privacy-page__request-callout h3,
.privacy-page__request-process h3,
.privacy-page__contact-block h3,
.privacy-page__update-note h3 {
  margin-block-end: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-h4);
  line-height: var(--leading-card);
}

.privacy-page__disclosure-panel > :last-child {
  margin-block-end: 0;
}

.privacy-page__disclosure-panel--muted {
  background: var(--colour-paper-muted);
}

.privacy-page__choice-line {
  padding-block-start: var(--space-3);
  border-block-start: var(--border-light);
  font-size: var(--text-sm);
}

.privacy-page__disclosure-panel--external {
  display: grid;
  grid-template-columns: minmax(0, 9.375rem) minmax(0, 1fr);
  gap: var(--space-5);
  border: var(--border-pixel-dark);
  background: var(--colour-midnight-900);
  color: var(--colour-warm-white);
}

.privacy-page__disclosure-panel--external > * {
  min-width: 0;
}

.privacy-page__external-label {
  color: var(--colour-arcade-cyan);
}

.privacy-page__external-link,
.privacy-page__email-action {
  display: inline-flex;
  min-height: var(--tap-size);
  min-width: 0;
  align-items: center;
  padding: 0.625rem 0.875rem;
  border: 2px solid var(--colour-arcade-cyan);
  color: var(--colour-arcade-cyan) !important;
  text-decoration: none !important;
}

.privacy-page__external-link {
  width: fit-content;
  max-width: 100%;
  margin-block-start: var(--space-2);
}

.privacy-page__external-link:hover,
.privacy-page__email-action:hover {
  border-color: var(--colour-pixel-yellow);
  color: var(--colour-pixel-yellow) !important;
  transform: translateY(-2px);
}

.privacy-page__plain-units {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  max-width: 43.75rem;
}

.privacy-page__plain-units > article {
  width: 100%;
  min-width: 0;
  padding-block: var(--space-5);
  border-block-end: var(--border-light);
}

.privacy-page__plain-units > article:first-child {
  padding-block-start: var(--space-2);
}

.privacy-page__independence-callout {
  max-width: 46.25rem;
  margin-block-start: var(--space-6);
}

.privacy-page__protection-layout {
  display: grid;
  grid-template-columns: minmax(0, 12.5rem) minmax(0, 45rem);
  width: 100%;
  min-width: 0;
  gap: var(--space-6);
  margin-inline-start: 11rem;
}

.privacy-page__protection-layout > * {
  min-width: 0;
}

.privacy-page__protection-title h2 {
  margin-block-end: 0;
}

.privacy-page__protection-copy {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  max-width: 45rem;
}

.privacy-page__protection-copy > article {
  width: 100%;
  min-width: 0;
  padding-block: var(--space-5);
  border-block-end: var(--border-light);
}

.privacy-page__protection-copy > article:first-child {
  padding-block-start: 0;
}

.privacy-page__protection-copy > article:last-child {
  border-block-end: 0;
}

.privacy-page__overseas-inset {
  margin-block-start: var(--space-2);
  padding: var(--space-4) var(--space-5) !important;
  border: var(--border-light) !important;
  background: var(--colour-paper-muted);
}

.privacy-page__choice-guidance {
  width: 100%;
  min-width: 0;
  max-width: 45rem;
  margin-block-start: var(--space-5);
  padding-block-end: var(--space-5);
  border-block-end: var(--border-light);
}

.privacy-page__choice-guidance ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  gap: var(--space-4);
  margin-block-end: 0;
  padding: 0;
  list-style-position: inside;
}

.privacy-page__choice-guidance li {
  min-width: 0;
}

.privacy-page__request-callout {
  max-width: 47.5rem;
  margin-block: var(--space-6);
}

.privacy-page__request-callout h3 {
  max-width: 41.25rem;
}

.privacy-page__request-callout p:last-child {
  max-width: 41.25rem;
}

.privacy-page__request-process {
  width: 100%;
  min-width: 0;
  max-width: 43.75rem;
}

.privacy-page__closing {
  padding-block-start: var(--space-8);
}

.privacy-page__closing-copy {
  max-width: 45rem;
}

.privacy-page__contact-block,
.privacy-page__update-note {
  width: 100%;
  min-width: 0;
  max-width: 45rem;
  padding: var(--space-5);
  border: var(--border-light);
}

.privacy-page__contact-block {
  margin-block-start: var(--space-5);
}

.privacy-page__email-action {
  width: fit-content;
  max-width: 100%;
  margin-block: var(--space-2) var(--space-4);
  border-color: var(--colour-midnight-900);
  color: var(--colour-midnight-900) !important;
}

.privacy-page__demo-note {
  width: 100%;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border-inline-start: 3px solid var(--colour-orange-highlight);
  background: var(--colour-paper-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

.privacy-page__update-note {
  margin-block-start: var(--space-4);
  background: var(--colour-paper-muted);
}

.privacy-page__update-note .privacy-page__status-label {
  color: var(--colour-orange-highlight);
}

@media (max-width: 61.25rem) {
  .privacy-page__masthead-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .privacy-page__meta-rail {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    padding-block-start: 0;
  }

  .privacy-page__meta-date {
    padding-inline-start: var(--space-3);
  }

  .privacy-page__information-copy,
  .privacy-page__use-copy,
  .privacy-page__services-copy,
  .privacy-page__disclosure-copy,
  .privacy-page__choices-copy,
  .privacy-page__closing-copy,
  .privacy-page__protection-layout {
    margin-inline-start: 0;
  }

  .privacy-page__category {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .privacy-page__protection-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .privacy-page__protection-title h2 {
    margin-block-end: var(--space-4);
  }
}

@media (max-width: 56.25rem) {
  .privacy-page__disclosure-panel--external {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .privacy-page__choice-guidance ul {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }
}

@media (max-width: 47.5rem) {
  .privacy-page__masthead,
  .privacy-page__section,
  .privacy-page__closing {
    padding-block: var(--space-7);
  }

  .privacy-page__scope-copy,
  .privacy-page__information-copy,
  .privacy-page__use-copy,
  .privacy-page__services-copy,
  .privacy-page__disclosure-copy,
  .privacy-page__choices-copy,
  .privacy-page__closing-copy,
  .privacy-page__protection-copy {
    max-width: none;
  }

  .privacy-page__scope-note,
  .privacy-page__independence-callout,
  .privacy-page__request-callout,
  .privacy-page__contact-block,
  .privacy-page__update-note,
  .privacy-page__disclosure-panel,
  .privacy-page__overseas-inset {
    padding: var(--space-4);
  }

  .privacy-page__purpose-list {
    gap: var(--space-4);
  }

  .privacy-page__purpose-list > li {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-2);
    padding-block-end: var(--space-4);
  }

  .privacy-page__purpose-marker {
    width: fit-content;
    padding: 0.125rem var(--space-2);
    border: 1px solid var(--colour-line-light);
  }

  .privacy-page__external-link,
  .privacy-page__email-action {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 26.25rem) {
  .privacy-page__date-strip {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .privacy-page__external-link:hover,
  .privacy-page__email-action:hover {
    transform: none;
  }
}


.platformers-page {
  background: var(--colour-warm-white);
  color: var(--colour-ink);
}

.platformers-page .section {
  position: relative;
}

.platformers-hero {
  padding-block: var(--space-8) var(--space-9);
}

.platformers-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 6fr);
  align-items: center;
  gap: var(--space-5);
}

.platformers-hero__copy {
  grid-column: 1 / span 5;
  min-width: 0;
  max-width: 38.75rem;
}

.platformers-hero__copy > :last-child,
.platformers-hero__media > :last-child,
.platformers-context__verified > :last-child,
.platformers-context__copy > :last-child,
.platformers-browse__intro > :last-child,
.platformers-step > :last-child,
.platformers-route__intro > :last-child,
.platformers-annotation > :last-child,
.platformers-practice__intro > :last-child,
.platformers-practice-item > :last-child,
.platformers-clarity__intro > :last-child,
.platformers-observation > :last-child,
.platformers-controls__caution > :last-child,
.platformers-control-card > :last-child,
.platformers-separation-panel > :last-child,
.platformers-checklist__intro > :last-child,
.platformers-checklist-row__copy > :last-child,
.platformers-final__panel > :last-child {
  margin-block-end: 0;
}

.platformers-hero__disclosure {
  max-width: 35rem;
  padding-inline-start: var(--space-3);
  border-inline-start: 4px solid var(--colour-orange-highlight);
  font-weight: 700;
}

.platformers-hero__provenance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-block: var(--space-5);
}

.platformers-provenance {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--colour-line-light);
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

.platformers-provenance strong {
  font-size: var(--text-xs);
  line-height: 1.4;
  text-transform: uppercase;
}

.platformers-provenance--verified {
  border-inline-start: 4px solid var(--colour-retro-green);
}

.platformers-provenance--verified strong {
  color: #226d2b;
}

.platformers-provenance--editorial {
  border-inline-start: 4px solid var(--colour-pixel-yellow);
}

.platformers-hero__action {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.platformers-hero__action .meta {
  margin: 0;
}

.platformers-hero__media {
  position: relative;
  grid-column: 3 / span 1;
  min-width: 0;
  overflow: hidden;
  margin: 0;
  border-color: var(--colour-midnight-900);
  background: var(--colour-midnight-900);
  color: var(--colour-warm-white);
}

.platformers-hero__media::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgb(246 240 223 / 6%) 0 1px, transparent 1px 7px);
  content: "";
}

.platformers-hero__media img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.platformers-hero__media figcaption,
.platformers-route__media figcaption,
.platformers-clarity__media figcaption {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: var(--space-3);
  color: var(--colour-warm-white);
}

.platformers-context__reading {
  width: 100%;
  max-width: 46.25rem;
  margin-inline: auto;
}

.platformers-context__verified {
  width: calc(100% + 5rem);
  max-width: 51.25rem;
  margin-block: var(--space-5);
  margin-inline: -2.5rem;
  padding: var(--space-5);
  border: 2px solid var(--colour-ink);
  border-inline-start: 6px solid var(--colour-retro-green);
  background: var(--colour-warm-white);
}

.platformers-context__verified .badge {
  margin-block-end: var(--space-3);
  color: #226d2b;
}

.platformers-context__copy h3 {
  margin-block-start: var(--space-6);
}

.platformers-context__note {
  padding-inline-start: var(--space-3);
  border-inline-start: 4px solid var(--colour-orange-highlight);
}

.platformers-definition-list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
}

.platformers-definition-list p {
  position: relative;
  margin: 0;
  padding-inline-start: var(--space-4);
}

.platformers-definition-list p::before {
  position: absolute;
  inset-block-start: 0.65em;
  inset-inline-start: 0;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--colour-orange-highlight);
  content: "";
}

.platformers-browse__intro {
  width: 100%;
  max-width: 38.75rem;
}

.platformers-browse__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-6);
}

.platformers-step {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 2px solid var(--colour-line-dark);
  background: var(--colour-midnight-700);
}

.platformers-step__number {
  display: flex;
  width: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  color: var(--colour-charcoal-950);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  line-height: 1;
}

.platformers-step--yellow .platformers-step__number { background: var(--colour-pixel-yellow); }
.platformers-step--orange .platformers-step__number { background: var(--colour-orange-highlight); }
.platformers-step--cyan .platformers-step__number { background: var(--colour-arcade-cyan); }

.platformers-step h3 {
  font-size: var(--text-h4);
}

.platformers-route__intro {
  width: 100%;
  max-width: 40rem;
}

.platformers-route__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
  gap: var(--space-6);
  margin-block-start: var(--space-6);
}

.platformers-route__media {
  min-width: 0;
  margin: 0;
  border-color: var(--colour-midnight-900);
  background: var(--colour-midnight-900);
  color: var(--colour-warm-white);
}

.platformers-route__media img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.platformers-route__annotations {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-4);
}

.platformers-annotation {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--colour-line-light);
  border-inline-start: 4px solid var(--colour-orange-highlight);
}

.platformers-annotation--two { border-inline-start-color: var(--colour-arcade-cyan); }
.platformers-annotation--three { border-inline-start-color: var(--colour-orange-highlight); }

.platformers-annotation__number {
  display: flex;
  width: 2.75rem;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  background: var(--colour-midnight-900);
  color: var(--colour-warm-white);
  font-family: var(--font-display);
  font-size: var(--text-xs);
}

.platformers-annotation h3 {
  font-size: var(--text-h4);
}

.platformers-practice__intro {
  width: 100%;
  max-width: 45rem;
  margin-inline: auto;
}

.platformers-practice__progression {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block: var(--space-6);
}

.platformers-practice__progression::before {
  position: absolute;
  z-index: 0;
  inset-block-start: 1.5rem;
  inset-inline: 12%;
  height: 2px;
  background: var(--colour-line-light);
  content: "";
}

.platformers-practice-item {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: var(--space-5);
  border: 2px solid var(--colour-ink);
  background: var(--colour-warm-white);
}

.platformers-practice-item__label {
  margin-block-end: var(--space-4);
  background: var(--colour-warm-white);
}

.platformers-practice-item:nth-child(1) .platformers-practice-item__label { color: #226d2b; }
.platformers-practice-item:nth-child(2) .platformers-practice-item__label { color: #7d6000; }
.platformers-practice-item:nth-child(3) .platformers-practice-item__label { color: #9f3510; }

.platformers-practice-item h3 {
  font-size: var(--text-h4);
}

.platformers-practice__note {
  width: 100%;
  max-width: 40.625rem;
  margin-inline: auto;
  padding: var(--space-4);
  border-inline-start: 4px solid var(--colour-pixel-yellow);
  background: var(--colour-warm-white);
}

.platformers-clarity__top {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 1fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--space-5);
}

.platformers-clarity__intro {
  grid-column: 1 / span 1;
  min-width: 0;
}

.platformers-clarity__intro .lead {
  max-width: 32.5rem;
}

.platformers-clarity__media {
  grid-column: 3 / span 1;
  min-width: 0;
  margin: 0;
  border-color: var(--colour-midnight-900);
  background: var(--colour-midnight-900);
  color: var(--colour-warm-white);
}

.platformers-clarity__media img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.platformers-clarity__observations {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-6);
}

.platformers-observation {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--colour-line-light);
  border-inline-start: 4px solid var(--colour-arcade-cyan);
}

.platformers-observation--cyan { grid-column: 1 / span 4; }
.platformers-observation--orange { grid-column: 5 / span 4; border-inline-start-color: var(--colour-orange-highlight); }
.platformers-observation--yellow { grid-column: 9 / span 4; border-inline-start-color: var(--colour-pixel-yellow); }

.platformers-observation h3 {
  font-size: var(--text-h4);
}

.platformers-controls > h2 {
  width: 100%;
  max-width: 43rem;
}

.platformers-controls__caution {
  display: flex;
  width: 100%;
  max-width: 47.5rem;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  margin-block: var(--space-5) var(--space-6);
  padding: var(--space-5);
  border: 2px solid var(--colour-pixel-yellow);
  background: var(--colour-midnight-700);
}

.platformers-controls__caution .badge {
  align-self: flex-start;
  color: var(--colour-pixel-yellow);
}

.platformers-controls__caution h3 {
  margin: 0;
}

.platformers-controls__caution p {
  margin: 0;
}

.platformers-controls__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.platformers-control-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 2px solid var(--colour-line-light);
  background: var(--colour-warm-white);
  color: var(--colour-ink);
}

.platformers-control-card h3,
.platformers-control-card p {
  margin: 0;
}

.platformers-control-card h3 {
  font-size: var(--text-h4);
}

.platformers-control-card a,
.platformers-separation-panel a {
  min-height: var(--tap-size);
  color: var(--colour-midnight-900);
  font-weight: 700;
}

.platformers-control-card__symbol {
  position: relative;
  display: block;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  background: var(--colour-midnight-900);
}

.platformers-control-card__symbol--eye::before {
  position: absolute;
  inset: 0.875rem 0.5rem;
  border: 2px solid var(--colour-arcade-cyan);
  content: "";
}

.platformers-control-card__symbol--eye::after {
  position: absolute;
  inset: 1.125rem;
  background: var(--colour-pixel-yellow);
  content: "";
}

.platformers-control-card__symbol--route::before {
  position: absolute;
  inset: 0.5rem;
  border-inline-start: 3px solid var(--colour-orange-highlight);
  border-block-end: 3px solid var(--colour-orange-highlight);
  content: "";
}

.platformers-control-card__symbol--route::after {
  position: absolute;
  inset-inline-end: 0.45rem;
  inset-block-start: 0.35rem;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--colour-orange-highlight);
  content: "";
}

.platformers-control-card__symbol--source::before,
.platformers-control-card__symbol--source::after {
  position: absolute;
  content: "";
}

.platformers-control-card__symbol--source::before {
  inset: 0.625rem;
  border: 2px solid var(--colour-arcade-cyan);
}

.platformers-control-card__symbol--source::after {
  inset-inline-start: 1rem;
  inset-block-start: 1.25rem;
  width: 0.875rem;
  height: 2px;
  background: var(--colour-pixel-yellow);
}

.platformers-separation > h2 {
  width: 100%;
  max-width: 48rem;
}

.platformers-separation__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-5);
}

.platformers-separation-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 2px solid var(--colour-ink);
}

.platformers-separation-panel--source {
  border-inline-start: 6px solid var(--colour-retro-green);
  background: var(--colour-warm-white);
}

.platformers-separation-panel--editorial {
  border-inline-start: 6px solid var(--colour-pixel-yellow);
  background: #f1e7cf;
}

.platformers-separation-panel h3,
.platformers-separation-panel p,
.platformers-separation-panel ul {
  margin: 0;
}

.platformers-separation-panel ul {
  padding-inline-start: 1.25rem;
}

.platformers-separation-panel a {
  margin-block-start: auto;
}

.platformers-separation__note {
  width: 100%;
  max-width: 47.5rem;
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--colour-line-light);
}

.platformers-checklist__intro {
  width: 100%;
  max-width: 43.75rem;
  margin-inline: auto;
}

.platformers-checklist__list {
  display: flex;
  width: 100%;
  max-width: 53.75rem;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-6) auto 0;
  padding: 0;
  list-style: none;
}

.platformers-checklist-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) max-content;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--colour-line-light);
  background: var(--colour-paper-muted);
}

.platformers-checklist-row:nth-child(even) {
  background: var(--colour-warm-white);
}

.platformers-checklist-row--verified {
  border-inline-start: 5px solid var(--colour-retro-green);
}

.platformers-checklist-row__number {
  display: flex;
  width: 4.5rem;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  color: var(--colour-midnight-900);
  font-family: var(--font-display);
  font-size: var(--text-sm);
}

.platformers-checklist-row__copy {
  min-width: 0;
}

.platformers-checklist-row__copy h3 {
  margin-block-end: var(--space-2);
  font-size: var(--text-h4);
}

.platformers-checklist-row__copy p {
  margin: 0;
}

.platformers-checklist-row > .badge {
  justify-self: end;
}

.platformers-final {
  padding-block: var(--space-8);
}

.platformers-final__panel {
  display: flex;
  width: 100%;
  max-width: 46rem;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-inline: auto;
  padding: var(--space-7);
  border-color: var(--colour-arcade-cyan);
  text-align: center;
}

.platformers-final__panel h2,
.platformers-final__panel p {
  margin: 0;
}

.platformers-final__panel p {
  }

.platformers-final__panel::after {
  width: 1rem;
  height: 1rem;
  background: var(--colour-orange-highlight);
  content: "";
}

@media (max-width: 56.25rem) {
  .platformers-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .platformers-hero__copy,
  .platformers-hero__media {
    grid-column: 1;
    width: 100%;
    max-width: none;
  }

  .platformers-hero__media {
    justify-self: center;
  }

  .platformers-route__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .platformers-route__media,
  .platformers-route__annotations {
    width: 100%;
  }

  .platformers-clarity__top {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .platformers-clarity__intro,
  .platformers-clarity__media {
    grid-column: 1;
    width: 100%;
  }

  .platformers-clarity__observations {
    grid-template-columns: minmax(0, 1fr);
  }

  .platformers-observation--cyan,
  .platformers-observation--orange,
  .platformers-observation--yellow {
    grid-column: 1;
  }
}

@media (max-width: 55rem) {
  .platformers-browse__steps {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .platformers-step {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    align-items: start;
  }

  .platformers-step > div {
    min-width: 0;
  }
}

@media (max-width: 52.5rem) {
  .platformers-practice__progression {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding-inline-start: 3.75rem;
  }

  .platformers-practice__progression::before {
    inset-block: 1.5rem 1.5rem;
    inset-inline-start: 1.375rem;
    width: 2px;
    height: auto;
  }

  .platformers-practice-item {
    position: relative;
  }

  .platformers-practice-item::before {
    position: absolute;
    inset-inline-start: -3.1rem;
    inset-block-start: 1.1rem;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--colour-ink);
    background: var(--colour-pixel-yellow);
    content: "";
  }
}

@media (max-width: 52.5rem) {
  .platformers-controls__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
}

@media (max-width: 47.5rem) {
  .platformers-context__verified {
    width: 100%;
    margin-inline: 0;
  }

  .platformers-separation__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }

  .platformers-checklist-row {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    align-items: start;
  }

  .platformers-checklist-row__number {
    width: 2.75rem;
    min-height: 2.75rem;
    font-size: var(--text-xs);
  }

  .platformers-checklist-row > .badge {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 32.5rem) {
  .platformers-hero {
    padding-block: var(--space-7);
  }

  .platformers-hero__provenance {
    grid-template-columns: minmax(0, 1fr);
  }

  .platformers-hero__media::after {
    display: none;
  }

  .platformers-step {
    grid-template-columns: minmax(0, 1fr);
  }

  .platformers-annotation {
    grid-template-columns: minmax(0, 1fr);
  }

  .platformers-practice__progression {
    padding-inline-start: 0;
  }

  .platformers-practice__progression::before,
  .platformers-practice-item::before {
    display: none;
  }

  .platformers-checklist-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .platformers-checklist-row > .badge {
    grid-column: 1;
  }

  .platformers-final__panel {
    padding: var(--space-5);
  }
}

@media (max-width: 26.25rem) {
  .platformers-final__panel .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .platformers-hero__media::after {
    display: none;
  }
}


.puzzles-page {
  background: var(--colour-charcoal-950);
}

.puzzles-page code {
  overflow-wrap: anywhere;
}

.puzzles-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-9);
}

.puzzles-hero::after,
.puzzles-reading::after,
.puzzles-final::after {
  position: absolute;
  pointer-events: none;
  content: "";
  opacity: 0.06;
  background-image: repeating-linear-gradient(to bottom, var(--colour-arcade-cyan) 0 1px, transparent 1px 6px);
}

.puzzles-hero::after {
  inset: 0 0 0 72%;
}

.puzzles-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(27.5rem, 5fr) minmax(0, 1fr) minmax(22.5rem, 6fr);
  gap: var(--space-5);
  align-items: center;
}

.puzzles-hero__copy,
.puzzles-hero__media,
.puzzles-reading__copy,
.puzzles-reading__media,
.puzzles-final__content,
.puzzles-final__edge {
  min-width: 0;
}

.puzzles-hero__copy {
  grid-column: 1;
  width: 100%;
}

.puzzles-hero__copy .lead {
  max-width: 35rem;
}

.puzzles-verified-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  width: 100%;
  margin-block: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--colour-retro-green);
  border-inline-start-width: 4px;
  background: rgb(100 196 102 / 10%);
}

.puzzles-verified-strip > * {
  min-width: 0;
}

.puzzles-verified-strip h2 {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-heading);
}

.puzzles-verified-strip p {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

.puzzles-hero__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  width: 100%;
}

.puzzles-hero__action > * {
  min-width: 0;
  margin: 0;
}

.puzzles-hero__media {
  grid-column: 3;
  width: 100%;
  max-width: 100%;
  padding: var(--space-2);
  background: var(--colour-midnight-700);
}

.puzzles-hero__media img,
.puzzles-reading__media img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.puzzles-hero__media img {
  object-position: center right;
}

.puzzles-position__intro,
.puzzles-browse__intro,
.puzzles-observe__intro,
.puzzles-habits__intro,
.puzzles-source__intro,
.puzzles-checklist-section__content {
  min-width: 0;
}

.puzzles-position__intro {
  width: 58.333%;
  max-width: 43.75rem;
}

.puzzles-position__intro > p {
  }

.puzzles-position__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  width: 100%;
  margin-top: var(--space-6);
}

.puzzles-position__cards > * {
  min-width: 0;
  width: 100%;
}

.puzzles-info-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-5);
  border: var(--border-pixel-light);
  background: var(--colour-warm-white);
  color: var(--colour-ink);
}

.puzzles-info-card > * {
  min-width: 0;
  margin: 0;
}

.puzzles-info-card h3 {
  font-size: var(--text-h4);
}

.puzzles-info-card p {
  }

.puzzles-info-card--verified {
  border-block-start: 5px solid var(--colour-retro-green);
}

.puzzles-info-card--guidance {
  border-block-start: 5px solid var(--colour-pixel-yellow);
}

.puzzles-info-card--mood {
  border-block-start: 5px solid var(--colour-orange-highlight);
  background: var(--colour-paper-muted);
}

.puzzles-status {
  display: inline-flex;
  align-self: flex-start;
  min-height: 1.5rem;
  align-items: center;
  width: auto;
  max-width: 100%;
  padding: 0.125rem 0.5rem;
  border: 1px solid currentColor;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.25;
}

.puzzles-info-card--verified .puzzles-status,
.puzzles-status--verified {
  color: #245f29;
}

.puzzles-info-card--guidance .puzzles-status,
.puzzles-status--editorial,
.puzzles-status--not-verified {
  color: #725300;
}

.puzzles-info-card--mood .puzzles-status {
  color: #904018;
}

.puzzles-browse__intro {
  width: 66.667%;
  max-width: 45rem;
}

.puzzles-browse__intro > p {
  }

.puzzles-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  width: 66.667%;
  min-width: 0;
  margin-top: var(--space-6);
}

.puzzles-step {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  width: 100%;
  min-width: 0;
}

.puzzles-step > * {
  min-width: 0;
}

.puzzles-step__number,
.puzzles-control-card__number,
.puzzles-checklist__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid currentColor;
  font-family: var(--font-display);
  font-size: var(--text-h4);
  line-height: 1;
}

.puzzles-step__number {
  width: 3.5rem;
  min-height: 3.5rem;
  color: var(--colour-midnight-900);
}

.puzzles-step:nth-child(2) .puzzles-step__number {
  color: #007d78;
}

.puzzles-step:nth-child(3) .puzzles-step__number {
  color: #9b4212;
}

.puzzles-step__copy {
  width: 100%;
}

.puzzles-step__copy h3,
.puzzles-step__copy p {
  }

.puzzles-observe__intro {
  width: 66.667%;
  max-width: 40rem;
}

.puzzles-observe__intro > p {
  }

.puzzles-observe__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  width: 100%;
  margin-top: var(--space-6);
}

.puzzles-observe__grid > * {
  min-width: 0;
  width: 100%;
}

.puzzles-observation {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-5);
  border: var(--border-pixel-light);
  background: var(--colour-warm-white);
}

.puzzles-observation > * {
  min-width: 0;
  margin: 0;
}

.puzzles-observation h3 {
  font-size: var(--text-h4);
}

.puzzles-observation p {
  }

.puzzles-observation__label {
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: var(--leading-compact);
  text-transform: uppercase;
}

.puzzles-observation--yellow {
  border-block-start: 5px solid var(--colour-pixel-yellow);
}

.puzzles-observation--cyan {
  border-block-start: 5px solid var(--colour-arcade-cyan);
}

.puzzles-observation--green {
  border-block-start: 5px solid var(--colour-retro-green);
}

.puzzles-observation--orange {
  border-block-start: 5px solid var(--colour-orange-highlight);
}

.puzzles-habits__intro {
  width: 66.667%;
  max-width: 42.5rem;
}

.puzzles-habits__intro > p {
  }

.puzzles-habits__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  width: 100%;
  margin-top: var(--space-6);
}

.puzzles-habits__grid > * {
  min-width: 0;
  width: 100%;
}

.puzzles-habit {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-5);
  border: var(--border-light);
  border-inline-start: 4px solid var(--colour-pixel-yellow);
  background: var(--colour-warm-white);
}

.puzzles-habit:nth-child(2) {
  border-inline-start-color: var(--colour-arcade-cyan);
}

.puzzles-habit:nth-child(3) {
  border-inline-start-color: var(--colour-retro-green);
}

.puzzles-habit > * {
  min-width: 0;
  margin: 0;
}

.puzzles-habit h3 {
  font-size: var(--text-h4);
}

.puzzles-habit p {
  }

.puzzles-habit__label {
  font-size: var(--text-xs);
  font-family: var(--font-display);
  line-height: 1.4;
}

.puzzles-pace-callout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  width: 83.333%;
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: var(--border-light);
  border-inline-start: 4px solid var(--colour-orange-highlight);
  background: var(--colour-warm-white);
}

.puzzles-pace-callout > * {
  min-width: 0;
  width: 100%;
}

.puzzles-pace-callout h3 {
  margin-top: var(--space-3);
  font-size: var(--text-h4);
}

.puzzles-pace-callout p {
  }

.puzzles-reading {
  position: relative;
  overflow: hidden;
}

.puzzles-reading::after {
  inset: 0 0 0 78%;
}

.puzzles-reading__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(22.5rem, 6fr);
  gap: var(--space-5);
  align-items: center;
}

.puzzles-reading__copy {
  grid-column: 1;
  width: 100%;
}

.puzzles-reading__copy .lead {
  max-width: 37.5rem;
}

.puzzles-reading__advice {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  width: 100%;
  margin-top: var(--space-5);
}

.puzzles-reading__advice > * {
  min-width: 0;
  width: 100%;
}

.puzzles-reading__advice article {
  padding-inline-start: var(--space-4);
  border-inline-start: 4px solid var(--colour-pixel-yellow);
}

.puzzles-reading__advice article:nth-child(2) {
  border-inline-start-color: var(--colour-arcade-cyan);
}

.puzzles-reading__advice h3 {
  font-size: var(--text-h4);
}

.puzzles-reading__advice p {
  }

.puzzles-reading__media {
  grid-column: 3;
  width: 100%;
  max-width: 100%;
  padding: var(--space-2);
  background: var(--colour-midnight-700);
}

.puzzles-reading__media img {
  object-position: center center;
}

.puzzles-controls__heading {
  width: 66.667%;
  max-width: 42.5rem;
}

.puzzles-uncertainty {
  display: flex;
  width: 66.667%;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: var(--border-pixel-light);
  border-inline-start: 5px solid var(--colour-pixel-yellow);
  background: var(--colour-warm-white);
}

.puzzles-uncertainty > * {
  min-width: 0;
  margin: 0;
}

.puzzles-uncertainty h3 {
  font-size: var(--text-h4);
}

.puzzles-uncertainty p {
  }

.puzzles-controls__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  width: 100%;
  margin-top: var(--space-6);
}

.puzzles-controls__grid > * {
  min-width: 0;
  width: 100%;
}

.puzzles-control-card {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: var(--space-3);
  align-content: start;
  padding: var(--space-5);
  border: var(--border-pixel-light);
  background: var(--colour-paper-muted);
}

.puzzles-control-card > * {
  min-width: 0;
}

.puzzles-control-card__number {
  grid-row: span 2;
  width: 2.75rem;
  min-height: 2.75rem;
  color: var(--colour-midnight-900);
  font-size: var(--text-base);
}

.puzzles-control-card h3,
.puzzles-control-card p {
  grid-column: 2;
}

.puzzles-control-card h3 {
  margin-bottom: var(--space-3);
  font-size: var(--text-h4);
}

.puzzles-control-card p {
  margin: 0;
}

.puzzles-source__intro {
  width: 66.667%;
  max-width: 45rem;
}

.puzzles-source__intro > p {
  }

.puzzles-source__panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  width: 83.333%;
  margin-top: var(--space-6);
}

.puzzles-source__panels > * {
  min-width: 0;
  width: 100%;
}

.puzzles-source-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-5);
  border: var(--border-pixel-light);
  background: var(--colour-warm-white);
}

.puzzles-source-panel > * {
  min-width: 0;
  margin: 0;
}

.puzzles-source-panel h3 {
  font-size: var(--text-h4);
}

.puzzles-source-panel p {
  }

.puzzles-source-panel--verified {
  border-block-start: 5px solid var(--colour-retro-green);
}

.puzzles-source-panel--editorial {
  border-block-start: 5px solid var(--colour-pixel-yellow);
}

.puzzles-source__action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  width: 83.333%;
  margin-top: var(--space-5);
}

.puzzles-source__action > * {
  min-width: 0;
  margin: 0;
}

.puzzles-checklist-section__grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 2fr);
  gap: var(--space-5);
  align-items: stretch;
}

.puzzles-checklist-section__content {
  grid-column: 1;
  width: 100%;
}

.puzzles-checklist-section__intro {
  max-width: 38.75rem;
}

.puzzles-checklist {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  width: 100%;
  margin-top: var(--space-5);
}

.puzzles-checklist > * {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  width: 100%;
  min-width: 0;
  padding: var(--space-4);
  border: var(--border-light);
  background: var(--colour-warm-white);
}

.puzzles-checklist > * > * {
  min-width: 0;
}

.puzzles-checklist__marker {
  width: 4rem;
  min-height: 4rem;
  color: var(--colour-midnight-900);
}

.puzzles-checklist h3 {
  margin-bottom: var(--space-2);
  font-size: var(--text-h4);
}

.puzzles-checklist p {
  margin: 0;
}

.puzzles-checklist-section__rail {
  display: grid;
  grid-column: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  min-width: 0;
  width: 100%;
  border: 2px solid var(--colour-midnight-900);
  padding: var(--space-3);
  background: var(--colour-midnight-900);
}

.puzzles-checklist-section__rail > span {
  min-width: 0;
  width: 100%;
  min-height: 4rem;
  background: var(--colour-arcade-cyan);
}

.puzzles-checklist-section__rail > span:nth-child(2) {
  background: var(--colour-pixel-yellow);
}

.puzzles-checklist-section__rail > span:nth-child(3) {
  background: var(--colour-orange-highlight);
}

.puzzles-checklist-section__rail > span:nth-child(4) {
  background: var(--colour-magenta-signal);
}

.puzzles-final {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-9);
}

.puzzles-final::after {
  inset: 0 0 0 65%;
}

.puzzles-final__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-5);
  align-items: center;
}

.puzzles-final__content {
  display: flex;
  grid-column: 1;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  width: 100%;
}

.puzzles-final__content > * {
  min-width: 0;
  margin: 0;
}

.puzzles-final__content > p {
  }

.puzzles-final__disclosure {
  width: 100%;
  max-width: 33.75rem;
  padding: var(--space-4);
  border: 1px solid var(--colour-line-light);
  background: var(--colour-paper-muted);
  color: var(--colour-ink);
}

.puzzles-final__disclosure p {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

.puzzles-final__edge {
  grid-column: 2;
  width: 100%;
  min-height: 17rem;
  border-inline-end: 10px solid var(--colour-orange-highlight);
  border-block-end: 10px solid var(--colour-midnight-700);
}

@media (max-width: 61.25rem) {
  .puzzles-observe__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 56.25rem) {
  .puzzles-hero__grid,
  .puzzles-reading__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .puzzles-hero__copy,
  .puzzles-hero__media,
  .puzzles-reading__copy,
  .puzzles-reading__media {
    grid-column: 1;
  }

  .puzzles-hero__copy .lead,
  .puzzles-reading__copy .lead {
    max-width: 43.75rem;
  }

  .puzzles-hero__media,
  .puzzles-reading__media {
    max-width: 50rem;
  }

  .puzzles-habits__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .puzzles-pace-callout {
    width: 100%;
  }

  .puzzles-checklist-section__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .puzzles-checklist-section__content {
    grid-column: 1;
  }

  .puzzles-checklist-section__rail {
    display: none;
  }
}

@media (max-width: 52.5rem) {
  .puzzles-position__intro,
  .puzzles-browse__intro,
  .puzzles-observe__intro,
  .puzzles-habits__intro,
  .puzzles-controls__heading,
  .puzzles-source__intro {
    width: 100%;
  }

  .puzzles-position__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .puzzles-steps {
    width: 100%;
  }

  .puzzles-uncertainty {
    width: 100%;
  }

  .puzzles-controls__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 50rem) {
  .puzzles-final__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .puzzles-final__content {
    grid-column: 1;
  }

  .puzzles-final__edge {
    display: none;
  }
}

@media (max-width: 47.5rem) {
  .puzzles-hero,
  .puzzles-final {
    padding-block: var(--space-7);
  }

  .puzzles-hero__grid,
  .puzzles-reading__grid {
    gap: var(--space-5);
  }

  .puzzles-hero h1 {
    font-size: clamp(2rem, 9vw, 2.5rem);
    line-height: 1.15;
  }

  .puzzles-hero__copy .lead {
    font-size: var(--text-lead);
  }

  .puzzles-verified-strip {
    grid-template-columns: minmax(0, 1fr);
  }

  .puzzles-hero__action,
  .puzzles-source__action {
    align-items: stretch;
  }

  .puzzles-hero__action .button,
  .puzzles-source__action .button,
  .puzzles-final__content .button {
    width: 100%;
  }

  .puzzles-position__cards,
  .puzzles-observe__grid,
  .puzzles-source__panels,
  .puzzles-pace-callout {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .puzzles-info-card,
  .puzzles-observation,
  .puzzles-habit,
  .puzzles-source-panel,
  .puzzles-uncertainty,
  .puzzles-control-card {
    padding: var(--space-4);
  }

  .puzzles-step {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }

  .puzzles-step__number {
    width: 2.75rem;
    min-height: 2.75rem;
    font-size: var(--text-h4);
  }

  .puzzles-step__copy h3,
  .puzzles-step__copy p {
  }

  .puzzles-reading__media,
  .puzzles-hero__media {
    max-width: 100%;
  }

  .puzzles-reading h2 {
    font-size: clamp(1.875rem, 8vw, 2.25rem);
  }

  .puzzles-source__action {
    width: 100%;
  }

  .puzzles-checklist > * {
    grid-template-columns: 1.75rem minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
  }

  .puzzles-checklist__marker {
    width: 1.75rem;
    min-height: 1.75rem;
    font-size: var(--text-xs);
  }

  .puzzles-final__content {
    gap: var(--space-4);
  }

  .puzzles-final h2 {
    font-size: clamp(1.75rem, 8vw, 2rem);
  }
}

@media (max-width: 26.25rem) {
  .puzzles-hero__action .button,
  .puzzles-source__action .button,
  .puzzles-final__content .button {
    flex: 0 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .puzzles-hero::after,
  .puzzles-reading::after,
  .puzzles-final::after {
    background-image: none;
  }
}


.home-page {
  background: var(--colour-charcoal-950);
}

.home-page .section {
  position: relative;
}

.home-page h2 {
  margin-block-end: var(--space-4);
}

.home-hero {
  overflow: hidden;
  border-block-end: 2px solid var(--colour-line-dark);
}

.home-hero__frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20.625rem, 1fr);
  gap: var(--space-6);
  align-items: stretch;
}

.home-hero__copy,
.home-hero__cabinet,
.home-library__intro,
.home-category-card,
.home-flow__intro,
.home-flow__note,
.home-choice__intro,
.home-choice-card,
.home-skill,
.home-controls__copy,
.home-controls__accent,
.home-controls__grid > article,
.home-visual__copy,
.home-visual__media,
.home-practical-card,
.home-suitability__panel,
.home-verdict__copy,
.home-verdict__labels,
.home-verdict__lists > div,
.home-final__copy,
.home-final__accent {
  min-width: 0;
}

.home-hero__copy {
  width: 100%;
  max-width: 42.5rem;
  align-self: center;
  padding-block: var(--space-4);
}

.home-hero__lead {
  margin-block-end: var(--space-4);
  font-size: var(--text-lead);
  line-height: 1.6;
}

.home-hero__disclosure {
  max-width: 30rem;
  margin-block-end: var(--space-5);
  color: var(--colour-paper-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

.home-hero__actions {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.home-hero__source,
.home-final__source {
  max-width: 31.25rem;
  margin: 0;
  color: var(--colour-paper-muted);
  font-size: var(--text-xs);
  line-height: 1.4;
}

.home-hero__cabinet {
  position: relative;
  min-height: 25rem;
  overflow: hidden;
  border: 2px solid var(--colour-line-dark);
  background: linear-gradient(135deg, rgb(38 58 89 / 76%), var(--colour-midnight-900));
}

.home-hero__cabinet::before {
  position: absolute;
  inset: 12% 14% 0 auto;
  width: 57%;
  border: 12px solid rgb(17 19 26 / 85%);
  border-block-end: 0;
  background: rgb(17 19 26 / 66%);
  content: "";
}

.home-hero__cabinet::after {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 7px, rgb(66 216 209 / 6%) 8px);
  content: "";
  pointer-events: none;
}

.home-hero__screen {
  position: absolute;
  z-index: 1;
  inset: 20% 23% auto auto;
  width: 42%;
  aspect-ratio: 1.25;
  border: 6px solid var(--colour-charcoal-950);
  background: linear-gradient(135deg, var(--colour-arcade-cyan) 0 23%, var(--colour-pixel-yellow) 23% 42%, var(--colour-orange-highlight) 42% 62%, var(--colour-midnight-700) 62%);
}

.home-hero__stick,
.home-hero__button {
  position: absolute;
  z-index: 1;
  background: var(--colour-pixel-yellow);
}

.home-hero__stick { inset: auto 44% 20% auto; width: 10px; height: 60px; }
.home-hero__stick::before { position: absolute; top: -18px; left: -11px; width: 32px; height: 32px; background: var(--colour-orange-highlight); content: ""; }
.home-hero__button { width: 24px; height: 24px; border: 3px solid var(--colour-charcoal-950); border-radius: 50%; }
.home-hero__button--one { inset: auto 22% 25% auto; }
.home-hero__button--two { inset: auto 15% 18% auto; background: var(--colour-arcade-cyan); }

.home-status {
  display: inline-flex;
  width: fit-content;
  min-height: 1.5rem;
  align-items: center;
  margin: 0;
  padding: 0.125rem 0.5rem;
  border: 1px solid currentColor;
  color: var(--colour-pixel-yellow);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.25;
}

.home-status--verified { color: var(--colour-retro-green); }
.home-status--tip { color: var(--colour-retro-green); }

.home-facts__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  padding: var(--space-6);
  background: var(--colour-midnight-900);
}

.home-facts__intro { width: 100%; max-width: 38.75rem; min-width: 0; }
.home-facts__intro .home-status { margin-block-end: var(--space-3); }
.home-facts__intro p:last-child { margin-block-end: 0; }

.home-facts__groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  width: 100%;
}

.home-facts__group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  min-width: 0;
}

.home-facts__group > div {
  display: grid;
  grid-template-columns: minmax(7rem, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-3);
  min-width: 0;
  padding: var(--space-3) 0;
  border-block-start: 1px solid var(--colour-line-dark);
}

.home-facts dt { color: var(--colour-pixel-yellow); font-family: var(--font-display); font-size: var(--text-xs); line-height: 1.5; }
.home-facts dd { margin: 0; color: var(--colour-warm-white); line-height: var(--leading-compact); }

.home-library__intro { width: 100%; max-width: 41.25rem; }
.home-inline-source { margin-block-end: var(--space-6); color: var(--colour-retro-green); font-size: var(--text-sm); font-weight: 700; line-height: var(--leading-compact); }

.home-category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  width: 100%;
}

.home-category-card {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 2px solid var(--colour-line-dark);
  border-inline-start-width: 8px;
  background: var(--colour-midnight-900);
  color: var(--colour-warm-white);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.home-category-card--platform { border-inline-start-color: var(--colour-orange-highlight); }
.home-category-card--shooter { border-inline-start-color: var(--colour-arcade-cyan); }
.home-category-card--puzzle { border-inline-start-color: var(--colour-magenta-signal); }
.home-category-card h3,
.home-category-card p,
.home-category-card a { margin: 0; }
.home-category-card h3 { font-size: var(--text-h4); }
.home-category-card p { line-height: var(--leading-copy); }
.home-category-card a { display: inline-flex; min-height: var(--tap-size); align-items: center; gap: var(--space-2); color: var(--colour-arcade-cyan); font-weight: 700; }
.home-category-card:hover { border-color: var(--colour-pixel-yellow); transform: translateY(-2px); }

.home-flow__intro { width: 100%; max-width: 40rem; }
.home-flow__rail {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-2);
  width: 100%;
  margin: var(--space-6) 0 var(--space-5);
  padding: var(--space-4);
  list-style: none;
  border: 2px solid var(--colour-line-dark);
  background: var(--colour-midnight-900);
}

.home-flow__rail li {
  display: flex;
  min-width: 0;
  min-height: 7.5rem;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--colour-line-dark);
  color: var(--colour-warm-white);
  font-family: var(--font-display);
  font-size: 0.64rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.home-flow__rail span { color: var(--colour-pixel-yellow); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; }
.home-flow__note { width: 100%; max-width: 36.25rem; padding: var(--space-4); border-inline-start: 4px solid var(--colour-retro-green); background: var(--colour-warm-white); }
.home-flow__note .home-status { margin-block-end: var(--space-2); }
.home-flow__note p:last-child { margin-block-end: 0; }

.home-choice__intro { width: 100%; max-width: 40.625rem; }
.home-choice__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-4);
  width: 100%;
}
.home-choice-card { width: 100%; padding: var(--space-4); border: var(--border-light); border-block-start: 6px solid var(--colour-line-light); background: var(--colour-warm-white); }
.home-choice-card:nth-child(1), .home-choice-card:nth-child(2), .home-choice-card:nth-child(3) { grid-column: span 4; }
.home-choice-card:nth-child(4), .home-choice-card:nth-child(5) { grid-column: span 6; }
.home-choice-card--genre { border-block-start-color: var(--colour-orange-highlight); }
.home-choice-card--controls { border-block-start-color: var(--colour-pixel-yellow); }
.home-choice-card h3 { font-size: var(--text-h4); }
.home-choice-card p:last-child { margin-block-end: 0; }
.home-beginner-tip { width: 100%; margin-block-start: var(--space-5); padding: var(--space-4); border-inline-start: 4px solid var(--colour-retro-green); background: var(--colour-paper-muted); }
.home-beginner-tip .home-status { margin-block-end: var(--space-2); }
.home-beginner-tip p:last-child { margin-block-end: 0; }

.home-skills__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); width: 100%; }
.home-skill { width: 100%; padding: var(--space-5); border: var(--border-light); border-inline-start-width: 6px; background: var(--colour-warm-white); }
.home-skill--platform { border-inline-start-color: var(--colour-orange-highlight); }
.home-skill--shooter { border-inline-start-color: var(--colour-arcade-cyan); }
.home-skill--puzzle { border-inline-start-color: var(--colour-magenta-signal); }
.home-skill h3 { font-size: var(--text-h4); }
.home-skill p:last-child { margin-block-end: 0; }
.home-skills__synthesis { width: 100%; max-width: 43.75rem; margin-block-start: var(--space-5); padding: var(--space-4); border: var(--border-light); background: var(--colour-paper-muted); }
.home-skills__synthesis .home-status { margin-block-end: var(--space-2); }
.home-skills__synthesis p:last-child { margin-block-end: 0; }

.home-controls__feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); width: 100%; padding: var(--space-6); border: 2px solid var(--colour-line-dark); background: var(--colour-midnight-900); }
.home-controls__copy { width: 100%; max-width: 40.625rem; }
.home-controls__copy p:last-child { margin-block-end: 0; }
.home-controls__accent { position: relative; min-height: 15rem; border: 2px solid var(--colour-line-dark); background: repeating-linear-gradient(0deg, transparent 0, transparent 9px, rgb(66 216 209 / 6%) 10px); }
.home-controls__accent span { position: absolute; inset: 25% auto auto 25%; width: 14px; height: 6rem; background: var(--colour-pixel-yellow); }
.home-controls__accent span::before { position: absolute; top: -18px; left: -12px; width: 38px; height: 38px; background: var(--colour-orange-highlight); content: ""; }
.home-controls__accent i, .home-controls__accent b { position: absolute; display: block; width: 2.5rem; aspect-ratio: 1; border: 4px solid var(--colour-charcoal-950); border-radius: 50%; background: var(--colour-arcade-cyan); }
.home-controls__accent i { inset: 35% 22% auto auto; }
.home-controls__accent b:nth-of-type(1) { inset: auto 34% 24% auto; background: var(--colour-orange-highlight); }
.home-controls__accent b:nth-of-type(2) { inset: auto 16% 17% auto; background: var(--colour-pixel-yellow); }
.home-controls__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); width: 100%; margin-block-start: var(--space-5); }
.home-controls__grid > article { width: 100%; padding: var(--space-4); border: var(--border-light); background: var(--colour-warm-white); color: var(--colour-ink); }
.home-controls__grid span { display: block; margin-block-end: var(--space-3); color: var(--colour-orange-highlight); font-family: var(--font-display); font-size: var(--text-xs); }
.home-controls__grid h3 { font-size: var(--text-h4); }
.home-controls__grid p:last-child { margin-block-end: 0; }

.home-visual__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: start; }
.home-visual__copy { width: 100%; max-width: 38.75rem; }
.home-visual__copy p:last-child { margin-block-end: 0; }
.home-visual__media { width: 100%; margin: 0; padding: var(--space-3); border: 2px solid var(--colour-line-dark); background: var(--colour-midnight-900); color: var(--colour-warm-white); }
.home-visual__media img { width: 100%; max-width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.home-visual__media figcaption { margin-block: var(--space-2) 0; }

.home-practical__intro { width: 100%; max-width: 41.25rem; }
.home-practical__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); width: 100%; }
.home-practical-card { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); border: var(--border-light); border-block-start: 6px solid var(--colour-line-light); background: var(--colour-warm-white); }
.home-practical-card--device { border-block-start-color: var(--colour-orange-highlight); }
.home-practical-card--listing { border-block-start-color: var(--colour-retro-green); background: var(--colour-paper-muted); }
.home-practical-card--windows { border-block-start-color: var(--colour-arcade-cyan); background: var(--colour-midnight-900); color: var(--colour-warm-white); }
.home-practical-card h3, .home-practical-card p, .home-practical-card a { margin: 0; }
.home-practical-card h3 { font-size: var(--text-h4); }
.home-practical-card a { display: inline-flex; min-height: var(--tap-size); align-items: center; gap: var(--space-2); color: var(--colour-arcade-cyan); font-weight: 700; }

.home-suitability__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); width: 100%; }
.home-suitability__panel { width: 100%; padding: var(--space-5); border: var(--border-light); border-inline-start-width: 6px; }
.home-suitability__panel--appeal { border-inline-start-color: var(--colour-retro-green); background: var(--colour-warm-white); }
.home-suitability__panel--less { border-inline-start-color: var(--colour-orange-highlight); background: var(--colour-paper-muted); }
.home-suitability__panel h3 { font-size: var(--text-h4); }
.home-suitability__panel li { margin-block-end: var(--space-2); }
.home-suitability__panel p:last-child { margin-block-end: 0; }
.home-suitability__note { width: 100%; max-width: 40.625rem; margin-block-start: var(--space-5); padding: var(--space-4); border: var(--border-light); }
.home-suitability__note p { margin: 0; }

.home-verdict__panel { padding: var(--space-6); background: var(--colour-warm-white); color: var(--colour-ink); border-block-start: 8px solid var(--colour-pixel-yellow); }
.home-verdict__top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.home-verdict__copy { width: 100%; max-width: 43.75rem; }
.home-verdict__copy p:last-child { margin-block-end: 0; }
.home-verdict__labels { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.home-verdict__lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); width: 100%; margin-block-start: var(--space-6); padding-block-start: var(--space-5); border-block-start: var(--border-light); }
.home-verdict__lists h3 { font-size: var(--text-h4); }
.home-verdict__lists ul { margin-block-end: 0; }
.home-verdict__lists li { margin-block-end: var(--space-2); }
.home-verdict__disclosure { width: 100%; margin-block-start: var(--space-4); padding: var(--space-3) var(--space-4); border: var(--border-light); background: var(--colour-paper-muted); }
.home-verdict__disclosure p { margin: 0; font-size: var(--text-sm); line-height: var(--leading-compact); }

.home-final { overflow: hidden; }
.home-final__panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: stretch; }
.home-final__copy { display: flex; width: 100%; max-width: 38.75rem; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.home-final__copy h2, .home-final__copy p { margin: 0; }
.home-final__accent { position: relative; min-height: 15rem; overflow: hidden; border: 2px solid var(--colour-line-dark); background: var(--colour-midnight-900); }
.home-final__accent::before { position: absolute; inset: 20% -5% -25% auto; width: 60%; border: 14px solid var(--colour-charcoal-950); background: var(--colour-midnight-700); content: ""; }
.home-final__accent::after { position: absolute; inset: auto 15% 18% auto; width: 2.5rem; aspect-ratio: 1; background: var(--colour-orange-highlight); box-shadow: 3.5rem -1.5rem 0 var(--colour-pixel-yellow); content: ""; }

.home-page a:focus-visible { outline: 3px solid var(--colour-pixel-yellow); outline-offset: 2px; }
.home-page .surface-light a:focus-visible, .home-page .surface-paper a:focus-visible { outline-color: var(--colour-charcoal-950); }

@media (max-width: 56.25rem) {
  .home-hero__frame { grid-template-columns: minmax(0, 1fr); }
  .home-hero__cabinet { min-height: 9rem; max-height: 12rem; opacity: 0.72; }
  .home-hero__cabinet::before { inset: 10% 10% 0 auto; width: 35%; }
  .home-hero__screen { inset: 16% 15% auto auto; width: 22%; }
  .home-hero__stick { inset: auto 32% 15% auto; height: 2.5rem; }
  .home-hero__button--one { inset: auto 15% 25% auto; }
  .home-hero__button--two { inset: auto 8% 15% auto; }
  .home-flow__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-flow__rail li { min-height: 5.5rem; }
  .home-controls__feature { grid-template-columns: minmax(0, 1fr); }
  .home-controls__accent { display: none; }
  .home-verdict__top { grid-template-columns: minmax(0, 1fr); }
  .home-verdict__labels { flex-direction: row; flex-wrap: wrap; }
  .home-final__panel { grid-template-columns: minmax(0, 1fr); }
  .home-final__accent { min-height: 7rem; max-height: 9rem; }
}

@media (max-width: 51.25rem) {
  .home-choice__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-choice-card:nth-child(n) { grid-column: span 1; }
  .home-visual__grid { grid-template-columns: minmax(0, 1fr); }
  .home-visual__copy { max-width: 100%; }
}

@media (max-width: 47.5rem) {
  .home-hero__copy { max-width: 100%; }
  .home-hero__cabinet { display: none; }
  .home-facts__panel { padding: var(--space-4); }
  .home-facts__groups { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .home-category-grid, .home-skills__grid, .home-practical__grid, .home-suitability__grid { grid-template-columns: minmax(0, 1fr); }
  .home-controls__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-flow__rail { grid-template-columns: minmax(0, 1fr); }
  .home-flow__rail li { min-height: var(--tap-size); flex-direction: row; align-items: center; justify-content: flex-start; }
  .home-verdict__lists { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .home-final__accent { display: none; }
}

@media (max-width: 35rem) {
  .home-choice__grid, .home-controls__grid { grid-template-columns: minmax(0, 1fr); }
  .home-facts__group > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .home-facts__panel, .home-controls__feature, .home-verdict__panel { padding: var(--space-4); }
}

@media (max-width: 26.25rem) {
  .home-hero__actions .button, .home-final__copy .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .home-category-card:hover { transform: none; }
}


.how-it-works-page {
  background: var(--colour-charcoal-950);
}

.how-it-works-page .hiw-hero {
  padding-block: var(--space-8);
}

.how-it-works-page .hiw-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 6fr);
  align-items: center;
  gap: var(--space-5);
}

.how-it-works-page .hiw-hero-copy {
  grid-column: 1 / span 5;
  min-width: 0;
  max-width: 37.5rem;
}

.how-it-works-page .hiw-hero-media {
  grid-column: 3 / span 1;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--space-2);
  background: var(--colour-midnight-900);
  color: var(--colour-warm-white);
}

.how-it-works-page .hiw-hero-media img,
.how-it-works-page .hiw-browse-media img,
.how-it-works-page .hiw-controls-media img {
  width: 100%;
  max-width: 100%;
  object-fit: cover;
}

.how-it-works-page .hiw-hero-media img,
.how-it-works-page .hiw-browse-media img {
  aspect-ratio: 4 / 3;
}

.how-it-works-page .hiw-provenance {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-block: var(--space-5);
}

.how-it-works-page .hiw-provenance-item {
  min-width: 0;
  padding: var(--space-3);
  border: var(--border-light);
  background: var(--colour-paper-muted);
}

.how-it-works-page .hiw-provenance-verified {
  border-inline-start: 4px solid var(--colour-retro-green);
}

.how-it-works-page .hiw-provenance-item p {
  margin-block: var(--space-2) 0;
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

.how-it-works-page .hiw-confirmed-intro {
  width: 100%;
  max-width: 42.5rem;
  margin-inline: auto;
  text-align: center;
}

.how-it-works-page .hiw-fact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-6);
}

.how-it-works-page .hiw-fact-card {
  min-width: 0;
  padding: var(--space-5);
  border: var(--border-pixel-light);
  background: var(--colour-warm-white);
}

.how-it-works-page .hiw-fact-card .badge,
.how-it-works-page .hiw-route-card .label,
.how-it-works-page .hiw-intent-card .label,
.how-it-works-page .hiw-controls-copy .label,
.how-it-works-page .hiw-switch-block .label,
.how-it-works-page .hiw-store-panel .badge,
.how-it-works-page .hiw-store-panel .label {
  margin-block-end: var(--space-3);
}

.how-it-works-page .hiw-fact-card .badge-verified,
.how-it-works-page .hiw-catalogue-note .badge-verified,
.how-it-works-page .hiw-switch-verified .badge-verified,
.how-it-works-page .hiw-final-panel .badge-verified,
.how-it-works-page .hiw-boundary-note .badge-verified {
  color: #287d32;
}

.how-it-works-page .hiw-genre-keys {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: 0 var(--space-4);
}

.how-it-works-page .hiw-key {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  padding: 0.25rem 0.5rem;
  border-inline-start: 4px solid currentColor;
  background: var(--colour-paper-muted);
  color: var(--colour-ink);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.35;
}

.how-it-works-page .hiw-key-platform { border-color: var(--colour-orange-highlight); }
.how-it-works-page .hiw-key-shooter { border-color: #087a78; }
.how-it-works-page .hiw-key-puzzle { border-color: #9d285d; }

.how-it-works-page .hiw-start-intro,
.how-it-works-page .hiw-browse-heading,
.how-it-works-page .hiw-time-intro,
.how-it-works-page .hiw-controls-heading,
.how-it-works-page .hiw-switch-intro,
.how-it-works-page .hiw-store-heading,
.how-it-works-page .hiw-first-heading {
  min-width: 0;
}

.how-it-works-page .hiw-start-intro {
  max-width: 40.625rem;
}

.how-it-works-page .hiw-route-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-6);
}

.how-it-works-page .hiw-route-card {
  min-width: 0;
  padding: var(--space-5);
  border: var(--border-pixel-light);
  border-inline-start-width: 6px;
  background: var(--colour-paper-muted);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.how-it-works-page .hiw-route-card:hover {
  transform: translateY(-2px);
}

.how-it-works-page .hiw-route-platform { border-inline-start-color: var(--colour-orange-highlight); }
.how-it-works-page .hiw-route-shooter { border-inline-start-color: #087a78; }
.how-it-works-page .hiw-route-puzzle { border-inline-start-color: #9d285d; }

.how-it-works-page .hiw-selection-callout {
  width: 100%;
  max-width: 47.5rem;
  margin: var(--space-6) auto 0;
}

.how-it-works-page .hiw-browse-heading {
  max-width: 42.5rem;
}

.how-it-works-page .hiw-browse-grid {
  display: grid;
  grid-template-columns: minmax(2.5rem, 1fr) minmax(0, 5fr) minmax(0, 1fr) minmax(0, 5fr);
  gap: var(--space-5);
  align-items: start;
  margin-block-start: var(--space-6);
}

.how-it-works-page .hiw-step-number {
  min-width: 0;
  color: var(--colour-orange-highlight);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  line-height: 1.4;
}

.how-it-works-page .hiw-browse-copy {
  min-width: 0;
  max-width: 32.5rem;
}

.how-it-works-page .hiw-browse-media {
  grid-column: 4;
  grid-row: 2 / span 2;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--space-2);
  border-color: var(--colour-midnight-900);
  background: var(--colour-midnight-900);
  color: var(--colour-warm-white);
}

.how-it-works-page .hiw-browse-final {
  grid-column: 2;
}

.how-it-works-page .hiw-catalogue-note {
  width: 100%;
  max-width: 42.5rem;
  margin-block: var(--space-6) 0;
  padding: var(--space-4);
  border: 1px solid var(--colour-retro-green);
  background: var(--colour-warm-white);
}

.how-it-works-page .hiw-catalogue-note p {
  margin-block: var(--space-2) 0;
}

.how-it-works-page .hiw-catalogue-note a,
.how-it-works-page .hiw-store-panel a,
.how-it-works-page .hiw-boundary-note a {
  color: inherit;
  font-weight: 700;
}

.how-it-works-page .hiw-time-intro {
  max-width: 42.5rem;
}

.how-it-works-page .hiw-intent-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-6);
}

.how-it-works-page .hiw-intent-card {
  min-width: 0;
  padding: var(--space-5);
  border: var(--border-pixel-dark);
  background: var(--colour-midnight-700);
  color: var(--colour-warm-white);
}

.how-it-works-page .hiw-intent-card:nth-child(1) .label { border-color: var(--colour-pixel-yellow); color: var(--colour-pixel-yellow); }
.how-it-works-page .hiw-intent-card:nth-child(2) .label { border-color: var(--colour-arcade-cyan); color: var(--colour-arcade-cyan); }
.how-it-works-page .hiw-intent-card:nth-child(3) .label { border-color: var(--colour-orange-highlight); color: var(--colour-warm-white); }

.how-it-works-page .hiw-checkpoint {
  width: 100%;
  max-width: 47.5rem;
  margin-block: var(--space-6) 0;
  padding: var(--space-4);
  background: var(--colour-paper-muted);
  color: var(--colour-ink);
}

.how-it-works-page .hiw-controls-heading {
  max-width: 42.5rem;
}

.how-it-works-page .hiw-controls-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: var(--space-5);
  width: 100%;
  max-width: 65rem;
  margin: var(--space-6) auto 0;
}

.how-it-works-page .hiw-controls-copy {
  grid-column: 1 / span 5;
  min-width: 0;
  max-width: 31rem;
}

.how-it-works-page .hiw-learning-panel {
  grid-column: 6 / span 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 0.85fr);
  align-items: start;
  gap: var(--space-4);
  min-width: 0;
}

.how-it-works-page .hiw-learning-copy,
.how-it-works-page .hiw-controls-media {
  min-width: 0;
}

.how-it-works-page .hiw-controls-media {
  width: 100%;
  margin: 0;
  padding: var(--space-2);
  background: var(--colour-midnight-900);
  color: var(--colour-warm-white);
}

.how-it-works-page .hiw-controls-media img {
  aspect-ratio: 1 / 1;
}

.how-it-works-page .hiw-checklist {
  width: 100%;
  max-width: 52rem;
  margin: var(--space-6) auto 0;
}

.how-it-works-page .hiw-checklist-row {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  min-width: 0;
  padding-block: var(--space-3);
  border-block-start: var(--border-light);
}

.how-it-works-page .hiw-checklist-row > * { min-width: 0; }
.how-it-works-page .hiw-checklist-row span,
.how-it-works-page .hiw-first-number {
  color: var(--colour-orange-highlight);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.how-it-works-page .hiw-checklist-row p { margin: 0; }

.how-it-works-page .hiw-switch-intro {
  width: 100%;
  max-width: 43.75rem;
  margin-inline: auto;
}

.how-it-works-page .hiw-switch-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-6);
}

.how-it-works-page .hiw-switch-block {
  grid-column: 2 / span 7;
  min-width: 0;
  max-width: 43.75rem;
  padding-inline-start: var(--space-4);
  border-inline-start: 4px solid var(--colour-orange-highlight);
}

.how-it-works-page .hiw-switch-block:nth-of-type(2) { border-inline-start-color: var(--colour-pixel-yellow); }
.how-it-works-page .hiw-switch-block:nth-of-type(3) { border-inline-start-color: var(--colour-retro-green); }

.how-it-works-page .hiw-process-strip {
  grid-column: 9 / span 4;
  grid-row: 2;
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-self: center;
  gap: var(--space-2);
  padding: var(--space-4);
  border: var(--border-light);
  background: var(--colour-warm-white);
  font-weight: 700;
}

.how-it-works-page .hiw-process-strip > * { min-width: 0; }

.how-it-works-page .hiw-switch-verified {
  grid-column: 2 / span 7;
  min-width: 0;
  max-width: 43.75rem;
  padding: var(--space-4);
  border: 1px solid var(--colour-retro-green);
  background: var(--colour-warm-white);
}

.how-it-works-page .hiw-switch-verified p { margin-block: var(--space-2) 0; }

.how-it-works-page .hiw-store-heading {
  width: 100%;
  max-width: 43.75rem;
  margin-inline: auto;
  text-align: center;
}

.how-it-works-page .hiw-store-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) minmax(0, 5fr);
  gap: var(--space-5);
  margin-block-start: var(--space-6);
}

.how-it-works-page .hiw-store-panel {
  min-width: 0;
  padding: var(--space-5);
  border: var(--border-pixel-light);
}

.how-it-works-page .hiw-store-panel:first-child { grid-column: 1; }
.how-it-works-page .hiw-store-panel:last-child { grid-column: 3; }

.how-it-works-page .hiw-store-panel ul { margin-block: 0 var(--space-4); }

.how-it-works-page .hiw-first-heading {
  width: 100%;
  max-width: 43.75rem;
  margin-inline: auto;
  text-align: center;
}

.how-it-works-page .hiw-first-route {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--space-5);
  width: 100%;
  max-width: 55rem;
  margin: var(--space-6) auto 0;
}

.how-it-works-page .hiw-first-step {
  grid-column: 1 / span 8;
  display: grid;
  grid-template-columns: minmax(3rem, 1fr) minmax(0, 7fr);
  gap: var(--space-4);
  min-width: 0;
  padding-block-end: var(--space-5);
  border-block-end: var(--border-light);
}

.how-it-works-page .hiw-first-step > * { min-width: 0; }
.how-it-works-page .hiw-first-step .button { margin-block-start: var(--space-2); }

.how-it-works-page .hiw-observe-tip,
.how-it-works-page .hiw-practical-tip {
  margin-block-end: 0;
  padding-inline-start: var(--space-3);
  border-inline-start: 4px solid var(--colour-pixel-yellow);
}

.how-it-works-page .hiw-practical-tip { border-color: var(--colour-retro-green); }

.how-it-works-page .hiw-boundary-note {
  grid-column: 1 / span 8;
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--colour-line-light);
  background: var(--colour-warm-white);
}

.how-it-works-page .hiw-boundary-note p {
  flex: 1 1 100%;
  min-width: 0;
  margin: 0;
}

.how-it-works-page .hiw-final-panel {
  display: flex;
  width: 100%;
  max-width: 50rem;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-inline: auto;
  text-align: center;
}

.how-it-works-page .hiw-final-panel h2,
.how-it-works-page .hiw-final-panel p {
  margin: 0;
}

.how-it-works-page .hiw-final-panel > p:not(.hiw-final-disclosure) {
  width: 100%;
  max-width: 38.75rem;
}

.how-it-works-page .hiw-final-disclosure {
  width: 100%;
  max-width: 32.5rem;
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
  opacity: 0.82;
}

@media (max-width: 56.25rem) {
  .how-it-works-page .hiw-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .how-it-works-page .hiw-hero-copy,
  .how-it-works-page .hiw-hero-media {
    grid-column: 1;
    max-width: none;
  }

  .how-it-works-page .hiw-fact-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .how-it-works-page .hiw-fact-update { grid-column: 1 / span 2; }

  .how-it-works-page .hiw-route-grid,
  .how-it-works-page .hiw-intent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .how-it-works-page .hiw-route-card:nth-child(3),
  .how-it-works-page .hiw-intent-card:nth-child(3) { grid-column: 1 / span 2; }

  .how-it-works-page .hiw-browse-grid {
    grid-template-columns: minmax(2.5rem, 1fr) minmax(0, 11fr);
    gap: var(--space-4);
  }

  .how-it-works-page .hiw-browse-media {
    grid-column: 2;
    grid-row: auto;
  }

  .how-it-works-page .hiw-browse-final { grid-column: 2; }

  .how-it-works-page .hiw-controls-grid {
    grid-template-columns: 1fr;
    max-width: 43.75rem;
  }

  .how-it-works-page .hiw-controls-copy,
  .how-it-works-page .hiw-learning-panel {
    grid-column: 1;
    max-width: none;
  }

  .how-it-works-page .hiw-switch-grid {
    grid-template-columns: 1fr;
  }

  .how-it-works-page .hiw-switch-block,
  .how-it-works-page .hiw-process-strip,
  .how-it-works-page .hiw-switch-verified {
    grid-column: 1;
    grid-row: auto;
    max-width: none;
  }

  .how-it-works-page .hiw-store-grid {
    grid-template-columns: 1fr;
  }

  .how-it-works-page .hiw-store-panel:first-child,
  .how-it-works-page .hiw-store-panel:last-child { grid-column: 1; }
}

@media (max-width: 47.5rem) {
  .how-it-works-page .hiw-hero { padding-block: var(--space-7); }

  .how-it-works-page .hiw-hero-copy h1 { font-size: clamp(1.875rem, 9vw, 2.5rem); }

  .how-it-works-page .hiw-hero-media { padding: var(--space-2); }

  .how-it-works-page .hiw-fact-grid,
  .how-it-works-page .hiw-route-grid,
  .how-it-works-page .hiw-intent-grid {
    grid-template-columns: 1fr;
  }

  .how-it-works-page .hiw-fact-update,
  .how-it-works-page .hiw-route-card:nth-child(3),
  .how-it-works-page .hiw-intent-card:nth-child(3) { grid-column: 1; }

  .how-it-works-page .hiw-browse-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .how-it-works-page .hiw-step-number,
  .how-it-works-page .hiw-browse-copy,
  .how-it-works-page .hiw-browse-media,
  .how-it-works-page .hiw-browse-final { grid-column: 1; }

  .how-it-works-page .hiw-browse-copy { max-width: none; }
  .how-it-works-page .hiw-browse-media { margin-block-end: var(--space-2); }

  .how-it-works-page .hiw-learning-panel {
    grid-template-columns: 1fr;
  }

  .how-it-works-page .hiw-controls-media { max-width: 28rem; }

  .how-it-works-page .hiw-checklist-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .how-it-works-page .hiw-first-route { grid-template-columns: 1fr; }

  .how-it-works-page .hiw-first-step {
    grid-column: 1;
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .how-it-works-page .hiw-boundary-note { grid-column: 1; }

  .how-it-works-page .hiw-final-panel { padding: var(--space-5) var(--space-4); }

  .how-it-works-page .hiw-final-panel .button { width: 100%; }
}

@media (max-width: 26.25rem) {
  .how-it-works-page .hiw-genre-keys,
  .how-it-works-page .hiw-boundary-note { align-items: stretch; }

  .how-it-works-page .hiw-key { width: 100%; }

  .how-it-works-page .hiw-process-strip {
    flex-direction: column;
    align-items: flex-start;
  }

  .how-it-works-page .hiw-process-strip span[aria-hidden="true"] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .how-it-works-page .hiw-route-card:hover { transform: none; }
}


.shooters-page {
  background: var(--colour-charcoal-950);
}

.shooters-page .section {
  position: relative;
  overflow: clip;
}

.shooters-page a:focus-visible,
.shooters-page button:focus-visible {
  outline: 3px solid var(--colour-pixel-yellow);
  outline-offset: 3px;
}

.shooters-page .surface-light a:focus-visible,
.shooters-page .surface-paper a:focus-visible,
.shooters-page .surface-light button:focus-visible,
.shooters-page .surface-paper button:focus-visible {
  outline-color: var(--colour-charcoal-950);
}

.shooters-hero__grid,
.shooters-browse__grid,
.shooters-pixels__grid,
.shooters-closing__panel {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 5fr) minmax(0, 1fr) minmax(0, 6fr);
  align-items: center;
}

.shooters-hero__copy {
  grid-column: 1;
  min-width: 0;
  padding: var(--space-7);
  background: var(--colour-midnight-900);
}

.shooters-hero__copy > * {
  max-width: 38rem;
}

.shooters-hero__deck {
  font-size: var(--text-lead);
  line-height: 1.6;
}

.shooters-hero__independence {
  margin-block-end: 0;
  padding: var(--space-3) var(--space-4);
  border-inline-start: 4px solid var(--colour-orange-highlight);
  background: var(--colour-midnight-700);
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

.shooters-hero__action {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
}

.shooters-hero__package {
  max-width: 33rem;
  margin: 0;
  color: var(--colour-paper-muted);
}

.shooters-hero__media,
.shooters-browse__media,
.shooters-pixels__media {
  min-width: 0;
  width: 100%;
  margin: 0;
}

.shooters-hero__media {
  grid-column: 3;
}

.shooters-hero__media img,
.shooters-browse__media img,
.shooters-pixels__media img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 2px solid var(--colour-line-dark);
}

.shooters-hero__media figcaption {
  max-width: 36rem;
}

.shooters-status {
  display: inline-flex;
  min-height: 1.5rem;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  max-width: 100%;
  padding: 0.125rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: var(--radius-control);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.25;
}

.shooters-status::before {
  width: 0.5rem;
  height: 0.5rem;
  background: currentColor;
  content: "";
  flex: 0 0 auto;
}

.shooters-status--verified { color: #2d7b35; }
.shooters-status--check { color: #705814; }
.shooters-status--editorial { color: var(--colour-orange-highlight); }

.shooters-verified__intro,
.shooters-reading__intro,
.shooters-playfeel__intro,
.shooters-habits__intro,
.shooters-checklist__intro,
.shooters-related__intro {
  min-width: 0;
  max-width: 42.5rem;
}

.shooters-verified__banner {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--space-3);
  margin-block: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--colour-line-light);
  background: var(--colour-paper-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

.shooters-fact-grid,
.shooters-reading__grid,
.shooters-playfeel__grid,
.shooters-habits__grid,
.shooters-related__grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.shooters-fact-card,
.shooters-reading-card,
.shooters-playfeel-card,
.shooters-habit,
.shooters-route {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.shooters-fact-card {
  padding: var(--space-5);
  border: var(--border-pixel-light);
  background: var(--colour-warm-white);
}

.shooters-fact-card h3,
.shooters-fact-card p {
  margin: 0;
}

.shooters-fact-card a,
.shooters-route > a {
  margin-top: auto;
  min-height: var(--tap-size);
  color: var(--colour-midnight-900);
  font-weight: 700;
}

.shooters-fact-card__note {
  padding-top: var(--space-3);
  border-top: var(--border-light);
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

.shooters-caution {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--colour-line-light);
  background: var(--colour-paper-muted);
}

.shooters-caution > div { min-width: 0; }
.shooters-caution h3,
.shooters-caution p { margin: 0; }
.shooters-caution h3 { margin-block-end: var(--space-2); }

.shooters-browse__content {
  grid-column: 1;
  min-width: 0;
  max-width: 34rem;
}

.shooters-browse__media { grid-column: 3; }

.shooters-browse__steps {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-5);
}

.shooters-step {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: var(--space-3);
}

.shooters-step__number {
  display: flex;
  width: 2.5rem;
  min-width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--colour-ink);
  background: var(--colour-pixel-yellow);
  color: var(--colour-ink);
  font-family: var(--font-display);
  font-size: var(--text-sm);
}

.shooters-step > div { min-width: 0; }
.shooters-step h3,
.shooters-step p { margin: 0; }
.shooters-step h3 { margin-block-end: var(--space-2); }

.shooters-anchor {
  display: inline-flex;
  min-height: var(--tap-size);
  align-items: center;
  margin-block-start: var(--space-5);
  color: var(--colour-midnight-900);
  font-weight: 700;
}

.shooters-reading-card {
  border: var(--border-pixel-light);
  background: var(--colour-warm-white);
}

.shooters-diagram {
  position: relative;
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: var(--border-pixel-light);
  background-color: var(--colour-midnight-900);
  background-image: linear-gradient(90deg, transparent 49%, rgb(255 255 255 / 8%) 50%, transparent 51%), linear-gradient(0deg, transparent 49%, rgb(255 255 255 / 8%) 50%, transparent 51%);
  background-size: 2rem 2rem;
}

.shooters-diagram span,
.shooters-diagram i,
.shooters-diagram b {
  position: absolute;
  display: block;
}

.shooters-diagram--space span { inset: 38% auto auto 16%; width: 2.5rem; height: 2.5rem; background: var(--colour-pixel-yellow); }
.shooters-diagram--space i { inset: 24% 14% auto auto; width: 1rem; height: 1rem; background: var(--colour-orange-highlight); box-shadow: -4rem 3rem 0 var(--colour-orange-highlight), -1.8rem 5rem 0 var(--colour-arcade-cyan); }
.shooters-diagram--space b { inset: auto 21% 16% auto; width: 5rem; height: 1rem; background: var(--colour-arcade-cyan); }
.shooters-diagram--path span { inset: 48% auto auto 12%; width: 2rem; height: 2rem; background: var(--colour-pixel-yellow); }
.shooters-diagram--path i { inset: 34% auto auto 32%; width: 48%; height: 1rem; border-top: 4px solid var(--colour-arcade-cyan); transform: rotate(-16deg); }
.shooters-diagram--path b { inset: 22% 12% auto auto; width: 1.25rem; height: 1.25rem; background: var(--colour-orange-highlight); box-shadow: 0 4rem 0 var(--colour-orange-highlight); }
.shooters-diagram--prompt span { inset: 30% auto auto 15%; width: 3rem; height: 3rem; background: var(--colour-pixel-yellow); }
.shooters-diagram--prompt i { inset: 37% 18% auto auto; width: 3rem; height: 1.25rem; background: var(--colour-arcade-cyan); }
.shooters-diagram--prompt b { inset: auto 28% 18% auto; width: 1.5rem; height: 1.5rem; background: var(--colour-orange-highlight); }

.shooters-reading-card__copy {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

.shooters-reading-card__copy h3,
.shooters-reading-card__copy p,
.shooters-reading-card__copy small { margin: 0; }
.shooters-reading-card__copy small { margin-top: auto; color: #4a4d58; }

.shooters-playfeel-card {
  padding: var(--space-5);
  border: var(--border-pixel-light);
  background: var(--colour-warm-white);
}

.shooters-playfeel-card > span {
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
}

.shooters-playfeel-card h3,
.shooters-playfeel-card p { margin: 0; }
.shooters-playfeel-card--slow { border-top: 6px solid var(--colour-orange-highlight); }
.shooters-playfeel-card--slow > span { color: #9d4314; }
.shooters-playfeel-card--fast { border-top: 6px solid var(--colour-arcade-cyan); }
.shooters-playfeel-card--fast > span { color: #006d6b; }
.shooters-playfeel-card--pattern { border-top: 6px solid var(--colour-magenta-signal); }
.shooters-playfeel-card--pattern > span { color: #95274f; }

.shooters-habits::after {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 auto;
  width: 14%;
  opacity: 0.06;
  background-image: repeating-linear-gradient(0deg, var(--colour-arcade-cyan) 0, var(--colour-arcade-cyan) 1px, transparent 1px, transparent 5px);
  content: "";
  pointer-events: none;
}

.shooters-habits .container { position: relative; z-index: 1; }
.shooters-habits__intro { max-width: 37.5rem; }

.shooters-habit {
  padding: var(--space-5);
  border: var(--border-dark);
  background: var(--colour-midnight-700);
}

.shooters-habit h3,
.shooters-habit p { margin: 0; }
.shooters-habit--green { border-inline-start: 4px solid var(--colour-retro-green); }
.shooters-habit--yellow { border-inline-start: 4px solid var(--colour-pixel-yellow); }
.shooters-habit--cyan { border-inline-start: 4px solid var(--colour-arcade-cyan); }

.shooters-pixels__media { grid-column: 1; }
.shooters-pixels__content { grid-column: 3; min-width: 0; max-width: 35rem; }
.shooters-pixels__unit { min-width: 0; }
.shooters-pixels__unit h3,
.shooters-pixels__unit p { margin: 0; }
.shooters-pixels__unit h3 { margin-block-end: var(--space-2); }
.shooters-pixels__unit--rule { margin-block-start: var(--space-5); padding-inline-start: var(--space-4); border-inline-start: 4px solid var(--colour-pixel-yellow); }

.shooters-pixels__check {
  min-width: 0;
  margin-block-start: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--colour-line-light);
  background: var(--colour-paper-muted);
}

.shooters-pixels__check h3,
.shooters-pixels__check p { margin: 0; }
.shooters-pixels__check h3 { margin-block: var(--space-3) var(--space-2); }

.shooters-checklist__grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-5);
}

.shooters-checklist-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-pixel-light);
  background: var(--colour-warm-white);
}

.shooters-checklist-card h3,
.shooters-checklist-card p,
.shooters-checklist-card ul { margin: 0; }

.shooters-checklist-list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0;
  list-style: none;
}

.shooters-checklist-list li {
  position: relative;
  min-width: 0;
  padding-inline-start: 1.75rem;
}

.shooters-checklist-list li::before {
  position: absolute;
  inset: 0.45rem auto auto 0;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--colour-midnight-900);
  content: "";
}

.shooters-identifier {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-5);
  align-items: center;
  margin-block-start: var(--space-5);
  padding: var(--space-5);
  border: var(--border-pixel-dark);
  background: var(--colour-midnight-900);
  color: var(--colour-warm-white);
}

.shooters-identifier > div { min-width: 0; }
.shooters-identifier h3,
.shooters-identifier p { margin: 0; }
.shooters-identifier h3 { margin-block: var(--space-3) var(--space-2); }
.shooters-identifier__code {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
}

.shooters-identifier code {
  overflow-wrap: anywhere;
  color: var(--colour-arcade-cyan);
}

.shooters-copy-button {
  min-width: 0;
  min-height: var(--tap-size);
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--colour-arcade-cyan);
  background: transparent;
  color: var(--colour-arcade-cyan);
  font-size: var(--text-sm);
  font-weight: 700;
}

.shooters-copy-button:hover { border-color: var(--colour-pixel-yellow); color: var(--colour-pixel-yellow); }

.shooters-related__grid { margin-block-start: var(--space-5); }
.shooters-route { padding: var(--space-5); border: var(--border-pixel-light); background: var(--colour-warm-white); }
.shooters-route > span { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; }
.shooters-route h3,
.shooters-route p { margin: 0; }
.shooters-route h3 a { text-decoration-thickness: 0.08em; }
.shooters-route--review { border-top: 5px solid var(--colour-orange-highlight); }
.shooters-route--review > span { color: #9d4314; }
.shooters-route--library { border-top: 5px solid var(--colour-arcade-cyan); }
.shooters-route--library > span { color: #006d6b; }
.shooters-route--tips { border-top: 5px solid var(--colour-retro-green); }
.shooters-route--tips > span { color: #2d7b35; }

.shooters-closing__panel {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  border-color: var(--colour-line-dark);
  background: var(--colour-midnight-900);
}

.shooters-closing__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-7);
}

.shooters-closing__copy > * { max-width: 38.75rem; }
.shooters-closing__copy h2,
.shooters-closing__copy p { margin: 0; }
.shooters-closing__disclosure { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); line-height: var(--leading-compact); }
.shooters-closing__decor { min-width: 0; min-height: 100%; background: linear-gradient(135deg, transparent 0 42%, var(--colour-midnight-700) 42% 67%, transparent 67%), linear-gradient(45deg, transparent 0 58%, var(--colour-orange-highlight) 58% 63%, transparent 63%); }

@media (max-width: 56.25rem) {
  .shooters-hero__grid,
  .shooters-browse__grid,
  .shooters-pixels__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }

  .shooters-hero__copy,
  .shooters-hero__media,
  .shooters-browse__content,
  .shooters-browse__media,
  .shooters-pixels__media,
  .shooters-pixels__content { grid-column: 1; max-width: none; }

  .shooters-hero__copy > *,
  .shooters-browse__content,
  .shooters-pixels__content { max-width: 42.5rem; }

  .shooters-browse__media { order: 0; }
  .shooters-browse__content { order: -1; }
  .shooters-pixels__content { order: -1; }
  .shooters-pixels__media { order: 0; }

  .shooters-fact-grid,
  .shooters-reading__grid,
  .shooters-playfeel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shooters-fact-grid > :nth-child(3),
  .shooters-reading__grid > :nth-child(3),
  .shooters-playfeel__grid > :nth-child(3) { grid-column: 1 / -1; }
  .shooters-habits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shooters-habits__grid > :nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 52.5rem) {
  .shooters-fact-grid,
  .shooters-reading__grid,
  .shooters-playfeel__grid { gap: var(--space-4); }
}

@media (max-width: 51.25rem) {
  .shooters-habits__grid { grid-template-columns: minmax(0, 1fr); }
  .shooters-habits__grid > :nth-child(3) { grid-column: 1; }
}

@media (max-width: 47.5rem) {
  .shooters-checklist__grid,
  .shooters-related__grid,
  .shooters-identifier,
  .shooters-closing__panel { grid-template-columns: minmax(0, 1fr); }
  .shooters-closing__decor { display: none; }
  .shooters-identifier__code { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 37.5rem) {
  .shooters-hero__copy,
  .shooters-closing__copy { padding: var(--space-5); }
  .shooters-verified__banner { align-items: flex-start; flex-direction: column; }
  .shooters-fact-grid,
  .shooters-reading__grid,
  .shooters-playfeel__grid,
  .shooters-caution { grid-template-columns: minmax(0, 1fr); }
  .shooters-fact-grid > :nth-child(3),
  .shooters-reading__grid > :nth-child(3),
  .shooters-playfeel__grid > :nth-child(3) { grid-column: 1; }
  .shooters-reading-card,
  .shooters-playfeel-card,
  .shooters-fact-card,
  .shooters-habit,
  .shooters-checklist-card,
  .shooters-route { padding: var(--space-4); }
  .shooters-caution { gap: var(--space-4); padding: var(--space-4); }
  .shooters-playfeel-card { border-top-width: 0; border-inline-start-width: 5px; }
  .shooters-page .button,
  .shooters-page .button-dark { width: 100%; }
  .shooters-habits::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .shooters-page * { transition: none !important; }
}


.tips-page {
  overflow: hidden;
}

.tips-page .tips-hero {
  position: relative;
  padding-block: var(--space-7) var(--space-9);
}

.tips-page .tips-hero::after,
.tips-page .tips-visual::after {
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 0;
  width: 4rem;
  background: repeating-linear-gradient(to bottom, rgb(66 216 209 / 6%) 0 1px, transparent 1px 8px);
  content: "";
  pointer-events: none;
}

.tips-page .tips-hero .container-feature,
.tips-page .tips-visual .container {
  position: relative;
  z-index: 1;
}

.tips-page .tips-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-6);
  align-items: center;
}

.tips-page .tips-hero__copy,
.tips-page .tips-hero__media,
.tips-page .tips-hero__intro,
.tips-page .tips-hero__verified {
  min-width: 0;
}

.tips-page .tips-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-5);
}

.tips-page .tips-hero__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.tips-page .tips-hero__intro .eyebrow,
.tips-page .tips-hero__intro h1,
.tips-page .tips-hero__intro p,
.tips-page .tips-hero__verified h2,
.tips-page .tips-hero__verified p {
  margin: 0;
}

.tips-page .tips-hero h1 {
  max-width: 17ch;
}

.tips-page .tips-hero__intro .lead {
  max-width: 57ch;
}

.tips-page .tips-editorial-label {
  border-color: var(--colour-retro-green);
  color: var(--colour-retro-green);
}

.tips-page .tips-external-button {
  max-width: 100%;
}

.tips-page .tips-hero__verified {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-inline-start: 4px solid var(--colour-retro-green);
  background: rgb(255 255 255 / 5%);
}

.tips-page .tips-hero__verified h2 {
  font-size: var(--text-sm);
  line-height: var(--leading-heading);
}

.tips-page .tips-hero__verified p {
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

.tips-page .tips-hero__media {
  width: 100%;
  margin: 0;
  border-color: var(--colour-arcade-cyan);
  background: var(--colour-charcoal-950);
}

.tips-page .tips-hero__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.tips-page .tips-hero__media figcaption {
  margin: 0;
  padding: var(--space-3) var(--space-4);
}

.tips-page .tips-choice__intro,
.tips-page .tips-routine__intro,
.tips-page .tips-sessions__intro,
.tips-page .tips-genre__intro,
.tips-page .tips-source__intro,
.tips-page .tips-checklist__intro,
.tips-page .tips-related__intro {
  min-width: 0;
}

.tips-page .tips-choice__intro {
  width: min(100%, 44rem);
  margin-block-end: var(--space-6);
}

.tips-page .tips-choice__intro p {
  }

.tips-page .tips-choice__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.tips-page .tips-choice-card {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 2px solid var(--colour-ink);
  border-inline-start-width: 6px;
  transition: border-color var(--transition-fast);
}

.tips-page .tips-choice-card:hover {
  border-color: var(--colour-midnight-700);
}

.tips-page .tips-choice-card h3,
.tips-page .tips-choice-card p,
.tips-page .tips-session-card h3,
.tips-page .tips-session-card p,
.tips-page .tips-observation h3,
.tips-page .tips-observation p,
.tips-page .tips-related-card h3,
.tips-page .tips-related-card p {
  margin: 0;
}

.tips-page .tips-choice-card p {
  }

.tips-page .tips-choice-card--platform { border-inline-start-color: var(--colour-orange-highlight); }
.tips-page .tips-choice-card--shooter { border-inline-start-color: var(--colour-arcade-cyan); }
.tips-page .tips-choice-card--puzzle { border-inline-start-color: var(--colour-magenta-signal); }

.tips-page .tips-card-label {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  line-height: 1.4;
  text-transform: uppercase;
}

.tips-page .tips-routine__intro {
  width: min(100%, 46rem);
  margin-block-end: var(--space-6);
}

.tips-page .tips-routine__intro p {
  }

.tips-page .tips-routine__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.tips-page .tips-step {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 2px solid var(--colour-ink);
}

.tips-page .tips-step__number {
  display: block;
  width: max-content;
  color: var(--colour-pixel-yellow);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1;
}

.tips-page .tips-step__content {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.tips-page .tips-step__content h3,
.tips-page .tips-step__content p {
  margin: 0;
}

.tips-page .tips-step__content p {
  }

.tips-page .tips-step--two {
  border-color: var(--colour-midnight-900);
  background: var(--colour-midnight-900);
  color: var(--colour-warm-white);
}

.tips-page .tips-step--three {
  border-color: var(--colour-line-light);
  border-inline-start: 6px solid var(--colour-retro-green);
  background: var(--colour-warm-white);
}

.tips-page .tips-step__takeaway {
  padding-block-start: var(--space-3);
  border-block-start: 1px solid currentColor;
}

.tips-page .tips-flex-note {
  display: flex;
  width: min(100%, 38rem);
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin: var(--space-6) auto 0;
  padding: var(--space-4);
  border: 2px solid var(--colour-ink);
}

.tips-page .tips-flex-note p {
  margin: 0;
}

.tips-page .tips-sessions__intro {
  width: min(100%, 38rem);
  margin-block-end: var(--space-6);
}

.tips-page .tips-sessions__intro p {
  }

.tips-page .tips-sessions__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.tips-page .tips-session-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 2px solid var(--colour-ink);
}

.tips-page .tips-session-card p {
  }

.tips-page .tips-session-card--light { background: var(--colour-warm-white); }
.tips-page .tips-session-card--paper { background: var(--colour-paper-muted); }
.tips-page .tips-session-card--dark { border-color: var(--colour-line-dark); background: var(--colour-midnight-900); color: var(--colour-warm-white); }

.tips-page .tips-pause-mark {
  align-self: flex-end;
  color: var(--colour-orange-highlight);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1;
}

.tips-page .tips-reset-note {
  width: min(100%, 48rem);
  margin: var(--space-6) 0 0;
  padding-block-start: var(--space-4);
  border-block-start: 2px solid var(--colour-orange-highlight);
  font-size: var(--text-lead);
  line-height: 1.6;
}

.tips-page .tips-visual {
  position: relative;
}

.tips-page .tips-visual__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-6);
  align-items: center;
}

.tips-page .tips-visual__copy,
.tips-page .tips-visual__media {
  min-width: 0;
}

.tips-page .tips-visual__copy > p {
  }

.tips-page .tips-observations {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-block-start: var(--space-5);
}

.tips-page .tips-observation {
  min-width: 0;
  padding-inline-start: var(--space-4);
  border-inline-start: 4px solid var(--colour-pixel-yellow);
}

.tips-page .tips-observation--green { border-inline-start-color: var(--colour-retro-green); }
.tips-page .tips-observation p {
  }

.tips-page .tips-visual__media {
  width: 100%;
  margin: 0;
  border-color: var(--colour-arcade-cyan);
  background: var(--colour-charcoal-950);
}

.tips-page .tips-visual__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.tips-page .tips-visual__media figcaption {
  margin: 0;
  padding: var(--space-3) var(--space-4);
}

.tips-page .tips-genre__intro {
  width: min(100%, 46rem);
  margin-block-end: var(--space-6);
}

.tips-page .tips-genre__intro p {
  }

.tips-page .tips-genre__records {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.tips-page .tips-genre-record {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) minmax(0, 5fr);
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-5);
  border: 2px solid var(--colour-ink);
  border-inline-start-width: 6px;
}

.tips-page .tips-genre-record__label,
.tips-page .tips-genre-record__main,
.tips-page .tips-genre-record__prompts,
.tips-page .tips-genre-record__prompts > div {
  min-width: 0;
}

.tips-page .tips-genre-record__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  line-height: 1.4;
  text-transform: uppercase;
}

.tips-page .tips-genre-record__label small {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: var(--leading-compact);
  text-transform: none;
}

.tips-page .tips-genre-record__main h3,
.tips-page .tips-genre-record__main p,
.tips-page .tips-genre-record__prompts p {
  margin: 0;
}

.tips-page .tips-genre-record__main p {
  }

.tips-page .tips-genre-record__prompts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.tips-page .tips-genre-record__prompts > div {
  padding-inline-start: var(--space-3);
  border-inline-start: 1px solid var(--colour-line-light);
}

.tips-page .tips-genre-record__prompts strong {
  display: block;
  margin-block-end: var(--space-2);
}

.tips-page .tips-genre-record__prompts p {
  }
.tips-page .tips-genre-record--platform { border-inline-start-color: var(--colour-orange-highlight); }
.tips-page .tips-genre-record--shooter { border-inline-start-color: var(--colour-arcade-cyan); }
.tips-page .tips-genre-record--puzzle { border-inline-start-color: var(--colour-magenta-signal); }

.tips-page .tips-genre__reminder {
  display: flex;
  width: min(100%, 42rem);
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
  padding: var(--space-4);
  border: var(--border-light);
}

.tips-page .tips-genre__reminder p {
  margin: 0; }

.tips-page .tips-source__intro {
  width: min(100%, 44rem);
  margin-block-end: var(--space-6);
}

.tips-page .tips-source__panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.tips-page .tips-source-panel {
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 2px solid var(--colour-line-dark);
}

.tips-page .tips-source-panel h3,
.tips-page .tips-source-panel p { margin: 0; }
.tips-page .tips-source-panel p {
  }
.tips-page .tips-source-panel--editorial { background: var(--colour-warm-white); color: var(--colour-ink); border-color: var(--colour-warm-white); }
.tips-page .tips-source-panel--official { background: var(--colour-midnight-900); color: var(--colour-warm-white); }

.tips-page .tips-source__note {
  width: min(100%, 48rem);
  margin: var(--space-5) 0 0;
  color: var(--colour-paper-muted);
}

.tips-page .tips-checklist__intro {
  width: min(100%, 47.5rem);
  margin-inline: auto;
  margin-block-end: var(--space-5);
}

.tips-page .tips-checklist__intro p {
  }

.tips-page .tips-checklist__list {
  display: grid;
  width: min(100%, 47.5rem);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.tips-page .tips-checklist__list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 7fr);
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-4) 0;
  border-block-start: 1px solid var(--colour-line-light);
}

.tips-page .tips-checklist__list li:last-child { border-block-end: 1px solid var(--colour-line-light); }
.tips-page .tips-checklist__number { min-width: 0; color: var(--colour-midnight-900); font-family: var(--font-display); font-size: var(--text-h3); line-height: 1; }
.tips-page .tips-checklist__number--source { color: var(--colour-retro-green); }
.tips-page .tips-checklist__list li > div { min-width: 0; }
.tips-page .tips-checklist__list h3 { margin-block-end: var(--space-2); }
.tips-page .tips-checklist__list p {
  margin: 0; }
.tips-page .tips-checklist__list .badge { margin-block-end: var(--space-2); color: var(--colour-midnight-900); border-color: var(--colour-retro-green); }

.tips-page .tips-related__intro { width: min(100%, 38rem); margin-block-end: var(--space-5); }
.tips-page .tips-related__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.tips-page .tips-related-card { display: flex; min-width: 0; min-height: 100%; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); border: 1px solid var(--colour-line-light); border-block-start-width: 4px; }
.tips-page .tips-related-card p {
  }
.tips-page .tips-related-card a { display: inline-flex; min-height: var(--tap-size); align-items: center; color: var(--colour-midnight-900); font-weight: 700; }
.tips-page .tips-related-card--cyan { border-block-start-color: var(--colour-arcade-cyan); }
.tips-page .tips-related-card--yellow { border-block-start-color: var(--colour-pixel-yellow); }
.tips-page .tips-related-card--orange { border-block-start-color: var(--colour-orange-highlight); }
.tips-page .tips-related-card:hover { border-color: var(--colour-midnight-900); }

.tips-page .tips-close { text-align: center; }
.tips-page .tips-close__panel { display: flex; width: min(100%, 38.75rem); min-width: 0; flex-direction: column; align-items: center; gap: var(--space-4); margin-inline: auto; padding: var(--space-6); border-color: var(--colour-arcade-cyan); background: var(--colour-midnight-900); }
.tips-page .tips-close__panel .eyebrow,
.tips-page .tips-close__panel h2,
.tips-page .tips-close__panel p { margin: 0; }
.tips-page .tips-close__panel > p:not(.tips-close__disclosure) { max-width: 56ch; }
.tips-page .tips-close__disclosure { width: 100%; max-width: 60ch; padding-block-start: var(--space-4); border-block-start: 1px solid var(--colour-line-dark); color: var(--colour-paper-muted); font-size: var(--text-sm); line-height: var(--leading-compact); }

@media (max-width: 56.25rem) {
  .tips-page .tips-hero__grid,
  .tips-page .tips-visual__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
  .tips-page .tips-routine__steps { grid-template-columns: 1fr; }
  .tips-page .tips-step { min-height: 0; flex-direction: row; }
  .tips-page .tips-step__number { flex: 0 0 3rem; }
  .tips-page .tips-genre-record { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); }
  .tips-page .tips-genre-record__prompts { grid-column: 2; }
}

@media (max-width: 53.75rem) {
  .tips-page .tips-choice__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tips-page .tips-choice-card:last-child { grid-column: 1 / -1; }
  .tips-page .tips-sessions__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tips-page .tips-session-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 51.25rem) {
  .tips-page .tips-source__panels { grid-template-columns: 1fr; }
  .tips-page .tips-related__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tips-page .tips-related-card:last-child { grid-column: 1 / -1; }
}

@media (max-width: 47.5rem) {
  .tips-page .tips-hero { padding-block: var(--space-5) var(--space-7); }
  .tips-page .tips-hero__grid { grid-template-columns: 1fr; }
  .tips-page .tips-hero__copy { display: contents; }
  .tips-page .tips-hero__intro { grid-row: 1; }
  .tips-page .tips-hero__media { grid-row: 2; }
  .tips-page .tips-hero__verified { grid-row: 3; }
  .tips-page .tips-hero h1 { font-size: clamp(1.875rem, 8vw, 2.25rem); }
  .tips-page .tips-hero__intro .lead { max-width: 58ch; }
  .tips-page .tips-visual__grid { grid-template-columns: 1fr; }
  .tips-page .tips-visual__copy { display: contents; }
  .tips-page .tips-visual__copy > .eyebrow,
  .tips-page .tips-visual__copy > h2,
  .tips-page .tips-visual__copy > p { grid-column: 1; }
  .tips-page .tips-visual__media { grid-row: 4; }
  .tips-page .tips-observations { grid-row: 5; }
  .tips-page .tips-genre-record { grid-template-columns: 1fr; }
  .tips-page .tips-genre-record__prompts { grid-column: auto; }
  .tips-page .tips-close__panel { padding: var(--space-5); }
}

@media (max-width: 38.75rem) {
  .tips-page .tips-choice__cards,
  .tips-page .tips-sessions__cards,
  .tips-page .tips-related__cards { grid-template-columns: 1fr; }
  .tips-page .tips-choice-card:last-child,
  .tips-page .tips-session-card:last-child,
  .tips-page .tips-related-card:last-child { grid-column: auto; }
  .tips-page .tips-step { flex-direction: column; }
  .tips-page .tips-step__number { flex-basis: auto; }
  .tips-page .tips-genre-record__prompts { grid-template-columns: 1fr; }
}

@media (max-width: 26.25rem) {
  .tips-page .tips-checklist__list li { grid-template-columns: 1fr; gap: var(--space-3); }
  .tips-page .tips-close { text-align: left; }
  .tips-page .tips-close__panel { align-items: flex-start; }
  .tips-page .tips-close__disclosure { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .tips-page .tips-choice-card:hover { border-color: var(--colour-ink); }
  .tips-page .tips-hero::after,
  .tips-page .tips-visual::after { display: none; }
}


.game-library-page {
  background: var(--colour-charcoal-950);
}

.game-library-page .verified-google-play__label,
.game-library-page .editorial-guidance__label {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid currentColor;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.25;
}

.game-library-page .verified-google-play__label {
  border-color: var(--colour-retro-green);
  color: var(--colour-retro-green);
}

.game-library-page .editorial-guidance__label {
  border-color: var(--colour-pixel-yellow);
  color: var(--colour-ink);
  background: var(--colour-pixel-yellow);
}

.game-library-hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-8);
}

.game-library-hero::after {
  position: absolute;
  inset: 0 0 0 auto;
  width: 34%;
  opacity: 0.06;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 5px, var(--colour-arcade-cyan) 6px);
  content: "";
  pointer-events: none;
}

.game-library-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 1fr) minmax(22.5rem, 5fr);
  gap: var(--space-5);
  align-items: start;
}

.game-library-hero__copy,
.game-library-taxonomy,
.game-library-hero__blocks,
.game-library-hero__blocks > *,
.game-library-meaning__cards > *,
.game-library-lanes__grid > *,
.game-library-steps__layout > *,
.game-library-controls__comparison > *,
.game-library-session__layout > *,
.game-library-updates__layout > *,
.game-library-close__banner > * {
  min-width: 0;
}

.game-library-hero__copy {
  grid-column: 1 / 2;
  max-width: 39rem;
}

.game-library-hero__copy h1 {
  max-width: 34rem;
}

.game-library-hero__copy .lead {
  max-width: 38rem;
}

.game-library-hero__independence {
  max-width: 37rem;
  color: var(--colour-paper-muted);
  font-size: var(--text-sm);
}

.game-library-hero__blocks {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.game-library-snapshot,
.game-library-use {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-dark);
  background: rgb(17 19 26 / 55%);
}

.game-library-snapshot h2,
.game-library-use h2 {
  margin: 0;
  font-size: 1rem;
  line-height: var(--leading-heading);
}

.game-library-snapshot__rows {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.game-library-snapshot__rows > div {
  display: grid;
  grid-template-columns: minmax(7.75rem, 0.8fr) minmax(0, 1.6fr);
  gap: var(--space-3);
  padding-block-start: var(--space-2);
  border-block-start: 1px solid var(--colour-line-dark);
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

.game-library-snapshot__rows strong {
  color: var(--colour-retro-green);
}

.game-library-use p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

.game-library-taxonomy {
  grid-column: 3 / 4;
  width: 100%;
  max-width: 35rem;
  justify-self: end;
  padding: var(--space-3);
  background: var(--colour-midnight-700);
}

.game-library-taxonomy img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.game-library-taxonomy figcaption {
  margin-block: var(--space-2) 0;
}

.game-library-taxonomy__tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin-block-start: var(--space-3);
}

.game-library-tile {
  min-width: 0;
  padding: var(--space-2);
  border: 1px solid currentColor;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: var(--leading-compact);
}

.game-library-tile--platformer { color: var(--colour-orange-highlight); }
.game-library-tile--shooter { color: var(--colour-arcade-cyan); }
.game-library-tile--puzzle { color: #f07fa9; }
.game-library-tile--change { color: var(--colour-pixel-yellow); }

.game-library-meaning__intro,
.game-library-lanes__intro,
.game-library-controls__intro,
.game-library-updates__main > .eyebrow,
.game-library-updates__main > h2,
.game-library-updates__main > .lead {
  max-width: 47rem;
}

.game-library-meaning__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-6);
}

.game-library-meaning-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border: var(--border-light);
  background: var(--colour-warm-white);
}

.game-library-meaning-card > * {
  margin: 0;
}

.game-library-meaning-card h3 {
  font-size: 1.125rem;
}

.game-library-meaning-card--verified {
  border-inline-start: 4px solid var(--colour-orange-highlight);
}

.game-library-meaning-card--advice {
  background: var(--colour-paper-muted);
}

.game-library-meaning-card ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.game-library-genre-key {
  display: grid;
  gap: var(--space-3);
}

.game-library-genre-key p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

.game-library-marker {
  display: block;
  padding-inline-start: var(--space-2);
  border-inline-start: 3px solid currentColor;
}

.game-library-marker--orange { color: #a54110; }
.game-library-marker--cyan { color: #096d6b; }
.game-library-marker--magenta { color: #9b2458; }

.game-library-lanes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-6);
}

.game-library-lane {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  border: var(--border-pixel-light);
  background: var(--colour-warm-white);
}

.game-library-lane > img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-block-end: var(--border-pixel-light);
}

.game-library-lane__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
}

.game-library-lane__content > * {
  margin: 0;
}

.game-library-lane__content h3 {
  font-size: 1.125rem;
}

.game-library-lane--platformer { border-block-start: 5px solid var(--colour-orange-highlight); }
.game-library-lane--shooter { border-block-start: 5px solid var(--colour-arcade-cyan); }
.game-library-lane--puzzle { border-block-start: 5px solid var(--colour-magenta-signal); }

.game-library-steps__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 8fr) minmax(0, 3fr);
  gap: var(--space-5);
}

.game-library-steps__sequence {
  grid-column: 2 / 3;
  max-width: 48rem;
}

.game-library-steps__sequence > .lead {
  max-width: 40rem;
}

.game-library-steps__list {
  display: grid;
  gap: var(--space-5);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

.game-library-steps__list > li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding-block-end: var(--space-5);
  border-block-end: 1px solid var(--colour-line-light);
}

.game-library-step__number {
  display: block;
  width: 100%;
  padding: var(--space-2);
  background: var(--colour-pixel-yellow);
  color: var(--colour-charcoal-950);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  line-height: 1.4;
  text-align: center;
}

.game-library-steps__list h3 {
  font-size: 1.125rem;
}

.game-library-inline-note {
  display: inline-flex;
  margin-block-start: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--colour-arcade-cyan);
  color: #086967;
  font-size: var(--text-sm);
  font-weight: 700;
}

.game-library-steps__tip {
  margin-block: var(--space-5) 0;
}

.game-library-steps__cabinet {
  grid-column: 3 / 4;
  align-self: stretch;
  min-height: 26rem;
  border: 2px solid var(--colour-midnight-900);
  background: linear-gradient(90deg, transparent 0 20%, var(--colour-midnight-900) 20% 80%, transparent 80% 100%);
  opacity: 0.85;
}

.game-library-controls__lead {
  display: flex;
  max-width: 47rem;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-block: var(--space-5) var(--space-6);
  padding: var(--space-4);
  border-inline-start: 4px solid var(--colour-pixel-yellow);
  background: var(--colour-warm-white);
}

.game-library-controls__lead p { margin: 0; }

.game-library-controls__comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.game-library-controls__useful,
.game-library-controls__not-confirmed {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
}

.game-library-controls__useful {
  border: var(--border-pixel-light);
  background: var(--colour-warm-white);
}

.game-library-controls__not-confirmed {
  border: var(--border-pixel-dark);
  background: var(--colour-midnight-900);
  color: var(--colour-warm-white);
}

.game-library-controls__useful > *,
.game-library-controls__not-confirmed > * { margin: 0; }

.game-library-controls__items {
  display: grid;
  width: 100%;
  gap: var(--space-3);
}

.game-library-controls__items p { margin: 0; }

.game-library-controls__not-confirmed .verified-google-play__label {
  border-color: var(--colour-retro-green);
  color: var(--colour-retro-green);
}

.game-library-session__layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 7fr) minmax(0, 3fr);
  gap: var(--space-5);
}

.game-library-session__column {
  grid-column: 2 / 3;
  max-width: 43rem;
}

.game-library-session__column > .lead { max-width: 41rem; }

.game-library-session__block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
  padding: var(--space-4);
}

.game-library-session__block > * { margin: 0; }
.game-library-session__block h3 { font-size: 1.125rem; }
.game-library-session__block--goal { border-inline-start: 4px solid var(--colour-retro-green); background: var(--colour-paper-muted); }
.game-library-session__block--pace { border-inline-start: 4px solid var(--colour-arcade-cyan); background: color-mix(in srgb, var(--colour-arcade-cyan) 12%, var(--colour-warm-white)); }
.game-library-session__block--current { border: var(--border-light); background: var(--colour-paper-muted); }
.game-library-session__accent { grid-column: 1 / 2; border-inline-end: 3px solid var(--colour-midnight-900); opacity: 0.45; }

.game-library-updates__layout {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 1fr) minmax(15rem, 4fr);
  gap: var(--space-5);
}

.game-library-updates__main {
  grid-column: 1 / 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.game-library-updates__main > * { margin: 0; }

.game-library-updates__verified,
.game-library-updates__explanation,
.game-library-updates__checklist {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
}

.game-library-updates__verified { border: var(--border-pixel-dark); border-block-start: 4px solid var(--colour-retro-green); background: var(--colour-midnight-900); color: var(--colour-warm-white); }
.game-library-updates__explanation { border-inline-start: 4px solid var(--colour-orange-highlight); background: var(--colour-warm-white); }
.game-library-updates__checklist { border: var(--border-light); background: var(--colour-paper-muted); }
.game-library-updates__verified > *, .game-library-updates__explanation > *, .game-library-updates__checklist > * { margin: 0; }
.game-library-updates__verified h3, .game-library-updates__explanation h3, .game-library-updates__checklist h3 { font-size: 1.125rem; }
.game-library-updates__checklist ul { display: grid; gap: var(--space-2); }
.game-library-package { font-size: var(--text-sm); }

.game-library-updates__rail {
  grid-column: 3 / 4;
  align-self: start;
  padding: var(--space-4);
  border: var(--border-light);
  background: var(--colour-warm-white);
}

.game-library-updates__rail h3 { font-size: 1rem; }
.game-library-updates__rail p { font-size: var(--text-sm); line-height: var(--leading-compact); }

.game-library-faq__panel {
  width: 75%;
  min-width: 0;
  margin-inline: auto;
  padding: var(--space-6);
  border: var(--border-pixel-dark);
  background: var(--colour-midnight-900);
}

.game-library-faq__panel > h2 { max-width: 45rem; }
.game-library-faq__items { display: grid; gap: 0; margin-block-start: var(--space-5); }
.game-library-faq__item { border-block-start: 1px solid var(--colour-line-dark); }
.game-library-faq__item h3 { margin: 0; font-size: 1rem; }

.game-library-faq__trigger {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 2.75rem;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4) 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: 700;
  line-height: var(--leading-compact);
  text-align: left;
}

.game-library-faq__state {
  display: grid;
  width: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  place-items: center;
  border: 1px solid var(--colour-arcade-cyan);
  color: var(--colour-arcade-cyan);
  font-size: 1.5rem;
  line-height: 1;
}

.game-library-faq__answer {
  max-width: 42rem;
  padding-block: 0 var(--space-4);
}

.game-library-faq__answer p { margin: 0; }
.game-library-faq__answer .verified-google-play__label,
.game-library-faq__answer .editorial-guidance__label { margin-inline-end: var(--space-2); vertical-align: baseline; }
.game-library-faq__note { margin: var(--space-5) 0 0; color: var(--colour-paper-muted); font-size: var(--text-sm); }

.game-library-disclosure__column {
  display: grid;
  width: 58.333%;
  min-width: 0;
  gap: var(--space-5);
  margin-inline: auto;
}

.game-library-disclosure__block,
.game-library-disclosure__key {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border: var(--border-light);
}

.game-library-disclosure__block { background: var(--colour-warm-white); }
.game-library-disclosure__key { background: var(--colour-paper-muted); }
.game-library-disclosure__block > *, .game-library-disclosure__key > * { margin: 0; }
.game-library-disclosure__key > div { display: grid; gap: var(--space-2); }
.game-library-disclosure__key p { margin: 0; }
.game-library-disclosure__key h3 { font-size: 1.125rem; }

.game-library-close { padding-block: var(--space-8); }
.game-library-close__banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(26.25rem, 6fr) minmax(0, 1fr) minmax(0, 4fr);
  gap: var(--space-5);
  align-items: center;
  padding: var(--space-6);
  border: var(--border-pixel-dark);
  background: var(--colour-midnight-900);
}

.game-library-close__content {
  grid-column: 2 / 3;
  display: flex;
  max-width: 37rem;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.game-library-close__content > * { margin: 0; }
.game-library-close__content h2 { font-size: var(--text-h3); }
.game-library-close__package { color: var(--colour-paper-muted); font-size: var(--text-sm); }
.game-library-close__grid { grid-column: 4 / 5; min-height: 12rem; background-image: linear-gradient(var(--colour-line-dark) 2px, transparent 2px), linear-gradient(90deg, var(--colour-line-dark) 2px, transparent 2px); background-size: 24px 24px; opacity: 0.7; }

@media (max-width: 61.25rem) {
  .game-library-lanes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-library-lane--puzzle { grid-column: 1 / 2; }
}

@media (max-width: 56.25rem) {
  .game-library-hero__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .game-library-hero__copy, .game-library-taxonomy { grid-column: 1; }
  .game-library-hero__copy { max-width: 44rem; }
  .game-library-taxonomy { justify-self: start; max-width: 35rem; }
  .game-library-hero::after { width: 20%; }
  .game-library-updates__layout { grid-template-columns: 1fr; }
  .game-library-updates__main, .game-library-updates__rail { grid-column: 1; }
  .game-library-updates__rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); width: 100%; }
  .game-library-updates__rail h3 { grid-column: 1 / -1; margin: 0; }
  .game-library-updates__rail p { margin: 0; }
  .game-library-steps__cabinet, .game-library-session__accent { display: none; }
  .game-library-steps__layout, .game-library-session__layout { grid-template-columns: 1fr; }
  .game-library-steps__sequence, .game-library-session__column { grid-column: 1; width: 100%; max-width: 48rem; }
}

@media (max-width: 51.25rem) {
  .game-library-meaning__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-library-meaning-card--advice { grid-column: 1 / -1; }
}

@media (max-width: 45rem) {
  .game-library-controls__comparison { grid-template-columns: 1fr; }
  .game-library-faq__panel { width: 100%; }
  .game-library-disclosure__column { width: 100%; }
}

@media (max-width: 40rem) {
  .game-library-lanes__grid, .game-library-meaning__cards { grid-template-columns: 1fr; }
  .game-library-lane--puzzle, .game-library-meaning-card--advice { grid-column: 1; }
  .game-library-hero { padding-block: var(--space-7); }
  .game-library-taxonomy__tiles { grid-template-columns: 1fr; }
  .game-library-snapshot__rows > div { grid-template-columns: 1fr; gap: var(--space-1); }
  .game-library-steps__list > li { grid-template-columns: 1fr; gap: var(--space-3); }
  .game-library-step__number { width: 4.5rem; }
  .game-library-updates__rail { grid-template-columns: 1fr; }
  .game-library-updates__rail h3 { grid-column: 1; }
  .game-library-faq__panel { padding: var(--space-4); }
}

@media (max-width: 33rem) {
  .game-library-close__banner { grid-template-columns: 1fr; padding: var(--space-4); }
  .game-library-close__content { grid-column: 1; width: 100%; }
  .game-library-close__grid { display: none; }
}

@media (max-width: 30rem) {
  .game-library-close__content .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .game-library-page * { scroll-behavior: auto; }
}


.review-page {
  background: var(--colour-warm-white);
  color: var(--colour-ink);
}

.review-page a:focus-visible {
  outline-color: var(--colour-charcoal-950);
}

.review-hero {
  padding-block: var(--space-8);
}

.review-hero__grid,
.review-library__grid,
.review-graphics__grid,
.review-controls__grid,
.review-facts__grid,
.review-variety__grid,
.review-ads__grid,
.review-fit__grid,
.review-verdict__inner {
  display: grid;
  min-width: 0;
}

.review-hero__grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: center;
}

.review-hero__copy {
  grid-column: span 5;
  min-width: 0;
  max-width: 40rem;
}

.review-hero__media {
  grid-column: 7 / span 6;
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--space-3);
  border: 2px solid var(--colour-midnight-900);
  background: var(--colour-midnight-900);
  color: var(--colour-warm-white);
  box-shadow: var(--shadow-raised);
}

.review-hero__media::before,
.review-graphics__media::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 5px, rgb(66 216 209 / 6%) 6px);
  content: "";
}

.review-hero__media img,
.review-graphics__media img,
.review-library__media img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.review-hero__media figcaption,
.review-graphics__media figcaption,
.review-library__media figcaption {
  position: relative;
  z-index: 1;
  margin-block: var(--space-2) 0;
}

.review-disclosure,
.review-source-card,
.review-controls__callout,
.review-graphics__tip,
.review-source-note,
.review-verdict__disclosure {
  min-width: 0;
}

.review-disclosure {
  margin-block: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--colour-line-light);
  border-inline-start: 4px solid var(--colour-orange-highlight);
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

.review-source-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 2px solid var(--colour-midnight-900);
  background: var(--colour-paper-muted);
}

.review-source-card p,
.review-source-card__head {
  margin: 0;
}

.review-source-card__head {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.review-source-card__dot {
  width: 0.75rem;
  height: 0.75rem;
  flex: 0 0 auto;
  background: var(--colour-retro-green);
}

.review-label {
  display: inline-flex;
  width: fit-content;
  min-height: 1.5rem;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border: 1px solid currentColor;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.25;
}

.review-label--verified { color: #277e39; }
.review-label--guidance { color: #765800; }
.review-label--update { color: #9f4315; }

.review-facts__grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
}

.review-facts__intro {
  grid-column: span 8;
  min-width: 0;
}

.review-facts__intro p:last-child { margin-block-end: 0; }

.review-fact-panel {
  grid-column: span 6;
  min-width: 0;
  padding: var(--space-5);
  border: 2px solid var(--colour-ink);
  background: var(--colour-warm-white);
}

.review-fact-panel > :last-child,
.review-boundaries > :last-child,
.review-genre-panel > :last-child,
.review-reading-unit > :last-child,
.review-graphics__tip > :last-child,
.review-variety__intro > :last-child,
.review-variety__closing > :last-child,
.review-ads__notice > :last-child,
.review-ads__action > :last-child,
.review-fit-panel > :last-child,
.review-fit__conclusion > :last-child,
.review-verdict__copy > :last-child,
.review-verdict__cta > :last-child,
.review-verdict__disclosure > :last-child { margin-block-end: 0; }

.review-fact-panel .review-label { margin-block-end: var(--space-3); }

.review-boundaries {
  grid-column: span 8;
  min-width: 0;
  padding-block-start: var(--space-2);
}

.review-boundaries__list {
  display: grid;
  min-width: 0;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.review-boundaries__list p {
  min-width: 0;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-inline-start: 2px solid var(--colour-line-light);
}

.review-library__grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: start;
}

.review-library__copy {
  grid-column: span 7;
  min-width: 0;
  max-width: 45rem;
}

.review-library__media {
  grid-column: span 5;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--space-2);
  border: 2px solid var(--colour-arcade-cyan);
  background: var(--colour-midnight-900);
  color: var(--colour-warm-white);
}

.review-reading-unit + .review-reading-unit { margin-block-start: var(--space-5); }
.review-reading-unit h3 { margin-block-end: var(--space-3); }

.review-inline-guidance {
  color: #765800;
  font-weight: 700;
}

.review-genre-cues {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: 0 var(--space-3);
}

.review-genre-cue {
  display: inline-flex;
  min-height: 1.75rem;
  align-items: center;
  padding-inline: var(--space-2);
  border-inline-start: 3px solid currentColor;
  background: rgb(0 0 0 / 6%);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.3;
}

.review-genre-cue--platform { color: #a14515; }
.review-genre-cue--shooter { color: #057b78; }
.review-genre-cue--puzzle { color: #9a265b; }

.review-source-note {
  margin-block-start: var(--space-5);
  padding: var(--space-4);
  border: 2px solid var(--colour-arcade-cyan);
  background: var(--colour-paper-muted);
}

.review-source-note h3 { margin-block-end: var(--space-2); }
.review-source-note p { margin-block-end: 0; }
.review-source-note a { color: var(--colour-midnight-900); font-weight: 700; }

.review-genres,
.review-variety,
.review-verdict {
  background: var(--colour-charcoal-950);
  color: var(--colour-warm-white);
}

.review-genre-grid {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.review-genre-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 2px solid var(--colour-line-dark);
  background: var(--colour-midnight-900);
}

.review-genre-panel h3,
.review-genre-panel p { margin: 0; }
.review-genre-panel--platform { border-block-start-color: var(--colour-orange-highlight); }
.review-genre-panel--shooter { border-block-start-color: var(--colour-arcade-cyan); }
.review-genre-panel--puzzle { border-block-start-color: var(--colour-magenta-signal); }
.review-genre-panel .review-label { color: var(--colour-retro-green); }

.review-controls__grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}

.review-controls__rail {
  grid-column: span 4;
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
  border-inline-end: 2px solid var(--colour-pixel-yellow);
}

.review-controls__rail span {
  width: 100%;
  min-width: 0;
  aspect-ratio: 1;
  border: 2px solid var(--colour-midnight-900);
  background: var(--colour-pixel-yellow);
}

.review-controls__rail span:nth-child(2),
.review-controls__rail span:nth-child(3) { background: var(--colour-midnight-900); }

.review-controls__content {
  grid-column: span 8;
  min-width: 0;
  max-width: 47.5rem;
}

.review-controls__callout {
  margin-block: var(--space-5);
  padding: var(--space-4);
  border-inline-start: 4px solid var(--colour-pixel-yellow);
  background: var(--colour-warm-white);
}

.review-controls__callout .review-label { margin-block-end: var(--space-3); }
.review-controls__callout h3 { margin-block-end: var(--space-2); }
.review-controls__callout p { margin-block-end: 0; }

.review-steps {
  display: grid;
  min-width: 0;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.review-steps li {
  display: grid;
  min-width: 0;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--colour-line-light);
}

.review-steps li > div { min-width: 0; }
.review-steps h3 { margin-block-end: var(--space-2); }
.review-steps p { margin-block-end: var(--space-3); }

.review-step-number {
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  align-items: center;
  justify-content: center;
  background: var(--colour-midnight-900);
  color: var(--colour-pixel-yellow);
  font-family: var(--font-display);
  font-size: var(--text-sm);
}

.review-graphics__grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: start;
}

.review-graphics__copy {
  grid-column: span 6;
  min-width: 0;
  max-width: 42.5rem;
}

.review-graphics__media {
  grid-column: span 6;
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: var(--space-3);
  border: 2px solid var(--colour-midnight-900);
  background: var(--colour-midnight-900);
  color: var(--colour-warm-white);
}

.review-graphics__tip {
  margin-block: var(--space-5);
  padding: var(--space-4);
  border-inline-start: 4px solid var(--colour-retro-green);
  background: var(--colour-paper-muted);
}

.review-graphics__tip .review-label { margin-block-end: var(--space-3); }
.review-graphics__tip h3 { margin-block-end: var(--space-2); }

.review-variety__grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
}

.review-variety__intro {
  grid-column: span 8;
  min-width: 0;
  max-width: 43.75rem;
}

.review-variety__intro .review-label { margin-inline-end: var(--space-2); }

.review-variety__steps {
  grid-column: span 12;
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.review-variety__steps article {
  min-width: 0;
  padding: var(--space-5);
  border: 2px solid var(--colour-line-dark);
  background: var(--colour-midnight-900);
}

.review-variety__steps .review-step-number { margin-block-end: var(--space-3); }
.review-variety__steps h3 { margin-block-end: var(--space-2); }
.review-variety__steps p { margin-block-end: 0; }

.review-variety__closing {
  grid-column: span 8;
  min-width: 0;
  max-width: 43.75rem;
  padding-inline-start: var(--space-4);
  border-inline-start: 4px solid var(--colour-orange-highlight);
}

.review-variety__closing h3 { margin-block-end: var(--space-2); }
.review-variety__closing a { color: var(--colour-arcade-cyan); font-weight: 700; }

.review-ads__grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
  max-width: 65rem;
  margin-inline: auto;
}

.review-ads__notice {
  grid-column: span 7;
  min-width: 0;
  max-width: 42.5rem;
  padding: var(--space-5);
  border: 2px solid var(--colour-ink);
  border-inline-start-color: var(--colour-pixel-yellow);
  background: var(--colour-paper-muted);
}

.review-ads__notice .review-label { margin-block-end: var(--space-3); }

.review-ads__action {
  grid-column: span 5;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 2px solid var(--colour-arcade-cyan);
  background: var(--colour-midnight-900);
  color: var(--colour-warm-white);
}

.review-ads__action h3,
.review-ads__action ol,
.review-ads__action p { margin: 0; }
.review-ads__action ol { padding-inline-start: 1.5rem; }

.review-fit__grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
}

.review-fit__heading {
  grid-column: span 12;
  min-width: 0;
}

.review-fit-panel {
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--colour-line-light);
  background: var(--colour-paper-muted);
}

.review-fit-panel--positive { grid-column: 1 / span 5; }
.review-fit-panel--check { grid-column: 8 / span 5; }
.review-fit-panel .review-label { margin-block-end: var(--space-3); }

.review-fit__conclusion {
  grid-column: span 8;
  min-width: 0;
  max-width: 45rem;
  padding-block-start: var(--space-2);
}

.review-fit__conclusion a { color: var(--colour-midnight-900); font-weight: 700; }

.review-verdict {
  border-block-start: 4px solid var(--colour-pixel-yellow);
}

.review-verdict__inner {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.review-verdict__copy,
.review-verdict__disclosure {
  grid-column: 3 / span 8;
  min-width: 0;
  max-width: 43.75rem;
}

.review-verdict__cta {
  grid-column: 3 / span 8;
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 32.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.review-verdict__cta p { margin: 0; }

.review-verdict__disclosure {
  padding: var(--space-4);
  border: 1px solid var(--colour-line-dark);
  background: var(--colour-midnight-900);
}

.review-verdict__disclosure .review-label { margin-block-end: var(--space-3); color: var(--colour-retro-green); }

@media (max-width: 58.75rem) {
  .review-hero__grid,
  .review-library__grid,
  .review-graphics__grid { grid-template-columns: 1fr; }

  .review-hero__copy,
  .review-hero__media,
  .review-library__copy,
  .review-library__media,
  .review-graphics__copy,
  .review-graphics__media {
    grid-column: 1;
    max-width: none;
  }

  .review-hero__media,
  .review-library__media,
  .review-graphics__media { max-width: 48rem; }

  .review-controls__rail { display: none; }
  .review-controls__content { grid-column: 2 / span 10; max-width: none; }
}

@media (max-width: 53.75rem) {
  .review-fact-panel { grid-column: span 12; }
  .review-genre-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-genre-panel--puzzle { grid-column: span 2; }
  .review-variety__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-variety__steps article:last-child { grid-column: span 2; }
  .review-ads__notice,
  .review-ads__action { grid-column: span 12; max-width: none; }
}

@media (max-width: 51.25rem) {
  .review-facts__intro,
  .review-boundaries,
  .review-variety__intro,
  .review-variety__closing { grid-column: span 12; max-width: none; }
}

@media (max-width: 47.5rem) {
  .review-hero { padding-block: var(--space-7); }
  .review-hero__grid,
  .review-library__grid,
  .review-graphics__grid,
  .review-controls__grid,
  .review-facts__grid,
  .review-variety__grid,
  .review-ads__grid,
  .review-fit__grid,
  .review-verdict__inner { gap: var(--space-5); }

  .review-hero__copy h1 { font-size: 1.875rem; line-height: 1.15; }
  .review-hero__media,
  .review-library__media,
  .review-graphics__media { max-width: none; }
  .review-controls__content { grid-column: span 12; }
  .review-fit-panel--positive,
  .review-fit-panel--check,
  .review-fit__conclusion,
  .review-verdict__copy,
  .review-verdict__cta,
  .review-verdict__disclosure { grid-column: span 12; max-width: none; }
}

@media (max-width: 35rem) {
  .review-genre-grid,
  .review-variety__steps { grid-template-columns: 1fr; }
  .review-genre-panel--puzzle,
  .review-variety__steps article:last-child { grid-column: 1; }
  .review-fact-panel,
  .review-genre-panel,
  .review-variety__steps article,
  .review-ads__notice,
  .review-ads__action,
  .review-fit-panel { padding: var(--space-4); }
  .review-source-card { align-items: stretch; }
  .review-source-card .button,
  .review-ads__action .button,
  .review-verdict__cta .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .review-page .button:hover,
  .review-page .button-dark:hover { transform: none; }
}


.thank-you {
  display: grid;
  min-height: min(42rem, calc(100vh - 12rem));
  place-items: center;
  padding-block: var(--space-9);
}

.thank-you__panel {
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
  padding: clamp(var(--space-6), 6vw, var(--space-8));
  background: var(--colour-warm-white);
  color: var(--colour-ink);
  text-align: center;
}

.thank-you__panel .eyebrow {
  justify-content: center;
}

.thank-you__panel h1 {
  margin-block-end: var(--space-5);
}

.thank-you__copy {
  max-width: 40rem;
  margin-inline: auto;
  text-align: center;
}

.thank-you__copy .lead {
  margin-block-end: var(--space-4);
}

.thank-you__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

@media (max-width: 47.5rem) {
  .thank-you {
    min-height: 0;
    padding-block: var(--space-7);
  }
}

@media (max-width: 26.25rem) {
  .thank-you__actions {
    align-items: stretch;
    flex-direction: column;
  }
}