/* Source: css/interior.css */
/* Source: css/pages/interior.css */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--ds-color-black);
  color: var(--ds-color-white);
  font: 500 16px/1.6 var(--ds-font-sans);
}
a {
  color: inherit;
  text-decoration: none;
}
header {
  height: 105px;
  padding: 30px clamp(22px, 3.4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.page-brand img {
  filter: invert(1);
  display: block;
  width: 126px;
  height: auto;
}
main {
  max-width: 1180px;
  margin: 70px auto 110px;
  padding: 0 clamp(22px, 5vw, 70px);
}
.page-label {
  font-size: 11px;
  color: #aaaab0;
  margin-bottom: 30px;
}
h1 {
  overflow-wrap: anywhere;
  font-weight: 500;
  font-size: clamp(44px, 7vw, 92px);
  line-height: 1.08;
  letter-spacing: -0.06em;
  max-width: 1000px;
  margin: 0 0 45px;
}
.page-intro {
  font-size: clamp(17px, 2vw, 24px);
  line-height: 1.6;
  max-width: 780px;
  color: #c3c3c8;
  letter-spacing: -0.025em;
}
.page-sections {
  margin-top: 90px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 55px 65px;
}
.page-sections section {
  border-top: var(--ds-stroke) solid #ffffff40;
  padding-top: 25px;
}
h2 {
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.25;
  letter-spacing: -0.04em;
  margin: 0 0 22px;
  font-weight: 500;
}
.page-sections p {
  font-size: 15px;
  color: #aaaab0;
  max-width: 520px;
}
.page-caption {
  display: block;
  font-size: 10px;
  color: #aaaab0;
  margin-top: 25px;
}
footer {
  padding: 25px clamp(22px, 3.4vw, 64px);
  border-top: var(--ds-stroke) solid #ffffff30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
}
.page-languages {
  display: flex;
  gap: 7px;
}
button {
  font: 11px var(--ds-font-sans);
  color: var(--ds-color-white);
  background: transparent;
  border: var(--ds-stroke) solid transparent;
  border-radius: 999px;
  width: 34px;
  height: 34px;
  cursor: pointer;
}
button:hover {
  border-color: currentColor;
}
button[aria-pressed="true"] {
  background: var(--ds-color-white);
  color: var(--ds-color-black);
}
a:focus-visible,
button:focus-visible {
  outline: var(--ds-stroke) solid white;
  outline-offset: 5px;
}
@media (max-width: 700px) {
  main {
    margin-top: 40px;
  }
  .page-sections {
    grid-template-columns: 1fr;
    margin-top: 60px;
    gap: 35px;
  }
  h1 {
    margin-bottom: 30px;
  }
  .page-intro {
    font-size: 17px;
  }
}

/* Source: css/design-system/index.css */
/* Public component API: foundations → atoms → molecules → utilities. */
/* Source: css/design-system/foundations/tokens.css */
/* Shared decisions. Components consume these tokens instead of redeclaring them. */
:root {
  --ds-color-ink: #101114;
  --ds-color-black: #000;
  --ds-color-white: #fff;
  --ds-color-paper: #fafafa;
  --ds-color-surface: #f2f3f5;
  --ds-color-accent: #2246ff;
  --ds-color-muted: #737780;
  --ds-color-progress-track: #858a94;
  --ds-font-sans: Lexend, sans-serif;
  --ds-font-mono: ui-monospace, SFMono-Regular, monospace;
  --ds-font-weight: 500;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-page-gutter: clamp(22px, 3.4vw, 64px);
  --ds-control-size: 42px;
  --ds-control-ring-size: 48px;
  --ds-icon-size: 24px;
  --ds-stroke: 1.2px;
  --ds-choice-size: 32px;
  --ds-radius-round: 50%;
  --ds-radius-pill: 999px;
  --ds-duration-fast: 0.22s;
  --ds-duration-hover: 0.28s;
  --ds-duration-ring: 0.38s;
  --ds-duration-letter-reveal: 1.2s;
  --ds-ease-letter-reveal: cubic-bezier(0.76, 0, 0.24, 1);
  --ds-duration-reveal: 1.25s;
  --ds-ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --ds-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ds-pointer-color: var(--ds-color-black);
  --ds-tooltip-background: var(--ds-color-ink);
  --ds-tooltip-color: var(--ds-color-white);
  --ds-choice-active-background: var(--ds-color-ink);
  --ds-choice-active-color: var(--ds-color-white);
  --ui-stroke: var(--ds-stroke);
  --g: var(--ds-page-gutter);
}
/* Context changes colors, never component dimensions or behavior. */
[data-ui-tone="dark"],
.menu-open,
.arena-footer,
.interior-page,
body.footer-header-light .site-header {
  --ds-pointer-color: var(--ds-color-white);
  --ds-tooltip-background: var(--ds-color-white);
  --ds-tooltip-color: var(--ds-color-black);
  --ds-choice-active-background: var(--ds-color-white);
  --ds-choice-active-color: var(--ds-color-black);
}

[data-ui-tone="light"] {
  --ds-pointer-color: var(--ds-color-black);
  --ds-tooltip-background: var(--ds-color-ink);
  --ds-tooltip-color: var(--ds-color-white);
}

/* Source: css/design-system/foundations/typography.css */
@font-face {
  font-family: Lexend;
  src: url("../fonts/Lexend-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Source: css/design-system/atoms/icon-control.css */
/* Atom: 42px target, 24px icon, 48px hover ring. Used across the entire home. */
.ui-icon-control {
  position: var(--ds-control-position, relative);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--ds-control-size);
  width: var(--ds-control-size);
  height: var(--ds-control-size);
  min-height: var(--ds-control-size);
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-round);
  background: none;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
}
.ui-icon-control > svg {
  display: block;
  flex: none;
  width: var(--ds-icon-size);
  height: var(--ds-icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--ds-stroke);
}
.ui-icon-control > svg * {
  vector-effect: non-scaling-stroke;
}
.ui-icon-control::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--ds-control-ring-size);
  height: var(--ds-control-ring-size);
  border: var(--ds-stroke) solid currentColor;
  border-radius: var(--ds-radius-round);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.82);
  transition:
    opacity var(--ds-duration-hover) ease,
    transform var(--ds-duration-ring) var(--ds-ease-out);
  pointer-events: none;
}
.ui-icon-control[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  padding: 7px 10px;
  border-radius: 4px;
  background: var(--ds-tooltip-background);
  color: var(--ds-tooltip-color);
  font: var(--ds-font-weight) 11px/1.3 var(--ds-font-sans);
  white-space: nowrap;
  opacity: 0;
  transform: translate(5px, -50%);
  transition:
    opacity var(--ds-duration-fast) ease,
    transform 0.3s ease;
  pointer-events: none;
  z-index: 2;
}
.ui-icon-control[data-tooltip-placement="right"]::after {
  left: calc(100% + 14px);
  right: auto;
  transform: translate(-5px, -50%);
}
.ui-icon-control:focus-visible {
  outline: none;
}
.ui-icon-control:focus-visible::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.ui-icon-control:focus-visible::after {
  opacity: 1;
  transform: translate(0, -50%);
}
@media (hover: hover) {
  .ui-icon-control:hover::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  .ui-icon-control:hover::after {
    opacity: 1;
    transform: translate(0, -50%);
  }
}
@media (max-width: 700px) {
  .ui-icon-control[data-tooltip]::after {
    font-size: 10px;
  }
  .ui-icon-control[data-tooltip-mobile="below"][data-tooltip]::after {
    top: calc(100% + 12px);
    right: 0;
    transform: translateY(-4px);
  }
  .ui-icon-control[data-tooltip-mobile="below"][data-tooltip-placement="right"]::after {
    left: 0;
    right: auto;
  }
  .ui-icon-control[data-tooltip-mobile="below"]:focus-visible::after {
    transform: translateY(0);
  }
}
@media (max-width: 700px) and (hover: hover) {
  .ui-icon-control[data-tooltip-mobile="below"]:hover::after {
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-icon-control::before,
  .ui-icon-control::after {
    transition: none;
  }
}

/* Source: css/design-system/atoms/text-control.css */
/* Atom: the same outlined text interaction in home, menu, footer and interior pages. */
.ui-text-control,
.ui-choice-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ds-choice-size);
  padding: 6px 10px;
  border: 0;
  border-radius: var(--ds-radius-pill);
  background: none;
  color: inherit;
  font: var(--ds-font-weight) var(--ds-text-control-font-size, 11px) / 1.4
    var(--ds-font-sans);
  letter-spacing: normal;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
}
.ui-text-control::before,
.ui-choice-control::before {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--ds-stroke) solid currentColor;
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity var(--ds-duration-hover) ease,
    transform var(--ds-duration-ring) var(--ds-ease-out);
  pointer-events: none;
}
.ui-text-control:focus-visible,
.ui-choice-control:focus-visible {
  outline: none;
}
.ui-text-control:focus-visible::before,
.ui-choice-control:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}
.ui-choice-control {
  width: var(--ds-choice-size);
  height: var(--ds-choice-size);
  min-width: var(--ds-choice-size);
  flex: 0 0 var(--ds-choice-size);
  padding: 0;
  border-radius: var(--ds-radius-round);
  color: var(--ds-color-muted);
}
.ui-choice-control[aria-pressed="true"] {
  background: var(--ds-choice-active-background);
  color: var(--ds-choice-active-color);
}
.ui-choice-control[aria-pressed="true"]::before {
  border-color: var(--ds-choice-active-background);
}
@media (hover: hover) {
  .ui-text-control:hover {
    text-decoration: none;
  }
  .ui-text-control:hover::before,
  .ui-choice-control:hover::before {
    opacity: 1;
    transform: scale(1);
  }
  .ui-choice-control:not([aria-pressed="true"]):hover {
    color: inherit;
  }
}
@media (max-width: 700px) {
  .ui-text-control {
    padding: 5px 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ui-text-control::before,
  .ui-choice-control::before {
    transition: none;
  }
}

/* Source: css/design-system/molecules/control-group.css */
/* Molecules arrange atoms; they never redefine their visual states. */
.ui-control-group {
  display: flex;
  align-items: center;
  gap: var(--ds-space-1);
  pointer-events: auto;
}
.social-links {
  justify-self: start;
  margin-left: -10px;
}
.language-switch {
  justify-self: end;
}
@media (max-width: 700px) {
  .social-links {
    gap: 0;
    margin-left: -6px;
  }
  .language-switch {
    gap: var(--ds-space-2);
  }
}

/* Source: css/design-system/molecules/bottom-bar.css */
/* One shared bottom bar: hero discovery cue or footer copyright in the center. */
.ui-bottom-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  min-height: var(--ds-control-size);
  gap: var(--ds-space-3);
  padding: 0;
}
.ui-bottom-bar__center {
  justify-self: center;
  text-align: center;
}
@media (max-width: 700px) {
  .ui-bottom-bar {
    gap: var(--ds-space-2);
  }
  /* The long legal line needs a second centered row; controls keep hero sizing. */
  .ui-bottom-bar--copyright {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .ui-bottom-bar--copyright > .social-links {
    grid-column: 1;
    grid-row: 1;
  }
  .ui-bottom-bar--copyright > .language-switch {
    grid-column: 2;
    grid-row: 1;
  }
  .ui-bottom-bar--copyright > .ui-bottom-bar__center {
    grid-column: 1/-1;
    grid-row: 2;
  }
}

/* Source: css/design-system/molecules/section-identifier.css */
/* Distributed section identity; content stays readable in its natural order. */
.section-identifier {
  font: var(--ds-font-weight) 12px/1 var(--ds-font-sans);
  text-transform: uppercase;
}
.section-identifier__letters {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.section-identifier__letters > span {
  --letter-progress: clamp(
    0,
    calc((var(--identifier-progress, 1) - var(--letter-delay, 0)) * 2),
    1
  );
  opacity: var(--letter-progress);
  translate: calc((1 - var(--letter-progress)) * 12px) 0;
}
@media (max-width: 700px) {
  .section-identifier {
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .section-identifier__letters > span {
    opacity: 1;
    translate: none;
  }
}

/* Source: css/design-system/motion/entry.css */
/* Entry primitives. Page choreography lives in its own controller. */
:root {
  --ds-motion-enter: 900ms;
  --ds-motion-material-out: 840ms;
  --ds-motion-material-in: 1200ms;
  --ds-motion-material-overlap-delay: 360ms;
  --ds-motion-compact: 520ms;
  --ds-motion-control: 650ms;
  --ds-motion-stagger: 70ms;
  --ds-motion-distance: 20px;
  --ds-motion-ease: var(--ds-ease-reveal);
}
.ds-motion-mask {
  display: block;
  overflow: clip;
  overflow-clip-margin: 0.1em;
}
.ds-motion-line {
  display: block;
}
@media (max-width: 700px) {
  :root {
    --ds-motion-distance: 14px;
  }
}
/* Only pre-paint preparation; the watchdog removes this if motion cannot start. */
html.hero-entry-pending [data-hero-enter] {
  visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  html.hero-entry-pending [data-hero-enter] {
    visibility: inherit;
  }
}

/* Source: css/design-system/utilities/accessibility.css */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}