/* Poloniex work page — rebuilt from Figma "works-poloniex" (pYerAoMQJ0vxt2FurFNnXc, node 6653:18849), 1440 × 16737.
   White canvas, light site header (as on the home page).
   Everything inside .px-board is placed in Figma px (top = Figma y − 887; the intro above it is its own block) and
   js/works/poloniex.js scales the whole board with `zoom`: down below 1440, never above 1440 (wider screens keep it centred).
   Devices, cards and dialogs are 2x webp exports in assets/works/poloniex/; all copy is live text.
   Figma had no footer: the board ends 80px under "The Most Trusted Exchange" row (the green
   "Start Your Crypto Trading Now" band was dropped at the user's request), then the site's contact block + footer follow. */

@font-face { font-family: "Geist"; src: url("../../assets/fonts/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../../assets/fonts/Geist-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../../assets/fonts/Geist-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../../assets/fonts/Geist-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --bg: #fff;                 /* Figma canvas is white */
  /* ShapeGrid colours on white: same as works/versa.html (css/works/versa.css) */
  --shape-grid-line: #fcfcfc;
  --shape-grid-hover: #e6e6e6;
  --shape-grid-hover-fill: #f5f5f5;
  --px-green: #1a8f5c;        /* Poloniex GRN 900 */
  --px-green-deep: #106f44;   /* GRN 950 */
  --px-band: #f4f4f4;         /* rounded grey bands */
  --px-body: #656565;
}

/* ---------- Intro (same as the Versa hero: 1440 wide, shrinks below 1440, never grows) ---------- */
.px-intro {
  position: relative;
  width: 1440px;
  height: 800px;                 /* Figma 87 → 887 */
  margin: 0 auto;
  zoom: var(--intro-zoom, 1);
  font-family: "Geist", var(--font);
  color: #000;
}
.px-intro :where(h1, p) { margin: 0; }
.px-intro img { display: block; max-width: none; }

/* ---------- Board (1440 wide, zoomed to the window) ---------- */
.px-board {
  position: relative;
  width: 1440px;
  height: 15006px;              /* Figma 887 → 15893 (trust row bottom 15813 + 80) */
  margin: 0 auto;
  zoom: var(--board-zoom, 1);
  font-family: "Geist", var(--font);
  color: #000;
}
.px-board :where(h1, h2, h3, p, figure) { margin: 0; }
.px-board img { display: block; max-width: none; }

/* Every layer sits at its Figma position. */
.o { position: absolute; }

/* Full-bleed / background layers paint under the content. */
.px-bg { z-index: 0; pointer-events: none; }
.px-board > :not(.px-bg) { z-index: 1; }

/* Rounded grey bands (1400 wide, radius 40) */
.px-band { left: 20px; width: 1400px; border-radius: 40px; background: var(--px-band); }

/* ---------- Intro ---------- */
.px-back {
  font-family: var(--font);
  font-size: 16px; line-height: 20px; font-weight: 600;
  text-transform: uppercase; white-space: pre;
  color: #000;
  transition: color var(--hover-dur) var(--hover-ease);
}
.px-back:hover { color: var(--px-green); }

.px-lockup { display: flex; align-items: center; gap: 24px; }
.px-lockup img { width: 80px; height: 80px; }
.px-lockup span {
  font-family: var(--font);
  font-size: 44px; line-height: 55px; font-weight: 800;
  color: var(--px-green); white-space: nowrap;
}

.px-url {
  font-size: 18px; line-height: 23px; font-weight: 500;
  color: var(--px-green); white-space: nowrap;
}

.px-lede { width: 882px; font-size: 22px; line-height: normal; font-weight: 700; }

/* ---------- Type ---------- */
/* Centred green display lines ("Your Next Move Starts Here", "Polo Events"): x is their centre. */
.px-display, .px-sub, .px-trust-title { transform: translateX(-50%); text-align: center; white-space: nowrap; }
.px-display { font-family: var(--font); font-size: 44px; line-height: 55px; font-weight: 800; text-transform: uppercase; color: var(--px-green); }
.px-sub { font-family: var(--font); font-size: 28px; line-height: 35px; font-weight: 500; color: var(--px-green); }

.px-title { font-size: 22px; line-height: normal; font-weight: 500; white-space: nowrap; }
.px-title--l { font-size: 32px; }
.px-title--m { font-size: 24px; white-space: normal; }
.px-text { font-size: 16px; line-height: normal; font-weight: 400; color: var(--px-body); }

/* Right-aligned copy (Dark mode & Light mode, Withdraw): x is the RIGHT edge. */
.px-right { transform: translateX(-100%); text-align: right; }

/* ---------- The Most Trusted Exchange ---------- */
.px-trust-title { font-size: 33.537px; line-height: normal; font-weight: 700; color: #19191e; }
.px-trust { display: flex; flex-direction: column; gap: 18.293px; width: 320px; }   /* Figma 311, widened for browser wrapping */
.px-trust img { width: 48.78px; height: 48.78px; }
.px-trust div { display: flex; flex-direction: column; gap: 9.146px; }
.px-trust h3 { font-size: 24.39px; line-height: normal; font-weight: 600; color: #131316; white-space: nowrap; }
.px-trust p { font-size: 13.72px; line-height: normal; font-weight: 400; color: #616161; }

/* ---------- Intro on tablets and phones (≤1023px) ----------
   Above 1023 the intro is the 1440 Figma block zoomed down. Below that, zooming makes the copy too small,
   so the block drops the absolute Figma positions and reflows: the ledes wrap to the window at readable sizes. */
@media (max-width: 1023px) {
  .px-intro {
    display: flex; flex-direction: column; align-items: flex-start;
    width: auto; height: auto; zoom: 1;
    padding: 40px var(--gutter) 72px;
  }
  .px-intro > .o { position: static; }
  .px-lockup { margin-top: 56px; gap: 18px; }
  .px-lockup img { width: 64px; height: 64px; }
  .px-lockup span { font-size: 36px; line-height: 1.2; white-space: normal; }
  .px-url { margin-top: 14px; max-width: 100%; font-size: 16px; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
  .px-lede { width: auto !important; max-width: 640px; font-size: 20px; line-height: 1.4; }
  .px-url + .px-lede { margin-top: 40px; }
  .px-lede + .px-lede { margin-top: 24px; }
}
@media (max-width: 767px) {
  .px-intro { padding: 32px var(--gutter) 56px; }
  .px-lockup { margin-top: 40px; gap: 14px; }
  .px-lockup img { width: 56px; height: 56px; }
  .px-lockup span { font-size: 30px; }
  .px-url { font-size: 15px; }
  .px-lede { font-size: 17px; line-height: 1.45; }
  .px-url + .px-lede { margin-top: 32px; }
  .px-lede + .px-lede { margin-top: 20px; }
}

/* ---------- Board on tablets and phones (≤1023px) ----------
   The board reads top to bottom (css/works/board-flow.css + js/works/board-flow.js); these are its copy sizes.
   Grey bands become rounded section plates inset by the gutter's half. */
@media (max-width: 1023px) {
  .px-board .fl-sec--band { margin: 16px 12px; padding: 40px 20px; }
  .px-board .fl-sec--band > .px-band { border-radius: 28px; }
  .px-display { font-size: 32px; line-height: 1.2; white-space: normal; }
  .px-sub { font-size: 20px; line-height: 1.35; margin-bottom: 8px; }
  .px-title { font-size: 22px; line-height: 1.3; }
  .px-title--l { font-size: 28px; }
  .px-title--m { font-size: 22px; }
  .px-text { font-size: 16px; line-height: 1.5; }
  .px-trust-title { margin-top: 8px; font-size: 26px; line-height: 1.25; }
  .px-trust h3 { white-space: normal; }
  .px-trust p { font-size: 14px; line-height: 1.5; }
}
@media (max-width: 767px) {
  .px-display { font-size: 26px; }
  .px-sub { font-size: 17px; }
  .px-title, .px-title--m { font-size: 20px; }
  .px-title--l { font-size: 24px; }
  .px-text { font-size: 15px; }
  .px-trust-title { font-size: 22px; }
}