/* Forex Trade — whitepaper (/whitepaper). Capa propia sobre el CSS de la plantilla:
   fondo #010101, Humane Bold para los titulares, Helvetica Neue Light para el cuerpo,
   la cursiva Bodoni de `.script` para el acento y la paleta --green-yellow / --slate-blue /
   --hot-pink. Solo se anima transform / opacity / filter (ver site/fx/docs.js). */
:root {
  --dx-ink: #010101;
  --dx-green: #bfff0a;
  --dx-blue: #5546ff;
  --dx-pink: #ff7bca;
  --dx-white: #ffffff;
  --dx-line: rgba(255, 255, 255, .14);
  --dx-line-2: rgba(255, 255, 255, .08);
  --dx-dim: rgba(255, 255, 255, .62);
  --dx-top: 4.5rem;
  --dx-side: 300px;
  --dx-toc: 240px;
}

/* ---------- base ---------- */
html, body { background-color: var(--dx-ink); }
body.dx-body-root {
  margin: 0; color: var(--dx-white); background-color: var(--dx-ink);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 1.6; text-transform: none;
  -webkit-font-smoothing: antialiased;
}
.dx-body-root p { text-transform: none; font-size: inherit; line-height: inherit; margin: 0; }
.dx-body-root a { color: inherit; }
.dx-body-root *, .dx-body-root *::before, .dx-body-root *::after { box-sizing: border-box; }
.dx-skip {
  position: fixed; top: -100px; left: 1rem; z-index: 60; background: var(--dx-green); color: #010101;
  padding: .6rem 1rem; text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; text-decoration: none;
}
.dx-skip:focus { top: .6rem; }
/* El anillo de foco, solo con teclado. Un clic de ratón o el foco que se lleva el <h1> al
   cambiar de página no deben dibujar nada. */
.dx-body-root :focus:not(:focus-visible) { outline: none; }
.dx-link:focus-visible, .dx-card:focus-visible, .dx-pn-card:focus-visible,
.dx-faq-q:focus-visible, .dx-toc-list a:focus-visible, .dx-back:focus-visible, .dx-cta:focus-visible {
  outline: 2px solid var(--dx-green); outline-offset: -2px;
}
.dx-title:focus, .dx-title:focus-visible { outline: none; }

/* ---------- barra superior ---------- */
.dx-top {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--dx-top);
  display: flex; align-items: center; gap: .9rem; padding: 0 1.4rem;
  background: rgba(1, 1, 1, .92); border-bottom: 1px solid var(--dx-line);
  backdrop-filter: blur(10px);
}
.dx-brand { display: flex; align-items: center; flex: none; color: var(--dx-white, #fff); }
.dx-brand img { height: 1.15rem; width: auto; display: block; }
/* el mismo SVG en línea que la navbar de la landing: aquí el fondo siempre es tinta, así que
   las letras se quedan en blanco y solo hace falta fijar la altura */
.dx-logo { height: 44px; width: auto; display: block; color: currentColor; }

/* marcas de terceros dentro del whitepaper */
.dx-body .fx-brand, .dx-lede .fx-brand {
  width: 1em; height: 1em; object-fit: contain; display: inline-block;
  vertical-align: -0.16em; margin-right: .34em; flex: none;
}
.dx-lede .fx-brand.is-lg { width: 2.1rem; height: 2.1rem; vertical-align: -0.55rem; margin-right: .55rem; }
.dx-table .fx-brand { vertical-align: -0.18em; }
.dx-chip {
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dx-green);
  border: 1px solid var(--dx-green); padding: .3rem .5rem .22rem; line-height: 1; flex: none;
}
.dx-top-right { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.dx-back {
  text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--dx-dim);
  text-decoration: none; transition: color .2s;
}
.dx-back:hover { color: var(--dx-white); }
.dx-cta { font-size: .72rem; letter-spacing: .1em; padding: .55rem .95rem .4rem; text-decoration: none; }

/* botón de menú: las tres líneas de la landing, que se cruzan al abrir */
.dx-burger {
  display: none; margin-left: auto; width: 1.6rem; height: 1.6rem; flex-direction: column;
  justify-content: center; align-items: center; gap: 5px; background: none; border: 0; cursor: pointer; padding: 0;
}
.dx-burger-line { width: 100%; height: 1px; background: var(--dx-white); transition: transform .3s ease, opacity .2s ease; }
.dx-burger[aria-expanded="true"] .top { transform: translateY(6px) rotate(45deg); }
.dx-burger[aria-expanded="true"] .mid { opacity: 0; }
.dx-burger[aria-expanded="true"] .bottom { transform: translateY(-6px) rotate(-45deg); }

/* ---------- panel lateral ---------- */
.dx-side {
  position: fixed; top: var(--dx-top); bottom: 0; left: 0; width: var(--dx-side); z-index: 30;
  overflow-y: auto; overscroll-behavior: contain; padding: 1.2rem 1rem 3rem;
  border-right: 1px solid var(--dx-line); background: var(--dx-ink);
}
.dx-search { position: relative; margin-bottom: 1.4rem; }
.dx-q {
  width: 100%; background: #070707; color: var(--dx-white); border: 1px solid var(--dx-line);
  padding: .65rem 2.2rem .55rem .7rem; font: inherit; font-size: .84rem; border-radius: 0;
  -webkit-appearance: none; appearance: none;
}
.dx-q::placeholder { color: rgba(255, 255, 255, .52); }
.dx-q:focus { outline: none; border-color: var(--dx-green); }
.dx-q::-webkit-search-cancel-button { -webkit-appearance: none; }
.dx-kbd {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); pointer-events: none;
  font: inherit; font-size: .66rem; color: rgba(255, 255, 255, .55);
  border: 1px solid var(--dx-line); padding: .05rem .3rem; line-height: 1.2;
}
.dx-q:focus + .dx-kbd { opacity: 0; }

.dx-nav { position: relative; }
.dx-group { margin-bottom: 1.5rem; }
.dx-group-t {
  display: flex; align-items: center; gap: .5rem; text-transform: uppercase; letter-spacing: .16em;
  font-size: 12px; color: rgba(255, 255, 255, .55); margin: 0 0 .5rem; padding-left: .7rem;
}
.dx-c-green { --dx-c: var(--dx-green); }
.dx-c-blue { --dx-c: #8c81ff; }
.dx-c-pink { --dx-c: var(--dx-pink); }
.dx-c-white { --dx-c: #ffffff; }
.dx-link {
  display: block; padding: .38rem .7rem; font-size: .88rem; color: rgba(255, 255, 255, .72);
  text-decoration: none; position: relative; z-index: 1;
  transition: color .2s ease .12s;
}
.dx-link:hover { color: var(--dx-white); }
.dx-link.is-active { color: #010101; }
/* realce de teclado del buscador: solo mientras se recorre con las flechas */
.dx-link.is-cursor { color: var(--dx-white); box-shadow: inset 0 0 0 1px var(--dx-green); }
.dx-link mark { background: transparent; color: var(--dx-green); font-weight: 700; }
.dx-link.is-active mark { color: #010101; text-decoration: underline; }
.dx-ind {
  position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 0; opacity: 0;
  background: var(--dx-c, var(--dx-green)); border-radius: 70px; pointer-events: none;
}
.dx-no-results { color: rgba(255, 255, 255, .5); font-size: .85rem; padding: 0 .7rem; }
.dx-group[hidden], .dx-link[hidden] { display: none; }

/* ---------- tokens de contenido: {{flag}}, {{pair}}, {{icon}} ---------- */
.fx-flag { width: 1.05em; height: 1.05em; vertical-align: -0.12em; margin: 0 .15em; border-radius: 50%; display: inline-block; flex: none; }
.fx-pair { white-space: nowrap; }
.fx-pair-flags { display: inline-flex; margin-right: .3em; vertical-align: -0.12em; }
.fx-pair-flags .fx-flag { margin: 0; }
.fx-pair-flags .fx-flag + .fx-flag { margin-left: -0.38em; }
.fx-icon { width: 1.1em; height: 1.1em; vertical-align: -0.16em; margin-right: .3em; display: inline-block; flex: none; color: inherit; }
.dx-title .fx-flag { width: .62em; height: .62em; vertical-align: .06em; }
.dx-group-t .fx-icon { width: 1.15em; height: 1.15em; margin-right: .5em; color: var(--dx-c, var(--dx-green)); vertical-align: -0.2em; }
.dx-callout-t .fx-icon { width: 1.15em; height: 1.15em; }
.dx-step-n .fx-icon { width: 1.6em; height: 1.6em; display: block; margin: 0 0 .35rem; }
.dx-card-t .fx-icon, .dx-pn-t .fx-icon { width: .72em; height: .72em; margin: 0; transition: transform .25s ease; }
.dx-pn-card.is-prev .fx-icon { transform: rotate(180deg); }
.dx-pn-card.is-prev:hover .fx-icon { transform: rotate(180deg) translateX(6px); }
.dx-pn-card.is-next:hover .fx-icon, .dx-card:hover .dx-card-t .fx-icon { transform: translateX(6px); }
.dx-table td .fx-pair { display: inline-flex; align-items: center; }

/* ---------- lectura ---------- */
.dx-main {
  margin-left: var(--dx-side); margin-right: var(--dx-toc); padding: calc(var(--dx-top) + 3.5rem) 2.5rem 7rem;
  min-height: 100vh;
}
.dx-reader { max-width: 760px; }
.dx-page[hidden] { display: none; }

.dx-eyebrow {
  text-transform: uppercase; letter-spacing: .2em; font-size: .68rem; color: var(--dx-green);
  margin: 0 0 .9rem;
}
.dx-title {
  font-family: 'Humane Bold', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(72px, 13vw, 160px); line-height: .85; letter-spacing: .005em;
  margin: 0 0 1.4rem; color: var(--dx-white); outline: none; word-break: normal;
}
.dx-word { display: inline-block; white-space: nowrap; }
.dx-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .04em; }
.dx-char { display: inline-block; }
.dx-word-script {
  display: inline-block; text-transform: none; font-family: 'Bodoni itc book', serif; font-style: italic;
  font-size: .62em; line-height: 1; color: var(--dx-green); padding: 0 .04em;
}
.dx-lede {
  font-size: 21px; line-height: 1.45; color: rgba(255, 255, 255, .82); max-width: 56ch;
  margin: 0 0 2.8rem;
}

/* cabecera visual. Banner ancho (16:9 y más): la columna entera, bajo el lede. Cuadrada o 4:5:
   flota a la derecha del lede y el cuerpo la rodea, así no queda hueco negro a su izquierda.
   Todos los bloques que no son texto corrido crean su propio contexto de formato para que se
   estrechen al lado de la imagen en vez de colarse por debajo. */
.dx-fig {
  margin: 0 0 2.8rem; overflow: hidden; background: #0b0b0b;
  border: 1px solid var(--dx-c, var(--dx-green));
  box-shadow: 0 0 0 1px rgba(1, 1, 1, .9), 0 18px 50px -30px var(--dx-c, var(--dx-green));
}
.dx-fig.is-side {
  float: right; width: 40%; max-width: 300px; margin: .35rem 0 1.4rem 1.8rem;
}
.dx-fig-img { display: block; width: 100%; height: auto; object-fit: cover; }
.dx-fig.is-wide .dx-fig-img { max-height: 420px; }
.dx-body > .dx-list, .dx-body > .dx-steps, .dx-body > .dx-table-wrap, .dx-body > .dx-callout,
.dx-body > .dx-formula, .dx-body > .dx-cards, .dx-body > .dx-faq, .dx-body > .dx-live {
  overflow: hidden;
}
.dx-body > .dx-table-wrap { overflow-x: auto; }
.dx-pn { clear: both; }
/* el hover lo lleva Motion en docs.js: ver `hoverFigure` (la entrada es WAAPI con relleno y una
   regla :hover de CSS no podría ganarle al transform que deja la animación) */

/* bloques del cuerpo */
.dx-body > * { margin-bottom: 1.5rem; }
.dx-body > *:last-child { margin-bottom: 0; }
.dx-p { color: rgba(255, 255, 255, .84); }
.dx-p a, .dx-list a, .dx-callout-b a, .dx-table a {
  color: var(--dx-green); text-decoration: underline; text-underline-offset: .18em;
}
.dx-p a:hover, .dx-list a:hover, .dx-callout-b a:hover { color: var(--dx-white); }
.dx-p b, .dx-list b { color: var(--dx-white); font-weight: 700; }
.dx-h2 {
  font-family: 'Humane Bold', sans-serif; text-transform: uppercase; font-size: 2.6rem; line-height: .95;
  letter-spacing: .01em; margin: 3rem 0 1rem; color: var(--dx-white); scroll-margin-top: calc(var(--dx-top) + 2rem);
}
.dx-body > .dx-h2:first-child { margin-top: 0; }
.dx-list { margin: 0; padding-left: 1.1rem; color: rgba(255, 255, 255, .84); }
.dx-list li { margin-bottom: .55rem; }
.dx-list li::marker { color: var(--dx-green); }

.dx-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6rem; }
.dx-step { border-top: 1px solid var(--dx-line); padding-top: .9rem; }
.dx-step-n { display: block; font-size: .68rem; letter-spacing: .18em; color: var(--dx-green); margin-bottom: .35rem; }
.dx-step-t {
  font-family: 'Humane Bold', sans-serif; text-transform: uppercase; font-size: 2rem; line-height: 1;
  margin: 0 0 .4rem; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
}
.dx-step-now {
  font-family: 'Helvetica Neue', sans-serif; font-style: normal; font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: #010101; background: var(--dx-green); padding: .22rem .4rem .14rem; line-height: 1;
}
.dx-step-b { color: rgba(255, 255, 255, .78); margin: 0; }
.dx-step.is-now { border-top-color: var(--dx-green); }

.dx-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--dx-line); }
.dx-table-wrap.is-tall { max-height: 30rem; overflow-y: auto; }
.dx-table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 26rem; }
.dx-table th {
  text-align: left; text-transform: uppercase; letter-spacing: .12em; font-size: .64rem; font-weight: 400;
  color: rgba(255, 255, 255, .55); padding: .7rem .8rem .55rem; border-bottom: 1px solid var(--dx-line);
  background: var(--dx-ink); position: sticky; top: 0; z-index: 1;
}
.dx-table td {
  padding: .65rem .8rem; border-bottom: 1px solid var(--dx-line-2); color: rgba(255, 255, 255, .84);
  vertical-align: top;
}
.dx-table td:first-child { color: var(--dx-white); }
.dx-cell-flag { display: inline-flex; align-items: center; gap: .45rem; }
.dx-cell-flag img { width: 1.1rem; height: 1.1rem; border-radius: 50%; object-fit: cover; }
.dx-swatch {
  display: inline-block; width: .8rem; height: .8rem; background: var(--sw); margin-right: .45rem;
  border: 1px solid rgba(255, 255, 255, .25); vertical-align: -1px;
}

.dx-callout { border-left: 2px solid var(--dx-green); background: rgba(191, 255, 10, .06); padding: 1rem 1.1rem; }
.dx-callout-t {
  text-transform: uppercase; letter-spacing: .14em; font-size: .66rem; color: var(--dx-green);
  margin: 0 0 .4rem;
}
.dx-callout-b { color: rgba(255, 255, 255, .86); }
.dx-callout.is-warn { border-left-color: var(--dx-pink); background: rgba(255, 123, 202, .09); }
.dx-callout.is-warn .dx-callout-t { color: var(--dx-pink); }
.dx-callout.is-soon { border-left-color: #8c81ff; background: rgba(140, 129, 255, .12); }
.dx-callout.is-soon .dx-callout-t { color: #b3acff; }

.dx-formula { margin: 0; border: 1px solid var(--dx-line); padding: 1rem 1.1rem; background: #070707; }
.dx-formula code {
  display: block; font-family: 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 1rem;
  color: var(--dx-green); letter-spacing: .02em; word-break: break-word;
}
.dx-formula figcaption { margin-top: .5rem; font-size: .78rem; color: rgba(255, 255, 255, .6); }

.dx-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.dx-card {
  display: block; border: 1px solid var(--dx-line); padding: .9rem 1rem; text-decoration: none;
  transition: border-color .2s, background-color .2s;
}
.dx-card:hover { border-color: var(--dx-green); background: rgba(191, 255, 10, .05); }
.dx-card-k { display: block; text-transform: uppercase; letter-spacing: .16em; font-size: .6rem; color: rgba(255, 255, 255, .5); }
.dx-card-t {
  display: flex; align-items: center; gap: .35rem; font-family: 'Humane Bold', sans-serif;
  text-transform: uppercase; font-size: 1.7rem; line-height: 1.05; margin: .25rem 0 .2rem; color: var(--dx-white);
}
.dx-card-d { display: block; font-size: .8rem; color: rgba(255, 255, 255, .62); }
.dx-chev { width: .8em; height: .8em; flex: none; }

.dx-faq { border-top: 1px solid var(--dx-line); }
.dx-faq-item { border-bottom: 1px solid var(--dx-line-2); }
.dx-faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: none; border: 0; color: var(--dx-white); font: inherit; text-align: left; cursor: pointer;
  padding: .95rem 0; font-size: 1rem;
}
.dx-faq-q:hover { color: var(--dx-green); }
.dx-faq-q .dx-chev { transition: transform .3s ease; width: 1rem; height: 1rem; }
.dx-faq-q[aria-expanded="true"] .dx-chev { transform: rotate(90deg); }
.dx-faq-a { height: 0; overflow: hidden; }
.dx-faq-a p { padding: 0 0 1.1rem; color: rgba(255, 255, 255, .78); max-width: 62ch; }

.dx-live { border-top: 1px solid var(--dx-line); }
.dx-live .dx-table { min-width: 22rem; }
.dx-live-note { margin-top: .6rem; font-size: .74rem; color: rgba(255, 255, 255, .5); }
.dx-live-wait { color: rgba(255, 255, 255, .55); }
.dx-up { color: var(--dx-green); }
.dx-down { color: var(--dx-pink); }
.dx-feed { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; border: 1px solid currentColor; padding: .16rem .32rem .08rem; }
.dx-feed.is-live { color: var(--dx-green); }
.dx-feed.is-paused { color: rgba(255, 255, 255, .55); }

/* prev / next y pie de página */
.dx-pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-top: 4rem; }
.dx-pn-card {
  border: 1px solid var(--dx-line); padding: .9rem 1rem; text-decoration: none; display: block;
  transition: border-color .2s, background-color .2s;
}
.dx-pn-card:hover { border-color: var(--dx-green); background: rgba(191, 255, 10, .05); }
.dx-pn-card.is-next { text-align: right; grid-column: 2; }
.dx-pn-k { display: block; text-transform: uppercase; letter-spacing: .16em; font-size: .6rem; color: rgba(255, 255, 255, .5); }
.dx-pn-t {
  display: flex; align-items: center; gap: .4rem; margin-top: .25rem;
  font-family: 'Humane Bold', sans-serif; text-transform: uppercase; font-size: 1.7rem; line-height: 1.05;
}
.dx-pn-card.is-prev .dx-chev { transform: rotate(180deg); }
.dx-pn-card.is-next .dx-pn-t { justify-content: flex-end; flex-direction: row-reverse; }
.dx-pn-card .dx-chev { transition: transform .25s ease; }
.dx-pn-card.is-prev:hover .dx-chev { transform: rotate(180deg) translateX(6px); }
.dx-pn-card.is-next:hover .dx-chev { transform: translateX(6px); }
.dx-updated {
  margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--dx-line-2);
  text-transform: uppercase; letter-spacing: .14em; font-size: .64rem; color: rgba(255, 255, 255, .58);
}

/* ---------- ON THIS PAGE ---------- */
.dx-toc {
  position: fixed; top: var(--dx-top); right: 0; bottom: 0; width: var(--dx-toc); z-index: 20;
  padding: 3.5rem 1.4rem 3rem; overflow-y: auto; border-left: 1px solid var(--dx-line);
}
.dx-toc-t { text-transform: uppercase; letter-spacing: .18em; font-size: 12px; color: rgba(255, 255, 255, .5); margin: 0 0 .8rem; }
.dx-toc-list { list-style: none; margin: 0; padding: 0; }
.dx-toc-list li { margin-bottom: .45rem; }
.dx-toc-list a {
  color: rgba(255, 255, 255, .55); text-decoration: none; font-size: .8rem; display: block;
  border-left: 1px solid var(--dx-line); padding-left: .7rem; transition: color .2s, border-color .2s;
}
.dx-toc-list a:hover { color: var(--dx-white); }
.dx-toc-list a.is-current { color: var(--dx-green); border-left-color: var(--dx-green); }
.dx-toc:empty, .dx-toc.is-empty { display: none; }

/* ---------- velo del cajón ---------- */
.dx-veil { position: fixed; inset: 0; z-index: 25; background: rgba(0, 0, 0, .62); opacity: 0; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dx-veil[hidden] { display: none; }

/* ---------- estados iniciales de la animación (solo con JS) ---------- */
.js .dx-page .dx-eyebrow,
.js .dx-page .dx-lede,
.js .dx-page .dx-b,
.js .dx-page .dx-pn,
.js .dx-page .dx-updated { opacity: 0; }
.js .dx-page .dx-char { transform: translateY(110%); }
.js .dx-page .dx-fig { clip-path: inset(0 0 100% 0); }
.js .dx-page .dx-fig-img { opacity: .6; transform: scale(1.12); }
.js .dx-page .dx-word-script { opacity: 0; filter: blur(8px); }
.js .dx-side .dx-group { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .js .dx-page .dx-char { transform: none; }
  .js .dx-page .dx-word-script { filter: none; opacity: 1; }
  .js .dx-page .dx-fig { clip-path: none; }
  .js .dx-page .dx-fig-img { transform: none; }
  .dx-burger-line, .dx-faq-q .dx-chev, .dx-pn-card .dx-chev { transition: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1279px) {
  .dx-toc { display: none; }
  .dx-main { margin-right: 0; }
}
@media (max-width: 1023px) {
  .dx-burger { display: flex; }
  .dx-top-right { display: none; }
  .dx-side {
    width: min(320px, 86vw); transform: translateX(-100%); border-right: 1px solid var(--dx-line);
    box-shadow: 0 0 60px rgba(0, 0, 0, .6);
  }
  .dx-side.is-open { transform: none; }
  html:not(.js) .dx-side { transform: none; }
  .dx-main { margin-left: 0; padding: calc(var(--dx-top) + 2.5rem) 1.2rem 5rem; }
  .dx-title { font-size: clamp(56px, 17vw, 110px); }
  .dx-lede { font-size: 19px; }
  /* en móvil nada flota: la imagen va a todo el ancho y BAJO el lede (en el HTML va antes,
     que es lo que hace funcionar el flotado en escritorio) */
  .dx-reader { display: flex; flex-direction: column; }
  .dx-page { display: flex; flex-direction: column; }
  .dx-page .dx-eyebrow { order: 1; } .dx-page .dx-title { order: 2; }
  .dx-page .dx-lede { order: 3; } .dx-page .dx-fig.is-side { order: 4; }
  .dx-page .dx-body { order: 5; } .dx-page .dx-pn { order: 6; } .dx-page .dx-updated { order: 7; }
  .dx-fig.is-side { float: none; width: 100%; max-width: none; margin: 0 0 2rem; }
  .dx-fig-img, .dx-fig.is-wide .dx-fig-img { max-height: 60vh; }
  .dx-cards, .dx-pn { grid-template-columns: 1fr; }
  .dx-pn-card.is-next { grid-column: 1; text-align: left; }
  .dx-pn-card.is-next .dx-pn-t { justify-content: flex-start; flex-direction: row; }
  body.dx-locked { overflow: hidden; }
}
@media (max-width: 600px) {
  .dx-top { padding: 0 1rem; gap: .6rem; }
  .dx-brand img { height: 1rem; }
  .dx-logo { height: 32px; }
  .dx-chip { font-size: .55rem; letter-spacing: .14em; }
  .dx-h2 { font-size: 2.1rem; }
  .dx-card-t, .dx-pn-t { font-size: 1.5rem; }
}