/* Adapted from the supplied copy-trading-html-css/styles.css; scoped to this section. */
.homepage-referral {
  --brand-blue: #214892;
  --chart-blue: #294b80;
  --u: min(0.09718173vw, 1.24393px);
  color: #626262;
  font-family: "DM Sans", sans-serif;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  background: linear-gradient(180deg, #fff 0%, #fff 45%, #f7f7f7 60%, #dcdcdc 100%);
}
.homepage-referral__layout {
  width: calc(1029 * var(--u));
  max-width: 100%;
  min-height: calc(583 * var(--u));
  padding: calc(40 * var(--u)) calc(129 * var(--u)) calc(43 * var(--u)) calc(130 * var(--u));
  display: grid;
  grid-template-columns: minmax(0, 375fr) minmax(0, 340fr);
  column-gap: calc(55 * var(--u));
  align-items: start;
}
.homepage-referral__artwork { min-width: 0; }
.homepage-referral__image { display: block; width: 70%; height: auto; }
.homepage-referral__content { min-width: 0; padding-top: calc(79 * var(--u)); }
.homepage-referral h2 {
  font-family: "Manrope", sans-serif;
  margin: 0;
  font-size: calc(25 * var(--u));
  line-height: 1.25;
  font-weight: 750;
  letter-spacing: -0.025em;
  color: var(--brand-blue);
}
.homepage-referral__description {
  max-width: calc(325 * var(--u));
  margin: calc(12 * var(--u)) 0 0;
  font-size: calc(9.5 * var(--u));
  line-height: 1.48;
}
.homepage-referral-start {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(128 * var(--u));
  min-height: calc(32 * var(--u));
  margin-top: calc(27 * var(--u));
  padding: calc(8 * var(--u)) calc(18 * var(--u));
  border: 1px solid transparent;
  border-radius: calc(4 * var(--u));
  background: var(--brand-blue);
  color: #fff;
  font-size: calc(11 * var(--u));
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}
.homepage-referral-start:hover { background: #183974; box-shadow: 0 4px 14px #21489226; }
.homepage-referral-start:focus-visible { outline: 3px solid #214892; outline-offset: 4px; }
.homepage-referral-performance {
  position: relative;
  width: calc(290 * var(--u));
  height: calc(157 * var(--u));
  margin: calc(54 * var(--u)) 0 0;
}
.homepage-referral-performance__card {
  width: calc(158 * var(--u));
  height: 100%;
  padding: calc(32 * var(--u)) calc(29 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  white-space: nowrap;
  border: 1px solid #ffffff80;
  border-radius: calc(9 * var(--u));
  background: linear-gradient(155deg, #ffffff9e, #ffffff0a);
  box-shadow: 0 0 calc(12 * var(--u)) #00000008, 0 calc(3 * var(--u)) calc(8 * var(--u)) #00000005;
}
.homepage-referral-performance__name { font-size: calc(14 * var(--u)); line-height: 1.3; color: #737373; }
.homepage-referral-performance__value { margin-top: calc(7 * var(--u)); font-family: Arial, Helvetica, sans-serif; font-size: calc(30 * var(--u)); line-height: 1.25; font-weight: 400; letter-spacing: -0.03em; color: #203f73; }
.homepage-referral-performance__period { margin-top: calc(7 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.3; color: #858585; }
.homepage-referral-performance__chart {
  position: absolute;
  left: calc(145 * var(--u));
  bottom: calc(19 * var(--u));
  display: flex;
  align-items: flex-end;
  gap: calc(8 * var(--u));
}
.homepage-referral-performance__column { width: calc(17 * var(--u)); display: flex; flex-direction: column; align-items: center; }
.homepage-referral-performance__bar { position: relative; display: block; width: 100%; background: var(--chart-blue); }
.homepage-referral-performance__bar::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: calc(20 * var(--u));
  background: linear-gradient(to top, #28497426, #28497400);
}
.homepage-referral-performance__bar--1 { height: calc(74 * var(--u)); }
.homepage-referral-performance__bar--2 { height: calc(56 * var(--u)); }
.homepage-referral-performance__bar--3 { height: calc(43 * var(--u)); }
.homepage-referral-performance__bar--4 { height: calc(28 * var(--u)); }
.homepage-referral-performance__bar--5 { height: calc(18 * var(--u)); }
.homepage-referral-performance__bar--6 { height: calc(9 * var(--u)); }
.homepage-referral-performance__label { margin-top: calc(5 * var(--u)); font-size: calc(10 * var(--u)); line-height: 1; color: #494949; }

/* Tablets: two columns, larger text, and a touch-friendly button. */
@media (min-width: 701px) and (max-width: 900px) {
  .homepage-referral__layout { width: 100%; padding-inline: 6%; grid-template-columns: 1fr 1fr; gap: 5%; }
  .homepage-referral h2 { font-size: 28px; }
  .homepage-referral__description { max-width: 320px; font-size: 12px; line-height: 1.6; }
  .homepage-referral-start { width: 140px; min-height: 44px; font-size: 13px; }
  .homepage-referral-performance { --u: 0.95px; }
}
/* Phones: content first, then artwork, with no horizontal scrolling. */
@media (max-width: 700px) {
  .homepage-referral { background: linear-gradient(180deg, #fff 0%, #fff 40%, #ededed 75%, #dcdcdc 100%); }
  .homepage-referral__layout {
    width: 100%;
    min-height: auto;
    padding: 52px 24px 24px;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .homepage-referral__content { order: -1; padding-top: 0; text-align: center; }
  .homepage-referral h2 { font-size: clamp(28px, 7.5vw, 36px); }
  .homepage-referral__description { max-width: 360px; margin: 16px auto 0; font-size: 14px; line-height: 1.65; }
  .homepage-referral-start { width: 160px; min-height: 44px; margin-top: 24px; padding: 12px 20px; border-radius: 5px; font-size: 14px; }
  .homepage-referral-performance { --u: 1px; margin: 40px auto 0; text-align: left; }
  .homepage-referral__artwork { width: min(100%, 360px); margin-inline: auto; }
}
@media (max-width: 360px) {
  .homepage-referral__layout { padding-inline: 18px; }
  .homepage-referral-performance { --u: 0.83px; }
}
@media (prefers-reduced-motion: reduce) {
  .homepage-referral-start { transition: none; }
}