/* ==================================================================
   METATRADER 5 — homepage narrative section.
   Markup lives inline in index.html (single consumer), directly above
   #platforms. The two are designed to read as ONE MetaTrader 5 block:
   this section carries the heading, capabilities and device visual;
   #platforms carries the per-device download cards beneath it and has
   had its own head removed so the page states "MetaTrader 5" once.

   Ported from update/stage2/mt5-preview.html. Deviations, and why:

   1. CLASS NAMES. The prototype reuses the mockup's bare .section,
      .container, .eyebrow, .section-head, .btn and .btn-outline. Two of
      those are live Bootstrap 5 classes here (.container, .btn) and
      would collide site-wide, so all furniture is namespaced .rz-mt5__*.

   2. FONTS. Marcellus + Inter are replaced by the self-hosted
      'Ping AR + LT' — neither Google font covers Arabic (NFR-10).

   3. NO SECTION BACKGROUND. The prototype ships navy, placed between an
      ivory Funding section and a black Why Royce. Neither neighbour
      exists here: on this page the order is markets (navy) → this →
      platforms (page) → funding (navy). Navy here would sit against
      navy above, so the section inherits the page background and uses
      the same theme-aware tokens as .rz-plat-card directly below
      (--section-box-color / --footer-border / --text-primary /
      --paragraph-color). Alternation is preserved and the two sections
      read as one system in both themes. The prototype's
      .rz-mt5--charcoal variant is therefore not ported.

   4. THE DEVICE VISUAL SITS ON A NAVY PLATE. The inline SVG is drawn for
      a navy backdrop: #C8C8C8 hairlines at .34 opacity and #0B1628 panel
      fills. On the light theme it would be invisible. Rather than recolour
      the artwork, .rz-mt5__visual gives it its own navy plate — the same
      answer css/funding.css deviation 3 uses for the payment marks. It
      also reads correctly: MT5's own dark UI, framed.

   5. REVEAL USES THE SITE'S OBSERVER. The prototype ships an IIFE that
      adds .is-inview. general.js already does exactly this for
      .animate-on-scroll, so the section opts into that instead and no
      new script is added. The blanket fade .animate-on-scroll applies is
      cancelled below so only the staggered .rz-anim children move.

   6. BLOCKS THE PROTOTYPE STYLES BUT DOES NOT RENDER. Its CSS defines a
      five-button platform row, a primary/secondary action pair and a
      bottom notice; none appear in its markup. They are built here to
      the spec those rules describe. Every destination reuses a link that
      already ships in #platforms — nothing invented (BRD §10.2).

   CONTENT RULES CARRIED OVER FROM THE PROTOTYPE
    · MetaTrader 5 only; never an earlier platform version.
    · No execution-speed, latency or performance claims of any kind.
    · The device visual carries no prices, balances, percentages,
      account numbers or instrument names — chart forms and chrome only.
    · Platform buttons use device silhouettes, not the Apple or Android
      brand marks; those are third-party trademarks needing their
      owners' artwork and permission.

   Fourth file to mirror the same section furniture — see the note at the
   end of css/platforms.css before copying __container / __head again.
   ================================================================== */

/* #region ------- ( 1- Scoped tokens + reset ) ---------- */
.rz-mt5 {
  --mt5-max-w: 1240px;
  --line-dark: rgba(214, 166, 28, 0.22);
}
.rz-mt5,
.rz-mt5 *,
.rz-mt5 *::before,
.rz-mt5 *::after {
  box-sizing: border-box;
}
/* #endregion */

/* #region ------- ( 2- Section shell ) ---------- */
/* Bottom padding is deliberately small: #platforms continues this block
   and carries .rz-plat--headless to drop its own top padding. */
.rz-mt5 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 96px 0 56px;
  font-family: 'Ping AR + LT', -apple-system, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* hairline seam — marks the top of the MetaTrader 5 block coming off the
   navy markets section above */
.rz-mt5::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  z-index: 3;
  background: linear-gradient(90deg, transparent, var(--line-dark) 28%, rgba(214, 166, 28, 0.4) 50%, var(--line-dark) 72%, transparent);
}

.rz-mt5__container {
  position: relative;
  z-index: 2;
  max-width: var(--mt5-max-w);
  margin: 0 auto;
  padding: 0 40px;
}

.rz-mt5__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: 72px;
  align-items: center;
}
/* #endregion */

/* #region ------- ( 3- Section head ) ----------
   Left-aligned, unlike the centred heads in markets/platforms/funding —
   this one shares its row with the device visual. */
.rz-mt5__head {
  margin-bottom: 40px;
}
.rz-mt5__eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--royce-gold);
  margin-bottom: 16px;
}
.rtl .rz-mt5__eyebrow {
  letter-spacing: normal;
}
.rz-mt5__head h2 {
  font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  letter-spacing: 0.02em;
  margin: 0 0 16px;
  color: var(--text-primary);
}
.rtl .rz-mt5__head h2 {
  letter-spacing: normal;
}
.rz-mt5__head p {
  font-size: 0.98rem;
  margin: 0;
  color: var(--paragraph-color);
}
/* #endregion */

/* #region ------- ( 4- Feature list ) ---------- */
.rz-mt5__features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}
.rz-mt5__feature {
  padding: 22px 20px;
  background: var(--section-box-color);
  border: 1px solid var(--footer-border);
  transition:
    border-color 0.3s ease,
    transform 0.3s ease;
}
.rz-mt5__feature-icon {
  display: block;
  width: 26px;
  height: 26px;
  margin-bottom: 14px;
  color: var(--text-primary);
  transition: color 0.3s ease;
}
.rz-mt5__feature-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.rz-mt5__feature h3 {
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin: 0 0 8px;
}
.rtl .rz-mt5__feature h3 {
  letter-spacing: normal;
}
.rz-mt5__feature p {
  font-size: 0.82rem;
  line-height: 1.68;
  color: var(--paragraph-color);
  margin: 0;
}
@media (hover: hover) and (pointer: fine) {
  .rz-mt5__feature:hover {
    border-color: var(--brand-gold);
    transform: translateY(-3px);
  }
  .rz-mt5__feature:hover .rz-mt5__feature-icon {
    color: var(--brand-gold);
  }
}
/* #endregion */

/* #region ------- ( 5- Platform buttons ) ----------
   Five, identical metrics. Same hover language as .rz-plat-card__btn
   below — fill gold, black label — so the two rows read as one family. */
.rz-mt5__platforms-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paragraph-color);
  margin: 0 0 14px;
}
.rtl .rz-mt5__platforms-label {
  letter-spacing: normal;
}
.rz-mt5__platforms {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.rz-mt5__platform {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 86px;
  padding: 16px 8px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--text-primary);
  background: transparent;
  border: 1px solid var(--footer-border);
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}
.rtl .rz-mt5__platform {
  letter-spacing: normal;
}
.rz-mt5__platform svg {
  width: 22px;
  height: 22px;
  display: block;
  flex: none;
}
.rz-mt5__platform:hover,
.rz-mt5__platform:focus-visible {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--royce-black);
  transform: translateY(-2px);
}
/* the browser-based option, distinguished by a gold hairline */
.rz-mt5__platform--web {
  border-color: var(--royce-gold);
}
.rz-mt5__platforms-note {
  margin: 0 0 32px;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--paragraph-color);
}
/* #endregion */

/* #region ------- ( 6- Primary actions ) ---------- */
.rz-mt5__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
/* Motion only; the box and the RTL tracking reset are css/buttons.css's. */
.rz-mt5__btn {
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}
.rz-mt5__btn--gold {
  background: var(--royce-gold);
  border-color: var(--royce-gold);
  color: var(--royce-black);
}
.rz-mt5__btn--gold:hover,
.rz-mt5__btn--gold:focus-visible {
  background: var(--royce-gold-hover);
  border-color: var(--royce-gold-hover);
  color: var(--royce-black);
}
.rz-mt5__btn--outline {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--text-primary);
}
.rz-mt5__btn--outline:hover,
.rz-mt5__btn--outline:focus-visible {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: var(--royce-black);
}
.rz-mt5 a:focus-visible {
  outline: 2px solid var(--royce-gold);
  outline-offset: 3px;
}
/* #endregion */

/* #region ------- ( 7- Device visual ) ----------
   Navy plate — see deviation 4.

   The inline SVG mock was replaced by the update/stage12 product shot; the
   markup is now a <picture> (WebP 1x/2x, PNG fallback) in index.html. The
   halo the SVG drew as an <ellipse> is the ::before below, so the plate keeps
   the same lit-screen composition. */
.rz-mt5__visual {
  position: relative;
  /* background: var(--royce-navy); */
  /* border: 1px solid var(--footer-border); */
  padding: 24px;
}
.rz-mt5__visual svg,
.rz-mt5__visual picture,
.rz-mt5__shot {
  width: 100%;
  height: auto;
  display: block;
}
/* The artwork is alpha-trimmed, so it has to sit above the halo. */
.rz-mt5__shot {
  position: relative;
  z-index: 1;
}
/* Restrained screen glow — opacity only, compositor-friendly. Same geometry
   and gold as the ellipse it replaces: centred at 44% of the plate, gold at
   0.16 falling to nothing. */
.rz-mt5__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(60% 55% at 50% 44%, rgba(214, 166, 28, 0.16) 0%, rgba(214, 166, 28, 0) 100%);
  animation: rz-mt5-breathe 7s ease-in-out infinite alternate;
}
@keyframes rz-mt5-breathe {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 0.85;
  }
}
/* #endregion */

/* #region ------- ( 8- Platform notice ) ---------- */
.rz-mt5__notice {
  margin: 0ch auto 0;
  max-width: 88ch;
  text-align: center;
  font-size: 0.76rem;
  line-height: 1.7;
  color: var(--paragraph-color);
  padding-top: 26px;
  border-top: 1px solid var(--footer-border);
}
/* #endregion */

/* #region ------- ( 9- Entrance ) ----------
   general.js adds .animate-in to any .animate-on-scroll element. The
   blanket fade style.css attaches to that class is cancelled here so the
   section does not move as a whole — only the two .rz-anim columns rise,
   staggered by --col. See deviation 5. */
.rz-mt5.animate-on-scroll {
  opacity: 1;
  transform: none;
  transition: none;
  will-change: auto;
}
.rz-mt5 .rz-anim {
  opacity: 0;
  transform: translateY(24px);
}
.rz-mt5.animate-in .rz-anim {
  animation: rz-mt5-rise 520ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: calc(120ms + var(--col, 0) * 68ms);
}
@keyframes rz-mt5-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* #endregion */

/* #region ------- ( 10- Responsive ) ---------- */
@media (max-width: 1024px) {
  .rz-mt5__split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    gap: 44px;
  }
  .rz-mt5__platforms {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .rz-mt5__platform {
    min-height: 80px;
  }
}
@media (max-width: 900px) {
  .rz-mt5 {
    padding: 68px 0 40px;
  }
  .rz-mt5__container {
    padding: 0 24px;
  }
  .rz-mt5__split {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  /* content first on narrow viewports */
  .rz-mt5__copy {
    order: 1;
  }
  .rz-mt5__visual {
    order: 2;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
  }
  .rz-mt5__notice {
    margin-top: 44px;
  }
}
@media (max-width: 600px) {
  .rz-mt5__features {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .rz-mt5__platforms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .rz-mt5__platform {
    min-height: 84px; /* comfortable tap target */
  }
  /* WebTrader is the odd one out of five — let it span the row */
  .rz-mt5__platforms li:last-child {
    grid-column: 1 / -1;
  }
  .rz-mt5__actions .rz-mt5__btn {
    flex: 1 1 100%;
  }
  .rz-mt5__visual {
    padding: 16px;
  }
}
/* #endregion */

/* #region ------- ( 11- Reduced motion ) ---------- */
@media (prefers-reduced-motion: reduce) {
  .rz-mt5 .rz-anim {
    transform: none;
  }
  .rz-mt5.animate-in .rz-anim {
    animation: rz-mt5-fade 200ms linear forwards;
    animation-delay: 0ms !important;
  }
  @keyframes rz-mt5-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  /* Halo moved from an <ellipse> in the SVG to the plate's ::before when the
     product shot replaced the mock — same treatment, new selector. */
  .rz-mt5__visual::before {
    animation: none;
    opacity: 0.7;
  }
  .rz-mt5 *,
  .rz-mt5 *::before,
  .rz-mt5 *::after {
    transition: none !important;
  }
  .rz-mt5__feature:hover,
  .rz-mt5__platform:hover {
    transform: none;
  }
}
/* #endregion */