/* =========================================================
   HOME: hero banner (light, large heading, skewed cover grid)
   ========================================================= */
.banner {
  position: relative;
  background: #fff;
  color: var(--ink);
  overflow: hidden;
}
.slides {
  display: grid;
}
.slide {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-items: center;
  overflow: hidden;
  min-height: clamp(440px, 46vw, 680px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--t-slide) var(--ease),
    visibility 0s var(--t-slide);
}
.slide.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
  z-index: 1;
}
.slide-copy {
  position: relative;
  z-index: 3;
  width: min(500px, 40%);
  margin-left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  padding-block: 48px 72px;
  display: grid;
  justify-items: start;
}
.hl-title {
  font: 700 clamp(1.9rem, 0.9rem + 3.3vw, 3.9rem) / 1.04 var(--f-display);
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.hl-title em {
  font-style: normal;
  color: var(--accent-on-light);
}
.hl-sub {
  font: 500 clamp(1.05rem, 0.85rem + 1vw, 1.875rem) / 1.2 var(--f-display);
  text-transform: none;
  color: var(--ink);
  margin-top: 18px;
}
.hl-text {
  color: var(--ink-2);
  max-width: 38ch;
  margin-top: 18px;
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 28px;
  margin-top: 32px;
  border: 2px solid var(--accent-on-light);
  border-radius: var(--r-l);
  color: var(--accent-on-light);
  font: 600 0.9375rem / 1 var(--f-body);
  background: transparent;
  transition:
    background var(--t-fast),
    color var(--t-fast);
}
.btn-outline:hover {
  background: var(--accent-on-light);
  color: #fff;
}
.btn-outline .arrow {
  width: 16px;
  height: 16px;
  transition: transform var(--t-fast) var(--ease);
}
.btn-outline:hover .arrow {
  transform: translateX(4px);
}

/* skewed cover grid: each cover keeps its own artwork and colours; the group bleeds off the right and bottom edges */
.slide-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  --tw: clamp(120px, 15.5vw, 236px);
}
.tilt {
  position: absolute;
  left: 62%;
  top: -30%;
  display: grid;
  grid-template-columns: repeat(3, var(--tw));
  gap: calc(var(--tw) * 0.14);
  transform-origin: 0 0;
  transform: matrix(0.956, 0.292, -0.537, 0.843, 0, 0);
}
.tile {
  aspect-ratio: 4 / 3;
  box-shadow: 10px 14px 26px rgba(20, 22, 27, 0.22);
  border-radius: var(--r-s);
}
.tile .media {
  height: 100%;
  border-radius: var(--r-s);
}
.tile .media-label {
  left: 8px;
  right: 8px;
  bottom: 8px;
  font-size: 0;
}
.tile .media-label b {
  font-size: clamp(0.6rem, 0.4rem + 0.6vw, 1.1rem);
  margin: 0;
}
.slide.is-active .tile {
  animation: tile-in 700ms var(--ease) both;
  animation-delay: calc(var(--i) * 45ms);
}
@keyframes tile-in {
  from {
    opacity: 0;
    translate: 0 18px;
  }
}

.b-btn {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 44px;
  height: 56px;
  margin-top: -28px;
  display: grid;
  place-items: center;
  background: rgba(20, 22, 27, 0.07);
  border: 0;
  color: var(--ink);
  transition:
    background var(--t-fast),
    color var(--t-fast);
}
.b-btn:hover {
  background: var(--accent);
  color: #fff;
}
.b-btn svg {
  width: 20px;
  height: 20px;
}
.b-prev {
  left: 0;
  border-radius: 0 var(--r-m) var(--r-m) 0;
}
.b-next {
  right: 0;
  border-radius: var(--r-m) 0 0 var(--r-m);
}
.b-bar {
  position: absolute;
  left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  bottom: 18px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 2px;
}
.b-dot {
  width: 26px;
  height: 44px;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
}
.b-dot::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: #d5d8de;
  transition:
    background var(--t-fast),
    width var(--t-card) var(--ease);
}
.b-dot[aria-current="true"]::before {
  background: var(--accent);
  width: 26px;
}
.b-dot:hover::before {
  background: var(--ink-2);
}
.b-dot[aria-current="true"]:hover::before {
  background: var(--accent);
}
.b-pause {
  width: 44px;
  height: 44px;
  margin-left: 12px;
  border: 1.5px solid var(--ink-2);
  border-radius: var(--r-m);
  background: #fff;
  color: var(--ink);
  display: grid;
  place-items: center;
  transition:
    background var(--t-fast),
    color var(--t-fast);
}
.b-pause:hover {
  background: var(--ink);
  color: #fff;
}
.b-pause svg {
  width: 14px;
  height: 14px;
}
.b-pause .i-play {
  display: none;
}
.b-pause[aria-pressed="true"] .i-play {
  display: block;
}
.b-pause[aria-pressed="true"] .i-pause {
  display: none;
}
.b-pause[hidden] {
  display: none;
}
.banner :focus-visible {
  outline-color: var(--accent-on-light);
}

@media (max-width: 800px) {
  .slide {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
  }
  .slide-copy {
    width: auto;
    margin: 0;
    padding: 36px var(--gutter) 8px;
  }
  .slide-art {
    position: relative;
    inset: auto;
    height: clamp(250px, 70vw, 360px);
    --tw: 34vw;
  }
  .tilt {
    left: -4%;
    top: -46%;
  }
  .b-btn {
    top: auto;
    bottom: 150px;
    margin-top: 0;
  }
  .b-bar {
    position: relative;
    left: auto;
    bottom: auto;
    padding: 4px var(--gutter) 14px;
    background: #fff;
  }
}

/* ---------- Provider introduction (light) ---------- */
.intro {
  background: var(--light);
  color: var(--ink);
  padding-block: clamp(40px, 5vw, 88px);
}
.intro-grid {
  align-items: end;
  row-gap: 24px;
}
.intro h1 {
  grid-column: 1 / span 7;
  color: var(--ink);
}
.intro-copy {
  grid-column: 9 / -1;
  display: grid;
  gap: 20px;
}
.intro-copy p {
  color: var(--ink-2);
  font-size: var(--fs-lede);
  line-height: 1.5;
}
.intro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.intro .btn-ghost {
  border-color: var(--ink);
  color: var(--ink);
}
.intro .btn-ghost:hover {
  background: var(--ink);
  color: #fff;
}
.intro-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.intro-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
}
.intro-links a:hover {
  color: var(--accent-on-light);
  border-color: var(--accent-on-light);
}
.intro-links .arrow {
  width: 14px;
  height: 14px;
}
@media (max-width: 1000px) {
  .intro h1,
  .intro-copy {
    grid-column: 1 / -1;
  }
}

/* ---------- Game catalogue preview (dark) ---------- */
.preview {
  background: var(--bg);
}
.preview-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 12px 32px;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.cover-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(12px, 1.6vw, 24px) var(--gap);
}
@media (max-width: 1000px) {
  .cover-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  .cover-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 12px;
  }
}

/* shared game card */
.game-card {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  color: inherit;
  transition: transform var(--t-card) var(--ease);
}
.game-card:hover {
  transform: translateY(-4px);
}
.game-card .media {
  aspect-ratio: 4 / 3;
}
.game-card:hover .media img {
  transform: scale(1.04);
}
.game-card .meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 12px 2px 0;
}
.game-card .meta b {
  font: 700 1.0625rem / 1.2 var(--f-display);
}
.game-card .meta span {
  font-size: var(--fs-small);
  color: var(--text-2);
}

/* ---------- Featured-game editorial (the game's own palette, one solid colour) ---------- */
.editorial {
  background: color-mix(in srgb, var(--g) 42%, #0c0e13);
  color: #fff;
  padding-block: clamp(48px, 6vw, 112px);
  overflow: hidden;
}
.ed-grid {
  align-items: center;
  row-gap: 32px;
}
.ed-shot {
  grid-column: 1 / span 7;
  position: relative;
}
.ed-shot .media {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-m);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.6);
}
.ed-cover {
  position: absolute;
  right: -6%;
  bottom: -12%;
  width: clamp(110px, 16%, 190px);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
  border-radius: var(--r-s);
}
.ed-cover .media {
  aspect-ratio: 3 / 4;
}
.ed-copy {
  grid-column: 9 / -1;
  display: grid;
  gap: 16px;
  justify-items: start;
}
.ed-copy .eyebrow {
  color: #fff;
  opacity: 0.8;
}
.ed-copy h2 {
  font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem);
  line-height: 1;
}
.ed-copy p {
  color: rgba(255, 255, 255, 0.9);
}
.ed-copy .checks li {
  color: rgba(255, 255, 255, 0.9);
}
.ed-copy .checks li::before {
  border-color: #fff;
}
.ed-copy .link-arrow {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 1000px) {
  .ed-shot,
  .ed-copy {
    grid-column: 1 / -1;
  }
  .ed-cover {
    right: 4%;
    bottom: -10%;
  }
  .ed-copy {
    margin-top: 28px;
  }
}

/* ---------- Solutions rows (light, typographic, no cards) ---------- */
.solutions {
  background: var(--light);
  color: var(--ink);
}
.sol-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px clamp(32px, 7vw, 120px);
  padding-block: clamp(32px, 4vw, 64px);
  border-top: 1px solid var(--line-light);
  align-items: start;
}
.sol-row:first-of-type {
  border-top: 0;
}
.sol-row.flip .sol-main {
  order: 2;
}
.sol-main {
  display: grid;
  gap: 18px;
  justify-items: start;
}
.sol-main h2 {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);
  color: var(--ink);
}
.sol-main p {
  color: var(--ink-2);
  font-size: var(--fs-lede);
}
.sol-list {
  display: grid;
}
.sol-list li {
  padding: 18px 0;
  border-top: 1px solid var(--line-light);
  display: grid;
  gap: 2px;
}
.sol-list li:first-child {
  border-top: 0;
  padding-top: 4px;
}
.sol-list b {
  font: 700 1.125rem / 1.3 var(--f-display);
  color: var(--ink);
}
.sol-list span {
  color: var(--ink-2);
}
@media (max-width: 800px) {
  .sol-row {
    grid-template-columns: 1fr;
  }
  .sol-row.flip .sol-main {
    order: 0;
  }
}

/* ---------- Partner support (dark, plain columns) ---------- */
.support {
  background: var(--bg-2);
}
.support-list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
}
.support-list li {
  padding: 24px 24px 8px 0;
  display: grid;
  gap: 8px;
  align-content: start;
}
.support-list li + li {
  padding-left: 24px;
  border-left: 1px solid var(--line);
}
.support-list b {
  font: 700 1.125rem / 1.3 var(--f-display);
}
.support-list span {
  color: var(--text-2);
  font-size: 0.9688rem;
}
@media (max-width: 1100px) {
  .support-list {
    grid-template-columns: repeat(3, 1fr);
  }
  .support-list li:nth-child(4) {
    padding-left: 0;
    border-left: 0;
  }
}
@media (max-width: 900px) {
  .support-list {
    grid-template-columns: 1fr 1fr;
  }
  .support-list li {
    padding: 20px 16px 12px 0;
  }
  .support-list li + li {
    padding-left: 0;
    border-left: 0;
  }
  .support-list li:nth-child(even) {
    padding-left: 16px;
    border-left: 1px solid var(--line);
  }
}
@media (max-width: 520px) {
  .support-list {
    grid-template-columns: 1fr;
  }
  .support-list li:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }
  .support-list li {
    border-top: 1px solid var(--line);
  }
  .support-list li:first-child {
    border-top: 0;
  }
}

/* =========================================================
   Games catalogue
   ========================================================= */
.toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 14px 24px;
  align-items: end;
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.field label,
.field .lbl {
  display: block;
  font-size: var(--fs-small);
  color: var(--text-2);
  margin-bottom: 8px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 16px;
  border-radius: var(--r-m);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: var(--bg);
  font-size: 1rem;
  transition: border-color var(--t-fast);
}
.field textarea {
  min-height: 150px;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent-text);
  box-shadow: 0 0 0 3px rgba(255, 122, 107, 0.25);
}
.field [aria-invalid="true"] {
  border-color: #ff8a8a;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--r-m);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
  font-size: 0.9375rem;
  transition:
    background var(--t-fast),
    border-color var(--t-fast),
    color var(--t-fast);
}
.chip:hover {
  border-color: #fff;
}
.chip[aria-pressed="true"] {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.result-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  color: var(--text-2);
}
.result-bar button {
  background: none;
  border: 0;
  color: var(--accent-text);
  font-weight: 600;
  min-height: 44px;
  padding: 0 4px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.cat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px var(--gap);
}
.empty {
  text-align: center;
  padding: 72px 20px;
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: var(--r-m);
}
.empty h3 {
  margin-bottom: 10px;
}
.empty p {
  margin: 0 auto 22px;
}
[hidden] {
  display: none !important;
}
@media (max-width: 1200px) {
  .cat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 1000px) {
  .cat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 720px) {
  .cat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
  }
  .toolbar {
    grid-template-columns: 1fr;
  }
}

/* quick view: opens and closes with a short fade and rise */
dialog.qv {
  width: min(1000px, calc(100% - 24px));
  max-height: calc(100svh - 24px);
  padding: 0;
  border: 0;
  border-radius: var(--r-l);
  background: var(--surface);
  overflow: auto;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--t-card) var(--ease),
    transform var(--t-card) var(--ease);
}
dialog.qv.is-open {
  opacity: 1;
  transform: none;
}
dialog.qv::backdrop {
  background: rgba(4, 5, 8, 0.78);
  opacity: 0;
  transition: opacity var(--t-card);
}
dialog.qv.is-open::backdrop {
  opacity: 1;
}
.qv-in {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: stretch;
}
.qv-art {
  background: #000;
  display: grid;
  align-content: start;
}
.qv-art .media {
  border-radius: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
}
.qv-body {
  padding: clamp(24px, 3vw, 44px);
  display: grid;
  gap: 14px;
  align-content: center;
}
.qv-body h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem);
}
.qv-body p {
  color: var(--text-2);
}
.qv-shot {
  margin: 4px 0;
}
.qv-shot .media {
  aspect-ratio: 16 / 9;
}
.qv-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: var(--r-m);
  border: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  transition: background var(--t-fast);
}
.qv-close:hover {
  background: var(--accent);
}
@media (max-width: 720px) {
  .qv-in {
    grid-template-columns: 1fr;
  }
}

.detail {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(20px, 3vw, 56px);
  padding-block: clamp(28px, 4vw, 52px);
  border-top: 1px solid var(--line-light);
  align-items: start;
}
.detail .media {
  aspect-ratio: 4 / 3;
}
.detail h3 {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem);
  margin-bottom: 12px;
}
.detail .feat-tags {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--r-s);
  font-size: var(--fs-small);
  background: rgba(20, 22, 27, 0.08);
  color: var(--ink);
  transition: background var(--t-fast);
}
.tag:hover {
  background: rgba(20, 22, 27, 0.16);
}
@media (max-width: 720px) {
  .detail {
    grid-template-columns: 110px 1fr;
  }
  .detail .body {
    grid-column: 1 / -1;
  }
}

.reasons {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}
.reason {
  padding-top: 20px;
  border-top: 2px solid #fff;
}
.reason:nth-child(1) {
  grid-column: span 5;
}
.reason:nth-child(2) {
  grid-column: span 4;
}
.reason:nth-child(3) {
  grid-column: span 3;
}
.reason:nth-child(4) {
  grid-column: 3 / span 5;
}
.reason h3 {
  margin-bottom: 10px;
  font-size: 1.375rem;
}
.reason p {
  color: var(--text-2);
}
@media (max-width: 900px) {
  .reasons {
    grid-template-columns: 1fr;
  }
  .reason:nth-child(n) {
    grid-column: auto;
  }
}

/* =========================================================
   Bonus features page (.is-bonus): white editorial layout, dark bands, layered supplied game artwork
   ========================================================= */
.bf-art {
  display: block;
  overflow: hidden;
  border-radius: 6px;
  background: color-mix(in srgb, var(--tone, #2a74c9) 40%, #0c0e13);
  box-shadow:
    0 34px 56px -26px rgba(12, 14, 19, 0.6),
    0 0 0 1px rgba(12, 14, 19, 0.1);
}
.bf-art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.bf-layer {
  position: absolute;
  display: block;
  translate: calc(var(--mx, 0) * var(--d, 10) * 1px) calc(var(--my, 0) * var(--d, 10) * 1px);
  transition: translate 0.6s var(--ease);
}

/* ---------- hero ---------- */
.bf-hero {
  background: #fff;
  overflow: hidden;
  padding: clamp(40px, 4vw, 64px) 0 clamp(56px, 6vw, 104px);
}
.bf-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.bf-hero-copy {
  display: grid;
  justify-items: start;
  position: relative;
  z-index: 2;
}
.bf-hero .breadcrumb {
  margin-bottom: clamp(20px, 3vw, 40px);
}
.is-home main .bf-hero h1 {
  font-size: clamp(2.3rem, 1rem + 3.7vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.018em;
  max-width: 13ch;
  text-wrap: balance;
}
.bf-hero .lede {
  margin-top: 24px;
  max-width: 46ch;
}
.bf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.is-home main .bf-hero .btn-ghost {
  border-color: var(--ink);
  color: var(--ink);
}
.is-home main .bf-hero .btn-ghost:hover {
  background: var(--ink);
  color: #fff;
}
.bf-hero-art {
  position: relative;
  aspect-ratio: 6 / 5;
  margin-right: calc(var(--gutter) * -0.6);
}
.bf-hero-art .bf-layer {
  --k: 0;
}
.bf-hero-art .bf-art {
  animation: bf-rise 0.95s var(--ease) both;
  animation-delay: calc(0.2s + var(--k) * 0.12s);
}
.bf-h1 {
  left: 0;
  top: 6%;
  width: 46%;
  rotate: -5deg;
  z-index: 1;
  --d: 6;
  --k: 1;
}
.bf-h2 {
  right: 4%;
  top: 0;
  width: 44%;
  rotate: 4deg;
  z-index: 2;
  --d: 9;
  --k: 2;
}
.bf-h0 {
  left: 14%;
  top: 25%;
  width: 66%;
  z-index: 3;
  --d: 14;
  --k: 0;
}
.bf-h0 .bf-art {
  box-shadow:
    0 44px 70px -26px rgba(12, 14, 19, 0.7),
    0 0 0 1px rgba(12, 14, 19, 0.1);
}
.bf-h3 {
  right: 0;
  bottom: 0;
  width: 34%;
  rotate: 5deg;
  z-index: 4;
  --d: 22;
  --k: 3;
}
.bf-h4 {
  left: 0;
  bottom: 3%;
  width: 32%;
  rotate: -4deg;
  z-index: 4;
  --d: 22;
  --k: 4;
}
@keyframes bf-rise {
  from {
    opacity: 0;
    translate: 0 28px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
.bf-hero [data-stage] {
  animation: bf-rise 0.8s var(--ease) both;
  animation-delay: calc(var(--i) * 0.1s);
}

/* ---------- sticky feature strip ---------- */
.bf-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--line-light);
}
.bf-nav ol {
  position: relative;
  display: flex;
  gap: clamp(0px, 1.6vw, 24px);
  overflow-x: auto;
  scrollbar-width: none;
  justify-content: safe center;
}
.bf-nav ol::-webkit-scrollbar {
  display: none;
}
.bf-nav li {
  flex: 0 0 auto;
}
.bf-nav a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-height: 56px;
  align-items: center;
  padding: 0 14px;
  color: var(--ink-2);
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--t-fast);
}
.bf-nav a:hover,
.bf-nav a.is-active {
  color: var(--ink);
}
.bf-n {
  font-size: 0.75rem;
  color: var(--accent-on-light);
  font-variant-numeric: tabular-nums;
}
.bf-nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
  border-radius: 4px;
}
.bf-nav .bf-mark {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
  transition:
    translate 0.4s var(--ease),
    width 0.4s var(--ease),
    opacity 0.2s;
}

/* ---------- feature sections ---------- */
.bf-feature {
  padding-block: clamp(64px, 8vw, 140px);
  scroll-margin-top: 56px;
  overflow-x: clip;
}
.bf-dark {
  background: #0c0e13;
  color: #f4f5f7;
}
.bf-white {
  background: #fff;
}
.bf-stone {
  background: var(--light);
}
.bf-wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 104px);
  align-items: center;
}
.bf-text,
.bf-visual {
  min-width: 0;
}
.bf-num {
  display: block;
  font: 700 clamp(4rem, 2.5rem + 5vw, 7.5rem) / 0.8 var(--f-display);
  letter-spacing: -0.04em;
  color: rgba(20, 22, 27, 0.1);
  margin-bottom: 0.1em;
}
.bf-dark .bf-num {
  color: rgba(255, 255, 255, 0.14);
}
.is-home main .bf-feature h2 {
  font-size: clamp(2rem, 1.1rem + 2.8vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin-bottom: 22px;
  max-width: 15ch;
  text-wrap: balance;
}
.bf-text p {
  max-width: 52ch;
  color: var(--ink-2);
}
.bf-text p + p {
  margin-top: 14px;
}
.bf-text p:first-of-type {
  color: var(--ink);
}
.bf-dark .bf-text p {
  color: #b9c0cc;
}
.bf-dark .bf-text p:first-of-type {
  color: #f4f5f7;
}
.is-home main .bf-dark h2 {
  color: #fff;
}

/* games with this feature */
.bf-games {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--line-light);
}
.bf-dark .bf-games {
  border-color: rgba(255, 255, 255, 0.18);
}
.is-home main .bf-games h3 {
  font: 600 0.78rem / 1.2 var(--f-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 14px;
}
.is-home main .bf-dark .bf-games h3 {
  color: #a9b0bd;
}
.bf-games ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
}
.bf-g {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9375rem;
}
.bf-dark .bf-g {
  color: #fff;
}
.bf-g-img {
  display: block;
  width: 64px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 3px;
  background: color-mix(in srgb, var(--tone, #2a74c9) 45%, #0c0e13);
  box-shadow: 0 6px 12px -6px rgba(12, 14, 19, 0.5);
  flex: none;
}
.bf-g-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.4s var(--ease);
}
.bf-g-img.is-empty {
  background: repeating-linear-gradient(135deg, rgba(120, 128, 140, 0.25) 0 6px, rgba(120, 128, 140, 0.12) 6px 12px);
  box-shadow: none;
}
a.bf-g:hover img,
a.bf-g:focus-visible img {
  scale: 1.12;
}
a.bf-g:hover .bf-g-name,
a.bf-g:focus-visible .bf-g-name {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
a.bf-g:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}
.bf-g.is-static {
  color: var(--ink-2);
  font-weight: 500;
  cursor: default;
}
.bf-dark .bf-g.is-static {
  color: #a9b0bd;
}

/* artwork stages: layered supplied covers, a different arrangement per feature */
.bf-stage {
  position: relative;
  aspect-ratio: 5 / 4;
}
.bf-stage .bf-art {
  width: 100%;
}
.bf-stage img {
  scale: 1.07;
  translate: 0 var(--dy, 0px);
}
.bf-stage .bf-layer {
  z-index: 1;
}

/* 01 jackpot: dark, one large cover and one overlapping, bleeding past the column */
.bf-f-jackpot .bf-visual {
  margin-right: calc(var(--gutter) * -0.8);
}
.bf-f-jackpot .bf-a {
  left: 4%;
  top: 0;
  width: 76%;
}
.bf-f-jackpot .bf-b {
  right: 0;
  bottom: 0;
  width: 54%;
  z-index: 2;
}
.bf-f-jackpot .bf-b .bf-art {
  box-shadow:
    0 0 0 6px #0c0e13,
    0 34px 56px -20px rgba(0, 0, 0, 0.8);
}
.bf-f-jackpot .bf-art {
  box-shadow: 0 40px 70px -24px rgba(0, 0, 0, 0.85);
}

/* 02 free spins: image left, fanned stack suggesting base play opening into a bonus round */
.bf-f-free-spins .bf-visual {
  order: -1;
}
.bf-f-free-spins .bf-wrap {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}
.bf-f-free-spins .bf-a {
  left: 0;
  top: 16%;
  width: 52%;
  rotate: -7deg;
}
.bf-f-free-spins .bf-b {
  left: 22%;
  top: 4%;
  width: 54%;
  rotate: -2deg;
  z-index: 2;
}
.bf-f-free-spins .bf-c {
  left: 44%;
  top: 28%;
  width: 56%;
  rotate: 4deg;
  z-index: 3;
}

/* 03 wilds: stone, one large cover with a magnified detail of the same artwork */
.bf-f-wilds .bf-a {
  right: 0;
  top: 0;
  width: 88%;
}
.bf-f-wilds .bf-zoom {
  left: 0;
  bottom: -4%;
  width: 44%;
  z-index: 2;
}
.bf-f-wilds .bf-zoom .bf-art {
  box-shadow:
    0 0 0 6px var(--light),
    0 30px 50px -22px rgba(12, 14, 19, 0.6);
}
.bf-f-wilds .bf-zoom img {
  scale: 2.3;
  transform-origin: 46% 46%;
}

/* 04 scatters: white and spacious, text above, a wide row of covers below */
.bf-f-scatters .bf-wrap {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
}
.bf-f-scatters .bf-text {
  max-width: 640px;
}
.bf-f-scatters .bf-visual {
  margin-right: calc(var(--gutter) * -1);
}
.bf-f-scatters .bf-stage {
  aspect-ratio: 16 / 6.4;
}
.bf-f-scatters .bf-a {
  left: 0;
  top: 8%;
  width: 34%;
}
.bf-f-scatters .bf-b {
  left: 31%;
  top: 0;
  width: 36%;
  z-index: 2;
}
.bf-f-scatters .bf-c {
  left: 64%;
  top: 14%;
  width: 36%;
  z-index: 3;
}

/* 05 multipliers: dark and bold, a large typographic cross behind the artwork */
.bf-f-multipliers .bf-visual {
  order: -1;
}
.bf-f-multipliers .bf-wrap {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}
.bf-f-multipliers .bf-stage::before {
  content: "\00d7";
  position: absolute;
  right: -2%;
  top: -22%;
  z-index: 0;
  font: 700 clamp(14rem, 30vw, 32rem) / 1 var(--f-display);
  color: var(--accent);
}
.bf-f-multipliers .bf-a {
  left: 0;
  top: 8%;
  width: 78%;
  z-index: 2;
}
.bf-f-multipliers .bf-b {
  right: 0;
  bottom: -2%;
  width: 50%;
  z-index: 3;
}
.bf-f-multipliers .bf-b .bf-art {
  box-shadow:
    0 0 0 6px #0c0e13,
    0 34px 56px -20px rgba(0, 0, 0, 0.8);
}

/* 06 pick bonuses: three upright crops, the middle one raised, like items to choose between */
.bf-f-pick-bonuses .bf-stage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3.5%;
  aspect-ratio: auto;
  align-items: start;
  padding-bottom: 8%;
}
.bf-f-pick-bonuses .bf-layer {
  position: static;
}
.bf-f-pick-bonuses .bf-art img {
  aspect-ratio: 3 / 4.2;
}
.bf-f-pick-bonuses .bf-b {
  margin-top: -9%;
  margin-bottom: 9%;
}
.bf-f-pick-bonuses .bf-c {
  margin-top: 9%;
}

/* ---------- why it works: heading left, four editorial rows ---------- */
.bf-why {
  background: #fff;
  padding-block: clamp(72px, 9vw, 152px);
}
.bf-why-in {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 120px);
  align-items: start;
}
.bf-why-head {
  position: sticky;
  top: calc(var(--header-h) + 32px);
}
.is-home main .bf-why h2 {
  font-size: clamp(2rem, 1.1rem + 2.8vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 14px 0 22px;
}
.bf-why-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(16px, 3vw, 48px);
  padding-block: clamp(26px, 3vw, 44px);
  border-top: 1px solid var(--line-light);
}
.bf-why-row:last-child {
  border-bottom: 1px solid var(--line-light);
}
.is-home main .bf-why-row h3 {
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
  line-height: 1.15;
}
.bf-why-row p {
  color: var(--ink-2);
  max-width: 48ch;
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .bf-hero-in,
  .bf-wrap,
  .bf-f-free-spins .bf-wrap,
  .bf-f-multipliers .bf-wrap,
  .bf-why-in {
    grid-template-columns: minmax(0, 1fr);
  }
  .bf-hero-art {
    margin-right: 0;
    order: 2;
  }
  .is-home main .bf-hero h1 {
    max-width: none;
  }
  .bf-f-free-spins .bf-visual,
  .bf-f-multipliers .bf-visual {
    order: 0;
  }
  .bf-f-jackpot .bf-visual,
  .bf-f-scatters .bf-visual {
    margin-right: 0;
  }
  .bf-why-head {
    position: static;
  }
  .bf-f-scatters .bf-stage {
    aspect-ratio: 16 / 9;
  }
  .bf-f-multipliers .bf-stage::before {
    font-size: 16rem;
    top: -10%;
  }
}
@media (max-width: 600px) {
  .bf-nav a {
    padding: 0 12px;
  }
  .bf-why-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .bf-feature {
    padding-block: 56px;
  }
}
@media (hover: none), (pointer: coarse) {
  .bf-layer {
    translate: 0 0;
  }
}

/* =========================================================
   Solutions / API / Kiosk / Partners / About / Contact
   ========================================================= */
.entry-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--line);
}
.entry {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: clamp(24px, 3vw, 44px) clamp(0px, 2vw, 32px) clamp(24px, 3vw, 44px) 0;
  transition: background var(--t-fast);
}
.entry + .entry {
  padding-left: clamp(24px, 3vw, 44px);
  border-left: 1px solid var(--line);
}
.entry h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 3rem);
}
.entry p {
  color: var(--text-2);
}
.entry .link-arrow {
  justify-self: start;
}
.entry:hover h2 {
  color: var(--accent-text);
}
.on-light .entry {
  border-color: var(--line-light);
}
.on-light .entry p {
  color: var(--ink-2);
}
@media (max-width: 800px) {
  .entry-pair {
    grid-template-columns: 1fr;
  }
  .entry + .entry {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

.cap-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 var(--gap);
}
.cap {
  grid-column: span 4;
  padding: 24px 0 28px;
  border-top: 1px solid var(--line);
}
.cap:nth-child(1),
.cap:nth-child(2) {
  grid-column: span 6;
}
.cap h3 {
  font-size: 1.375rem;
  margin-bottom: 8px;
}
.cap p {
  color: var(--text-2);
}
.on-light .cap {
  border-color: var(--line-light);
}
@media (max-width: 800px) {
  .cap:nth-child(n) {
    grid-column: 1 / -1;
  }
}

.wallet {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  margin-bottom: 40px;
}
.switch {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--r-m);
  margin-bottom: 20px;
  overflow: hidden;
}
.switch button {
  min-height: 44px;
  padding: 0 22px;
  border: 0;
  background: none;
  font-weight: 600;
  transition:
    background var(--t-fast),
    color var(--t-fast);
}
.switch button[aria-selected="true"] {
  background: #fff;
  color: var(--ink);
}
.wallet-text h3 {
  margin-bottom: 10px;
}
.wallet-text p {
  color: var(--text-2);
}
.wallet-fig {
  margin: 0;
  padding: clamp(16px, 2vw, 28px);
  background: var(--surface);
  border-radius: var(--r-m);
}
.wallet-fig svg {
  width: 100%;
  height: auto;
}
.wallet-fig text,
.flow-svg text {
  font-family: var(--f-body);
  fill: #fff;
}
.wallet-fig .sub,
.flow-svg .sub {
  fill: var(--text-2);
  font-size: 13px;
}
.wallet-fig .lbl,
.flow-svg .lbl {
  font: 700 16px var(--f-display);
}
.wallet-fig .node,
.flow-svg .node {
  fill: var(--bg);
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 1.5;
}
.wallet-fig .arrow-l {
  stroke: var(--accent-text);
  stroke-width: 2.5;
  fill: none;
  marker-end: url(#ah);
}
.wallet-fig .bal {
  fill: rgba(255, 122, 107, 0.14);
  stroke: var(--accent-text);
  stroke-width: 1.5;
}
.wallet-fig [data-model] {
  transition: opacity var(--t-card);
}
.wallet-fig[data-active="seamless"] [data-model="transfer"],
.wallet-fig[data-active="transfer"] [data-model="seamless"] {
  opacity: 0;
  pointer-events: none;
}
.wallet-fig figcaption {
  margin-top: 12px;
  font-size: var(--fs-small);
  color: var(--text-2);
}
@media (max-width: 900px) {
  .wallet {
    grid-template-columns: 1fr;
  }
}

.reqs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 var(--gap);
}
@media (max-width: 800px) {
  .reqs {
    grid-template-columns: 1fr;
  }
}

/* integration story (API page): sticky diagram, stages update as they cross the reading line */
.story {
  align-items: start;
  row-gap: 32px;
}
.story-fig {
  grid-column: 1 / span 6;
  position: sticky;
  top: calc(var(--header-h) + 32px);
}
.story-fig figure {
  margin: 0;
  padding: clamp(16px, 2vw, 28px);
  background: var(--surface);
  border-radius: var(--r-m);
}
.story-fig figcaption {
  margin-top: 14px;
  font-size: var(--fs-small);
  color: var(--text-2);
}
.story-stages {
  grid-column: 8 / -1;
}
.stage-item {
  min-height: 56svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding-block: 24px;
  transition: opacity var(--t-card) var(--ease);
}
.js .stage-item {
  opacity: 0.45;
}
.js .stage-item.is-active {
  opacity: 1;
}
.stage-item:last-of-type {
  min-height: auto;
  padding-bottom: 8px;
}
.stage-item .n {
  font: 700 0.9375rem / 1 var(--f-display);
  color: var(--accent-text);
}
.stage-item h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
}
.stage-item p {
  color: var(--text-2);
}
.story-cta {
  margin-top: 16px;
}
.flow-svg {
  width: 100%;
  height: auto;
}
.flow-svg .link {
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 4 6;
}
.flow-svg [data-from] {
  opacity: 0.22;
  transition: opacity var(--t-card) var(--ease);
}
.story-fig[data-stage="1"] [data-from="1"],
.story-fig[data-stage="2"] [data-from="1"],
.story-fig[data-stage="2"] [data-from="2"],
.story-fig[data-stage="3"] [data-from="1"],
.story-fig[data-stage="3"] [data-from="2"],
.story-fig[data-stage="3"] [data-from="3"],
.story-fig[data-stage="4"] [data-from] {
  opacity: 1;
}
.story-fig[data-stage="3"] .link,
.story-fig[data-stage="4"] .link {
  stroke: var(--accent-text);
  stroke-dasharray: none;
}
.flow-svg .accent {
  stroke: var(--accent-text);
}
.flow-svg .doc {
  stroke: #fff;
  fill: rgba(255, 255, 255, 0.06);
}
@media (max-width: 900px) {
  .stage-item {
    min-height: 0;
    padding-block: 28px;
  }
  .story-fig {
    position: static;
    grid-column: 1 / -1;
  }
  .story-stages {
    grid-column: 1 / -1;
  }
}

.hier {
  display: grid;
  justify-items: center;
  padding: clamp(20px, 3vw, 40px);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--bg-2);
}
.hier-level {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  max-width: 360px;
  padding: 18px 28px;
  border-radius: var(--r-m);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: var(--surface);
}
.hier-level b {
  font: 700 1.125rem / 1.2 var(--f-display);
}
.hier-level span {
  color: var(--text-2);
  font-size: 0.9375rem;
}
.hier-level.l1 {
  border-color: var(--accent-text);
}
.hier-link {
  width: 2px;
  height: 28px;
  background: var(--accent-text);
  position: relative;
}
.hier-link::after {
  content: "credit passes down";
  position: absolute;
  left: 14px;
  top: 4px;
  white-space: nowrap;
  font-size: 0.75rem;
  color: var(--text-2);
}
.hier-note {
  margin-top: 20px;
  font-size: var(--fs-small);
  color: var(--text-2);
  text-align: center;
  max-width: 52ch;
}

/* agent interface illustration (kiosk page) */
.agent {
  align-items: center;
  row-gap: 36px;
}
.agent-ui {
  grid-column: 1 / span 7;
}
.agent-copy {
  grid-column: 9 / -1;
}
.ui-mock {
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--bg-2);
  overflow: hidden;
}
.ui-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.ui-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #323846;
}
.ui-bar span {
  margin-left: 8px;
  font-size: var(--fs-small);
  color: var(--text-2);
}
.ui-body {
  display: grid;
  grid-template-columns: 150px 1fr;
  min-height: 330px;
}
.ui-nav {
  padding: 16px 12px;
  border-right: 1px solid var(--line);
  display: grid;
  gap: 10px;
  align-content: start;
}
.ui-nav b {
  display: block;
  height: 10px;
  border-radius: 2px;
  background: #2a303c;
}
.ui-nav b:first-child {
  width: 60%;
  background: #3a4150;
  margin-bottom: 8px;
}
.ui-main {
  padding: 16px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 14px;
}
.ui-panel {
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  padding: 12px;
  background: var(--bg);
  transition:
    border-color var(--t-card),
    background var(--t-card);
}
.ui-panel h4 {
  font: 600 0.8125rem / 1 var(--f-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-2);
  margin-bottom: 12px;
}
.ui-panel.is-hl {
  border-color: var(--accent-text);
  background: rgba(255, 122, 107, 0.07);
}
.ui-rows {
  display: grid;
  gap: 8px;
}
.ui-rows b {
  height: 9px;
  border-radius: 2px;
  background: #2a303c;
}
.ui-rows b:nth-child(odd) {
  width: 92%;
}
.ui-rows b:nth-child(even) {
  width: 68%;
}
.ui-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 70px;
}
.ui-bars b {
  flex: 1;
  background: #2f3646;
}
.ui-tree {
  display: grid;
  justify-items: center;
  gap: 8px;
}
.ui-tree .row {
  display: flex;
  gap: 10px;
}
.ui-tree b {
  width: 28px;
  height: 14px;
  border-radius: 2px;
  background: #2f3646;
}
.ui-note {
  margin-top: 12px;
  font-size: var(--fs-small);
  color: var(--text-2);
}
.cap-list {
  display: grid;
  gap: 8px;
  margin: 24px 0 8px;
}
.cap-list button {
  text-align: left;
  padding: 14px 16px;
  border-radius: var(--r-m);
  border: 1px solid var(--line);
  background: transparent;
  transition:
    border-color var(--t-fast),
    background var(--t-fast);
  display: grid;
  gap: 4px;
  min-height: 44px;
}
.cap-list button b {
  font: 700 1rem / 1.3 var(--f-display);
}
.cap-list button span {
  font-size: 0.875rem;
  color: var(--text-2);
}
.cap-list button:hover {
  border-color: rgba(255, 255, 255, 0.4);
}
.cap-list button[aria-pressed="true"] {
  border-color: var(--accent-text);
  background: rgba(255, 122, 107, 0.07);
}
.has-shot .ui-mock,
.has-shot .ui-note {
  display: none;
}
@media (max-width: 1000px) {
  .agent-ui,
  .agent-copy {
    grid-column: 1 / -1;
  }
  .ui-body {
    grid-template-columns: 1fr;
  }
  .ui-nav {
    display: none;
  }
  .ui-main {
    grid-template-columns: 1fr;
  }
}

/* regional map (partners page) */
.region {
  align-items: center;
  row-gap: 32px;
}
.region-copy {
  grid-column: 1 / span 5;
}
.region-map {
  grid-column: 7 / -1;
}
.map-card {
  background: var(--bg-2);
  border-radius: var(--r-m);
  padding: clamp(8px, 1.5vw, 20px);
}
.map-svg {
  width: 100%;
  height: auto;
  max-height: 78svh;
}
.map-svg .c {
  fill: #232834;
  stroke: var(--bg-2);
  stroke-width: 1;
  transition: fill var(--t-card);
}
.map-svg .c.hl {
  fill: #7a2a26;
}
.map-svg .c.hl.is-on {
  fill: var(--accent);
}
.map-svg .pin {
  fill: #fff;
  stroke: var(--bg-2);
  stroke-width: 2;
}
.map-svg text {
  font: 700 17px var(--f-display);
  fill: #fff;
  paint-order: stroke;
  stroke: var(--bg-2);
  stroke-width: 4px;
}
.market-list {
  display: grid;
  margin: 28px 0 20px;
}
.market-list button {
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 18px 4px;
  border: 0;
  border-top: 1px solid var(--line);
  background: none;
  min-height: 44px;
}
.market-list button:last-child {
  border-bottom: 1px solid var(--line);
}
.market-list b {
  font: 700 1.5rem / 1.1 var(--f-display);
  transition: color var(--t-fast);
}
.market-list span {
  color: var(--text-2);
  font-size: 0.9375rem;
}
.market-list button:hover b,
.market-list button.is-on b {
  color: var(--accent-text);
}
.map-note {
  font-size: var(--fs-small);
  color: var(--text-2);
  max-width: 46ch;
}
@media (max-width: 1000px) {
  .region-copy,
  .region-map {
    grid-column: 1 / -1;
  }
  .region-map {
    order: -1;
  }
  .map-svg {
    max-height: 60svh;
  }
}

.split {
  align-items: center;
  row-gap: 28px;
}
.split .a {
  grid-column: 1 / span 5;
}
.split .b {
  grid-column: 7 / -1;
}
@media (max-width: 900px) {
  .split .a,
  .split .b {
    grid-column: 1 / -1;
  }
}
.cover-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.cover-strip .media {
  aspect-ratio: 4 / 3;
}
.cover-strip a:hover .media img {
  transform: scale(1.04);
}
@media (max-width: 720px) {
  .cover-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}
.value-list li {
  padding: 22px 0;
  border-top: 1px solid var(--line-light);
  display: grid;
  grid-template-columns: minmax(150px, 0.4fr) 1fr;
  gap: 8px 24px;
}
.value-list b {
  font: 700 1.25rem / 1.2 var(--f-display);
  color: var(--ink);
}
@media (max-width: 700px) {
  .value-list li {
    grid-template-columns: 1fr;
  }
}

.contact-grid {
  align-items: start;
  row-gap: 40px;
  padding-block: clamp(32px, 4vw, 64px) var(--section);
}
.contact-side {
  grid-column: 1 / span 5;
  display: grid;
  gap: 32px;
}
.contact-form {
  grid-column: 7 / -1;
  padding: clamp(22px, 3vw, 44px);
  background: var(--surface);
  border-radius: var(--r-m);
}
.contact-form .fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.contact-form .full {
  grid-column: 1 / -1;
}
.err {
  display: block;
  min-height: 1.2em;
  margin-top: 6px;
  font-size: 0.8125rem;
  color: #ff9d9d;
}
.form-status {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--r-s);
  border-left: 4px solid #fff;
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.9375rem;
}
.form-status[data-state="preview"] {
  border-color: #f2c14e;
}
.form-status[data-state="ok"] {
  border-color: #6fd3a6;
}
.form-status[data-state="error"] {
  border-color: #ff8a8a;
}
.contact-form .consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 22px 0;
  color: var(--text-2);
  font-size: 0.9375rem;
}
.contact-form .consent input {
  width: 20px;
  height: 20px;
  margin-top: 3px;
  accent-color: var(--accent);
  flex: none;
}
.chan li + li {
  margin-top: 10px;
}
.chan a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  transition: border-color var(--t-fast);
}
.chan a:hover {
  border-color: #fff;
}
.safe-note {
  padding: 20px 22px;
  border-left: 4px solid var(--accent);
  background: var(--bg-2);
}
.safe-note h2 {
  font-size: 1.125rem;
  margin-bottom: 8px;
}
.safe-note p {
  color: var(--text-2);
  font-size: 0.9375rem;
}
@media (max-width: 1000px) {
  .contact-side,
  .contact-form {
    grid-column: 1 / -1;
  }
  .contact-form .fields {
    grid-template-columns: 1fr;
  }
}

.progress {
  position: fixed;
  left: 0;
  top: 0;
  height: 3px;
  width: 100%;
  z-index: 150;
  transform-origin: left;
  transform: scaleX(0);
  background: var(--accent);
  pointer-events: none;
}

.sol-main .btn {
  margin-top: 6px;
}
.sol-steps {
  counter-reset: st;
}
.sol-steps li {
  counter-increment: st;
  padding-left: 44px;
  position: relative;
}
.sol-steps li::before {
  content: counter(st);
  position: absolute;
  left: 0;
  top: 18px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  font: 700 0.8125rem / 1 var(--f-display);
}
.sol-steps li:first-child::before {
  top: 4px;
}
.markets {
  background: var(--bg);
}
.mk-rows {
  display: grid;
}
.mk-rows li {
  display: grid;
  grid-template-columns: minmax(200px, 0.6fr) 1fr;
  gap: 8px 40px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.mk-rows li:last-child {
  border-bottom: 1px solid var(--line);
}
.mk-rows b {
  font: 700 clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem) / 1.1 var(--f-display);
}
.mk-rows span {
  color: var(--text-2);
}
@media (max-width: 700px) {
  .mk-rows li {
    grid-template-columns: 1fr;
  }
}

.trusted {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(32px, 4vw, 56px);
}
.trusted-in {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px clamp(24px, 5vw, 80px);
  align-items: center;
}
.trusted h2 {
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.875rem);
  margin-bottom: 10px;
}
.trusted p {
  color: var(--text-2);
  max-width: 52ch;
}
.wm-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px clamp(24px, 3vw, 48px);
  align-items: center;
}
.wm-row img {
  height: 32px;
  width: auto;
  filter: grayscale(1) brightness(1.7);
  opacity: 0.75;
  transition:
    filter var(--t-card),
    opacity var(--t-card);
}
.wm-row img:hover {
  filter: none;
  opacity: 1;
}
.wm-row .wm {
  font: 700 clamp(1.25rem, 1rem + 1vw, 1.75rem) / 1 var(--f-display);
  letter-spacing: -0.02em;
  color: #7d8696;
  transition: color var(--t-card);
}
.wm-row .wm:hover {
  color: #fff;
}
@media (max-width: 900px) {
  .trusted-in {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   HOME: light theme (white page, bold caps headings with one coloured word, outlined buttons)
   The footer stays dark. Inner pages are unchanged.
   ========================================================= */
.is-home .site-header,
.is-home main {
  --bg: #ffffff;
  --bg-2: #f4f5f7;
  --surface: #ffffff;
  --text: #14161b;
  --text-2: #565d6b;
  --line: rgba(20, 22, 27, 0.14);
  --accent-text: #b3231b;
  color: var(--ink);
}
.is-home main {
  background: #fff;
}

/* header */
.is-home .site-header {
  color: var(--ink);
}
.is-home .nav-link,
.is-home .nav-trigger {
  color: var(--ink-2);
}
.is-home .nav-link:hover,
.is-home .nav-trigger:hover,
.is-home .nav-link[aria-current="page"],
.is-home .nav-trigger[data-current="true"] {
  color: var(--ink);
}
.is-home .nav-sub {
  background: #fff;
  border-color: var(--line-light);
  box-shadow: 0 12px 28px -12px rgba(20, 22, 27, 0.25);
}
.is-home .nav-sub a {
  color: var(--ink-2);
}
.is-home .nav-sub a:hover {
  background: rgba(20, 22, 27, 0.06);
  color: var(--ink);
}
.is-home .menu-btn {
  border-color: var(--line-light);
}
.is-home .menu-btn i,
.is-home .menu-btn i::before,
.is-home .menu-btn i::after {
  background: var(--ink);
}
.is-home .menu-open .menu-btn i {
  background: transparent;
}
@media (max-width: 1000px) {
  .is-home .nav-link,
  .is-home .nav-trigger {
    color: var(--ink);
  }
  .is-home .nav-item {
    border-color: var(--line-light);
  }
}

/* headings: bold caps with the last word in the accent colour */
.is-home main h1,
.is-home main h2 {
  text-transform: none;
  letter-spacing: -0.005em;
}
.is-home main h2 {
  font-size: clamp(1.6rem, 1rem + 2vw, 2.75rem);
  line-height: 1.08;
}
.is-home main h1 {
  font-size: clamp(2rem, 1.1rem + 3.4vw, 3.9rem);
  line-height: 1.04;
}
.is-home main h1 em,
.is-home main h2 em {
  font-style: normal;
  color: var(--accent-on-light);
}
.is-home main .cta h2 em {
  color: inherit;
}
.is-home main .lede,
.is-home main p {
  color: var(--ink-2);
}
.is-home main .eyebrow {
  color: var(--accent-on-light);
}

/* sections on white / very light grey */
.is-home .intro {
  background: #fff;
}
.is-home .intro h1 {
  color: var(--ink);
}
.is-home .trusted {
  background: var(--bg-2);
  border-bottom: 0;
}
.is-home .trusted h2 {
  font-size: clamp(1.15rem, 0.9rem + 0.9vw, 1.6rem);
}
.is-home .wm-row .wm {
  color: #8a919e;
}
.is-home .wm-row .wm:hover {
  color: var(--ink);
}
.is-home .preview {
  background: #fff;
}
.is-home .support {
  background: var(--bg-2);
}
.is-home .support-list {
  border-top-color: var(--line-light);
}
.is-home .support-list li + li {
  border-left-color: var(--line-light);
}
.is-home .support-list b,
.is-home .sol-list b {
  color: var(--ink);
}
.is-home .support-list span,
.is-home .sol-list span {
  color: var(--ink-2);
}
.is-home .solutions {
  background: #fff;
}
.is-home .markets,
.is-home .surface-2 {
  background: var(--bg-2);
}
.is-home .game-card .meta b {
  color: var(--ink);
}
.is-home .game-card .meta span {
  color: var(--ink-2);
}
.is-home .game-card .media,
.is-home .tile {
  box-shadow: 8px 12px 24px -8px rgba(20, 22, 27, 0.28);
}

/* outlined buttons, as in the reference */
.is-home main .btn-primary,
.is-home main .btn-ghost,
.is-home .nav-cta .btn-primary {
  background: transparent;
  color: var(--accent-on-light);
  border: 2px solid var(--accent-on-light);
  border-radius: var(--r-l);
}
.is-home main .btn-primary:hover,
.is-home main .btn-ghost:hover,
.is-home .nav-cta .btn-primary:hover {
  background: var(--accent-on-light);
  color: #fff;
}
.is-home main .btn-ghost {
  color: var(--ink);
  border-color: var(--ink);
}
.is-home main .btn-ghost:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.is-home main .link-arrow {
  color: var(--accent-on-light);
}

/* map and markets */
.is-home .map-card {
  background: #fff;
  border: 1px solid var(--line-light);
}
.is-home .map-svg .c {
  fill: #dde1e8;
  stroke: #fff;
}
.is-home .map-svg .c.hl {
  fill: #f1c0bb;
}
.is-home .map-svg .c.hl.is-on {
  fill: var(--accent);
}
.is-home .map-svg .pin {
  fill: var(--ink);
  stroke: #fff;
}
.is-home .map-svg text {
  fill: var(--ink);
  stroke: #fff;
}
.is-home .market-list button b {
  color: var(--ink);
}
.is-home .market-list button:hover b,
.is-home .market-list button.is-on b {
  color: var(--accent-on-light);
}
.is-home .market-list button {
  border-color: var(--line-light);
}
.is-home .market-list button:last-child {
  border-bottom-color: var(--line-light);
}

/* closing band keeps the solid accent with white text and white buttons */
.is-home main .cta,
.is-home main .cta h2 {
  color: #fff;
}
.is-home main .cta .btn-primary {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.is-home main .cta .btn-primary:hover {
  background: var(--light-2);
  color: var(--ink);
}
.is-home main .cta .btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}
.is-home main .cta .btn-ghost:hover {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}

/* game panel on the light page */
.is-home dialog.qv {
  background: #fff;
  color: var(--ink);
}
.is-home dialog.qv p {
  color: var(--ink-2);
}
.is-home dialog.qv .checks li {
  color: var(--ink-2);
}
.is-home dialog.qv .eyebrow {
  color: var(--accent-on-light);
}
.is-home main .hl-title {
  color: var(--ink);
}
.is-home main .hl-title em {
  color: var(--accent-on-light);
}
.hl-title {
  font-size: clamp(1.9rem, 0.9rem + 2.9vw, 3.4rem);
}
.sol-main p.eyebrow {
  font-size: var(--fs-small);
  color: var(--accent-on-light);
}

/* single hero (no slides, no controls) */
.hero .slide {
  opacity: 1;
  visibility: visible;
  transition: none;
  min-height: clamp(520px, 46vw, 700px);
}
.hero .slide-copy {
  width: min(540px, 44%);
  padding-block: 56px;
}
.hero .hl-text {
  max-width: 46ch;
  margin-top: 22px;
  font-size: var(--fs-body);
  line-height: 1.6;
}
.hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.is-home main .hero .hl-title {
  font-size: clamp(1.9rem, 0.9rem + 2.9vw, 3.4rem);
  line-height: 1.04;
}
@media (max-width: 800px) {
  .hero .slide {
    min-height: 0;
  }
  .hero .slide-copy {
    width: auto;
    padding: 36px var(--gutter) 12px;
  }
}
.hero .slide-copy {
  width: min(500px, 40%);
}
.hero .slide-art {
  --tw: clamp(110px, 13.2vw, 206px);
}
.hero .tilt {
  left: 67%;
  top: -26%;
}
@media (max-width: 800px) {
  .hero .slide-copy {
    width: auto;
  }
  .hero .slide-art {
    --tw: 34vw;
  }
  .hero .tilt {
    left: -4%;
    top: -46%;
  }
}

/* endless cover loop: four skewed columns, alternating direction, seamless via two cloned copies (see hero.js) */
.hero .tilt {
  display: flex;
  gap: calc(var(--tw) * 0.14);
  align-items: flex-start;
  grid-template-columns: none;
}
.hero .col {
  width: var(--tw);
  flex: none;
}
.hero .col:nth-child(even) {
  margin-top: calc(var(--tw) * 0.42);
}
.hero .track {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  will-change: transform;
}
.hero .tile {
  margin-bottom: calc(var(--tw) * 0.14);
  flex: none;
  width: var(--tw);
}
.hero .tile img {
  transition: none;
}
.hero.is-looping .track {
  animation: cover-loop 110s linear infinite;
  transform: translateY(-33.3333%);
}
.hero.is-looping .col:nth-child(2) .track {
  animation-duration: 140s;
  animation-direction: reverse;
}
.hero.is-looping .col:nth-child(3) .track {
  animation-duration: 95s;
}
.hero.is-looping .col:nth-child(4) .track {
  animation-duration: 125s;
  animation-direction: reverse;
}
.hero.is-paused .track {
  animation-play-state: paused;
}
@keyframes cover-loop {
  from {
    transform: translateY(-33.3333%);
  }
  to {
    transform: translateY(-66.6667%);
  }
}
.hero .slide-art {
  overflow: hidden;
}
.hero-bar {
  position: absolute;
  left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  bottom: 18px;
  z-index: 5;
}
@media (max-width: 800px) {
  .hero-bar {
    position: static;
    padding: 0 var(--gutter) 16px;
  }
  .hero .slide {
    display: flex;
    flex-direction: column;
  }
}
.hero .slide.is-active .tile {
  animation: none;
}

/* normal text: sentence case as written, one colour, no accent word */
.is-home main h1,
.is-home main h2,
.is-home main .hl-title {
  text-transform: none;
  letter-spacing: -0.015em;
}
.is-home main h1 em,
.is-home main h2 em,
.is-home main .hl-title em {
  color: inherit;
  font-style: normal;
}
.is-home main .eyebrow {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.875rem;
}

/* hero fills the whole screen below the header, whatever the display */
.hero .slide {
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
}
.hero .slide-art {
  --tw: clamp(110px, min(13.2vw, 25svh), 400px);
}
@media (max-width: 800px) {
  .hero .slide {
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
  }
  .hero .slide-art {
    flex: 1 1 auto;
    min-height: 300px;
    height: auto;
    --tw: clamp(110px, min(34vw, 20svh), 220px);
  }
}
.hero .slide-art {
  --tw: clamp(110px, min(12vw, 23svh), 380px);
}
.hero .tilt {
  left: 71%;
  top: -24%;
}
@media (max-width: 800px) {
  .hero .tilt {
    left: -4%;
    top: -46%;
  }
}

/* soft fade where the cover grid meets the top and bottom of the hero.
   Gradient only: a live blur over moving images has to be recomputed every frame and made the loop stutter. */
.hero .slide-art::before,
.hero .slide-art::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
  height: clamp(72px, 17svh, 210px);
}
.hero .slide-art::before {
  top: 0;
  background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0.85) 30%, rgba(255, 255, 255, 0));
}
.hero .slide-art::after {
  bottom: 0;
  background: linear-gradient(to top, #f4f5f7 0%, rgba(244, 245, 247, 0.85) 30%, rgba(244, 245, 247, 0));
}
@media (max-width: 800px) {
  .hero .slide-art::before,
  .hero .slide-art::after {
    height: clamp(48px, 16%, 110px);
  }
}

/* smoother loop: lighter tiles, compositor-only motion, no per-tile stacking contexts */
.hero .media {
  isolation: auto;
  background: #d9dde4;
}
.hero .media::before {
  display: none;
}
.hero .tile {
  box-shadow: 4px 6px 12px rgba(20, 22, 27, 0.22);
  contain: layout paint;
}
.hero .track {
  backface-visibility: hidden;
  transform: translate3d(0, -33.3333%, 0);
}
.hero.is-looping .track {
  animation-name: cover-loop;
}
.hero.is-looping .col:nth-child(1) .track {
  animation-duration: 90s;
}
.hero.is-looping .col:nth-child(2) .track {
  animation-duration: 115s;
}
.hero.is-looping .col:nth-child(3) .track {
  animation-duration: 80s;
}
.hero.is-looping .col:nth-child(4) .track {
  animation-duration: 105s;
}
.hero.is-offscreen .track {
  animation-play-state: paused;
}
@keyframes cover-loop {
  from {
    transform: translate3d(0, -33.3333%, 0);
  }
  to {
    transform: translate3d(0, -66.6667%, 0);
  }
}

/* partner logos: big heading partly covered by a looping logo row, description below the row */
.trusted {
  background: var(--bg-2);
  border-bottom: 0;
  padding-block: clamp(48px, 6vw, 96px);
}
.trusted .wrap {
  text-align: center;
}
.trusted h2 {
  position: relative;
  z-index: 1;
  max-width: 18ch;
  margin: 0 auto;
  font-size: clamp(2rem, 1rem + 3.6vw, 4.5rem);
  line-height: 1.05;
}
.logo-marquee {
  position: relative;
  z-index: 2;
  margin-top: calc(clamp(1.1rem, 0.6rem + 1.7vw, 2.4rem) * -1);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.logo-marquee::-webkit-scrollbar {
  display: none;
}
.logo-marquee.is-looping {
  overflow: hidden;
}
.lm-track {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  column-gap: clamp(28px, 5vw, 82px);
  padding-block: 12px;
}
.lm-item {
  flex: none;
  width: clamp(190px, 21vw, 330px);
  height: clamp(84px, 8.5vw, 140px);
  display: grid;
  place-items: center;
}
.lm-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--t-card) var(--ease);
}
.lm-item:hover img {
  transform: scale(1.05);
}
.lm-dark {
  background: #14161b;
  border-radius: var(--r-l);
  padding: 14px;
  width: auto;
  aspect-ratio: 1;
}
.logo-marquee.is-looping .lm-track {
  animation: logo-loop var(--dur, 40s) linear infinite;
  will-change: transform;
}
.logo-marquee.is-looping:hover .lm-track,
.logo-marquee.is-offscreen .lm-track {
  animation-play-state: paused;
}
@keyframes logo-loop {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(var(--shift, -50%), 0, 0);
  }
}
.trusted-desc {
  max-width: 60ch;
  margin: clamp(16px, 2vw, 28px) auto 0;
  color: var(--text-2);
  font-size: var(--fs-lede);
}
.is-home main .trusted h2 {
  font-size: clamp(2rem, 1rem + 3.6vw, 4.5rem);
  line-height: 1.05;
  color: var(--ink);
}
.is-home .trusted-desc {
  color: var(--ink-2);
}
.logo-marquee {
  margin-top: clamp(20px, 3vw, 44px);
}
.trusted h2,
.trusted-desc {
  max-width: none;
}
.is-home main .trusted h2 {
  font-size: clamp(1.75rem, 0.8rem + 3vw, 3.6rem);
}
.trusted p.trusted-desc,
.trusted h2 {
  max-width: none;
}

/* hero background artwork (img/homebackground.webp, optimised) */
.banner.hero {
  background: #fff url("/assets/img/homebackground.webp") left center / cover no-repeat;
}
@media (max-width: 800px) {
  .banner.hero {
    background-image: url("/assets/img/home-background-sm.webp");
    background-position: left top;
  }
}
/* keep the text legible where the coins sit behind it */
.banner.hero {
  background-position: -30px center;
}
.hero .hl-title,
.hero .hl-text {
  text-shadow:
    0 0 2px #fff,
    0 0 10px #fff,
    0 0 20px rgba(255, 255, 255, 0.95);
}
.hero .hero-actions .btn {
  background: #fff;
}
@media (max-width: 800px) {
  .banner.hero {
    background-position: left top;
  }
}

/* Why operators choose Mega888: horizontal scroller.
   Default (phones, tablets, reduced motion, no JS): a swipeable strip. Wide screens with JS (.is-pinned): the section
   is pinned while vertical scrolling slides the panels from right to left. */
.why {
  background: #fff;
  --pad: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
}
.hs-sticky {
  position: relative;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-block: clamp(40px, 5vw, 80px);
}
.hs-sticky::-webkit-scrollbar {
  display: none;
}
.hs-track {
  display: flex;
  align-items: stretch;
  gap: clamp(28px, 4vw, 72px);
  width: max-content;
  padding-inline: var(--pad);
}
.hs-intro {
  flex: none;
  width: min(560px, 80vw);
  display: grid;
  align-content: center;
  gap: 16px;
  scroll-snap-align: start;
}
.hs-intro h2 {
  margin: 4px 0 4px;
}
.hs-intro .lede {
  max-width: 36ch;
}
.hp {
  flex: none;
  width: min(640px, 82vw);
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-snap-align: start;
}
.hp-art {
  position: relative;
  aspect-ratio: 3 / 2;
}
.hp-art::before {
  content: "";
  position: absolute;
  inset: 6% 11%;
  background: #e9ecf1;
  transform: skewX(-14deg);
  border-radius: var(--r-s);
}
.hp:nth-of-type(even) .hp-art::before {
  transform: skewX(14deg);
}
.hp-art img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transform: scale(1.06);
}
.hp-copy {
  position: relative;
  display: grid;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line-light);
}
.hp-n {
  font: 700 clamp(2.6rem, 2rem + 2.4vw, 4.2rem) / 0.95 var(--f-display);
  color: transparent;
  -webkit-text-stroke: 1.4px var(--accent-on-light);
  letter-spacing: -0.02em;
}
.hp h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
  line-height: 1.1;
  color: var(--ink);
}
.hp p {
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 36ch;
}

@media (min-width: 1001px) {
  .why.is-pinned .hs-sticky {
    scroll-snap-type: none;
    position: sticky;
    top: var(--header-h);
    height: calc(100vh - var(--header-h));
    height: calc(100svh - var(--header-h));
    overflow: hidden;
    padding-block: clamp(20px, 3vh, 40px);
    display: flex;
    align-items: center;
  }
  .why.is-pinned .hs-track {
    will-change: transform;
    height: 100%;
    max-height: 780px;
    padding-right: var(--pad);
  }
  .why.is-pinned .hp {
    width: clamp(420px, min(44vw, 100svh * 0.68), 700px);
  }
  .why.is-pinned .hp-art {
    flex: 1 1 0;
    min-height: 0;
    aspect-ratio: auto;
  }
  .why.is-pinned .hp-copy {
    flex: none;
  }
}
@media (max-width: 1000px) {
  .hp-art img {
    transform: none;
  }
}

/* the words sit over the bottom of their picture */
.hp-copy {
  position: relative;
  z-index: 2;
  margin-top: calc(clamp(64px, 7vw, 120px) * -1);
  padding: 0 clamp(8px, 1.6vw, 24px);
  border-top: 0;
}
.hp-copy > * {
  text-shadow:
    0 0 2px #fff,
    0 0 12px #fff,
    0 0 24px rgba(255, 255, 255, 0.9);
}
.hp-n {
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
}
@media (min-width: 1001px) {
  .why.is-pinned .hp-copy {
    margin-top: calc(clamp(56px, 8svh, 100px) * -1);
  }
}
/* stronger overlap: the words lie over the lower part of the picture on a soft white fade */
.hp-copy {
  padding-top: clamp(48px, 6svh, 84px);
  margin-top: calc((clamp(48px, 6svh, 84px) + clamp(80px, 12svh, 150px)) * -1);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.9) 40%, #fff 72%);
}
.hp-copy > * {
  text-shadow: none;
}
@media (min-width: 1001px) {
  .why.is-pinned .hp-copy {
    margin-top: calc((clamp(48px, 6svh, 84px) + clamp(80px, 12svh, 150px)) * -1);
  }
}
/* no panel behind the pictures; a little more space between the panels */
.hp-art::before,
.hp:nth-of-type(even) .hp-art::before {
  content: none;
}
.hs-track {
  gap: clamp(48px, 6.5vw, 120px);
}
/* the text block rides up well over the picture and covers its lower part */
.hp {
  position: relative;
}
.hp-art {
  position: relative;
  z-index: 1;
}
.hp-copy,
.why.is-pinned .hp-copy {
  position: relative;
  z-index: 3;
  margin-top: -30%;
  padding: clamp(72px, 9svh, 120px) clamp(10px, 1.6vw, 24px) 6px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.82) 30%, #fff 52%);
}
.hp-copy,
.why.is-pinned .hp-copy {
  margin-top: -38%;
}
@media (min-width: 1001px) {
  .why.is-pinned .hp-copy {
    margin-top: -40%;
  }
}
/* wide pinned layout: the picture sits at the bottom of its box so the text block really covers its lower part */
@media (min-width: 1001px) {
  .why.is-pinned .hp-art img {
    object-position: center bottom;
  }
  .why.is-pinned .hp-copy {
    margin-top: -24%;
  }
}
@media (min-width: 1001px) {
  .why.is-pinned .hp-copy {
    margin-top: -37%;
  }
}
/* wide pinned layout, final: picture stays where it was (centred in its box); only the text block moves up over its lower part */
@media (min-width: 1001px) {
  .why.is-pinned .hp-art img {
    object-position: center center;
  }
  .why.is-pinned .hp-copy {
    margin-top: -46%;
  }
}
/* wide pinned layout: the picture keeps its own size and place; only the text moves up over it */
@media (min-width: 1001px) {
  .why.is-pinned .hp {
    justify-content: center;
  }
  .why.is-pinned .hp-art {
    flex: none;
    aspect-ratio: 3 / 2;
  }
  .why.is-pinned .hp-art img {
    object-position: center center;
  }
  .why.is-pinned .hp-copy {
    margin-top: -34%;
  }
}

/* =========================================================
   Homepage rhythm: light and dark sections alternate (hero light, trusted dark, why light, games dark,
   integration light, markets dark, closing red). A .sec-dark section restores the dark palette inside the light page.
   ========================================================= */
.is-home main .sec-dark {
  --bg: #0c0e13;
  --bg-2: #14171e;
  --surface: #1b1f28;
  --text: #f4f5f7;
  --text-2: #a9b0bd;
  --line: rgba(244, 245, 247, 0.16);
  --accent-text: #ff7a6b;
  background: #0c0e13;
  color: #f4f5f7;
}
.is-home main .sec-dark.trusted {
  background: #12151c;
}
.is-home main .sec-dark h1,
.is-home main .sec-dark h2,
.is-home main .sec-dark h3 {
  color: #f4f5f7;
}
.is-home main .sec-dark h2 em {
  color: var(--accent-text);
}
.is-home main .sec-dark p,
.is-home main .sec-dark .lede,
.is-home main .sec-dark li {
  color: var(--text-2);
}
.is-home main .sec-dark .eyebrow {
  color: var(--accent-text);
}
.is-home main .sec-dark .link-arrow {
  color: var(--accent-text);
}
.is-home main .sec-dark .game-card .meta b {
  color: #fff;
}
.is-home main .sec-dark .game-card .meta span {
  color: var(--text-2);
}
.is-home main .sec-dark .game-card .media {
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, 0.8);
}
/* partner logos sit on white tiles so dark logo parts stay readable */
.is-home main .sec-dark .lm-item:not(.lm-dark) {
  background: #fff;
  border-radius: var(--r-l);
  padding: 12px 22px;
}
.is-home main .sec-dark .lm-dark {
  background: #1f242e;
}
.is-home main .sec-dark .trusted-desc {
  color: var(--text-2);
}
/* markets on dark */
.is-home main .sec-dark .map-card {
  background: #14171e;
  border-color: rgba(244, 245, 247, 0.14);
}
.is-home main .sec-dark .map-svg .c {
  fill: #232834;
  stroke: #14171e;
}
.is-home main .sec-dark .map-svg .c.hl {
  fill: #7a2a26;
}
.is-home main .sec-dark .map-svg .c.hl.is-on {
  fill: var(--accent);
}
.is-home main .sec-dark .map-svg .pin {
  fill: #fff;
  stroke: #14171e;
}
.is-home main .sec-dark .map-svg text {
  fill: #fff;
  stroke: #14171e;
}
.is-home main .sec-dark .market-list button {
  border-color: rgba(244, 245, 247, 0.16);
}
.is-home main .sec-dark .market-list button:last-child {
  border-bottom-color: rgba(244, 245, 247, 0.16);
}
.is-home main .sec-dark .market-list button b {
  color: #fff;
}
.is-home main .sec-dark .market-list button:hover b,
.is-home main .sec-dark .market-list button.is-on b {
  color: var(--accent-text);
}
.is-home main .sec-dark .market-list span {
  color: var(--text-2);
}
.is-home main .sec-dark .map-note {
  color: var(--text-2);
}

/* =========================================================
   Homepage: slanted joins between the alternating sections (same angle family as the skewed hero covers).
   Every section after the hero has a diagonal top edge that overlaps the end of the section above; the slope
   alternates left and right, and a narrow accent band runs along each cut.
   ========================================================= */
.is-home {
  --arc: clamp(26px, 4.6vw, 80px);
  --band: clamp(5px, 0.6vw, 9px);
}
.is-home main > section:not(.banner),
.is-home .site-footer {
  position: relative;
  margin-top: calc(var(--arc) * -1);
  border-radius: 0;
  clip-path: polygon(0 var(--arc), 100% 0, 100% 100%, 0 100%);
}
.is-home main > section:not(.banner):nth-of-type(even),
.is-home .site-footer {
  clip-path: polygon(0 0, 100% var(--arc), 100% 100%, 0 100%);
}
.is-home main > section:not(.banner)::before,
.is-home .site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--arc) + var(--band));
  z-index: 2;
  pointer-events: none;
  background: var(--accent);
  border: 0;
  border-radius: 0;
  opacity: 1;
  clip-path: polygon(0 var(--arc), 100% 0, 100% var(--band), 0 calc(var(--arc) + var(--band)));
}
.is-home main > section:not(.banner):nth-of-type(even)::before,
.is-home .site-footer::before {
  clip-path: polygon(0 0, 100% var(--arc), 100% calc(var(--arc) + var(--band)), 0 var(--band));
}
.is-home main > .cta::before {
  background: rgba(255, 255, 255, 0.7);
}
.is-home .banner {
  padding-bottom: 0;
}
.is-home .hero .slide {
  padding-bottom: calc(var(--arc) + 8px);
}
/* the sections that sit above another section need room at the bottom for the overlap */
.is-home .trusted {
  padding-bottom: calc(clamp(48px, 6vw, 96px) + var(--arc));
}
.is-home .why {
  padding-bottom: calc(clamp(24px, 3vw, 48px) + var(--arc));
}
.is-home .preview,
.is-home .solutions,
.is-home main > .section.surface-2 {
  padding-bottom: calc(var(--section) + var(--arc));
}
.is-home .cta .cta-in {
  padding-bottom: calc(clamp(56px, 7vw, 112px) + var(--arc));
}
.is-home .trusted,
.is-home .why,
.is-home .preview,
.is-home .solutions,
.is-home .markets {
  scroll-margin-top: var(--header-h);
}
/* keep the hero's own layers (edge fades, z-index 2) from painting over the arched section that follows */
.is-home .banner {
  isolation: isolate;
  z-index: 0;
}
.is-home main > section:not(.banner),
.is-home .site-footer {
  z-index: 1;
}

/* Game carousel (homepage fourth part): three at a time, centred; text under each picture; arrows at both sides */
.gc-head {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}
.gc-head .lede {
  margin-inline: auto;
}
.gc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(10px, 2vw, 28px);
}
.gc-view {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  outline-offset: 6px;
}
.gc-view::-webkit-scrollbar {
  display: none;
}
.gc-track {
  display: flex;
  gap: clamp(16px, 2vw, 32px);
  list-style: none;
  margin: 0;
  padding: 0;
}
.gc-card {
  flex: 0 0 calc((100% - 2 * clamp(16px, 2vw, 32px)) / 3);
  scroll-snap-align: start;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.gc-card .media {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-m);
  box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.85);
  transition: transform var(--t-card) var(--ease);
}
.gc-card:hover .media {
  transform: translateY(-4px);
}
.gc-card h3 {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  line-height: 1.2;
}
.gc-cat {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-2);
}
.gc-card p {
  max-width: 36ch;
  font-size: 1rem;
  line-height: 1.55;
}
.gc-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  color: #fff;
  display: grid;
  place-items: center;
  transition:
    background var(--t-fast),
    border-color var(--t-fast),
    color var(--t-fast),
    opacity var(--t-fast);
}
.gc-btn svg {
  width: 22px;
  height: 22px;
}
.gc-btn:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
}
.gc-btn:disabled {
  opacity: 0.3;
  cursor: default;
}
.gc-more {
  text-align: center;
  margin: clamp(24px, 3vw, 40px) auto 0;
  max-width: none;
}
.is-home main .sec-dark .gc-btn {
  color: #fff;
}
@media (max-width: 1000px) {
  .gc-card {
    flex-basis: calc((100% - clamp(16px, 2vw, 32px)) / 2);
  }
}
@media (max-width: 640px) {
  .gc {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "view view" "prev next";
    row-gap: 18px;
  }
  .gc-view {
    grid-area: view;
  }
  .gc-prev {
    grid-area: prev;
    justify-self: end;
  }
  .gc-next {
    grid-area: next;
    justify-self: start;
  }
  .gc-card {
    flex-basis: 100%;
  }
}

/* map flag pins: the chosen market shows its flag on a pointer */
.flag-pin .fp-in {
  opacity: 0;
  transform: translateY(-14px) scale(0.85);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition:
    opacity var(--t-card) var(--ease),
    transform 420ms var(--ease);
  pointer-events: none;
}
.flag-pin.is-on .fp-in {
  opacity: 1;
  transform: none;
}
.map-svg .fp-ring {
  fill: #fff;
  stroke: #fff;
  stroke-width: 4;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35));
}
.map-svg .fp-tail {
  fill: #fff;
}
.map-svg .fp-dot {
  fill: var(--accent);
  stroke: #fff;
  stroke-width: 3;
}
.mk-flag {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
  grid-row: span 2;
  align-self: center;
}
.market-list button:has(.mk-flag) {
  grid-template-columns: 28px 1fr;
  column-gap: 14px;
}
.market-list button:has(.mk-flag) b,
.market-list button:has(.mk-flag) span {
  grid-column: 2;
}
.market-list button:has(.mk-flag) .mk-flag {
  grid-column: 1;
}
@media (prefers-reduced-motion: reduce) {
  .flag-pin .fp-in {
    transition: none;
  }
}

/* Home CTA headline: each word is a step larger than the one before, left to right */
.is-home .cta h2.cta-grow {
  max-width: none;
  line-height: 1.15;
}
.cta-grow span {
  display: inline-block;
  font-size: calc(0.6em + var(--i) * 0.09em);
  margin-right: 0.25em;
}
.js-motion .cta-grow span {
  opacity: 0;
  transform: translateY(12px) scale(0.9);
  transform-origin: left bottom;
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
  transition-delay: calc(var(--i) * 70ms);
}
.js-motion .cta-grow.is-in span {
  opacity: 1;
  transform: none;
}
.is-home .cta .cta-in {
  display: block;
}
/* one line across the full width on desktop; wraps normally on small screens */
.is-home .cta h2.cta-grow {
  text-wrap: wrap;
}
@media (min-width: 900px) {
  .is-home .cta .cta-in {
    container-type: inline-size;
  }
  .is-home main .cta h2.cta-grow {
    font-size: 2.62cqw;
    white-space: nowrap;
  }
}

/* =====================================================================
   HOMEPAGE HERO: fits any screen
   Copy sits in a vertically centred column over a soft white scrim; type and cover tiles scale with
   BOTH width and height. Landscape desktops use two columns, phones and portrait windows stack.
   ===================================================================== */
.is-home main .hero .slide {
  display: flex;
  align-items: center;
}
.is-home main .hero .slide-copy {
  position: relative;
  z-index: 3;
  width: min(clamp(320px, 42vw, 760px), 100%);
  padding-block: clamp(24px, 6svh, 72px);
}
.is-home main .hero .slide-copy::before {
  content: "";
  position: absolute;
  inset: -30% -25% -30% -30%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse closest-side at 50% 50%,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.45) 45%,
    rgba(255, 255, 255, 0) 100%
  );
}
.is-home main .hero .hl-title {
  font-size: clamp(1.75rem, min(0.9rem + 2.9vw, 7.4svh), 4.6rem);
  text-shadow: none;
}
.is-home main .hero .hl-text {
  max-width: 48ch;
  margin-top: clamp(12px, 2.6svh, 24px);
  font-size: clamp(0.9rem, min(0.55rem + 0.55vw, 2.5svh + 0.2rem), 1.2rem);
  text-shadow: none;
}
.is-home main .hero .hero-actions {
  margin-top: clamp(16px, 4svh, 34px);
}
.hero .slide-art {
  --tw: clamp(96px, min(12vw, 23svh), 420px);
}

/* stacked: phones and portrait tablets/windows (side by side would bury the copy under the covers) */
@media (max-width: 800px), (max-aspect-ratio: 5/6) {
  .banner.hero {
    background-image: url("/assets/img/home-background-sm.webp");
    background-position: left top;
  }
  .is-home main .hero .slide {
    flex-direction: column;
    align-items: stretch;
  }
  .is-home main .hero .slide-copy {
    width: auto;
    padding: clamp(20px, 4svh, 36px) var(--gutter) 12px;
  }
  .is-home main .hero .slide-copy::before {
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.9),
      rgba(255, 255, 255, 0.75) 70%,
      rgba(255, 255, 255, 0)
    );
  }
  .is-home main .hero .hl-title {
    font-size: clamp(1.7rem, min(8vw, 5.2svh), 2.4rem);
  }
  .hero .slide-art {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    height: auto;
    min-height: clamp(200px, 34svh, 420px);
    --tw: clamp(110px, min(34vw, 20svh), 240px);
  }
  .hero .tilt {
    left: -4%;
    top: -46%;
  }
  .hero-bar {
    position: static;
    padding: 0 var(--gutter) 16px;
  }
}
@media (max-height: 520px) and (max-width: 800px) {
  .hero .slide {
    min-height: 0;
  }
  .hero .slide-art {
    min-height: 220px;
  }
}

/* landscape desktop: copy moves right, covers sit further right, paragraph gets a halo over the chips artwork */
@media (min-width: 801px) and (min-aspect-ratio: 5/6) {
  .hero .tilt {
    left: 80%;
  }
  .is-home main .hero .slide-copy {
    width: clamp(300px, 34vw, 640px);
    margin-left: clamp(40px, 18vw, 320px); /* clears the poker chips on the left of the artwork */
  }
  .is-home main .hero .hl-text {
    color: var(--ink);
    font-weight: 500;
    text-shadow:
      0 0 3px #fff,
      0 0 8px #fff,
      0 0 16px rgba(255, 255, 255, 0.9);
  }
}
@media (min-width: 1600px) and (min-aspect-ratio: 5/6) {
  .is-home main .hero .slide-copy {
    width: 30vw;
    margin-left: 22vw;
  }
}
@media (max-height: 560px) and (min-width: 801px) {
  .is-home main .hero .hl-text {
    display: none;
  }
}

/* =====================================================================
   HOMEPAGE: red CTA band and footer seam
   ===================================================================== */
.is-home .cta .cta-in {
  padding-top: clamp(46px, 5.6vw, 90px);
  padding-bottom: calc(clamp(4px, 0.6vw, 10px) + var(--arc));
}
/* The footer's dark fill lives on its own layer that starts inside the red band, so the anti-aliased slanted edge shows only red (no dark hairline). */
.is-home .site-footer {
  border-top: 0;
  background: transparent;
  /* extra room under the slanted red band: the footer content sits lower */
  padding-top: calc(clamp(48px, 5vw, 80px) + clamp(28px, 4vw, 64px));
}
.is-home .site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #07080b;
  clip-path: polygon(0 calc(var(--band) * 0.5), 100% calc(var(--arc) + var(--band) * 0.5), 100% 100%, 0 100%);
}

/* =====================================================================
   DARK SECTIONS (homepage + games page): soft colour glow
   A warm red glow plus a cool blue one, placed differently in every dark section so no two look alike.
   Only the glow is added: each section keeps its own background colour.
   ===================================================================== */
.is-home main .sec-dark {
  --glow-red: rgba(200, 40, 31, 0.28);
  --glow-blue: rgba(42, 116, 201, 0.16);
  background-image: radial-gradient(70% 55% at 50% 0%, var(--glow-red), transparent 70%),
    radial-gradient(45% 40% at 100% 100%, var(--glow-blue), transparent 70%);
}
/* homepage: trusted brands - red top-left, blue right-middle */
.is-home main .sec-dark.trusted {
  background-image: radial-gradient(55% 90% at 12% 0%, var(--glow-red), transparent 70%),
    radial-gradient(40% 70% at 100% 60%, var(--glow-blue), transparent 70%);
}
/* homepage: game portfolio - red right-middle, blue bottom-left */
.is-home main .sec-dark.preview {
  background-image: radial-gradient(45% 70% at 100% 35%, var(--glow-red), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, var(--glow-blue), transparent 70%);
}
/* homepage: markets - red left-middle, blue top-right */
.is-home main .sec-dark.surface-2 {
  background-image: radial-gradient(45% 75% at 0% 55%, var(--glow-red), transparent 70%),
    radial-gradient(50% 55% at 95% 0%, var(--glow-blue), transparent 70%);
}
/* games page: catalogue - red top-centre, blue bottom-right */
.is-home main .sec-dark.games-list {
  background-image: radial-gradient(70% 55% at 50% 0%, var(--glow-red), transparent 70%),
    radial-gradient(45% 40% at 100% 100%, rgba(42, 116, 201, 0.14), transparent 70%);
}
/* games page: mobile + launch support - red bottom-left, blue top-right */
.is-home main .sec-dark:has(.games-info) {
  background-image: radial-gradient(50% 85% at 8% 100%, var(--glow-red), transparent 70%),
    radial-gradient(45% 70% at 100% 0%, var(--glow-blue), transparent 70%);
}

/* =====================================================================
   GAMES PAGE (body.is-games): follows the homepage look
   ===================================================================== */
.is-games main > section:not(.banner):not(.cta) {
  padding-bottom: calc(clamp(56px, 7vw, 112px) + var(--arc));
}
.is-games .sec-head {
  margin-bottom: clamp(24px, 3vw, 40px);
}

/* --- hero: centred copy, five overlapping covers underneath --- */
.is-home .games-hero {
  padding: clamp(28px, 5svh, 56px) 0 calc(var(--arc) + clamp(36px, 5vw, 72px));
  background: #fff url("/assets/img/gamebackground.webp") center bottom / cover no-repeat;
  text-align: center;
}
.games-hero-in {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.games-hero .breadcrumb {
  margin-bottom: 18px;
}
.games-hero .breadcrumb ol {
  justify-content: center;
}
.games-hero .breadcrumb a,
.games-hero .breadcrumb li {
  color: var(--ink-2);
}
.games-hero .breadcrumb [aria-current] {
  color: var(--ink);
}
.is-home main .games-hero .hl-title {
  max-width: 22ch;
  font-size: clamp(1.9rem, min(0.9rem + 3vw, 7.4svh), 3.8rem);
  text-wrap: balance;
}
.is-home main .games-hero .hl-text {
  max-width: 62ch;
  margin: clamp(14px, 2.4svh, 22px) auto 0;
  font-size: clamp(0.95rem, 0.8rem + 0.35vw, 1.15rem);
}
.games-hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 14px;
  margin-top: clamp(18px, 3svh, 30px);
}
.games-hero .hero-actions .btn {
  min-height: 52px;
  margin: 0;
}

/* Card size follows the screen: 21% of the width, but never wider than 34% of the screen height, so the
   row fits the first screen on wide, short and tall displays alike. Overlap and tilt offsets scale with it. */
.hero-five {
  --cw: clamp(120px, min(21vw, 34svh), 460px);
  display: flex;
  justify-content: center;
  align-items: center;
  width: max-content; /* wider than the 1440px content column on big screens; cards never shrink */
  margin: clamp(20px, 4svh, 56px) 0 0;
  padding: 0 0 calc(var(--cw) * 0.06);
  list-style: none;
}
.hero-five li {
  position: relative;
  flex: 0 0 var(--cw);
  margin-left: calc(var(--cw) * -0.14);
  transition: transform var(--t-med, 0.3s) var(--ease, ease);
}
.hero-five li:first-child {
  margin-left: 0;
}
.hero-five .media {
  border-radius: var(--r-m);
  box-shadow: 0 18px 34px -16px rgba(20, 22, 27, 0.45);
}
.hero-five li:nth-child(1) {
  transform: rotate(-5deg) translateY(calc(var(--cw) * 0.07));
  z-index: 1;
}
.hero-five li:nth-child(2) {
  transform: rotate(-2.5deg) translateY(calc(var(--cw) * 0.025));
  z-index: 2;
}
.hero-five li:nth-child(3) {
  transform: scale(1.1);
  z-index: 4;
}
.hero-five li:nth-child(4) {
  transform: rotate(2.5deg) translateY(calc(var(--cw) * 0.025));
  z-index: 3;
}
.hero-five li:nth-child(5) {
  transform: rotate(5deg) translateY(calc(var(--cw) * 0.07));
  z-index: 2;
}
@media (hover: hover) {
  .hero-five li:hover {
    z-index: 6;
    transform: translateY(-8px) scale(1.06);
  }
}
@media (max-width: 720px) {
  .hero-five {
    --cw: clamp(100px, min(38vw, 32svh), 260px);
  }
  .hero-five li {
    margin-left: calc(var(--cw) * -0.16);
  }
  .hero-five li:nth-child(n + 4) {
    display: none;
  }
  .hero-five li:nth-child(1) {
    transform: rotate(-4deg) translateY(calc(var(--cw) * 0.05));
    z-index: 1;
  }
  .hero-five li:nth-child(2) {
    transform: scale(1.08);
    z-index: 3;
  }
  .hero-five li:nth-child(3) {
    transform: rotate(4deg) translateY(calc(var(--cw) * 0.05));
    z-index: 2;
  }
}

/* --- catalogue (dark section; glow set in the dark-sections block above) --- */
.games-list .sec-head {
  margin-inline: auto;
  text-align: center;
}
.games-list .sec-head h2 {
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem);
  letter-spacing: -0.02em;
}
.is-games .games-list .sec-head .lede {
  max-width: 60ch;
  margin-inline: auto;
}
.is-games .games-list label,
.is-games .games-list .lbl,
.is-games .games-list .result-bar {
  color: var(--text-2);
}
.games-list .result-bar {
  padding-inline: 4px;
}
/* toolbar: one rounded bar */
.games-list .toolbar {
  padding: 18px 22px;
  margin-bottom: 22px;
  border: 1px solid rgba(244, 245, 247, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.045);
}
.games-list .field input,
.games-list .field select {
  border-radius: 999px;
  border-color: rgba(244, 245, 247, 0.18);
  background-color: rgba(0, 0, 0, 0.35);
}
.games-list .field input[type="search"] {
  padding-left: 46px;
  background-repeat: no-repeat;
  background-position: 16px center;
  background-size: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b0bd' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}
.games-list .field select {
  padding-inline: 20px;
}
.games-list .chip {
  min-width: 64px;
  border-radius: 999px;
  border-color: rgba(244, 245, 247, 0.22);
  color: #f4f5f7;
}
.games-list .chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 8px 20px -8px rgba(200, 40, 31, 0.8);
}
/* the three controls share one height and one baseline; the sort select gets the same custom arrow styling as the search box */
.games-list .toolbar {
  align-items: end;
}
.games-list .field input,
.games-list .field select,
.games-list .chip {
  height: 52px;
  min-height: 52px;
}
.games-list .field select {
  min-width: 132px;
  padding-right: 44px;
  color-scheme: dark;
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b0bd' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  cursor: pointer;
}
@media (max-width: 720px) {
  .games-list .toolbar {
    padding: 14px;
    border-radius: 16px;
  }
}

/* cards */
.games-list .cat-grid {
  gap: clamp(22px, 2.6vw, 38px) clamp(14px, 1.8vw, 26px);
}
.games-list .game-card {
  position: relative;
  transition: transform 0.35s var(--ease);
}
.games-list .game-card:hover {
  transform: translateY(-8px);
}
.games-list .game-card .media {
  overflow: hidden;
  border-radius: 14px;
  box-shadow:
    0 14px 28px -14px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(244, 245, 247, 0.08);
  transition: box-shadow 0.35s var(--ease);
}
.games-list .game-card .media::after {
  content: "View game";
  position: absolute;
  left: 50%;
  bottom: 14px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(12, 14, 19, 0.82);
  color: #fff;
  font: 600 0.8125rem / 1 var(--f-body, inherit);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 12px);
  transition:
    opacity 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.games-list .game-card:hover .media,
.games-list .game-card:focus-visible .media {
  box-shadow:
    0 30px 44px -18px color-mix(in srgb, var(--tone, #c8281f) 75%, transparent),
    0 0 0 2px rgba(255, 255, 255, 0.55);
}
.games-list .game-card:hover .media::after,
.games-list .game-card:focus-visible .media::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.games-list .game-card .meta {
  align-items: center;
  padding-top: 14px;
}
.is-games .games-list .game-card .meta b {
  color: #fff;
  font-size: 1.0625rem;
}
.is-games .games-list .game-card .meta span {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(244, 245, 247, 0.1);
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .js-motion .games-list .cat-grid li:not([hidden]) {
    animation: card-in 0.6s var(--ease) both;
  }
  .js-motion .games-list .cat-grid li:nth-child(5n + 2) {
    animation-delay: 60ms;
  }
  .js-motion .games-list .cat-grid li:nth-child(5n + 3) {
    animation-delay: 120ms;
  }
  .js-motion .games-list .cat-grid li:nth-child(5n + 4) {
    animation-delay: 180ms;
  }
  .js-motion .games-list .cat-grid li:nth-child(5n) {
    animation-delay: 240ms;
  }
}

/* buttons under the grid: "Load more" and "Play demo" share one row */
.grid-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px 20px;
  margin-top: clamp(28px, 4vw, 48px);
}
.load-btn {
  min-height: 56px;
  margin: 0;
  padding: 0 40px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition:
    background var(--t-fast),
    color var(--t-fast),
    border-color var(--t-fast);
}
.load-btn:hover {
  border-color: #fff;
  background: #fff;
  color: var(--ink);
}

/* --- "Play demo" buttons --- */
.play-ic {
  width: 22px;
  height: 22px;
  flex: none;
  transition: transform 0.3s var(--ease);
}
.btn-demo {
  gap: 10px;
  padding-left: 20px;
}
.btn-demo:hover .play-ic,
.demo-btn:hover .play-ic {
  transform: scale(1.18);
}
.demo-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  margin: 0;
  padding: 0 34px 0 26px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow:
    0 14px 30px -12px rgba(200, 40, 31, 0.85),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  transition:
    transform 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    background 0.2s;
}
.demo-btn .play-ic {
  width: 28px;
  height: 28px;
}
.demo-btn:hover {
  transform: translateY(-3px);
  background: #d8332a;
  box-shadow:
    0 20px 36px -12px rgba(200, 40, 31, 0.95),
    inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.demo-btn:active {
  transform: translateY(0);
}
.demo-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* --- why / mobile + launch / details --- */
.is-games .reasons {
  grid-template-columns: repeat(4, 1fr);
}
.is-games .reason:nth-child(n) {
  grid-column: auto;
}
.is-games .reason {
  border-top-color: var(--line-light);
}
.is-games .reason p {
  color: var(--ink-2);
}
@media (max-width: 1000px) {
  .is-games .reasons {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .is-games .reasons {
    grid-template-columns: 1fr;
  }
}
.is-games .games-info {
  align-items: start;
}
.is-games .games-info h2 {
  margin: 10px 0 16px;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem);
}
.platform-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.platform-tags li {
  padding: 10px 18px;
  border: 1px solid rgba(244, 245, 247, 0.28);
  border-radius: var(--r-m);
  color: #fff;
  font-weight: 600;
}
.is-games .on-light .detail {
  border-top-color: var(--line-light);
}
.is-games .on-light .detail h3 {
  color: var(--ink);
}
.is-games .on-light .detail p,
.is-games .on-light .detail li {
  color: var(--ink-2);
}

/* games page closing band: room between the heading and the text */
.is-games .cta h2 {
  max-width: 26ch;
  margin-bottom: 18px;
}

/* ---------- Games detail: one game at a time (built by js/detailslider.js; without JS the articles simply stack) ---------- */
#details.ds-on .ds-stage {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  gap: clamp(8px, 2vw, 32px);
  align-items: center;
  margin-top: clamp(24px, 3vw, 48px);
}
#details.ds-on .ds-view {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  touch-action: pan-y;
}
#details.ds-on .detail,
#details.ds-on .detail[data-reveal] {
  --tone: #3c649e;
  display: none;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding: 0;
  border: 0;
  opacity: 1;
  transform: none;
}
#details.ds-on .detail.is-current {
  display: grid;
  animation: ds-in 0.55s var(--ease) both;
}
@keyframes ds-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
#details.ds-on .detail > div:first-child {
  position: relative;
  width: 100%;
}
#details.ds-on .detail > div:first-child::before {
  content: "";
  position: absolute;
  inset: 12% 4% -8%;
  z-index: -1;
  background: var(--tone);
  filter: blur(44px);
  opacity: 0.45;
  border-radius: 50%;
}
#details.ds-on .detail .media {
  border-radius: 24px;
  box-shadow: 0 30px 50px -26px var(--tone);
}
#details.ds-on .detail .body {
  width: 100%;
  text-align: left;
}
#details.ds-on .detail .eyebrow {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tone) 16%, #fff);
  color: color-mix(in srgb, var(--tone) 80%, #000);
}
#details.ds-on .detail h3 {
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem);
  letter-spacing: -0.02em;
}
#details.ds-on .detail .tag {
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(20, 22, 27, 0.2);
}
#details.ds-on .detail .tag:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.ds-arrow {
  grid-row: 1;
  align-self: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(20, 22, 27, 0.2);
  background: #fff;
  color: var(--ink);
  font-size: 1.4rem;
  cursor: pointer;
  box-shadow: 0 10px 24px -14px rgba(20, 22, 27, 0.5);
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.2s;
}
.ds-arrow.prev {
  grid-column: 1;
}
.ds-arrow.next {
  grid-column: 3;
}
.ds-arrow:hover {
  background: var(--ink);
  color: #fff;
  transform: scale(1.06);
}
.ds-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: clamp(24px, 3vw, 40px);
}
.ds-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 22, 27, 0.2);
  cursor: pointer;
  transition:
    width 0.3s var(--ease),
    background 0.3s;
}
.ds-dots button[aria-current="true"] {
  width: 28px;
  background: var(--ink);
}
@media (max-width: 800px) {
  #details.ds-on .ds-stage {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 6px;
  }
  .ds-arrow {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }
  #details.ds-on .detail {
    grid-template-columns: 1fr;
  }
}
#details.ds-on {
  overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  #details.ds-on .detail.is-current {
    animation: none;
  }
}

/* =========================================================
   Demo page (.is-demo): white editorial areas around a dark player
   ========================================================= */
.dm-small {
  font-size: 0.875rem;
  color: var(--ink-2);
}
.dm-head {
  margin-bottom: clamp(20px, 3vw, 36px);
}
.dm-head .lede {
  margin-top: 14px;
}
.is-home main .dm-head h2,
.is-home main .dm-resp h2 {
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

/* hero */
.dm-hero {
  background: #fff;
  overflow: hidden;
  padding: clamp(28px, 3vw, 48px) 0 clamp(28px, 3vw, 44px);
}
.dm-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.dm-hero .breadcrumb {
  margin-bottom: 20px;
}
.is-home main .dm-hero h1 {
  font-size: clamp(2rem, 1rem + 3vw, 3.7rem);
  line-height: 1.04;
  letter-spacing: -0.016em;
  max-width: 17ch;
  text-wrap: balance;
}
.dm-hero .lede {
  margin-top: 18px;
  max-width: 54ch;
}
.dm-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin-top: 24px;
}
.dm-hero [data-stage] {
  animation: bf-rise 0.5s var(--ease) both;
  animation-delay: calc(var(--i) * 0.09s);
}
.dm-strip {
  display: flex;
  height: clamp(150px, 16vw, 230px);
  margin-right: calc(var(--gutter) * -1);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  mask-image: linear-gradient(90deg, transparent 0, #000 22%);
}
.dm-strip li {
  flex: 0 0 34%;
  margin-left: -8%;
  height: 100%;
}
.dm-strip .media {
  height: 100%;
  border-radius: 4px;
  box-shadow: 0 18px 30px -16px rgba(12, 14, 19, 0.55);
}
.dm-strip .media img {
  height: 100%;
  object-fit: cover;
}

/* showroom */
.dm-show {
  background: #fff;
  padding: clamp(12px, 2vw, 24px) 0 clamp(56px, 6vw, 104px);
}
.dm-room {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 360px);
  gap: clamp(16px, 2vw, 28px);
  background: #0c0e13;
  color: #f4f5f7;
  padding: clamp(14px, 2vw, 26px);
  border-radius: 4px;
  box-shadow: 0 40px 70px -40px rgba(12, 14, 19, 0.7);
}
.dm-main,
.dm-side {
  min-width: 0;
}
.dm-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 12px;
}
.dm-now {
  font: 700 1.125rem / 1.2 var(--f-display);
  color: #fff;
}
.dm-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.dm-ctl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  color: #fff;
  font: 600 0.8125rem / 1 var(--f-body);
  transition:
    background var(--t-fast),
    border-color var(--t-fast),
    opacity var(--t-fast);
}
.dm-ctl svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.dm-ctl:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}
.dm-ctl:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.dm-ctl-go {
  background: var(--accent);
  border-color: var(--accent);
}
.dm-room :focus-visible {
  outline: 2px solid #ff7a6b;
  outline-offset: 2px;
}
.dm-confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 12px 14px;
  margin-bottom: 12px;
  border-left: 3px solid var(--accent);
  background: rgba(255, 255, 255, 0.07);
}
.dm-confirm[hidden] {
  display: none;
}
.dm-confirm p {
  flex: 1 1 240px;
  color: #e4e7ec;
  font-size: 0.9rem;
}
.dm-player {
  position: relative;
  aspect-ratio: var(--ar, 16 / 9);
  width: 100%;
  background: color-mix(in srgb, var(--tone, #2a74c9) 30%, #05070a);
  overflow: hidden;
}
.dm-layer {
  position: absolute;
  inset: 0;
}
.dm-layer[hidden] {
  display: none;
}
.dm-poster-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.18s var(--ease);
}
.dm-poster.is-swap .dm-poster-img,
.dm-poster.is-swap .dm-poster-body {
  opacity: 0;
}
.dm-poster-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(5, 7, 10, 0.82) 0, rgba(5, 7, 10, 0.1) 55%, transparent);
}
.dm-poster-body {
  position: absolute;
  left: clamp(16px, 3vw, 36px);
  right: clamp(16px, 3vw, 36px);
  bottom: clamp(16px, 3vw, 32px);
  display: grid;
  justify-items: start;
  gap: 10px;
  transition: opacity 0.18s var(--ease);
}
.dm-tag {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #e4e7ec;
}
.dm-poster-t {
  font: 700 clamp(1.6rem, 1rem + 2.4vw, 3rem) / 1.05 var(--f-display);
  color: #fff;
}
.dm-launch:disabled {
  background: rgba(255, 255, 255, 0.18);
  border-color: transparent;
  color: #e4e7ec;
  cursor: not-allowed;
}
.dm-load,
.dm-off {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
  background: #0c0e13;
  color: #e4e7ec;
}
.dm-load[hidden],
.dm-off[hidden] {
  display: none;
}
.dm-spin {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: dm-spin 0.9s linear infinite;
}
@keyframes dm-spin {
  to {
    transform: rotate(360deg);
  }
}
.dm-off-t {
  font: 700 1.5rem var(--f-display);
  color: #fff;
}
.dm-retry {
  color: #ff9b8f;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  min-height: 32px;
}
.dm-help {
  margin-top: 8px;
  font-size: 0.8125rem;
  color: #a9b0bd;
}
.dm-help[hidden],
.dm-slow[hidden],
.dm-retry[hidden] {
  display: none;
}
.dm-embed,
.dm-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}
.dm-info {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.dm-info-t {
  color: #fff;
  font-size: 1.125rem;
}
.dm-info-t b {
  font-size: 1.375rem;
}
.dm-info-d {
  margin: 8px 0 10px;
  color: #c3c9d4;
  max-width: 62ch;
}
.dm-info .link-arrow {
  color: #ff9b8f;
}

/* selector */
.dm-search label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: #c3c9d4;
}
.dm-search input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  background: #14171e;
  color: #fff;
  font: inherit;
}
.dm-search input::placeholder {
  color: #7f8795;
}
.dm-count {
  margin: 10px 0;
  font-size: 0.8125rem;
  color: #a9b0bd;
}
.dm-list {
  display: grid;
  gap: 2px;
  max-height: 560px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.dm-list li[hidden] {
  display: none;
}
.dm-item {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 60px;
  padding: 6px 10px 6px 6px;
  text-align: left;
  color: #e4e7ec;
  border-radius: 3px;
  transition:
    background var(--t-fast),
    transform var(--t-fast) var(--ease);
}
.dm-item:hover {
  background: rgba(255, 255, 255, 0.07);
}
.dm-item[aria-pressed="true"] {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 3px 0 0 var(--accent);
  transform: translateX(3px);
}
.dm-thumb {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 3px;
  background: color-mix(in srgb, var(--tone, #2a74c9) 45%, #0c0e13);
}
.dm-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dm-item-t b {
  display: block;
  color: #fff;
  font-size: 0.9375rem;
}
.dm-item-t span {
  font-size: 0.78rem;
  color: #9aa2b0;
}
.dm-empty {
  padding: 18px 0;
  display: grid;
  gap: 12px;
  justify-items: start;
  color: #c3c9d4;
}
.dm-empty[hidden] {
  display: none;
}

/* collection */
.dm-coll {
  background: var(--light);
  padding-block: clamp(56px, 7vw, 120px);
}
.dm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: clamp(28px, 3vw, 44px) clamp(16px, 2vw, 28px);
}
.dm-card-media {
  overflow: hidden;
  border-radius: 4px;
  box-shadow:
    0 16px 28px -16px rgba(12, 14, 19, 0.6),
    0 0 0 1px rgba(12, 14, 19, 0.08);
}
.dm-card .media {
  aspect-ratio: 4 / 3;
  border-radius: 0;
}
.dm-card .media img {
  height: 100%;
  transition: transform 0.4s var(--ease);
}
.dm-card:hover .media img,
.dm-card:focus-within .media img {
  transform: scale(1.06);
}
.is-home main .dm-card h3 {
  margin: 14px 0 6px;
  font-size: 1.25rem;
}
.dm-card p {
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.dm-card-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-top: 12px;
  min-height: 44px;
}
.dm-soon {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2);
}
@media (hover: hover) {
  .dm-card-act > :not(.dm-soon) {
    opacity: 0;
    translate: 0 6px;
    transition:
      opacity 0.2s var(--ease),
      translate 0.2s var(--ease);
  }
  .dm-card:hover .dm-card-act > *,
  .dm-card:focus-within .dm-card-act > * {
    opacity: 1;
    translate: 0 0;
  }
}

/* how it works */
.dm-how {
  background: #fff;
  padding-block: clamp(56px, 7vw, 120px);
}
.dm-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(32px, 6vw, 112px);
}
.dm-steps li {
  padding: clamp(24px, 3vw, 40px) 0;
  border-top: 1px solid var(--line-light);
}
.dm-n {
  display: block;
  font: 700 0.875rem var(--f-body);
  color: var(--accent-on-light);
  margin-bottom: 10px;
}
.is-home main .dm-steps h3 {
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
  margin-bottom: 10px;
}
.dm-steps p {
  color: var(--ink-2);
  max-width: 44ch;
}

/* operators and agents */
.dm-biz {
  background: var(--light);
  padding-block: clamp(56px, 7vw, 112px);
}
.dm-biz-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dm-biz-col {
  display: grid;
  gap: 14px;
  align-content: start;
  justify-items: start;
  padding: 8px clamp(20px, 4vw, 64px) 8px 0;
}
.dm-biz-col + .dm-biz-col {
  padding-left: clamp(20px, 4vw, 64px);
  border-left: 1px solid var(--line-light);
}
.is-home main .dm-biz-col h3 {
  font-size: 1.75rem;
}
.dm-biz-col p {
  color: var(--ink-2);
  max-width: 44ch;
}

.dm-resp {
  background: #fff;
  padding-block: clamp(40px, 5vw, 80px);
  border-bottom: 1px solid var(--line-light);
}
.dm-resp-in > * {
  max-width: 780px;
}
.dm-resp p {
  margin-top: 14px;
  color: var(--ink-2);
}

@media (max-width: 960px) {
  .dm-hero-in,
  .dm-room {
    grid-template-columns: minmax(0, 1fr);
  }
  .dm-strip {
    margin-right: 0;
  }
  .dm-list {
    max-height: 340px;
  }
  .dm-steps,
  .dm-biz-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .dm-biz-col + .dm-biz-col {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line-light);
    margin-top: 28px;
    padding-top: 28px;
  }
}

@media (max-width: 600px) {
  .dm-poster-body {
    gap: 6px;
    left: 12px;
    bottom: 12px;
  }
  .dm-tag {
    font-size: 0.65rem;
  }
  .dm-poster-t {
    font-size: 1.2rem;
  }
  .is-home main .dm-room .dm-launch {
    min-height: 38px;
    padding: 0 16px;
    font-size: 0.8125rem;
  }
}

/* demo player: a plain iframe, with a notice over it while no demo URL is set */
.dm-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}
.dm-player > .dm-off {
  position: absolute;
  inset: 0;
}
.dm-player > .dm-off[hidden] {
  display: none;
}

.dm-show .dm-player {
  background: #0c0e13;
  border-radius: 4px;
  box-shadow: 0 40px 70px -40px rgba(12, 14, 19, 0.7);
}

/* =========================================================
   Demo page, black premium treatment: near-black page, hairlines, large quiet type, red used sparingly
   ========================================================= */
.is-demo main {
  --dm-bg: #050507;
  --dm-bg-2: #0b0c10;
  --dm-line: rgba(255, 255, 255, 0.12);
  --dm-text: #f4f5f7;
  --dm-mute: #a3abb8;
  background: var(--dm-bg);
  color: var(--dm-text);
}
.is-demo main .dm-small {
  color: var(--dm-mute);
}
.is-demo main .lede {
  color: #b8bfcb;
}
.is-demo main h1,
.is-demo main h2,
.is-demo main h3 {
  color: #fff;
  text-transform: none;
}
.is-demo main .dm-head h2,
.is-demo main .dm-resp h2 {
  font-size: clamp(2rem, 1.1rem + 3vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.is-demo main .dm-head h2::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: 18px;
  background: var(--accent);
}

/* hero */
.is-demo .dm-hero {
  background:
    radial-gradient(60% 90% at 85% 40%, rgba(255, 255, 255, 0.05), transparent 70%),
    var(--dm-bg);
  padding: clamp(32px, 4vw, 64px) 0 clamp(48px, 5vw, 88px);
  border-bottom: 1px solid var(--dm-line);
}
.is-demo main .dm-hero h1 {
  font-size: clamp(2.2rem, 1rem + 3.6vw, 4.3rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  max-width: 15ch;
}
.is-demo .dm-hero .breadcrumb a,
.is-demo .dm-hero .breadcrumb li {
  color: var(--dm-mute);
}
.is-demo .dm-hero .breadcrumb [aria-current] {
  color: #fff;
}
.is-demo .dm-strip .media {
  box-shadow:
    0 24px 44px -18px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* player */
.is-demo .dm-show {
  background: var(--dm-bg);
  padding: clamp(64px, 7vw, 120px) 0 clamp(64px, 7vw, 120px);
}
.is-demo .dm-show .dm-player {
  background: #000;
  border-radius: 2px;
  box-shadow:
    0 0 0 1px var(--dm-line),
    0 60px 120px -40px rgba(200, 40, 31, 0.28),
    0 40px 80px -30px rgba(0, 0, 0, 1);
}

/* collection */
.is-demo .dm-coll {
  background: var(--dm-bg-2);
  padding-block: clamp(64px, 7vw, 120px);
  border-top: 1px solid var(--dm-line);
}
.is-demo .dm-card-media {
  border-radius: 2px;
  box-shadow:
    0 0 0 1px var(--dm-line),
    0 22px 36px -18px rgba(0, 0, 0, 0.95);
}
.is-demo main .dm-card h3 {
  font-size: 1.2rem;
}
.is-demo .dm-card p {
  color: var(--dm-mute);
}
.is-demo .link-arrow {
  color: #ff8d80;
}

/* how it works: four columns, outlined numerals */
.is-demo .dm-how {
  background: var(--dm-bg);
  padding-block: clamp(64px, 7vw, 120px);
  border-top: 1px solid var(--dm-line);
}
.is-demo .dm-steps {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--dm-line);
}
.is-demo .dm-steps li {
  padding: clamp(24px, 2.4vw, 40px) clamp(16px, 2vw, 32px) 0 0;
  border-top: 0;
}
.is-demo .dm-steps li + li {
  padding-left: clamp(16px, 2vw, 32px);
  border-left: 1px solid var(--dm-line);
}
.is-demo .dm-n {
  font: 700 clamp(3rem, 2rem + 3vw, 5rem) / 1 var(--f-display);
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35);
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}
.is-demo main .dm-steps h3 {
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem);
}
.is-demo .dm-steps p {
  color: var(--dm-mute);
}

/* operators and agents */
.is-demo .dm-biz {
  background: var(--dm-bg-2);
  padding-block: clamp(64px, 7vw, 120px);
  border-top: 1px solid var(--dm-line);
}
.is-demo .dm-biz-grid {
  border-top: 1px solid var(--dm-line);
}
.is-demo .dm-biz-col {
  padding-top: clamp(24px, 3vw, 44px);
}
.is-demo .dm-biz-col + .dm-biz-col {
  border-left-color: var(--dm-line);
}
.is-demo main .dm-biz-col h3 {
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
}
.is-demo .dm-biz-col p {
  color: var(--dm-mute);
}

/* responsible play */
.is-demo .dm-resp {
  background: var(--dm-bg);
  border-top: 1px solid var(--dm-line);
  padding-block: clamp(48px, 5vw, 88px);
}
.is-demo .dm-resp p {
  color: var(--dm-mute);
}
.is-demo main .dm-resp h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem);
}

@media (max-width: 960px) {
  .is-demo .dm-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .is-demo .dm-steps li:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
  .is-demo .dm-steps li:nth-child(n + 3) {
    border-top: 1px solid var(--dm-line);
    margin-top: 24px;
  }
}
@media (max-width: 600px) {
  .is-demo .dm-steps {
    grid-template-columns: minmax(0, 1fr);
  }
  .is-demo .dm-steps li,
  .is-demo .dm-steps li + li {
    padding-left: 0;
    border-left: 0;
    padding-bottom: 24px;
    margin-top: 0;
  }
  .is-demo .dm-steps li + li {
    border-top: 1px solid var(--dm-line);
  }
}

/* demo hero: supplied background art (dark on the left for the copy, panther and temple on the right) */
.is-demo .dm-hero {
  background:
    linear-gradient(90deg, rgba(5, 5, 7, 0.55) 0, transparent 55%),
    #050507 url("/assets/img/demobackground.webp") right center / cover no-repeat;
  min-height: clamp(400px, 36vw, 560px);
  display: grid;
  align-items: center;
}
.is-demo .dm-hero-in {
  grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 760px) {
  .is-demo .dm-hero {
    background:
      linear-gradient(90deg, rgba(5, 5, 7, 0.88) 0, rgba(5, 5, 7, 0.55) 100%),
      #050507 url("/assets/img/demobackground.webp") 78% center / cover no-repeat;
  }
}

/* demo "cabinet": a framed showcase around the iframe (CSS only, no frame artwork was supplied) */
.dm-cabinet {
  position: relative;
  padding: clamp(10px, 1.4vw, 20px);
  background:
    linear-gradient(180deg, #14151a, #08080b);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  box-shadow:
    0 0 0 6px #050507,
    0 0 0 7px rgba(255, 255, 255, 0.1),
    0 70px 120px -40px rgba(200, 40, 31, 0.35),
    0 40px 80px -30px #000;
}
/* red corner brackets */
.dm-cabinet::before,
.dm-cabinet::after {
  content: "";
  position: absolute;
  width: clamp(22px, 3vw, 40px);
  height: clamp(22px, 3vw, 40px);
  pointer-events: none;
  border: 3px solid var(--accent);
}
.dm-cabinet::before {
  left: -8px;
  top: -8px;
  border-right: 0;
  border-bottom: 0;
  border-top-left-radius: 8px;
}
.dm-cabinet::after {
  right: -8px;
  bottom: -8px;
  border-left: 0;
  border-top: 0;
  border-bottom-right-radius: 8px;
}
.dm-plaque {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0 4px clamp(8px, 1vw, 12px);
  font: 600 0.72rem / 1 var(--f-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a3abb8;
}
.dm-plaque span:first-child {
  color: #fff;
}
.dm-plaque span:first-child::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 1px;
}
.is-demo .dm-show .dm-cabinet .dm-player {
  border-radius: 2px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    inset 0 0 0 1px #000;
}
@media (max-width: 600px) {
  .dm-plaque span:last-child {
    display: none;
  }
}

/* =========================================================
   Solutions page (.is-sol): white editorial layout, dark agent and portfolio bands, concept diagrams in SVG
   ========================================================= */
/* no slanted joins on this page */
.is-sol main > section:not(.banner):not(.zz) {
  margin-top: 0;
  clip-path: none;
}
.is-sol main > section:not(.banner):not(.zz)::before {
  display: none;
}
.is-sol main {
  background: #fff;
}
.sol-head {
  margin-bottom: clamp(24px, 3.4vw, 48px);
  max-width: 62ch;
}
.sol-head .lede {
  margin-top: 18px;
}
.is-home main .sol-head h2,
.is-home main .sol-port h2,
.is-home main .sol-why h2 {
  font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.018em;
}

/* hero */
.sol-hero {
  padding: clamp(24px, 3vw, 48px) 0 clamp(56px, 6vw, 104px);
  background: #fff;
  overflow: hidden;
}
.sol-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.sol-hero .breadcrumb {
  margin-bottom: clamp(20px, 3vw, 40px);
}
.is-home main .sol-hero h1 {
  font-size: clamp(2.1rem, 1rem + 3.2vw, 4.1rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.sol-hero .lede {
  margin-top: 22px;
  max-width: 50ch;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
}
.sol-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.sol-hero [data-stage] {
  animation: bf-rise 0.55s var(--ease) both;
  animation-delay: calc(var(--i) * 0.1s);
}
.sol-hero-art {
  animation: bf-rise 0.7s 0.25s var(--ease) both;
}
.sol-hero-diagram {
  position: relative;
  aspect-ratio: 5 / 4;
}
.sol-hc-stack {
  position: absolute;
  left: 0;
  top: 5%;
  width: 35%;
  height: 72%;
}
.sol-hc {
  position: absolute;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  background: color-mix(in srgb, var(--tone) 40%, #0c0e13);
  box-shadow:
    0 22px 36px -16px rgba(12, 14, 19, 0.6),
    0 0 0 1px rgba(12, 14, 19, 0.1);
}
.sol-hc img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.sol-hc-b {
  left: 18%;
  top: 0;
  width: 80%;
  z-index: 1;
}
.sol-hc-a {
  left: 0;
  top: 22%;
  width: 82%;
  z-index: 2;
}
.sol-hc-c {
  left: 14%;
  top: 46%;
  width: 80%;
  z-index: 3;
}
.sol-hc-d {
  left: 0;
  top: 68%;
  width: 70%;
  z-index: 4;
}
.sol-routes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.rt-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-dasharray: 1;
  animation: sol-draw 0.9s 0.8s var(--ease) backwards;
}
.rt-line-2 {
  animation-delay: 1s;
}
@keyframes sol-draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
.rt-lab {
  font: 600 15px var(--f-body);
  fill: var(--accent-on-light);
}
.rt-node {
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 1.5;
}
.rt-node-d {
  fill: var(--ink);
}
.rt-t1 {
  font: 700 20px var(--f-display);
  fill: var(--ink);
}
.rt-t1-d {
  fill: #fff;
}
.rt-cap {
  font: 600 14px var(--f-body);
  fill: var(--ink-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sol-hero-img {
  display: block;
  width: 100%;
  height: auto;
}

/* the two solutions */
.sol-over {
  padding: clamp(56px, 7vw, 112px) 0 0;
  background: #fff;
}
.sol-panel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
  padding-block: clamp(40px, 5vw, 88px);
  border-top: 1px solid var(--line-light);
}
.sol-panel-flip .sol-panel-vis {
  order: -1;
}
.sol-panel-flip {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}
.sol-panel-text {
  position: relative;
  padding-left: clamp(20px, 2vw, 28px);
}
.sol-panel-text::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0.35);
  transform-origin: top;
  transition: transform 0.3s var(--ease);
}
.sol-panel:hover .sol-panel-text::before,
.sol-panel:focus-within .sol-panel-text::before {
  transform: scaleY(1);
}
.sol-tag {
  font: 600 0.8rem / 1 var(--f-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-on-light);
  margin-bottom: 16px;
}
.is-home main .sol-panel h3 {
  font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: 18px;
}
.sol-lead {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  color: var(--ink-2);
  max-width: 48ch;
}
.sol-ben {
  margin: 26px 0 30px;
  display: grid;
  gap: 0;
  max-width: 52ch;
}
.sol-ben li {
  position: relative;
  padding: 14px 0 14px 26px;
  border-top: 1px solid var(--line-light);
  color: var(--ink);
  font-weight: 500;
}
.sol-ben li:last-child {
  border-bottom: 1px solid var(--line-light);
}
.sol-ben li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35em;
  width: 12px;
  height: 2px;
  background: var(--accent);
}
.sol-cta {
  font-size: 1.0625rem;
}
.is-home main .sol-cta {
  color: var(--accent-on-light);
}
.sol-panel-vis img,
.sol-panel-vis svg {
  display: block;
  width: 100%;
  height: auto;
}
.sol-note {
  margin-top: 10px;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.sol-dia {
  color: var(--accent);
}
.sol-dia .d-box {
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 1.5;
}
.sol-dia .d-box-r {
  stroke: var(--accent);
}
.sol-dia .d-in {
  fill: var(--light);
  stroke: rgba(20, 22, 27, 0.22);
}
.sol-dia .d-t {
  font: 700 20px var(--f-display);
  fill: var(--ink);
}
.sol-dia .d-h {
  font: 700 18px var(--f-display);
  fill: var(--ink);
}
.sol-dia .d-s {
  font: 600 14px var(--f-body);
  fill: var(--ink-2);
}
.sol-dia .d-s2 {
  font: 600 16px var(--f-body);
  fill: var(--ink);
}
.sol-dia .d-arrow {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
}
.sol-dia .d-line {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.5;
}
.sol-agent {
  background: #0c0e13;
  padding: clamp(8px, 1vw, 16px) 0;
}
.sol-agent .sol-panel {
  border-top: 0;
}
.is-home main .sol-agent h3,
.is-home main .sol-agent .sol-ben li {
  color: #fff;
}
.sol-agent .sol-lead,
.sol-agent .sol-note {
  color: #b8bfcb;
}
.sol-agent .sol-ben li {
  border-color: rgba(255, 255, 255, 0.18);
}
.sol-agent .sol-tag,
.is-home main .sol-agent .sol-cta {
  color: #ff8d80;
}
.sol-dia-dark .d-box {
  fill: #14171e;
  stroke: rgba(255, 255, 255, 0.5);
}
.sol-dia-dark .d-box-r {
  stroke: var(--accent);
}
.sol-dia-dark .d-in {
  fill: #1f232d;
  stroke: rgba(255, 255, 255, 0.2);
}
.sol-dia-dark .d-t,
.sol-dia-dark .d-h,
.sol-dia-dark .d-s2 {
  fill: #fff;
}
.sol-dia-dark .d-s {
  fill: #b8bfcb;
}
.sol-dia-dark .d-line {
  stroke: rgba(255, 255, 255, 0.45);
}

/* comparison */
.sol-cmp {
  background: #fff;
  padding: clamp(64px, 7vw, 120px) 0;
}
.sol-table table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.sol-table thead th {
  padding: 0 24px 22px;
  font: 700 clamp(1.1rem, 1rem + 0.6vw, 1.5rem) / 1.15 var(--f-display);
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
}
.sol-table thead th:first-child {
  padding-left: 0;
  font: 600 0.8rem / 1 var(--f-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  vertical-align: bottom;
}
.sol-table thead th:nth-child(2)::before,
.sol-table thead th:nth-child(3)::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-bottom: 14px;
  background: var(--accent);
}
.sol-table tbody th,
.sol-table tbody td {
  padding: clamp(20px, 2.2vw, 32px) 24px;
  border-bottom: 1px solid var(--line-light);
  vertical-align: top;
  transition: background 0.2s var(--ease);
}
.sol-table tbody th {
  padding-left: 0;
  width: 24%;
  font-weight: 700;
  color: var(--ink);
}
.sol-table tbody td {
  color: var(--ink-2);
  font-size: 1.0625rem;
  width: 38%;
}
.sol-table tbody tr:hover td,
.sol-table tbody tr:hover th {
  background: rgba(200, 40, 31, 0.045);
}
.sol-table tbody tr:hover th {
  box-shadow: inset 3px 0 0 var(--accent);
  padding-left: 14px;
}

/* shared portfolio */
.sol-port {
  background: #08090c;
  padding: clamp(64px, 7vw, 120px) 0 clamp(64px, 7vw, 112px);
  overflow: hidden;
}
.sol-port-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  margin-bottom: clamp(28px, 3.4vw, 48px);
}
.sol-port-head > div:first-child {
  max-width: 64ch;
}
.is-home main .sol-port h2 {
  color: #fff;
  margin-bottom: 18px;
}
.is-home main .sol-port .lede {
  color: #b8bfcb;
  margin-bottom: 26px;
}
.sol-rail-ctl {
  display: flex;
  gap: 8px;
}
.sol-arrow {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  color: #fff;
  background: transparent;
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease),
    opacity 0.2s;
}
.sol-arrow svg {
  width: 20px;
  height: 20px;
}
.sol-arrow:hover:not(:disabled) {
  background: #fff;
  color: var(--ink);
}
.sol-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
.sol-port :focus-visible {
  outline: 2px solid #ff8d80;
  outline-offset: 3px;
}
.sol-rail {
  overflow-x: auto;
  scrollbar-width: none;
  --rail-pad: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  padding-left: var(--rail-pad);
  scroll-padding-left: var(--rail-pad);
  padding-bottom: 8px;
}
.sol-rail::-webkit-scrollbar {
  display: none;
}
.sol-rail-track {
  display: flex;
  gap: clamp(14px, 1.6vw, 24px);
  width: max-content;
  padding-right: var(--gutter);
}
.sol-g {
  flex: 0 0 clamp(230px, 24vw, 340px);
}
.sol-g a {
  display: block;
}
.sol-g .media {
  aspect-ratio: 4 / 3;
  border-radius: 3px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 24px 40px -18px #000;
}
.sol-g .media img {
  height: 100%;
  transition: transform 0.4s var(--ease);
}
.sol-g a:hover .media img,
.sol-g a:focus-visible .media img {
  transform: scale(1.06);
}
.sol-g span {
  display: block;
  margin-top: 12px;
  color: #fff;
  font-weight: 600;
}
.sol-g a:hover span,
.sol-g a:focus-visible span {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* why partners choose */
.sol-why {
  background: #fff;
  padding: clamp(64px, 7vw, 128px) 0;
}
.sol-why-in {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 120px);
  align-items: start;
}
.sol-why-head {
  position: sticky;
  top: calc(var(--header-h) + 32px);
}
.sol-why-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: clamp(16px, 2vw, 32px);
  padding-block: clamp(28px, 3vw, 44px);
  border-top: 1px solid var(--line-light);
}
.sol-why-row:last-child {
  border-bottom: 1px solid var(--line-light);
}
.sol-ic svg {
  width: 36px;
  height: 36px;
  color: var(--accent-on-light);
}
.is-home main .sol-why-row h3 {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
  margin-bottom: 10px;
}
.sol-why-row p {
  color: var(--ink-2);
  max-width: 52ch;
}
.sol-region {
  display: block;
  width: min(100%, 460px);
  height: auto;
  margin-top: 20px;
}
.sol-brands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 32px;
  margin-top: 22px;
}
.sol-brands img {
  height: 36px;
  width: auto;
  display: block;
}
.sol-brand-text {
  font: 700 1.1rem var(--f-display);
  color: var(--ink);
}

/* support */
.sol-support {
  background: var(--light);
  padding: clamp(64px, 7vw, 120px) 0;
}
.sol-support .sol-head {
  max-width: 70ch;
}
.is-home main .sol-support h2 {
  font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.018em;
}
.sol-flows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 88px);
  margin-bottom: clamp(36px, 4vw, 64px);
}
.is-home main .sol-flow h3 {
  font: 600 0.8rem / 1 var(--f-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 22px;
}
.sol-flow ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.sol-step {
  position: relative;
  padding-top: 22px;
  font: 700 clamp(1rem, 0.9rem + 0.5vw, 1.25rem) / 1.2 var(--f-display);
  color: var(--ink-2);
  border-top: 2px solid rgba(20, 22, 27, 0.2);
  transition:
    color 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.sol-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: -7px;
  width: 12px;
  height: 12px;
  background: var(--light);
  border: 2px solid rgba(20, 22, 27, 0.3);
  border-radius: 50%;
  transition:
    background 0.3s var(--ease),
    border-color 0.3s var(--ease);
}
.sol-step.is-lit {
  color: var(--ink);
  border-color: var(--accent);
}
.sol-step.is-lit::before {
  background: var(--accent);
  border-color: var(--accent);
}
.sol-contacts h3 {
  margin-bottom: 16px;
  font-size: 1.25rem;
}
.sol-contacts ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.sol-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  padding: 0 20px;
  border: 1px solid var(--ink);
  border-radius: 3px;
  color: var(--ink);
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease);
}
a.sol-contact:hover,
a.sol-contact:focus-visible {
  background: var(--ink);
  color: #fff;
}
.sol-contact .arrow {
  width: 16px;
  height: 16px;
}
.sol-contact.is-off {
  border: 1px dashed rgba(20, 22, 27, 0.35);
  color: var(--ink-2);
}
.sol-contact.is-off span {
  font-size: 0.8125rem;
}

@media (max-width: 960px) {
  .sol-hero-in,
  .sol-panel,
  .sol-panel-flip,
  .sol-why-in {
    grid-template-columns: minmax(0, 1fr);
  }
  .sol-panel-flip .sol-panel-vis {
    order: 0;
  }
  .sol-why-head {
    position: static;
  }
  .sol-flows,
  .sol-contacts ul {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .sol-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .sol-table tbody tr {
    display: block;
    padding: 22px 0;
    border-bottom: 1px solid var(--line-light);
  }
  .sol-table tbody th,
  .sol-table tbody td {
    display: block;
    width: auto;
    border: 0;
    padding: 0;
  }
  .sol-table tbody th {
    margin-bottom: 12px;
    font-size: 1.1rem;
  }
  .sol-table tbody td {
    display: grid;
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 12px;
    padding: 8px 0;
    font-size: 1rem;
  }
  .sol-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--accent-on-light);
  }
  .sol-table tbody tr:hover td,
  .sol-table tbody tr:hover th {
    background: none;
    box-shadow: none;
    padding-left: 0;
  }
  .sol-flow ol {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
}

/* solutions hero: supplied background (fades to white on the left for the copy, desk and monitors on the right) */
.is-sol .sol-hero {
  background:
    linear-gradient(90deg, #fff 0, rgba(255, 255, 255, 0.9) 36%, rgba(255, 255, 255, 0) 52%),
    #fff url("/assets/img/solutionbackground.webp") right center / cover no-repeat;
  min-height: clamp(460px, 40vw, 620px);
  display: grid;
  align-items: center;
}
.is-sol .sol-hero-in {
  grid-template-columns: minmax(0, 1fr);
}
.is-sol .sol-hero-copy {
  max-width: min(560px, 46%);
}
.is-home main .is-sol .sol-hero h1,
.is-sol.is-home main .sol-hero h1 {
  font-size: clamp(2rem, 1rem + 2.4vw, 3.3rem);
}
@media (max-width: 760px) {
  .is-sol .sol-hero {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0, rgba(255, 255, 255, 0.82) 100%),
      #fff url("/assets/img/solutionbackground.webp") 78% center / cover no-repeat;
  }
  .is-sol .sol-hero-copy {
    max-width: none;
  }
}

/* =========================================================
   API integration page (.is-api): white editorial layout, charcoal wallet and benefits bands, SVG concept diagrams
   ========================================================= */
.api-sec {
  padding: clamp(64px, 7vw, 120px) 0;
  scroll-margin-top: 56px;
}
.api-head {
  max-width: 62ch;
  margin-bottom: clamp(28px, 3.6vw, 52px);
}
.api-head .lede {
  margin-top: 18px;
}
.is-home main .api-head h2 {
  font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.018em;
}
.api-note {
  margin-top: 10px;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* diagram vocabulary (shared by every SVG on this page) */
.api-dia svg,
.api-ill-svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--accent);
}
.ad-box {
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 1.5;
}
.ad-box-d {
  fill: var(--ink);
  stroke: var(--ink);
}
.ad-box-w {
  fill: #1c1f27;
  stroke: rgba(255, 255, 255, 0.55);
}
.ad-frame {
  fill: none;
  stroke: rgba(12, 14, 19, 0.25);
}
.ad-h {
  font: 700 20px var(--f-display);
  fill: var(--ink);
}
.ad-h-w {
  fill: #fff;
}
.ad-h-api,
.ad-h-sm {
  font-size: 17px;
}
.ad-s {
  font: 500 15px var(--f-body);
  fill: var(--ink-2);
}
.ad-s-w {
  fill: #c3c9d4;
}
.ad-cap {
  font: 600 14px var(--f-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--ink-2);
}
.ad-lab {
  font: 600 15px var(--f-body);
  fill: #ff9b8f;
}
.ad-note {
  font: 500 14px var(--f-body);
  fill: var(--ink-2);
}
.ad-bar {
  fill: rgba(20, 22, 27, 0.1);
}
.ad-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
}

/* hero */
.api-hero {
  background: #fff;
  overflow: hidden;
  padding: clamp(24px, 3vw, 48px) 0 clamp(56px, 6vw, 104px);
}
.api-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.api-hero .breadcrumb {
  margin-bottom: clamp(20px, 3vw, 40px);
}
.is-home main .api-hero h1 {
  font-size: clamp(2.1rem, 1rem + 3.2vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.api-hero .lede {
  margin-top: 22px;
  max-width: 52ch;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
}
.api-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.api-hero [data-stage] {
  animation: bf-rise 0.55s var(--ease) both;
  animation-delay: calc(var(--i) * 0.1s);
}
.api-dia {
  position: relative;
}
.api-dia .ad-part {
  animation: bf-rise 0.5s var(--ease) both;
}
.api-dia .ad-p1 {
  animation-delay: 0.3s;
}
.api-dia .ad-p2 {
  animation-delay: 0.8s;
}
.api-dia .ad-p3 {
  animation: bf-rise 0.5s 1.3s var(--ease) both;
}
.api-dia .ad-line {
  stroke-dasharray: 1;
  animation: sol-draw 0.6s 0.55s var(--ease) backwards;
}
.api-dia .ad-line-2 {
  animation-delay: 1.05s;
}
.api-hc-wrap {
  position: absolute;
  left: 68%;
  top: 8%;
  width: 32%;
  height: 80%;
}
.api-hc {
  position: absolute;
  display: block;
  overflow: hidden;
  border-radius: 3px;
  width: 74%;
  background: color-mix(in srgb, var(--tone) 40%, #0c0e13);
  box-shadow:
    0 18px 30px -14px rgba(12, 14, 19, 0.6),
    0 0 0 1px rgba(12, 14, 19, 0.12);
}
.api-hc img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.api-hc-a {
  left: 0;
  top: 0;
  z-index: 1;
}
.api-hc-b {
  right: 0;
  top: 22%;
  z-index: 2;
}
.api-hc-c {
  left: 0;
  top: 46%;
  z-index: 3;
}
.api-hc-d {
  right: 0;
  top: 68%;
  z-index: 4;
}
.api-hc-img {
  display: block;
  width: 100%;
  height: auto;
}

/* sticky page navigation reuses the bonus page strip (.bf-nav) */
.api-nav .bf-n {
  display: none;
}

/* coverage */
.api-cov {
  background: #fff;
}
.api-cov-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}
.api-caps {
  display: grid;
}
.api-cap {
  display: block;
  width: 100%;
  text-align: left;
  padding: clamp(18px, 2vw, 28px) 0 clamp(18px, 2vw, 28px) clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--line-light);
  position: relative;
  background: transparent;
  transition: background 0.2s var(--ease);
}
.api-caps li:last-child .api-cap {
  border-bottom: 1px solid var(--line-light);
}
.api-cap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.25s var(--ease);
}
.api-cap[aria-pressed="true"]::before {
  transform: scaleY(1);
}
.api-cap:hover {
  background: rgba(200, 40, 31, 0.04);
}
.is-home main .api-cap h3 {
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  margin-bottom: 8px;
  color: var(--ink-2);
  transition: color 0.2s var(--ease);
}
.is-home main .api-cap[aria-pressed="true"] h3 {
  color: var(--ink);
}
.api-cap p {
  color: var(--ink-2);
  max-width: 54ch;
}
.api-cap:focus-visible,
.api-tablist button:focus-visible,
.api-replay:focus-visible,
.api-q summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.api-ill {
  position: sticky;
  top: calc(var(--header-h) + 80px);
}
.api-ill-panel {
  padding: clamp(14px, 2vw, 28px);
  background: var(--light);
  border: 1px solid var(--line-light);
  animation: api-fade 0.3s var(--ease);
}
.api-ill-panel[hidden] {
  display: none;
}
@keyframes api-fade {
  from {
    opacity: 0;
    translate: 0 8px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* wallet (charcoal) */
.api-wallet {
  background: #14161b;
  color: #fff;
}
.is-home main .api-wallet h2,
.is-home main .api-why h2 {
  color: #fff;
}
.is-home main .api-wallet .lede,
.is-home main .api-why .lede {
  color: #b8bfcb;
}
.api-wallet .api-note {
  color: #a3abb8;
}
.api-tablist {
  display: inline-flex;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.api-tablist button {
  min-height: 52px;
  padding: 0 clamp(18px, 3vw, 36px);
  color: #c3c9d4;
  font: 600 1rem var(--f-body);
  background: transparent;
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease);
}
.api-tablist button[aria-selected="true"] {
  background: #fff;
  color: var(--ink);
}
.api-tablist button:focus-visible,
.api-replay:focus-visible {
  outline-color: #ff9b8f;
}
.api-tabpanel {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
}
.api-tabpanel[hidden] {
  display: none;
}
.api-tabpanel:not([hidden]) {
  animation: api-fade 0.3s var(--ease);
}
.api-flow {
  padding: clamp(14px, 2vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.api-flow-text {
  display: grid;
  gap: 14px;
}
.api-flow-text li {
  padding-left: 22px;
  position: relative;
  color: #e4e7ec;
  font-size: 1.0625rem;
}
.api-flow-text li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 12px;
  height: 2px;
  background: var(--accent);
}
.api-tab-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin: 18px 0 clamp(36px, 4vw, 64px);
}
.api-tab-foot .api-note {
  margin: 0;
}
.api-replay {
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  color: #fff;
  font: 600 0.9375rem var(--f-body);
  background: transparent;
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease);
}
.api-replay:hover {
  background: #fff;
  color: var(--ink);
}
.api-flow .ad-flow {
  stroke-dasharray: 1;
}
.api-flow.is-play .ad-flow {
  animation: sol-draw 0.9s var(--ease) both;
}
.api-flow.is-play .ad-flow-2 {
  animation-delay: 0.7s;
}
.api-table table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.api-table thead th {
  padding: 0 24px 20px;
  font: 700 clamp(1.05rem, 1rem + 0.5vw, 1.4rem) var(--f-display);
  color: #fff;
  border-bottom: 2px solid #fff;
}
.api-table thead th:first-child {
  padding-left: 0;
  font: 600 0.8rem var(--f-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a3abb8;
}
.api-table tbody th,
.api-table tbody td {
  padding: clamp(18px, 2vw, 28px) 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  vertical-align: top;
  transition: background 0.2s var(--ease);
}
.api-table tbody th {
  padding-left: 0;
  width: 24%;
  color: #fff;
  font-weight: 700;
}
.api-table tbody td {
  color: #c3c9d4;
  width: 38%;
}
.api-table tbody tr:hover td,
.api-table tbody tr:hover th {
  background: rgba(255, 255, 255, 0.05);
}
.api-advice {
  margin-top: 26px;
  color: #e4e7ec;
  font-size: 1.0625rem;
  padding-left: 18px;
  border-left: 3px solid var(--accent);
}

/* process: one line, four icons, no numbers */
.api-proc {
  background: #fff;
}
.api-stages {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 48px);
}
.api-line {
  position: absolute;
  left: 28px;
  right: 28px;
  top: 28px;
  height: 2px;
  background: var(--ink);
  transform: scaleX(1);
  transform-origin: left;
}
.js-motion .api-stages:not(.is-in) .api-line {
  transform: scaleX(0);
}
.api-stages .api-line {
  transition: transform 0.6s var(--ease);
}
.api-stage {
  position: relative;
}
.api-ico {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background: #fff;
  border: 2px solid var(--ink);
  color: var(--ink);
  margin-bottom: 24px;
  transition:
    opacity 0.4s var(--ease),
    translate 0.4s var(--ease);
}
.api-ico svg {
  width: 28px;
  height: 28px;
}
.js-motion .api-stages:not(.is-in) .api-ico {
  opacity: 0;
  translate: 0 12px;
}
.api-stage:nth-child(3) .api-ico {
  transition-delay: 0.12s;
}
.api-stage:nth-child(4) .api-ico {
  transition-delay: 0.24s;
}
.api-stage:nth-child(5) .api-ico {
  transition-delay: 0.36s;
}
.is-home main .api-stage h3 {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  margin-bottom: 10px;
}
.api-stage p {
  color: var(--ink-2);
}

/* requirements */
.api-reqs {
  background: var(--light);
}
.api-reqs-in {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(28px, 6vw, 112px);
  align-items: start;
}
.api-req {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: clamp(18px, 2vw, 26px) 0;
  border-top: 1px solid var(--line-light);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  font-weight: 600;
  color: var(--ink);
}
.api-req:last-child {
  border-bottom: 1px solid var(--line-light);
}
.api-tick {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--ink);
  color: var(--ink);
}
.api-tick svg {
  width: 16px;
  height: 16px;
}
.api-req.is-provided {
  position: relative;
  padding-left: 18px;
  margin-left: -18px;
  background: linear-gradient(90deg, rgba(200, 40, 31, 0.07), transparent 70%);
  box-shadow: inset 3px 0 0 var(--accent);
}
.api-req.is-provided .api-tick {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* why (charcoal editorial) */
.api-why {
  background: #14161b;
  color: #fff;
}
.api-why-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 104px);
  align-items: center;
}
.api-why-row {
  padding: clamp(20px, 2.4vw, 32px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.api-why-row:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.is-home main .api-why-row h3 {
  color: #fff;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  margin-bottom: 8px;
}
.is-home main .api-why-row p {
  color: #b8bfcb;
  max-width: 54ch;
}
.api-why-art {
  position: relative;
  aspect-ratio: 4 / 5;
}
.api-wc {
  position: absolute;
  display: block;
  width: 78%;
  overflow: hidden;
  border-radius: 3px;
  background: color-mix(in srgb, var(--tone) 40%, #0c0e13);
  box-shadow:
    0 30px 50px -20px #000,
    0 0 0 1px rgba(255, 255, 255, 0.1);
}
.api-wc img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.api-wc-a {
  left: 0;
  top: 0;
  z-index: 1;
}
.api-wc-b {
  right: 0;
  top: 30%;
  z-index: 2;
}
.api-wc-c {
  left: 6%;
  top: 62%;
  z-index: 3;
}
.api-phone {
  position: absolute;
  right: 4%;
  bottom: 0;
  z-index: 4;
  width: 34%;
  padding: 8px;
  background: #000;
  border: 2px solid #3a3e48;
  border-radius: 18px;
}
.api-phone img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
.api-route {
  margin-top: clamp(32px, 4vw, 56px);
  padding: 22px 0 0 18px;
  border-left: 3px solid var(--accent);
  color: #e4e7ec;
  font-size: 1.125rem;
}
.api-route a {
  color: #ff9b8f;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.api-why :focus-visible {
  outline: 2px solid #ff9b8f;
  outline-offset: 3px;
}

/* FAQ */
.api-faq {
  background: #fff;
}
.api-faq-in {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(28px, 6vw, 112px);
  align-items: start;
}
.api-q {
  border-top: 1px solid var(--line-light);
}
.api-q:last-child {
  border-bottom: 1px solid var(--line-light);
}
.api-q summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
  font: 700 clamp(1.05rem, 1rem + 0.4vw, 1.3rem) / 1.3 var(--f-display);
  color: var(--ink);
}
.api-q summary::-webkit-details-marker {
  display: none;
}
.api-pm {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
}
.api-pm::before,
.api-pm::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 9px;
  height: 2px;
  background: var(--accent);
  transition: transform 0.25s var(--ease);
}
.api-pm::after {
  transform: rotate(90deg);
}
.api-q[open] .api-pm::after {
  transform: rotate(0);
}
.api-q p {
  padding: 0 40px 24px 0;
  color: var(--ink-2);
  max-width: 62ch;
}
.api-q[open] p {
  animation: api-fade 0.3s var(--ease);
}

@media (max-width: 960px) {
  .api-hero-in,
  .api-cov-grid,
  .api-tabpanel,
  .api-reqs-in,
  .api-why-grid,
  .api-faq-in {
    grid-template-columns: minmax(0, 1fr);
  }
  .api-ill {
    position: static;
  }
  .api-stages {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding-left: 0;
  }
  .api-line {
    left: 27px;
    right: auto;
    top: 28px;
    bottom: 28px;
    width: 2px;
    height: auto;
    transform-origin: top;
  }
  .js-motion .api-stages:not(.is-in) .api-line {
    transform: scaleY(0);
  }
  .api-stage {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 20px;
  }
  .api-stage .api-ico {
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }
  .api-why-art {
    max-width: 440px;
  }
}
@media (max-width: 760px) {
  .api-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .api-table tbody tr {
    display: block;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  }
  .api-table tbody th,
  .api-table tbody td {
    display: block;
    width: auto;
    border: 0;
    padding: 0;
  }
  .api-table tbody th {
    margin-bottom: 10px;
    font-size: 1.1rem;
  }
  .api-table tbody td {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: 12px;
    padding: 8px 0;
  }
  .api-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #ff9b8f;
  }
  .api-table tbody tr:hover td,
  .api-table tbody tr:hover th {
    background: none;
  }
  .api-tablist {
    display: flex;
  }
  .api-tablist button {
    flex: 1;
    padding: 0 12px;
  }
}

/* hero diagram on small screens: stacked, readable components instead of a shrunken wide diagram */
.api-dia-m {
  display: none;
}
@media (max-width: 700px) {
  .api-dia svg,
  .api-dia .api-hc-wrap {
    display: none;
  }
  .api-dia-m {
    display: grid;
    gap: 0;
  }
  .api-dia-m li {
    position: relative;
    padding: 20px 22px;
    border: 1.5px solid var(--ink);
    background: #fff;
    animation: bf-rise 0.5s var(--ease) both;
  }
  .api-dia-m li + li {
    margin-top: 34px;
    animation-delay: 0.4s;
  }
  .api-dia-m li + li::before {
    content: "";
    position: absolute;
    left: 28px;
    top: -34px;
    height: 34px;
    width: 2px;
    background: var(--accent);
  }
  .api-dia-m li + li::after {
    content: "";
    position: absolute;
    left: 22px;
    top: -9px;
    border: 7px solid transparent;
    border-top: 9px solid var(--accent);
    border-bottom: 0;
  }
  .api-dia-m li.is-api {
    background: var(--ink);
    color: #fff;
  }
  .api-dia-m li:last-child {
    animation-delay: 0.8s;
  }
  .api-dia-m b {
    display: block;
    font: 700 1.2rem var(--f-display);
  }
  .api-dia-m span {
    display: block;
    margin-top: 4px;
    color: var(--ink-2);
  }
}

/* API hero on the supplied dark background (apibackground.webp): light copy, dark-variant diagram */
.is-api .api-hero {
  background:
    linear-gradient(90deg, #050507 0, rgba(5, 5, 7, 0.55) 40%, rgba(5, 5, 7, 0.1) 70%),
    #050507 url("/assets/img/apibackground.webp") right center / cover no-repeat;
  min-height: clamp(480px, 42vw, 660px);
  display: grid;
  align-items: center;
  color: #fff;
}
.is-home main .is-api .api-hero h1,
.is-api.is-home main .api-hero h1 {
  color: #fff;
}
.is-api.is-home main .api-hero .lede {
  color: #cfd5df;
}
.is-api .api-hero .breadcrumb a,
.is-api .api-hero .breadcrumb li {
  color: #a3abb8;
}
.is-api .api-hero .breadcrumb [aria-current] {
  color: #fff;
}
.is-api.is-home main .api-hero .btn-ghost {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}
.is-api.is-home main .api-hero .btn-ghost:hover {
  background: #fff;
  color: var(--ink);
}
.is-api .api-hero .ad-box {
  fill: rgba(12, 14, 19, 0.92);
  stroke: rgba(255, 255, 255, 0.6);
}
.is-api .api-hero .ad-box-d {
  fill: var(--accent);
  stroke: var(--accent);
}
.is-api .api-hero .ad-h,
.is-api .api-hero .ad-h-w {
  fill: #fff;
}
.is-api .api-hero .ad-s,
.is-api .api-hero .ad-cap {
  fill: #c3c9d4;
}
.is-api .api-hero .ad-line {
  stroke: #ff8d80;
  color: #ff8d80;
}
.is-api .api-hero .api-hc {
  box-shadow:
    0 18px 30px -14px #000,
    0 0 0 1px rgba(255, 255, 255, 0.18);
}
@media (max-width: 700px) {
  .is-api .api-hero {
    background:
      linear-gradient(180deg, rgba(5, 5, 7, 0.85), rgba(5, 5, 7, 0.7)),
      #050507 url("/assets/img/apibackground.webp") 75% center / cover no-repeat;
  }
  .is-api .api-dia-m li {
    background: rgba(12, 14, 19, 0.9);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
  }
  .is-api .api-dia-m li.is-api {
    background: var(--accent);
    border-color: var(--accent);
  }
  .is-api .api-dia-m span {
    color: #c3c9d4;
  }
}
.is-api.is-home main .api-hero .btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.is-api.is-home main .api-hero .btn-primary:hover {
  background: #a61f18;
  border-color: #a61f18;
}

/* =========================================================
   Kiosk / Agent System page (.is-kiosk): near-black product presentation, concept illustrations, no real interface faked
   ========================================================= */
.is-kiosk main {
  --kn-bg: #08090b;
  --kn-2: #111317;
  --kn-3: #191c21;
  --kn-text: #f5f5f6;
  --kn-mute: #b7bbc3;
  --kn-line: rgba(255, 255, 255, 0.1);
  background: var(--kn-bg);
  color: var(--kn-text);
}
.is-kiosk main h1,
.is-kiosk main h2,
.is-kiosk main h3 {
  color: var(--kn-text);
  text-transform: none;
}
.is-kiosk main p {
  color: var(--kn-mute);
}
.is-kiosk main .lede {
  color: #cfd3da;
}
.kn-sec {
  padding: clamp(64px, 7vw, 120px) 0;
  scroll-margin-top: 56px;
}
.kn-head {
  max-width: 62ch;
  margin-bottom: clamp(28px, 3.6vw, 52px);
}
.kn-head .lede {
  margin-top: 16px;
}
.is-kiosk main .kn-head h2,
.is-kiosk main .kn-safe-head h2,
.is-kiosk main .kn-why-head h2 {
  font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.018em;
}
.kn-head h2::before,
.kn-safe-head h2::before,
.kn-why-head h2::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-bottom: 18px;
  background: var(--accent);
}
.is-kiosk main .kn-note {
  margin-top: 12px;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8f959f;
}
.is-kiosk :focus-visible {
  outline: 2px solid #ff8d80;
  outline-offset: 3px;
}

/* diagram vocabulary */
.kn-svg {
  display: block;
  width: 100%;
  height: auto;
  color: #ff8d80;
}
.kd-box {
  fill: #111317;
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 1.5;
}
.kd-box-r {
  stroke: var(--accent);
}
.kd-box-d {
  fill: var(--accent);
  stroke: var(--accent);
}
.kd-h {
  font: 700 20px var(--f-display);
  fill: #f5f5f6;
}
.kd-w {
  fill: #fff;
}
.kd-sm {
  font-size: 17px;
}
.kd-s {
  font: 500 15px var(--f-body);
  fill: #b7bbc3;
}
.kd-lab {
  font: 600 15px var(--f-body);
  fill: #ff9b8f;
}
.kd-n {
  font: 500 14px var(--f-body);
  fill: #9aa0aa;
}
.kd-bar {
  fill: rgba(255, 255, 255, 0.13);
}
.kd-line {
  fill: none;
  stroke: #ff8d80;
  stroke-width: 2.5;
}
.kd-ln {
  fill: none;
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 1.5;
}

/* browser-style frame around the (concept or real) product view */
.kn-frame {
  background: var(--kn-3);
  border: 1px solid var(--kn-line);
  border-radius: 6px;
  box-shadow:
    0 50px 90px -40px #000,
    0 0 0 1px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.kn-frame-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  background: #14161a;
  border-bottom: 1px solid var(--kn-line);
}
.kn-frame-bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}
.kn-frame-bar span {
  margin-left: 10px;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: #8f959f;
}
.kn-frame-body {
  padding: clamp(14px, 2vw, 26px);
  background: var(--kn-2);
}
.kn-frame-body > img,
.kn-frame-body img {
  display: block;
  width: 100%;
  height: auto;
}

/* hero */
.kn-hero {
  padding: clamp(24px, 3vw, 48px) 0 clamp(56px, 6vw, 104px);
  background:
    radial-gradient(60% 80% at 82% 40%, rgba(200, 40, 31, 0.14), transparent 70%),
    var(--kn-bg);
}
.kn-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.kn-hero .breadcrumb {
  margin-bottom: clamp(20px, 3vw, 40px);
}
.is-kiosk main .kn-hero h1 {
  font-size: clamp(2.1rem, 1rem + 3.2vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.kn-hero .lede {
  margin-top: 22px;
  max-width: 52ch;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
}
.kn-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.kn-hero [data-stage] {
  animation: bf-rise 0.55s var(--ease) both;
  animation-delay: calc(var(--i) * 0.1s);
}
.kn-hero-art {
  margin: 0;
  animation: bf-rise 0.7s 0.3s var(--ease) both;
}

/* sticky strip: dark variant of the shared page navigation */
.kn-nav {
  background: rgba(8, 9, 11, 0.96);
  border-bottom-color: var(--kn-line);
}
.kn-nav a {
  color: #aab0ba;
}
.kn-nav a:hover,
.kn-nav a.is-active {
  color: #fff;
}
.kn-nav .bf-n {
  display: none;
}

/* features */
.kn-feat {
  background: var(--kn-bg);
}
.kn-feat-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
}
.kn-caps {
  display: grid;
}
.kn-cap {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: clamp(18px, 2vw, 26px) clamp(14px, 1.6vw, 22px);
  border-top: 1px solid var(--kn-line);
  background: transparent;
  transition: background 0.22s var(--ease);
}
.kn-caps li:last-child .kn-cap {
  border-bottom: 1px solid var(--kn-line);
}
.kn-cap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.25s var(--ease);
}
.kn-cap[aria-pressed="true"] {
  background: var(--kn-3);
}
.kn-cap[aria-pressed="true"]::before {
  transform: scaleY(1);
}
.kn-cap:hover {
  background: rgba(255, 255, 255, 0.04);
}
.is-kiosk main .kn-cap h3 {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  margin-bottom: 8px;
  color: #aab0ba;
  transition: color 0.2s var(--ease);
}
.is-kiosk main .kn-cap[aria-pressed="true"] h3 {
  color: #fff;
}
.kn-prev {
  position: sticky;
  top: calc(var(--header-h) + 80px);
}
.kn-panel {
  animation: api-fade 0.28s var(--ease);
}
.kn-panel[hidden] {
  display: none;
}

/* network */
.kn-net {
  background: var(--kn-2);
}
.kn-net-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 96px);
  align-items: start;
}
.kn-tree {
  display: grid;
  justify-items: center;
}
.kn-level {
  width: min(100%, 360px);
}
.kn-level button {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 84px;
  padding: 0 22px;
  background: var(--kn-3);
  border: 1px solid var(--kn-line);
  color: #cfd3da;
  font: 700 1.25rem var(--f-display);
  text-align: left;
  transition:
    background 0.22s var(--ease),
    border-color 0.22s var(--ease),
    color 0.22s var(--ease);
}
.kn-level button:hover {
  border-color: rgba(255, 255, 255, 0.3);
}
.kn-level button[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
  color: #fff;
}
.kn-lic svg {
  width: 32px;
  height: 32px;
  color: #ff8d80;
}
.kn-conn {
  position: relative;
  width: 2px;
  height: 52px;
  background: rgba(255, 255, 255, 0.28);
}
.kn-conn::after {
  content: "";
  position: absolute;
  left: -5px;
  bottom: -2px;
  border: 6px solid transparent;
  border-top: 8px solid rgba(255, 255, 255, 0.5);
  border-bottom: 0;
}
.kn-dot {
  position: absolute;
  left: -4px;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
}
.kn-tree.is-flow .kn-dot {
  animation: kn-drop 0.7s var(--ease) both;
}
.kn-tree.is-flow .kn-conn:nth-of-type(2) .kn-dot {
  animation-delay: 0.05s;
}
.kn-tree.is-flow .kn-conn:nth-of-type(4) .kn-dot {
  animation-delay: 0.75s;
}
@keyframes kn-drop {
  0% {
    opacity: 1;
    translate: 0 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    translate: 0 44px;
  }
}
.kn-flowbtn {
  margin: 28px auto 0;
  display: block;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 4px;
  color: #fff;
  background: transparent;
  font: 600 0.9375rem var(--f-body);
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease);
}
.kn-flowbtn:hover {
  background: #fff;
  color: var(--ink);
}
.kn-tree-wrap .kn-note {
  text-align: center;
}
.kn-role {
  padding: clamp(18px, 2vw, 28px) 0 clamp(18px, 2vw, 28px) clamp(14px, 1.6vw, 22px);
  border-top: 1px solid var(--kn-line);
  position: relative;
  transition: background 0.22s var(--ease);
}
.kn-role::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.25s var(--ease);
}
.kn-role[data-on] {
  background: rgba(255, 255, 255, 0.04);
}
.kn-role[data-on]::before {
  transform: scaleY(1);
}
.is-kiosk main .kn-role h3 {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.7rem);
  margin-bottom: 8px;
}
.is-kiosk main .kn-principle {
  margin-top: 8px;
  padding: 22px 0 0 clamp(14px, 1.6vw, 22px);
  border-top: 1px solid var(--kn-line);
  color: #e1e4e9;
  font-size: 1.0625rem;
}

/* daily work */
.kn-daily {
  background: var(--kn-bg);
}
.kn-day {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: center;
  padding-block: clamp(32px, 4vw, 64px);
  border-top: 1px solid var(--kn-line);
}
.kn-day-2 {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}
.kn-day-2 .kn-day-vis {
  order: -1;
}
.kn-day-3 {
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
}
.kn-seq {
  display: block;
  font: 700 0.9rem var(--f-body);
  letter-spacing: 0.12em;
  color: #ff8d80;
  margin-bottom: 14px;
}
.is-kiosk main .kn-day h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem);
  margin-bottom: 14px;
}
.kn-day p {
  max-width: 46ch;
}
.kn-zoom {
  display: block;
  width: 100%;
  padding: 0;
  cursor: zoom-in;
  background: transparent;
}
.kn-lb {
  width: min(94vw, 1200px);
  max-height: 92vh;
  padding: 0;
  border: 1px solid var(--kn-line);
  background: #0c0e13;
  color: #fff;
  opacity: 0;
  transition: opacity 0.22s var(--ease);
}
.kn-lb[open] {
  opacity: 1;
}
.kn-lb::backdrop {
  background: rgba(0, 0, 0, 0.8);
}
.kn-lb figure {
  margin: 0;
}
.kn-lb img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 80vh;
  object-fit: contain;
}
.kn-lb figcaption {
  padding: 14px 20px;
  color: #cfd3da;
}
.kn-lb-x {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 44px;
  height: 44px;
  font-size: 1.8rem;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* safe sign-in */
.kn-safe {
  background: var(--kn-3);
  border-top: 1px solid var(--kn-line);
  border-bottom: 1px solid var(--kn-line);
}
.kn-safe-in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 6vw, 112px);
  align-items: start;
}
.kn-safe-head p {
  margin-top: 16px;
  max-width: 54ch;
}
.kn-safe-head .lede {
  margin-top: 22px;
}
.kn-checks {
  display: grid;
  gap: 0;
}
.kn-checks li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 18px;
  padding: clamp(18px, 2vw, 26px) 0;
  border-top: 1px solid var(--kn-line);
}
.kn-checks li:last-child {
  border-bottom: 1px solid var(--kn-line);
}
.is-kiosk main .kn-checks p {
  color: #e8eaee;
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  font-weight: 500;
}
.kn-tick {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: var(--accent);
  color: #fff;
}
.kn-tick svg {
  width: 18px;
  height: 18px;
}
.is-kiosk main .kn-confirm {
  margin: 26px 0 28px;
  padding-left: 18px;
  border-left: 3px solid var(--accent);
  color: #e1e4e9;
  font-size: 1.0625rem;
}

/* security */
.kn-security {
  background: var(--kn-bg);
}
.kn-sec-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 64px);
}
.kn-sec-col {
  padding-top: 24px;
  border-top: 1px solid var(--kn-line);
}
.kn-ic svg {
  width: 30px;
  height: 30px;
  color: #ff8d80;
  margin-bottom: 18px;
}
.is-kiosk main .kn-sec-col h3 {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  margin-bottom: 10px;
}

/* why */
.kn-why {
  background: var(--kn-2);
}
.kn-why-in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 6vw, 112px);
  align-items: start;
}
.kn-why-head {
  position: sticky;
  top: calc(var(--header-h) + 90px);
}
.kn-gcs {
  position: relative;
  margin-top: 36px;
  height: clamp(150px, 16vw, 220px);
}
.kn-gc {
  position: absolute;
  display: block;
  overflow: hidden;
  width: 46%;
  border-radius: 3px;
  background: color-mix(in srgb, var(--tone) 40%, #0c0e13);
  box-shadow:
    0 24px 40px -18px #000,
    0 0 0 1px rgba(255, 255, 255, 0.1);
}
.kn-gc img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.kn-gc-a {
  left: 0;
  top: 0;
  z-index: 1;
}
.kn-gc-b {
  left: 26%;
  top: 14%;
  z-index: 2;
}
.kn-gc-c {
  left: 52%;
  top: 28%;
  z-index: 3;
}
.kn-why-row {
  padding: clamp(22px, 2.4vw, 34px) 0;
  border-top: 1px solid var(--kn-line);
}
.kn-why-row:last-child {
  border-bottom: 1px solid var(--kn-line);
}
.is-kiosk main .kn-why-row h3 {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.7rem);
  margin-bottom: 8px;
}

/* route to the API page */
.kn-route {
  background: var(--kn-bg);
  padding: clamp(40px, 5vw, 72px) 0;
  border-top: 1px solid var(--kn-line);
}
.kn-route-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
  padding-block: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--kn-line);
}
.is-kiosk main .kn-route h2 {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  max-width: 28ch;
  margin-bottom: 8px;
}
.kn-route p {
  max-width: 52ch;
}

@media (max-width: 960px) {
  .kn-hero-in,
  .kn-feat-grid,
  .kn-net-grid,
  .kn-day,
  .kn-day-2,
  .kn-day-3,
  .kn-safe-in,
  .kn-why-in {
    grid-template-columns: minmax(0, 1fr);
  }
  .kn-day-2 .kn-day-vis {
    order: 0;
  }
  .kn-prev,
  .kn-why-head {
    position: static;
  }
  .kn-sec-cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .kn-sec-col {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 16px;
  }
  .kn-sec-col .kn-ic {
    grid-row: 1 / span 2;
  }
  .kn-gcs {
    max-width: 440px;
  }
}
@media (max-width: 600px) {
  .kn-conn {
    height: 40px;
  }
}

/* kiosk hero on the supplied background (kiosbackground.webp): dark left for the copy, hierarchy figures on the right */
.is-kiosk .kn-hero {
  background:
    linear-gradient(90deg, rgba(8, 9, 11, 0.94) 0, rgba(8, 9, 11, 0.72) 40%, rgba(8, 9, 11, 0) 70%),
    #08090b url("/assets/img/kiosbackground.webp") right center / cover no-repeat;
  min-height: clamp(460px, 40vw, 640px);
  display: grid;
  align-items: center;
}
.is-kiosk .kn-hero-in {
  grid-template-columns: minmax(0, 1fr);
}
.is-kiosk .kn-hero-copy {
  max-width: min(580px, 50%);
}
@media (max-width: 760px) {
  .is-kiosk .kn-hero {
    background:
      linear-gradient(180deg, rgba(8, 9, 11, 0.86), rgba(8, 9, 11, 0.7)),
      #08090b url("/assets/img/kiosbackground.webp") 78% center / cover no-repeat;
  }
  .is-kiosk .kn-hero-copy {
    max-width: none;
  }
}

/* =========================================================
   Partners page (.is-partners): near-black, charcoal surfaces, logos on a light strip, covers as the imagery
   ========================================================= */
.is-partners main {
  --pt-bg: #08090b;
  --pt-2: #111317;
  --pt-text: #f5f5f6;
  --pt-mute: #b7bbc3;
  --pt-line: rgba(255, 255, 255, 0.1);
  background: var(--pt-bg);
  color: var(--pt-text);
}
.is-partners main h1,
.is-partners main h2,
.is-partners main h3 {
  color: var(--pt-text);
  text-transform: none;
}
.is-partners main p {
  color: var(--pt-mute);
}
.is-partners main .lede {
  color: #cfd3da;
}
.is-partners :focus-visible {
  outline: 2px solid #ff8d80;
  outline-offset: 3px;
}
.pt-sec {
  padding: clamp(64px, 7vw, 120px) 0;
}
.pt-head {
  max-width: 62ch;
  margin-bottom: clamp(28px, 3.6vw, 52px);
}
.pt-head .lede {
  margin-top: 16px;
}
.is-partners main .pt-head h2,
.is-partners main .pt-grow h2 {
  font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.018em;
}
.pt-head h2::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-bottom: 18px;
  background: var(--accent);
}
.is-partners main a:not(.btn):not(.link-arrow) {
  color: #ff9b8f;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.is-partners main .link-arrow {
  color: #ff8d80;
}

/* cover tiles */
.pt-c {
  display: block;
  overflow: hidden;
  border-radius: 3px;
  background: color-mix(in srgb, var(--tone) 40%, #0c0e13);
  box-shadow:
    0 28px 46px -20px #000,
    0 0 0 1px rgba(255, 255, 255, 0.1);
}
.pt-c img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* hero */
.pt-hero {
  padding: clamp(24px, 3vw, 48px) 0 clamp(56px, 6vw, 104px);
  background:
    radial-gradient(55% 80% at 80% 45%, rgba(200, 40, 31, 0.13), transparent 70%),
    var(--pt-bg);
  overflow: hidden;
}
.pt-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.pt-hero .breadcrumb {
  margin-bottom: clamp(20px, 3vw, 40px);
}
.is-partners main .pt-hero h1 {
  font-size: clamp(2.1rem, 1rem + 3.2vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.pt-hero .lede {
  margin-top: 22px;
  max-width: 52ch;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
}
.pt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.pt-hero [data-stage] {
  animation: bf-rise 0.55s var(--ease) both;
  animation-delay: calc(var(--i) * 0.1s);
}
.pt-hero-art {
  position: relative;
  aspect-ratio: 5 / 4;
}
.pt-hero-art .pt-c {
  position: absolute;
  animation: bf-rise 0.7s var(--ease) both;
}
.pt-c-h1 {
  left: 0;
  top: 8%;
  width: 48%;
  aspect-ratio: 4 / 3;
  animation-delay: 0.25s;
}
.pt-c-h2 {
  right: 0;
  top: 0;
  width: 48%;
  aspect-ratio: 4 / 3;
  animation-delay: 0.4s;
}
.pt-c-h3 {
  left: 0;
  top: 56%;
  width: 48%;
  aspect-ratio: 4 / 3;
  animation-delay: 0.55s;
}
.pt-c-h4 {
  right: 0;
  top: 48%;
  width: 48%;
  aspect-ratio: 4 / 3;
  animation-delay: 0.7s;
}
.pt-hero-img {
  display: block;
  width: 100%;
  height: auto;
}

/* brands: logos sit on a light strip so dark lettering stays readable */
.pt-brands {
  background: var(--pt-2);
  border-top: 1px solid var(--pt-line);
}
.pt-logos {
  background: #f1efea;
  padding: clamp(28px, 4vw, 56px) clamp(24px, 4vw, 64px);
  border-radius: 2px;
}
.pt-logo-group {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  align-items: center;
  gap: 24px 40px;
}
.is-partners main .pt-logo-group h3 {
  color: #4b5160;
  font: 600 0.8rem var(--f-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pt-logo-group ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px clamp(32px, 5vw, 80px);
}
.pt-logo-group li {
  display: grid;
  place-items: center;
  height: 76px;
}
.pt-logo-group img {
  display: block;
  height: 66px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  filter: grayscale(1) contrast(1.15);
  opacity: 0.9;
  transition:
    filter 0.25s var(--ease),
    opacity 0.25s var(--ease);
}
.pt-logo-group li:hover img,
.pt-logo-group li:focus-within img,
.pt-logo-group img:focus-visible {
  filter: none;
  opacity: 1;
}
.pt-logo-text {
  font: 700 1.5rem var(--f-display);
  color: #20232b;
}
@media (hover: none) {
  .pt-logo-group img {
    filter: none;
    opacity: 1;
  }
}

/* two ways */
.pt-options {
  background: var(--pt-bg);
}
.pt-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
}
.pt-panel {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 44px);
  background: var(--pt-2);
  border: 1px solid var(--pt-line);
  transition:
    border-color 0.25s var(--ease),
    background 0.25s var(--ease);
}
.pt-panel:hover,
.pt-panel:focus-within {
  border-color: rgba(255, 255, 255, 0.34);
  background: #15181d;
}
.pt-panel-vis {
  position: relative;
  height: clamp(150px, 15vw, 210px);
  margin-bottom: clamp(22px, 2.6vw, 34px);
}
.pt-panel-ops .pt-c {
  position: absolute;
  width: 44%;
  aspect-ratio: 4 / 3;
}
.pt-c-m1 {
  left: 0;
  top: 8%;
  z-index: 1;
}
.pt-c-m2 {
  left: 27%;
  top: 0;
  z-index: 2;
}
.pt-c-m3 {
  left: 54%;
  top: 14%;
  z-index: 3;
}
.pt-net {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
}
.pn-ln {
  fill: none;
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 1.5;
}
.pn-b {
  fill: #191c21;
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 1.5;
}
.pn-b-r {
  stroke: var(--accent);
}
.pn-t {
  font: 700 14px var(--f-display);
  fill: #fff;
}
.pn-s {
  font: 500 13px var(--f-body);
  fill: #c3c9d4;
}
.is-partners main .pt-panel h3 {
  font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem);
  margin-bottom: 14px;
}
.pt-panel p {
  max-width: 50ch;
}
.pt-ben {
  margin: 24px 0 28px;
}
.pt-ben li {
  position: relative;
  padding: 13px 0 13px 26px;
  border-top: 1px solid var(--pt-line);
  color: #e6e8ec;
}
.pt-ben li:last-child {
  border-bottom: 1px solid var(--pt-line);
}
.pt-ben li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.3em;
  width: 12px;
  height: 2px;
  background: var(--accent);
}
.pt-cta {
  margin-top: auto;
  font-size: 1.0625rem;
}

/* comparison */
.pt-cmp {
  background: var(--pt-2);
  border-top: 1px solid var(--pt-line);
}
.pt-table table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.pt-table thead th {
  padding: 0 24px 20px;
  font: 700 clamp(1.1rem, 1rem + 0.6vw, 1.5rem) var(--f-display);
  color: #fff;
  border-bottom: 2px solid #fff;
}
.pt-table thead th:first-child {
  padding-left: 0;
  font: 600 0.8rem var(--f-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a3abb8;
}
.pt-table thead th:nth-child(n + 2)::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-bottom: 14px;
  background: var(--accent);
}
.pt-table tbody th,
.pt-table tbody td {
  padding: clamp(20px, 2.2vw, 30px) 24px;
  border-bottom: 1px solid var(--pt-line);
  vertical-align: top;
  transition: background 0.2s var(--ease);
}
.pt-table tbody th {
  padding-left: 0;
  width: 24%;
  color: #fff;
  font-weight: 700;
}
.pt-table tbody td {
  color: #c3c9d4;
  width: 38%;
  font-size: 1.0625rem;
}
.pt-table tbody tr:hover td,
.pt-table tbody tr:hover th {
  background: rgba(255, 255, 255, 0.045);
}

/* receives */
.pt-recv {
  background: var(--pt-bg);
}
.pt-recv-in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 6vw, 112px);
  align-items: start;
}
.pt-prevs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.pt-prev {
  display: block;
  padding: 0;
  cursor: zoom-in;
  background: transparent;
}
.pt-prev span {
  display: block;
  overflow: hidden;
  border-radius: 3px;
  background: color-mix(in srgb, var(--tone) 40%, #0c0e13);
  box-shadow:
    0 24px 40px -20px #000,
    0 0 0 1px rgba(255, 255, 255, 0.1);
}
.pt-prev img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}
.pt-prev:hover img,
.pt-prev:focus-visible img {
  transform: scale(1.05);
}
.is-partners main .pt-hint {
  margin-top: 14px;
  font-size: 0.8125rem;
  color: #8f959f;
}
.pt-recv-row {
  padding: clamp(22px, 2.6vw, 36px) 0;
  border-top: 1px solid var(--pt-line);
}
.pt-recv-row:last-child {
  border-bottom: 1px solid var(--pt-line);
}
.is-partners main .pt-recv-row h3 {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.7rem);
  margin-bottom: 8px;
}

/* process (reuses the API page timeline markup) */
.pt-proc {
  background: var(--pt-2);
  border-top: 1px solid var(--pt-line);
}
.is-partners .api-line {
  background: rgba(255, 255, 255, 0.5);
}
.is-partners .api-ico {
  background: var(--pt-2);
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}
.is-partners main .api-stage h3 {
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  margin-bottom: 10px;
}

/* growing together */
.pt-grow {
  background: #15171b;
  padding: clamp(80px, 9vw, 152px) 0;
  border-top: 1px solid var(--pt-line);
}
.pt-grow-in {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(32px, 6vw, 112px);
  align-items: center;
}
.is-partners main .pt-grow h2 {
  font-size: clamp(2.4rem, 1.2rem + 4vw, 5rem);
  margin-bottom: 26px;
}
.pt-grow p {
  max-width: 54ch;
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem);
  color: #cfd3da;
}
.pt-grow-art {
  position: relative;
  aspect-ratio: 1 / 1;
}
.pt-grow-art .pt-c {
  position: absolute;
  width: 62%;
  aspect-ratio: 4 / 3;
}
.pt-c-g1 {
  left: 0;
  top: 4%;
  z-index: 1;
}
.pt-c-g2 {
  right: 0;
  top: 32%;
  z-index: 2;
}
.pt-c-g3 {
  left: 8%;
  top: 62%;
  z-index: 3;
}

@media (max-width: 960px) {
  .pt-hero-in,
  .pt-panels,
  .pt-recv-in,
  .pt-grow-in {
    grid-template-columns: minmax(0, 1fr);
  }
  .pt-logo-group {
    grid-template-columns: minmax(0, 1fr);
  }
  .pt-grow-art {
    max-width: 440px;
  }
}
@media (max-width: 760px) {
  .pt-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .pt-table tbody tr {
    display: block;
    padding: 20px 0;
    border-bottom: 1px solid var(--pt-line);
  }
  .pt-table tbody th,
  .pt-table tbody td {
    display: block;
    width: auto;
    border: 0;
    padding: 0;
  }
  .pt-table tbody th {
    margin-bottom: 10px;
    font-size: 1.1rem;
  }
  .pt-table tbody td {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr);
    gap: 12px;
    padding: 8px 0;
  }
  .pt-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #ff9b8f;
  }
  .pt-table tbody tr:hover td,
  .pt-table tbody tr:hover th {
    background: none;
  }
}

/* =========================================================
   Operators page (.is-op): white editorial layout, off-white bands, supplied game covers
   ========================================================= */
.is-op main {
  --op-ink: #15171b;
  --op-body: #555d6a;
  --op-surface: #f5f5f3;
  --op-line: #e4e5e7;
}
.op-sec {
  padding: clamp(64px, 7vw, 120px) 0;
  background: #fff;
}
.op-head {
  max-width: 62ch;
  margin-bottom: clamp(28px, 3.6vw, 52px);
}
.op-head .lede {
  margin-top: 16px;
}
.is-home main .op-head h2,
.is-home main .op-logos h2,
.is-home main .op-int h2,
.is-home main .op-mgr h2,
.is-home main .op-terms h2 {
  font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--op-ink);
}
.op-note {
  margin-top: 12px;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--op-body);
}
.op-links a,
.op-closing a {
  color: var(--accent-on-light);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.is-op .op-sec :focus-visible,
.is-op .op-hero :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* cover tiles */
.op-c {
  display: block;
  overflow: hidden;
  border-radius: 3px;
  background: color-mix(in srgb, var(--tone) 40%, #0c0e13);
  box-shadow:
    0 30px 50px -22px rgba(12, 14, 19, 0.55),
    0 0 0 1px rgba(12, 14, 19, 0.08);
}
.op-c a {
  display: block;
}
.op-c img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}
.op-c a:hover img,
.op-c a:focus-visible img {
  transform: scale(1.05);
}

/* hero */
.op-hero {
  background: #fff;
  padding: clamp(24px, 3vw, 48px) 0 clamp(48px, 5vw, 88px);
  overflow: hidden;
}
.op-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.op-hero .breadcrumb {
  margin-bottom: clamp(20px, 3vw, 40px);
}
.is-home main .op-hero h1 {
  font-size: clamp(2.1rem, 1rem + 3.2vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--op-ink);
}
.op-hero .lede {
  margin-top: 22px;
  max-width: 52ch;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
}
.op-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.op-hero [data-stage] {
  animation: bf-rise 0.55s var(--ease) both;
  animation-delay: calc(var(--i) * 0.1s);
}
.op-hero-art {
  position: relative;
  aspect-ratio: 5 / 4;
}
.op-hero-art .op-c {
  position: absolute;
  animation: bf-rise 0.7s var(--ease) both;
}
.op-c-a {
  left: 0;
  top: 10%;
  width: 70%;
  z-index: 2;
  animation-delay: 0.25s;
}
.op-c-b {
  right: 0;
  top: 0;
  width: 44%;
  z-index: 1;
  animation-delay: 0.45s;
}
.op-c-c {
  right: 4%;
  bottom: 0;
  width: 46%;
  z-index: 3;
  animation-delay: 0.6s;
}
.op-hero-img {
  display: block;
  width: 100%;
  height: auto;
}

/* logos */
.op-logos {
  background: #fff;
  border-top: 1px solid var(--op-line);
  border-bottom: 1px solid var(--op-line);
  padding: clamp(40px, 5vw, 72px) 0;
}
.op-logos-in {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(24px, 5vw, 96px);
  align-items: center;
}
.op-logos .lede {
  margin-top: 14px;
}
.op-logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px clamp(28px, 4vw, 64px);
}
.op-logo-row li {
  display: grid;
  place-items: center;
  height: 76px;
}
.op-logo-row img {
  display: block;
  height: 62px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  filter: grayscale(1) contrast(1.1);
  opacity: 0.85;
  transition:
    filter 0.25s var(--ease),
    opacity 0.25s var(--ease);
}
.op-logo-row li:hover img,
.op-logo-row li:focus-within img {
  filter: none;
  opacity: 1;
}
.op-logo-text {
  font: 700 1.4rem var(--f-display);
  color: var(--op-ink);
}
@media (hover: none) {
  .op-logo-row img {
    filter: none;
    opacity: 1;
  }
}

/* appeal */
.op-appeal {
  background: #fff;
}
.op-row {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 96px);
  align-items: center;
  padding-block: clamp(32px, 4vw, 64px);
  border-top: 1px solid var(--op-line);
}
.op-row-flip {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}
.op-row-flip .op-row-vis {
  order: -1;
}
.op-label {
  font: 600 0.8rem / 1 var(--f-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-on-light);
  margin-bottom: 18px;
}
.op-row-text p:not(.op-label) {
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.22rem);
  color: var(--op-body);
  max-width: 48ch;
}
.op-row-text .op-links {
  margin-top: 18px;
  font-size: 1.0625rem;
}
.op-trio {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
}
.op-trio .op-zoom:nth-child(1) {
  grid-column: 1 / span 4;
}
.op-trio .op-zoom:nth-child(2) {
  grid-column: 5 / span 2;
  align-self: start;
}
.op-trio .op-zoom:nth-child(3) {
  grid-column: 3 / span 4;
}
.op-trio-b .op-zoom:nth-child(1) {
  grid-column: 3 / span 4;
}
.op-trio-b .op-zoom:nth-child(2) {
  grid-column: 1 / span 2;
  align-self: end;
  grid-row: 1;
}
.op-trio-b .op-zoom:nth-child(3) {
  grid-column: 1 / span 4;
}
.op-zoom {
  display: block;
  padding: 0;
  cursor: zoom-in;
  background: transparent;
}
.op-zoom span {
  display: block;
  overflow: hidden;
  border-radius: 3px;
  background: color-mix(in srgb, var(--tone) 40%, #0c0e13);
  box-shadow:
    0 26px 44px -22px rgba(12, 14, 19, 0.55),
    0 0 0 1px rgba(12, 14, 19, 0.08);
}
.op-zoom img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}
.op-zoom:hover img,
.op-zoom:focus-visible img {
  transform: scale(1.05);
}
.op-wide {
  display: block;
  width: 100%;
  height: auto;
}

/* one integration */
.op-int {
  background: var(--op-surface);
}
.op-int-in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 5vw, 96px);
  align-items: center;
}
.op-int .lede {
  margin: 18px 0 22px;
}
.op-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.op-tags li {
  padding: 8px 14px;
  border: 1px solid var(--op-ink);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--op-ink);
}
.op-int .op-links {
  margin-bottom: 22px;
}
.op-int-vis {
  position: relative;
}
.op-int-vis svg {
  display: block;
  width: 100%;
  height: auto;
}
.op-int-covers {
  position: absolute;
  left: 66%;
  top: 6%;
  width: 34%;
  height: 80%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-content: center;
}
.op-int-covers .op-c {
  width: 100%;
}
.od-box {
  fill: #fff;
  stroke: var(--op-ink);
  stroke-width: 1.5;
}
.od-box-d {
  fill: var(--op-ink);
}
.od-h {
  font: 700 19px var(--f-display);
  fill: var(--op-ink);
}
.od-w {
  fill: #fff;
}
.od-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-dasharray: 1;
}
.js-motion .op-int-vis:not(.is-in) .od-line {
  stroke-dashoffset: 1;
}
.op-int-vis .od-line {
  transition: stroke-dashoffset 0.8s 0.2s var(--ease);
}
.op-int-vis .od-line-2 {
  transition-delay: 0.7s;
}
.op-int-vis.is-in .od-line {
  stroke-dashoffset: 0;
}

/* route */
.op-route {
  background: #fff;
}
.op-tablist {
  display: inline-flex;
  border: 1px solid var(--op-ink);
  border-radius: 4px;
  margin-bottom: 26px;
}
.op-tablist button {
  min-height: 52px;
  padding: 0 clamp(18px, 3vw, 34px);
  color: var(--op-ink);
  font: 600 1rem var(--f-body);
  background: transparent;
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease);
}
.op-tablist button[aria-selected="true"] {
  background: var(--op-ink);
  color: #fff;
}
.op-dia {
  padding: clamp(16px, 2.4vw, 32px);
  background: var(--op-surface);
  border: 1px solid var(--op-line);
}
.op-dia[hidden] {
  display: none;
}
.op-dia:not([hidden]) {
  animation: api-fade 0.28s var(--ease);
}
.op-dia svg {
  display: block;
  width: 100%;
  height: auto;
}
.op-table {
  margin-top: clamp(32px, 4vw, 56px);
}
.op-table table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.op-table thead th {
  padding: 0 24px 20px;
  font: 700 clamp(1.05rem, 1rem + 0.5vw, 1.4rem) var(--f-display);
  color: var(--op-ink);
  border-bottom: 2px solid var(--op-ink);
}
.op-table thead th:first-child {
  padding-left: 0;
  font: 600 0.8rem var(--f-body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--op-body);
}
.op-table thead th:nth-child(n + 2)::before {
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  margin-bottom: 14px;
  background: var(--accent);
}
.op-table tbody th,
.op-table tbody td {
  padding: clamp(20px, 2.2vw, 30px) 24px;
  border-bottom: 1px solid var(--op-line);
  vertical-align: top;
  transition: background 0.2s var(--ease);
}
.op-table tbody th {
  padding-left: 0;
  width: 22%;
  color: var(--op-ink);
  font-weight: 700;
}
.op-table tbody td {
  color: var(--op-body);
  width: 39%;
  font-size: 1.0625rem;
}
.op-table tbody tr:hover td,
.op-table tbody tr:hover th {
  background: rgba(200, 40, 31, 0.04);
}
.op-closing {
  margin-top: 28px;
  padding-left: 18px;
  border-left: 3px solid var(--accent);
  color: var(--op-ink);
  font-size: 1.125rem;
  font-weight: 600;
  max-width: 62ch;
}
.op-qual {
  margin-top: 10px;
  padding-left: 21px;
  color: var(--op-body);
}

/* less work */
.op-less {
  background: var(--op-surface);
}
.op-less-in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 6vw, 112px);
  align-items: center;
}
.op-lw-art {
  position: relative;
  aspect-ratio: 4 / 5;
}
.op-lw-art .op-c {
  position: absolute;
  width: 62%;
}
.op-c-w1 {
  left: 0;
  top: 0;
  z-index: 1;
}
.op-c-w2 {
  right: 0;
  top: 22%;
  z-index: 2;
}
.op-c-w3 {
  left: 0;
  top: 48%;
  z-index: 3;
}
.op-c-w4 {
  right: 0;
  top: 72%;
  z-index: 4;
}
.op-lw-row {
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-top: 1px solid #d9dadd;
}
.op-lw-row:last-child {
  border-bottom: 1px solid #d9dadd;
}
.is-home main .op-lw-row h3 {
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.6rem);
  margin-bottom: 8px;
  color: var(--op-ink);
}

/* partner manager */
.op-mgr {
  background: #fff;
}
.op-mgr-in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 6vw, 112px);
  align-items: start;
}
.op-stages {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 34px 0 30px;
}
.op-stage {
  padding-top: 18px;
  position: relative;
  border-top: 2px solid var(--op-line);
  font: 700 clamp(0.95rem, 0.9rem + 0.3vw, 1.1rem) / 1.2 var(--f-display);
  color: var(--op-ink);
}
.op-stage::before {
  content: "";
  position: absolute;
  left: 0;
  top: -7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
}
.op-contacts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
.op-contact {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 20px;
  border: 1px solid var(--op-ink);
  border-radius: 3px;
  color: var(--op-ink);
  transition:
    background 0.2s var(--ease),
    color 0.2s var(--ease);
}
.op-contact:hover {
  background: var(--op-ink);
  color: #fff;
}
.op-contact .arrow {
  width: 14px;
  height: 14px;
}

/* terms */
.op-terms {
  background: var(--op-surface);
}
.op-terms-in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 6vw, 112px);
  align-items: start;
}
.op-factors {
  display: grid;
  margin: 28px 0 30px;
  max-width: 460px;
}
.op-factors li {
  padding: 14px 0 14px 28px;
  position: relative;
  border-top: 1px solid #d9dadd;
  font-weight: 600;
  color: var(--op-ink);
}
.op-factors li:last-child {
  border-bottom: 1px solid #d9dadd;
}
.op-factors li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.35em;
  width: 14px;
  height: 2px;
  background: var(--accent);
}

/* FAQ (reuses the details styling from the API page) */
.op-faq {
  background: #fff;
}
.op-faq-in {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(28px, 6vw, 112px);
  align-items: start;
}

@media (max-width: 960px) {
  .op-hero-in,
  .op-logos-in,
  .op-row,
  .op-row-flip,
  .op-int-in,
  .op-less-in,
  .op-mgr-in,
  .op-terms-in,
  .op-faq-in {
    grid-template-columns: minmax(0, 1fr);
  }
  .op-row-flip .op-row-vis {
    order: 0;
  }
  .op-lw-art {
    max-width: 440px;
  }
}
@media (max-width: 760px) {
  .op-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .op-table tbody tr {
    display: block;
    padding: 20px 0;
    border-bottom: 1px solid var(--op-line);
  }
  .op-table tbody th,
  .op-table tbody td {
    display: block;
    width: auto;
    border: 0;
    padding: 0;
  }
  .op-table tbody th {
    margin-bottom: 10px;
    font-size: 1.1rem;
  }
  .op-table tbody td {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    gap: 12px;
    padding: 8px 0;
  }
  .op-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--accent-on-light);
  }
  .op-table tbody tr:hover td,
  .op-table tbody tr:hover th {
    background: none;
  }
  .op-tablist {
    display: flex;
  }
  .op-tablist button {
    flex: 1;
    padding: 0 10px;
  }
  .op-stages {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}

/* =========================================================
   Agents page (.is-ag): builds on the operators page styles (.op-*), adds its own sections
   ========================================================= */
.ag-svg {
  display: block;
  width: 100%;
  height: auto;
  color: var(--accent);
}
.ag-box {
  fill: #fff;
  stroke: var(--op-ink);
  stroke-width: 1.5;
}
.ag-r {
  stroke: var(--accent);
}
.ag-d {
  fill: var(--op-ink);
}
.ag-in {
  fill: var(--op-surface);
  stroke: rgba(20, 22, 27, 0.2);
}
.ag-h {
  font: 700 19px var(--f-display);
  fill: var(--op-ink);
}
.ag-w {
  fill: #fff;
}
.ag-s {
  font: 600 16px var(--f-body);
  fill: var(--op-ink);
}
.ag-n {
  font: 500 14px var(--f-body);
  fill: var(--op-body);
}
.ag-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
}
.ag-ln {
  fill: none;
  stroke: var(--op-body);
  stroke-width: 1.5;
}

/* games */
.ag-games-in {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
}
.ag-games-art .op-c {
  position: static;
  width: 100%;
  animation: none;
}
.ag-minis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(12px, 1.6vw, 20px);
}
.ag-mini {
  display: block;
  color: var(--op-ink);
  font-weight: 600;
}
.ag-mini span {
  display: block;
  overflow: hidden;
  border-radius: 3px;
  background: color-mix(in srgb, var(--tone) 40%, #0c0e13);
  box-shadow:
    0 22px 38px -20px rgba(12, 14, 19, 0.5),
    0 0 0 1px rgba(12, 14, 19, 0.08);
}
.ag-mini img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}
.ag-mini b {
  display: block;
  margin-top: 10px;
}
.ag-mini:hover img,
.ag-mini:focus-visible img {
  transform: scale(1.05);
}
.ag-games-text p {
  color: var(--op-body);
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.22rem);
  max-width: 44ch;
}
.ag-games-text p + p {
  margin-top: 18px;
}
.ag-games-text a {
  color: var(--accent-on-light);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* who */
.ag-who {
  background: var(--op-surface);
}
.ag-auds {
  display: grid;
}
.ag-aud {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: clamp(22px, 2.6vw, 36px) 0 clamp(22px, 2.6vw, 36px) clamp(14px, 2vw, 28px);
  border-top: 1px solid #d9dadd;
  background: transparent;
  transition: background 0.22s var(--ease);
}
.ag-auds li:last-child .ag-aud {
  border-bottom: 1px solid #d9dadd;
}
.ag-aud::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.25s var(--ease);
}
.ag-aud[aria-pressed="true"] {
  background: #fff;
}
.ag-aud[aria-pressed="true"]::before {
  transform: scaleY(1);
}
.ag-aud:hover {
  background: rgba(255, 255, 255, 0.7);
}
.ag-aud .op-label {
  margin-bottom: 10px;
}
.is-home main .ag-aud h3 {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem);
  margin-bottom: 8px;
  color: var(--op-ink);
}
.ag-aud p {
  color: var(--op-body);
  max-width: 56ch;
}
.ag-picked {
  margin-top: 16px;
  padding-left: 18px;
  border-left: 3px solid var(--accent);
  color: var(--op-ink);
  font-weight: 600;
}
.ag-picked[hidden] {
  display: none;
}
.ag-need {
  margin-top: clamp(36px, 4.4vw, 64px);
  padding: clamp(22px, 3vw, 44px);
  background: #fff;
  border: 1px solid var(--op-line);
}
.is-home main .ag-need h3 {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.8rem);
  margin-bottom: 8px;
  color: var(--op-ink);
}
.ag-need .ag-factors {
  max-width: none;
  margin: 10px 0 0;
}
.ag-need .ag-factors li {
  border-color: var(--op-line);
  color: var(--op-body);
  font-weight: 500;
}

/* benefits */
.ag-ben-sec {
  background: #fff;
}
.ag-ben-in {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
  margin-bottom: clamp(28px, 3vw, 44px);
}
.ag-bens {
  display: grid;
}
.ag-ben {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: clamp(16px, 1.8vw, 24px) 0 clamp(16px, 1.8vw, 24px) clamp(14px, 1.8vw, 24px);
  border-top: 1px solid var(--op-line);
  background: transparent;
  transition: background 0.2s var(--ease);
}
.ag-bens li:last-child .ag-ben {
  border-bottom: 1px solid var(--op-line);
}
.ag-ben::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.25s var(--ease);
}
.ag-ben[aria-pressed="true"]::before {
  transform: scaleY(1);
}
.ag-ben[aria-pressed="true"] {
  background: var(--op-surface);
}
.ag-ben:hover {
  background: rgba(200, 40, 31, 0.04);
}
.is-home main .ag-ben h3 {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  margin-bottom: 6px;
  color: var(--op-ink);
}
.ag-ben p {
  color: var(--op-body);
}
.ag-bvis {
  position: sticky;
  top: calc(var(--header-h) + 40px);
}
.ag-bpanel {
  padding: clamp(14px, 2vw, 26px);
  background: var(--op-surface);
  border: 1px solid var(--op-line);
  animation: api-fade 0.28s var(--ease);
}
.ag-bpanel[hidden] {
  display: none;
}
.ag-vcov {
  position: relative;
  aspect-ratio: 4 / 3;
}
.ag-vcov .op-c {
  position: absolute;
  width: 58%;
  animation: none;
}
.op-c-v1 {
  left: 0;
  top: 0;
  z-index: 1;
}
.op-c-v2 {
  right: 0;
  top: 22%;
  z-index: 2;
}
.op-c-v3 {
  left: 8%;
  top: 52%;
  z-index: 3;
}

/* earn */
.ag-earn {
  background: var(--op-surface);
}
.ag-earn-in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 6vw, 112px);
  align-items: start;
}
.is-home main .ag-earn h2,
.is-home main .ag-master h2,
.is-home main .ag-support h2,
.is-home main .ag-resp h2 {
  font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--op-ink);
}
.ag-earn .lede {
  margin-bottom: 26px;
}

/* master agent */
.ag-master {
  background: #fff;
}
.ag-master-in {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(28px, 6vw, 112px);
  align-items: start;
}
.ag-master .lede {
  margin-top: 20px;
}
.ag-dia {
  max-width: 460px;
}

/* support, responsible */
.ag-support {
  background: var(--op-surface);
}
.ag-stages {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ag-resp {
  background: #fff;
}
.ag-resp-in {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(28px, 6vw, 112px);
  align-items: start;
}
.ag-resp .lede {
  margin-top: 20px;
}
.ag-resp .ag-factors {
  max-width: none;
  margin-top: 8px;
}

@media (max-width: 960px) {
  .ag-games-in,
  .ag-ben-in,
  .ag-earn-in,
  .ag-master-in,
  .ag-resp-in {
    grid-template-columns: minmax(0, 1fr);
  }
  .ag-bvis {
    position: static;
  }
  .ag-stages {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}

/* =========================================================
   About page (.is-about): cinematic black, game art as the story, no invented imagery
   ========================================================= */
.is-about main {
  --ab-bg: #08090b;
  --ab-2: #111317;
  --ab-text: #f5f5f6;
  --ab-mute: #b7bbc3;
  --ab-line: rgba(255, 255, 255, 0.1);
  background: var(--ab-bg);
  color: var(--ab-text);
}
.is-about main h1,
.is-about main h2,
.is-about main h3 {
  color: var(--ab-text);
  text-transform: none;
}
.is-about main p {
  color: var(--ab-mute);
}
.is-about main .lede {
  color: #cfd3da;
}
.is-about :focus-visible {
  outline: 2px solid #ff8d80;
  outline-offset: 3px;
}
.ab-sec {
  padding: clamp(64px, 7vw, 120px) 0;
}
.ab-head {
  max-width: 62ch;
  margin-bottom: clamp(28px, 3.6vw, 52px);
}
.ab-head .lede {
  margin-top: 16px;
}
.is-about main .ab-head h2,
.is-about main .ab-what h2,
.is-about main .ab-vision h2 {
  font-size: clamp(1.9rem, 1.1rem + 2.8vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.018em;
}
.ab-head h2::before,
.ab-what h2::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-bottom: 18px;
  background: var(--accent);
}

/* cover tiles */
.ab-c {
  display: block;
  overflow: hidden;
  border-radius: 3px;
  background: color-mix(in srgb, var(--tone) 40%, #0c0e13);
  box-shadow:
    0 30px 50px -22px #000,
    0 0 0 1px rgba(255, 255, 255, 0.08);
}
.ab-c img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* hero */
.ab-hero {
  position: relative;
  padding: clamp(24px, 3vw, 48px) 0 0;
  background:
    radial-gradient(60% 80% at 80% 60%, rgba(200, 40, 31, 0.14), transparent 70%),
    var(--ab-bg);
  overflow: hidden;
}
.ab-hero-in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: stretch;
  min-height: clamp(460px, 40vw, 620px);
}
.ab-hero-copy {
  align-self: center;
  padding-bottom: clamp(32px, 4vw, 64px);
  position: relative;
  z-index: 2;
}
.ab-hero .breadcrumb {
  margin-bottom: clamp(20px, 3vw, 40px);
}
.is-about main .ab-hero h1 {
  font-size: clamp(2.3rem, 1rem + 4vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.ab-hero .lede {
  margin-top: 22px;
  max-width: 44ch;
  font-size: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem);
}
.ab-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.ab-hero [data-stage] {
  animation: bf-rise 0.55s var(--ease) both;
  animation-delay: calc(var(--i) * 0.1s);
}
.ab-hero-art {
  position: relative;
  min-height: 360px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 100%);
}
.ab-logo-wrap {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 4;
}
.ab-mark {
  font: 700 clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem) var(--f-display);
  color: #fff;
  letter-spacing: -0.01em;
}
.ab-mark b {
  color: var(--accent-text, #ff7a6b);
}
.ab-logo {
  display: block;
  height: 40px;
  width: auto;
}
.ab-hero-art .ab-c {
  position: absolute;
  animation: ab-in 0.9s var(--ease) both;
}
.ab-c-h1 {
  right: -6%;
  bottom: -6%;
  width: 78%;
  aspect-ratio: 4 / 3;
  z-index: 2;
  animation-delay: 0.3s;
}
.ab-c-h2 {
  left: 6%;
  top: 14%;
  width: 40%;
  aspect-ratio: 4 / 3;
  z-index: 1;
  animation-delay: 0.5s;
}
.ab-c-h3 {
  right: 10%;
  top: 6%;
  width: 36%;
  aspect-ratio: 4 / 3;
  z-index: 1;
  animation-delay: 0.65s;
}
@keyframes ab-in {
  from {
    opacity: 0;
    translate: 0 24px;
    scale: 1.04;
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
}
.ab-hero-img {
  display: block;
  width: 100%;
  height: auto;
}

/* what is */
.ab-what {
  background: var(--ab-2);
  border-top: 1px solid var(--ab-line);
}
.ab-what-in {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(28px, 6vw, 112px);
  align-items: start;
}
.ab-what .lede {
  max-width: 62ch;
}
.ab-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.ab-cats li {
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #e4e7ec;
  font-size: 0.9rem;
  font-weight: 600;
}

/* story */
.ab-story {
  background: var(--ab-bg);
}
.ab-tl {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 40px);
}
.ab-tl-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 2px;
  background: rgba(255, 255, 255, 0.28);
  transform-origin: left;
  transition: transform 0.7s var(--ease);
}
.js-motion .ab-tl:not(.is-in) .ab-tl-line {
  transform: scaleX(0);
}
.ab-msb {
  display: block;
  position: relative;
  width: 100%;
  text-align: left;
  padding: 34px 0 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  transition: opacity 0.2s var(--ease);
}
.ab-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ab-bg);
  border: 2px solid var(--accent);
  transition: background 0.2s var(--ease);
}
.ab-msb[aria-pressed="true"] .ab-dot,
.ab-msb:hover .ab-dot {
  background: var(--accent);
}
.ab-msb b {
  display: block;
  font: 700 clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem) / 1 var(--f-display);
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 12px;
}
.is-about main .ab-msb h3 {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem);
  margin-bottom: 10px;
  color: #e9ebef;
}
.ab-msb p {
  font-size: 0.98rem;
}
.ab-msb:not([aria-pressed="true"]) b,
.ab-msb:not([aria-pressed="true"]) h3 {
  opacity: 0.72;
}
.ab-msb:hover b,
.ab-msb:hover h3,
.ab-msb:focus-visible b,
.ab-msb:focus-visible h3 {
  opacity: 1;
}
.ab-msp {
  margin-top: 22px;
  animation: api-fade 0.3s var(--ease);
}
.ab-msp[hidden] {
  display: none;
}
.ab-msp .ab-c {
  width: 100%;
  aspect-ratio: 4 / 3;
}

/* how we make: sticky visual with scrolling chapters */
.ab-make {
  background: var(--ab-2);
  border-top: 1px solid var(--ab-line);
}
.ab-make-in {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 5fr);
  gap: clamp(28px, 6vw, 112px);
  align-items: start;
}
.ab-sticky {
  position: sticky;
  top: calc(var(--header-h) + 48px);
  height: min(60vh, 520px);
}
.ab-spanel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.ab-spanel[data-on] {
  opacity: 1;
}
.ab-chap {
  min-height: 56vh;
  padding: 6px 0 clamp(32px, 6vh, 80px);
  opacity: 0.55;
  transition: opacity 0.3s var(--ease);
}
.ab-chap.is-active {
  opacity: 1;
}
.is-about main .ab-chap h3 {
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem);
  margin-bottom: 16px;
}
.ab-chap p {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  max-width: 48ch;
}
.ab-inline {
  display: none;
}
.ab-v-a .ab-c,
.ab-v-b .ab-c {
  width: 100%;
  aspect-ratio: 4 / 3;
}
.ab-c-mk {
  width: 100%;
  aspect-ratio: 4 / 3;
}
.ab-v-img {
  aspect-ratio: auto;
}
.ab-v-c {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
}
.ab-c-t1 {
  position: absolute;
  left: 0;
  top: 8%;
  width: 78%;
  aspect-ratio: 16 / 10;
}
.ab-c-t2 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 26%;
  aspect-ratio: 9 / 16;
  box-shadow:
    0 0 0 4px #111317,
    0 30px 50px -22px #000;
}
.ab-spanel .ab-v-a,
.ab-spanel .ab-v-b,
.ab-spanel .ab-v-c {
  width: 100%;
}

/* vision */
.ab-vision {
  position: relative;
  background: var(--ab-bg);
  padding: clamp(96px, 11vw, 190px) 0;
  overflow: hidden;
  border-top: 1px solid var(--ab-line);
}
.ab-vision-in {
  position: relative;
}
.ab-vision h2 {
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff8d80;
  margin-bottom: 28px;
}
.is-about main .ab-vision h2 {
  font-size: 0.9rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff8d80;
  line-height: 1;
}
.is-about main .ab-vision h2::before {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-bottom: 22px;
  background: var(--accent);
}
.is-about main .ab-statement {
  position: relative;
  z-index: 2;
  max-width: 24ch;
  font: 700 clamp(2rem, 1rem + 3.8vw, 4.4rem) / 1.1 var(--f-display);
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}
.ab-vcov {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(58%, 880px);
  -webkit-mask-image: linear-gradient(270deg, #000 55%, transparent);
  mask-image: linear-gradient(270deg, #000 55%, transparent);
}
.ab-vcov img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}

/* values */
.ab-values {
  background: var(--ab-2);
  border-top: 1px solid var(--ab-line);
}
.ab-val {
  display: grid;
  grid-template-columns: 56px minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(16px, 3vw, 48px);
  align-items: start;
  padding: clamp(26px, 3vw, 44px) 0;
  border-top: 1px solid var(--ab-line);
}
.ab-val:last-child {
  border-bottom: 1px solid var(--ab-line);
}
.ab-vic svg {
  width: 36px;
  height: 36px;
  color: #ff8d80;
}
.is-about main .ab-val h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem);
}
.ab-val p {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  max-width: 52ch;
}

/* trusted */
.ab-trust {
  background: var(--ab-bg);
  border-top: 1px solid var(--ab-line);
}
.ab-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px clamp(32px, 5vw, 80px);
  padding: clamp(28px, 4vw, 52px) clamp(24px, 4vw, 64px);
  background: #f1efea;
}
.ab-logos li {
  display: grid;
  place-items: center;
  height: 76px;
}
.ab-logos img {
  display: block;
  height: 64px;
  width: auto;
  max-width: 210px;
  object-fit: contain;
  filter: grayscale(1) contrast(1.15);
  opacity: 0.9;
  transition:
    filter 0.25s var(--ease),
    opacity 0.25s var(--ease);
}
.ab-logos li:hover img,
.ab-logos li:focus-within img {
  filter: none;
  opacity: 1;
}
.ab-logo-text {
  font: 700 1.4rem var(--f-display);
  color: #20232b;
}
@media (hover: none) {
  .ab-logos img {
    filter: none;
    opacity: 1;
  }
}

/* explore */
.ab-explore {
  background: var(--ab-2);
  border-top: 1px solid var(--ab-line);
}
.ab-exs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 36px);
}
.ab-ex {
  display: flex;
  flex-direction: column;
  padding-bottom: 8px;
  color: #fff;
  border-bottom: 1px solid var(--ab-line);
  transition: border-color 0.25s var(--ease);
}
.ab-ex:hover,
.ab-ex:focus-visible {
  border-bottom-color: var(--accent);
}
.ab-ex-vis {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: 22px;
  background: #0c0e13;
  border: 1px solid var(--ab-line);
  display: grid;
  place-items: center;
}
.ab-ex-vis > * {
  transition: transform 0.45s var(--ease);
}
.ab-ex:hover .ab-ex-vis > *,
.ab-ex:focus-visible .ab-ex-vis > * {
  transform: scale(1.05);
}
.ab-ex-covers {
  position: relative;
  width: 100%;
  height: 100%;
}
.ab-ex-covers .ab-c {
  position: absolute;
  width: 52%;
  aspect-ratio: 4 / 3;
}
.ab-c-e1 {
  left: 4%;
  top: 8%;
  z-index: 1;
}
.ab-c-e2 {
  right: 4%;
  top: 22%;
  z-index: 2;
}
.ab-c-e3 {
  left: 18%;
  bottom: 6%;
  z-index: 3;
}
.ab-ill {
  width: 82%;
  height: auto;
}
.ai-b {
  fill: #191c21;
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 1.5;
}
.ai-r {
  stroke: var(--accent);
}
.ai-t {
  font: 700 15px var(--f-display);
  fill: #fff;
}
.ai-l {
  fill: none;
  stroke: #ff8d80;
  stroke-width: 2;
}
.ab-ex-type {
  display: grid;
  gap: 6px;
  text-align: left;
}
.ab-ex-type span {
  font: 700 clamp(2rem, 1.2rem + 2.4vw, 3.2rem) / 1 var(--f-display);
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: -0.02em;
}
.ab-ex-type span:last-child {
  color: #ff8d80;
}
.is-about main .ab-ex h3 {
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.65rem);
  margin-bottom: 8px;
}
.ab-ex p {
  max-width: 40ch;
}
.ab-ex-go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 8px;
  font-weight: 600;
  color: #ff8d80;
}
.ab-ex-go .arrow {
  width: 14px;
  height: 14px;
  transition: transform 0.2s var(--ease);
}
.ab-ex:hover .arrow,
.ab-ex:focus-visible .arrow {
  transform: translateX(5px);
}

@media (max-width: 960px) {
  .ab-hero-in,
  .ab-what-in,
  .ab-make-in {
    grid-template-columns: minmax(0, 1fr);
  }
  .ab-hero-in {
    min-height: 0;
  }
  .ab-hero-art {
    min-height: 0;
    aspect-ratio: 5 / 4;
    margin-top: 8px;
  }
  .ab-exs {
    grid-template-columns: minmax(0, 1fr);
  }
  .ab-tl {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .ab-tl-line {
    left: 6px;
    right: auto;
    top: 0;
    bottom: 0;
    width: 2px;
    height: auto;
    transform-origin: top;
  }
  .js-motion .ab-tl:not(.is-in) .ab-tl-line {
    transform: scaleY(0);
  }
  .ab-msb {
    padding: 0 0 0 40px;
  }
  .ab-dot {
    top: 8px;
  }
  .ab-sticky {
    display: none;
  }
  .ab-chap {
    min-height: 0;
    opacity: 1;
    padding-bottom: clamp(36px, 6vw, 56px);
  }
  .ab-inline {
    display: block;
    margin-top: 22px;
    max-width: 520px;
  }
  .ab-val {
    grid-template-columns: 48px minmax(0, 1fr);
  }
  .ab-val p {
    grid-column: 2;
  }
  .ab-vcov {
    width: 100%;
    opacity: 0.4;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ab-spanel,
  .ab-chap {
    transition: none;
  }
}

/* about hero on the supplied background (aboutbackground.webp): dark left for the copy, studio desk on the right */
.is-about .ab-hero {
  padding-bottom: 0;
  background:
    linear-gradient(90deg, rgba(8, 9, 11, 0.94) 0, rgba(8, 9, 11, 0.7) 38%, rgba(8, 9, 11, 0) 66%),
    #08090b url("/assets/img/aboutbackground.webp") right center / cover no-repeat;
}
.is-about .ab-hero-in {
  grid-template-columns: minmax(0, 1fr);
  min-height: clamp(480px, 42vw, 660px);
}
.is-about .ab-hero-copy {
  max-width: min(580px, 52%);
  padding-bottom: clamp(48px, 5vw, 88px);
}
@media (max-width: 760px) {
  .is-about .ab-hero {
    background:
      linear-gradient(180deg, rgba(8, 9, 11, 0.86), rgba(8, 9, 11, 0.7)),
      #08090b url("/assets/img/aboutbackground.webp") 78% center / cover no-repeat;
  }
  .is-about .ab-hero-copy {
    max-width: none;
  }
  .is-about .ab-hero-in {
    min-height: 0;
  }
}

/* =========================================================
   Legal pages (.is-legal): near-black reading layout with a sticky contents list
   ========================================================= */
.is-legal main {
  background: #08090b;
  color: #f5f5f6;
}
.is-legal main h1,
.is-legal main h2 {
  color: #f5f5f6;
  text-transform: none;
}
.is-legal main p,
.is-legal main li {
  color: #b7bbc3;
}
.is-legal :focus-visible {
  outline: 2px solid #ff8d80;
  outline-offset: 3px;
}
.lg-hero {
  padding: clamp(24px, 3vw, 48px) 0 clamp(36px, 4vw, 64px);
  background:
    radial-gradient(55% 90% at 85% 30%, rgba(200, 40, 31, 0.12), transparent 70%),
    #08090b;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.lg-hero .breadcrumb {
  margin-bottom: clamp(18px, 2.4vw, 32px);
}
.is-legal main .lg-hero h1 {
  font-size: clamp(2.2rem, 1rem + 3.6vw, 4.2rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.lg-hero [data-stage] {
  animation: bf-rise 0.5s var(--ease) both;
  animation-delay: calc(var(--i) * 0.09s);
}
.is-legal main .lg-date {
  margin-top: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #ff9b8f;
}
.lg-hero .lede {
  margin-top: 18px;
  max-width: 56ch;
  color: #cfd3da;
}
.lg-body {
  padding: clamp(40px, 5vw, 88px) 0 clamp(64px, 7vw, 120px);
}
.lg-in {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: clamp(28px, 6vw, 112px);
  align-items: start;
}
.lg-toc {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  max-height: calc(100vh - var(--header-h) - 48px);
  overflow-y: auto;
}
.lg-toc summary {
  list-style: none;
  cursor: pointer;
  font: 600 0.8rem var(--f-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a3abb8;
  padding: 0 0 14px;
}
.lg-toc summary::-webkit-details-marker {
  display: none;
}
.lg-toc ol {
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}
.lg-toc a {
  display: block;
  padding: 9px 0 9px 16px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: #aab0ba;
  font-size: 0.9375rem;
  transition:
    color 0.2s var(--ease),
    border-color 0.2s var(--ease);
}
.lg-toc a:hover,
.lg-toc a.is-active {
  color: #fff;
}
.lg-toc a.is-active {
  border-left-color: var(--accent);
}
.lg-doc {
  max-width: 720px;
}
.lg-sec {
  padding: clamp(24px, 3vw, 40px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.lg-sec:first-child {
  border-top: 0;
  padding-top: 0;
}
.is-legal main .lg-sec h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  line-height: 1.2;
  margin-bottom: 16px;
}
.lg-n {
  font: 700 0.85rem var(--f-body);
  letter-spacing: 0.1em;
  color: #ff8d80;
}
.lg-sec p {
  font-size: 1.0625rem;
  line-height: 1.7;
}
.lg-sec p + p,
.lg-sec p + ul,
.lg-sec ul + p {
  margin-top: 14px;
}
.lg-sec ul {
  display: grid;
  gap: 8px;
}
.lg-sec li {
  position: relative;
  padding-left: 22px;
  font-size: 1.0625rem;
  line-height: 1.6;
}
.lg-sec li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 10px;
  height: 2px;
  background: var(--accent);
}
.lg-sec a {
  color: #ff9b8f;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 960px) {
  .lg-in {
    grid-template-columns: minmax(0, 1fr);
  }
  .lg-toc {
    position: static;
    max-height: none;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* touch targets on small screens: small links and carousel dots get a larger tap area without changing how they look */
@media (max-width: 760px) {
  .breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .foot-base a,
  .site-footer .foot-col a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  button[aria-label^="Show "] {
    position: relative;
  }
  button[aria-label^="Show "]::after {
    content: "";
    position: absolute;
    inset: -15px -8px;
  }
}

/* Homepage hero, phones and portrait windows: the cover scroller sits behind the copy as a blurred backdrop,
   anchored bottom-right, instead of taking its own band under the text. */
@media (max-width: 800px), (max-aspect-ratio: 5/6) {
  .is-home main .hero .slide { position: relative; }
  .is-home main .hero .slide-art {
    position: absolute;
    right: 0;
    bottom: 0;
    left: auto;
    top: auto;
    z-index: 0;
    width: 68%;
    height: 62%;
    min-height: 0;
    flex: none;
    opacity: 0.7;
    pointer-events: none;
    --tw: clamp(96px, 30vw, 190px);
    -webkit-mask-image: linear-gradient(to top left, #000 40%, transparent 96%);
    mask-image: linear-gradient(to top left, #000 40%, transparent 96%);
  }
  .is-home main .hero .tilt { left: 4%; top: -14%; filter: blur(3px); }
  .is-home main .hero .tile { box-shadow: none; }
  .is-home main .hero .slide-art::before,
  .is-home main .hero .slide-art::after { display: none; }
  .is-home main .hero .slide-copy::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.6) 65%, rgba(255, 255, 255, 0));
  }
  .is-home main .hero .hero-actions { position: relative; z-index: 3; }
}

/* Homepage hero, phones and portrait windows: no cover scroller at all */
@media (max-width: 800px), (max-aspect-ratio: 5/6) {
  .is-home main .hero .slide-art { display: none; }
}

/* Homepage hero buttons, phones: long buttons (Android + iOS share a row, Talk to us takes the full row), each filled */
@media (max-width: 800px) {
  .is-home main .hero .hero-actions { gap: 10px; }
  .is-home main .hero .hero-actions .btn {
    flex: 1 1 100%;
    justify-content: center;
    min-height: 52px;
    border-color: transparent;
    color: #fff;
  }
  .is-home main .hero .hero-actions .btn-primary { flex-basis: 100%; background: var(--accent); }
  .is-home main .hero .hero-actions .btn:nth-child(1) { background: #1f9d55; }
  .is-home main .hero .hero-actions .btn:nth-child(2) { background: #14161b; }
  .is-home main .hero .hero-actions .btn:hover { filter: brightness(1.1); color: #fff; }
}

/* Homepage hero buttons: solid fills at every width (no outline look) */
.is-home main .hero .hero-actions .btn {
  border-color: transparent;
  color: #fff;
  box-shadow: none;
  text-shadow: none;
}
.is-home main .hero .hero-actions .btn-primary { background: var(--accent); }
.is-home main .hero .hero-actions .btn:nth-child(1) { background: #1f9d55; }
.is-home main .hero .hero-actions .btn:nth-child(2) { background: #14161b; }
.is-home main .hero .hero-actions .btn:hover { filter: brightness(1.12); color: #fff; }

/* Homepage hero buttons: 3D keys (lit top edge, solid darker underside, press-down on click) */
.is-home main .hero .hero-actions .btn {
  --depth: #7d1510;
  position: relative;
  margin-bottom: 6px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 6px 0 var(--depth),
    0 12px 18px -4px rgba(20, 22, 27, 0.4);
  transition: transform 0.12s, box-shadow 0.12s, filter 0.2s;
}
.is-home main .hero .hero-actions .btn:nth-child(1) { --depth: #115c31; }
.is-home main .hero .hero-actions .btn:nth-child(2) { --depth: #000; }
.is-home main .hero .hero-actions .btn:hover { transform: translateY(-1px); }
.is-home main .hero .hero-actions .btn:active {
  transform: translateY(5px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 1px 0 var(--depth),
    0 3px 6px -2px rgba(20, 22, 27, 0.4);
}
.is-home main .hero .hero-actions .btn-ic { width: 20px; height: 20px; flex: none; }

/* Homepage hero buttons: gradient fills (gloss layer on top, colour gradient underneath) */
.is-home main .hero .hero-actions .btn {
  --g1: #ff5a4a; --g2: #b3201a;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, var(--g1), var(--g2));
}
.is-home main .hero .hero-actions .btn:nth-child(1) { --g1: #46e08c; --g2: #0f8a45; }
.is-home main .hero .hero-actions .btn:nth-child(2) { --g1: #4d5361; --g2: #0b0c10; }

/* "Why operators choose Mega888" in swipe mode (phones and tablets): one clear panel at a time, next one peeking */
@media (max-width: 1000px) {
  .why .hs-sticky {
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad);
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    padding-block: clamp(28px, 6vw, 48px) 8px;
  }
  .why .hs-track { gap: 18px; padding-right: var(--gutter); }
  .why .hs-intro { width: 84vw; }
  .why .hp { width: 84vw; }
  .why .hp p { max-width: none; }
  .why .hs-intro .lede { max-width: none; }
}
.hs-dots { display: none; }
@media (max-width: 1000px) {
  .why:not(.is-pinned) .hs-dots { display: flex; justify-content: center; gap: 8px; padding: 12px var(--gutter) 4px; }
  .hs-dots button {
    width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px;
    background: rgba(20, 22, 27, 0.2); cursor: pointer;
    transition: width 0.3s var(--ease), background 0.3s;
  }
  .hs-dots button[aria-current="true"] { width: 28px; background: var(--accent-on-light); }
}

/* Homepage hero: no cover grid on anything up to tablet width (the mobile menu breakpoint) either */
@media (max-width: 1000px) {
  .is-home main .hero .slide-art { display: none; }
  .is-home main .hero .slide { min-height: 0; flex-direction: column; align-items: stretch; }
  .is-home main .hero .slide-copy { width: auto; margin-left: 0; padding: clamp(28px, 6svh, 56px) var(--gutter); }
}

/* Homepage hero buttons, phones: Android and iOS side by side, Talk to us on the row below */
@media (max-width: 800px) {
  .is-home main .hero .hero-actions .btn { flex: 1 1 calc(50% - 5px); }
  .is-home main .hero .hero-actions .btn-primary { flex-basis: 100%; }
}

/* Games hero breadcrumb: the "/" divider was near-white on the white hero (invisible), and the links were tiny to tap on phones */
.games-hero .breadcrumb li + li::before { color: rgba(20, 22, 27, 0.4); }
.games-hero .breadcrumb a { border-bottom-color: rgba(20, 22, 27, 0.25); }
.games-hero .breadcrumb a:hover { color: var(--ink); }
@media (max-width: 800px) {
  .games-hero .breadcrumb { margin-bottom: 14px; }
  .games-hero .breadcrumb ol { align-items: center; gap: 6px; font-size: 0.875rem; }
  .games-hero .breadcrumb li + li::before { margin-right: 6px; }
  .games-hero .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; }
  .games-hero .breadcrumb li[aria-current] { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Games detail, phones: scroll sideways (snap) instead of tapping arrows; bigger covers */
@media (max-width: 800px) {
  #details.ds-on .ds-stage { grid-template-columns: minmax(0, 1fr); }
  #details.ds-on .ds-view {
    grid-column: 1;
    position: relative;
    display: flex;
    gap: 38px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    margin-inline: calc(-1 * var(--gutter));
    padding: 8px var(--gutter) 16px;
    scroll-padding-inline: var(--gutter);
  }
  #details.ds-on .ds-view::-webkit-scrollbar { display: none; }
  #details.ds-on .detail,
  #details.ds-on .detail[data-reveal],
  #details.ds-on .detail.is-current {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    flex: 0 0 90%;
    scroll-snap-align: start;
    align-content: start;
    animation: none;
  }
  #details.ds-on .detail > div:first-child { width: 100%; }
  .ds-arrow { display: none; }
}

/* Bonus features hero breadcrumb: visible "/" dividers, comfortable tap targets, tidy wrap on phones */
.bf-hero .breadcrumb li + li::before { color: rgba(20, 22, 27, 0.4); }
.bf-hero .breadcrumb a { color: var(--ink-2); border-bottom-color: rgba(20, 22, 27, 0.25); }
.bf-hero .breadcrumb a:hover { color: var(--ink); }
.bf-hero .breadcrumb [aria-current] { color: var(--ink); }
@media (max-width: 800px) {
  .bf-hero .breadcrumb { margin-bottom: 14px; }
  .bf-hero .breadcrumb ol { align-items: center; gap: 4px 6px; font-size: 0.875rem; }
  .bf-hero .breadcrumb li + li::before { margin-right: 6px; }
  .bf-hero .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; padding-right: 4px; }
  .bf-hero .breadcrumb li[aria-current] { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Breadcrumbs on every page: visible "/" dividers on light and dark heroes, same spacing and tap targets on phones */
.dm-hero .breadcrumb li + li::before,
.sol-hero .breadcrumb li + li::before,
.api-hero .breadcrumb li + li::before,
.op-hero .breadcrumb li + li::before { color: rgba(20, 22, 27, 0.4); }
.dm-hero .breadcrumb a, .sol-hero .breadcrumb a, .api-hero .breadcrumb a, .op-hero .breadcrumb a { border-bottom-color: rgba(20, 22, 27, 0.25); }
.page-head .breadcrumb li + li::before,
.kn-hero .breadcrumb li + li::before,
.pt-hero .breadcrumb li + li::before,
.ab-hero .breadcrumb li + li::before,
.lg-hero .breadcrumb li + li::before { color: rgba(244, 245, 247, 0.45); }
@media (max-width: 800px) {
  .page-head .breadcrumb, .dm-hero .breadcrumb, .sol-hero .breadcrumb, .api-hero .breadcrumb, .op-hero .breadcrumb,
  .kn-hero .breadcrumb, .pt-hero .breadcrumb, .ab-hero .breadcrumb, .lg-hero .breadcrumb { margin-bottom: 14px; }
  .page-head .breadcrumb ol, .dm-hero .breadcrumb ol, .sol-hero .breadcrumb ol, .api-hero .breadcrumb ol, .op-hero .breadcrumb ol,
  .kn-hero .breadcrumb ol, .pt-hero .breadcrumb ol, .ab-hero .breadcrumb ol, .lg-hero .breadcrumb ol { align-items: center; gap: 4px 6px; font-size: 0.875rem; }
  .breadcrumb li + li::before { margin-right: 6px; }
  .breadcrumb a, .breadcrumb li[aria-current] { display: inline-flex; align-items: center; min-height: 44px; }
  .breadcrumb a { padding-right: 4px; }
}

/* =====================================================================
   MOBILE MENU: right-hand drawer (all pages). The page you are on is lit: red bar + tint on the item, and on the sub-page inside a group.
   ===================================================================== */
@media (max-width: 1000px) {
  .site-header .nav-menu {
    display: flex;
    inset: var(--header-h) 0 0 auto;
    width: min(86vw, 380px);
    padding: 18px 16px 28px;
    gap: 6px;
    background:
      radial-gradient(120% 40% at 100% 0%, rgba(200, 40, 31, 0.28), transparent 70%),
      #0d0f14;
    box-shadow: -24px 0 60px -20px rgba(0, 0, 0, 0.6), 0 0 0 100vmax rgba(7, 8, 11, 0);
    visibility: hidden;
    transform: translateX(104%);
    transition: transform 0.38s var(--ease), visibility 0s 0.38s, box-shadow 0.38s;
  }
  .menu-open .site-header .nav-menu {
    visibility: visible;
    transform: none;
    box-shadow: -24px 0 60px -20px rgba(0, 0, 0, 0.6), 0 0 0 100vmax rgba(7, 8, 11, 0.55);
    transition-delay: 0s;
  }
  .site-header .nav-item { border: 0; }
  .site-header .nav-link,
  .site-header .nav-trigger {
    min-height: 58px;
    padding: 0 18px;
    border-radius: 14px;
    font: 700 1.3rem / 1 var(--f-display);
    color: #f4f5f7;
    letter-spacing: -0.01em;
    transition: background 0.2s, color 0.2s;
  }
  .site-header .nav-link:hover,
  .site-header .nav-trigger:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
  .site-header .nav-link[aria-current="page"],
  .site-header .nav-trigger[data-current="true"],
  .site-header .nav-trigger[aria-current="page"] {
    background: linear-gradient(90deg, rgba(200, 40, 31, 0.32), rgba(200, 40, 31, 0.08));
    color: #fff;
    box-shadow: inset 4px 0 0 var(--accent) !important;
  }
  .site-header .nav-sub { padding: 2px 0 8px 18px; display: grid; gap: 2px; }
  .site-header .nav-sub a {
    position: relative;
    min-height: 46px;
    padding: 0 14px 0 22px;
    border-radius: 10px;
    color: rgba(244, 245, 247, 0.72);
    font-size: 1rem;
    background: none;
  }
  .site-header .nav-sub a::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: rgba(244, 245, 247, 0.3);
  }
  .site-header .nav-sub a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
  .site-header .nav-sub a[aria-current="page"] { color: #fff; background: rgba(200, 40, 31, 0.28); font-weight: 600; }
  .site-header .nav-sub a[aria-current="page"]::before { background: var(--accent); box-shadow: 0 0 0 3px rgba(200, 40, 31, 0.35); }
  .site-header .nav-cta { margin: 18px 0 0; }
  .site-header .nav-cta .btn { min-height: 54px; border-radius: 14px; }
  .menu-open .site-header .nav-item,
  .menu-open .site-header .nav-cta { animation: nav-in 0.4s var(--ease) both; }
  .menu-open .site-header .nav-item:nth-child(2) { animation-delay: 0.04s; }
  .menu-open .site-header .nav-item:nth-child(3) { animation-delay: 0.08s; }
  .menu-open .site-header .nav-item:nth-child(4) { animation-delay: 0.12s; }
  .menu-open .site-header .nav-item:nth-child(5) { animation-delay: 0.16s; }
  .menu-open .site-header .nav-cta { animation-delay: 0.2s; }
}
@keyframes nav-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .site-header .nav-menu { transition: none; }
  .menu-open .site-header .nav-item, .menu-open .site-header .nav-cta { animation: none; }
}
@media (max-width: 1000px) {
  .site-header .nav-cta .btn[aria-current="page"] { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 0 0 6px rgba(200, 40, 31, 0.45); }
}

/* Mobile drawer on the white-theme pages: cancel the light dropdown skin (.is-home white panel + outlined CTA) that leaked into it */
@media (max-width: 1000px) {
  .site-header .nav-sub { background: none; border: 0; box-shadow: none; }
  .site-header .nav-cta .btn.btn-primary { background: var(--accent); color: #fff; border-color: transparent; }
  .site-header .nav-cta .btn.btn-primary:hover { background: #a61f18; color: #fff; }
}

/* brand logo (/assets/img/logo.webp): wide canvas with padding, so it is cropped by negative margins to keep the header height */
.site-header .brand img {
  height: 46px;
  width: auto;
  margin-block: -14px;
  margin-inline: -6px 0;
}
/* the logo has white lettering: on pages with a white header, turn the white to dark and keep the red */
.is-home .site-header .brand img {
  filter: invert(1) hue-rotate(180deg) saturate(2.6) brightness(0.82) contrast(1.15);
}
.brand .foot-logo {
  display: block;
  height: 96px;
  width: auto;
  margin: -24px 0 -24px -8px;
}
@media (max-width: 600px) {
  .site-header .brand img {
    height: 40px;
    margin-block: -9px;
  }
}

/* bonus page: no slanted joins, so the first section is not pulled up under the sticky header (the breadcrumb was hidden) */
.is-bonus main > section:not(.banner):not(.zz) {
  margin-top: 0;
  clip-path: none;
}
.is-bonus main > section:not(.banner):not(.zz)::before {
  display: none;
}

/* =====================================================================
   HEADER (desktop): frosted bar, pill links with a small red marker, refined dropdowns, filled pill CTA.
   Applies to every page. Dark by default; pages with a white header (.is-home) get the light variant.
   The mobile drawer (max-width 1000px) is untouched. backdrop-filter is desktop-only because it would
   turn the header into the containing block of the fixed mobile drawer.
   ===================================================================== */
@media (min-width: 1001px) {
  .site-header {
    background: rgba(9, 10, 13, 0.72);
    -webkit-backdrop-filter: saturate(170%) blur(18px);
    backdrop-filter: saturate(170%) blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition:
      background 0.3s var(--ease),
      box-shadow 0.3s var(--ease),
      border-color 0.3s var(--ease);
  }
  .site-header.is-scrolled {
    background: rgba(9, 10, 13, 0.9);
    box-shadow: 0 14px 34px -22px rgba(0, 0, 0, 0.85);
    border-bottom-color: rgba(255, 255, 255, 0.12);
  }
  .is-home .site-header {
    background: rgba(255, 255, 255, 0.78);
    border-bottom-color: rgba(20, 22, 27, 0.07);
  }
  .is-home .site-header.is-scrolled {
    background: rgba(255, 255, 255, 0.93);
    box-shadow: 0 14px 34px -24px rgba(20, 22, 27, 0.45);
    border-bottom-color: rgba(20, 22, 27, 0.1);
  }

  .site-header .brand {
    transition: opacity 0.2s var(--ease);
  }
  .site-header .brand:hover {
    opacity: 0.86;
  }

  /* links */
  .site-header .nav-menu {
    gap: 4px;
  }
  .site-header .nav-menu .nav-link,
  .site-header .nav-menu .nav-trigger {
    position: relative;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    font: 600 0.9rem / 1 var(--f-body);
    letter-spacing: 0.005em;
    color: #b7bcc6;
    box-shadow: none;
    transition:
      color 0.2s var(--ease),
      background 0.2s var(--ease);
  }
  .site-header .nav-menu .nav-link::after,
  .site-header .nav-menu .nav-trigger::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
    translate: -50% 0;
    scale: 0 1;
    transition: scale 0.25s var(--ease);
  }
  .site-header .nav-menu .nav-link:hover,
  .site-header .nav-menu .nav-trigger:hover,
  .site-header .nav-menu .nav-item.is-open > .nav-trigger {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
  }
  .site-header .nav-menu .nav-link[aria-current="page"],
  .site-header .nav-menu .nav-trigger[data-current="true"] {
    color: #fff;
    box-shadow: none;
  }
  .site-header .nav-menu .nav-link[aria-current="page"]::after,
  .site-header .nav-menu .nav-trigger[data-current="true"]::after {
    scale: 1 1;
  }
  .is-home .site-header .nav-menu .nav-link,
  .is-home .site-header .nav-menu .nav-trigger {
    color: #565d6b;
  }
  .is-home .site-header .nav-menu .nav-link:hover,
  .is-home .site-header .nav-menu .nav-trigger:hover,
  .is-home .site-header .nav-menu .nav-item.is-open > .nav-trigger {
    color: #14161b;
    background: rgba(20, 22, 27, 0.06);
  }
  .is-home .site-header .nav-menu .nav-link[aria-current="page"],
  .is-home .site-header .nav-menu .nav-trigger[data-current="true"] {
    color: #14161b;
  }
  .site-header .nav-trigger svg {
    width: 11px;
    height: 11px;
    opacity: 0.7;
  }

  /* dropdown */
  .site-header .nav-sub {
    top: calc(100% + 18px);
    left: -8px;
    min-width: 252px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(17, 19, 24, 0.94);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow:
      0 28px 60px -24px rgba(0, 0, 0, 0.8),
      0 0 0 1px rgba(0, 0, 0, 0.4);
    transform: translateY(-6px) scale(0.98);
    transform-origin: 24px top;
  }
  /* invisible bridge so the pointer can travel from the trigger to the panel */
  .site-header .nav-sub::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -20px;
    height: 20px;
  }
  .site-header .nav-item.is-open .nav-sub {
    transform: none;
  }
  .site-header .nav-sub a {
    position: relative;
    min-height: 42px;
    padding: 0 14px 0 30px;
    border-radius: 10px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #c3c8d1;
  }
  .site-header .nav-sub a::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    translate: 0 -50%;
    transition:
      background 0.2s var(--ease),
      scale 0.2s var(--ease);
  }
  .site-header .nav-sub a:hover,
  .site-header .nav-sub a:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
  }
  .site-header .nav-sub a:hover::before,
  .site-header .nav-sub a:focus-visible::before {
    background: var(--accent);
    scale: 1.3;
  }
  .site-header .nav-sub a[aria-current="page"] {
    color: #fff;
    font-weight: 600;
  }
  .site-header .nav-sub a[aria-current="page"]::before {
    background: var(--accent);
  }
  .is-home .site-header .nav-sub {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(20, 22, 27, 0.09);
    box-shadow:
      0 28px 60px -26px rgba(20, 22, 27, 0.4),
      0 0 0 1px rgba(20, 22, 27, 0.03);
  }
  .is-home .site-header .nav-sub a {
    color: #4b5160;
  }
  .is-home .site-header .nav-sub a::before {
    background: rgba(20, 22, 27, 0.22);
  }
  .is-home .site-header .nav-sub a:hover,
  .is-home .site-header .nav-sub a:focus-visible,
  .is-home .site-header .nav-sub a[aria-current="page"] {
    background: rgba(20, 22, 27, 0.05);
    color: #14161b;
  }

  /* call to action: filled pill on every page */
  .site-header .nav-cta {
    margin-left: 14px;
  }
  .site-header .nav-cta .btn,
  .is-home .site-header .nav-cta .btn-primary {
    min-height: 42px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font: 700 0.875rem / 1 var(--f-body);
    box-shadow: 0 10px 22px -12px rgba(200, 40, 31, 0.9);
    transition:
      background 0.2s var(--ease),
      transform 0.2s var(--ease),
      box-shadow 0.2s var(--ease);
  }
  .site-header .nav-cta .btn:hover,
  .is-home .site-header .nav-cta .btn-primary:hover {
    background: #d92f25;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 14px 26px -12px rgba(200, 40, 31, 1);
  }
  .site-header .nav-cta .btn[aria-current="page"] {
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.9),
      0 0 0 4px rgba(200, 40, 31, 0.5);
  }

  /* visible keyboard focus */
  .site-header .nav-menu .nav-link:focus-visible,
  .site-header .nav-menu .nav-trigger:focus-visible,
  .site-header .nav-cta .btn:focus-visible,
  .site-header .brand:focus-visible {
    outline: 2px solid #ff8d80;
    outline-offset: 2px;
  }
  .is-home .site-header .nav-menu .nav-link:focus-visible,
  .is-home .site-header .nav-menu .nav-trigger:focus-visible,
  .is-home .site-header .nav-cta .btn:focus-visible,
  .is-home .site-header .brand:focus-visible {
    outline-color: var(--accent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header .nav-menu .nav-link::after,
  .site-header .nav-menu .nav-trigger::after,
  .site-header .nav-sub,
  .site-header .nav-cta .btn {
    transition: none;
  }
}

/* pages with a white header need a white page behind the frosted bar (otherwise the translucent white turns grey over the dark body) */
body.is-home {
  background: #fff;
}

/* ---------- Floating quick links (right edge, every page) ---------- */
.float-bar {
  position: fixed;
  right: 14px;
  top: 50%;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  transform: translateY(-50%);
}
.float-bar .fb {
  --g1: #4d5361; --g2: #0b0c10; --depth: #000;
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-direction: row-reverse;
  height: 52px;
  min-width: 52px;
  padding: 0 15px;
  gap: 0;
  border-radius: 26px;
  color: #fff;
  font: 700 0.9rem / 1 var(--f-body);
  white-space: nowrap;
  overflow: hidden;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%), linear-gradient(135deg, var(--g1), var(--g2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 4px 0 var(--depth), 0 10px 16px -4px rgba(20, 22, 27, 0.4);
  transition: transform 0.15s, box-shadow 0.15s, padding 0.25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.float-bar .fb svg { width: 22px; height: 22px; flex: none; }
.float-bar .fb span { max-width: 0; opacity: 0; overflow: hidden; transition: max-width 0.25s var(--ease), opacity 0.2s, margin 0.25s; }
.float-bar .fb:hover, .float-bar .fb:focus-visible { padding-left: 18px; transform: translateY(-1px); }
.float-bar .fb:hover span, .float-bar .fb:focus-visible span { max-width: 120px; opacity: 1; margin-right: 10px; }
.float-bar .fb:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 0 var(--depth), 0 3px 6px -2px rgba(20, 22, 27, 0.4); }
.float-bar .fb-play { --g1: #ff5a4a; --g2: #b3201a; --depth: #7d1510; }
.float-bar .fb-telegram { --g1: #3fb7ec; --g2: #1783bd; --depth: #0e5a82; }
.float-bar .fb-whatsapp { --g1: #4be083; --g2: #139c4c; --depth: #0b6a32; }
.float-bar .fb-android { --g1: #46e08c; --g2: #0f8a45; --depth: #0a5e2e; }
.float-bar .fb-ios { --g1: #4d5361; --g2: #0b0c10; --depth: #000; }
.menu-open .float-bar { display: none; }
@media (max-width: 800px) {
  .float-bar { right: 8px; gap: 10px; }
  .float-bar .fb { height: 44px; min-width: 44px; padding: 0 11px; border-radius: 22px; }
  .float-bar .fb svg { width: 20px; height: 20px; }
  .float-bar .fb span { display: none; }
}
@media (prefers-reduced-motion: reduce) { .float-bar .fb, .float-bar .fb span { transition: none; } }
.dm-show { scroll-margin-top: var(--header-h); }

/* Demo page: "Play in full screen" (iOS only) and the full-viewport player it opens */
.dm-fs-row { display: flex; justify-content: center; margin-top: clamp(18px, 3vw, 28px); }
.dm-fs-btn svg { width: 18px; height: 18px; flex: none; }
.dm-fs-btn[hidden] { display: none; }
.dm-fs-layer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: #05070a;
}
.dm-fs-layer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.dm-fs-close {
  position: absolute;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(8, 11, 16, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  opacity: 0.75;
  cursor: pointer;
}
.dm-fs-close svg { width: 18px; height: 18px; }
.dm-fs-open { overflow: hidden; }
.dm-fs-open .float-bar { display: none; }