/* Spain root font-size per breakpoint (SpainMain sets html font-size this way). Used ONLY to convert Spain image rem sizes; the site root font-size is untouched. */
:root { --sp-rem: 13px; }
@media (min-width: 768px) { :root { --sp-rem: 11px; } }
@media (min-width: 992px) { :root { --sp-rem: 13px; } }
@media (min-width: 1400px) { :root { --sp-rem: 15px; } }
@media (min-width: 1600px) { :root { --sp-rem: 16px; } }

/* Homepage image/visual assets restored from the reference design.
   Backgrounds sit behind a theme-coloured overlay so MOUNTSTONE text stays legible. */

/* ---- Hero (slide 34) ---- */
.h1-hero.sp-bg-hero {
  background: linear-gradient(color-mix(in srgb, var(--bg-primary) 70%, transparent), color-mix(in srgb, var(--bg-primary) 88%, transparent)), url(../assets/images/home-banner/34.webp) left center / cover no-repeat;
}
@media (max-width: 575.98px) {
  .h1-hero.sp-bg-hero {
    background: linear-gradient(color-mix(in srgb, var(--bg-primary) 70%, transparent), color-mix(in srgb, var(--bg-primary) 88%, transparent)), url(../assets/images/home-banner/mobile-34.webp) 0 0 / cover no-repeat;
  }
}

/* ---- Slide cards (36 and 32) ---- */
.sp-card-36 {
  background-image: linear-gradient(color-mix(in srgb, var(--bg-primary) 70%, transparent), color-mix(in srgb, var(--bg-primary) 88%, transparent)), url(../assets/images/home-banner/36.png) !important;
  background-position: 0 0, 0% 50% !important;
  background-size: auto, cover !important;
  background-repeat: no-repeat !important;
}
.sp-card-32 {
  background-image: linear-gradient(color-mix(in srgb, var(--bg-primary) 70%, transparent), color-mix(in srgb, var(--bg-primary) 88%, transparent)), url(../assets/images/home-banner/32.webp) !important;
  background-position: 0 0, 50% 50% !important;
  background-size: auto, cover !important;
  background-repeat: no-repeat !important;
}
@media (max-width: 575.98px) {
  .sp-card-32 {
    background-image: linear-gradient(color-mix(in srgb, var(--bg-primary) 70%, transparent), color-mix(in srgb, var(--bg-primary) 88%, transparent)), url(../assets/images/home-banner/mobile-32.webp) !important;
  }
}
.sp-icm {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 0 1rem;
}

/* ---- Raw chart section ---- */
.sp-bg-raw {
  background-image: linear-gradient(color-mix(in srgb, var(--bg-primary) 70%, transparent), color-mix(in srgb, var(--bg-primary) 88%, transparent)), url(../assets/images/raw-chart-bg.webp) !important;
  background-position: 0 0, 0% 100% !important;
  background-size: auto, 100% auto !important;
  background-repeat: no-repeat !important;
}
.sp-chg::before {
  content: "";
  display: inline-block;
  width: calc(1.5 * var(--sp-rem));
  height: calc(0.75 * var(--sp-rem));
  margin-right: 0.5rem;
  vertical-align: baseline;
}
.sp-chg--up::before { background-image: url(../assets/images/increase.webp); }
.sp-chg--down::before { background-image: url(../assets/images/decrease.webp); }

/* ---- Check bullets ---- */
span.sp-check {
  width: var(--sp-rem);
  height: var(--sp-rem);
  margin-top: calc(0.25 * var(--sp-rem));
  font-size: 0;
  line-height: 0;
  background: url(../assets/images/check.svg) center / contain no-repeat;
}
li.sp-check-li::before {
  content: "";
  display: inline-block;
  width: var(--sp-rem);
  height: var(--sp-rem);
  margin-right: 0.6rem;
  vertical-align: -0.15em;
  background: url(../assets/images/check.svg) center / contain no-repeat;
}

/* ---- Step card images ---- */
.sp-card-img {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.25rem;
}
.sp-card-img img {
  max-width: 100%;
  height: auto;
}
.sp-card-img--wide img { max-width: 28.125rem; }
.sp-img-mobile { display: none; }
@media (max-width: 767.98px) {
  .sp-img-desktop { display: none; }
  .sp-img-mobile { display: block; }
  .sp-card-img { justify-content: center; }
}
.sp-fig {
  margin: 1.5rem 0 0;
  text-align: center;
}
.sp-fig img {
  max-width: 100%;
  height: auto;
}

/* ---- Strength sections ---- */
.sp-bg-strength {
  position: relative;
  isolation: isolate;
}
.sp-bg-strength::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 48%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(color-mix(in srgb, var(--bg-primary) 70%, transparent), color-mix(in srgb, var(--bg-primary) 88%, transparent)), url(../assets/images/strength-bg.webp) right center no-repeat;
  background-size: auto, auto;
}
.sp-bg-strength.sp-bg-strength--right::before {
  left: auto;
  right: 0;
  transform: scaleX(-1);
}
@media (max-width: 767.98px) {
  .sp-bg-strength::before {
    width: 100%;
    height: 100%;
    top: auto;
    bottom: 0;
    background-position: 0 0, center bottom;
  }
}

/* ---- Final CTA ---- */
.h1-cta.sp-bg-cta {
  background-image: linear-gradient(color-mix(in srgb, var(--bg-primary) 70%, transparent), color-mix(in srgb, var(--bg-primary) 88%, transparent)), url(../assets/images/cta-bg.webp);
  background-position: 0 0, 100% 50%;
  background-size: auto, cover;
  background-repeat: no-repeat;
}
@media (max-width: 767.98px) {
  .h1-cta.sp-bg-cta { background-position: 0 0, 50% 100%; }
}

/* ---- Image sizing matched to SpainMain (measured) ---- */
/* Step-01 card image: Spain card-right-bg max-width 28.125rem, img-fluid */
.sp-card-img--wide img.sp-img-desktop {
  width: min(100%, calc(28.125 * var(--sp-rem))) !important;
  max-width: 100% !important;
  height: auto !important;
}
/* Mobile step-01 image: Spain card-img-block bleeds to the card edges (margin 0 -1.5625rem), width 100% */
@media (max-width: 767.98px) {
  .sp-card-img--wide {
    margin-left: calc(-2rem + 0.2 * var(--sp-rem));
    margin-right: calc(-2rem + 0.2 * var(--sp-rem));
  }
  .sp-card-img--wide img.sp-img-mobile {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
  }
}
/* Terminals / markets figures: Spain column image, img-fluid, column width = 33.6 Spain-rem */
.sp-fig img.sp-img-desktop {
  max-width: min(100%, calc(33.6 * var(--sp-rem))) !important;
  height: auto !important;
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .sp-fig img.sp-img-desktop { max-width: min(100%, calc(29.55 * var(--sp-rem))) !important; }
}
.sp-fig img.sp-img-mobile {
  width: 100%;
  max-width: 100% !important;
  height: auto !important;
}
/* Platform logos: Spain ul.logo-list li img { max-width: 8.9375rem } (6.25rem on mobile), natural ratio */
img[src*="meta-trader"], img[src*="ctrader"], img[src*="tradingview"] {
  width: auto;
  max-width: min(100%, calc(8.9375 * var(--sp-rem))) !important;
  max-height: none !important;
  height: auto !important;
}
@media (max-width: 767px) {
  img[src*="meta-trader"], img[src*="ctrader"], img[src*="tradingview"] {
    max-width: min(100%, calc(6.25 * var(--sp-rem))) !important;
  }
}
/* Payment logos: Spain shows them at natural size (img-fluid in slick slides) */
img[src*="-logo."] {
  max-width: 100% !important;
  max-height: none !important;
  height: auto !important;
}
div:has(> img[src*="-logo."]) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}