/* ============================================================
   4X Solutions – Global Stylesheet
   ============================================================ */

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #333;
  background: #fff;
  line-height: 1.6;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

/* ---------- Utility ---------- */
.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; }
.section-sm { padding: 48px 0; }
.text-center { text-align: center; }
.text-muted { color: #666; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mb-2 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 32px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; color: #1a1a1a; }
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1rem; }
p { color: #555; line-height: 1.75; }

.section-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2563eb;
  margin-bottom: 12px;
  display: block;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 4px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
  border: 2px solid transparent;
  text-align: center;
}
.btn:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-dark { background: #1a1a1a; color: #fff; }
.btn-outline { background: transparent; color: #1a1a1a; border-color: #1a1a1a; }
.btn-outline:hover { background: #1a1a1a; color: #fff; }
.btn-blue { background: #2563eb; color: #fff; }
.btn-lg { padding: 15px 36px; font-size: 1rem; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.site-logo img { height: 42px; width: auto; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.site-nav a {
  font-size: 0.95rem;
  font-weight: 500;
  color: #333;
  transition: color 0.2s;
}
.site-nav a:hover { color: #2563eb; }

.header-ctas {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #333;
  border-radius: 2px;
  transition: 0.3s;
}

/* ---------- Hero ---------- */
.hero {
  /* rtlcss swaps in the mirrored photo for RTL so the hero subject sits
     opposite the text instead of underneath it. */
  background: url('../assets/img/bg-rtl.jpg');
  min-height: 540px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  /* Light fade on the left so text is readable over the background photo */
  background: linear-gradient(to left, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.55) 45%, rgba(255,255,255,0) 75%);
  z-index: 1;
}

.hero::after { display: none; }

.hero-inner {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  max-width: 600px;
  margin: 0 7% 0 0;
  padding: 100px 24px;
}

.hero-content { max-width: 560px; }

.hero-content h1 { margin-bottom: 20px; line-height: 1.2; }

.hero-content p {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 32px;
  max-width: 480px;
}

.hero-image {
  position: relative;
  z-index: 2;
}

.hero-image img {
  width: 100%;
  border-radius: 4px;
  object-fit: cover;
}

/* ---------- About Section ---------- */
.about-section .two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.about-section img { border-radius: 8px; }

/* ---------- Feature Steps (3 badges on homepage) ---------- */
.steps-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.step-badge {
  border: 1px solid #e4e4e4;
  border-radius: 6px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
}

.step-badge .step-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #eef2ff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.step-badge .step-icon svg { width: 22px; height: 22px; color: #2563eb; }
.step-badge strong { display: block; font-size: 0.95rem; color: #1a1a1a; }
.step-badge span { font-size: 0.82rem; color: #777; }

/* ---------- Tech / Problems Section ---------- */
.tech-section {
  background: #f8f9fa;
}

.tech-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.problem-list { margin-top: 24px; }
.problem-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #e8e8e8;
}
.problem-item:last-child { border-bottom: none; }
.problem-item .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  margin-top: 8px;
  flex-shrink: 0;
}
.problem-item p { color: #555; margin: 0; }

.solution-list { margin-top: 24px; }
.solution-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
}
.solution-item .check {
  color: #16a34a;
  font-size: 1.2rem;
  margin-top: 2px;
  flex-shrink: 0;
}
.solution-item p { color: #333; margin: 0; font-weight: 500; }

/* ---------- Financial Commission Badge ---------- */
.fc-badge {
  background: #f8f9fa;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 40px 24px;
  text-align: center;
}
.fc-badge p { max-width: 720px; margin: 16px auto 0; font-size: 0.9rem; color: #666; }
.fc-badge img { max-height: 80px; margin: 0 auto 16px; }

/* ---------- Trusted Brokers Logos ---------- */
.brokers-section { padding: 50px 0; }
.brokers-section h2 { text-align: center; margin-bottom: 36px; }
.brokers-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 32px 48px;
}
.brokers-grid img {
  height: 36px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: 0.2s;
}
.brokers-grid img:hover { filter: grayscale(0); opacity: 1; }

/* ---------- Pricing Teaser Banner ---------- */
.pricing-banner {
  background: #1a1a1a;
  color: #fff;
  text-align: center;
  padding: 60px 24px;
}
.pricing-banner h2 { color: #fff; margin-bottom: 8px; }
.pricing-banner p { color: #ccc; margin-bottom: 28px; font-size: 1.05rem; }

/* ---------- Testimonials ---------- */
.testimonials-section { background: #f8f9fa; }
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 40px;
}
.testimonial-card {
  background: #fff;
  border-radius: 10px;
  padding: 28px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border: 1px solid #eee;
}
.testimonial-card p {
  font-size: 0.92rem;
  line-height: 1.7;
  color: #444;
  font-style: italic;
}
.testimonial-card .stars {
  color: #f59e0b;
  font-size: 1.1rem;
  margin-bottom: 14px;
  letter-spacing: 2px;
}

/* ---------- Page Hero (inner pages) ---------- */
.page-hero {
  background: linear-gradient(-135deg, #1a1a2e 0%, #16213e 100%);
  color: #fff;
  padding: 70px 24px;
  text-align: center;
}
.page-hero h1 { color: #fff; margin-bottom: 16px; }
.page-hero p { color: rgba(255,255,255,0.75); font-size: 1.1rem; max-width: 600px; margin: 0 auto; }

/* ---------- Features Page ---------- */
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 48px;
  align-items: center;
  margin-bottom: 60px;
}
.features-grid .feature-img img { border-radius: 8px; }
.feature-detail { padding: 8px 0; }
.feature-detail h3 { margin-bottom: 12px; font-size: 1.4rem; }
.feature-detail p { color: #555; }

.features-mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.mini-card {
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 24px;
  background: #fff;
  transition: box-shadow 0.2s;
}
.mini-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.mini-card .icon {
  width: 40px;
  height: 40px;
  background: #eef2ff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  font-size: 1.2rem;
}
.mini-card h4 { margin-bottom: 8px; font-size: 1rem; color: #1a1a1a; }
.mini-card p { font-size: 0.88rem; color: #666; margin: 0; }

.risk-section { background: #f8f9fa; }
.risk-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 36px;
}
.risk-card {
  background: #fff;
  border-radius: 8px;
  padding: 28px;
  border-right: 4px solid #2563eb;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.risk-card h4 { text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.05em; color: #2563eb; margin-bottom: 10px; }
.risk-card p { font-size: 0.92rem; color: #555; margin: 0; }

/* ---------- Pricing Page ---------- */
.pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 32px 0;
}
.toggle-label { font-weight: 600; color: #333; font-size: 0.95rem; }
.toggle-switch {
  position: relative;
  width: 52px;
  height: 28px;
  cursor: pointer;
}
.toggle-switch input { display: none; }
.toggle-track {
  position: absolute;
  inset: 0;
  background: #2563eb;
  border-radius: 14px;
  transition: 0.3s;
}
.toggle-thumb {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 50%;
  transition: 0.3s;
}
input:checked + .toggle-track { background: #1a1a1a; }
input:checked + .toggle-track + .toggle-thumb { right: 27px; }

.badge-save {
  background: #16a34a;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 16px;
}
.plan-card {
  border: 2px solid #e8e8e8;
  border-radius: 12px;
  padding: 28px 24px;
  position: relative;
  transition: box-shadow 0.2s, transform 0.2s;
  background: #fff;
}
.plan-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.1); transform: translateY(-2px); }
.plan-card.popular {
  border-color: #2563eb;
  box-shadow: 0 4px 24px rgba(37,99,235,0.15);
}
.popular-badge {
  position: absolute;
  top: -13px;
  right: 50%;
  transform: translateX(50%);
  background: #2563eb;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 20px;
  white-space: nowrap;
}
.plan-name { font-weight: 700; font-size: 1.05rem; color: #1a1a1a; margin-bottom: 6px; }
.plan-price { margin: 16px 0; }
.plan-price .amount { font-size: 2.4rem; font-weight: 800; color: #1a1a1a; line-height: 1; }
.plan-price .period { color: #777; font-size: 0.85rem; }
.plan-price .from { font-size: 0.8rem; color: #777; }
.plan-divider { border: none; border-top: 1px solid #eee; margin: 18px 0; }

.plan-features { margin-bottom: 24px; }
.plan-feature {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  font-size: 0.88rem;
  border-bottom: 1px solid #f5f5f5;
}
.plan-feature:last-child { border-bottom: none; }
.plan-feature .feat-label { color: #555; }
.plan-feature .feat-val { font-weight: 700; color: #1a1a1a; }
.check-yes { color: #16a34a; font-size: 1.1rem; }
.check-no { color: #d1d5db; font-size: 1.1rem; }

.plan-card .btn { width: 100%; margin-top: auto; }

.pricing-row-enterprise {
  border: 2px solid #e8e8e8;
  border-radius: 12px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  gap: 24px;
  flex-wrap: wrap;
}
.pricing-row-enterprise h3 { margin-bottom: 6px; }
.pricing-row-enterprise p { color: #555; margin: 0; font-size: 0.92rem; }

/* ---------- About Page ---------- */
.about-full p { margin-bottom: 16px; }
.infra-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 36px;
}
.infra-card {
  background: #fff;
  border-radius: 8px;
  padding: 24px 28px;
  border: 1px solid #e8e8e8;
}
.infra-card .infra-icon { font-size: 1.8rem; margin-bottom: 12px; }
.infra-card h4 { margin-bottom: 10px; font-size: 1rem; color: #1a1a1a; }
.infra-card p { font-size: 0.9rem; color: #555; margin: 0; }

/* ---------- Contact Page ---------- */
.contact-section .two-col {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: start;
}
.contact-info h3 { margin-bottom: 16px; }
.contact-info p { margin-bottom: 12px; font-size: 0.95rem; }

.contact-form {
  background: #f8f9fa;
  padding: 36px;
  border-radius: 12px;
}
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; color: #333; }
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  color: #333;
  background: #fff;
  transition: border-color 0.2s;
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.form-group textarea { min-height: 120px; resize: vertical; }

/* ---------- Footer ---------- */
.site-footer {
  background: #111;
  color: #aaa;
  padding: 60px 0 30px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-brand .logo-wrap img { height: 38px; filter: brightness(10); margin-bottom: 16px; }
.footer-brand p { font-size: 0.88rem; color: #777; line-height: 1.7; max-width: 280px; }
.footer-col h5 { color: #fff; font-size: 0.88rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; }
.footer-col a { display: block; font-size: 0.88rem; color: #777; padding: 4px 0; transition: color 0.2s; }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid #222;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: #666;
}

/* ---------- Stats Bar ---------- */
.stats-bar {
  background: #2563eb;
  color: #fff;
  padding: 32px 0;
}
.stats-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.stat-item .num { font-size: 2rem; font-weight: 800; display: block; }
.stat-item .lbl { font-size: 0.85rem; opacity: 0.85; }

/* ---------- CTA Band ---------- */
.cta-band {
  background: #f8f9fa;
  border-top: 1px solid #eee;
  text-align: center;
  padding: 60px 24px;
}
.cta-band h2 { margin-bottom: 12px; }
.cta-band p { color: #666; margin-bottom: 28px; font-size: 1rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero::after { display: none; }
  .hero-image { display: none; }
  .about-section .two-col,
  .tech-inner,
  .features-grid,
  .contact-section .two-col,
  .infra-grid { grid-template-columns: 1fr; }
  .features-mini-grid { grid-template-columns: 1fr 1fr; }
  .risk-grid { grid-template-columns: 1fr; }
  .steps-row { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
  .testimonials-grid { grid-template-columns: 1fr; }
  .stats-inner { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr; }
  .site-nav { display: none; }
  .nav-toggle { display: flex; }
  .site-nav.open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 70px;
    right: 0;
    left: 0;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 16px 24px;
    gap: 16px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  }
}

@media (max-width: 480px) {
  .features-mini-grid { grid-template-columns: 1fr; }
  .pricing-row-enterprise { flex-direction: column; align-items: flex-start; }
  .header-ctas .btn-outline { display: none; }
}

/* ===== Language picker (added for i18n build) ===== */
.lang-picker{position:relative;display:inline-block;}
.lang-picker-toggle{background:transparent;border:1px solid rgba(148,163,184,.35);border-radius:6px;color:inherit;cursor:pointer;font:inherit;padding:6px 12px;white-space:nowrap;}
.lang-picker-menu{display:none;position:absolute;top:calc(100% + 6px);inset-inline-end:0;background:#0d1b2e;border:1px solid #334155;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.35);min-width:180px;max-height:60vh;overflow-y:auto;z-index:1000;padding:6px 0;}
.lang-picker.open .lang-picker-menu{display:block;}
.lang-picker-menu a{display:block;padding:8px 16px;color:#cbd5e1;text-decoration:none;font-size:.9rem;}
.lang-picker-menu a:hover{background:rgba(37,99,235,.25);color:#fff;}
.lang-picker-menu a.active{color:#93c5fd;font-weight:600;}



/* ==========================================================
   Page styles: home
   ========================================================== */
/* ---- About image (circle is baked into the PNG itself) ---- */
        .about-img-wrap {
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .about-img-wrap img {
          max-height: 520px;
          width: auto;
        }

        /* ---- Revolutionary Tech Cards ---- */
        .rev-tech-section { background: #f8f9fa; padding: 70px 0; }
        .rev-tech-title { text-align: center; font-size: 2rem; font-weight: 700; margin-bottom: 40px; color: #1a1a1a; }
        .rev-tech-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1100px; margin: 0 auto; }
        .rev-card { background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.07); }
        .rev-card-header {
          background: #cce4f6;
          padding: 20px 28px;
          font-weight: 700;
          font-size: 0.95rem;
          color: #1a1a1a;
          line-height: 1.4;
          text-align: center;
        }
        .rev-card-body { padding: 24px 28px; }
        .rev-item {
          display: flex;
          align-items: center;
          gap: 18px;
          padding: 14px 0;
          border-bottom: 1px solid #f0f0f0;
          color: #555;
          font-size: 0.95rem;
        }
        .rev-item:last-child { border-bottom: none; }
        .rev-icon-x {
          width: 42px; height: 42px;
          border: 2px solid #1a1a1a;
          border-radius: 50%;
          display: flex; align-items: center; justify-content: center;
          font-size: 1rem; font-weight: 700;
          flex-shrink: 0; color: #1a1a1a;
        }
        .rev-icon-check {
          width: 42px; height: 42px;
          background: #1a1a1a;
          border-radius: 50%;
          display: flex; align-items: center; justify-content: center;
          flex-shrink: 0;
        }
        .rev-icon-check svg { width: 20px; height: 20px; }

        /* ---- 3 Badges below rev-tech ---- */
        .rev-badges {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 16px;
          max-width: 1100px;
          margin: 28px auto 0;
        }
        .rev-badge {
          border: 1px solid #e4e4e4;
          border-radius: 4px;
          padding: 14px 20px;
          display: flex;
          align-items: center;
          gap: 14px;
          background: #fff;
          font-weight: 700;
          font-size: 0.95rem;
          color: #1a1a1a;
        }
        .rev-badge-icon {
          width: 28px; height: 28px;
          background: #90caf9;
          border-radius: 50%;
          display: flex; align-items: center; justify-content: center;
          flex-shrink: 0;
        }
        .rev-badge-icon svg { width: 14px; height: 14px; }

        .rev-tech-ctas {
          display: flex; justify-content: center; gap: 16px;
          margin-top: 32px; flex-wrap: wrap;
        }

        /* ---- Financial Commission horizontal ---- */
        .fc-section { padding: 60px 0; background: #fff; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
        .fc-inner {
          display: flex;
          align-items: center;
          gap: 48px;
          max-width: 900px;
          margin: 0 auto;
          text-align: right;
        }
        .fc-logo-wrap { flex-shrink: 0; }
        .fc-logo-wrap img { height: 120px; width: auto; }
        .fc-text h3 { font-size: 1.4rem; margin-bottom: 12px; }
        .fc-text p { font-size: 0.9rem; color: #555; line-height: 1.7; }
        .fc-text a { color: #2563eb; text-decoration: underline; font-size: 0.9rem; }

        /* ---- Broker logos grid ---- */
        .brokers-section2 { padding: 60px 0; }
        .brokers-grid2 {
          display: grid;
          grid-template-columns: repeat(6, 1fr);
          gap: 12px;
          margin-bottom: 32px;
        }
        .broker-box {
          border: 1px solid #e8e8e8;
          border-radius: 4px;
          padding: 16px 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          min-height: 72px;
          background: #fff;
        }
        .broker-box img { max-height: 36px; max-width: 100%; object-fit: contain; }
        /* text-only broker logos */
        .broker-text {
          font-weight: 700;
          font-size: 0.85rem;
          letter-spacing: -0.02em;
          color: #1a1a1a;
          text-align: center;
          line-height: 1.2;
        }
        .broker-text.red { color: #e53e3e; }
        .broker-text.orange { color: #dd6b20; }
        .broker-text.blue { color: #2b6cb0; }
        .broker-text.green { color: #276749; }

        /* ---- Pricing teaser - LIGHT ---- */
        .pricing-teaser {
          background: #f5f5f5;
          text-align: center;
          padding: 70px 24px;
        }
        .pricing-teaser h2 { font-size: 2rem; margin-bottom: 10px; color: #1a1a1a; }
        .pricing-teaser p { color: #666; margin-bottom: 28px; font-size: 1rem; }
        .pricing-teaser .btn-teaser-outline {
          background: #fff;
          color: #1a1a1a;
          border: 2px solid #1a1a1a;
          padding: 12px 28px;
          border-radius: 4px;
          font-weight: 600;
          display: inline-block;
        }
        .pricing-teaser .btn-teaser-dark {
          background: #1a1a1a;
          color: #fff;
          border: 2px solid #1a1a1a;
          padding: 12px 28px;
          border-radius: 4px;
          font-weight: 600;
          display: inline-block;
        }

        /* ---- Testimonials - 4 col, quote marks ---- */
        .testimonials-section2 { padding: 70px 0; background: #fff; }
        .testimonials-section2 h2 { text-align: center; margin-bottom: 40px; font-size: 2rem; }
        .testimonials-grid2 {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 20px;
        }
        .testimonial-card2 {
          background: #f8f9fa;
          border-radius: 4px;
          padding: 28px 24px 24px;
          position: relative;
        }
        .quote-mark {
          font-size: 4rem;
          line-height: 1;
          color: #b8d4f0;
          font-family: Georgia, serif;
          display: block;
          margin-bottom: 8px;
        }
        .testimonial-card2 p {
          font-size: 0.88rem;
          color: #666;
          line-height: 1.7;
          font-style: italic;
        }

        /* ---- Footer ---- */
        .site-footer2 {
          background: #f5f5f5;
          border-top: 1px solid #e0e0e0;
          padding: 40px 0;
          color: #555;
        }
        .footer2-inner {
          display: grid;
          grid-template-columns: 1.5fr 1fr 1fr 1fr 1.2fr;
          gap: 40px;
          align-items: start;
        }
        .footer2-brand img { height: 42px; margin-bottom: 12px; }
        .footer2-brand p { font-size: 0.82rem; color: #777; }
        .footer2-col h5 { font-size: 0.85rem; font-weight: 700; color: #333; margin-bottom: 12px; }
        .footer2-col a { display: block; font-size: 0.85rem; color: #666; padding: 3px 0; }
        .footer2-col a:hover { color: #1a1a1a; }
        .footer2-fc img { max-height: 80px; width: auto; }

        @media (max-width: 1024px) {
          .rev-tech-cards { grid-template-columns: 1fr; }
          .rev-badges { grid-template-columns: 1fr; }
          .brokers-grid2 { grid-template-columns: repeat(3, 1fr); }
          .testimonials-grid2 { grid-template-columns: repeat(2, 1fr); }
          .footer2-inner { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 640px) {
          .fc-inner { flex-direction: column; text-align: center; }
          .brokers-grid2 { grid-template-columns: repeat(2, 1fr); }
          .testimonials-grid2 { grid-template-columns: 1fr; }
          .footer2-inner { grid-template-columns: 1fr; }
          .about-img-wrap::before { width: 280px; height: 280px; }
        }


/* ==========================================================
   Page styles: metatrader-copier
   ========================================================== */
/* ===== LANDING PAGE SPECIFIC STYLES ===== */

        /* Hero — tighter, keyword-led */
        .lp-hero {
          background: linear-gradient(-135deg, #0d1b2e 0%, #1a2e4a 100%);
          color: #fff;
          padding: 80px 0 60px;
          text-align: center;
        }
        .lp-hero h1 {
          font-size: 2.6rem;
          font-weight: 800;
          line-height: 1.2;
          max-width: 860px;
          margin: 0 auto 20px;
          color: #fff;
        }
        .lp-hero p.sub {
          font-size: 1.1rem;
          color: #a8c4e0;
          max-width: 640px;
          margin: 0 auto 32px;
          line-height: 1.7;
        }
        .lp-hero .cta-row {
          display: flex;
          justify-content: center;
          gap: 14px;
          flex-wrap: wrap;
        }
        .lp-hero .btn-white {
          background: #fff;
          color: #0d1b2e;
          padding: 14px 32px;
          border-radius: 6px;
          font-weight: 700;
          font-size: 1rem;
          display: inline-block;
          text-decoration: none;
        }
        .lp-hero .btn-outline-white {
          background: transparent;
          color: #fff;
          border: 2px solid rgba(255,255,255,0.4);
          padding: 12px 28px;
          border-radius: 6px;
          font-weight: 600;
          font-size: 1rem;
          display: inline-block;
          text-decoration: none;
        }
        .lp-hero .trust-line {
          margin-top: 24px;
          font-size: 0.82rem;
          color: #7ba3c8;
        }

        /* Platform badge strip */
        .platform-strip {
          background: #f8f9fa;
          border-top: 1px solid #e4e4e4;
          border-bottom: 1px solid #e4e4e4;
          padding: 20px 0;
        }
        .platform-strip-inner {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 12px;
          flex-wrap: wrap;
        }
        .platform-strip-inner span {
          font-size: 0.82rem;
          color: #888;
          margin-left: 8px;
          font-weight: 600;
          letter-spacing: 0.03em;
          text-transform: uppercase;
        }
        .platform-badge {
          background: #fff;
          border: 1px solid #ddd;
          border-radius: 6px;
          padding: 8px 20px;
          font-size: 0.88rem;
          font-weight: 700;
          color: #1a1a1a;
        }
        .platform-badge.active {
          background: #1a1a1a;
          color: #fff;
          border-color: #1a1a1a;
        }

        /* Stats bar */
        .stats-bar {
          background: #fff;
          border-bottom: 1px solid #eee;
          padding: 32px 0;
          color: #1a1a1a !important;
        }
        .stats-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 0;
          max-width: 900px;
          margin: 0 auto;
          text-align: center;
        }
        .stat-item {
          padding: 0 24px;
          border-left: 1px solid #eee;
        }
        .stat-item:last-child { border-left: none; }
        .stat-num {
          font-size: 2rem;
          font-weight: 800;
          color: #1a1a1a;
          line-height: 1;
          margin-bottom: 6px;
        }
        .stat-label {
          font-size: 0.82rem;
          color: #888;
        }

        /* Benefits 3-col */
        .benefits-section {
          padding: 70px 0;
          background: #fff;
        }
        .section-title {
          text-align: center;
          font-size: 2rem;
          font-weight: 700;
          color: #1a1a1a;
          margin-bottom: 12px;
        }
        .section-sub {
          text-align: center;
          color: #666;
          font-size: 1rem;
          margin-bottom: 48px;
        }
        .benefits-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 24px;
        }
        .benefit-card {
          background: #f8f9fa;
          border-radius: 8px;
          padding: 32px 28px;
        }
        .benefit-icon {
          width: 48px;
          height: 48px;
          background: #1a1a1a;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 20px;
        }
        .benefit-icon svg { width: 24px; height: 24px; }
        .benefit-card h3 {
          font-size: 1.05rem;
          font-weight: 700;
          color: #1a1a1a;
          margin-bottom: 10px;
        }
        .benefit-card p {
          font-size: 0.9rem;
          color: #666;
          line-height: 1.7;
        }

        /* Platform comparison */
        .compare-section {
          background: #f8f9fa;
          padding: 70px 0;
        }
        .compare-table {
          width: 100%;
          max-width: 900px;
          margin: 0 auto;
          border-collapse: collapse;
          background: #fff;
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 0 1px 4px rgba(0,0,0,0.08);
        }
        .compare-table th {
          padding: 16px 24px;
          font-size: 0.88rem;
          font-weight: 700;
          color: #555;
          text-align: center;
          border-bottom: 2px solid #eee;
        }
        .compare-table th:first-child { text-align: right; }
        .compare-table th.highlight {
          background: #1a1a1a;
          color: #fff;
        }
        .compare-table td {
          padding: 14px 24px;
          font-size: 0.88rem;
          color: #555;
          text-align: center;
          border-bottom: 1px solid #f0f0f0;
        }
        .compare-table td:first-child {
          text-align: right;
          font-weight: 600;
          color: #1a1a1a;
        }
        .compare-table td.highlight {
          background: #f5f9ff;
          font-weight: 700;
          color: #1a1a1a;
        }
        .compare-table tr:last-child td { border-bottom: none; }
        .tick { color: #22c55e; font-size: 1.1rem; }
        .cross { color: #e53e3e; font-size: 1rem; }
        .partial { color: #f59e0b; font-size: 0.82rem; font-weight: 600; }

        /* How it works */
        .how-section {
          padding: 70px 0;
          background: #fff;
        }
        .steps-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 24px;
          position: relative;
        }
        .step-card {
          text-align: center;
          padding: 24px 16px;
        }
        .step-num {
          width: 48px;
          height: 48px;
          background: #1a1a1a;
          color: #fff;
          border-radius: 50%;
          font-size: 1.2rem;
          font-weight: 800;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 16px;
        }
        .step-card h3 {
          font-size: 0.95rem;
          font-weight: 700;
          color: #1a1a1a;
          margin-bottom: 8px;
        }
        .step-card p {
          font-size: 0.85rem;
          color: #777;
          line-height: 1.6;
        }

        /* Testimonials */
        .testimonials-lp {
          background: #f8f9fa;
          padding: 70px 0;
        }
        .testi-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 20px;
        }
        .testi-card {
          background: #fff;
          border-radius: 8px;
          padding: 28px 24px;
          box-shadow: 0 1px 4px rgba(0,0,0,0.06);
        }
        .quote-mark {
          font-size: 3.5rem;
          line-height: 1;
          color: #b8d4f0;
          font-family: Georgia, serif;
          display: block;
          margin-bottom: 8px;
        }
        .testi-card p {
          font-size: 0.88rem;
          color: #555;
          line-height: 1.7;
          font-style: italic;
        }
        .testi-author {
          margin-top: 16px;
          font-size: 0.82rem;
          font-weight: 700;
          color: #1a1a1a;
          font-style: normal;
        }

        /* Pricing strip */
        .pricing-strip {
          background: #1a1a1a;
          color: #fff;
          padding: 60px 0;
          text-align: center;
        }
        .pricing-strip h2 {
          font-size: 2rem;
          font-weight: 700;
          color: #fff;
          margin-bottom: 12px;
        }
        .pricing-strip p {
          color: #aaa;
          font-size: 1rem;
          margin-bottom: 32px;
        }
        .pricing-cards-mini {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 16px;
          max-width: 820px;
          margin: 0 auto 36px;
        }
        .price-mini {
          background: rgba(255,255,255,0.06);
          border: 1px solid rgba(255,255,255,0.12);
          border-radius: 8px;
          padding: 24px 20px;
        }
        .price-mini h4 {
          font-size: 0.85rem;
          font-weight: 700;
          color: #7ba3c8;
          margin-bottom: 8px;
          text-transform: uppercase;
          letter-spacing: 0.06em;
        }
        .price-mini .amount {
          font-size: 1.6rem;
          font-weight: 800;
          color: #fff;
          line-height: 1;
          margin-bottom: 6px;
        }
        .price-mini .desc {
          font-size: 0.78rem;
          color: #888;
        }
        .btn-white-outline {
          background: transparent;
          color: #fff;
          border: 2px solid rgba(255,255,255,0.5);
          padding: 12px 32px;
          border-radius: 6px;
          font-weight: 600;
          font-size: 0.95rem;
          display: inline-block;
          text-decoration: none;
          margin: 0 8px;
        }
        .btn-white-solid {
          background: #fff;
          color: #1a1a1a;
          border: 2px solid #fff;
          padding: 12px 32px;
          border-radius: 6px;
          font-weight: 700;
          font-size: 0.95rem;
          display: inline-block;
          text-decoration: none;
          margin: 0 8px;
        }

        /* FAQ */
        .faq-lp {
          padding: 70px 0;
          background: #fff;
        }

        /* Responsive */
        @media (max-width: 1024px) {
          .benefits-grid { grid-template-columns: repeat(2, 1fr); }
          .steps-grid { grid-template-columns: repeat(2, 1fr); }
          .pricing-cards-mini { grid-template-columns: 1fr; max-width: 360px; }
        }
        @media (max-width: 768px) {
          .lp-hero h1 { font-size: 1.9rem; }
          .stats-grid { grid-template-columns: repeat(2, 1fr); }
          .stat-item { border-left: none; border-bottom: 1px solid #eee; padding: 16px 0; }
          .stat-item:last-child { border-bottom: none; }
          .testi-grid { grid-template-columns: 1fr; }
          .compare-table { font-size: 0.82rem; }
          .compare-table th, .compare-table td { padding: 10px 14px; }
        }
        @media (max-width: 640px) {
          .benefits-grid { grid-template-columns: 1fr; }
          .steps-grid { grid-template-columns: 1fr; }
        }


/* ==========================================================
   Page styles: pricing
   ========================================================== */
.pricing-hero {
            background: #1a1a1a;
            color: #fff;
            text-align: center;
            padding: 60px 24px 50px;
        }
        .pricing-hero h1 { font-size: 2.4rem; margin-bottom: 12px; color: #fff; }
        .pricing-hero p { font-size: 1.05rem; color: #aaa; max-width: 520px; margin: 0 auto; }

        .plans-section { padding: 60px 0 40px; background: #f8f9fa; }

        .plans-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 24px;
            max-width: 1060px;
            margin: 0 auto;
        }

        .plan-card-v2 {
            background: #fff;
            border: 1px solid #e4e4e4;
            border-radius: 8px;
            padding: 36px 28px 28px;
            position: relative;
            display: flex;
            flex-direction: column;
        }
        .plan-card-v2.plan-pro {
            border: 2px solid #1a1a1a;
        }
        .plan-badge {
            position: absolute;
            top: -13px;
            right: 50%;
            transform: translateX(50%);
            background: #1a1a1a;
            color: #fff;
            font-size: 0.72rem;
            font-weight: 700;
            letter-spacing: 0.08em;
            padding: 4px 14px;
            border-radius: 20px;
            white-space: nowrap;
        }
        .plan-name-v2 {
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            color: #888;
            text-transform: uppercase;
            margin-bottom: 16px;
        }
        .plan-price-v2 { margin-bottom: 6px; }
        .plan-price-v2 .amount {
            font-size: 3rem;
            font-weight: 800;
            color: #1a1a1a;
            line-height: 1;
        }
        .plan-price-v2 .currency {
            font-size: 1.4rem;
            font-weight: 700;
            color: #1a1a1a;
            vertical-align: top;
            margin-top: 8px;
            display: inline-block;
        }
        .plan-price-v2 .period {
            font-size: 0.9rem;
            color: #888;
            margin-right: 4px;
        }
        .plan-subprice {
            font-size: 0.85rem;
            color: #555;
            margin-bottom: 8px;
            line-height: 1.6;
            min-height: 40px;
        }
        .plan-tag {
            display: inline-block;
            font-size: 0.78rem;
            font-weight: 700;
            padding: 4px 10px;
            border-radius: 4px;
            margin-bottom: 24px;
        }
        .tag-trial { background: #d9f0e4; color: #1a6b3c; }
        .tag-flexible { background: #e8f0fe; color: #1a55a0; }
        .tag-pro { background: #f0f0f0; color: #555; }

        .plan-divider-v2 {
            border: none;
            border-top: 1px solid #eee;
            margin: 0 0 20px;
        }
        .plan-features-v2 {
            flex: 1;
            margin-bottom: 28px;
        }
        .feat-row {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 7px 0;
            font-size: 0.88rem;
            color: #444;
            border-bottom: 1px solid #f5f5f5;
        }
        .feat-row:last-child { border-bottom: none; }
        .feat-check {
            width: 18px; height: 18px;
            background: #1a1a1a;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; margin-top: 1px;
        }
        .feat-check svg { width: 10px; height: 10px; }
        .feat-exclusive {
            width: 18px; height: 18px;
            background: #2563eb;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0; margin-top: 1px;
        }
        .feat-exclusive svg { width: 10px; height: 10px; }
        .feat-label-v2 { line-height: 1.4; }
        .feat-label-v2 .excl-tag {
            font-size: 0.7rem;
            font-weight: 700;
            color: #2563eb;
            letter-spacing: 0.05em;
            margin-right: 6px;
        }

        .plan-cta { margin-top: auto; }
        .btn-plan-outline {
            display: block; width: 100%; text-align: center;
            padding: 14px; border: 2px solid #1a1a1a; border-radius: 4px;
            font-weight: 700; font-size: 0.95rem; color: #1a1a1a; background: #fff;
            text-decoration: none;
        }
        .btn-plan-outline:hover { background: #1a1a1a; color: #fff; }
        .btn-plan-dark {
            display: block; width: 100%; text-align: center;
            padding: 14px; border: 2px solid #1a1a1a; border-radius: 4px;
            font-weight: 700; font-size: 0.95rem; color: #fff; background: #1a1a1a;
            text-decoration: none;
        }
        .btn-plan-dark:hover { background: #333; }

        /* Wholesale strip */
        .wholesale-strip {
            max-width: 1060px;
            margin: 28px auto 0;
            background: #fff;
            border: 1px solid #e4e4e4;
            border-radius: 8px;
            padding: 22px 32px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }
        .wholesale-strip p {
            font-size: 0.92rem;
            color: #555;
            margin: 0;
        }
        .wholesale-strip p strong { color: #1a1a1a; }

        /* Comparison table */
        .compare-section { padding: 60px 0; background: #fff; }
        .compare-table {
            width: 100%; max-width: 1060px;
            margin: 0 auto; border-collapse: collapse;
        }
        .compare-table th {
            padding: 14px 20px; text-align: right;
            font-size: 0.82rem; font-weight: 700;
            letter-spacing: 0.08em; text-transform: uppercase;
            color: #888; border-bottom: 2px solid #eee;
        }
        .compare-table th:not(:first-child) { text-align: center; }
        .compare-table td {
            padding: 13px 20px; font-size: 0.9rem;
            color: #444; border-bottom: 1px solid #f0f0f0;
        }
        .compare-table td:not(:first-child) { text-align: center; }
        .compare-table tr:last-child td { border-bottom: none; }
        .compare-table .section-row td {
            background: #f8f9fa; font-weight: 700;
            font-size: 0.78rem; letter-spacing: 0.06em;
            text-transform: uppercase; color: #888; padding: 10px 20px;
        }
        .tick { color: #1a6b3c; font-size: 1.1rem; font-weight: 700; }
        .dash { color: #ccc; }
        .excl { color: #2563eb; font-size: 1.1rem; font-weight: 700; }

        /* FAQ */
        .faq-section { padding: 60px 0; background: #f8f9fa; }

        @media (max-width: 860px) {
            .plans-grid { grid-template-columns: 1fr; max-width: 440px; }
            .wholesale-strip { flex-direction: column; text-align: center; }
        }


/* ==========================================================
   Page styles: privacy-policy
   ========================================================== */
.legal-hero { background: #0d1b2e; color: #fff; padding: 64px 0 48px; text-align: center; }
        .legal-hero h1 { font-size: 2.2rem; font-weight: 700; margin: 0 0 12px; }
        .legal-hero p  { color: #94a3b8; font-size: 0.95rem; margin: 0; }
        .legal-body    { max-width: 820px; margin: 0 auto; padding: 56px 24px 80px; }
        .legal-body h2 { font-size: 1.15rem; font-weight: 700; color: #0d1b2e; margin: 2.2em 0 0.6em; }
        .legal-body p  { color: #374151; line-height: 1.75; margin: 0 0 1em; }
        .legal-body ul { color: #374151; line-height: 1.75; margin: 0 0 1em; padding-right: 1.5em; }
        .legal-body ul li { margin-bottom: 0.4em; }
        .legal-body a  { color: #1e40af; }


/* ==========================================================
   Page styles: terms-and-conditions
   ========================================================== */
.legal-hero { background: #0d1b2e; color: #fff; padding: 64px 0 48px; text-align: center; }
        .legal-hero h1 { font-size: 2.2rem; font-weight: 700; margin: 0 0 12px; }
        .legal-hero p  { color: #94a3b8; font-size: 0.95rem; margin: 0; }
        .legal-body    { max-width: 820px; margin: 0 auto; padding: 56px 24px 80px; }
        .legal-body h2 { font-size: 1.15rem; font-weight: 700; color: #0d1b2e; margin: 2.2em 0 0.6em; }
        .legal-body h3 { font-size: 1rem; font-weight: 600; color: #0d1b2e; margin: 1.4em 0 0.4em; }
        .legal-body p  { color: #374151; line-height: 1.75; margin: 0 0 1em; }
        .legal-body ul { color: #374151; line-height: 1.75; margin: 0 0 1em; padding-right: 1.5em; }
        .legal-body ul li { margin-bottom: 0.4em; }
        .legal-body a  { color: #1e40af; }


/* ==========================================================
   Page styles: wholesale
   ========================================================== */
/* ── Wholesale page specific styles ── */
        .wholesale-hero {
          background: linear-gradient(-135deg, #0f172a 0%, #1e3a5f 100%);
          color: #fff;
          padding: 80px 0 72px;
        }
        .wholesale-hero .container {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 64px;
          align-items: center;
        }
        .hero-left h1 {
          font-size: clamp(1.9rem, 4vw, 2.8rem);
          font-weight: 800;
          color: #fff;
          line-height: 1.2;
          margin-bottom: 20px;
        }
        .hero-left h1 span {
          color: #60a5fa;
        }
        .hero-left p {
          font-size: 1.05rem;
          color: #94a3b8;
          line-height: 1.75;
          margin-bottom: 0;
        }
        .hero-stats {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 16px;
        }
        .stat-card {
          background: rgba(255,255,255,0.06);
          border: 1px solid rgba(255,255,255,0.1);
          border-radius: 12px;
          padding: 20px 22px;
        }
        .stat-card .number {
          font-size: 2rem;
          font-weight: 800;
          color: #60a5fa;
          line-height: 1;
          margin-bottom: 6px;
        }
        .stat-card .label {
          font-size: 0.85rem;
          color: #94a3b8;
          line-height: 1.4;
        }

        .proof-strip {
          background: #f8fafc;
          border-bottom: 1px solid #e2e8f0;
          padding: 56px 0;
        }
        .proof-strip h2 {
          text-align: center;
          font-size: 1.35rem;
          font-weight: 700;
          color: #0f172a;
          margin-bottom: 36px;
        }
        .proof-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 24px;
        }
        .proof-item {
          background: #fff;
          border: 1px solid #e2e8f0;
          border-radius: 12px;
          padding: 24px 26px;
        }
        .proof-item .proof-icon {
          font-size: 1.5rem;
          margin-bottom: 12px;
        }
        .proof-item h4 {
          font-size: 0.95rem;
          font-weight: 700;
          color: #0f172a;
          margin: 0 0 8px;
        }
        .proof-item p {
          font-size: 0.875rem;
          color: #475569;
          line-height: 1.6;
          margin: 0;
        }

        .wholesale-form-section {
          padding: 72px 0 80px;
        }
        .wholesale-layout {
          display: grid;
          grid-template-columns: 1fr 1.1fr;
          gap: 64px;
          align-items: start;
        }
        .why-wholesale h2 {
          font-size: 1.5rem;
          font-weight: 700;
          color: #0f172a;
          margin-bottom: 16px;
        }
        .why-wholesale p {
          font-size: 0.95rem;
          color: #475569;
          line-height: 1.75;
          margin-bottom: 20px;
        }
        .pricing-tiers {
          background: #f0f7ff;
          border: 1px solid #bfdbfe;
          border-radius: 12px;
          padding: 24px 26px;
          margin-top: 32px;
        }
        .pricing-tiers h4 {
          font-size: 0.82rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.06em;
          color: #2563eb;
          margin: 0 0 16px;
        }
        .tier-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 0;
          border-bottom: 1px solid #dbeafe;
          font-size: 0.9rem;
        }
        .tier-row:last-child { border-bottom: none; }
        .tier-row .accounts { color: #0f172a; font-weight: 600; }
        .tier-row .rate { color: #2563eb; font-weight: 700; }
        .tier-note {
          font-size: 0.8rem;
          color: #64748b;
          margin-top: 12px;
        }

        .form-card {
          background: #fff;
          border: 1px solid #e2e8f0;
          border-radius: 16px;
          padding: 36px;
          box-shadow: 0 4px 24px rgba(0,0,0,0.06);
        }
        .form-card h3 {
          font-size: 1.25rem;
          font-weight: 700;
          color: #0f172a;
          margin-bottom: 6px;
        }
        .form-card .subhead {
          font-size: 0.88rem;
          color: #64748b;
          margin-bottom: 28px;
        }
        .form-group {
          margin-bottom: 18px;
        }
        .form-group label {
          display: block;
          font-size: 0.85rem;
          font-weight: 600;
          color: #374151;
          margin-bottom: 6px;
        }
        .form-group input,
        .form-group textarea {
          width: 100%;
          box-sizing: border-box;
          padding: 11px 14px;
          border: 1.5px solid #d1d5db;
          border-radius: 8px;
          font-size: 0.93rem;
          color: #1a1a1a;
          background: #fff;
          transition: border-color 0.15s;
        }
        .form-group input:focus,
        .form-group textarea:focus {
          outline: none;
          border-color: #2563eb;
        }
        .form-group textarea {
          min-height: 110px;
          resize: vertical;
        }
        .form-row {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 14px;
        }
        .accounts-hint {
          font-size: 0.8rem;
          color: #6b7280;
          margin-top: 5px;
        }
        .submit-btn {
          width: 100%;
          padding: 14px;
          background: #2563eb;
          color: #fff;
          border: none;
          border-radius: 8px;
          font-size: 1rem;
          font-weight: 600;
          cursor: pointer;
          transition: background 0.15s;
          margin-top: 6px;
        }
        .submit-btn:hover { background: #1d4ed8; }
        .submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
        .trust-note {
          text-align: center;
          font-size: 0.8rem;
          color: #94a3b8;
          margin-top: 14px;
        }

        @media (max-width: 900px) {
          .wholesale-hero .container { grid-template-columns: 1fr; gap: 40px; }
          .proof-grid { grid-template-columns: 1fr; }
          .wholesale-layout { grid-template-columns: 1fr; gap: 40px; }
        }
        @media (max-width: 560px) {
          .form-row { grid-template-columns: 1fr; }
          .hero-stats { grid-template-columns: 1fr 1fr; }
        }


/* ==========================================================
   Page styles: thank-you
   ========================================================== */
.thankyou-section { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: 80px 20px; }
        .thankyou-card { max-width: 560px; text-align: center; }
        .thankyou-icon { width: 72px; height: 72px; background: #dcfce7; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 28px; }
        .thankyou-icon svg { width: 36px; height: 36px; stroke: #16a34a; }
        .thankyou-card h1 { font-size: 2rem; font-weight: 700; margin-bottom: 16px; color: #1a1a1a; }
        .thankyou-card p { font-size: 1.05rem; color: #555; line-height: 1.7; margin-bottom: 12px; }
        .thankyou-card .btn-row { margin-top: 36px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }


/* ==========================================================
   Pre-publish banner — pages not yet cleared to go live
   ========================================================== */
.prepublish-banner {
  background: #7f1d1d;
  color: #fff;
  padding: 22px 0;
  border-bottom: 4px solid #fbbf24;
}
.prepublish-title {
  margin: 0 0 8px;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.prepublish-lede { margin: 0 0 12px; font-size: 0.95rem; color: #fecaca; }
.prepublish-items { margin: 0 0 14px; padding-inline-start: 20px; }
.prepublish-items li { font-size: 0.9rem; color: #fff; margin-bottom: 6px; line-height: 1.5; }
.prepublish-how { margin: 0; font-size: 0.82rem; color: #fca5a5; line-height: 1.6; }
.prepublish-how code {
  background: rgba(0,0,0,.28);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.95em;
}
/* Inline marker left in body copy where an item is still unverified. */
.marker-product,
.marker-counsel {
  display: inline-block;
  background: #fef3c7;
  border: 1px solid #d97706;
  color: #7c2d12;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  margin-inline-start: 6px;
  vertical-align: middle;
}

/* ==========================================================
   Shared layout for the three new marketing pages
   ========================================================== */
.page-hero {
  background: #0d1b2e;
  color: #fff;
  padding: 72px 24px 64px;
  text-align: center;
}
.page-hero h1 {
  font-size: 2.5rem;
  line-height: 1.18;
  margin: 0 auto 18px;
  max-width: 900px;
  color: #fff;
}
.page-hero .lede { font-size: 1.08rem; color: #cbd5e1; max-width: 760px; margin: 0 auto 14px; line-height: 1.65; }
.page-hero .lede strong { color: #fff; }
.page-hero .hero-ctas { margin-top: 28px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.page-section { padding: 64px 0; }
.page-section:nth-of-type(even) { background: #f8f9fa; }
.page-section h2 {
  font-size: 1.85rem;
  margin: 0 0 14px;
  color: #1a1a1a;
}
.page-section > .container > p,
.section-intro { font-size: 1.02rem; color: #555; line-height: 1.7; max-width: 820px; }
.page-section h3 { font-size: 1.15rem; margin: 30px 0 8px; color: #1a1a1a; }

.diagram {
  display: block;
  width: 100%;
  max-width: 980px;
  margin: 32px auto;
  height: auto;
}

/* numbered step cards */
.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  margin-top: 30px;
}
.step-card {
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  padding: 24px;
}
.step-card .step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0d1b2e;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 12px;
}
/* Name collision with the original site's `.steps-grid > .step-card`, which
   centres its text. The new pages' cards hold a sentence or two of body copy,
   which reads as accidental when centred, so scope it back to start here. The
   original homepage/MT4 steps are untouched. */
.step-grid .step-card { text-align: start; }

/* A data table, not a tick/cross comparison: only the numeric columns want
   centring. The last column carries prose and stays flush left. */
.compare-table.data-table td:last-child,
.compare-table.data-table th:last-child { text-align: start; }
.step-grid .step-card .step-n { margin-inline-end: auto; }
.step-card h3 { margin: 0 0 8px; font-size: 1.05rem; }
.step-card p { margin: 0; font-size: 0.93rem; color: #555; line-height: 1.6; }

/* feature list with a leading rule */
.rule-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 18px; }
.rule-list > li {
  border-inline-start: 3px solid #2563eb;
  padding-inline-start: 18px;
}
.rule-list > li strong { display: block; font-size: 1.02rem; color: #1a1a1a; margin-bottom: 5px; }
.rule-list > li span { font-size: 0.95rem; color: #555; line-height: 1.65; }

/* worked-example timeline */
.timeline { list-style: none; padding: 0; margin: 28px 0 0; }
.timeline > li {
  position: relative;
  padding-inline-start: 30px;
  padding-bottom: 26px;
  border-inline-start: 2px solid #e2e8f0;
}
.timeline > li:last-child { border-inline-start-color: transparent; padding-bottom: 0; }
.timeline > li::before {
  content: "";
  position: absolute;
  inset-inline-start: -7px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2563eb;
  border: 2px solid #fff;
}
.timeline .day { display: block; font-weight: 700; color: #1a1a1a; margin-bottom: 4px; }
.timeline p { margin: 0; font-size: 0.95rem; color: #555; line-height: 1.65; }

/* FAQ (details/summary) */
.faq-list { margin-top: 26px; max-width: 860px; }
.faq-list details {
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  background: #fff;
  margin-bottom: 12px;
}
.faq-list summary {
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 600;
  color: #1a1a1a;
  font-size: 1rem;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::before { content: "▸ "; color: #2563eb; font-weight: 700; }
.faq-list details[open] summary::before { content: "▾ "; }
.faq-list .faq-a { padding: 0 20px 18px; margin: 0; font-size: 0.95rem; color: #555; line-height: 1.7; }

/* granularity columns */
.gran-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; margin-top: 28px; }
.gran-grid h3 { margin-top: 0; }
.gran-grid ul { padding-inline-start: 18px; margin: 0; }
.gran-grid li { font-size: 0.93rem; color: #555; line-height: 1.6; margin-bottom: 8px; }

/* audience list */
.audience-list { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 16px; }
.audience-list li {
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  padding: 18px 22px;
  font-size: 0.95rem;
  color: #555;
  line-height: 1.65;
}
.audience-list li strong { color: #1a1a1a; }

/* closing CTA band for the new pages */
.page-cta { background: #0d1b2e; color: #fff; padding: 60px 24px; text-align: center; }
.page-cta h2 { color: #fff; font-size: 1.9rem; margin: 0 auto 14px; max-width: 800px; }
.page-cta p { color: #cbd5e1; max-width: 700px; margin: 0 auto 26px; line-height: 1.65; }
.page-cta .hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 760px) {
  .page-hero h1 { font-size: 1.85rem; }
  .page-section { padding: 44px 0; }
  .page-section h2 { font-size: 1.45rem; }
}

/* ==========================================================
   Homepage: platform pages strip
   ========================================================== */
.platform-strip { padding: 64px 0; background: #fff; }
.platform-strip h2 { font-size: 1.85rem; margin: 0 0 28px; color: #1a1a1a; text-align: center; }
.platform-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.platform-card {
  display: block;
  text-decoration: none;
  background: #f8f9fa;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  padding: 26px 24px;
  transition: border-color .15s, transform .15s;
}
.platform-card:hover { border-color: #2563eb; transform: translateY(-2px); }
.platform-card h3 { margin: 0 0 10px; font-size: 1.1rem; color: #1a1a1a; }
.platform-card p { margin: 0 0 14px; font-size: 0.93rem; color: #555; line-height: 1.6; }
.platform-more { font-size: 0.88rem; font-weight: 600; color: #2563eb; }

/* Outline buttons sit on dark surfaces in the new page heroes and CTA bands —
   the default dark-on-transparent variant renders invisible there. */
.page-hero .btn-outline,
.page-cta .btn-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
  background: transparent;
}
.page-hero .btn-outline:hover,
.page-cta .btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}

/* ==========================================================
   Line-art icons (Components/Shared/Icon.razor)
   ========================================================== */
.ico { display: inline-block; vertical-align: middle; flex: none; }
/* The emoji these replaced carried their own colour; the SVGs inherit it. */
.infra-icon, .features-mini-grid .icon, .proof-icon { color: #2563eb; }
.infra-icon .ico, .features-mini-grid .icon .ico, .proof-icon .ico { display: block; }
.lang-picker-toggle { display: inline-flex; align-items: center; gap: 6px; }

/* ==========================================================
   Features page: real diagrams in place of the tinted
   placeholder blocks, and a direction-safe reversed row
   ========================================================== */
.feature-diagram {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
/* The two secondary rows keep an icon tile rather than a diagram. */
.feature-img-tint {
  background: #f8f9fa;
  border: 1px solid #e4e4e4;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
/* Alternating rows previously used `direction: rtl` as a layout trick, which
   fought the document direction on the Arabic build. Grid line numbers already
   follow the writing mode, so assigning columns mirrors correctly by itself. */
.features-grid-reverse > *:first-child { grid-column: 2; grid-row: 1; }
.features-grid-reverse > *:last-child  { grid-column: 1; grid-row: 1; }

@media (max-width: 900px) {
  /* single column — clear the explicit placement so DOM order wins */
  .features-grid-reverse > *:first-child,
  .features-grid-reverse > *:last-child { grid-column: auto; grid-row: auto; }
}

/* Consecutive prose paragraphs in these sections had no separation, so two
   distinct paragraphs read as one run-on block. */
.page-section > .container > p,
.page-section > .container > .section-intro { margin-bottom: 16px; }
.page-section > .container > p:last-of-type { margin-bottom: 0; }

/* ==========================================================
   New pages: the text column IS the container
   --------------------------------------------------------
   First attempt set a max-width on each prose element inside
   the site's standard 1180px container. That made every text
   block agree, but left the column pinned to the container's
   left edge with ~360px of dead space to its right — and on a
   2390px monitor the whole thing read as a thin ribbon sitting
   off-centre.

   The rest of the site never runs prose full-width either: it
   keeps lines to 540–780px by pairing text with a second
   column. These pages are single-column, so the equivalent is
   to narrow the container itself. Everything then fills it and
   aligns on both edges, and the container centres on screen so
   the whitespace is symmetric at any width.

   Genuinely wide content — diagrams, card grids, data tables —
   breaks back out to the site's normal 1180px measure.
   ========================================================== */
.page-section > .container {
  max-width: 780px;
}

.page-section > .container > .diagram,
.page-section > .container > .step-grid,
.page-section > .container > .gran-grid,
.page-section > .container > table,
.page-section > .container > .table-wrap {
  /* centre a wider block inside the narrower text column */
  width: min(1180px, calc(100vw - 48px));
  margin-inline-start: calc(50% - min(1180px, 100vw - 48px) / 2);
  max-width: none;
}

/* Text inside a broken-out block follows its own column. */
.gran-grid p, .gran-grid li, .step-card p, .step-card h3 { max-width: none; }

/* A data table can't shrink below its content, so on narrow screens it scrolls
   inside its own wrapper rather than pushing the page sideways. */
.page-section > .container > .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.page-section > .container > .table-wrap > table { width: 100%; min-width: 560px; }

/* Below the point where there is room to break out, wide blocks simply fill the
   text column. This also sidesteps `100vw` including the vertical scrollbar,
   which otherwise pushes the page sideways by the scrollbar's width on narrow
   screens. */
@media (max-width: 1023px) {
  .page-section > .container > .diagram,
  .page-section > .container > .step-grid,
  .page-section > .container > .gran-grid,
  .page-section > .container > table,
  .page-section > .container > .table-wrap {
    width: 100%;
    margin-inline-start: 0;
  }
}

/* ==========================================================
   Pre-existing: header overflowed below ~390px
   --------------------------------------------------------
   At 480px the Login button is already hidden, but "Start Free
   Trial" at its full padding still pushed the header past the
   viewport on a 360px phone — every page scrolled sideways,
   including the original static site. Shrink the remaining
   button rather than hiding the site's primary CTA.
   ========================================================== */
@media (max-width: 400px) {
  .header-inner { gap: 8px; }
  .header-ctas .btn { padding: 9px 12px; font-size: 0.8rem; white-space: nowrap; }
  .site-logo img { max-width: 130px; height: auto; }
}

/* ==========================================================
   Pre-existing mobile overflow on the original pages
   --------------------------------------------------------
   Three pages pushed the viewport sideways on a phone, on the
   original static site as well as here:
     • /pricing and /metatrader-copier — the feature comparison
       tables are wider than a phone and had nowhere to go.
     • /contact — the form's 36px padding plus fixed-width
       controls exceeded the viewport.
   Tables now scroll within themselves; the form's padding
   relaxes. Neither changes any copy.
   ========================================================== */
@media (max-width: 720px) {
  .compare-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .contact-form { padding: 22px 18px; }
  .contact-form input,
  .contact-form select,
  .contact-form textarea { max-width: 100%; box-sizing: border-box; }
}
@media (max-width: 420px) {
  .contact-form { padding: 18px 14px; }
}

/* The first/last-name pair on the contact form. Was an inline grid, which
   outranked the mobile breakpoint and could not collapse. */
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .form-row-2 { grid-template-columns: 1fr; } }

/* Wholesale hero at very narrow widths (≤340px): the two-column container has a
   fixed 60px gap that, with padding, exceeds the viewport once the columns
   stack. Tighten both so nothing spills. Pre-existing on the original site. */
@media (max-width: 360px) {
  .wholesale-hero .container { gap: 24px; padding-right: 16px; padding-left: 16px; }
  .hero-stats { gap: 10px; }
  .stat-card { padding: 14px 12px; }
}

/* ==========================================================
   Justified body copy
   ----------------------------------------------------------
   Flush on both edges reads as more considered on a wide
   measure. Two things stop it looking ragged: hyphens:auto,
   so the browser breaks a long word rather than opening a
   river of white space across the line, and text-wrap:pretty
   as a hint against a stranded last line.

   Deliberately NOT justified:
     • anything centred (page heroes, CTA bands, .text-center)
       — justification is a no-op there and only fights the
       centring;
     • narrow columns and cards (step cards, granularity
       columns, mini/risk/infra/benefit cards, table cells) —
       under roughly 45 characters a line there is too little
       slack per line, so every line shows gaps;
     • Thai, which has no inter-word spaces. The browser finds
       almost nowhere to stretch and dumps the whole slack into
       the handful of spaces it does find.

   Below 760px the measure is too short for justification to
   help, so it reverts to ragged-right there as well.
   ========================================================== */
.page-section > .container > p,
.section-intro,
.rule-list > li span,
.timeline p,
.audience-list li,
.faq-list .faq-a,
.legal-body p,
.legal-body ul li,
.about-full p,
.feature-detail p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
  text-wrap: pretty;
}

/* Centring always wins over justification. */
.page-hero .lede,
.page-cta p,
.text-center,
.page-section > .container > p.text-center,
.section-intro.text-center { text-align: center; }

/* A paragraph that only wraps a button is not prose. */
.page-section > .container > p:has(> .btn) { text-align: start; }

/* Thai: no inter-word spaces, so justification has nowhere to go. */
:lang(th) .page-section > .container > p,
:lang(th) .section-intro,
:lang(th) .rule-list > li span,
:lang(th) .timeline p,
:lang(th) .audience-list li,
:lang(th) .faq-list .faq-a,
:lang(th) .legal-body p,
:lang(th) .legal-body ul li,
:lang(th) .about-full p,
:lang(th) .feature-detail p { text-align: start; hyphens: manual; }

@media (max-width: 760px) {
  .page-section > .container > p,
  .section-intro,
  .rule-list > li span,
  .timeline p,
  .audience-list li,
  .faq-list .faq-a,
  .legal-body p,
  .legal-body ul li,
  .about-full p,
  .feature-detail p { text-align: start; }
}

/* ==========================================================
   Long-word safety for the translated pages
   ----------------------------------------------------------
   Found by crawling all 13 pages × 15 languages at 390px:
   German compounds and the longer Russian CTA label pushed
   the viewport sideways on pages that are clean in English.
   Three causes, three fixes.

   1. An unbreakable word wider than its box. Headings and
      body copy may now break mid-word as a last resort; this
      only fires when the alternative is horizontal scroll.
   2. Grid and flex children default to min-width:auto, which
      means "never shrink below my content". A long label in
      one cell then widens the whole track. min-width:0 lets
      the track win and the text wrap instead.
   3. The header CTA was pinned to one line at ≤400px, which
      is right for "Start Free Trial" and wrong for "Начать
      бесплатный период". It now wraps to two lines and the
      header stays inside the viewport.
   ========================================================== */
h1, h2, h3, h4, h5, h6,
p, li, td, th, dd, dt, figcaption, summary, .btn, .label, .lbl {
  overflow-wrap: break-word;
}

.hero-stats > *,
.step-grid > *,
.gran-grid > *,
.stats-inner > *,
[class*="-grid"] > * { min-width: 0; }

@media (max-width: 480px) {
  .header-inner { min-width: 0; }
  .header-ctas { min-width: 0; flex-shrink: 1; }
  .header-ctas .btn {
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }
}

/* The wholesale hero's two-column container keeps its desktop gutters until
   360px, which is too late for the longer translations. */
@media (max-width: 440px) {
  .wholesale-hero .container { gap: 24px; padding-right: 16px; padding-left: 16px; }
  .hero-stats { gap: 10px; }
  .stat-card { padding: 14px 12px; }
}

/* The "for brokers and institutions" pill is absolutely positioned and pinned
   to one line, which fits the English label and overshoots the card in the
   longer translations (Turkish is the widest). Let it wrap inside the card. */
@media (max-width: 560px) {
  .plan-badge {
    white-space: normal;
    text-align: center;
    max-width: calc(100% - 24px);
    line-height: 1.3;
  }
}

/* The wholesale hero stat cards render their headline value at 2rem/800,
   which suits "10,000s" and "24×5" but not the languages that translate
   "Dozens" into a real word — German "Dutzende", Polish "Dziesiątki". Scale
   the value down on a phone and allow a break as the backstop, so the card
   can never widen past its track. */
@media (max-width: 440px) {
  .stat-card .number {
    font-size: clamp(1.15rem, 5.5vw, 2rem);
    overflow-wrap: anywhere;
    hyphens: auto;
  }
  .header-ctas .btn { overflow-wrap: anywhere; }
}

/* ==========================================================
   Mobile: diagrams, tap targets
   ----------------------------------------------------------
   The three explainer diagrams are authored at 980px. Scaled
   to fit a 390px phone they render their internal labels at
   roughly a third of design size — technically present,
   practically unreadable. Rather than shrink further, they
   hold a legible minimum inside a horizontal scroller and the
   reader pans. Each one is duplicated in text directly below
   it (step cards, the rule list, the allocation table), so a
   reader who never pans loses nothing.

   Tap targets: the burger, the open nav's links and the
   language menu were all under the 44px both platforms ask
   for. Padding only — no layout moves.
   ========================================================== */
.diagram-scroll { margin: 32px 0; }

@media (max-width: 760px) {
  .diagram-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Bleed to the viewport edge so the cut-off edge reads as
       "there is more this way" rather than as a broken image. */
    margin-inline: -24px;
    padding-inline: 24px;
    scroll-padding-inline: 24px;
  }
  .diagram-scroll .diagram {
    min-width: 620px;
    margin: 0;
  }
}

@media (max-width: 768px) {
  .nav-toggle {
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 10px;
  }
  .site-nav.open { gap: 4px; padding: 8px 24px 12px; }
  .site-nav.open a {
    display: block;
    padding: 12px 0;
    min-height: 44px;
    box-sizing: border-box;
  }
  .lang-picker-menu a { padding: 12px 16px; }
  /* The pricing and homepage FAQs are plain <details> with no padding of
     their own, so their summaries were ~26px tall. .faq-list already pads. */
  .faq-section details > summary,
  .faq-lp details > summary { padding-block: 10px; }
}

/* Remaining tap targets on a phone. Only clicking a <summary> toggles a
   <details> — the padding on the parent card is dead space — so the summary
   has to carry the height itself. .faq-item is the marker class on the FAQ
   blocks that were written with inline styles and no padding of their own;
   .faq-list on the new pages already pads its summaries. */
@media (max-width: 768px) {
  .faq-item > summary { padding-block: 10px; }
  .footer2-col a { padding: 12px 0; }
  .lang-picker-toggle { min-height: 44px; }
  /* Height via padding, NOT min-height + inline-flex: setting `display`
     here would resurrect the "Log in" button that the ≤480px rule
     deliberately hides, because this block comes later in the file. */
  .header-ctas .btn { padding-block: 12px; }
}

/* At 320px the logo, the burger and the CTA cannot share one 70px row once the
   CTA is allowed to wrap. Let the header grow to fit rather than clip, and
   claw back a little width from the logo and the button's side padding. */
@media (max-width: 480px) {
  .header-inner { height: auto; min-height: 70px; padding-block: 10px; }
}
@media (max-width: 360px) {
  .site-logo img { max-width: 108px; }
  .header-ctas .btn { font-size: 0.75rem; padding-inline: 10px; }
}

/* ==========================================================
   Translatable diagrams
   ----------------------------------------------------------
   The explainer diagrams used to be static SVG files with
   hand-positioned <text> and hand-broken lines. That is fine
   in one language and unworkable in fifteen — German runs
   about 30% longer than English, Japanese much shorter, so
   any fixed line break is wrong somewhere.

   The labels now live in <foreignObject>, which means real
   HTML that wraps inside its box. These rules style that
   text. Sizes are in px but sit inside an SVG viewBox, so
   they scale with the diagram rather than with the page.
   ========================================================== */
.diagram-svg { margin: 32px 0; }
.diagram-svg svg { display: block; width: 100%; height: auto; }

.dg {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.35;
  color: #555;
  /* Long compounds in German and Finnish would otherwise punch through the
     side of a card; hyphens give the browser a better option first. */
  hyphens: auto;
  overflow-wrap: break-word;
}
.dg-h { font-size: 15px; font-weight: 700; color: #1a1a1a; line-height: 1.2; }
.dg b { display: block; font-size: 14px; font-weight: 700; color: #1a1a1a; margin-bottom: 2px; }
.dg span { display: block; font-size: 12px; }
.dg-ok b { color: #14532d; }
.dg-ok span { color: #166534; }
.dg-mute b { color: #334155; }
.dg-mute span { color: #475569; }
.dg-invariant b { color: #fff; font-size: 14px; }
.dg-invariant span { color: #93a4bb; font-size: 13px; }
.dg-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}

/* RTL: mirror the whole flow so it reads right-to-left, then flip each text
   box back so the words themselves are not reversed. Arrows end up pointing
   the way an Arabic reader is travelling, which is the point. */
[dir="rtl"] .diagram-svg > svg { transform: scaleX(-1); }
[dir="rtl"] .diagram-svg foreignObject > div { transform: scaleX(-1); direction: ltr; text-align: left; }

/* The flip above mirrors everything the SVG draws, including any remaining
   native <text> — the step numbers in the approval flow, the MT4/MT5 labels,
   the ellipsis. Those came out reversed, which reads as a wrong glyph rather
   than as an obvious bug: mirrored "3" looks like a plausible Arabic-Indic
   digit. Flip each one back about its own centre. */
[dir="rtl"] .diagram-svg text {
  transform: scaleX(-1);
  transform-box: fill-box;
  transform-origin: center;
}

/* Comparison pages: every cell is prose, so nothing is centred, and long cells
   need to wrap against a fixed-ish label column. The table sits in .table-wrap,
   which scrolls it on narrow screens. */
.compare-table.text-table th,
.compare-table.text-table td { text-align: start; vertical-align: top; }
.compare-table.text-table { min-width: 720px; }
.compare-source { font-size: 0.85rem; color: #777; line-height: 1.6; margin-top: 16px; max-width: 820px; }

/* ---------- Comparison pages (/compare, /compare/*) ---------- */
/* Icon chip used in table cells, the legend and the "choose" list. */
.cmp-ico {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  font-size: 0.8rem; font-weight: 800; line-height: 1;
}
.cmp-ico.is-yes { background: #dcfce7; color: #15803d; }
.cmp-ico.is-no  { background: #fee2e2; color: #b91c1c; }
.cmp-ico.is-na  { background: #e5e7eb; color: #6b7280; }

.cmp-wrap { border-radius: 14px; box-shadow: 0 10px 30px rgba(13,27,46,0.10), 0 1px 3px rgba(13,27,46,0.08); background: #fff; }
.compare-table.cmp-table {
  max-width: none; margin: 0; border-collapse: separate; border-spacing: 0;
  border-radius: 14px; box-shadow: none; overflow: visible; background: #fff;
}
.compare-table.cmp-table thead th {
  background: #0d1b2e; color: #fff; font-size: 0.86rem; font-weight: 700;
  padding: 18px 16px; border-bottom: none; vertical-align: bottom; line-height: 1.3;
}
.compare-table.cmp-table thead th:first-child { border-start-start-radius: 14px; }
.compare-table.cmp-table thead th:last-child { border-start-end-radius: 14px; }
.compare-table.cmp-table thead th.cmp-us { background: #2563eb; font-size: 0.95rem; }
.compare-table.cmp-table tbody th {
  text-align: start; vertical-align: top; font-size: 0.88rem; font-weight: 700; color: #0d1b2e;
  padding: 16px; background: #f8fafc; border-bottom: 1px solid #e8edf3;
  position: sticky; inset-inline-start: 0; z-index: 1; min-width: 150px; max-width: 220px;
}
.compare-table.cmp-table thead th:first-child { position: sticky; inset-inline-start: 0; z-index: 2; }
.compare-table.cmp-table td {
  padding: 16px; font-size: 0.88rem; line-height: 1.5; color: #334155;
  border-bottom: 1px solid #eef2f6; min-width: 132px; font-weight: 400;
}
.compare-table.cmp-table td:first-child { font-weight: 400; color: #334155; }
.compare-table.cmp-table tbody tr:nth-child(even) td { background: #fbfcfe; }
.compare-table.cmp-table td.cmp-us,
.compare-table.cmp-table tbody tr:nth-child(even) td.cmp-us {
  background: #eff6ff; color: #0d1b2e; font-weight: 600;
  border-inline: 2px solid #2563eb;
}
.compare-table.cmp-table tbody tr:last-child th,
.compare-table.cmp-table tbody tr:last-child td { border-bottom: none; }
.compare-table.cmp-table tbody tr:last-child td.cmp-us { border-bottom: 2px solid #2563eb; }
.compare-table.cmp-table tbody tr:last-child th { border-end-start-radius: 14px; }
.compare-table.cmp-table tbody tr:last-child td:last-child { border-end-end-radius: 14px; }
.compare-table.cmp-table tbody tr:hover td:not(.cmp-us) { background: #f3f6fa; }
/* icon sits beside the text and stays on the first line when the text wraps */
.cmp-table td.is-yes, .cmp-table td.is-no, .cmp-table td.is-na { white-space: normal; }
/* The text line is exactly as tall as the icon, so the icon is centred on the
   first line of text and stays there when a long cell wraps. */
.cmp-cell { display: flex; align-items: flex-start; gap: 8px; }
.cmp-cell .cmp-txt { line-height: 22px; }
.cmp-table td .cmp-ico { margin: 0; }
.cmp-table td.is-yes .cmp-txt { color: #166534; font-weight: 600; }
.cmp-table td.is-no .cmp-txt { color: #b91c1c; }
.cmp-table td.is-na .cmp-txt { color: #6b7280; }

.cmp-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font-size: 0.85rem; color: #555; max-width: none; }
.cmp-legend > span { display: inline-flex; align-items: center; gap: 8px; }

.cmp-choose { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cmp-choose > li {
  display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid #e5eaf0;
  border-radius: 12px; padding: 16px 18px; font-size: 0.95rem; color: #334155; line-height: 1.55;
  box-shadow: 0 1px 2px rgba(13,27,46,0.05);
}
.cmp-choose > li .cmp-ico { margin-top: 1px; }
.cmp-them { margin-top: 26px; padding: 18px 20px; border-radius: 12px; background: #f1f5f9; border-inline-start: 4px solid #94a3b8; max-width: 820px; }
.cmp-them h3 { margin: 0 0 6px; font-size: 1.02rem; color: #334155; }
.cmp-them p { margin: 0; font-size: 0.95rem; color: #475569; line-height: 1.6; }
@media (max-width: 640px) {
  .compare-table.cmp-table tbody th { min-width: 118px; max-width: 140px; padding: 12px; font-size: 0.82rem; }
  .compare-table.cmp-table td, .compare-table.cmp-table thead th { padding: 12px; font-size: 0.82rem; }
}
.cmp-link { display: block; width: fit-content; margin-top: 8px; font-size: 0.92rem; font-weight: 600; color: #2563eb; }
/* Tables inside guide articles sit under a paragraph and need a little air. */
.art-table { margin-top: 22px; }
.art-table .compare-table.cmp-table { min-width: 560px; }