/* == tokens ================================================================ */
@font-face {
  font-family: "Slotuna Display";
  src: url("/assets/type/d7.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Slotuna Display";
  src: url("/assets/type/d7i.woff2") format("woff2");
  font-weight: 600 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Slotuna Display";
  src: url("/assets/type/d4i.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Slotuna Text";
  src: url("/assets/type/b4.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Slotuna Text";
  src: url("/assets/type/b5.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Slotuna Text";
  src: url("/assets/type/b6.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Slotuna Text";
  src: url("/assets/type/b7.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --t-main: #032b41;
  --t-accent: #b6977d;
  --t-accent-pressed: #a8836b;
  --t-base-plane: #01161f;
  --t-panel: #052330;
  --t-letters: #ffffff;
  --t-faint: #bebebe;
  --t-line: rgba(255, 255, 255, 0.1);
  --t-edge-hard: #0e394d;
  --t-grad-1: #45bdcd;
  --t-grad-2: #e2b88d;
  --t-advisory: #a71e34;

  --s-2xs: 5px;
  --s-xs: 10px;
  --s-sm: 15px;
  --s-md: 25px;
  --s-lg: 40px;
  --s-xl: 60px;
  --s-2xl: 90px;
  --s-3xl: 140px;

  --r-lozenge: 9999px;
  --r-dot: 50%;
  --r-xs: 2px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  --f-title: "Slotuna Display", Georgia, "Times New Roman", serif;
  --f-body: "Slotuna Text", Arial, sans-serif;

  --z-display-1: 44px;
  --z-h2: 34px;
  --z-display-3: 26px;
  --z-display-4: 20px;
  --z-sm-2: 16px;
  --z-xs-2: 14px;
  --z-normal: 16px;
  --z-petite: 14px;
  --z-tiny: 12px;

  --l-tight: 1.2;
  --l-base: 1.55;
  --l-relaxed: 1.7;

  --w-regular: 400;
  --w-medium: 500;
  --w-black: 700;

  --e-close: -0.01em;
  --e-base: 0;
  --e-spread: 0.02em;

  --d-xs: 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  --d-sm: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  --d-md: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  --d-lg: 0 16px 48px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;

  --t-short: 107ms;
  --t-regular: 200ms;
  --t-slow: 334ms;
  --x-out: cubic-bezier(0.35, 0.89, 0.36, 0.96);
  --x-even: cubic-bezier(0.66, 0.08, 0.33, 0.89);
  --x-pop: cubic-bezier(0.37, 1.75, 0.52, 1.15);

  --v-full: 1360px;
  --v-readable: 1360px;
  --v-pad-lg: 32px;
  --v-pad-md: 24px;
  --v-padding-mobile: 16px;

  --b-light: 1px;
  --b-base: 2px;
  --b-heavy: 3px;

  --h-h-lg: 86px;
  --h-short: 64px;

  --edge: 450px;
  --sec-y: 40px;
  --pad: var(--v-pad-lg);
}

@media (max-width: 780px) {
  :root {
    --z-display-1: 30px;
    --z-h2: 24px;
    --z-display-3: 20px;
    --z-display-4: 18px;
    --z-sm-2: 15px;
    --z-xs-2: 13px;
    --z-normal: 15px;
    --z-petite: 13px;
    --z-tiny: 11px;
    --pad: var(--v-padding-mobile);
    --sec-y: 32px;
  }
}

@media (min-width: 781px) and (max-width: 1140px) {
  :root {
    --pad: var(--v-pad-md);
  }
}

/* == reset / base ========================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  overflow-x: clip;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--t-base-plane);
  color: var(--t-letters);
  font-family: var(--f-body);
  font-size: var(--z-normal);
  font-weight: var(--w-regular);
  line-height: var(--l-base);
  letter-spacing: var(--e-base);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img {
  max-width: 100%;
  height: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: anywhere;
  margin: 0;
}

h1,
h2 {
  font-family: var(--f-title);
  font-weight: var(--w-black);
  line-height: var(--l-tight);
  letter-spacing: var(--e-close);
}

h3,
h4 {
  font-family: var(--f-body);
  line-height: var(--l-tight);
  letter-spacing: var(--e-base);
}

p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--t-accent);
  text-decoration: none;
}

a:hover {
  color: var(--t-accent-pressed);
}

:focus-visible {
  outline: var(--b-base) solid var(--t-grad-1);
  outline-offset: 3px;
}

.mainFlow {
  flex: 1 0 auto;
  display: block;
}

.skipHop {
  position: absolute;
  top: -200px;
  left: var(--s-sm);
  z-index: 200;
  background: var(--t-accent);
  color: var(--t-base-plane);
  font-weight: var(--w-medium);
  padding: var(--s-xs) var(--s-md);
  border-radius: var(--r-sm);
}

.skipHop:not(:focus) {
  top: -200px;
}

.skipHop:focus {
  top: var(--s-sm);
  color: var(--t-base-plane);
}

/* == header (HEAD-SPLIT, sticky-shrink) ==================================== */
.w53 {
  position: sticky;
  top: 0;
  z-index: 90;
  background: var(--t-base-plane);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  transition: box-shadow var(--t-regular) var(--x-out);
}

.w53-bar {
  height: 86px;
  max-width: calc(var(--v-full) + 2 * var(--v-pad-lg));
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  gap: var(--s-sm);
  position: relative;
  transition: height var(--t-regular) var(--x-out);
}

.w53.is-shrunk .w53-bar {
  height: 66px;
}

.w53-sign {
  display: inline-flex;
  align-items: center;
  gap: var(--s-xs);
  flex-shrink: 0;
  order: 1;
}

.w53-signDisc {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: var(--r-dot);
  background: var(--t-main);
  border: var(--b-light) solid var(--t-accent);
  display: inline-block;
  position: relative;
  transition: width var(--t-regular) var(--x-out), height var(--t-regular) var(--x-out);
}

.w53-signDisc::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  background: var(--t-accent);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}

.w53-signPic {
  height: 50px;
  width: auto;
  flex-shrink: 0;
  display: block;
  transition: height var(--t-regular) var(--x-out);
}

.w53.is-shrunk .w53-signPic {
  height: 40px;
}

.w53.is-shrunk .w53-signDisc {
  width: 38px;
  height: 38px;
}

.w53-menu-switch {
  order: 3;
  margin-left: auto;
  display: none;
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  background: var(--t-main);
  color: var(--t-letters);
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}

.w53-lines {
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  background: var(--t-letters);
}

.w53-lines::before,
.w53-lines::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: var(--t-letters);
  transition: transform var(--t-regular) var(--x-out);
}

.w53-lines::before {
  top: -7px;
}

.w53-lines::after {
  top: 7px;
}

.w53-index {
  order: 2;
  margin-inline: auto;
  flex: 0 0 auto;
  min-width: 0;
}

.w53-list {
  display: flex;
  align-items: center;
  gap: var(--s-md);
  flex-wrap: nowrap;
}

.w53-piece,
.w53-pieceMore {
  position: relative;
  display: block;
}

.w53-piece[hidden],
.w53-pieceMore[hidden] {
  display: none;
}

.w53-piece + .w53-piece::before,
.w53-piece + .w53-pieceMore::before {
  content: "·";
  position: absolute;
  left: calc(-0.5 * var(--s-md) - 2px);
  color: var(--t-accent);
}

.w53-step {
  display: inline-block;
  padding-block: 12px;
  font-size: 16px;
  font-weight: 500;
  color: var(--t-letters);
  background: var(--t-base-plane);
  white-space: nowrap;
  text-transform: none;
  border-bottom: var(--b-base) solid transparent;
  transition: transform var(--t-regular) var(--x-out), color var(--t-regular) var(--x-out);
}

.w53-step:hover {
  transform: translateY(-2px);
  color: var(--t-accent);
  background: var(--t-base-plane);
}

.w53-step[aria-current="page"] {
  color: var(--t-accent);
  background: var(--t-base-plane);
  border-bottom-color: var(--t-accent);
}

.w53-more-switch {
  padding-block: 12px;
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--t-letters);
  background: var(--t-base-plane);
  border: 0;
  cursor: pointer;
  white-space: nowrap;
}

.w53-more-switch:hover {
  color: var(--t-accent);
  background: var(--t-base-plane);
}

.w53-more-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  max-height: 60vh;
  overflow-y: auto;
  z-index: 30;
  padding: var(--s-xs);
  background: var(--t-main);
  border: var(--b-light) solid var(--t-edge-hard);
  border-radius: var(--r-sm);
  box-shadow: var(--d-md);
}

.w53-more-menu.is-open {
  display: block;
}

.w53-more-menu .w53-piece::before {
  content: none;
}

.w53-more-menu .w53-step {
  display: block;
  padding: var(--s-xs) var(--s-sm);
  background: var(--t-main);
  white-space: normal;
  border-bottom: 0;
}

.w53-more-menu .w53-step:hover {
  background: var(--t-main);
  transform: none;
}

.w53-flyout {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  padding: var(--s-sm) var(--pad) var(--s-md);
  background: var(--t-main);
  border-top: var(--b-light) solid var(--t-edge-hard);
  box-shadow: var(--d-md);
}

.w53-flyout.is-open {
  display: block;
}

.w53-flyoutIndex {
  display: block;
}

.w53-flyoutList {
  display: flex;
  flex-direction: column;
  max-height: 62vh;
  overflow-y: auto;
}

.w53-flyoutPiece {
  display: block;
}

.w53-flyoutStep {
  display: block;
  padding: var(--s-sm) var(--s-2xs);
  font-size: var(--z-sm-2);
  font-weight: 500;
  color: var(--t-letters);
  background: var(--t-main);
  min-height: 46px;
}

.w53-flyoutStep[aria-current="page"] {
  color: var(--t-accent);
  background: var(--t-main);
}

@media (max-width: 1023px) {
  .w53-menu-switch {
    display: inline-flex;
  }

  .w53-index {
    display: none;
  }
}

@media (max-width: 780px) {
  .w53-bar {
    height: 64px;
  }

  .w53.is-shrunk .w53-bar {
    height: 60px;
  }

  .w53-signPic {
    height: 38px;
  }

  .w53-signDisc {
    width: 38px;
    height: 38px;
  }

  .w53.is-shrunk .w53-signPic {
    height: 34px;
  }

  .w53.is-shrunk .w53-signDisc {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 400px) {
  .w53-signPic {
    height: 32px;
  }

  .w53-signDisc {
    width: 32px;
    height: 32px;
  }

  .w53-signDisc::before {
    width: 14px;
    height: 14px;
  }
}

/* == breadcrumbs (BREAD-03) ================================================ */
.c40 {
  display: block;
  background: var(--t-base-plane);
  padding-block: var(--s-md);
}

.c40-wrap {
  max-width: calc(var(--v-full) + 2 * var(--v-pad-lg));
  margin-inline: auto;
  padding-inline: var(--pad);
}

.c40-list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

.c40-piece {
  font-size: var(--z-petite);
  color: var(--t-letters);
  background: var(--t-base-plane);
}

.c40-piece + .c40-piece::before {
  content: "›";
  color: var(--t-grad-2);
  margin-inline: var(--s-xs);
}

.c40-step {
  color: var(--t-faint);
  background: var(--t-base-plane);
}

.c40-step:hover {
  color: var(--t-accent);
  background: var(--t-base-plane);
}

/* == hero (HERO-03 centered compact) ======================================= */
.y12 {
  position: relative;
  isolation: isolate;
  background: var(--t-base-plane);
  overflow: hidden;
}

.y12::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(180deg, rgba(1, 22, 31, 0.72) 0%, rgba(1, 22, 31, 0.94) 78%),
    url("/assets/render.webp");
  background-size: cover;
  background-position: center;
  opacity: 0.85;
}

.y12-wrap {
  max-width: calc(var(--v-full) + 2 * var(--v-pad-lg));
  margin-inline: auto;
  padding-inline: var(--pad);
  padding-block: var(--s-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: y12-rise var(--t-slow) var(--x-out) both;
}

.y12-eyebrow {
  display: inline-block;
  font-size: var(--z-tiny);
  text-transform: uppercase;
  letter-spacing: var(--e-spread);
  color: var(--t-grad-2);
  background: var(--t-base-plane);
  padding: var(--s-2xs) var(--s-sm);
  border-radius: var(--r-lozenge);
  border: var(--b-light) solid var(--t-edge-hard);
  margin-bottom: var(--s-md);
}

.y12-top {
  font-size: clamp(28px, 5vw, var(--z-display-1));
  color: var(--t-letters);
  max-width: 22ch;
}

.y12-sub {
  font-size: var(--z-normal);
  line-height: var(--l-relaxed);
  color: var(--t-faint);
  background: transparent;
  max-width: var(--edge);
  margin-block: var(--s-md);
}

.y12-pitch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding-inline: var(--s-lg);
  margin-block: var(--s-sm);
  border-radius: var(--r-lozenge);
  font-family: var(--f-body);
  font-weight: var(--w-medium);
  letter-spacing: var(--e-spread);
}

.y12-fineprint {
  font-size: var(--z-tiny);
  color: var(--t-faint);
  background: transparent;
  max-width: var(--edge);
  margin-top: var(--s-sm);
  line-height: var(--l-base);
}

.y12-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 1px 7px;
  border-radius: var(--r-xs);
  background: var(--t-advisory);
  color: var(--t-letters);
  font-weight: var(--w-medium);
  font-size: var(--z-tiny);
}

@keyframes y12-rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* == page header (PHEAD-07 number + title) ================================= */
.i48 {
  display: block;
  background: var(--t-base-plane);
  padding-block: var(--sec-y);
}

.i48-wrap {
  max-width: calc(var(--v-full) + 2 * var(--v-pad-lg));
  margin-inline: auto;
  padding-inline: var(--pad);
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--s-lg);
  align-items: start;
}

.i48-figure {
  font-family: var(--f-title);
  font-weight: var(--w-black);
  font-size: calc(var(--z-display-1) * 1.4);
  line-height: 1;
  color: var(--t-grad-2);
  background: var(--t-base-plane);
  align-self: start;
}

.i48-body {
  display: block;
}

.i48-top {
  font-size: var(--z-display-1);
  color: var(--t-letters);
}

.i48-meta {
  margin-top: var(--s-xs);
  font-size: var(--z-petite);
  text-transform: uppercase;
  letter-spacing: var(--e-spread);
  color: var(--t-faint);
  background: var(--t-base-plane);
}

@media (max-width: 780px) {
  .i48-wrap {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: var(--s-sm);
  }
}

/* == reviews (REV-09 magazine pull-quote) ================================== */
.y42 {
  display: block;
  background: var(--t-base-plane);
  padding-block: var(--sec-y);
}

.y42-wrap {
  max-width: calc(var(--v-full) + 2 * var(--v-pad-lg));
  margin-inline: auto;
  padding-inline: var(--pad);
}

.y42-hdr {
  font-size: var(--z-h2);
  color: var(--t-letters);
  text-align: center;
  margin-bottom: var(--s-md);
}

.y42-list {
  display: block;
}

.y42-piece {
  padding-block: var(--s-md);
  display: block;
}

.y42-quote {
  margin: 0;
  text-align: center;
}

.y42-quote p {
  font-family: var(--f-title);
  font-style: italic;
  font-size: var(--z-display-3);
  line-height: var(--l-tight);
  color: var(--t-letters);
  background: transparent;
  max-width: none;
}

.y42-meta {
  margin-top: var(--s-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-xs);
  align-items: baseline;
  justify-content: center;
  font-size: var(--z-petite);
  letter-spacing: var(--e-spread);
  text-transform: uppercase;
}

.y42-who {
  font-style: normal;
  color: var(--t-faint);
  background: var(--t-base-plane);
}

.y42-date {
  color: var(--t-faint);
  background: var(--t-base-plane);
}

.y42-score {
  color: var(--t-grad-2);
  background: var(--t-base-plane);
  letter-spacing: var(--e-base);
}

.y42-rule {
  width: 80px;
  height: 0;
  border: 0;
  border-top: var(--b-light) solid var(--t-edge-hard);
  margin: var(--s-md) auto;
}

/* == prose (PROSE-07 numbered headings, tight) ============================= */
.l18 {
  display: block;
  background: var(--t-base-plane);
  padding-block: var(--sec-y);
}

.l18-wrap {
  max-width: calc(var(--v-full) + 2 * var(--v-pad-lg));
  margin-inline: auto;
  padding-inline: var(--pad);
}

.l18-fill {
  counter-reset: sec;
  display: block;
}

.l18-top {
  counter-increment: sec;
  font-size: var(--z-h2);
  font-weight: 600;
  color: var(--t-letters);
  margin-block-start: var(--s-md);
  margin-block-end: var(--s-xs);
  display: flex;
  align-items: baseline;
  gap: var(--s-sm);
}

.l18-fill > .l18-top:first-child {
  margin-block-start: 0;
}

.l18-top::before {
  content: counter(sec);
  font-family: var(--f-title);
  color: var(--t-grad-2);
  flex-shrink: 0;
}

.l18-sub {
  font-size: var(--z-display-4);
  font-weight: var(--w-medium);
  color: var(--t-letters);
  margin-block: var(--s-sm) var(--s-2xs);
}

.l18-line {
  font-size: var(--z-normal);
  line-height: var(--l-relaxed);
  color: var(--t-faint);
  background: var(--t-base-plane);
  margin-block-end: var(--s-xs);
  max-width: none;
}

.l18-list {
  margin-block: var(--s-2xs) var(--s-sm);
  display: block;
}

.l18-piece {
  position: relative;
  padding-left: var(--s-md);
  margin-block-end: var(--s-2xs);
  font-size: var(--z-normal);
  line-height: var(--l-relaxed);
  color: var(--t-faint);
  background: var(--t-base-plane);
}

.l18-piece::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: var(--t-accent);
  transform: rotate(45deg);
}

.l18-step {
  color: var(--t-accent);
  background: var(--t-base-plane);
  position: relative;
  border-bottom: var(--b-light) solid var(--t-edge-hard);
}

.l18-step:hover {
  color: var(--t-accent-pressed);
  background: var(--t-base-plane);
  border-bottom-color: var(--t-accent-pressed);
}

.l18-fill strong {
  color: var(--t-letters);
  font-weight: var(--w-black);
}

.l18-fill em {
  color: var(--t-grad-2);
  font-style: italic;
}

/* == data table (TABLE-01 striped rows) ==================================== */
.d83 {
  display: block;
  background: var(--t-base-plane);
  padding-block: var(--sec-y);
}

.d83-wrap {
  max-width: calc(var(--v-full) + 2 * var(--v-pad-lg));
  margin-inline: auto;
  padding-inline: var(--pad);
}

.d83-hdr {
  font-size: var(--z-h2);
  color: var(--t-letters);
  margin-bottom: var(--s-md);
}

.d83-frame {
  border-radius: var(--r-md);
  overflow-x: auto;
  overflow-y: hidden;
  border: var(--b-light) solid var(--t-edge-hard);
}

.d83-grid {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  background: var(--t-panel);
}

.d83-crown {
  background: var(--t-main);
}

.d83-strip {
  background: var(--t-panel);
  transition: background var(--t-short) var(--x-out);
}

.d83-crown .d83-strip {
  background: var(--t-main);
}

.d83-grid tbody .d83-strip:nth-child(even) {
  background: #072735;
}

.d83-grid tbody .d83-strip:hover {
  background: #0a2f40;
}

.d83-cell {
  padding: var(--s-sm) var(--s-md);
  text-align: left;
  font-size: var(--z-normal);
  color: var(--t-faint);
  background: transparent;
  border-bottom: var(--b-light) solid var(--t-line);
}

.d83-crown .d83-cell {
  font-family: var(--f-body);
  font-weight: var(--w-medium);
  font-size: var(--z-xs-2);
  text-transform: uppercase;
  letter-spacing: var(--e-spread);
  color: var(--t-grad-2);
  background: var(--t-main);
}

.d83-strip .d83-cell:first-child {
  color: var(--t-letters);
  font-weight: var(--w-medium);
}

/* == items grid (GRID-04 icon-decorated cards) ============================= */
.e30 {
  display: block;
  background: var(--t-base-plane);
  padding-block: var(--sec-y);
  scroll-margin-top: 100px;
}

.e30-wrap {
  max-width: calc(var(--v-full) + 2 * var(--v-pad-lg));
  margin-inline: auto;
  padding-inline: var(--pad);
}

.e30-hdr {
  font-size: var(--z-h2);
  color: var(--t-letters);
  margin-bottom: var(--s-md);
}

.e30-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-md);
}

.e30-card {
  padding: var(--s-md);
  background: var(--t-panel);
  border: var(--b-light) solid var(--t-edge-hard);
  border-radius: var(--r-md);
  box-shadow: var(--d-xs);
  transition: background var(--t-regular) var(--x-out), border-color var(--t-regular) var(--x-out);
}

.e30-card:hover {
  background: #0a2b3a;
  border-color: var(--t-accent);
}

.e30-disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-dot);
  background: var(--t-accent);
  color: var(--t-base-plane);
  font-family: var(--f-title);
  font-weight: var(--w-black);
  font-size: var(--z-display-4);
  margin-bottom: var(--s-sm);
}

.e30-top {
  font-size: var(--z-display-4);
  font-weight: var(--w-black);
  color: var(--t-letters);
  margin-bottom: var(--s-xs);
}

.e30-line {
  font-size: var(--z-normal);
  line-height: var(--l-base);
  color: var(--t-faint);
  background: transparent;
}

@media (max-width: 1140px) {
  .e30-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .e30-stack {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* == faq (FAQ-09 magazine Q&A) ============================================= */
.i26 {
  display: block;
  background: var(--t-base-plane);
  padding-block: var(--sec-y);
}

.i26-wrap {
  max-width: calc(var(--v-full) + 2 * var(--v-pad-lg));
  margin-inline: auto;
  padding-inline: var(--pad);
}

.i26-hdr {
  font-size: var(--z-h2);
  color: var(--t-letters);
  margin-bottom: var(--s-md);
}

.i26-list {
  display: block;
}

.i26-piece {
  padding-block: var(--s-sm);
  display: block;
  border-bottom: var(--b-light) solid var(--t-line);
}

.i26-ask {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 24px;
  align-items: baseline;
  gap: var(--s-xs);
  cursor: pointer;
  list-style: none;
}

.i26-ask::-webkit-details-marker {
  display: none;
}

.i26-mark {
  font-family: var(--f-title);
  font-weight: var(--w-black);
  font-size: var(--z-sm-2);
  color: var(--t-grad-2);
  background: transparent;
}

.i26-top {
  font-family: var(--f-title);
  font-style: italic;
  font-weight: var(--w-black);
  font-size: var(--z-sm-2);
  color: var(--t-letters);
  margin: 0;
}

.i26-chev {
  position: relative;
  width: 12px;
  height: 12px;
  border-right: var(--b-base) solid var(--t-accent);
  border-bottom: var(--b-base) solid var(--t-accent);
  transform: rotate(45deg);
  justify-self: end;
  transition: transform var(--t-regular) var(--x-even);
}

.i26-piece[open] .i26-chev {
  transform: rotate(-135deg);
}

.i26-fill {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--s-xs);
  padding-top: var(--s-xs);
  overflow: hidden;
}

.i26-line {
  font-size: var(--z-normal);
  line-height: var(--l-relaxed);
  color: var(--t-faint);
  background: transparent;
}

@media (max-width: 780px) {
  .i26-ask {
    grid-template-columns: 28px minmax(0, 1fr) 18px;
  }

  .i26-fill {
    grid-template-columns: 28px minmax(0, 1fr);
  }
}

/* == cta block (CTA-10 magazine pull-quote) ================================ */
.n33 {
  display: block;
  background: var(--t-base-plane);
  padding-block: var(--s-xl);
}

.n33-wrap {
  max-width: calc(var(--v-full) + 2 * var(--v-pad-lg));
  margin-inline: auto;
  padding-inline: var(--pad);
  text-align: center;
}

.n33-quote {
  margin: 0;
  position: relative;
}

.n33-quote::before {
  content: "“";
  display: block;
  font-family: var(--f-title);
  font-size: 72px;
  line-height: 0.6;
  color: var(--t-grad-2);
}

.n33-quote p {
  font-family: var(--f-title);
  font-style: italic;
  font-size: var(--z-display-1);
  line-height: var(--l-tight);
  color: var(--t-letters);
  background: transparent;
  max-width: none;
  margin-inline: auto;
}

.n33-sub {
  margin: var(--s-md) auto 0;
  max-width: var(--edge);
  font-size: var(--z-normal);
  line-height: var(--l-relaxed);
  color: var(--t-faint);
  background: transparent;
}

.n33-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: var(--s-md);
  padding-inline: var(--s-lg);
  border-radius: var(--r-lozenge);
  font-size: var(--z-sm-2);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: var(--e-spread);
}

/* == inline cta (INLINE-CTA-06 dual-button mini bar) ======================= */
.d92 {
  display: block;
  background: var(--t-base-plane);
  padding-block: var(--s-md);
}

.d92-core {
  max-width: var(--edge);
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  align-items: center;
}

.d92-line {
  font-size: var(--z-normal);
  color: var(--t-faint);
  background: var(--t-base-plane);
  text-align: center;
}

.d92-deck {
  display: flex;
  flex-direction: row;
  gap: var(--s-sm);
  justify-content: center;
  flex-wrap: wrap;
}

.d92-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-inline: var(--s-md);
  border-radius: var(--r-lozenge);
  font-weight: var(--w-medium);
}

.d92-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-inline: var(--s-md);
  border-radius: var(--r-lozenge);
  background: var(--t-main);
  border: var(--b-light) solid var(--t-faint);
  color: var(--t-letters);
  font-weight: var(--w-medium);
  transition: background var(--t-regular) var(--x-out), border-color var(--t-regular) var(--x-out);
}

.d92-ghost:hover {
  background: var(--t-edge-hard);
  border-color: var(--t-letters);
  color: var(--t-letters);
}

.d92-ghost:active {
  transform: translateY(1px);
}

@media (max-width: 540px) {
  .d92-deck {
    flex-direction: column;
    width: 100%;
  }

  .d92-action,
  .d92-ghost {
    width: 100%;
  }
}

/* == author byline (BYLINE-04 quote-style) ================================= */
.b98 {
  display: block;
  background: var(--t-base-plane);
  padding-block: var(--sec-y);
}

.b98-quote {
  margin: 0 auto;
  max-width: var(--edge);
  padding-inline: var(--pad);
  text-align: center;
  position: relative;
}

.b98-quote::before {
  content: "”";
  display: block;
  font-family: var(--f-title);
  font-size: 64px;
  line-height: 0.6;
  color: var(--t-grad-2);
}

.b98-quote p {
  font-family: var(--f-title);
  font-style: italic;
  font-size: var(--z-display-4);
  line-height: var(--l-base);
  color: var(--t-letters);
  background: transparent;
}

.b98-credit {
  margin-top: var(--s-sm);
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-xs);
}

.b98-headshot {
  width: 32px;
  height: 32px;
  border-radius: var(--r-dot);
  object-fit: cover;
  flex-shrink: 0;
}

.b98-who {
  font-style: normal;
  font-weight: var(--w-black);
}

.b98-step {
  color: var(--t-accent);
  background: var(--t-base-plane);
}

.b98-step:hover {
  color: var(--t-accent-pressed);
  background: var(--t-base-plane);
}

.b98-job {
  font-size: var(--z-petite);
  font-style: italic;
  color: var(--t-faint);
  background: var(--t-base-plane);
}

/* == author card (AUTH-08 minimal avatar + name) =========================== */
.l01 {
  display: block;
  background: var(--t-base-plane);
  padding-block: var(--sec-y);
  max-width: calc(var(--v-full) + 2 * var(--v-pad-lg));
  margin-inline: auto;
  padding-inline: var(--pad);
}

.l01-core {
  display: inline-flex;
  align-items: center;
  gap: var(--s-sm);
}

.l01-headshot {
  width: 40px;
  height: 40px;
  border-radius: var(--r-dot);
  object-fit: cover;
  flex-shrink: 0;
}

.l01-ident {
  display: flex;
  flex-direction: column;
}

.l01-who {
  font-size: var(--z-normal);
  font-weight: var(--w-black);
  color: var(--t-letters);
  background: var(--t-base-plane);
}

.l01-job {
  font-size: var(--z-tiny);
  color: var(--t-faint);
  background: var(--t-base-plane);
}

.l01-articles {
  margin-top: var(--s-md);
  display: block;
}

.l01-articlesTop {
  font-size: var(--z-display-4);
  color: var(--t-letters);
  margin-bottom: var(--s-xs);
}

.l01-articlesList {
  display: block;
}

.l01-articlesPiece {
  margin-block-end: var(--s-2xs);
}

.l01-articlesStep {
  color: var(--t-accent);
  background: var(--t-base-plane);
  border-bottom: var(--b-light) solid var(--t-edge-hard);
}

.l01-articlesStep:hover {
  color: var(--t-accent-pressed);
  background: var(--t-base-plane);
}

/* == legal section (LEGAL-08 minimal plain) ================================ */
.b88 {
  display: block;
  background: var(--t-base-plane);
  padding-block: var(--sec-y);
}

.b88-wrap {
  max-width: calc(var(--v-full) + 2 * var(--v-pad-lg));
  margin-inline: auto;
  padding-inline: var(--pad);
}

.b88-intro {
  font-size: var(--z-display-4);
  line-height: var(--l-base);
  color: var(--t-letters);
  background: var(--t-base-plane);
  margin-block-end: var(--s-md);
}

.b88-fill {
  display: block;
  margin-block-end: var(--s-md);
}

.b88-top {
  font-family: var(--f-body);
  font-weight: var(--w-black);
  font-size: var(--z-display-3);
  color: var(--t-letters);
  margin-block-start: var(--s-md);
  margin-block-end: var(--s-xs);
  scroll-margin-top: 100px;
}

.b88-line {
  font-size: var(--z-normal);
  line-height: var(--l-relaxed);
  color: var(--t-faint);
  background: var(--t-base-plane);
  margin-block-end: var(--s-xs);
}

.b88-list {
  display: block;
}

.b88-piece {
  position: relative;
  padding-left: var(--s-md);
  margin-block-end: var(--s-xs);
  font-size: var(--z-normal);
  line-height: var(--l-relaxed);
  color: var(--t-faint);
  background: var(--t-base-plane);
}

.b88-piece::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: var(--t-accent);
  transform: rotate(45deg);
}

.b88-note {
  display: block;
  margin-top: var(--s-md);
  font-size: var(--z-petite);
  line-height: var(--l-base);
  color: var(--t-faint);
  background: var(--t-base-plane);
}

/* == contact form (FORM-08 asymmetric wide submit) ========================= */
.u08 {
  display: block;
  background: var(--t-base-plane);
  padding-block: var(--sec-y);
}

.u08-wrap {
  max-width: calc(var(--v-full) + 2 * var(--v-pad-lg));
  margin-inline: auto;
  padding-inline: var(--pad);
}

.u08-panel {
  background: var(--t-panel);
  border: var(--b-light) solid var(--t-edge-hard);
  border-radius: var(--r-md);
  padding: var(--s-md);
}

.u08-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-sm);
}

.u08-box {
  display: flex;
  flex-direction: column;
  gap: var(--s-2xs);
}

.u08-boxWide {
  grid-column: 1 / -1;
}

.u08-cap {
  font-size: var(--z-petite);
  font-weight: var(--w-medium);
  color: var(--t-letters);
  background: var(--t-panel);
}

.u08-entry {
  width: 100%;
  padding: var(--s-xs) var(--s-sm);
  min-height: 48px;
  font-family: var(--f-body);
  font-size: var(--z-normal);
  color: var(--t-letters);
  background: var(--t-base-plane);
  border: var(--b-light) solid var(--t-edge-hard);
  border-radius: var(--r-sm);
}

.u08-entryTall {
  min-height: 140px;
  resize: vertical;
}

.u08-entry:focus {
  border-color: var(--t-accent);
  outline: none;
  color: var(--t-letters);
  background: var(--t-base-plane);
}

.u08-send {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 72px;
  font-family: var(--f-title);
  font-size: var(--z-display-4);
  font-weight: var(--w-black);
  text-transform: uppercase;
  letter-spacing: var(--e-spread);
  color: var(--t-base-plane);
  background: var(--t-accent);
  border: 0;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--t-regular) var(--x-out);
}

.u08-send:hover {
  background: var(--t-accent-pressed);
  color: var(--t-base-plane);
}

.u08-send:active {
  transform: translateY(1px);
}

.u08-notice {
  margin-top: var(--s-sm);
  padding: var(--s-sm) var(--s-md);
  border-radius: var(--r-sm);
  font-size: var(--z-normal);
  color: var(--t-base-plane);
  background: var(--t-grad-2);
}

@media (max-width: 780px) {
  .u08-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* == error block (ERR-06 bordered card) ==================================== */
.b15 {
  display: block;
  background: var(--t-base-plane);
  padding-block: var(--s-xl);
  flex: 1 0 auto;
}

.b15-wrap {
  max-width: calc(var(--v-full) + 2 * var(--v-pad-lg));
  margin-inline: auto;
  padding-inline: var(--pad);
}

.b15-card {
  max-width: var(--edge);
  margin-inline: auto;
  padding: var(--s-md);
  background: var(--t-panel);
  border: var(--b-base) solid var(--t-accent);
  border-radius: var(--r-lg);
  box-shadow: var(--d-md);
  display: flex;
  flex-direction: column;
  gap: var(--s-sm);
  align-items: center;
  text-align: center;
}

.b15-top {
  font-size: var(--z-h2);
  color: var(--t-letters);
}

.b15-line {
  font-size: var(--z-normal);
  line-height: var(--l-relaxed);
  color: var(--t-faint);
  background: var(--t-panel);
}

.b15-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding-inline: var(--s-md);
  border-radius: var(--r-lozenge);
  background: var(--t-accent);
  color: var(--t-base-plane);
  font-weight: var(--w-medium);
}

.b15-step:hover {
  background: var(--t-accent-pressed);
  color: var(--t-base-plane);
}

/* == footer (FOOT-10 sectioned detail-rich, RG-07 line) ==================== */
.f96 {
  display: block;
  background: var(--t-base-plane);
  margin-top: auto;
}

.f96-band {
  display: block;
  border-bottom: var(--b-light) solid var(--t-line);
  background: var(--t-base-plane);
}

.f96-shelf {
  max-width: calc(var(--v-full) + 2 * var(--v-pad-lg));
  margin-inline: auto;
  padding-inline: var(--pad);
}

.f96-bandRg {
  padding-block: var(--s-sm);
}

.f96-alert {
  display: block;
  text-align: center;
  font-size: var(--z-petite);
  line-height: var(--l-base);
  color: var(--t-letters);
  background: var(--t-base-plane);
}

.f96-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  min-height: 24px;
  padding-inline: var(--s-2xs);
  border-radius: var(--r-xs);
  background: var(--t-advisory);
  color: var(--t-letters);
  font-weight: var(--w-black);
  font-size: var(--z-tiny);
}

.f96-alertLine {
  color: var(--t-letters);
  background: var(--t-base-plane);
}

.f96-alertStep {
  color: var(--t-grad-2);
  background: var(--t-base-plane);
  border-bottom: var(--b-light) solid var(--t-edge-hard);
  white-space: nowrap;
}

.f96-alertStep:hover {
  color: var(--t-accent-pressed);
  background: var(--t-base-plane);
}

.f96-bandBrand {
  padding-block: var(--s-md);
}

.f96-bandBrand .f96-shelf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-md);
}

.f96-sign {
  display: inline-flex;
  flex-shrink: 0;
}

.f96-signPic {
  height: 42px;
  width: auto;
  display: block;
}

.f96-slogan {
  font-size: var(--z-normal);
  color: var(--t-faint);
  background: var(--t-base-plane);
  max-width: var(--edge);
}

.f96-bandNav {
  padding-block: var(--s-md);
}

.f96-bandNav .f96-shelf {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-md);
}

.f96-side {
  display: block;
}

.f96-sideTrust {
  display: block;
}

.f96-top {
  font-family: var(--f-body);
  font-size: var(--z-xs-2);
  font-weight: var(--w-black);
  text-transform: uppercase;
  letter-spacing: var(--e-spread);
  color: var(--t-grad-2);
  background: var(--t-base-plane);
  margin-bottom: var(--s-xs);
}

.f96-list {
  display: block;
}

.f96-piece {
  margin-block-end: var(--s-2xs);
}

.f96-step {
  display: inline-block;
  padding-block: 4px;
  font-size: var(--z-petite);
  color: var(--t-faint);
  background: var(--t-base-plane);
  position: relative;
}

.f96-step::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 0;
  height: 1px;
  background: var(--t-accent);
  transition: width var(--t-regular) var(--x-out);
}

.f96-step:hover {
  color: var(--t-accent);
  background: var(--t-base-plane);
}

.f96-step:hover::after {
  width: 100%;
}

.f96-trustList {
  display: block;
}

.f96-trustPiece {
  display: flex;
  align-items: flex-start;
  gap: var(--s-xs);
  margin-block-end: var(--s-xs);
}

.f96-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--t-grad-2);
}

.f96-ico svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.f96-trustLine {
  font-size: var(--z-petite);
  line-height: var(--l-base);
  color: var(--t-faint);
  background: var(--t-base-plane);
}

.f96-bandNote {
  padding-block: var(--s-sm);
}

.f96-note {
  font-size: var(--z-tiny);
  line-height: var(--l-base);
  color: var(--t-faint);
  background: var(--t-base-plane);
}

.f96-bandBase {
  padding-block: var(--s-sm);
  border-bottom: 0;
}

.f96-bandBase .f96-shelf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-xs);
}

.f96-mark {
  font-size: var(--z-tiny);
  color: var(--t-faint);
  background: var(--t-base-plane);
}

.f96-hop {
  font-size: var(--z-tiny);
  color: var(--t-grad-2);
  background: var(--t-base-plane);
}

.f96-hop:hover {
  color: var(--t-accent-pressed);
  background: var(--t-base-plane);
}

@media (max-width: 780px) {
  .f96-bandNav .f96-shelf {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* == cookie banner (COOK-06 detailed with preferences link) ================ */
.v52 {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  transform: translateY(130%);
  visibility: hidden;
  padding: var(--s-sm) var(--pad);
  background: var(--t-main);
  border-top: var(--b-base) solid var(--t-accent);
}

.v52.is-open {
  transform: translateY(0);
  visibility: visible;
  animation: v52-fade var(--t-slow) var(--x-out) both;
}

@keyframes v52-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.v52-slab {
  max-width: calc(var(--v-full) + 2 * var(--v-pad-lg));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-sm);
}

.v52-notice {
  flex: 1 1 320px;
  font-size: var(--z-petite);
  line-height: var(--l-base);
  color: var(--t-letters);
  background: var(--t-main);
}

.v52-deck {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-xs);
}

.v52-pref {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding-inline: var(--s-xs);
  font-size: var(--z-petite);
  color: var(--t-grad-2);
  background: var(--t-main);
}

.v52-pref:hover {
  color: var(--t-accent-pressed);
  background: var(--t-main);
}

.v52-decline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding-inline: var(--s-sm);
  font-family: var(--f-body);
  font-size: var(--z-petite);
  color: var(--t-letters);
  background: var(--t-edge-hard);
  border: var(--b-light) solid var(--t-faint);
  border-radius: var(--r-sm);
  cursor: pointer;
}

.v52-decline:hover {
  background: var(--t-main);
  color: var(--t-letters);
}

.v52-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding-inline: var(--s-md);
  font-family: var(--f-body);
  font-weight: var(--w-medium);
  font-size: var(--z-petite);
  color: var(--t-base-plane);
  background: var(--t-accent);
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}

.v52-ok:hover {
  background: var(--t-accent-pressed);
  color: var(--t-base-plane);
}

.v52-ok:active,
.v52-decline:active {
  transform: translateY(1px);
}

@media (max-width: 720px) {
  .v52 {
    padding: 12px 14px;
  }

  .v52-slab {
    gap: 8px;
  }

  .v52-notice {
    font-size: 13px;
    line-height: 1.35;
  }

  .v52-deck {
    width: 100%;
    justify-content: flex-end;
  }

  .v52-decline,
  .v52-ok {
    min-height: 36px;
    padding-inline: 14px;
    font-size: 12px;
  }
}

@media (max-width: 430px) {
  .v52-deck {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .v52-decline,
  .v52-ok,
  .v52-pref {
    width: 100%;
    justify-content: center;
    white-space: normal;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}
/* Offer CTA */
.qjtm-act{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 32px;border:2px solid #01161F;border-radius:0;
  background:#DB2777;color:#FFFFFF;text-decoration:none;
  font-size:13px;font-weight:600;letter-spacing:1.8px;
  box-shadow:4px 4px 0 #01161F;transition:background .12s ease,color .12s ease,transform .12s ease,box-shadow .12s ease}
.qjtm-act:hover{background:#BE185D;color:#FFFFFF;box-shadow:2px 2px 0 #01161F;animation:none}
.qjtm-act:hover::after{animation:none}
.qjtm-act:active{background:#9D174D;color:#FFFFFF}
.qjtm-act:focus-visible{outline:3px solid #01161F;outline-offset:3px}
.qjtm-act{animation:lift_qjtm 2.4s ease-in-out infinite}
@keyframes lift_qjtm{0%{transform:translateY(0)}12.500%{transform:translateY(-2px)}45.833%,100%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.qjtm-act,.qjtm-act::after{animation:none!important;transition:none!important}}

@media (max-width: 491px) {
  .w53-index,
  .w53-list,
  .w53-step { display: none !important; }
  .w53-more-switch { display: flex !important; }
}

.y42-page-figure {
	margin-block: var(--z-display-3);
}

.y42-page-figure img {
	display: block;
	max-width: 100%;
	max-height: 56vh;
	width: auto;
	height: auto;
	margin-inline: auto;
}