/* How it works uses the same Golos Text family as the challenge configurator. */
@font-face {
  font-family: "Friday Golos Text";
  src: url("/static/fonts/GolosText-Variable.ttf?v=20260912-golos01") format("truetype");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --ff-how-golos-heading: "Friday Golos Text", "Golos Text", "Friday Inter", Inter, Arial, sans-serif;
}

html body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-head
  h2:not(#ff-wb-bank-type-a):not(#ff-wb-bank-type-b):not(#ff-wb-bank-type-c),
html body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-panel
  .clarity-panel-copy
  h3:not(#ff-wb-bank-type-a):not(#ff-wb-bank-type-b):not(#ff-wb-bank-type-c) {
  --font-display: var(--ff-how-golos-heading);
  --font-cyrillic-display: var(--ff-how-golos-heading);
  font-family: var(--ff-how-golos-heading) !important;
  font-style: normal !important;
  line-height: 0.88 !important;
  letter-spacing: -0.04em !important;
  text-transform: uppercase !important;
  font-synthesis: none !important;
}

html body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-head {
  text-align: center !important;
}

html body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-head
  > div {
  display: grid !important;
  width: 100% !important;
  justify-items: center !important;
}

html body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-head
  h2:not(#ff-wb-bank-type-a):not(#ff-wb-bank-type-b):not(#ff-wb-bank-type-c) {
  width: max-content !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  justify-self: center !important;
  text-align: center !important;
  font-size: clamp(3.75rem, 5.1vw, 4.75rem) !important;
  font-weight: 800 !important;
  line-height: 0.94 !important;
}

html body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-panel
  .clarity-panel-copy
  h3:not(#ff-wb-bank-type-a):not(#ff-wb-bank-type-b):not(#ff-wb-bank-type-c) {
  max-width: 13ch !important;
  font-size: clamp(2.5rem, 3.25vw, 3.15rem) !important;
  font-weight: 750 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.035em !important;
}

html body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-panel
  .clarity-panel-copy
  p:not(#ff-wb-bank-copy-a):not(#ff-wb-bank-copy-b):not(#ff-wb-bank-copy-c),
html[data-site-theme] body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-panel
  .clarity-panel-copy
  p:not(#ff-wb-bank-copy-a):not(#ff-wb-bank-copy-b):not(#ff-wb-bank-copy-c) {
  font-family: var(--ff-how-golos-heading) !important;
  font-weight: 600 !important;
  line-height: 1.28 !important;
  letter-spacing: -0.022em !important;
}

html body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-panel
  .clarity-panel-step {
  font-family: var(--ff-how-golos-heading) !important;
  font-weight: 650 !important;
  letter-spacing: -0.035em !important;
  right: auto !important;
  left: 50% !important;
  color: rgba(255, 255, 255, 0.68) !important;
  text-align: center !important;
  transform: translateX(-50%) !important;
}

html body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-flow
  .clarity-panel,
html[data-site-theme] body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-flow
  .clarity-panel {
  min-height: clamp(248px, 18vw, 276px) !important;
}

html body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-panel-skill,
html[data-site-theme] body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-panel-skill {
  border-color: rgba(255, 91, 105, 0.58) !important;
  background:
    radial-gradient(circle at 84% 16%, rgba(255, 105, 118, 0.28), transparent 40%),
    linear-gradient(135deg, #5b1018 0%, #982432 50%, #25070c 100%) !important;
}

html body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-panel-capital,
html[data-site-theme] body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-panel-capital {
  border-color: rgba(255, 111, 91, 0.58) !important;
  background:
    radial-gradient(circle at 84% 16%, rgba(255, 139, 124, 0.26), transparent 40%),
    linear-gradient(135deg, #6b1718 0%, #bd342f 50%, #2c0909 100%) !important;
}

html body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-panel-scale,
html[data-site-theme] body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-panel-scale {
  border-color: rgba(232, 75, 118, 0.58) !important;
  background:
    radial-gradient(circle at 84% 16%, rgba(239, 90, 128, 0.25), transparent 40%),
    linear-gradient(135deg, #46101f 0%, #851e3b 50%, #210812 100%) !important;
}

html body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-panel
  .clarity-panel-image-stage,
html[data-site-theme] body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-panel
  .clarity-panel-image-stage,
html body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-panel
  .clarity-panel-shade,
html[data-site-theme] body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-panel
  .clarity-panel-shade {
  display: none !important;
}

html body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-panel
  .clarity-panel-copy,
html[data-site-theme] body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-panel
  .clarity-panel-copy {
  top: 50% !important;
  bottom: auto !important;
  inset-inline: 24px !important;
  width: auto !important;
  max-width: none !important;
  text-align: center !important;
  transform: translateY(-50%) !important;
}

html body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-panel
  .clarity-panel-copy
  h3:not(#ff-wb-bank-type-a):not(#ff-wb-bank-type-b):not(#ff-wb-bank-type-c) {
  margin-inline: auto !important;
  text-align: center !important;
}

html body.landing-rebuild main.site-main section#how-it-works.clarity-section
  .clarity-panel
  .clarity-panel-copy
  p {
  max-width: 30ch !important;
  margin-inline: auto !important;
  text-align: center !important;
}

@media (max-width: 900px) {
  html body.landing-rebuild main.site-main section#how-it-works.clarity-section
    .clarity-flow
    .clarity-panel,
  html[data-site-theme] body.landing-rebuild main.site-main section#how-it-works.clarity-section
    .clarity-flow
    .clarity-panel {
    min-height: 230px !important;
  }

  html body.landing-rebuild main.site-main section#how-it-works.clarity-section
    .clarity-head
    h2:not(#ff-wb-bank-type-a):not(#ff-wb-bank-type-b):not(#ff-wb-bank-type-c) {
    width: 100% !important;
    font-size: clamp(3.2rem, 7.4vw, 4rem) !important;
  }

  html body.landing-rebuild main.site-main section#how-it-works.clarity-section
    .clarity-panel
    .clarity-panel-copy
    h3:not(#ff-wb-bank-type-a):not(#ff-wb-bank-type-b):not(#ff-wb-bank-type-c) {
    font-size: clamp(2.35rem, 6vw, 2.85rem) !important;
  }
}

@media (max-width: 560px) {
  html body.landing-rebuild main.site-main section#how-it-works.clarity-section
    .clarity-flow
    .clarity-panel,
  html[data-site-theme] body.landing-rebuild main.site-main section#how-it-works.clarity-section
    .clarity-flow
    .clarity-panel {
    min-height: 210px !important;
  }

  html body.landing-rebuild main.site-main section#how-it-works.clarity-section
    .clarity-panel
    .clarity-panel-copy {
    inset-inline: 20px !important;
  }

  html body.landing-rebuild main.site-main section#how-it-works.clarity-section
    .clarity-head
    h2:not(#ff-wb-bank-type-a):not(#ff-wb-bank-type-b):not(#ff-wb-bank-type-c) {
    width: 100% !important;
    font-size: clamp(2.65rem, 11.28vw, 3.55rem) !important;
    line-height: 0.92 !important;
  }

  html body.landing-rebuild main.site-main section#how-it-works.clarity-section
    .clarity-panel
    .clarity-panel-copy
    h3:not(#ff-wb-bank-type-a):not(#ff-wb-bank-type-b):not(#ff-wb-bank-type-c) {
    max-width: 13ch !important;
    font-size: clamp(2.25rem, 10.26vw, 3.22rem) !important;
    line-height: 0.92 !important;
  }
}