/* ================= How it works ================= */
#custom-custom-4.aw-how {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 150px 0 130px;
  overflow: clip;
  background: #fff;
  color: var(--aw-ink);
  font-family: var(--aw-font);
}
#custom-custom-4.aw-how :is(h2, h3, p, a, span) { font-family: var(--aw-font); margin: 0; }
#custom-custom-4 .aw-how__intro { padding: 0 24px 90px; text-align: center; }
#custom-custom-4 .aw-how__title {
  font-size: min(104px, 7.4vw);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--aw-ink);
}
#custom-custom-4 .aw-how__accent { color: var(--aw-orange); }

#custom-custom-4 .aw-how__stage { position: relative; padding: 0 24px; }
#custom-custom-4 .aw-how__marquee {
  position: absolute;
  inset: 0 0 auto 0;
  transform: translateY(-14%);
  overflow: hidden;
  pointer-events: none;
}
#custom-custom-4 .aw-how__run { display: flex; width: max-content; animation: aw-how-run 60s linear infinite; }
#custom-custom-4 .aw-how__run span {
  font-size: min(300px, 22vw);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #e9ecf5;
}
@keyframes aw-how-run { to { transform: translate3d(-50%, 0, 0); } }

#custom-custom-4.aw-how ol.aw-how__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
#custom-custom-4.aw-how li.aw-how__step {
  margin: 0;
  font-family: var(--aw-font);
  display: flex;
  flex-direction: column;
  min-height: 380px;
  padding: 26px 40px 30px 26px;
  border-left: 1px solid var(--aw-orange);
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: var(--c-o, 1);
  transform: translate3d(0, var(--c-y, 0px), 0);
}
#custom-custom-4 .aw-how__num { font-size: 15px; font-weight: 800; letter-spacing: 0.04em; color: var(--aw-orange); }
#custom-custom-4 .aw-how__name {
  margin-top: 56px;
  max-width: 11ch;
  font-size: min(40px, 2.9vw);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--aw-ink);
}
#custom-custom-4 .aw-how__text {
  margin-top: auto;
  padding-top: 48px;
  max-width: 30ch;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(18, 17, 51, 0.78);
}
#custom-custom-4 .aw-how__actions { display: flex; justify-content: center; margin-top: 70px; padding: 0 24px; }
#custom-custom-4.aw-how a.aw-how__button,
[id="09-footer"].aw-foot a.aw-foot__cta {
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 0 30px;
  border-radius: 999px;
  background: var(--aw-orange);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.25s ease;
}
#custom-custom-4.aw-how a.aw-how__button:hover,
[id="09-footer"].aw-foot a.aw-foot__cta:hover { background: var(--aw-orange-deep); transform: translateY(-1px); }

/* ================= Footer ================= */
[id="09-footer"].aw-foot {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 140px 0 0;
  overflow: clip;
  background: #fff;
  color: var(--aw-ink);
  font-family: var(--aw-font);
  border-top: 1px solid rgba(18, 17, 51, 0.08);
}
[id="09-footer"].aw-foot :is(h2, p, a, span, nav) { font-family: var(--aw-font); margin: 0; }
[id="09-footer"] .aw-foot__lead {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
[id="09-footer"] .aw-foot__title {
  font-size: min(64px, 4.6vw);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--aw-ink);
}
[id="09-footer"] .aw-foot__accent { color: var(--aw-orange); }
[id="09-footer"] .aw-foot__text {
  max-width: 52ch;
  margin-top: 22px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.55;
  color: rgba(18, 17, 51, 0.72);
}
[id="09-footer"].aw-foot a.aw-foot__cta { margin-top: 36px; }

[id="09-footer"] .aw-foot__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr);
  gap: 32px;
  max-width: 1240px;
  margin: 120px auto 0;
  padding: 44px 24px 0;
  border-top: 1px solid rgba(18, 17, 51, 0.12);
}
[id="09-footer"] .aw-foot__col { display: flex; flex-direction: column; gap: 12px; }
[id="09-footer"] .aw-foot__col--end { align-items: flex-end; text-align: right; }
[id="09-footer"] .aw-foot__label {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(18, 17, 51, 0.45);
}
[id="09-footer"] .aw-foot__link,
[id="09-footer"] .aw-foot__line {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--aw-ink);
  text-decoration: none;
}
[id="09-footer"] .aw-foot__line { font-weight: 500; color: rgba(18, 17, 51, 0.75); }
[id="09-footer"] .aw-foot__link:hover { color: var(--aw-orange); }

[id="09-footer"] .aw-foot__base {
  max-width: 1240px;
  margin: 56px auto 0;
  padding: 0 24px;
}
[id="09-footer"] .aw-foot__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 800;
  color: var(--aw-ink);
  text-decoration: none;
}
[id="09-footer"] .aw-foot__logo { flex: none; display: block; width: 28px; height: 28px; }

[id="09-footer"] .aw-foot__marquee {
  margin-top: 40px;
  height: min(240px, 17vw);
  overflow: hidden;
  pointer-events: none;
}
[id="09-footer"] .aw-foot__run { display: flex; width: max-content; animation: aw-foot-run 50s linear infinite; }
[id="09-footer"] .aw-foot__run span {
  font-size: min(330px, 24vw);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #e9ecf5;
}
@keyframes aw-foot-run { to { transform: translate3d(-50%, 0, 0); } }

@media (max-width: 900px) {
  #custom-custom-4.aw-how { padding: 110px 0 100px; }
  #custom-custom-4 .aw-how__title { font-size: 15vw; }
  #custom-custom-4 .aw-how__intro { padding-bottom: 60px; }
  #custom-custom-4.aw-how ol.aw-how__steps { grid-template-columns: 1fr; gap: 18px; max-width: 520px; }
  #custom-custom-4.aw-how li.aw-how__step {
  margin: 0;
  font-family: var(--aw-font); min-height: 0; padding: 22px 24px 26px; }
  #custom-custom-4 .aw-how__name { margin-top: 28px; font-size: 32px; max-width: none; }
  #custom-custom-4 .aw-how__text { padding-top: 18px; }

  [id="09-footer"].aw-foot { padding-top: 100px; }
  [id="09-footer"] .aw-foot__title { font-size: 9.5vw; }
  [id="09-footer"] .aw-foot__grid { grid-template-columns: 1fr 1fr; margin-top: 80px; gap: 36px 24px; }
  [id="09-footer"] .aw-foot__col--end { grid-column: 1 / -1; align-items: flex-start; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  #custom-custom-4 .aw-how__run, [id="09-footer"] .aw-foot__run { animation: none; }
}

html.wz-editing #custom-custom-4.aw-how li.aw-how__step {
  margin: 0;
  font-family: var(--aw-font); opacity: 1 !important; transform: none !important; }

/* Social profile buttons share the footer's brand colours. */
[id="09-footer"] .aw-foot__base { display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
[id="09-footer"] .aw-foot__social { display:flex; gap:12px; flex-wrap:wrap; }
[id="09-footer"] .aw-foot__social-link { display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:10px 16px; border:1px solid currentColor; border-radius:10px; color:inherit; font:500 14px Poppins,sans-serif; text-decoration:none; transition:background-color 180ms,color 180ms; }
[id="09-footer"] .aw-foot__social-link svg { width:20px; height:20px; flex:none; }
[id="09-footer"] .aw-foot__social-link[href]:hover { background:#5bc2c0; color:#2e2c79; }
[id="09-footer"] .aw-foot__social-link:focus-visible { outline:2px solid #5bc2c0; outline-offset:4px; }
@media(max-width:600px) { [id="09-footer"] .aw-foot__base { align-items:flex-start; flex-direction:column; gap:18px; } }
