/* Merqi v2.1 additions — implemented from the written brief.
   merqi-complete.zip (tokens v2.1) never landed in this project: uploads/ still
   holds v1 tokens and the design system source is v2, so none of the classes
   below exist upstream. Values are taken verbatim from the brief. Replace this
   file wholesale when the real v2.1 token file arrives. */
:root {
  --mq-deep: #2a1b3d;          /* deep band, per brief */
  --r-panel: 40px;             /* .mq-panel top corners */
}

/* Deep band. Type inverts, same contract as .mq-section--dark in v2. */
.mq-section--deep { background: var(--mq-deep); color: #fff; }
.mq-section--deep .mq-h2,
.mq-section--deep .mq-h3,
.mq-section--deep .mq-display-l,
.mq-section--deep .mq-display-xl { color: #fff; }
.mq-section--deep .mq-eyebrow { color: var(--mq-brand-soft); }
.mq-section--deep .mq-body,
.mq-section--deep .mq-body-l { color: rgba(255,255,255,0.78); }
.mq-section--deep .mq-small,
.mq-section--deep .mq-mute { color: rgba(255,255,255,0.62); }

/* A white section that follows a deep one lifts over it with rounded top
   corners. Negative margin is on the panel, never on .mq-section padding. */
.mq-panel {
  background: var(--mq-paper);
  border-start-start-radius: var(--r-panel);
  border-start-end-radius: var(--r-panel);
  margin-top: calc(var(--r-panel) * -1);
  position: relative;
  z-index: 1;
}

.mq-head--center {
  align-items: center;
  text-align: center;
}
.mq-head--center .mq-h2,
.mq-head--center .mq-body-l { margin-inline: auto; }

/* Resource-card chip. */
.mq-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--mq-card);
  border: var(--hairline);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--mq-brand);
}
.mq-section--deep .mq-tag {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.22);
  color: #fff;
}

/* Stat figures are SANS, not mono — mono is reserved for table cells, prices
   and SKUs. .mq-data-xl in v2 is mono, so stats use this instead. */
.mq-stat {
  font-family: var(--mq-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--mq-ink);
  font-variant-numeric: tabular-nums;
}
.mq-section--deep .mq-stat, .mq-scrim ~ * .mq-stat { color: #fff; }

/* Mint pill — hero CTA only, per brief. */
.mq-btn--mint { background: var(--mq-accent); color: var(--mq-deep); border-radius: var(--r-pill); }
.mq-btn--mint:hover { background: #fff; color: var(--mq-deep); }

/* Outlined card on a deep band: translucent fill, thin white border. */
.mq-card--outline {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--r-card);
  padding: var(--s-7);
  transition: background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.mq-card--outline:hover { background: rgba(255,255,255,0.09); transform: translateY(-2px); }

/* Scroll reveal, driven by MerqiKit.initAnimations. Final state is the default
   so the page is correct if JS never runs; the engine adds the start state. */
[data-mq-anim] { will-change: opacity, transform; }