/* Desktop-only landscape layouts for agent growth and direct-referral pages. */
@media screen and (min-width: 1100px) {
  html body #root .player-action-page.agent-benefit-page > .player-action-page-content,
  html body #root .player-action-page.referral-tool-page > .player-action-page-content {
    box-sizing: border-box !important;
    width: min(1420px, calc(100vw - 96px)) !important;
    max-width: 1420px !important;
    margin: 0 auto !important;
    padding: 28px 0 72px !important;
  }

  /* Agent growth: hero across the top, qualification left, growth map right. */
  html body #root .agent-benefit-page .agent-center-page {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(420px, 0.86fr) minmax(620px, 1.14fr) !important;
    gap: 22px !important;
    align-items: start !important;
  }

  html body #root .agent-benefit-page .agent-center-hero {
    grid-column: 1 / -1 !important;
    min-height: 176px !important;
    margin: 0 !important;
    padding: 30px 38px !important;
  }

  html body #root .agent-benefit-page .agent-qualification {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-height: 336px !important;
    margin: 0 !important;
    padding: 28px !important;
  }

  html body #root .agent-benefit-page .agent-growth-network {
    grid-column: 2 !important;
    grid-row: 2 / span 4 !important;
    min-height: 720px !important;
    margin: 0 !important;
    padding: 28px 30px !important;
  }

  html body #root .agent-benefit-page .growth-tree {
    min-height: 390px !important;
  }

  html body #root .agent-benefit-page .growth-tree-children {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px 18px !important;
  }

  html body #root .agent-benefit-page .growth-tree-children article {
    min-height: 72px !important;
  }

  html body #root .agent-benefit-page .agent-levels,
  html body #root .agent-benefit-page .agent-public-benefit,
  html body #root .agent-benefit-page .agent-private-hint {
    grid-column: 1 !important;
    margin: 0 !important;
  }

  html body #root .agent-benefit-page .agent-level-track {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html body #root .agent-benefit-page .agent-center-page > button.primary.full {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Referral overview: rates and daily metrics left, network map right. */
  html body #root .referral-tool-page > .player-action-page-content {
    display: grid !important;
    grid-template-columns: minmax(420px, 0.82fr) minmax(640px, 1.18fr) !important;
    gap: 22px !important;
    align-items: start !important;
  }

  html body #root .referral-tool-page .tool-hero.referral {
    grid-column: 1 / -1 !important;
    min-height: 170px !important;
    margin: 0 !important;
    padding: 30px 38px !important;
  }

  html body #root .referral-tool-page .tool-referral-rates {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-height: 240px !important;
    margin: 0 !important;
  }

  html body #root .referral-tool-page .direct-referral-overview-card {
    grid-column: 1 !important;
    grid-row: 3 !important;
    min-height: 300px !important;
    margin: 0 !important;
  }

  html body #root .referral-tool-page > .player-action-page-content > .tool-card:not(.direct-referral-overview-card):not(.referral-turnover-report) {
    grid-column: 2 !important;
    grid-row: 2 / span 2 !important;
    min-height: 562px !important;
    margin: 0 !important;
  }

  html body #root .referral-tool-page .tool-referral-network {
    min-height: 470px !important;
    height: 470px !important;
  }

  html body #root .referral-tool-page .referral-turnover-report,
  html body #root .referral-tool-page > .player-action-page-content > .funding-submit {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 0 !important;
  }
}

@media screen and (min-width: 901px) and (max-width: 1099px) {
  html body #root .player-action-page.agent-benefit-page > .player-action-page-content,
  html body #root .player-action-page.referral-tool-page > .player-action-page-content {
    width: min(920px, calc(100vw - 48px)) !important;
    max-width: 920px !important;
    margin-inline: auto !important;
  }
}