:root {
  --pink:#b88716;
  --dark:#201a0d;
  --muted:#746b59;
  --line:#e9e0c9;
  --green:#517347;
  --shadow:0 16px 45px rgba(97,70,10,.14);
}
body {
  background: #f5f1e8;
}
.site-shell {
  background: #fffdf8;
}
.topbar {
  background: #fffdf8f2;
  border-color: #e9dfc6;
}
.topbar .brand-mark {
  font-size: 0;
  background:
    linear-gradient(
      145deg,
      #f3d568,
      #a9760b);
  color: #1d1608;
  border-radius: 50%;
  box-shadow: inset 0 1px #fff8;
}
.topbar .brand-mark:after {
  content: "G";
  font: 800 21px Georgia;
  color: #211907;
}
.topbar .brand > span:last-child {
  font-size: 0;
}
.topbar .brand > span:last-child:after {
  content: "Gold Investor";
  font: 700 18px Inter;
  color: #201a0d;
}
.topbar .brand > span:last-child b {
  display: none;
}
.hero-section {
  background:
    radial-gradient(
      circle at 80% 20%,
      #fff3bd 0,
      transparent 30%),
    linear-gradient(
      135deg,
      #fffdf8,
      #f8f0d8);
}
.hero-copy h1 em,
.eyebrow,
.section-heading span,
.page-head span {
  color: #ad7a0d !important;
}
.primary {
  background:
    linear-gradient(
      135deg,
      #d8ac38,
      #9b6905);
  color: #fff;
}
.primary:hover {
  background:
    linear-gradient(
      135deg,
      #c29320,
      #7f5502);
}
.gold-visual {
  border-radius: 48% 52% 44% 56%;
  background:
    radial-gradient(
      circle at 35% 25%,
      #fff4ad 0,
      #e3b73e 25%,
      #a16b05 63%,
      #382603 100%);
  box-shadow: inset 0 0 75px #fff1a255, 0 28px 70px #a7772038;
}
.gold-coin {
  position: absolute;
  left: 50%;
  top: 53%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  border: 9px double #ffe889;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #513500;
  font: 800 31px Georgia;
  text-shadow: 0 1px #fff4a8;
  background:
    radial-gradient(
      circle at 35% 30%,
      #ffe97f,
      #c78f12 65%,
      #865700);
  box-shadow: 0 16px 35px #49310066, inset 0 0 22px #fff087;
}
.gold-coin small {
  display: block;
  position: absolute;
  bottom: 33px;
  font-size: 15px;
}
.gold-visual .balance-card {
  top: 10%;
  left: 8%;
  right: auto;
  width: 270px;
  padding: 20px;
}
.gold-visual .fc-one {
  left: 1%;
  bottom: 35px;
}
.gold-visual .fc-two {
  right: 0;
  top: 62px;
}
.metrics b {
  color: #a77408;
}
.plan-card {
  background:
    linear-gradient(
      180deg,
      #fff,
      #fffdf7);
}
.plan-card:hover {
  border-color: #d6b55d;
}
.plan-icon {
  color: #8b6408;
  font-family: Georgia;
  font-weight: bold;
}
.risk {
  background: #fbf3d9;
  color: #76550b;
}
.progress i {
  background:
    linear-gradient(
      90deg,
      #8e6205,
      #e5bd4b);
}
.gold-symbol {
  width: 76px;
  height: 76px !important;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    linear-gradient(
      145deg,
      #ffe77e,
      #b77b07);
  color: #5b3d00;
  font: 800 30px Georgia !important;
  border: 5px double #fff0a4;
}
.cta {
  background:
    linear-gradient(
      120deg,
      #20180a,
      #6f4d08 62%,
      #b68113);
}
.wallet-card {
  background:
    linear-gradient(
      125deg,
      #171208,
      #5d420b 70%,
      #ad7c16);
}
.desktop-footer {
  background: #171208;
}
.desktop-footer .brand-mark {
  background: #d2a331;
  color: #211805;
}
.gold-price-banner {
  max-width: 680px;
  margin: -12px auto 34px;
  padding: 18px 25px;
  border-radius: 15px;
  background:
    linear-gradient(
      110deg,
      #20180b,
      #694a0b);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 20px;
  box-shadow: var(--shadow);
}
.gold-price-banner span,
.gold-price-banner small {
  color: #e7d7aa;
}
.gold-price-banner b {
  font-size: 21px;
  margin-left: auto;
}
.payment-title > span,
.payment-grid button.selected .login-button,
.text-button {
  color: #a9770e;
}
.payment-grid button.selected {
  border-color: #b88716;
  background: #fffaf0;
}
.card-strip {
  background:
    linear-gradient(
      115deg,
      #171208,
      #5d410a);
}
.language-switch button.active,
.desktop-nav button.active,
.desktop-nav button:hover,
.bottom-nav .active {
  color: #a9770e;
}
.desktop-nav button.active:after {
  background: #b88716;
}
.login-button {
  border-color: #b88716;
  color: #8b6208;
}
.estimate b {
  color: #a9770e;
}
.modal-backdrop {
  background: #171208b8;
}
.modal .primary:disabled {
  opacity: .5;
  cursor: not-allowed;
}
@media (max-width: 760px) {
  .gold-visual .balance-card {
    left: 5%;
    width: 230px;
  }
  .gold-coin {
    width: 125px;
    height: 125px;
  }
  .gold-price-banner {
    display: grid;
    gap: 3px;
  }
  .gold-price-banner b {
    margin: 0;
  }
  .topbar .brand > span:last-child:after {
    display: none;
  }
}