/* FXTalim Hero: navy text, emerald accents, isolated component styles. */
.brokers-hero {
    --brokers-hero-text: #07224a;
    --brokers-hero-muted: #53739c;
    --brokers-hero-accent: #007d67;
    --brokers-hero-accent-hover: #006553;
    --brokers-hero-soft: #e8f4f1;
    --brokers-hero-border: #dce7ef;
    --brokers-hero-focus: #075dab;
    --brokers-hero-decoration: url("assets/images/brokers-hero/market-background.svg");
    container: brokers-hero / inline-size;
    width: 100%; min-width: 0;
    color: var(--brokers-hero-text);
    font: 400 14px/1.6 Arial, Helvetica, sans-serif;
    text-align: left; isolation: isolate;
}
.brokers-hero,
.brokers-hero :where(div, article, h1, h2, p, ul, li, a, span, img, svg, dl, dt, dd) { box-sizing: border-box; }
.brokers-hero :where(h1, h2, p, ul, dl, dd) { margin: 0; }
.brokers-hero :where(ul) { padding: 0; list-style: none; }
.brokers-hero :where(a) { text-decoration: none; }
.brokers-hero :where(img) { border: 0; }
.brokers-hero__title,
.brokers-hero__card-title { color: var(--brokers-hero-text); font-family: inherit; }
.brokers-hero__icon { display: block; flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: currentColor; }
.brokers-hero__inner { width: 100%; max-width: 1400px; margin-inline: auto; padding: 28px 12px; }
.brokers-hero__layout { display: grid; align-items: center; gap: 28px; min-width: 0; }
.brokers-hero__copy { min-width: 0; }
.brokers-hero__eyebrow { display: inline-flex; align-items: center; max-width: 100%; border: 1px solid #cce6de; border-radius: 24px; padding: 5px 12px; background: #e5f5ed; color: var(--brokers-hero-accent); font-size: 11px; font-weight: 700; line-height: 1.5; }
.brokers-hero__title { max-width: 610px; margin-top: 16px; font-size: 34px; font-weight: 700; line-height: 1.12; letter-spacing: -.035em; overflow-wrap: break-word; }
.brokers-hero__accent { color: var(--brokers-hero-accent); }
.brokers-hero__description { max-width: 520px; margin-top: 18px; color: var(--brokers-hero-muted); font-size: 14px; line-height: 1.7; }
.brokers-hero__actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 22px; }
.brokers-hero__button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; max-width: 100%; border: 1px solid var(--brokers-hero-accent); border-radius: 12px; padding: 11px 16px; background: var(--brokers-hero-accent); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.45; text-align: center; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.brokers-hero__button--secondary { border-color: #cbdedb; background: rgb(255 255 255 / 75%); color: var(--brokers-hero-text); }
.brokers-hero__benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 520px; margin-top: 24px; }
.brokers-hero__benefit { min-width: 0; }
.brokers-hero__benefit-icon { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 8px; border-radius: 50%; background: #e0f1e9; color: var(--brokers-hero-accent); }
.brokers-hero__benefit-icon--blue { background: #e6f0fa; color: #376690; }
.brokers-hero__benefit-icon .brokers-hero__icon { width: 21px; height: 21px; }
.brokers-hero__benefit-title { display: block; color: var(--brokers-hero-text); font-size: 13px; font-weight: 700; line-height: 1.45; }
.brokers-hero__benefit-description { display: block; margin-top: 3px; color: var(--brokers-hero-muted); font-size: 10px; line-height: 1.55; }
.brokers-hero__visual { container: brokers-hero-visual / inline-size; min-width: 0; }
.brokers-hero__comparison { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 14px; min-width: 0; scroll-margin-top: 24px; }
.brokers-hero__card { position: relative; display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 500px; min-width: 0; margin-inline: auto; border: 1px solid var(--brokers-hero-border); border-radius: 22px; padding: 18px; background: #fff; box-shadow: 0 6px 20px rgb(7 34 74 / 3%); }
.brokers-hero__card--featured { border-color: #afcec0; background: linear-gradient(180deg, #f4fcf8, #fff 65%); }
.brokers-hero__choice-row { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.brokers-hero__choice { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 1px solid #bde5d3; border-radius: 22px; padding: 5px 9px; background: var(--brokers-hero-soft); color: var(--brokers-hero-accent); font-size: 11px; font-weight: 700; line-height: 1.45; }
.brokers-hero__choice .brokers-hero__icon { width: 16px; height: 16px; }
.brokers-hero__rank { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; border: 1px solid #c6e4d8; border-radius: 50%; background: #f8fffb; color: var(--brokers-hero-accent); font-size: 10px; font-weight: 700; line-height: 1.4; }
.brokers-hero__card-header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.brokers-hero__logo-box { display: flex; align-items: center; justify-content: flex-start; width: 58%; min-height: 36px; }
.brokers-hero__logo { display: block; width: 100%; max-width: 150px; height: 32px; object-fit: contain; }
.brokers-hero__logo-fallback { display: block; color: var(--brokers-hero-text); font-size: 24px; font-weight: 700; line-height: 1.4; }
.brokers-hero__card-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; font-size: 16px; font-weight: 700; line-height: 1.5; }
.brokers-hero__account { display: inline-block; max-width: 100%; border: 1px solid #dce7f1; border-radius: 8px; padding: 4px 8px; background: #f7fafc; color: var(--brokers-hero-muted); font-size: 10px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.brokers-hero__card--featured .brokers-hero__account { border-color: #cce4d9; background: #edf8f3; color: var(--brokers-hero-accent); }
.brokers-hero__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; margin-top: 16px; }
.brokers-hero__detail { min-width: 0; border-top: 1px solid #e7eef4; padding: 10px 0; }
.brokers-hero__detail-label { display: block; color: var(--brokers-hero-muted); font-size: 11px; font-weight: 400; line-height: 1.5; overflow-wrap: break-word; }
.brokers-hero__detail-value { display: block; min-width: 0; margin-top: 3px; color: var(--brokers-hero-text); font-size: 13px; font-weight: 700; line-height: 1.5; text-align: left; overflow-wrap: break-word; }
.brokers-hero__card-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; width: 100%; margin-top: 14px; border: 1px solid #cbdedb; border-radius: 11px; padding: 10px; background: #f2f8f6; color: var(--brokers-hero-accent); font-size: 12px; font-weight: 700; line-height: 1.45; text-align: center; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.brokers-hero__card-link .brokers-hero__icon { width: 16px; height: 16px; }
.brokers-hero__card--featured .brokers-hero__card-link { border-color: var(--brokers-hero-accent); background: var(--brokers-hero-accent); color: #fff; }
.brokers-hero__note { max-width: 640px; margin: 14px auto 0; color: var(--brokers-hero-muted); font-size: 10px; line-height: 1.6; text-align: center; }
.brokers-hero a:focus-visible { outline: 3px solid var(--brokers-hero-focus); outline-offset: 4px; }
.brokers-hero__button:active,
.brokers-hero__card--featured .brokers-hero__card-link:active { border-color: #005545; background: #005545; }
.brokers-hero__button--secondary:active,
.brokers-hero__card-link:active { border-color: #aacabc; background: #dcefe5; }
@media (hover: hover) {
    .brokers-hero__button:hover,
    .brokers-hero__card--featured .brokers-hero__card-link:hover { border-color: var(--brokers-hero-accent-hover); background: var(--brokers-hero-accent-hover); }
    .brokers-hero__button--secondary:hover,
    .brokers-hero__card-link:hover { border-color: #afcfc1; background: #e8f4ee; }
}
@container brokers-hero (min-width: 480px) {
    .brokers-hero__inner { padding: 32px 20px; }
    .brokers-hero__title { font-size: 42px; }
    .brokers-hero__actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
    .brokers-hero__benefit-description { font-size: 11px; }
}
@container brokers-hero (min-width: 1200px) {
    .brokers-hero__layout { grid-template-columns: minmax(0, .34fr) minmax(0, .66fr); gap: 24px; min-height: 430px; }
    .brokers-hero__title { font-size: 40px; }
    .brokers-hero__benefits { gap: 12px; }
}
@container brokers-hero (min-width: 1400px) {
    .brokers-hero__layout { gap: 32px; }
    .brokers-hero__title { font-size: 46px; }
    .brokers-hero__description { font-size: 15px; }
}
@container brokers-hero-visual (min-width: 700px) {
    .brokers-hero__comparison { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr); gap: 12px; }
    .brokers-hero__card { max-width: none; min-height: 380px; padding: 20px 14px; }
    .brokers-hero__card--featured { order: 2; min-height: 430px; padding-inline: 16px; }
    .brokers-hero__card--xm { order: 1; }
    .brokers-hero__card--exness { order: 3; }
    .brokers-hero__choice-row { justify-content: center; }
    .brokers-hero__card-header { flex-direction: column; gap: 0; text-align: center; }
    .brokers-hero__logo-box { justify-content: center; width: 100%; min-height: 48px; }
    .brokers-hero__logo { height: 38px; }
    .brokers-hero__card--featured .brokers-hero__logo { max-width: 175px; height: 42px; }
    .brokers-hero__account { margin-top: 8px; }
    .brokers-hero__details { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
    .brokers-hero__detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 8px; min-height: 44px; padding: 10px 0; }
    .brokers-hero__detail-label { font-size: 12px; }
    .brokers-hero__detail-value { margin-top: 0; font-size: 13px; text-align: right; }
    .brokers-hero__card-link { margin-top: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .brokers-hero__button,
    .brokers-hero__card-link { transition: none; }
}