:root {
  --pricing-bg: #04070e;
  --pricing-panel: #07111d;
  --pricing-panel-2: #0a1322;
  --pricing-line: #15263c;
  --pricing-line-bright: #2a5878;
  --pricing-blue: #2ab6ff;
  --pricing-cyan: #8ce8ff;
  --pricing-gold: #d3ad4c;
  --pricing-orange: #ff8a2b;
  --pricing-text: #e6f0fb;
  --pricing-read: #a6bbce;
  --pricing-muted: #70879d;
  --pricing-green: #42d992;
}

* { box-sizing: border-box; }
html { background: var(--pricing-bg); }
body.mr-pricing-page {
  margin: 0;
  color: var(--pricing-text);
  background:
    radial-gradient(circle at 12% 14%, rgba(42, 182, 255, .08), transparent 28%),
    linear-gradient(rgba(24, 79, 120, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(24, 79, 120, .035) 1px, transparent 1px),
    var(--pricing-bg);
  background-size: auto, 38px 38px, 38px 38px, auto;
  font-family: "Barlow", sans-serif;
}

.pricing-shell {
  width: min(96vw, 1780px);
  max-width: none;
  margin: 0 auto;
  overflow: visible;
}
.pricing-kicker {
  margin: 0 0 15px;
  color: var(--pricing-blue);
  font: 500 10px/1.2 "IBM Plex Mono", monospace;
  letter-spacing: .19em;
  text-transform: uppercase;
}

.pricing-hero {
  position: relative;
  display: grid;
  min-height: clamp(390px, 39vw, 600px);
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--pricing-line);
  text-align: center;
}
.pricing-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 58% 55% at 50% 50%, rgba(4, 7, 14, .64), transparent 73%),
    linear-gradient(0deg, var(--pricing-bg), transparent 33%),
    linear-gradient(90deg, var(--pricing-bg), transparent 20%, transparent 80%, var(--pricing-bg));
  pointer-events: none;
}
.pricing-hero-figure {
  position: absolute;
  inset: -9%;
  z-index: 1;
  display: grid;
  place-items: center;
}
.pricing-hero-figure img {
  width: min(1320px, 104vw);
  height: 100%;
  object-fit: cover;
  opacity: .31;
  mix-blend-mode: screen;
  filter: saturate(.75) hue-rotate(155deg);
  -webkit-mask-image: radial-gradient(ellipse 68% 76% at 50% 50%, #000 24%, transparent 76%);
  mask-image: radial-gradient(ellipse 68% 76% at 50% 50%, #000 24%, transparent 76%);
  animation: pricingBreathe 34s ease-in-out infinite alternate;
}
@keyframes pricingBreathe { to { transform: scale(1.035); } }
.pricing-hero-content {
  position: relative;
  z-index: 3;
  padding: 78px 24px 60px;
}
.pricing-hero-content .pricing-kicker { display: inline-flex; align-items: center; gap: 12px; }
.pricing-hero-content .pricing-kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--pricing-orange);
}
.pricing-hero h1 {
  margin: 21px auto 0;
  max-width: 17ch;
  font: 600 clamp(42px, 5.2vw, 78px)/.98 "Chakra Petch", sans-serif;
  letter-spacing: -.035em;
  text-transform: uppercase;
}
.pricing-hero h1 span {
  display: block;
  color: var(--pricing-cyan);
  background: linear-gradient(90deg, var(--pricing-cyan), var(--pricing-blue));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pricing-hero-content > p:last-child {
  max-width: 690px;
  margin: 24px auto 0;
  color: var(--pricing-muted);
  font: 400 clamp(15px, 1.1vw, 18px)/1.7 "Barlow", sans-serif;
}
.pricing-hero-content > p strong { color: var(--pricing-text); font-weight: 500; }

.pricing-config-grid {
  display: grid;
  grid-template-columns: minmax(0, 820px) 340px;
  width: min(calc(100% - 48px), 1190px);
  gap: 30px;
  align-items: start;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 86px) 0 22px;
}
.pricing-builder { display: flex; min-width: 0; flex-direction: column; gap: clamp(22px, 2.6vw, 36px); }
.platform-plan,
.market-data-panel {
  position: relative;
  padding: clamp(28px, 3.2vw, 44px);
  border: 1px solid var(--pricing-line);
  background: linear-gradient(168deg, rgba(10, 19, 34, .98), rgba(4, 7, 14, .98) 68%);
}
.platform-plan { overflow: hidden; border-color: rgba(42, 182, 255, .34); }
.platform-plan::after {
  content: "";
  position: absolute;
  top: -45%;
  right: -14%;
  width: 64%;
  height: 130%;
  background: radial-gradient(ellipse, rgba(42, 182, 255, .15), transparent 67%);
  pointer-events: none;
}
.panel-corner,
.panel-corner::after {
  position: absolute;
  width: 13px;
  height: 13px;
  content: "";
}
.panel-corner {
  top: -1px;
  left: -1px;
  border-top: 1px solid var(--pricing-orange);
  border-left: 1px solid var(--pricing-orange);
}
.panel-corner::after {
  right: calc(-100vw + 17px);
  bottom: calc(-100% - 11px);
}
.platform-plan > div:first-of-type,
.platform-price,
.platform-plan ul { position: relative; z-index: 1; }
.platform-plan > div:first-of-type {
  max-width: calc(100% - 235px);
}
.platform-plan h2,
.data-builder-heading h2,
.pricing-legal h2 {
  margin: 0;
  font: 600 clamp(24px, 2.4vw, 34px)/1.06 "Chakra Petch", sans-serif;
  text-transform: uppercase;
}
.platform-subtitle,
.market-data-subtitle {
  margin: 13px 0 0;
  color: var(--pricing-muted);
  font-size: 15px;
  line-height: 1.55;
}
.platform-price {
  position: absolute;
  top: clamp(28px, 3.2vw, 44px);
  right: clamp(28px, 3.2vw, 44px);
  display: flex;
  align-items: end;
  gap: 10px;
}
.platform-price strong {
  color: var(--pricing-text);
  font: 600 clamp(56px, 5vw, 72px)/.8 "Chakra Petch", sans-serif;
}
.platform-price span {
  padding-bottom: 3px;
  color: var(--pricing-muted);
  font: 500 9px/1 "IBM Plex Mono", monospace;
  letter-spacing: .13em;
}
.platform-plan ul {
  margin: 36px 0 0;
  padding: 0;
  border-top: 1px solid var(--pricing-line);
  list-style: none;
}
.platform-plan li {
  padding: 14px 0;
  border-bottom: 1px solid rgba(21, 38, 60, .66);
  color: var(--pricing-read);
  font-size: 15px;
  line-height: 1.45;
}
.platform-plan li:last-child { border-bottom: 0; }
.platform-plan li::before {
  content: "✓";
  display: inline-grid;
  width: 16px;
  height: 16px;
  margin-right: 12px;
  place-items: center;
  border: 1px solid rgba(42, 182, 255, .4);
  color: var(--pricing-cyan);
  background: rgba(42, 182, 255, .12);
  font: 500 9px/1 "IBM Plex Mono", monospace;
}

.data-builder-heading { display: block; }
.classification-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 26px;
  padding: 1px;
  border: 1px solid var(--pricing-line);
  background: var(--pricing-line);
}
.classification-switch button {
  min-height: 49px;
  padding: 0 18px;
  border: 0;
  color: var(--pricing-muted);
  background: var(--pricing-bg);
  font: 500 10px/1 "IBM Plex Mono", monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.classification-switch button[aria-pressed="true"] {
  position: relative;
  color: var(--pricing-text);
  background: linear-gradient(180deg, #0c1728, var(--pricing-bg));
}
.classification-switch button[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--pricing-blue), var(--pricing-cyan));
}
.classification-notice {
  margin: 17px 0 24px;
  color: var(--pricing-muted);
  font: 400 13px/1.6 "Barlow", sans-serif;
}
.pricing-loading {
  min-height: 145px;
  display: grid;
  place-items: center;
  border: 1px solid var(--pricing-line);
  color: var(--pricing-muted);
  background: rgba(4, 7, 14, .58);
  font: 500 11px/1.5 "IBM Plex Mono", monospace;
}

.data-product { position: relative; cursor: pointer; transition: .2s ease; }
.data-product input { position: absolute; opacity: 0; pointer-events: none; }
.data-product-check {
  display: grid;
  place-items: center;
  border: 1px solid #34506a;
  color: transparent;
  font-size: 0;
}
.data-product.selected .data-product-check {
  border-color: var(--pricing-blue);
  color: #02060b;
  background: var(--pricing-blue);
  font-size: 13px;
}
.data-product h3 { margin: 0; font: 600 18px/1.1 "Chakra Petch", sans-serif; }
.data-product p { margin: 5px 0 0; color: var(--pricing-muted); font-size: 13px; line-height: 1.45; }
.data-product-price { text-align: right; }
.data-product-price strong { display: block; color: var(--pricing-cyan); font: 600 26px/1 "Chakra Petch", sans-serif; }
.data-product-price span { color: var(--pricing-muted); font: 500 8px/1 "IBM Plex Mono", monospace; letter-spacing: .1em; }
.data-product--bundle {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 19px 20px;
  border: 1px solid rgba(42, 182, 255, .5);
  background: linear-gradient(100deg, rgba(42, 182, 255, .09), rgba(42, 182, 255, .02));
}
.data-product--bundle:hover,
.data-product--bundle.selected { border-color: var(--pricing-cyan); background: rgba(42, 182, 255, .11); }
.data-product--bundle .data-product-check { width: 23px; height: 23px; }
.market-data-alternative {
  display: flex;
  align-items: center;
  margin: 22px 0 8px;
  color: var(--pricing-muted);
  font: 500 8px/1 "IBM Plex Mono", monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.market-data-alternative::before,
.market-data-alternative::after { content: ""; height: 1px; flex: 1; background: var(--pricing-line); }
.market-data-alternative span { padding: 0 15px; }
.exchange-product-list { border-top: 1px solid var(--pricing-line); }
.data-product--exchange {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 58px;
  padding: 0 6px;
  border-bottom: 1px solid var(--pricing-line);
}
.data-product--exchange:hover,
.data-product--exchange.selected { background: rgba(42, 182, 255, .055); }
.data-product--exchange .data-product-check { width: 18px; height: 18px; }
.data-product-inline-title {
  min-width: 0;
  margin: 0;
  color: var(--pricing-text);
  font: 600 14px/1.35 "Barlow", sans-serif;
  letter-spacing: 0;
  text-transform: none;
}
.data-product-inline-title span {
  color: var(--pricing-muted);
  font-weight: 400;
}
.data-product--exchange .data-product-price strong {
  display: inline;
  color: var(--pricing-text);
  font: 600 16px/1 "IBM Plex Mono", monospace;
}
.data-product--exchange .data-product-price span { margin-left: 3px; }
.market-data-level + .market-data-level { margin-top: 34px; padding-top: 34px; border-top: 1px solid var(--pricing-line); }
.market-data-level-header { margin-bottom: 18px; }
.market-data-level-header > span {
  color: var(--pricing-orange);
  font: 500 9px/1 "IBM Plex Mono", monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.market-data-level-header h3 {
  margin: 8px 0 5px;
  color: var(--pricing-text);
  font: 600 23px/1.1 "Chakra Petch", sans-serif;
  text-transform: uppercase;
}
.market-data-level-header p,
.market-data-rate-note {
  margin: 0;
  color: var(--pricing-muted);
  font-size: 13px;
  line-height: 1.55;
}
.market-data-rate-note {
  margin-top: 26px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 183, 54, .28);
  background: rgba(255, 183, 54, .045);
}

.pricing-summary {
  position: sticky;
  top: 96px;
  border: 1px solid rgba(42, 182, 255, .34);
  background: linear-gradient(180deg, rgba(10, 19, 34, .97), rgba(4, 7, 14, .98));
}
.pricing-summary::before,
.pricing-summary::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border-color: var(--pricing-orange);
}
.pricing-summary::before { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; }
.pricing-summary::after { right: -1px; bottom: -1px; border-right: 1px solid; border-bottom: 1px solid; }
.pricing-summary-bar {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--pricing-line);
  color: var(--pricing-muted);
  font: 500 10px/1 "IBM Plex Mono", monospace;
  letter-spacing: .19em;
}
.pricing-summary-bar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pricing-green);
  box-shadow: 0 0 9px var(--pricing-green);
}
.pricing-summary-copy { padding: 27px; }
.pricing-summary-copy h2 { margin: 0; font: 600 23px/1.1 "Chakra Petch", sans-serif; text-transform: uppercase; }
.summary-classification,
.summary-lines > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px dashed rgba(21, 38, 60, .95);
}
.summary-classification { margin-top: 17px; }
.summary-classification span,
.summary-lines span {
  color: var(--pricing-muted);
  font: 500 9px/1.35 "IBM Plex Mono", monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.summary-classification strong,
.summary-lines strong {
  color: var(--pricing-read);
  font: 500 13px/1.2 "IBM Plex Mono", monospace;
  text-align: right;
}
.summary-total {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--pricing-line);
}
.summary-total span { color: var(--pricing-muted); font: 500 9px/1.45 "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; }
.summary-total strong { color: var(--pricing-cyan); font: 600 50px/.9 "Chakra Petch", sans-serif; }
.summary-tax { margin: 14px 0 0; color: #4e6580; font: 400 9px/1.6 "IBM Plex Mono", monospace; }
.pricing-checkout-button {
  display: grid;
  min-height: 54px;
  margin-top: 22px;
  padding: 0 20px;
  place-items: center;
  color: #02060b;
  background: linear-gradient(110deg, var(--pricing-cyan), var(--pricing-blue));
  font: 500 10px/1 "IBM Plex Mono", monospace;
  letter-spacing: .13em;
  text-decoration: none;
  text-transform: uppercase;
}
.summary-fine {
  margin: 0;
  padding: 15px 20px;
  border-top: 1px solid var(--pricing-line);
  color: #4e6580;
  font: 400 9px/1.7 "IBM Plex Mono", monospace;
}
.pricing-live-values { display: none; }

.pricing-footnote {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  width: min(calc(100% - 48px), 1190px);
  margin: 0 auto;
  padding: 0 0 clamp(64px, 7vw, 104px);
  color: #657e94;
  font: 400 10px/1.55 "IBM Plex Mono", monospace;
}
.pricing-footnote strong { color: #91abc2; font-weight: 500; }
.pricing-process,
.pricing-legal {
  width: min(calc(100% - 48px), 1190px);
  margin: 0 auto clamp(62px, 7vw, 108px);
}
.pricing-process > .pricing-kicker { text-align: center; }
.pricing-process > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 45px;
  border-top: 1px solid var(--pricing-line);
  background: var(--pricing-line);
  gap: 1px;
}
.pricing-process article {
  position: relative;
  min-height: 185px;
  padding: 34px 27px;
  background: var(--pricing-bg);
}
.pricing-process article::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 27px;
  width: 9px;
  height: 9px;
  border: 1px solid var(--pricing-blue);
  border-radius: 50%;
  background: var(--pricing-bg);
}
.pricing-process article:first-child::before { background: var(--pricing-blue); box-shadow: 0 0 12px var(--pricing-blue); }
.pricing-process article > span { color: rgba(42, 182, 255, .23); font: 600 42px/1 "Chakra Petch", sans-serif; }
.pricing-process h3 { margin: 12px 0 8px; font: 600 18px/1.05 "Chakra Petch", sans-serif; text-transform: uppercase; }
.pricing-process article p { margin: 0; color: var(--pricing-muted); font-size: 14px; line-height: 1.6; }
.pricing-legal {
  position: relative;
  padding: clamp(48px, 5.6vw, 86px) clamp(24px, 4vw, 64px);
  overflow: hidden;
  border: 1px solid var(--pricing-line);
  background: linear-gradient(180deg, var(--pricing-panel), var(--pricing-bg));
  text-align: center;
}
.pricing-legal::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 22%;
  left: 22%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--pricing-cyan), transparent);
}
.pricing-legal h2 { font-size: clamp(27px, 3.2vw, 44px); }
.pricing-legal p {
  max-width: 940px;
  margin: 24px auto 0;
  color: var(--pricing-muted);
  font-size: 15px;
  line-height: 1.75;
}

@media (max-width: 1240px) {
  .pricing-config-grid {
    grid-template-columns: 1fr;
    width: min(calc(100% - 36px), 860px);
  }
  .pricing-summary { position: static; }
  .platform-plan > div:first-of-type { max-width: none; }
  .platform-price { position: static; margin-top: 24px; }
  .pricing-footnote,
  .pricing-process,
  .pricing-legal { width: min(calc(100% - 36px), 860px); }
}
@media (max-width: 760px) {
  .pricing-shell { width: 100%; }
  .pricing-hero { min-height: 420px; }
  .pricing-hero-figure img { width: 150%; opacity: .25; }
  .pricing-hero h1 { font-size: clamp(40px, 12vw, 62px); }
  .platform-plan,
  .market-data-panel { padding: 26px 21px; }
  .classification-switch button { padding: 0 8px; font-size: 8px; }
  .data-product--bundle { grid-template-columns: 22px minmax(0, 1fr); }
  .data-product--bundle .data-product-price { grid-column: 2; text-align: left; }
  .data-product--exchange { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; }
  .data-product-inline-title { font-size: 12px; }
  .data-product--exchange .data-product-price span { display: none; }
  .pricing-footnote { align-items: flex-start; flex-direction: column; }
  .pricing-process > div { grid-template-columns: 1fr; }
  .pricing-process article { min-height: 145px; }
  .pricing-config-grid,
  .pricing-footnote,
  .pricing-process,
  .pricing-legal { width: calc(100% - 28px); }
}
