.marketer-hero {
  position: relative;
  overflow: hidden;
  padding: 78px 0;
  background: linear-gradient(135deg, #152a43, #0e1c30);
  color: #fff
}

.marketer-hero__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(#e8b34818 1px, transparent 1px), linear-gradient(90deg, #e8b34818 1px, transparent 1px);
  background-size: 42px 42px
}

.marketer-hero__layout {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center
}

.marketer-hero .eyebrow,
.marketer-steps .eyebrow {
  color: #e9ba62
}

.marketer-hero h1 {
  margin: 17px 0;
  font: 900 clamp(41px, 5vw, 65px)/1.28 Cairo;
  letter-spacing: -.06em
}

.marketer-hero h1 em,
.marketer-benefits h2 em,
.marketer-steps h2 em,
.marketer-join h2 em {
  font-style: normal;
  color: #e5a32c
}

.marketer-hero p:not(.eyebrow) {
  max-width: 490px;
  color: #c6d1db;
  font-size: 12px;
  line-height: 2.15
}

.marketer-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 28px
}

.marketer-actions a:first-child {
  padding: 14px 17px;
  background: #e4a12a;
  color: #fff;
  font-size: 10px;
  font-weight: 700
}

.marketer-actions a:last-child {
  color: #e9ba62;
  font-size: 10px;
  font-weight: 700
}

.marketer-note {
  margin-top: 25px;
  color: #b8c5cf;
  font-size: 9px
}

.marketer-note i {
  color: #e4a12a;
  font-size: 15px;
  margin-left: 5px;
  vertical-align: middle
}

.marketer-orbit {
  position: relative;
  width: 340px;
  height: 340px;
  margin: auto;
  border: 1px solid #e6b04b6b;
  border-radius: 50%;
  box-shadow: 0 0 0 27px #e4a12a0b, 0 0 0 58px #e4a12a06
}

.marketer-orbit__core {
  position: absolute;
  inset: 95px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: #d3921c;
  box-shadow: 0 16px 35px #040c194f
}

.marketer-orbit__core i {
  font-size: 39px
}

.marketer-orbit__core b {
  position: absolute;
  bottom: 22px;
  font: 800 14px 'DM Sans'
}

.orbit-card {
  position: absolute;
  padding: 12px;
  border: 1px solid #e4b04c;
  background: #1c324d;
  box-shadow: 0 12px 24px #030a1545;
  color: #fff
}

.orbit-card b,
.orbit-card small {
  display: block
}

.orbit-card b {
  color: #e8b34d;
  font: 800 23px 'DM Sans'
}

.orbit-card small {
  font-size: 8px;
  color: #d4dde6
}

.orbit-card i {
  color: #e8b34d;
  font-size: 19px
}

.card-a {
  top: -15px;
  right: 107px;
  text-align: center
}

.card-b {
  right: -58px;
  top: 155px
}

.card-c {
  left: -60px;
  bottom: 45px
}

.marketer-benefits {
  padding: 90px 0;
  background: #fffdf9
}

.marketer-benefits header {
  display: grid;
  grid-template-columns: 1fr .75fr;
  gap: 80px;
  align-items: end
}

.marketer-benefits h2,
.marketer-steps h2 {
  margin-top: 12px;
  font-size: 36px;
  line-height: 1.45;
  letter-spacing: -.055em
}

.marketer-benefits header>p {
  color: #788592;
  font-size: 11px;
  line-height: 2
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 11px;
  margin-top: 38px
}

.benefits-grid article {
  min-height: 183px;
  padding: 18px;
  border: 1px solid #e8dece;
  background: #fff;
  transition: .25s
}

.benefits-grid article:hover {
  transform: translateY(-5px);
  border-color: #d69a2a;
  box-shadow: 0 16px 26px #4e35100d
}

.benefits-grid i {
  display: block;
  margin-bottom: 18px;
  color: #c98c1c;
  font-size: 25px
}

.benefits-grid b,
.benefits-grid span {
  display: block
}

.benefits-grid b {
  font-size: 11px
}

.benefits-grid span {
  margin-top: 8px;
  color: #7d8894;
  font-size: 8px;
  line-height: 1.9
}

.marketer-steps {
  padding: 80px 0;
  background: #f3e9d8
}

.marketer-steps .container {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 75px;
  align-items: center
}

.marketer-steps ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
  padding: 0;
  list-style: none
}

.marketer-steps li {
  padding: 15px
}

.marketer-steps li span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  margin-bottom: 12px;
  background: #172a43;
  color: #e7ad3b;
  border-radius: 50%;
  font: 700 10px 'DM Sans'
}

.marketer-steps li b,
.marketer-steps li small {
  display: block
}

.marketer-steps li b {
  font-size: 10px
}

.marketer-steps li small {
  margin-top: 6px;
  color: #798591;
  font-size: 8px
}

.marketer-join {
  padding: 78px 0;
  background: #172a43;
  color: #fff
}

.marketer-join .container {
  display: grid;
  grid-template-columns: 1fr .8fr;
  gap: 100px;
  align-items: center
}

.marketer-join p {
  color: #e4b04c;
  font-size: 10px;
  font-weight: 700
}

.marketer-join h2 {
  margin: 10px 0;
  font-size: 34px
}

.marketer-join div>span {
  color: #c5d0da;
  font-size: 10px;
  line-height: 2
}

.marketer-join form {
  display: grid;
  gap: 11px;
  padding: 22px;
  background: #fff;
  color: #26374d
}

.marketer-join label {
  display: grid;
  gap: 7px;
  font-size: 9px;
  font-weight: 700
}

.marketer-join input {
  height: 42px;
  border: 1px solid #e5ddd1;
  padding: 0 10px;
  font: 9px Alexandria;
  outline: 0
}

.marketer-join input:focus {
  border-color: #d69a2a
}

.marketer-join button {
  height: 45px;
  border: 0;
  background: #e4a12a;
  color: #fff;
  font: 700 10px Alexandria;
  cursor: pointer
}

.marketer-status {
  min-height: 14px;
  color: #3e8e5e;
  font-size: 8px
}

@media(max-width:820px) {

  .marketer-hero__layout,
  .marketer-benefits header,
  .marketer-steps .container,
  .marketer-join .container {
    grid-template-columns: 1fr;
    gap: 30px
  }

  .marketer-hero {
    padding: 58px 0
  }

  .marketer-orbit {
    transform: scale(.82);
    margin: 0 auto
  }

  .marketer-benefits,
  .marketer-steps,
  .marketer-join {
    padding: 62px 0
  }

  .marketer-benefits h2,
  .marketer-steps h2 {
    font-size: 29px
  }

  .benefits-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .marketer-steps ol {
    grid-template-columns: 1fr
  }

  .marketer-join h2 {
    font-size: 29px
  }
}

@media(max-width:420px) {
  .marketer-hero h1 {
    font-size: 37px
  }

  .marketer-actions {
    gap: 10px
  }

  .benefits-grid {
    grid-template-columns: 1fr
  }
}


.marketer-login-panel {
  display: grid;
  gap: 11px;
  padding: 27px 24px;
  background: #fff;
  color: #26374d;
  text-align: center
}

.marketer-login-panel>i {
  width: 45px;
  height: 45px;
  margin: auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff3d8;
  color: #c98b1d;
  font-size: 22px
}

.marketer-login-panel b {
  font-size: 12px
}

.marketer-login-panel span {
  color: #788592;
  font-size: 9px;
  line-height: 1.9
}

.marketer-login-panel a {
  padding: 14px;
  background: #e4a12a;
  color: #fff;
  font-size: 10px;
  font-weight: 700
}

.marketer-login-panel a i {
  margin-right: 7px;
  font-size: 15px
}

/* Screenshot-matched marketer layout. */
.marketer-hero {
  min-height: 700px;
  padding: 100px 0 82px;
  background: radial-gradient(circle at 11% 54%, #f3d37e80, transparent 31%), radial-gradient(circle at 97% 2%, #edc76626, transparent 28%), #fffaf0;
  color: #172a43
}

.marketer-hero__grid {
  background-image: linear-gradient(#d69a2020 1px, transparent 1px), linear-gradient(90deg, #d69a2020 1px, transparent 1px);
  background-size: 42px 42px
}

.marketer-hero__layout {
  grid-template-columns: 1.08fr .92fr;
  gap: 70px
}

.marketer-hero .eyebrow {
  color: #a96f12
}

.marketer-hero h1 {
  margin: 25px 0 20px;
  color: #172a43;
  font-size: clamp(50px, 5vw, 76px);
  line-height: 1.15
}

.marketer-hero h1 em {
  color: #e9a21d
}

.marketer-hero p:not(.eyebrow) {
  max-width: 610px;
  padding: 15px 20px;
  border-left: 2px solid #e7a01d;
  background: #fffdf8d9;
  color: #52657c;
  font-size: 13px
}

.marketer-actions a:first-child {
  padding: 16px 22px;
  background: #e9a21d;
  font-size: 11px
}

.marketer-actions a:last-child {
  color: #9c6914;
  font-size: 11px
}

.marketer-note {
  color: #738095
}

.marketer-orbit {
  width: 390px;
  height: 390px;
  border-color: #df9e20;
  box-shadow: 0 0 0 28px #e5a01c10, 0 0 0 59px #e5a01c08
}

.marketer-orbit:after {
  position: absolute;
  inset: 21px;
  border: 1px dashed #e0a125;
  border-radius: 50%;
  content: ""
}

.marketer-orbit__core {
  z-index: 1;
  inset: 102px;
  border: 1px solid #dfa021;
  background: #fff;
  color: #d59113;
  box-shadow: 0 0 0 14px #e3a02118
}

.orbit-card {
  z-index: 2;
  border-color: #e0a121;
  background: #fffdf8;
  color: #172a43;
  box-shadow: none
}

.orbit-card small {
  color: #68778b
}

.card-a {
  top: -18px;
  right: 122px
}

.card-b {
  right: -62px;
  top: 156px
}

.card-c {
  left: -66px;
  bottom: 42px
}

.marketer-benefits {
  position: relative;
  padding: 105px 0 110px;
  background: #fffaf0
}

.marketer-benefits:after {
  position: absolute;
  bottom: 22px;
  left: 4%;
  color: #e9bd5d20;
  font: 800 54px 'DM Sans';
  letter-spacing: 7px;
  content: "BENEFITS / 01"
}

.marketer-benefits header {
  display: grid;
  grid-template-columns: .8fr 1.3fr .8fr;
  gap: 40px;
  align-items: end
}

.marketer-benefits header>.eyebrow {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  color: #9a6b1b
}

.marketer-benefits header>h2 {
  grid-column: 2;
  grid-row: 1/3;
  margin: 0;
  color: #172a43;
  font-size: clamp(36px, 3.5vw, 52px);
  text-align: center
}

.marketer-benefits header>p:last-child {
  grid-column: 3;
  grid-row: 1/3;
  margin: 0;
  color: #6f7e91;
  font-size: 11px
}

.benefits-grid {
  counter-reset: benefit;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 68px
}

.benefits-grid article {
  position: relative;
  counter-increment: benefit;
  min-height: 285px;
  padding: 48px 22px 25px;
  border-color: #e5bb63;
  background: #fff9ec;
  text-align: center;
  clip-path: polygon(0 0, 88% 0, 100% 9%, 100% 100%, 0 100%)
}

.benefits-grid article:nth-child(2) {
  background: #172d4c;
  color: #fff
}

.benefits-grid article:nth-child(3) {
  background: #f6d995
}

.benefits-grid article:nth-child(4) {
  background: #e6f0e8
}

.benefits-grid article:nth-child(5) {
  background: #e8def3
}

.benefits-grid article:before {
  position: absolute;
  top: 16px;
  left: 18px;
  color: #e6c77b45;
  font: 800 34px 'DM Sans';
  content: counter(benefit, decimal-leading-zero)
}

.benefits-grid i {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  margin: 0 auto 34px;
  border: 1px solid #dfa022;
  border-radius: 50%;
  background: #fff9eb;
  color: #c98612;
  font-size: 25px
}

.benefits-grid article:nth-child(2) i {
  background: #e8a21e;
  color: #172d4c
}

.benefits-grid b {
  font-size: 13px
}

.benefits-grid span {
  margin-top: 12px;
  font-size: 9px
}

.benefits-grid article:nth-child(2) span {
  color: #e5edf5
}

.marketer-steps {
  position: relative;
  padding: 105px 0;
  background: linear-gradient(110deg, #f3d99b, #fffaf0)
}

.marketer-steps:after {
  position: absolute;
  top: 36px;
  right: 18%;
  color: #e4bc6124;
  font: 800 28px 'DM Sans';
  letter-spacing: 15px;
  content: "+ G + · G + · G"
}

.marketer-steps .container {
  grid-template-columns: .72fr 1.28fr;
  gap: 80px
}

.marketer-steps h2 {
  color: #172a43;
  font-size: clamp(38px, 4vw, 58px)
}

.marketer-steps ol {
  position: relative;
  align-items: start
}

.marketer-steps ol:before {
  position: absolute;
  top: 40px;
  right: 12%;
  left: 12%;
  height: 1px;
  background: #e2ad3f;
  content: ""
}

.marketer-steps li {
  position: relative;
  z-index: 1;
  text-align: center
}

.marketer-steps li span {
  width: 76px;
  height: 76px;
  margin: 0 auto 24px;
  border: 1px solid #dfa020;
  border-radius: 22px;
  background: #fff9eb;
  color: #bd7c0e;
  font-size: 12px;
  transform: rotate(45deg)
}

.marketer-steps li:nth-child(2) span {
  background: #e8a21d;
  color: #172d4c
}

.marketer-steps li:nth-child(3) span {
  background: #172d4c;
  color: #e9a21d
}

.marketer-steps li b {
  font-size: 12px
}

.marketer-steps li small {
  font-size: 9px
}

.marketer-join {
  padding: 105px 0;
  background: #172d4c
}

.marketer-join .container {
  grid-template-columns: 1.15fr .85fr;
  gap: 110px
}

.marketer-join h2 {
  font-size: clamp(38px, 4vw, 56px);
  line-height: 1.25
}

.marketer-login-panel {
  padding: 42px 30px
}

.marketer-login-panel a {
  background: #e9a21d
}

@media(max-width:900px) {

  .marketer-hero__layout,
  .marketer-benefits header,
  .marketer-steps .container,
  .marketer-join .container {
    grid-template-columns: 1fr
  }

  .marketer-hero {
    min-height: auto;
    padding: 66px 0
  }

  .marketer-hero__layout {
    gap: 45px
  }

  .marketer-orbit {
    transform: scale(.82);
    margin: 0 auto
  }

  .marketer-benefits header>.eyebrow,
  .marketer-benefits header>h2,
  .marketer-benefits header>p:last-child {
    grid-column: auto;
    grid-row: auto;
    text-align: right
  }

  .benefits-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .marketer-steps ol {
    grid-template-columns: repeat(3, 1fr)
  }

  .marketer-join .container {
    gap: 40px
  }
}

@media(max-width:560px) {
  .marketer-hero {
    overflow: hidden;
    padding: 48px 0
  }

  .marketer-hero h1 {
    font-size: 38px
  }

  .marketer-hero p:not(.eyebrow) {
    padding: 12px 14px;
    font-size: 10px
  }

  .marketer-actions {
    flex-wrap: wrap
  }

  .marketer-orbit {
    width: 270px;
    height: 270px;
    transform: none
  }

  .marketer-orbit__core {
    inset: 72px
  }

  .card-a {
    right: 84px
  }

  .card-b {
    right: -13px;
    top: 122px
  }

  .card-c {
    left: -15px;
    bottom: 27px
  }

  .orbit-card {
    padding: 8px
  }

  .marketer-benefits,
  .marketer-steps,
  .marketer-join {
    padding: 58px 0
  }

  .marketer-benefits header>h2,
  .marketer-steps h2,
  .marketer-join h2 {
    font-size: 31px
  }

  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 38px
  }

  .benefits-grid article {
    min-height: 220px
  }

  .marketer-benefits:after,
  .marketer-steps:after {
    display: none
  }

  .marketer-steps ol {
    grid-template-columns: 1fr;
    gap: 18px
  }

  .marketer-steps ol:before {
    display: none
  }

  .marketer-steps li {
    display: flex;
    align-items: center;
    gap: 18px;
    text-align: right
  }

  .marketer-steps li span {
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    margin: 0
  }

  .marketer-login-panel {
    padding: 28px 20px
  }
}