/* ==========================================================================
   mt5-platform.css
   The six MetaTrader 5 pages — /metatrader-5, /mt5-webtrader, /mt5-windows,
   /mt5-macos, /mt5-ios, /mt5-android. Ported from update/stage6/mt5/.

   LOAD css/about.css FIRST — it carries the --ab-* tokens and the shared
   editorial kit (page shell, section shell, tab strip, hero, heads, eyebrows,
   buttons, .ab-note callout, closing band). This file adds only what that kit
   has no equivalent of.

   THE PLATFORM CAPABILITIES ON THESE PAGES ARE METAQUOTES' , NOT ROYCE'S.
   21 timeframes, 38 indicators, 44 analytical objects, 6 pending order types,
   30 mobile indicators, 24 graphical objects — every one of these describes
   MetaTrader 5, a platform built by MetaQuotes Software Corp. They are not
   Royce performance claims and must never be presented as one. The attribution
   line under the figures (.mt5-stats-src) is part of the component. Platform
   capability is separate from Royce trading conditions, and the closing risk
   copy on each page says so.

   NO FABRICATED INTERFACE. The device frames below are CSS geometry containing
   a labelled placeholder — an outline icon and the platform name. Nothing here
   draws a chart, an order ticket or a P&L. That rule is unchanged: do not draw
   one.

   THREE SUPPLIED IMAGES, ONE PER FRAME TYPE, COVERING ALL SIX PAGES. All come
   from update/stage9 (Aug 2026). They mount differently, and the difference is
   the asset, not the page — whether it draws its own hardware:

     image/mt5-devices-1024.webp   /metatrader-5     draws its own laptop and
       phone on transparency, so it REPLACES the drawn device — see
       .mt5-device--image below. Putting it in .mt5-frame would nest a laptop
       inside a laptop.
     image/mt5-mobile-splash.jpg   /mt5-ios          a bare launch screen, so it
                                   /mt5-android      goes INSIDE .inner and keeps
       the CSS phone body and notch. One file for both: MetaQuotes ships one
       launch screen for the two platforms.
     image/mt5-terminal-desktop.png /mt5-windows     a bare screen capture, so it
                                    /mt5-macos       fills .mt5-frame and keeps
                                    /mt5-webtrader   the CSS hardware around it —
       a monitor (.mt5-pc), a MacBook (.mt5-macbook) and a browser (.mt5-browser)
       respectively.

   .mt5-shot is therefore unused as of Aug 2026. IT IS KEPT ON PURPOSE — it is
   the compliance-safe fallback, and the note below is unresolved, so a revert is
   live. Do not delete it and do not draw a new interface if one is needed.

   ===== NOTE FOR COMPLIANCE — TWO SEPARATE ITEMS =====

   1. mt5-devices-1024.webp carries MetaQuotes' 2016 demo terminal data: a trade
      history with profit figures, a balance/equity/margin line and bid/ask
      quotes. Illegible at render size, and MetaQuotes' values rather than
      Royce's, but they are numbers on a screen on a Royce page.

   2. mt5-terminal-desktop.png is A LIVE ROYCE TERMINAL, not MetaQuotes artwork,
      and it is published UNCROPPED by explicit maintainer decision (Aug 2026)
      after each of the following was raised:
        - account logins 102064 and 102109, the second labelled with a real
          person's name, in the title bar and the Navigator tree;
        - the server hostname RoyceCapitals-Server;
        - live bid/ask for eleven instruments in Market Watch, which amounts to
          a published spread table;
        - a balance line reading 100 035 089.79 USD at margin level
          1 736 720 309.03 %;
        - an entity/product mismatch: the title bar names Royce Capitals Ltd.
          (Labuan — Foreign Exchange only, BRD §3.2) over BTCUSD and a
          "Bitcoin Spot CFD" chart window.
      It is also a Windows capture used on the macOS page and on the WebTrader
      page, where the product is a browser terminal.

   If any of this is rejected, the cheapest fix is a CSS crop — object-position
   and a tightened aspect-ratio on the rules below will hide the title bar,
   Market Watch, Navigator and balance line without touching the asset. Falling
   back to .mt5-shot is the other option. Do not draw a substitute interface.
   The mobile launch screen is clean: a logo on a gradient, no figures at all.

   Grid rules use the border-matrix technique documented in css/about.css:
   container draws border-top + border-left, cells draw border-right +
   border-bottom. That matters more here than anywhere else on the site — the
   feature grids hold five items in three columns on four of the six pages, and
   a gap-over-background grid would paint the empty track as a solid slab.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Platform sub-nav
   Six destinations, on .ab-tabs so the strip's border-top keeps doing the
   fixed-navbar clearance. Only the icons are added here.
   -------------------------------------------------------------------------- */
.mt5-tabs a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.mt5-tabs a svg {
  width: 17px;
  height: 17px;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.mt5-tabs a:hover svg,
.mt5-tabs a.active svg {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   2. Hero with device
   -------------------------------------------------------------------------- */
.mt5-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}

.mt5-hero__grid .ab-hero__top {
  max-width: none;
}

/* --------------------------------------------------------------------------
   3. Device compositions
   CSS geometry only. See the note at the top of this file — nothing in here
   renders a trading interface.

   HARDWARE COLOUR IS ITS OWN TOKEN SET, not --ab-*. The device chrome used to
   be painted with --ab-base, which is the exact background .ab-hero sits on, so
   every frame measured 1.00:1 against the page it stood on and the hardware was
   invisible in BOTH themes — the bezels only appeared to exist where a screen or
   a gold hairline happened to edge them. --ab-alt had the same problem in light
   (#ffffff on a #f8f8f8 page, 1.06:1).

   These four tokens exist so the chrome is defined against the page instead of
   sharing its value. Measured against .ab-hero (--ab-base: #111111 dark,
   #f8f8f8 light) and against the near-black terminal screenshot the frames now
   hold, since the bezel has to separate from both at once:

                     vs page      vs screenshot
     dark   #444c59    2.20:1         2.31:1
     light  #4a515e    7.52:1         2.48:1

   The bezel carries the tonal step and --mt5-bezel-edge carries the silhouette:
   a hairline at 3.0:1 (dark) and 4.1:1 (light) against the page, drawn as an
   outer box-shadow ring rather than a border so it cannot eat into the
   aspect-ratio box. It is not an inset ring — the <img> fills the content box
   and would paint straight over one.

   Deliberately not gold. --ab-line is gold at 22%, which flattens to 1.49:1 on
   the dark page: too weak to define an edge, and BRD §9.1 keeps gold to fine
   accents rather than tracing every piece of hardware on the page. */
:root {
  --mt5-bezel: #444c59;
  --mt5-bezel-edge: rgba(248, 248, 248, 0.34);
  --mt5-stand: #333a45;
  --mt5-groove: #1a1f27;
}

html[data-bs-theme='light'] {
  --mt5-bezel: #4a515e;
  --mt5-bezel-edge: rgba(17, 17, 17, 0.45);
  --mt5-stand: #3a414d;
  --mt5-groove: #23272f;
}

.mt5-device {
  position: relative;
}

.mt5-frame {
  position: relative;
  overflow: hidden;
  background: var(--ab-panel);
  border: 1px solid var(--ab-line);
}

.mt5-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* Unused since Aug 2026 — every page now mounts a supplied image. Retained as
   the compliance-safe fallback; see the header. */
.mt5-shot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 220px;
  padding: 28px;
  text-align: center;
  color: var(--ab-ink-muted);
}

.mt5-shot svg {
  width: 34px;
  height: 34px;
  opacity: 0.7;
  color: var(--ab-gold);
}

.mt5-shot b {
  font-size: 1rem;
  font-weight: 500;
  color: var(--ab-platinum);
}

.mt5-shot span {
  max-width: 260px;
  font-size: 0.76rem;
}

/* Supplied device image (/metatrader-5). No frame, no border and no panel
   background: the asset draws its own hardware on transparency, so any chrome
   around it would read as a second device. It is square with generous empty
   margins, hence the cap — at the raw 1fr of the hero grid it would tower over
   the copy column beside it. */
.mt5-device--image {
  max-width: 560px;
  margin-inline: auto;
}

.mt5-device--image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Supplied terminal capture (/mt5-windows, /mt5-macos, /mt5-webtrader). The
   generic .mt5-frame img rule above is height:auto, which would overrun the
   frame; this fills it. cover, not fill, so the charts are trimmed rather than
   squashed — the asset is 1920x1140 (1.684), against 16/9 in the monitor and
   16/10 in the MacBook and browser.

   object-position is the crop dial if the compliance note in the header goes the
   other way — see there. */
.mt5-pc .mt5-frame img,
.mt5-macbook .mt5-frame img,
.mt5-browser .mt5-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* PC monitor (/mt5-windows) and MacBook (/mt5-macos).
   These replaced one shared .mt5-laptop frame in Aug 2026: both pages drew the
   same generic clamshell, which said nothing about the platform each page is
   selling. Still CSS geometry only — a bezel, a chin and a stand. Nothing here
   renders an interface.

   The bezel is a border rather than padding so that aspect-ratio, which resolves
   against the border box under Bootstrap's border-box sizing, still describes
   the panel as a whole. .mt5-frame clips to its padding box, so anything drawn
   in the chin would be clipped — keep chin detail out. */

/* Monitor: uniform bezel, deep chin, 16/9 like the panel it imitates — which is
   also the closest of the three ratios to the asset, so it crops least. */
.mt5-pc .mt5-frame {
  aspect-ratio: 16 / 9;
  background: var(--mt5-bezel);
  border: 10px solid var(--mt5-bezel);
  border-bottom-width: 26px;
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--mt5-bezel-edge);
}

.mt5-pc .neck {
  width: 15%;
  height: 34px;
  margin: 0 auto;
  background: linear-gradient(180deg, var(--mt5-bezel), var(--mt5-stand));
  border: 1px solid var(--mt5-bezel-edge);
  border-top: 0;
}

.mt5-pc .foot {
  width: 42%;
  height: 10px;
  margin: 0 auto;
  background: var(--mt5-stand);
  border: 1px solid var(--mt5-bezel-edge);
  border-radius: 7px;
}

/* MacBook: thinner bezel than the monitor, square top corners rounded, and a
   deck that flares past the lid with the front finger groove cut into it. */
.mt5-macbook .mt5-frame {
  aspect-ratio: 16 / 10;
  background: var(--mt5-bezel);
  border: 9px solid var(--mt5-bezel);
  border-bottom-width: 16px;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 0 0 1px var(--mt5-bezel-edge);
}

.mt5-macbook .base {
  position: relative;
  height: 13px;
  margin: 0 -7%;
  background: linear-gradient(180deg, var(--mt5-bezel), var(--mt5-stand));
  border: 1px solid var(--mt5-bezel-edge);
  border-top: 0;
  border-radius: 0 0 12px 12px;
}

/* The groove is a cut into the deck, so it reads as shadow: --mt5-groove is
   darker than the deck in both themes rather than following the page. */
.mt5-macbook .base::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 78px;
  height: 6px;
  transform: translateX(-50%);
  background: var(--mt5-groove);
  border-radius: 0 0 7px 7px;
}

/* browser
   The title bar was --ab-alt, which is #ffffff on the light hero's #f8f8f8 —
   1.06:1, so the bar was invisible and the window read as a floating screenshot.
   It joins the hardware token set; the dots and the URL pill are cut from it so
   they stay legible on the new darker bar in both themes. */
.mt5-browser .bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: var(--mt5-bezel);
  border: 1px solid var(--mt5-bezel-edge);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.mt5-browser .bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(248, 248, 248, 0.42);
}

.mt5-browser .bar .url {
  flex: 1;
  height: 18px;
  margin-left: 10px;
  background: var(--mt5-groove);
  border-radius: 4px;
}

.rtl .mt5-browser .bar .url {
  margin-left: 0;
  margin-right: 10px;
}

.mt5-browser .mt5-frame {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--mt5-bezel-edge);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 0 0 1px var(--mt5-bezel-edge);
}

/* phone */
.mt5-phone {
  max-width: 290px;
  margin: 0 auto;
}

/* The 12px padding is this frame's bezel, so it takes --mt5-bezel like the
   others; it was --ab-base, i.e. the hero background, which is why the phone
   body had no silhouette in either theme. */
.mt5-phone .mt5-frame {
  aspect-ratio: 9 / 19;
  padding: 12px;
  background: var(--mt5-bezel);
  border: 0;
  border-radius: 34px;
  box-shadow: 0 0 0 1px var(--mt5-bezel-edge);
}

.mt5-phone .inner {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--ab-panel);
  border: 1px solid var(--ab-line);
  border-radius: 24px;
}

/* Supplied launch screen (/mt5-ios, /mt5-android). The generic .mt5-frame img
   rule above is height:auto, which would run the image past the bottom of the
   screen; this fills .inner instead. cover, not fill: the asset is 705x1600
   (1:2.27) and the screen is a shade squarer once the 12px bezel is taken off
   .mt5-frame's 9/19, so a few percent is trimmed rather than the logo stretched. */
.mt5-phone .inner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Matches the bezel exactly so it reads as part of the phone body cutting into
   the screen, not as a separate bar sitting on top of it. */
.mt5-phone .notch {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 2;
  width: 96px;
  height: 20px;
  transform: translateX(-50%);
  background: var(--mt5-bezel);
  border-radius: 0 0 12px 12px;
}

/* --------------------------------------------------------------------------
   4. Feature grid
   Three across, and five items on four of the six pages — the short last row
   is why this is a border matrix and not a gap grid.
   -------------------------------------------------------------------------- */
.mt5-feat {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ab-line);
  border-left: 1px solid var(--ab-line);
}

.mt5-feat__item {
  padding: 36px 32px;
  background: var(--ab-panel);
  border-right: 1px solid var(--ab-line);
  border-bottom: 1px solid var(--ab-line);
}

.mt5-feat__item .k {
  display: block;
  margin-bottom: 12px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ab-gold);
}

.mt5-feat__item h3 {
  margin: 0 0 10px;
  font-size: 1.12rem;
  font-weight: 500;
  color: var(--ab-ink);
}

.mt5-feat__item p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ab-ink-muted);
}

/* --------------------------------------------------------------------------
   5. Platform figures
   MetaQuotes' figures for MetaTrader 5. .mt5-stats-src carries the attribution
   and is not a footnote that can be trimmed — without it these read as Royce
   claims, which they are not.
   -------------------------------------------------------------------------- */
.mt5-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--ab-line);
  border-left: 1px solid var(--ab-line);
}

.mt5-stat {
  padding: 40px 24px;
  text-align: center;
  border-right: 1px solid var(--ab-line);
  border-bottom: 1px solid var(--ab-line);
}

.mt5-stat .n {
  display: block;
  font-size: clamp(2rem, 4vw, 2.6rem);
  line-height: 1;
  color: var(--ab-gold);
  font-variant-numeric: tabular-nums;
}

.mt5-stat .l {
  display: block;
  margin-top: 12px;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ab-ink-muted);
}

.mt5-stats-src {
  margin: 20px 0 0;
  text-align: center;
  font-size: 0.74rem;
  color: var(--ab-ink-muted);
}

/* --------------------------------------------------------------------------
   6. Platform choice cards (overview only)
   -------------------------------------------------------------------------- */
.mt5-choices {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.mt5-choice {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 22px;
  background: var(--ab-panel);
  border: 1px solid var(--ab-line);
  transition:
    border-color 0.22s var(--ab-ease),
    transform 0.22s var(--ab-ease);
}

.mt5-choice:hover {
  border-color: var(--ab-gold);
  transform: translateY(-3px);
}

@media (prefers-reduced-motion: reduce) {
  .mt5-choice,
  .mt5-choice:hover {
    transition: none;
    transform: none;
  }
}

.mt5-choice .pi {
  width: 26px;
  height: 26px;
  color: var(--ab-gold);
}

.mt5-choice h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ab-ink);
}

.mt5-choice p {
  flex-grow: 1;
  margin: 0;
  font-size: 0.84rem;
  color: var(--ab-ink-muted);
}

/* --------------------------------------------------------------------------
   7. Steps
   Three, four or five across depending on the page; the modifier picks.
   -------------------------------------------------------------------------- */
.mt5-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--ab-line);
  border-left: 1px solid var(--ab-line);
}

.mt5-steps--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mt5-steps--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.mt5-step {
  padding: 34px 26px;
  border-right: 1px solid var(--ab-line);
  border-bottom: 1px solid var(--ab-line);
}

.mt5-step .num {
  display: block;
  margin-bottom: 14px;
  font-size: 1.3rem;
  color: var(--ab-gold);
  font-variant-numeric: tabular-nums;
}

.mt5-step h3 {
  margin: 0 0 8px;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ab-ink);
}

.mt5-step p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--ab-ink-muted);
}

.mt5-steps-cta {
  margin-top: 40px;
}

/* Right-hand rules become left-hand rules; the container's opening rule moves
   with them. */
.rtl .mt5-feat__item,
.rtl .mt5-stat,
.rtl .mt5-step {
  border-right: 0;
  border-left: 1px solid var(--ab-line);
}

.rtl .mt5-feat,
.rtl .mt5-stats,
.rtl .mt5-steps {
  border-left: 0;
  border-right: 1px solid var(--ab-line);
}

.rtl .mt5-feat__item .k,
.rtl .mt5-stat .l {
  letter-spacing: normal;
}

/* --------------------------------------------------------------------------
   8. Store badges — OFFICIAL VENDOR ARTWORK, RENDERED UNMODIFIED

   image/badges/app-store.svg is Apple's supplied "Download on the App Store"
   badge; image/badges/google-play.png is Google's supplied "Get it on Google
   Play" badge. Both are the vendors' own files, used as issued.

   THE ARTWORK IS NEVER ALTERED. Apple's Marketing Guidelines and Google's Play
   badge guidelines both prohibit recolouring, redrawing, rotating, adding
   effects to or distorting the badge. That is why there is no hover treatment
   here, no filter, no opacity change and no border: only the link's focus ring
   is styled, and it sits OUTSIDE the artwork. Each badge already carries its
   own plate and outline, which is what lets it sit on a dark panel.

   The two heights differ on purpose. Apple's file is trimmed to the badge
   (119.66 x 40); Google's carries roughly 10% built-in clear space inside the
   PNG (646 x 250), so it needs a larger box to render the same visual size.
   Do not "fix" that by cropping Google's file — the clear space is required.

   BOTH FILES ARE THE US/UK ENGLISH BADGES. Apple and Google each publish
   Arabic artwork; swap the files (not the CSS) when the Arabic experience is
   signed off. The alt text localises already, through data-lang-attr.
   -------------------------------------------------------------------------- */
.mt5-badge {
  display: inline-flex;
  text-decoration: none;
}

.mt5-badge img {
  display: block;
  width: auto;
  height: 44px;
}

/* Google's badge boxes its own clear space, so it renders taller to match. */
.mt5-badge--play img {
  height: 66px;
}

.mt5-badge:focus-visible {
  outline: 2px solid var(--ab-gold);
  outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   9. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .mt5-hero__grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .mt5-choices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mt5-feat {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mt5-steps,
  .mt5-steps--4,
  .mt5-steps--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .mt5-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mt5-choices,
  .mt5-feat,
  .mt5-steps,
  .mt5-steps--4,
  .mt5-steps--5 {
    grid-template-columns: 1fr;
  }

  .mt5-feat__item {
    padding: 28px 24px;
  }

  .ab-hero__cta .ab-btn,
  .mt5-steps-cta .ab-btn,
  .ab-closing__actions .ab-btn {
    width: 100%;
  }

  .mt5-badge {
    width: 100%;
    justify-content: center;
  }
}