Klarna 디자인 시스템

<div class="c-button-primary-scope">
  <a class="c-button-primary" href="#">lorem ipsum d</a>
</div>

.c-button-primary-scope {
  background-color: #FFFFFF;
  color: #F9F8F5;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-primary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 15px 20px;
  position: relative;
  background-color: #FFA8CD;
  color: #0B051D;
  border: 1px solid transparent;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-button-primary:hover {
  background-color: #F5A1C5;
}

.c-button-primary:focus {
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

<div class="c-button-secondary-scope">
  <button class="c-button-secondary" type="button">
    <div class="c-button-secondary__group">
      <span class="c-button-secondary__icon" aria-hidden="true"></span>
      <div class="c-button-secondary__label">lo</div>
    </div>
  </button>
</div>

.c-button-secondary-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-secondary {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 11px 16px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 1px solid #E2E2E7;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-button-secondary__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  position: relative;
}

.c-button-secondary__icon {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  border-radius: 99999px;
}

.c-button-secondary__label {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
}

.c-button-secondary:hover {
  background-color: #0000000A;
}

.c-button-secondary:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

<div class="c-button-ghost-scope">
  <button class="c-button-ghost" type="button">
    <span class="c-button-ghost__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-ghost-scope {
  background-color: #EFECFF;
  color: #0B051D;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-ghost {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 11px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 1px solid transparent;
  border-radius: 99999px;
  cursor: pointer;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  white-space: pre-line;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-button-ghost__icon {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-button-ghost:hover {
  background-color: #0000000A;
}

.c-button-ghost:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

<div class="c-button-ghost-2-scope">
  <button class="c-button-ghost-2" type="button">
    <div class="c-button-ghost-2__group">
      <div class="c-button-ghost-2__group-2">
        <div class="c-button-ghost-2__group-3">
          <div class="c-button-ghost-2__group-4"></div>
          <div class="c-button-ghost-2__group-5"></div>
          <div class="c-button-ghost-2__group-6"></div>
        </div>
      </div>
    </div>
  </button>
</div>

.c-button-ghost-2-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-ghost-2 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: #FFA8CD;
  color: #0B051D;
  border: 0;
  border-radius: 48px 48px 16px;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition: border-radius 0.3s ease-out;
}

.c-button-ghost-2__group {
  display: block;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  transition-duration: 0.18s, 0.18s;
  transition-timing-function: ease, ease;
  transition-property: opacity, transform;
}

.c-button-ghost-2__group-2 {
  display: block;
  box-sizing: border-box;
  width: 105px;
  position: absolute;
  right: 28px;
  bottom: 16px;
}

.c-button-ghost-2__group-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: 20px;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-button-ghost-2__group-4 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.c-button-ghost-2__group-5 {
  display: flex;
  flex-direction: column;
  align-self: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  line-height: 0px;
}

.c-button-ghost-2__group-6 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.c-button-ghost-2:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

<div class="c-button-primary-2-scope">
  <a class="c-button-primary-2" href="#">lorem ipsum do</a>
</div>

.c-button-primary-2-scope {
  background-color: #0B051D;
  color: #FFFFFF;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-primary-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 15px 20px;
  position: relative;
  background-color: #FFFFFF;
  color: #000000;
  border: 1px solid transparent;
  border-radius: 99999px;
  cursor: pointer;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-button-primary-2:hover {
  background-color: #F5F5F5;
}

.c-button-primary-2:focus {
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

<div class="c-button-ghost-3-scope">
  <button class="c-button-ghost-3" type="button">
    <span class="c-button-ghost-3__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-ghost-3-scope {
  background-color: #0B051D;
  color: #FFFFFF;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-ghost-3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 11px;
  position: relative;
  background-color: transparent;
  color: #FFFFFF;
  border: 1px solid transparent;
  border-radius: 99999px;
  cursor: pointer;
  font-family: -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-button-ghost-3__icon {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-button-ghost-3:hover {
  background-color: #FFFFFF14;
}

.c-button-ghost-3:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

<div class="c-button-ghost-4-scope">
  <button class="c-button-ghost-4" type="button">
    <div class="c-button-ghost-4__group">
      <span class="c-button-ghost-4__icon" aria-hidden="true"></span>
      <div class="c-button-ghost-4__label">lo</div>
    </div>
  </button>
</div>

.c-button-ghost-4-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-ghost-4 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 11px 16px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 1px solid #E2E2E7;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-button-ghost-4__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  position: relative;
}

.c-button-ghost-4__icon {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  border-radius: 99999px;
}

.c-button-ghost-4__label {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
}

.c-button-ghost-4:hover {
  background-color: #0000000A;
}

.c-button-ghost-4:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

<div class="c-button-ghost-5-scope">
  <button class="c-button-ghost-5" type="button">
    <div class="c-button-ghost-5__group">
      <div class="c-button-ghost-5__group-2">
        <div class="c-button-ghost-5__group-3">
          <div class="c-button-ghost-5__group-4"></div>
          <div class="c-button-ghost-5__group-5"></div>
          <div class="c-button-ghost-5__group-6"></div>
        </div>
      </div>
    </div>
  </button>
</div>

.c-button-ghost-5-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-ghost-5 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: #FFA8CD;
  color: #0B051D;
  border: 0;
  border-radius: 48px 48px 16px;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition: border-radius 0.3s ease-out;
}

.c-button-ghost-5__group {
  display: block;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  transition-duration: 0.18s, 0.18s;
  transition-timing-function: ease, ease;
  transition-property: opacity, transform;
}

.c-button-ghost-5__group-2 {
  display: block;
  box-sizing: border-box;
  width: 105px;
  position: absolute;
  right: 28px;
  bottom: 16px;
}

.c-button-ghost-5__group-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  gap: 20px;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-button-ghost-5__group-4 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.c-button-ghost-5__group-5 {
  display: flex;
  flex-direction: column;
  align-self: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  line-height: 0px;
}

.c-button-ghost-5__group-6 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.c-button-ghost-5:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

<div class="c-button-primary-3-scope">
  <a class="c-button-primary-3" href="#">lorem ipsum dolor sit amet c</a>
</div>

.c-button-primary-3-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-primary-3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 15px 20px;
  position: relative;
  background-color: #0B051D;
  color: #F9F8F5;
  border: 1px solid transparent;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-button-primary-3:hover {
  background-color: #1F192F;
}

.c-button-primary-3:focus {
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

<div class="c-button-secondary-2-scope">
  <a class="c-button-secondary-2" href="#">lorem ipsum dol</a>
</div>

.c-button-secondary-2-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-secondary-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 15px 20px;
  position: relative;
  background-color: #FFA8CD;
  color: #0B051D;
  border: 1px solid transparent;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  text-decoration-line: none;
  text-align: center;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-button-secondary-2:focus {
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

<div class="c-card-scope">
  <div class="c-card">
    <div class="c-card__group">
      <div class="c-card__group-2">
        <span class="c-card__group-3">
          <span class="c-card__group-4"></span>
        </span>
        <div class="c-card__group-5">
          <span class="c-card__media" aria-hidden="true"></span>
          <span class="c-card__text">lorem ipsum dolor si</span>
        </div>
      </div>
    </div>
  </div>
</div>

.c-card-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card__group {
  display: block;
  box-sizing: border-box;
}

.c-card__group-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
}

.c-card__group-3 {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  font-family: "Klarna Title", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 43.2px;
  font-weight: 700;
  line-height: 41.04px;
}

.c-card__group-4 {
  display: inline;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
}

.c-card__group-5 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  position: relative;
}

.c-card__media {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 17px;
  height: 17px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-card__text {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  color: #282636;
  font-size: 14px;
  text-align: center;
}

.c-card:hover {
  transform-origin: 78.6406px 30.5234px;
}

.c-card:focus {
  transform-origin: 78.6406px 30.5234px;
}

<div class="c-card-2-scope">
  <div class="c-card-2">
    <div class="c-card-2__group">
      <div class="c-card-2__group-2">
        <span class="c-card-2__media" aria-hidden="true"></span>
      </div>
      <div class="c-card-2__group-3">
        <div class="c-card-2__group-4">
          <div class="c-card-2__group-5"></div>
        </div>
      </div>
    </div>
  </div>
</div>

.c-card-2-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-2 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: absolute;
  top: 0px;
  left: 0px;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-2__group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: 24px;
}

.c-card-2__group-2 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.c-card-2__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 467px;
  height: 584px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-card-2__group-3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 40px;
  position: absolute;
  right: 0px;
  bottom: 0px;
  left: 0px;
}

.c-card-2__group-4 {
  display: flex;
  box-sizing: border-box;
  padding: 8px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #0B051D4D;
  border-radius: 32px;
  backdrop-filter: blur(10px);
}

.c-card-2__group-5 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 2px 16px;
  position: relative;
}

.c-card-2:hover {
  z-index: 5;
  opacity: 0.904788;
  transform: matrix(0.971437, 0, 0, 0.971437, 0, 0);
}

.c-card-2:focus {
  z-index: 5;
  opacity: 0.860659;
  transform: matrix(0.958198, 0, 0, 0.958198, 0, 0);
}

<div class="c-card-3-scope">
  <div class="c-card-3">
    <div class="c-card-3__group">
      <div class="c-card-3__group-2">
        <span class="c-card-3__group-3">
          <a class="c-card-3__link" href="#"></a>
          <div class="c-card-3__group-4"></div>
        </span>
      </div>
    </div>
  </div>
</div>

.c-card-3-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-3 {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  position: relative;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-3__group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  position: relative;
}

.c-card-3__group-2 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
}

.c-card-3__group-3 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: 100%;
  position: relative;
  background-color: #FFFFFF;
  border-radius: 16px;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-card-3__link {
  display: block;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  color: #0B051D;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: #0B051D;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-card-3__group-4 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 16px;
  box-sizing: border-box;
  position: relative;
}

<div class="c-card-4-scope">
  <div class="c-card-4">
    <div class="c-card-4__group">
      <div class="c-card-4__group-2">
        <span class="c-card-4__group-3">
          <div class="c-card-4__group-4"></div>
          <div class="c-card-4__group-5"></div>
        </span>
      </div>
    </div>
  </div>
</div>

.c-card-4-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-4 {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  position: relative;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-4__group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  position: relative;
}

.c-card-4__group-2 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
}

.c-card-4__group-3 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: 100%;
  position: relative;
  background-color: #FFFFFF;
  border-radius: 16px;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-card-4__group-4 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: 24px;
}

.c-card-4__group-5 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 16px;
  box-sizing: border-box;
  position: relative;
}

<div class="c-card-5-scope">
  <div class="c-card-5">
    <div class="c-card-5__group">
      <div class="c-card-5__group-2">
        <span class="c-card-5__group-3">
          <span class="c-card-5__icon" aria-hidden="true"></span>
        </span>
      </div>
    </div>
    <div class="c-card-5__group-4">
      <h4 class="c-card-5__title">lorem ipsum dolor si</h4>
      <div class="c-card-5__group-2">
        <div class="c-card-5__group-5">
          <p class="c-card-5__body"></p>
        </div>
      </div>
    </div>
  </div>
</div>

.c-card-5-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-5 {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  position: relative;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-5__group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  margin-bottom: 24px;
}

.c-card-5__group-2 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
}

.c-card-5__group-3 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
}

.c-card-5__icon {
  flex-shrink: 0;
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-card-5__group-4 {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
  position: relative;
}

.c-card-5__title {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  margin: -12px 0px -4px;
  position: relative;
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.c-card-5__group-5 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  max-width: 1760px;
  position: relative;
  color: #0E0E0F;
  text-align: left;
}

.c-card-5__body {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0px;
  position: relative;
  font-family: "Klarna Text", sans-serif;
  line-height: 24px;
  letter-spacing: -0.048px;
}

<div class="c-card-6-scope">
  <div class="c-card-6">
    <div class="c-card-6__group">
      <div class="c-card-6__group-2">
        <div class="c-card-6__group-3">
          <h3 class="c-card-6__title">lorem ipsum dolor sit a</h3>
        </div>
        <div class="c-card-6__text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor</div>
      </div>
    </div>
  </div>
</div>

.c-card-6-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-6 {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  position: relative;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-6__group {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-card-6__group-2 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-card-6__group-3 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-card-6__title {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  max-width: 700px;
  margin: -12px 0px;
  position: relative;
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  text-align: left;
  padding-top: 12px;
  padding-bottom: 12px;
}

.c-card-6__text {
  display: block;
  flex-direction: column;
  flex-grow: 1;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  color: #282636;
  line-height: 24px;
}

<div class="c-card-7-scope">
  <div class="c-card-7">
    <div class="c-card-7__group">
      <div class="c-card-7__group-2">
        <span class="c-card-7__group-3">
          <span class="c-card-7__icon" aria-hidden="true"></span>
        </span>
      </div>
    </div>
    <div class="c-card-7__group-4">
      <h3 class="c-card-7__title">lorem ipsum dolor sit amet consect</h3>
      <div class="c-card-7__group-2">
        <div class="c-card-7__group-5">
          <p class="c-card-7__body"></p>
        </div>
      </div>
    </div>
  </div>
</div>

.c-card-7-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-7 {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 100%;
  position: relative;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-7__group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  margin-bottom: 24px;
}

.c-card-7__group-2 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
}

.c-card-7__group-3 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
}

.c-card-7__icon {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-card-7__group-4 {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
  position: relative;
}

.c-card-7__title {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  margin: -12px 0px -4px;
  position: relative;
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.c-card-7__group-5 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  max-width: 1760px;
  position: relative;
  color: #0E0E0F;
  text-align: left;
}

.c-card-7__body {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0px;
  position: relative;
  font-family: "Klarna Text", sans-serif;
  line-height: 24px;
  letter-spacing: -0.048px;
}

<div class="c-card-8-scope">
  <div class="c-card-8">
    <section class="c-card-8__group">
      <div class="c-card-8__group-2">
        <div class="c-card-8__group-3"></div>
      </div>
      <div class="c-card-8__group-4">
        <div class="c-card-8__group-5">
          <h1 class="c-card-8__title">lorem ipsum dolor sit amet consectetur adipi</h1>
          <div class="c-card-8__group-6"></div>
        </div>
      </div>
    </section>
  </div>
</div>

.c-card-8-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-8 {
  display: inline-flex;
  flex-direction: column;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-8__group {
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-card-8__group-2 {
  display: flex;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
}

.c-card-8__group-3 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-card-8__group-4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 40px 40px 32px;
  position: relative;
}

.c-card-8__group-5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  box-sizing: border-box;
  max-width: min(50% - 16px, 600px);
  position: relative;
  color: #F9F8F5;
}

.c-card-8__title {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0px 0px 24px;
  position: relative;
  font-family: "Klarna Title", sans-serif;
  font-size: 84px;
  font-weight: 400;
  line-height: 93.24px;
  letter-spacing: 0.32px;
  text-align: left;
}

.c-card-8__group-6 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  max-width: 1760px;
  position: relative;
  color: #0E0E0F;
  text-align: left;
}

.c-card-8:hover {
  flex-shrink: 1;
  gap: 16px;
  max-width: 1760px;
  padding: 32px 40px 0px;
  margin: 0px auto;
  background-color: transparent;
  text-align: start;
}

.c-card-8:focus {
  flex-shrink: 1;
  gap: 16px;
  max-width: 1760px;
  padding: 32px 40px 0px;
  margin: 0px auto;
  background-color: transparent;
  text-align: start;
}

<div class="c-accordion-scope">
  <button class="c-accordion" type="button">
    <div class="c-accordion__group">
      <span class="c-accordion__text">lorem ipsum dolor sit</span>
    </div>
  </button>
</div>

.c-accordion-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-accordion {
  display: inline-flex;
  flex-direction: column;
  align-self: flex-start;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  list-style-type: none;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-accordion__group {
  display: block;
  box-sizing: border-box;
  opacity: 0.931857;
  transform: matrix(1, 0, 0, 1, 0, 1.26273);
}

.c-accordion__text {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  font-family: "Klarna Title", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 52px;
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: -40px;
  margin-bottom: -28px;
}

.c-accordion:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

<div class="c-accordion-2-scope">
  <button class="c-accordion-2" type="button">
    <div class="c-accordion-2__group">
      <div class="c-accordion-2__group-2">
        <span class="c-accordion-2__text">lorem ipsum dolor</span>
      </div>
    </div>
  </button>
</div>

.c-accordion-2-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-accordion-2 {
  display: inline-flex;
  flex-direction: column;
  align-self: flex-start;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  list-style-type: none;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-accordion-2__group {
  display: block;
  box-sizing: border-box;
  opacity: 0.997777;
  transform: matrix(1, 0, 0, 1, 0, 0.0435746);
}

.c-accordion-2__group-2 {
  display: block;
  box-sizing: border-box;
  color: #96959F;
}

.c-accordion-2__text {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  font-family: "Klarna Title", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 52px;
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: -40px;
  margin-bottom: -28px;
}

.c-accordion-2:hover {
  opacity: 0.84;
}

.c-accordion-2:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

<div class="c-accordion-3-scope">
  <button class="c-accordion-3" type="button">
    <div class="c-accordion-3__group">
      <div class="c-accordion-3__group-2">
        <span class="c-accordion-3__text">lorem ipsum dolor</span>
      </div>
    </div>
  </button>
</div>

.c-accordion-3-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-accordion-3 {
  display: inline-flex;
  flex-direction: column;
  align-self: flex-start;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  list-style-type: none;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-accordion-3__group {
  display: block;
  box-sizing: border-box;
}

.c-accordion-3__group-2 {
  display: block;
  box-sizing: border-box;
  color: #96959F;
}

.c-accordion-3__text {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  font-family: "Klarna Title", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 52px;
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: -40px;
  margin-bottom: -28px;
}

.c-accordion-3:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

<div class="c-navigation-scope">
  <nav class="c-navigation">
    <div class="c-navigation__group">
      <a class="c-navigation__cta" href="#">
        <span class="c-navigation__icon" aria-hidden="true"></span>
      </a>
    </div>
    <ul class="c-navigation__list">
      <li class="c-navigation__item">
        <a class="c-navigation__cta-2" href="#">lorem ipsum dol</a>
      </li>
      <li class="c-navigation__item">
        <a class="c-navigation__cta-2" href="#">lorem ip</a>
      </li>
      <li class="c-navigation__item">
        <a class="c-navigation__cta-2" href="#">lor</a>
      </li>
      <li class="c-navigation__item">
        <a class="c-navigation__cta-2" href="#">lorem</a>
      </li>
    </ul>
    <div class="c-navigation__group-2">
      <div class="c-navigation__group-3">
        <button class="c-navigation__button" type="button">
          <div class="c-navigation__group-4"></div>
        </button>
        <button class="c-navigation__button-2" type="button">
          <div class="c-navigation__group-5"></div>
        </button>
        <a class="c-navigation__cta-3" href="#">
          <div class="c-navigation__group-4"></div>
        </a>
      </div>
    </div>
  </nav>
</div>

.c-navigation-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-navigation {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 48px;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 1680px;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-navigation__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 16px;
  box-sizing: border-box;
  position: relative;
}

.c-navigation__cta {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  cursor: pointer;
  line-height: 0px;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-navigation__icon {
  display: block;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 91px;
  height: 22px;
  aspect-ratio: 4.13636 / 1;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-navigation__list {
  display: flex;
  align-items: center;
  flex-grow: 1;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow-x: auto;
  overflow-y: auto;
  list-style-type: none;
}

.c-navigation__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 100%;
  padding-right: 4px;
  padding-left: 4px;
}

.c-navigation__cta-2 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  padding: 8px 12px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border-radius: 99999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  white-space: nowrap;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-navigation__group-2 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 32px;
  box-sizing: border-box;
  position: relative;
  margin-left: auto;
}

.c-navigation__group-3 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.c-navigation__button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 10px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 1px solid #C4C3CA;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-navigation__group-4 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
  box-sizing: border-box;
  position: relative;
}

.c-navigation__button-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 16px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 1px solid #E2E2E7;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-navigation__group-5 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  position: relative;
}

.c-navigation__cta-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 20px;
  position: relative;
  background-color: #0B051D;
  color: #F9F8F5;
  border-radius: 99999px;
  cursor: pointer;
  font-weight: 500;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

<div class="c-navigation-2-scope">
  <nav class="c-navigation-2">
    <div class="c-navigation-2__group">
      <a class="c-navigation-2__cta" href="#">
        <span class="c-navigation-2__icon" aria-hidden="true"></span>
      </a>
    </div>
    <ul class="c-navigation-2__list">
      <li class="c-navigation-2__item">
        <a class="c-navigation-2__cta-2" href="#">lorem ipsum dol</a>
      </li>
      <li class="c-navigation-2__item">
        <a class="c-navigation-2__cta-2" href="#">lorem ip</a>
      </li>
      <li class="c-navigation-2__item">
        <a class="c-navigation-2__cta-2" href="#">lor</a>
      </li>
      <li class="c-navigation-2__item">
        <a class="c-navigation-2__cta-2" href="#">lorem</a>
      </li>
    </ul>
    <div class="c-navigation-2__group-2">
      <div class="c-navigation-2__group-3">
        <button class="c-navigation-2__button" type="button">
          <div class="c-navigation-2__group-4"></div>
        </button>
        <a class="c-navigation-2__cta-3" href="#">
          <div class="c-navigation-2__group-5"></div>
        </a>
      </div>
    </div>
  </nav>
</div>

.c-navigation-2-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-navigation-2 {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 48px;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 1680px;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-navigation-2__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 16px;
  box-sizing: border-box;
  position: relative;
}

.c-navigation-2__cta {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  cursor: pointer;
  line-height: 0px;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-navigation-2__icon {
  display: block;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 91px;
  height: 22px;
  aspect-ratio: 4.13636 / 1;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-navigation-2__list {
  display: flex;
  align-items: center;
  flex-grow: 1;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow-x: auto;
  overflow-y: auto;
  list-style-type: none;
}

.c-navigation-2__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 100%;
  padding-right: 4px;
  padding-left: 4px;
}

.c-navigation-2__cta-2 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  padding: 8px 12px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border-radius: 99999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  white-space: nowrap;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-navigation-2__group-2 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 32px;
  box-sizing: border-box;
  position: relative;
  margin-left: auto;
}

.c-navigation-2__group-3 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.c-navigation-2__button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 16px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 1px solid #E2E2E7;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-navigation-2__group-4 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  position: relative;
}

.c-navigation-2__cta-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 20px;
  position: relative;
  background-color: #0B051D;
  color: #F9F8F5;
  border-radius: 99999px;
  cursor: pointer;
  font-weight: 500;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-navigation-2__group-5 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
  box-sizing: border-box;
  position: relative;
}

<div class="c-pagination-scope">
  <button class="c-pagination" type="button">
    <div class="c-pagination__group">
      <div class="c-pagination__group-2"></div>
    </div>
  </button>
</div>

.c-pagination-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-pagination {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 4px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.3s;
  transition-timing-function: ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, padding;
}

.c-pagination__group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 6px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #96959F;
  border-radius: 99999px;
  transition-duration: 0.3s, 0.3s, 0.3s;
  transition-timing-function: ease, ease, ease;
  transition-property: background-color, width, height;
}

.c-pagination__group-2 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  background-color: #0B051D;
  transform: matrix(1, 0, 0, 1, -16.4842, 0);
  transition-duration: 0.3s, 0.3s, 0.3s;
  transition-timing-function: ease, ease, ease;
  transition-property: background-color, width, height;
}

.c-pagination:hover {
  opacity: 0.84;
}

.c-pagination:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

<div class="c-pagination-2-scope">
  <button class="c-pagination-2" type="button">
    <div class="c-pagination-2__group">
      <div class="c-pagination-2__group-2"></div>
    </div>
  </button>
</div>

.c-pagination-2-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-pagination-2 {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 4px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.3s;
  transition-timing-function: ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, padding;
}

.c-pagination-2__group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #96959F;
  border-radius: 99999px;
  transition-duration: 0.3s, 0.3s, 0.3s;
  transition-timing-function: ease, ease, ease;
  transition-property: background-color, width, height;
}

.c-pagination-2__group-2 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  background-color: #96959F;
  transition-duration: 0.3s, 0.3s, 0.3s;
  transition-timing-function: ease, ease, ease;
  transition-property: background-color, width, height;
}

.c-pagination-2:hover {
  opacity: 0.84;
}

.c-pagination-2:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

<div class="c-header-landing-scope">
  <header class="c-header-landing">
    <nav class="c-header-landing__nav">
      <div class="c-header-landing__group">
        <a class="c-header-landing__nav-link" href="#">
          <span class="c-header-landing__nav-link-icon" aria-hidden="true"></span>
        </a>
      </div>
      <ul class="c-header-landing__nav-list">
        <li class="c-header-landing__nav-item">
          <a class="c-header-landing__nav-link-2" href="#">lorem ipsum dol</a>
        </li>
        <li class="c-header-landing__nav-item">
          <a class="c-header-landing__nav-link-2" href="#">lorem ip</a>
        </li>
        <li class="c-header-landing__nav-item">
          <a class="c-header-landing__nav-link-2" href="#">lor</a>
        </li>
        <li class="c-header-landing__nav-item">
          <a class="c-header-landing__nav-link-2" href="#">lorem</a>
        </li>
      </ul>
      <div class="c-header-landing__group-2">
        <div class="c-header-landing__group-3">
          <button class="c-header-landing__menu-toggle" type="button">
            <div class="c-header-landing__group-4">
              <span class="c-header-landing__icon" aria-hidden="true"></span>
            </div>
          </button>
          <button class="c-header-landing__cta" type="button">
            <div class="c-header-landing__group-5">
              <span class="c-header-landing__icon-2" aria-hidden="true"></span>
              <div class="c-header-landing__inner">lo</div>
            </div>
          </button>
          <a class="c-header-landing__nav-link-3" href="#">
            <div class="c-header-landing__group-4">
              <span class="c-header-landing__icon" aria-hidden="true"></span>
              <span class="c-header-landing__inner-2">lorem</span>
            </div>
          </a>
        </div>
      </div>
    </nav>
  </header>
</div>

.c-header-landing-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-header-landing {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 72px;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-header-landing__nav {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 48px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: 1680px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-landing__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 16px;
  box-sizing: border-box;
  position: relative;
}

.c-header-landing__nav-link {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  cursor: pointer;
  line-height: 0px;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-header-landing__nav-link-icon {
  display: block;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 91px;
  height: 22px;
  aspect-ratio: 4.13636 / 1;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing__nav-list {
  display: flex;
  align-items: center;
  flex-grow: 1;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow-x: auto;
  overflow-y: auto;
  list-style-type: none;
}

.c-header-landing__nav-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 100%;
  padding-right: 4px;
  padding-left: 4px;
}

.c-header-landing__nav-link-2 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  padding: 8px 12px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border-radius: 99999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  white-space: nowrap;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-header-landing__group-2 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 32px;
  box-sizing: border-box;
  position: relative;
  margin-left: auto;
}

.c-header-landing__group-3 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.c-header-landing__menu-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 10px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 1px solid #C4C3CA;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-header-landing__group-4 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
  box-sizing: border-box;
  position: relative;
}

.c-header-landing__icon {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 16px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 1px solid #E2E2E7;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-header-landing__group-5 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  position: relative;
}

.c-header-landing__icon-2 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  border-radius: 99999px;
}

.c-header-landing__inner {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
}

.c-header-landing__nav-link-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 20px;
  position: relative;
  background-color: #0B051D;
  color: #F9F8F5;
  border-radius: 99999px;
  cursor: pointer;
  font-weight: 500;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-header-landing__inner-2 {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
}

.c-header-landing__nav-link:focus {
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

.c-header-landing__nav-link-2:hover {
  background-color: #E5E3F5;
}

.c-header-landing__nav-link-2:focus {
  background-color: #EFECFF;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

.c-header-landing__menu-toggle:hover {
  background-color: #F3F3F5;
}

.c-header-landing__menu-toggle:focus {
  background-color: #F3F3F5;
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

.c-header-landing__cta:hover {
  background-color: #0000000A;
}

.c-header-landing__cta:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

.c-header-landing__nav-link-3:hover {
  background-color: #2C2242;
}

.c-header-landing__nav-link-3:focus {
  background-color: #2C2242;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

<div class="c-header-landing-mobile-scope">
  <header class="c-header-landing-mobile">
    <nav class="c-header-landing-mobile__nav">
      <div class="c-header-landing-mobile__group">
        <button class="c-header-landing-mobile__menu-toggle" type="button">
          <span class="c-header-landing-mobile__menu-toggle-icon" aria-hidden="true"></span>
        </button>
        <a class="c-header-landing-mobile__nav-link" href="#">
          <span class="c-header-landing-mobile__nav-link-icon" aria-hidden="true"></span>
        </a>
      </div>
      <div class="c-header-landing-mobile__group-2">
        <div class="c-header-landing-mobile__group-3">
          <button class="c-header-landing-mobile__menu-toggle-2" type="button">
            <div class="c-header-landing-mobile__group-4">
              <span class="c-header-landing-mobile__icon" aria-hidden="true"></span>
            </div>
          </button>
          <a class="c-header-landing-mobile__nav-link-2" href="#">
            <div class="c-header-landing-mobile__group-4">
              <span class="c-header-landing-mobile__icon" aria-hidden="true"></span>
            </div>
          </a>
        </div>
      </div>
    </nav>
  </header>
</div>

.c-header-landing-mobile-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-header-landing-mobile {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 72px;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-header-landing-mobile__nav {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 48px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: 1680px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-landing-mobile__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 16px;
  box-sizing: border-box;
  position: relative;
}

.c-header-landing-mobile__menu-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  width: 52px;
  height: 40px;
  padding: 11px 16px;
  position: relative;
  background-color: #FFA8CD;
  color: #0B051D;
  border: 0;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-header-landing-mobile__menu-toggle-icon {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing-mobile__nav-link {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  cursor: pointer;
  line-height: 0px;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-header-landing-mobile__nav-link-icon {
  display: block;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 91px;
  height: 22px;
  aspect-ratio: 4.13636 / 1;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing-mobile__group-2 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
  gap: 32px;
  box-sizing: border-box;
  position: relative;
  margin-left: auto;
}

.c-header-landing-mobile__group-3 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.c-header-landing-mobile__menu-toggle-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 10px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 1px solid #C4C3CA;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-header-landing-mobile__group-4 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
  box-sizing: border-box;
  position: relative;
}

.c-header-landing-mobile__icon {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-landing-mobile__nav-link-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 12px;
  position: relative;
  background-color: #0B051D;
  color: #F9F8F5;
  border-radius: 99999px;
  cursor: pointer;
  font-weight: 500;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-header-landing-mobile__menu-toggle:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

.c-header-landing-mobile__nav-link:focus {
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

.c-header-landing-mobile__menu-toggle-2:hover {
  background-color: #F3F3F5;
}

.c-header-landing-mobile__menu-toggle-2:focus {
  background-color: #F3F3F5;
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

.c-header-landing-mobile__nav-link-2:hover {
  background-color: #2C2242;
}

.c-header-landing-mobile__nav-link-2:focus {
  background-color: #2C2242;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

<div class="c-header-inner-scope">
  <header class="c-header-inner">
    <nav class="c-header-inner__nav">
      <div class="c-header-inner__group">
        <a class="c-header-inner__nav-link" href="#">
          <span class="c-header-inner__nav-link-icon" aria-hidden="true"></span>
        </a>
      </div>
      <ul class="c-header-inner__nav-list">
        <li class="c-header-inner__nav-item">
          <a class="c-header-inner__nav-link-2" href="#">lorem ipsum dol</a>
        </li>
        <li class="c-header-inner__nav-item">
          <a class="c-header-inner__nav-link-2" href="#">lorem ip</a>
        </li>
        <li class="c-header-inner__nav-item">
          <a class="c-header-inner__nav-link-2" href="#">lor</a>
        </li>
        <li class="c-header-inner__nav-item">
          <a class="c-header-inner__nav-link-2" href="#">lorem</a>
        </li>
      </ul>
      <div class="c-header-inner__group-2">
        <div class="c-header-inner__group-3">
          <button class="c-header-inner__cta" type="button">
            <div class="c-header-inner__group-4">
              <span class="c-header-inner__icon" aria-hidden="true"></span>
              <div class="c-header-inner__inner">lo</div>
            </div>
          </button>
          <a class="c-header-inner__nav-link-3" href="#">
            <div class="c-header-inner__group-5">
              <span class="c-header-inner__icon-2" aria-hidden="true"></span>
              <span class="c-header-inner__inner-2">lorem</span>
            </div>
          </a>
        </div>
      </div>
    </nav>
  </header>
</div>

.c-header-inner-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-header-inner {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 72px;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-header-inner__nav {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 48px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: 1680px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-inner__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 16px;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner__nav-link {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  cursor: pointer;
  line-height: 0px;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-header-inner__nav-link-icon {
  display: block;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 91px;
  height: 22px;
  aspect-ratio: 4.13636 / 1;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner__nav-list {
  display: flex;
  align-items: center;
  flex-grow: 1;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow-x: auto;
  overflow-y: auto;
  list-style-type: none;
}

.c-header-inner__nav-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 100%;
  padding-right: 4px;
  padding-left: 4px;
}

.c-header-inner__nav-link-2 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  padding: 8px 12px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border-radius: 99999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  white-space: nowrap;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-header-inner__group-2 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 32px;
  box-sizing: border-box;
  position: relative;
  margin-left: auto;
}

.c-header-inner__group-3 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.c-header-inner__cta {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 16px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 1px solid #E2E2E7;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-header-inner__group-4 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner__icon {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  border-radius: 99999px;
}

.c-header-inner__inner {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
}

.c-header-inner__nav-link-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 20px;
  position: relative;
  background-color: #0B051D;
  color: #F9F8F5;
  border-radius: 99999px;
  cursor: pointer;
  font-weight: 500;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-header-inner__group-5 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner__icon-2 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner__inner-2 {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
}

.c-header-inner__nav-link:focus {
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

.c-header-inner__nav-link-2:hover {
  background-color: #E5E3F5;
}

.c-header-inner__nav-link-2:focus {
  background-color: #EFECFF;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

.c-header-inner__cta:hover {
  background-color: #0000000A;
}

.c-header-inner__cta:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

.c-header-inner__nav-link-3:hover {
  background-color: #2C2242;
}

.c-header-inner__nav-link-3:focus {
  background-color: #2C2242;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

<div class="c-header-inner-mobile-scope">
  <header class="c-header-inner-mobile">
    <nav class="c-header-inner-mobile__nav">
      <div class="c-header-inner-mobile__group">
        <button class="c-header-inner-mobile__menu-toggle" type="button">
          <span class="c-header-inner-mobile__menu-toggle-icon" aria-hidden="true"></span>
        </button>
        <a class="c-header-inner-mobile__nav-link" href="#">
          <span class="c-header-inner-mobile__nav-link-icon" aria-hidden="true"></span>
        </a>
      </div>
      <div class="c-header-inner-mobile__group-2">
        <div class="c-header-inner-mobile__group-3">
          <a class="c-header-inner-mobile__nav-link-2" href="#">
            <div class="c-header-inner-mobile__group-4">
              <span class="c-header-inner-mobile__icon" aria-hidden="true"></span>
            </div>
          </a>
        </div>
      </div>
    </nav>
  </header>
</div>

.c-header-inner-mobile-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-header-inner-mobile {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 72px;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-header-inner-mobile__nav {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 48px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: 1680px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-inner-mobile__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 16px;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner-mobile__menu-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  width: 52px;
  height: 40px;
  padding: 11px 16px;
  position: relative;
  background-color: #FFA8CD;
  color: #0B051D;
  border: 0;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-header-inner-mobile__menu-toggle-icon {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-mobile__nav-link {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  cursor: pointer;
  line-height: 0px;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-header-inner-mobile__nav-link-icon {
  display: block;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 91px;
  height: 22px;
  aspect-ratio: 4.13636 / 1;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-mobile__group-2 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
  gap: 32px;
  box-sizing: border-box;
  position: relative;
  margin-left: auto;
}

.c-header-inner-mobile__group-3 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.c-header-inner-mobile__nav-link-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 12px;
  position: relative;
  background-color: #0B051D;
  color: #F9F8F5;
  border-radius: 99999px;
  cursor: pointer;
  font-weight: 500;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-header-inner-mobile__group-4 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner-mobile__icon {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-header-inner-mobile__menu-toggle:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

.c-header-inner-mobile__nav-link:focus {
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

.c-header-inner-mobile__nav-link-2:hover {
  background-color: #2C2242;
}

.c-header-inner-mobile__nav-link-2:focus {
  background-color: #2C2242;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

<div class="c-tab-scope">
  <button class="c-tab" type="button">
    <div class="c-tab__group">
      <div class="c-tab__group-2">
        <span class="c-tab__text">lorem ipsum</span>
      </div>
    </div>
  </button>
</div>

.c-tab-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-tab {
  display: inline-flex;
  flex-direction: column;
  align-self: flex-start;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  list-style-type: none;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-tab__group {
  display: block;
  box-sizing: border-box;
}

.c-tab__group-2 {
  display: block;
  box-sizing: border-box;
  color: #96959F;
}

.c-tab__text {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  font-family: "Klarna Title", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 52px;
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: -40px;
  margin-bottom: -28px;
}

.c-tab:hover {
  opacity: 0.84;
}

.c-tab:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

<div class="c-tab-2-scope">
  <button class="c-tab-2" type="button">
    <div class="c-tab-2__group">
      <div class="c-tab-2__group-2">
        <span class="c-tab-2__text">lorem ip</span>
      </div>
    </div>
  </button>
</div>

.c-tab-2-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-tab-2 {
  display: inline-flex;
  flex-direction: column;
  align-self: flex-start;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  list-style-type: none;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-tab-2__group {
  display: block;
  box-sizing: border-box;
}

.c-tab-2__group-2 {
  display: block;
  box-sizing: border-box;
  color: #6C6B74;
}

.c-tab-2__text {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  font-family: "Klarna Title", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 52px;
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: -40px;
  margin-bottom: -28px;
}

.c-tab-2:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

<div class="c-nav-scope">
  <nav class="c-nav">
    <div class="c-nav__group">
      <a class="c-nav__cta" href="#">
        <span class="c-nav__icon" aria-hidden="true"></span>
      </a>
    </div>
    <ul class="c-nav__list">
      <li class="c-nav__item">
        <a class="c-nav__cta-2" href="#">lorem ipsum dol</a>
      </li>
      <li class="c-nav__item">
        <a class="c-nav__cta-2" href="#">lorem ip</a>
      </li>
      <li class="c-nav__item">
        <a class="c-nav__cta-2" href="#">lor</a>
      </li>
      <li class="c-nav__item">
        <a class="c-nav__cta-2" href="#">lorem</a>
      </li>
    </ul>
    <div class="c-nav__group-2">
      <div class="c-nav__group-3">
        <button class="c-nav__button" type="button">
          <div class="c-nav__group-4"></div>
        </button>
        <a class="c-nav__cta-3" href="#">
          <div class="c-nav__group-5"></div>
        </a>
      </div>
    </div>
  </nav>
</div>

.c-nav-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-nav {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 48px;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 1680px;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-nav__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 16px;
  box-sizing: border-box;
  position: relative;
}

.c-nav__cta {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  cursor: pointer;
  line-height: 0px;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-nav__icon {
  display: block;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 91px;
  height: 22px;
  aspect-ratio: 4.13636 / 1;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-nav__list {
  display: flex;
  align-items: center;
  flex-grow: 1;
  box-sizing: border-box;
  height: 100%;
  padding: 0px;
  margin: 0px;
  overflow-x: auto;
  overflow-y: auto;
  list-style-type: none;
}

.c-nav__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  height: 100%;
  padding-right: 4px;
  padding-left: 4px;
}

.c-nav__cta-2 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  padding: 8px 12px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border-radius: 99999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-decoration-line: none;
  white-space: nowrap;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-nav__group-2 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 32px;
  box-sizing: border-box;
  position: relative;
  margin-left: auto;
}

.c-nav__group-3 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.c-nav__button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 16px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 1px solid #E2E2E7;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-nav__group-4 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  position: relative;
}

.c-nav__cta-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  padding: 11px 20px;
  position: relative;
  background-color: #0B051D;
  color: #F9F8F5;
  border-radius: 99999px;
  cursor: pointer;
  font-weight: 500;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-nav__group-5 {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 10px;
  box-sizing: border-box;
  position: relative;
}

<div class="c-hero-scope">
  <div class="c-hero">
    <section class="c-hero__group">
      <div class="c-hero__group-2">
        <div class="c-hero__group-3">
          <div class="c-hero__group-4"></div>
        </div>
      </div>
      <div class="c-hero__group-5">
        <div class="c-hero__group-2">
          <h1 class="c-hero__title">lorem ipsum dolor sit amet consect</h1>
          <div class="c-hero__group-2"></div>
        </div>
      </div>
    </section>
  </div>
</div>

.c-hero-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-hero {
  display: inline-flex;
  flex-direction: column;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-hero__group {
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-hero__group-2 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
}

.c-hero__group-3 {
  box-sizing: border-box;
  width: 100%;
}

.c-hero__group-4 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  color: #0B051D;
  font-size: 16px;
  line-height: 20px;
}

.c-hero__group-5 {
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-hero__title {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0px 0px 24px;
  position: relative;
  color: #F9F8F5;
  font-family: "Klarna Title", sans-serif;
  font-size: 66px;
  font-weight: 400;
  line-height: 73.26px;
  letter-spacing: 0.32px;
  text-align: left;
}

.c-hero:hover {
  flex-shrink: 1;
  gap: 16px;
  max-width: 1760px;
  padding: 32px 40px 0px;
  margin: 0px auto;
  background-color: transparent;
}

.c-hero:focus {
  flex-shrink: 1;
  gap: 16px;
  max-width: 1760px;
  padding: 32px 40px 0px;
  margin: 0px auto;
  background-color: transparent;
}

<div class="c-testimonial-scope">
  <button class="c-testimonial" type="button">
    <div class="c-testimonial__group">
      <div class="c-testimonial__group-2">
        <div class="c-testimonial__group-3">
          <div class="c-testimonial__text">l</div>
        </div>
        <div class="c-testimonial__group-4">
          <div class="c-testimonial__text-2">lorem ips</div>
          <div class="c-testimonial__group-5"></div>
        </div>
      </div>
      <div class="c-testimonial__group-6">
        <div class="c-testimonial__group-7">
          <div class="c-testimonial__group-8"></div>
        </div>
      </div>
      <div class="c-testimonial__text-3">lorem ipsum d</div>
    </div>
  </button>
</div>

.c-testimonial-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-testimonial {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-testimonial__group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  row-gap: 12px;
  box-sizing: border-box;
  min-width: 352px;
  max-width: 352px;
  min-height: 210px;
  padding: 16px;
  position: relative;
  z-index: 108;
  background-color: #F8F7FA;
  border: 1px solid transparent;
  border-radius: 16px;
  box-shadow: #0000001A 0px 2px 4px 0px;
  text-align: left;
  transition-duration: 0.09s, 0.09s, 0.09s;
  transition-timing-function: linear, linear, linear;
  transition-property: background-color, border-color, box-shadow;
}

.c-testimonial__group-2 {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  gap: 12px;
  box-sizing: border-box;
  position: relative;
}

.c-testimonial__group-3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #FFA8CD;
  border-radius: 99999px;
}

.c-testimonial__text {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  font-weight: 500;
}

.c-testimonial__group-4 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  position: relative;
}

.c-testimonial__text-2 {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  font-weight: 700;
}

.c-testimonial__group-5 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  position: relative;
}

.c-testimonial__group-6 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  padding-top: 8px;
}

.c-testimonial__group-7 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-testimonial__group-8 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  max-height: 100px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  transition: max-height 0.35s ease-in-out;
}

.c-testimonial__text-3 {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  color: #504F5F;
  font-size: 14px;
}

.c-testimonial:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

<div class="c-testimonial-2-scope">
  <div class="c-testimonial-2">
    <button class="c-testimonial-2__button" type="button">
      <div class="c-testimonial-2__group">
        <div class="c-testimonial-2__group-2">
          <div class="c-testimonial-2__group-3"></div>
          <div class="c-testimonial-2__group-4"></div>
        </div>
        <div class="c-testimonial-2__group-5">
          <div class="c-testimonial-2__group-6"></div>
        </div>
        <div class="c-testimonial-2__text">lorem ipsum d</div>
      </div>
    </button>
  </div>
</div>

.c-testimonial-2-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-testimonial-2 {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  color: #0B051D;
  border-radius: 16px;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-testimonial-2__button {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-testimonial-2__group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  row-gap: 12px;
  box-sizing: border-box;
  min-width: 352px;
  max-width: 352px;
  min-height: 210px;
  padding: 16px;
  position: relative;
  border-width: 1px;
  border-style: solid;
  border-radius: 16px;
  box-shadow: #0000001A 0px 2px 4px 0px;
  text-align: left;
  transition-duration: 0.09s, 0.09s, 0.09s;
  transition-timing-function: linear, linear, linear;
  transition-property: background-color, border-color, box-shadow;
}

.c-testimonial-2__group-2 {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  gap: 12px;
  box-sizing: border-box;
  position: relative;
}

.c-testimonial-2__group-3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #FFA8CD;
  border-radius: 99999px;
}

.c-testimonial-2__group-4 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  position: relative;
}

.c-testimonial-2__group-5 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  padding-top: 8px;
}

.c-testimonial-2__group-6 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-testimonial-2__text {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  color: #504F5F;
  font-size: 14px;
}

.c-testimonial-2:focus {
  transform: matrix(1.08, 0, 0, 1.08, 0, 0);
}

<div class="c-testimonial-3-scope">
  <button class="c-testimonial-3" type="button">
    <div class="c-testimonial-3__group">
      <div class="c-testimonial-3__group-2">
        <div class="c-testimonial-3__group-3">
          <div class="c-testimonial-3__text">l</div>
        </div>
        <div class="c-testimonial-3__group-4">
          <div class="c-testimonial-3__text-2">lorem ipsum</div>
          <div class="c-testimonial-3__group-5"></div>
        </div>
      </div>
      <div class="c-testimonial-3__group-6">
        <div class="c-testimonial-3__group-7">
          <div class="c-testimonial-3__group-8"></div>
        </div>
      </div>
      <div class="c-testimonial-3__text-3">lorem ipsum d</div>
    </div>
  </button>
</div>

.c-testimonial-3-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-testimonial-3 {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-testimonial-3__group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  row-gap: 12px;
  box-sizing: border-box;
  min-width: 352px;
  max-width: 352px;
  min-height: 210px;
  padding: 16px;
  position: relative;
  z-index: 108;
  background-color: #F8F7FA;
  border: 1px solid transparent;
  border-radius: 16px;
  box-shadow: #0000001A 0px 2px 4px 0px;
  text-align: left;
  transition-duration: 0.09s, 0.09s, 0.09s;
  transition-timing-function: linear, linear, linear;
  transition-property: background-color, border-color, box-shadow;
}

.c-testimonial-3__group-2 {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  gap: 12px;
  box-sizing: border-box;
  position: relative;
}

.c-testimonial-3__group-3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #FFA8CD;
  border-radius: 99999px;
}

.c-testimonial-3__text {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  font-weight: 500;
}

.c-testimonial-3__group-4 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  position: relative;
}

.c-testimonial-3__text-2 {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  font-weight: 700;
}

.c-testimonial-3__group-5 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  box-sizing: border-box;
  position: relative;
}

.c-testimonial-3__group-6 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  padding-top: 8px;
}

.c-testimonial-3__group-7 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
}

.c-testimonial-3__group-8 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

.c-testimonial-3__text-3 {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  color: #504F5F;
  font-size: 14px;
}

.c-testimonial-3:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

<div class="c-stat-scope">
  <div class="c-stat">
    <div class="c-stat__group">
      <div class="c-stat__group-2">
        <span class="c-stat__group-3">
          <span class="c-stat__group-4"></span>
        </span>
        <div class="c-stat__group-5">
          <span class="c-stat__media" aria-hidden="true"></span>
          <span class="c-stat__text">lorem ipsum dolor si</span>
        </div>
      </div>
    </div>
  </div>
</div>

.c-stat-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-stat {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-stat__group {
  display: block;
  box-sizing: border-box;
}

.c-stat__group-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
}

.c-stat__group-3 {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  font-family: "Klarna Title", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 43.2px;
  font-weight: 700;
  line-height: 41.04px;
}

.c-stat__group-4 {
  display: inline;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  position: relative;
}

.c-stat__group-5 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  position: relative;
}

.c-stat__media {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 17px;
  height: 17px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: currentcolor;
}

.c-stat__text {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  color: #282636;
  font-size: 14px;
  text-align: center;
}

.c-stat:hover {
  transform-origin: 78.6406px 30.5234px;
}

.c-stat:focus {
  transform-origin: 78.6406px 30.5234px;
}

<div class="c-language-selector-scope">
  <button class="c-language-selector" type="button">
    <div class="c-language-selector__group">
      <span class="c-language-selector__icon" aria-hidden="true"></span>
      <div class="c-language-selector__text">lo</div>
    </div>
  </button>
</div>

.c-language-selector-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-language-selector {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 11px 16px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 1px solid #E2E2E7;
  border-radius: 99999px;
  cursor: pointer;
  font-family: "Klarna Text", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease, ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, transform, border-color, color, opacity, background-color;
}

.c-language-selector__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 4px;
  box-sizing: border-box;
  position: relative;
}

.c-language-selector__icon {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  position: relative;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  border-radius: 99999px;
}

.c-language-selector__text {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
}

.c-language-selector:hover {
  background-color: #0000000A;
}

.c-language-selector:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

<div class="c-accordion-item-scope">
  <button class="c-accordion-item" type="button">
    <div class="c-accordion-item__group">
      <span class="c-accordion-item__text">lorem ipsum dolor sit</span>
    </div>
  </button>
</div>

.c-accordion-item-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-accordion-item {
  display: inline-flex;
  flex-direction: column;
  align-self: flex-start;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  list-style-type: none;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-accordion-item__group {
  display: block;
  box-sizing: border-box;
  opacity: 0.823973;
  transform: matrix(1, 0, 0, 1, 0, 3.17137);
}

.c-accordion-item__text {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  font-family: "Klarna Title", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 52px;
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: -40px;
  margin-bottom: -28px;
}

.c-accordion-item:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

<div class="c-accordion-item-2-scope">
  <button class="c-accordion-item-2" type="button">
    <div class="c-accordion-item-2__group">
      <div class="c-accordion-item-2__group-2">
        <span class="c-accordion-item-2__text">lorem ipsum dolor</span>
      </div>
    </div>
  </button>
</div>

.c-accordion-item-2-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-accordion-item-2 {
  display: inline-flex;
  flex-direction: column;
  align-self: flex-start;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  list-style-type: none;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-accordion-item-2__group {
  display: block;
  box-sizing: border-box;
  opacity: 0.996957;
  transform: matrix(1, 0, 0, 1, 0, 0.0606895);
}

.c-accordion-item-2__group-2 {
  display: block;
  box-sizing: border-box;
  color: #96959F;
}

.c-accordion-item-2__text {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  font-family: "Klarna Title", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 52px;
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: -40px;
  margin-bottom: -28px;
}

.c-accordion-item-2:hover {
  opacity: 0.84;
}

.c-accordion-item-2:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

<div class="c-accordion-item-3-scope">
  <button class="c-accordion-item-3" type="button">
    <div class="c-accordion-item-3__group">
      <div class="c-accordion-item-3__group-2">
        <span class="c-accordion-item-3__text">lorem ipsum dolor</span>
      </div>
    </div>
  </button>
</div>

.c-accordion-item-3-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-accordion-item-3 {
  display: inline-flex;
  flex-direction: column;
  align-self: flex-start;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: left;
  list-style-type: none;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity;
}

.c-accordion-item-3__group {
  display: block;
  box-sizing: border-box;
}

.c-accordion-item-3__group-2 {
  display: block;
  box-sizing: border-box;
  color: #96959F;
}

.c-accordion-item-3__text {
  display: block;
  flex-direction: column;
  box-sizing: border-box;
  max-width: 700px;
  position: relative;
  font-family: "Klarna Title", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 52px;
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: -40px;
  margin-bottom: -28px;
}

.c-accordion-item-3:hover {
  opacity: 0.84;
}

.c-accordion-item-3:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

<div class="c-carousel-pagination-scope">
  <button class="c-carousel-pagination" type="button">
    <div class="c-carousel-pagination__group">
      <div class="c-carousel-pagination__group-2"></div>
    </div>
  </button>
</div>

.c-carousel-pagination-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-carousel-pagination {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 4px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.3s;
  transition-timing-function: ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, padding;
}

.c-carousel-pagination__group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 6px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #96959F;
  border-radius: 99999px;
  transition-duration: 0.3s, 0.3s, 0.3s;
  transition-timing-function: ease, ease, ease;
  transition-property: background-color, width, height;
}

.c-carousel-pagination__group-2 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  background-color: #0B051D;
  transform: matrix(1, 0, 0, 1, -16.88, 0);
  transition-duration: 0.3s, 0.3s, 0.3s;
  transition-timing-function: ease, ease, ease;
  transition-property: background-color, width, height;
}

.c-carousel-pagination:hover {
  opacity: 0.84;
}

.c-carousel-pagination:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}

<div class="c-carousel-pagination-2-scope">
  <button class="c-carousel-pagination-2" type="button">
    <div class="c-carousel-pagination-2__group">
      <div class="c-carousel-pagination-2__group-2"></div>
    </div>
  </button>
</div>

.c-carousel-pagination-2-scope {
  background-color: #FFFFFF;
  color: #0B051D;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-carousel-pagination-2 {
  display: inline-flex;
  flex-direction: column;
  flex-shrink: 0;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 4px;
  position: relative;
  background-color: transparent;
  color: #0B051D;
  border: 0;
  cursor: pointer;
  font-family: "Klarna Text", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  appearance: button;
  transition-duration: 0.2s, 0.2s, 0.2s, 0.2s, 0.3s;
  transition-timing-function: ease, ease, ease, ease, ease;
  transition-property: background-color, border-color, color, opacity, padding;
}

.c-carousel-pagination-2__group {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #96959F;
  border-radius: 99999px;
  transition-duration: 0.3s, 0.3s, 0.3s;
  transition-timing-function: ease, ease, ease;
  transition-property: background-color, width, height;
}

.c-carousel-pagination-2__group-2 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  background-color: #96959F;
  transition-duration: 0.3s, 0.3s, 0.3s;
  transition-timing-function: ease, ease, ease;
  transition-property: background-color, width, height;
}

.c-carousel-pagination-2:hover {
  opacity: 0.84;
}

.c-carousel-pagination-2:focus {
  box-shadow: #7B57D8 0px 0px 0px 3px;
  outline: 2px solid #0B051D;
  outline-offset: 2px;
}