ระบบดีไซน์ Anthropic

<div class="c-button-primary-scope">
  <div class="c-button-primary">
    <div class="c-button-primary__group">
      <div class="c-button-primary__label">lorem ipsum dolor sit a</div>
      <div class="c-button-primary__group-2">
        <div class="c-button-primary__group-3">
          <div class="c-button-primary__group-4"></div>
        </div>
      </div>
    </div>
  </div>
</div>

.c-button-primary-scope {
  background-color: #F0EEE6;
  color: #141413;
  font-family: "Anthropic Serif", Georgia, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}

.c-button-primary {
  display: flex;
  align-items: center;
  flex-grow: 1;
  flex-basis: 0%;
  column-gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  vertical-align: top;
  color: #141413;
  cursor: pointer;
  font-family: "Anthropic Serif", Georgia, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-align: left;
  white-space: nowrap;
  list-style-type: none;
  transition: text-decoration-color 0.2s ease;
}

.c-button-primary__group {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 45px;
  min-height: 36px;
  position: relative;
  vertical-align: middle;
  background-color: #141413;
  color: #FAF9F5;
  font-family: "Anthropic Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -0.08px;
  text-align: center;
  border-top: 1px solid #141413;
  border-right: 1px solid #141413;
  border-bottom: 1px solid #141413;
  border-left: 1px solid #3D3D3A;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  transition-duration: 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease;
  transition-property: border-color, color, background-color;
}

.c-button-primary__label {
  display: block;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  position: absolute;
  top: 0%;
  right: 0%;
  left: 0%;
  overflow-x: hidden;
  overflow-y: hidden;
  margin-right: auto;
  margin-left: auto;
}

.c-button-primary__group-2 {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
}

.c-button-primary__group-3 {
  display: flex;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  transform: matrix(1, 0, 0, 1, 0, 1);
  transition: transform 0.2s ease;
  margin-left: auto;
}

.c-button-primary__group-4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
}

.c-button-primary__group-4::before {
  content: "";
  display: table;
  box-sizing: border-box;
}

.c-button-primary__group-4::after {
  content: "";
  display: table;
  box-sizing: border-box;
}

.c-button-primary:hover {
  text-decoration-color: #141413;
}

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

<div class="c-button-ghost-scope">
  <button class="c-button-ghost" type="button">lorem ipsum dol</button>
</div>

.c-button-ghost-scope {
  background-color: #141413;
  color: #FAF9F5;
  font-family: "Anthropic Sans", Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
}

.c-button-ghost {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #B0AEA5;
  border: 0;
  cursor: pointer;
  font-family: "Anthropic Sans", Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  letter-spacing: -0.24px;
  text-transform: none;
  text-align: start;
  list-style-type: none;
  appearance: button;
}

.c-button-ghost:hover {
  color: #FAF9F5;
  text-decoration-line: underline;
  text-decoration-color: #FAF9F5;
}

.c-button-ghost:focus {
  outline: 2px solid #FAF9F5;
  outline-offset: 4px;
}

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

.c-button-primary-2-scope {
  background-color: #FAF9F5;
  color: #0F0F0E;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-primary-2 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 36px;
  padding: 8px 16px;
  background-color: #0F0F0E;
  color: #FAF9F5;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  text-decoration-line: none;
  transition: background-color 0.2s ease;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

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

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

.c-button-primary-3-scope {
  background-color: #FAF9F5;
  color: #141413;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-primary-3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 40px;
  min-width: 44px;
  padding: 8px 16px;
  background-color: #141413;
  color: #FAF9F5;
  border: 1px solid #141413;
  border-radius: 8px;
  cursor: pointer;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.16px;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s;
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1), cubic-bezier(0.77, 0, 0.175, 1);
  transition-property: background-color, color;
}

.c-button-primary-3__label {
  display: block;
  box-sizing: border-box;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  line-height: 21px;
}

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

<div class="c-button-secondary-scope">
  <a class="c-button-secondary" href="#">
    <span class="c-button-secondary__label">lorem ipsum do</span>
  </a>
</div>

.c-button-secondary-scope {
  background-color: #FAF9F5;
  color: #141413;
  font-family: anthropicSerif, "anthropicSerif Fallback", 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;
  height: 40px;
  min-width: 44px;
  padding: 8px 16px;
  color: #141413;
  border: 1px solid #141413;
  border-radius: 8px;
  cursor: pointer;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.16px;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s;
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1), cubic-bezier(0.77, 0, 0.175, 1);
  transition-property: background-color, color;
}

.c-button-secondary__label {
  display: block;
  box-sizing: border-box;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  line-height: 21px;
}

.c-button-secondary:hover {
  background-color: #141413;
  color: #FAF9F5;
}

<div class="c-button-secondary-2-scope">
  <a class="c-button-secondary-2" href="#">
    <span class="c-button-secondary-2__label">lorem ipsum do</span>
    <span class="c-button-secondary-2__group">
      <span class="c-button-secondary-2__icon" aria-hidden="true"></span>
    </span>
  </a>
</div>

.c-button-secondary-2-scope {
  background-color: #141413;
  color: #141413;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-secondary-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  width: fit-content;
  height: 36px;
  min-width: 44px;
  padding: 8px 12px 8px 16px;
  background-color: #FAF9F5;
  color: #141413;
  border: 1px solid #FAF9F5;
  border-radius: 8px;
  cursor: pointer;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.16px;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s;
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1), cubic-bezier(0.77, 0, 0.175, 1);
  transition-property: background-color, color;
}

.c-button-secondary-2__label {
  display: block;
  box-sizing: border-box;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  line-height: 21px;
}

.c-button-secondary-2__group {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.c-button-secondary-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-button-secondary-2:hover {
  background-color: #F0EEE6;
}

<div class="c-button-ghost-2-scope">
  <a class="c-button-ghost-2" href="#">
    <span class="c-button-ghost-2__label">lorem ip</span>
    <span class="c-button-ghost-2__group">
      <span class="c-button-ghost-2__icon" aria-hidden="true"></span>
    </span>
  </a>
</div>

.c-button-ghost-2-scope {
  background-color: #FAF9F5;
  color: #141413;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-ghost-2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 40px;
  min-width: 44px;
  padding: 8px 16px 8px 24px;
  background-color: #F5F4ED;
  color: #73726C;
  border: 1px solid #D1CFC5;
  border-radius: 8px;
  cursor: pointer;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.16px;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s;
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1), cubic-bezier(0.77, 0, 0.175, 1);
  transition-property: background-color, color;
}

.c-button-ghost-2__label {
  display: block;
  box-sizing: border-box;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  line-height: 21px;
}

.c-button-ghost-2__group {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.c-button-ghost-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 17px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

<div class="c-button-ghost-3-scope">
  <button class="c-button-ghost-3" type="button">lorem ipsum dol</button>
</div>

.c-button-ghost-3-scope {
  background-color: #141413;
  color: #FAF9F5;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-ghost-3 {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #B0AEA5;
  border: 0;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  list-style-type: none;
}

.c-button-ghost-3:focus {
  color: #FFFFFF;
  outline: none;
  text-decoration-line: underline;
  text-decoration-color: #FFFFFF;
}

<div class="c-button-secondary-3-scope">
  <a class="c-button-secondary-3" href="#">
    <span class="c-button-secondary-3__label">lorem ip</span>
    <span class="c-button-secondary-3__group">
      <span class="c-button-secondary-3__icon" aria-hidden="true"></span>
    </span>
  </a>
</div>

.c-button-secondary-3-scope {
  background-color: #FAF9F5;
  color: #141413;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-button-secondary-3 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  height: 40px;
  min-width: 44px;
  padding: 8px 16px 8px 24px;
  background-color: #F5F4ED;
  color: #73726C;
  border: 1px solid #D1CFC5;
  border-radius: 8px;
  cursor: pointer;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.16px;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s;
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1), cubic-bezier(0.77, 0, 0.175, 1);
  transition-property: background-color, color;
}

.c-button-secondary-3__label {
  display: block;
  box-sizing: border-box;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  line-height: 21px;
}

.c-button-secondary-3__group {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.c-button-secondary-3__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 17px;
  height: 16px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-button-secondary-3:hover {
  background-color: #E8E6DC;
}

<div class="c-button-ghost-4-scope">
  <a class="c-button-ghost-4" href="#">
    <span class="c-button-ghost-4__label">lorem ips</span>
    <span class="c-button-ghost-4__group">
      <span class="c-button-ghost-4__icon" aria-hidden="true"></span>
    </span>
  </a>
</div>

.c-button-ghost-4-scope {
  background-color: #F0EEE6;
  color: #141413;
  font-family: anthropicSerif, "anthropicSerif Fallback", 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: 4px;
  border-spacing: 0px;
  box-sizing: border-box;
  width: fit-content;
  height: 28px;
  min-width: 44px;
  padding: 4px 12px 4px 8px;
  background-color: #F5F4ED;
  color: #73726C;
  border: 1px solid #D1CFC5;
  border-radius: 6px;
  cursor: pointer;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.16px;
  text-decoration-line: none;
  transition-duration: 0.2s, 0.2s;
  transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1), cubic-bezier(0.77, 0, 0.175, 1);
  transition-property: background-color, color;
}

.c-button-ghost-4__label {
  display: block;
  box-sizing: border-box;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 14px;
  line-height: 16.8px;
  letter-spacing: 0.15px;
}

.c-button-ghost-4__group {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.c-button-ghost-4__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

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

<div class="c-button-ghost-5-scope">
  <button class="c-button-ghost-5" type="button">
    <span class="c-button-ghost-5__label">lorem ip</span>
    <span class="c-button-ghost-5__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-ghost-5-scope {
  background-color: #FAF9F5;
  color: #0F0F0E;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
}

.c-button-ghost-5 {
  display: flex;
  align-items: center;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #0F0F0E;
  border: 0;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -0.0375px;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  list-style-type: none;
}

.c-button-ghost-5__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 6px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix(1, 0, 0, 1, 0, 1);
  transition: transform 0.2s ease-in-out;
}

.c-button-ghost-5:hover {
  text-decoration-line: underline;
}

<div class="c-button-ghost-6-scope">
  <button class="c-button-ghost-6" type="button">
    <span class="c-button-ghost-6__label">lorem ipsum</span>
    <span class="c-button-ghost-6__icon" aria-hidden="true"></span>
  </button>
</div>

.c-button-ghost-6-scope {
  background-color: #FAF9F5;
  color: #0F0F0E;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
}

.c-button-ghost-6 {
  display: flex;
  align-items: center;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #0F0F0E;
  border: 0;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -0.0375px;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  list-style-type: none;
}

.c-button-ghost-6__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 6px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix(1, 0, 0, 1, 0, 1);
  transition: transform 0.2s ease-in-out;
}

.c-button-ghost-6:hover {
  text-decoration-line: underline;
}

<div class="c-card-scope">
  <div class="c-card">
    <div class="c-card__group">
      <div class="c-card__group-2"></div>
      <div class="c-card__group-3">
        <div class="c-card__group-4">
          <h3 class="c-card__title">lorem ipsum dolor sit</h3>
          <p class="c-card__body">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum d</p>
        </div>
        <div class="c-card__group-5"></div>
        <div class="c-card__group-6">
          <ul class="c-card__list"></ul>
          <div class="c-card__group-7"></div>
        </div>
      </div>
    </div>
  </div>
</div>

.c-card-scope {
  background-color: #F0EEE6;
  color: #141413;
  font-family: "Anthropic Serif", Georgia, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}

.c-card {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #141413;
  font-family: "Anthropic Serif", Georgia, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}

.c-card__group {
  display: flex;
  justify-content: space-between;
  gap: 31.4776px;
  box-sizing: border-box;
  height: 100%;
  padding: 31.4776px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: 16px;
}

.c-card__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  right: 0%;
  bottom: 0%;
  left: 0%;
  background-color: #E3DACC;
}

.c-card__group-3 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

.c-card__group-4 {
  display: block;
  box-sizing: border-box;
  max-width: 432.245px;
}

.c-card__title {
  display: flow-root;
  box-sizing: border-box;
  margin: 0px 0px 16px;
  font-family: "Anthropic Sans", Arial, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 31.2px;
}

.c-card__title::before {
  content: "";
  display: table;
  box-sizing: border-box;
  margin-bottom: -7.43375px;
}

.c-card__title::after {
  content: "";
  display: table;
  box-sizing: border-box;
  margin-bottom: -5.99375px;
}

.c-card__body {
  display: flow-root;
  box-sizing: border-box;
  margin: 0px 0px 16px;
  font-size: 18px;
  line-height: 25.2px;
}

.c-card__body::before {
  content: "";
  display: table;
  box-sizing: border-box;
  margin-bottom: -4.67375px;
}

.c-card__body::after {
  content: "";
  display: table;
  box-sizing: border-box;
  margin-bottom: -7.73375px;
}

.c-card__group-5 {
  display: block;
  box-sizing: border-box;
  height: 90.7755px;
}

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

.c-card__list {
  display: block;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px 0px 31.4776px;
  list-style-type: none;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #1414131A;
}

.c-card__group-7 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 36px;
  padding: 8px 16px;
  position: relative;
  vertical-align: middle;
  background-color: #141413;
  color: #FAF9F5;
  border: 1px solid #141413;
  border-radius: 8px;
  font-family: "Anthropic Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -0.08px;
  text-align: center;
  transition-duration: 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease;
  transition-property: border-color, color, background-color;
}

<div class="c-card-2-scope">
  <article class="c-card-2">
    <a class="c-card-2__link" href="#">
      <div class="c-card-2__group">
        <h3 class="c-card-2__title">lorem ipsum dolor sit amet consectetur adipisci</h3>
        <div class="c-card-2__text">lorem ipsum</div>
      </div>
    </a>
  </article>
</div>

.c-card-2-scope {
  background-color: #FAF9F5;
  color: #141413;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-2 {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #141413;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.16px;
  padding-top: 24px;
  padding-bottom: 24px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #87867F;
}

.c-card-2__link {
  display: flex;
  align-items: center;
  gap: 16px;
  box-sizing: border-box;
  color: #0F0F0E;
  cursor: pointer;
  text-decoration-line: none;
}

.c-card-2__group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
  flex-basis: 0%;
  gap: 12px;
  box-sizing: border-box;
}

.c-card-2__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 38.4px;
}

.c-card-2__text {
  display: block;
  box-sizing: border-box;
  color: #141413;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 17px;
  line-height: 26.35px;
  white-space: nowrap;
}

<div class="c-card-3-scope">
  <div class="c-card-3">
    <h3 class="c-card-3__title">lorem ips</h3>
    <p class="c-card-3__body">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do eius</p>
  </div>
</div>

.c-card-3-scope {
  background-color: #FAF9F5;
  color: #141413;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-3 {
  display: inline-flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0%;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  max-width: 640px;
  color: #141413;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.16px;
}

.c-card-3__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 22.8px;
}

.c-card-3__body {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-size: 15px;
  line-height: 21px;
}

<div class="c-card-4-scope">
  <a class="c-card-4" href="#">
    <div class="c-card-4__group">
      <span class="c-card-4__text">lorem ipsum dolo</span>
      <time class="c-card-4__text-2">lorem ipsum</time>
    </div>
    <h4 class="c-card-4__title">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eius</h4>
    <p class="c-card-4__body">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem ipsum dolor sit amet consectetur adipiscing elit sed do e</p>
  </a>
</div>

.c-card-4-scope {
  background-color: #FAF9F5;
  color: #141413;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-card-4 {
  display: inline-flex;
  flex-direction: column;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #141413;
  cursor: pointer;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.16px;
  text-decoration-line: none;
}

.c-card-4__group {
  display: flex;
  gap: 8px;
  box-sizing: border-box;
}

.c-card-4__text {
  display: block;
  box-sizing: border-box;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
  letter-spacing: 0.15px;
}

.c-card-4__text-2 {
  display: block;
  box-sizing: border-box;
  color: #5E5D59;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16.8px;
  letter-spacing: 0.15px;
}

.c-card-4__title {
  display: block;
  box-sizing: border-box;
  max-width: 640px;
  margin: 0px;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 22.8px;
}

.c-card-4__body {
  display: block;
  box-sizing: border-box;
  max-width: 640px;
  margin: 0px;
  font-size: 15px;
  line-height: 21px;
}

.c-card-4:hover {
  padding: 0px 0px 16px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #D1CFC5;
}

.c-card-4:focus {
  padding: 0px 0px 16px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #D1CFC5;
}

<div class="c-nav-menu-scope">
  <nav class="c-nav-menu">
    <div class="c-nav-menu__group">
      <ul class="c-nav-menu__list">
        <div class="c-nav-menu__group-2"></div>
        <a class="c-nav-menu__link" href="#"></a>
        <div class="c-nav-menu__group-2"></div>
        <div class="c-nav-menu__group-2"></div>
        <a class="c-nav-menu__link" href="#"></a>
        <div class="c-nav-menu__group-3"></div>
      </ul>
    </div>
  </nav>
</div>

.c-nav-menu-scope {
  background-color: #F0EEE6;
  color: #141413;
  font-family: "Anthropic Serif", Georgia, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}

.c-nav-menu {
  display: inline-flex;
  flex-grow: 1;
  flex-basis: 0%;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #141413;
  font-family: "Anthropic Serif", Georgia, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}

.c-nav-menu__group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
  flex-basis: 0%;
  column-gap: 28px;
  box-sizing: border-box;
}

.c-nav-menu__list {
  display: flex;
  justify-content: flex-end;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  width: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-nav-menu__group-2 {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  text-align: left;
}

.c-nav-menu__link {
  display: flex;
  align-items: center;
  flex-grow: 1;
  flex-basis: 0%;
  column-gap: 8px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: 100%;
  padding: 22.4px 12px;
  color: #141413;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.2s ease;
}

.c-nav-menu__group-3 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  padding-left: 12px;
}

<div class="c-nav-menu-2-scope">
  <nav class="c-nav-menu-2">
    <div class="c-nav-menu-2__group">
      <span class="c-nav-menu-2__icon" aria-hidden="true"></span>
      <div class="c-nav-menu-2__group-2">
        <div class="c-nav-menu-2__text">
          <span class="c-nav-menu-2__text-2">l</span>
          <span class="c-nav-menu-2__text-2">lore</span>
          <span class="c-nav-menu-2__text-2">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor</span>
        </div>
        <ul class="c-nav-menu-2__list">
          <li class="c-nav-menu-2__item"></li>
          <li class="c-nav-menu-2__item"></li>
          <li class="c-nav-menu-2__item"></li>
        </ul>
      </div>
    </div>
    <div class="c-nav-menu-2__group-3">
      <section class="c-nav-menu-2__group-4">
        <div class="c-nav-menu-2__group-5">
          <h3 class="c-nav-menu-2__title">lorem ip</h3>
          <ul class="c-nav-menu-2__list-2"></ul>
        </div>
        <div class="c-nav-menu-2__group-5">
          <h3 class="c-nav-menu-2__title">lorem</h3>
          <ul class="c-nav-menu-2__list-2"></ul>
        </div>
      </section>
      <section class="c-nav-menu-2__group-4">
        <div class="c-nav-menu-2__group-5">
          <h3 class="c-nav-menu-2__title">lorem ips</h3>
          <ul class="c-nav-menu-2__list-2"></ul>
        </div>
        <div class="c-nav-menu-2__group-5">
          <h3 class="c-nav-menu-2__title">lorem ipsum dol</h3>
          <ul class="c-nav-menu-2__list-2"></ul>
        </div>
      </section>
      <section class="c-nav-menu-2__group-4">
        <div class="c-nav-menu-2__group-5">
          <h3 class="c-nav-menu-2__title">lorem ips</h3>
          <ul class="c-nav-menu-2__list-2"></ul>
        </div>
        <div class="c-nav-menu-2__group-5">
          <h3 class="c-nav-menu-2__title">lorem ip</h3>
          <ul class="c-nav-menu-2__list-2"></ul>
        </div>
        <div class="c-nav-menu-2__group-5">
          <h3 class="c-nav-menu-2__title">lorem ipsum dolor</h3>
          <ul class="c-nav-menu-2__list-2"></ul>
        </div>
      </section>
      <section class="c-nav-menu-2__group-4">
        <div class="c-nav-menu-2__group-5">
          <h3 class="c-nav-menu-2__title">lorem i</h3>
          <ul class="c-nav-menu-2__list-2"></ul>
        </div>
      </section>
    </div>
  </nav>
</div>

.c-nav-menu-2-scope {
  background-color: #141413;
  color: #FAF9F5;
  font-family: "Anthropic Sans", Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
}

.c-nav-menu-2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 31.4776px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FAF9F5;
  font-family: "Anthropic Sans", Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
}

.c-nav-menu-2__group {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  width: 297.527px;
}

.c-nav-menu-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 45px;
  height: 32px;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-nav-menu-2__group-2 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
}

.c-nav-menu-2__text {
  display: block;
  box-sizing: border-box;
  color: #B0AEA5;
}

.c-nav-menu-2__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: "";
}

.c-nav-menu-2__item {
  display: flex;
  box-sizing: border-box;
}

.c-nav-menu-2__group-3 {
  display: grid;
  justify-content: space-between;
  flex-grow: 1;
  flex-basis: 0%;
  gap: 31.4776px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  box-sizing: border-box;
}

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

.c-nav-menu-2__group-5 {
  display: block;
  box-sizing: border-box;
}

.c-nav-menu-2__title {
  display: flow-root;
  box-sizing: border-box;
  margin: 0px 0px 8px;
  font-size: 12px;
  font-weight: 500;
}

.c-nav-menu-2__title::before {
  content: "";
  display: table;
  box-sizing: border-box;
  margin-bottom: -4.31844px;
}

.c-nav-menu-2__title::after {
  content: "";
  display: table;
  box-sizing: border-box;
  margin-bottom: -3.59844px;
}

.c-nav-menu-2__list-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

<div class="c-nav-menu-3-scope">
  <nav class="c-nav-menu-3">
    <ul class="c-nav-menu-3__list">
      <li class="c-nav-menu-3__item">
        <button class="c-nav-menu-3__button" type="button">
          <span class="c-nav-menu-3__text">lorem ip</span>
          <span class="c-nav-menu-3__icon" aria-hidden="true"></span>
        </button>
      </li>
      <li class="c-nav-menu-3__item">
        <a class="c-nav-menu-3__link" href="#">lorem</a>
      </li>
      <li class="c-nav-menu-3__item">
        <button class="c-nav-menu-3__button" type="button">
          <span class="c-nav-menu-3__text">lorem ipsum</span>
          <span class="c-nav-menu-3__icon" aria-hidden="true"></span>
        </button>
      </li>
      <li class="c-nav-menu-3__item">
        <button class="c-nav-menu-3__button" type="button">
          <span class="c-nav-menu-3__text">lorem</span>
          <span class="c-nav-menu-3__icon" aria-hidden="true"></span>
        </button>
      </li>
      <li class="c-nav-menu-3__item">
        <a class="c-nav-menu-3__link" href="#">lore</a>
      </li>
    </ul>
  </nav>
</div>

.c-nav-menu-3-scope {
  background-color: #FAF9F5;
  color: #0F0F0E;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-nav-menu-3 {
  display: inline-flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #0F0F0E;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.16px;
}

.c-nav-menu-3__list {
  display: flex;
  gap: 24px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-nav-menu-3__item {
  display: list-item;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  line-height: 21px;
}

.c-nav-menu-3__button {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #0F0F0E;
  border: 0;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -0.0375px;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
}

.c-nav-menu-3__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 6px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix(1, 0, 0, 1, 0, 1);
  transition: transform 0.2s ease-in-out;
}

.c-nav-menu-3__link {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  color: #0F0F0E;
  cursor: pointer;
  letter-spacing: -0.0375px;
  text-decoration-line: none;
  white-space: nowrap;
}

<div class="c-hero-scope">
  <header class="c-hero">
    <div class="c-hero__group"></div>
    <div class="c-hero__group-2">
      <div class="c-hero__group-3">
        <h1 class="c-hero__title"></h1>
        <div class="c-hero__group-4"></div>
      </div>
    </div>
    <div class="c-hero__group-5"></div>
  </header>
</div>

.c-hero-scope {
  background-color: #F0EEE6;
  color: #141413;
  font-family: "Anthropic Serif", Georgia, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}

.c-hero {
  display: inline-flex;
  flex-direction: column;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  color: #141413;
  font-family: "Anthropic Serif", Georgia, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  text-align: left;
}

.c-hero__group {
  display: block;
  box-sizing: border-box;
  height: 150.596px;
}

.c-hero__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 1284.54px;
  position: relative;
  margin-right: auto;
  margin-left: auto;
}

.c-hero__group-3 {
  display: grid;
  align-items: end;
  gap: 31.4776px;
  grid-template-columns: repeat(12, minmax(0px, 1fr));
  grid-template-rows: auto;
  box-sizing: border-box;
}

.c-hero__title {
  display: flow-root;
  box-sizing: border-box;
  margin: 0px;
  font-family: "Anthropic Sans", Arial, sans-serif;
  font-size: 60.8653px;
  font-weight: 700;
  line-height: 66.9518px;
}

.c-hero__title::before {
  content: "";
  display: table;
  box-sizing: border-box;
  margin-bottom: -12.7745px;
}

.c-hero__title::after {
  content: "";
  display: table;
  box-sizing: border-box;
  margin-bottom: -9.12263px;
}

.c-hero__group-4 {
  display: block;
  box-sizing: border-box;
  padding-bottom: 5px;
}

.c-hero__group-5 {
  display: block;
  box-sizing: border-box;
  height: 60.8653px;
}

<div class="c-nav-dropdown-scope">
  <div class="c-nav-dropdown">
    <div class="c-nav-dropdown__text">lorem ip</div>
    <div class="c-nav-dropdown__group">
      <div class="c-nav-dropdown__group-2">
        <span class="c-nav-dropdown__icon" aria-hidden="true"></span>
      </div>
    </div>
  </div>
</div>

.c-nav-dropdown-scope {
  background-color: #F0EEE6;
  color: #141413;
  font-family: "Anthropic Serif", Georgia, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}

.c-nav-dropdown {
  display: flex;
  align-items: center;
  flex-grow: 1;
  flex-basis: 0%;
  column-gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 22.4px 12px;
  vertical-align: top;
  color: #141413;
  cursor: pointer;
  font-family: "Anthropic Serif", Georgia, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-align: left;
  white-space: nowrap;
  list-style-type: none;
  transition: text-decoration-color 0.2s ease;
}

.c-nav-dropdown__text {
  display: block;
  box-sizing: border-box;
  font-family: "Anthropic Sans", Arial, sans-serif;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: -0.0375px;
}

.c-nav-dropdown__group {
  display: flex;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  transform: matrix(1, 0, 0, 1, 0, 1);
  transition: transform 0.2s ease;
  margin-left: auto;
}

.c-nav-dropdown__group-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
}

.c-nav-dropdown__group-2::before {
  content: "";
  display: table;
  box-sizing: border-box;
}

.c-nav-dropdown__group-2::after {
  content: "";
  display: table;
  box-sizing: border-box;
}

.c-nav-dropdown__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 24px;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-nav-dropdown:hover {
  text-decoration-color: #141413;
}

.c-nav-dropdown:focus {
  outline: 2px solid #141413;
  outline-offset: -2px;
}

<div class="c-nav-dropdown-2-scope">
  <div class="c-nav-dropdown-2">
    <div class="c-nav-dropdown-2__text">lorem ipsum</div>
    <div class="c-nav-dropdown-2__group">
      <div class="c-nav-dropdown-2__group-2">
        <span class="c-nav-dropdown-2__icon" aria-hidden="true"></span>
      </div>
    </div>
  </div>
</div>

.c-nav-dropdown-2-scope {
  background-color: #F0EEE6;
  color: #141413;
  font-family: "Anthropic Serif", Georgia, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}

.c-nav-dropdown-2 {
  display: flex;
  align-items: center;
  flex-grow: 1;
  flex-basis: 0%;
  column-gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 22.4px 12px;
  vertical-align: top;
  color: #141413;
  cursor: pointer;
  font-family: "Anthropic Serif", Georgia, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-align: left;
  white-space: nowrap;
  list-style-type: none;
  transition: text-decoration-color 0.2s ease;
}

.c-nav-dropdown-2__text {
  display: block;
  box-sizing: border-box;
  font-family: "Anthropic Sans", Arial, sans-serif;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: -0.0375px;
}

.c-nav-dropdown-2__group {
  display: flex;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  transform: matrix(1, 0, 0, 1, 0, 1);
  transition: transform 0.2s ease;
  margin-left: auto;
}

.c-nav-dropdown-2__group-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
}

.c-nav-dropdown-2__group-2::before {
  content: "";
  display: table;
  box-sizing: border-box;
}

.c-nav-dropdown-2__group-2::after {
  content: "";
  display: table;
  box-sizing: border-box;
}

.c-nav-dropdown-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 24px;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-nav-dropdown-2:hover {
  text-decoration-color: #141413;
}

.c-nav-dropdown-2:focus {
  outline: 2px solid #141413;
  outline-offset: -2px;
}

<div class="c-nav-dropdown-3-scope">
  <div class="c-nav-dropdown-3">
    <div class="c-nav-dropdown-3__text">lorem</div>
    <div class="c-nav-dropdown-3__group">
      <div class="c-nav-dropdown-3__group-2">
        <span class="c-nav-dropdown-3__icon" aria-hidden="true"></span>
      </div>
    </div>
  </div>
</div>

.c-nav-dropdown-3-scope {
  background-color: #F0EEE6;
  color: #141413;
  font-family: "Anthropic Serif", Georgia, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}

.c-nav-dropdown-3 {
  display: flex;
  align-items: center;
  flex-grow: 1;
  flex-basis: 0%;
  column-gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 22.4px 12px;
  vertical-align: top;
  color: #141413;
  cursor: pointer;
  font-family: "Anthropic Serif", Georgia, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-align: left;
  white-space: nowrap;
  list-style-type: none;
  transition: text-decoration-color 0.2s ease;
}

.c-nav-dropdown-3__text {
  display: block;
  box-sizing: border-box;
  font-family: "Anthropic Sans", Arial, sans-serif;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: -0.0375px;
}

.c-nav-dropdown-3__group {
  display: flex;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  transform: matrix(1, 0, 0, 1, 0, 1);
  transition: transform 0.2s ease;
  margin-left: auto;
}

.c-nav-dropdown-3__group-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
}

.c-nav-dropdown-3__group-2::before {
  content: "";
  display: table;
  box-sizing: border-box;
}

.c-nav-dropdown-3__group-2::after {
  content: "";
  display: table;
  box-sizing: border-box;
}

.c-nav-dropdown-3__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 24px;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-nav-dropdown-3:hover {
  text-decoration-color: #141413;
}

.c-nav-dropdown-3:focus {
  outline: 2px solid #141413;
  outline-offset: -2px;
}

<div class="c-nav-dropdown-4-scope">
  <button class="c-nav-dropdown-4" type="button">
    <span class="c-nav-dropdown-4__text">lorem ip</span>
    <span class="c-nav-dropdown-4__icon" aria-hidden="true"></span>
  </button>
</div>

.c-nav-dropdown-4-scope {
  background-color: #FAF9F5;
  color: #0F0F0E;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
}

.c-nav-dropdown-4 {
  display: flex;
  align-items: center;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #0F0F0E;
  border: 0;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -0.0375px;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  list-style-type: none;
}

.c-nav-dropdown-4__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 6px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix(1, 0, 0, 1, 0, 1);
  transition: transform 0.2s ease-in-out;
}

.c-nav-dropdown-4:hover {
  text-decoration-line: underline;
}

<div class="c-nav-dropdown-5-scope">
  <button class="c-nav-dropdown-5" type="button">
    <span class="c-nav-dropdown-5__text">lorem ipsum</span>
    <span class="c-nav-dropdown-5__icon" aria-hidden="true"></span>
  </button>
</div>

.c-nav-dropdown-5-scope {
  background-color: #FAF9F5;
  color: #0F0F0E;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
}

.c-nav-dropdown-5 {
  display: flex;
  align-items: center;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #0F0F0E;
  border: 0;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -0.0375px;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  list-style-type: none;
}

.c-nav-dropdown-5__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 6px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix(1, 0, 0, 1, 0, 1);
  transition: transform 0.2s ease-in-out;
}

.c-nav-dropdown-5:hover {
  text-decoration-line: underline;
}

<div class="c-nav-dropdown-6-scope">
  <button class="c-nav-dropdown-6" type="button">
    <span class="c-nav-dropdown-6__text">lorem</span>
    <span class="c-nav-dropdown-6__icon" aria-hidden="true"></span>
  </button>
</div>

.c-nav-dropdown-6-scope {
  background-color: #FAF9F5;
  color: #0F0F0E;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
}

.c-nav-dropdown-6 {
  display: flex;
  align-items: center;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #0F0F0E;
  border: 0;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -0.0375px;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  list-style-type: none;
}

.c-nav-dropdown-6__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 6px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix(1, 0, 0, 1, 0, 1);
  transition: transform 0.2s ease-in-out;
}

.c-nav-dropdown-6:hover {
  text-decoration-line: underline;
}

<div class="c-header-landing-scope">
  <div class="c-header-landing">
    <div class="c-header-landing__inner">
      <a class="c-header-landing__logo" href="#">
        <div class="c-header-landing__group">
          <span class="c-header-landing__logo-icon" aria-hidden="true"></span>
        </div>
      </a>
      <nav class="c-header-landing__nav">
        <div class="c-header-landing__group-2">
          <ul class="c-header-landing__nav-list">
            <div class="c-header-landing__group-3">
              <div class="c-header-landing__text">lorem ip</div>
              <div class="c-header-landing__group-4"></div>
            </div>
            <li class="c-header-landing__nav-item">
              <a class="c-header-landing__nav-link" href="#">
                <div class="c-header-landing__text">lorem</div>
              </a>
            </li>
            <div class="c-header-landing__group-3">
              <div class="c-header-landing__text">lorem ipsum</div>
              <div class="c-header-landing__group-4"></div>
            </div>
            <div class="c-header-landing__group-3">
              <div class="c-header-landing__text">lorem</div>
              <div class="c-header-landing__group-4"></div>
            </div>
            <a class="c-header-landing__nav-link" href="#">
              <div class="c-header-landing__text">lore</div>
            </a>
            <div class="c-header-landing__group-5">
              <div class="c-header-landing__group-6">
                <div class="c-header-landing__group-7"></div>
                <div class="c-header-landing__text-2">lorem ipsu</div>
              </div>
              <div class="c-header-landing__group-8">
                <div class="c-header-landing__cta"></div>
              </div>
            </div>
          </ul>
        </div>
      </nav>
    </div>
  </div>
</div>

.c-header-landing-scope {
  background-color: #F0EEE6;
  color: #141413;
  font-family: "Anthropic Serif", Georgia, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}

.c-header-landing {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  background-color: #F0EEE6;
  color: #141413;
  font-family: "Anthropic Serif", Georgia, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}

.c-header-landing__inner {
  display: flex;
  justify-content: space-between;
  column-gap: 12px;
  box-sizing: border-box;
  width: 100%;
  height: 68px;
  max-width: 1284.54px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-landing__logo {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 144px;
  max-width: 100%;
  position: relative;
  z-index: 2;
  color: #141413;
  cursor: pointer;
  text-decoration-line: none;
  transition: color 0.2s ease;
}

.c-header-landing__group {
  display: flex;
  box-sizing: border-box;
  height: 16px;
}

.c-header-landing__logo-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 143px;
  height: 16px;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  transform: matrix(1, 0, 0, 1, 0, 0);
}

.c-header-landing__nav {
  display: flex;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
}

.c-header-landing__group-2 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-grow: 1;
  flex-basis: 0%;
  column-gap: 28px;
  box-sizing: border-box;
}

.c-header-landing__nav-list {
  display: flex;
  justify-content: flex-end;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
  width: 100%;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-header-landing__group-3 {
  display: flex;
  align-items: center;
  flex-grow: 1;
  flex-basis: 0%;
  column-gap: 8px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 22.4px 12px;
  vertical-align: top;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-align: left;
  white-space: nowrap;
  transition: text-decoration-color 0.2s ease;
  margin-right: auto;
  margin-left: auto;
}

.c-header-landing__text {
  display: block;
  box-sizing: border-box;
  font-family: "Anthropic Sans", Arial, sans-serif;
  font-size: 15px;
  line-height: 21px;
  letter-spacing: -0.0375px;
}

.c-header-landing__group-4 {
  display: flex;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  transform: matrix(1, 0, 0, 1, 0, 1);
  transition: transform 0.2s ease;
  margin-left: auto;
}

.c-header-landing__nav-item {
  display: block;
  box-sizing: border-box;
}

.c-header-landing__nav-link {
  display: flex;
  align-items: center;
  flex-grow: 1;
  flex-basis: 0%;
  column-gap: 8px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: 100%;
  padding: 22.4px 12px;
  color: #141413;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.2s ease;
}

.c-header-landing__group-5 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: 100%;
  padding-left: 12px;
}

.c-header-landing__group-6 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 36px;
  padding: 8px 16px;
  position: relative;
  vertical-align: middle;
  background-color: #141413;
  color: #FAF9F5;
  border: 1px solid #141413;
  font-family: "Anthropic Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -0.08px;
  text-align: center;
  white-space: nowrap;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  transition-duration: 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease, ease, ease;
  transition-property: border-color, color, background-color;
}

.c-header-landing__group-7 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  right: 0%;
  bottom: 0%;
  left: 0%;
  z-index: 3;
  cursor: pointer;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.c-header-landing__text-2 {
  display: block;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  font-size: 15px;
  line-height: 15px;
}

.c-header-landing__group-8 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  position: relative;
  text-align: left;
}

.c-header-landing__cta {
  display: flex;
  align-items: center;
  flex-grow: 1;
  flex-basis: 0%;
  column-gap: 8px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  vertical-align: top;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  white-space: nowrap;
  transition: text-decoration-color 0.2s ease;
  margin-right: auto;
  margin-left: auto;
}

.c-header-landing__logo:hover {
  color: #5E5D59;
}

.c-header-landing__logo:focus {
  outline: 2px solid #141413;
  outline-offset: -2px;
}

.c-header-landing__nav-link:hover {
  text-decoration-color: #141413;
}

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

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

.c-header-inner-scope {
  background-color: #FAF9F5;
  color: #141413;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-header-inner {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: sticky;
  top: 0px;
  z-index: 9999;
  background-color: #FAF9F5;
  color: #0F0F0E;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.16px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.c-header-inner__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 1400px;
  padding-right: 64px;
  padding-left: 64px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-inner__logo {
  display: block;
  box-sizing: border-box;
  color: #141413;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: #141413;
  transition: color 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.c-header-inner__group {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 143px;
  height: 16px;
  position: relative;
}

.c-header-inner__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
}

.c-header-inner__logo-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 143px;
  height: 16px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  transform: matrix(1, 0, 0, 1, 0, 0);
}

.c-header-inner__group-3 {
  display: flex;
  align-items: center;
  gap: 24px;
  box-sizing: border-box;
  margin-left: auto;
}

.c-header-inner__nav {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.c-header-inner__nav-list {
  display: flex;
  gap: 24px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-header-inner__nav-item {
  display: list-item;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  line-height: 21px;
}

.c-header-inner__button {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #0F0F0E;
  border: 0;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -0.0375px;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
}

.c-header-inner__button-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 6px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix(1, 0, 0, 1, 0, 1);
  transition: transform 0.2s ease-in-out;
}

.c-header-inner__nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  color: #0F0F0E;
  cursor: pointer;
  letter-spacing: -0.0375px;
  text-decoration-line: none;
  white-space: nowrap;
}

.c-header-inner__group-4 {
  display: flex;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner__cta {
  display: block;
  box-sizing: border-box;
  height: 36px;
  padding: 8px 16px;
  background-color: #0F0F0E;
  color: #FAF9F5;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  line-height: 21px;
  text-decoration-line: none;
  transition: background-color 0.2s ease;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.c-header-inner__group-5 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 12px 16px;
  position: relative;
  background-color: #0F0F0E;
  color: #FAF9F5;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #FFFFFF33;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.c-header-inner__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 6px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition: transform 0.2s ease-in-out;
}

.c-header-inner__logo:hover {
  color: #87867F;
  text-decoration-color: #87867F;
}

.c-header-inner__logo:focus {
  color: #87867F;
  outline: none;
  text-decoration-color: #87867F;
}

.c-header-inner__button:hover {
  text-decoration-line: underline;
}

.c-header-inner__nav-link:hover {
  text-decoration-line: underline;
}

.c-header-inner__cta:hover {
  background-color: #000000CC;
}

<div class="c-header-inner-mobile-scope">
  <header class="c-header-inner-mobile">
    <div class="c-header-inner-mobile__inner">
      <a class="c-header-inner-mobile__logo" href="#">
        <span class="c-header-inner-mobile__logo-icon" aria-hidden="true"></span>
      </a>
      <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>
      </div>
    </div>
  </header>
</div>

.c-header-inner-mobile-scope {
  background-color: #FAF9F5;
  color: #141413;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-header-inner-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: sticky;
  top: 0px;
  z-index: 9999;
  background-color: #FAF9F5;
  color: #0F0F0E;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.16px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.c-header-inner-mobile__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 1400px;
  padding-right: 32px;
  padding-left: 32px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-inner-mobile__logo {
  display: block;
  box-sizing: border-box;
  color: #141413;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: #141413;
  transition: color 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.c-header-inner-mobile__logo-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-header-inner-mobile__group {
  display: flex;
  align-items: center;
  gap: 24px;
  box-sizing: border-box;
  margin-left: auto;
}

.c-header-inner-mobile__menu-toggle {
  display: flex;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #141413;
  border: 0;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}

.c-header-inner-mobile__menu-toggle-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-header-inner-mobile__logo:hover {
  color: #87867F;
  text-decoration-color: #87867F;
}

.c-header-inner-mobile__logo:focus {
  color: #87867F;
  outline: none;
  text-decoration-color: #87867F;
}

<div class="c-header-inner-2-scope">
  <header class="c-header-inner-2">
    <div class="c-header-inner-2__inner">
      <a class="c-header-inner-2__logo" href="#">
        <div class="c-header-inner-2__group">
          <div class="c-header-inner-2__group-2">
            <span class="c-header-inner-2__logo-icon" aria-hidden="true"></span>
          </div>
        </div>
      </a>
      <div class="c-header-inner-2__group-3">
        <nav class="c-header-inner-2__nav">
          <ul class="c-header-inner-2__nav-list">
            <li class="c-header-inner-2__nav-item">
              <button class="c-header-inner-2__button" type="button">
                <span class="c-header-inner-2__text">lorem ip</span>
                <span class="c-header-inner-2__button-icon" aria-hidden="true"></span>
              </button>
            </li>
            <li class="c-header-inner-2__nav-item">
              <a class="c-header-inner-2__nav-link" href="#">lorem</a>
            </li>
            <li class="c-header-inner-2__nav-item">
              <button class="c-header-inner-2__button" type="button">
                <span class="c-header-inner-2__text">lorem ipsum</span>
                <span class="c-header-inner-2__button-icon-2" aria-hidden="true"></span>
              </button>
              <div class="c-header-inner-2__group-4">
                <div class="c-header-inner-2__group-5">
                  <p class="c-header-inner-2__text-2">lorem ipsum</p>
                  <ul class="c-header-inner-2__nav-list-2"></ul>
                </div>
                <div class="c-header-inner-2__group-6">
                  <p class="c-header-inner-2__text-2">lorem ipsum</p>
                  <ul class="c-header-inner-2__nav-list-2"></ul>
                </div>
              </div>
            </li>
            <li class="c-header-inner-2__nav-item">
              <button class="c-header-inner-2__button" type="button">
                <span class="c-header-inner-2__text">lorem</span>
                <span class="c-header-inner-2__button-icon" aria-hidden="true"></span>
              </button>
            </li>
            <li class="c-header-inner-2__nav-item">
              <a class="c-header-inner-2__nav-link" href="#">lore</a>
            </li>
          </ul>
        </nav>
        <div class="c-header-inner-2__group-7">
          <a class="c-header-inner-2__cta" href="#">lorem ipsu</a>
          <div class="c-header-inner-2__group-8">
            <span class="c-header-inner-2__icon" aria-hidden="true"></span>
          </div>
        </div>
      </div>
    </div>
  </header>
</div>

.c-header-inner-2-scope {
  background-color: #FAF9F5;
  color: #141413;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-header-inner-2 {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: sticky;
  top: 0px;
  z-index: 9999;
  background-color: #FAF9F5;
  color: #0F0F0E;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.16px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.c-header-inner-2__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 1400px;
  padding-right: 64px;
  padding-left: 64px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-inner-2__logo {
  display: block;
  box-sizing: border-box;
  color: #141413;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: #141413;
  transition: color 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.c-header-inner-2__group {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 143px;
  height: 16px;
  position: relative;
}

.c-header-inner-2__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
}

.c-header-inner-2__logo-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 143px;
  height: 16px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  transform: matrix(1, 0, 0, 1, 0, 0);
}

.c-header-inner-2__group-3 {
  display: flex;
  align-items: center;
  gap: 24px;
  box-sizing: border-box;
  margin-left: auto;
}

.c-header-inner-2__nav {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.c-header-inner-2__nav-list {
  display: flex;
  gap: 24px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-header-inner-2__nav-item {
  display: list-item;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  line-height: 21px;
}

.c-header-inner-2__button {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #0F0F0E;
  border: 0;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -0.0375px;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
}

.c-header-inner-2__button-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 6px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix(1, 0, 0, 1, 0, 1);
  transition: transform 0.2s ease-in-out;
}

.c-header-inner-2__nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  color: #0F0F0E;
  cursor: pointer;
  letter-spacing: -0.0375px;
  text-decoration-line: none;
  white-space: nowrap;
}

.c-header-inner-2__button-icon-2 {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 6px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix(-1, 0, 0, -1, 0, 0);
  transition: transform 0.2s ease-in-out;
}

.c-header-inner-2__group-4 {
  display: block;
  box-sizing: border-box;
  min-width: 250px;
  padding: 24px;
  position: absolute;
  top: calc(100% + 1px);
  left: 50%;
  z-index: 100;
  background-color: #FAF9F5;
  border: 1px solid #F0EEE6;
  border-radius: 16px;
  box-shadow: #00000003 0px 2px 2px 0px, #00000005 0px 4px 4px 0px, #0000000A 0px 16px 24px 0px;
  opacity: 0.999893;
  transform: matrix(1, 0, 0, 1, -125, 0);
  margin-top: 8px;
}

.c-header-inner-2__group-5 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #E8E6DC;
}

.c-header-inner-2__text-2 {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  color: #5E5D59;
  font-size: 14px;
  line-height: 16.8px;
  letter-spacing: 0.15px;
}

.c-header-inner-2__nav-list-2 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-header-inner-2__group-6 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-sizing: border-box;
}

.c-header-inner-2__group-7 {
  display: flex;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner-2__cta {
  display: block;
  box-sizing: border-box;
  height: 36px;
  padding: 8px 16px;
  background-color: #0F0F0E;
  color: #FAF9F5;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  line-height: 21px;
  text-decoration-line: none;
  transition: background-color 0.2s ease;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.c-header-inner-2__group-8 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 12px 16px;
  position: relative;
  background-color: #0F0F0E;
  color: #FAF9F5;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #FFFFFF33;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.c-header-inner-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 6px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition: transform 0.2s ease-in-out;
}

.c-header-inner-2__logo:hover {
  color: #87867F;
  text-decoration-color: #87867F;
}

.c-header-inner-2__logo:focus {
  color: #87867F;
  outline: none;
  text-decoration-color: #87867F;
}

.c-header-inner-2__button:hover {
  text-decoration-line: underline;
}

.c-header-inner-2__nav-link:hover {
  text-decoration-line: underline;
}

.c-header-inner-2__cta:hover {
  background-color: #000000CC;
}

<div class="c-header-inner-2-mobile-scope">
  <header class="c-header-inner-2-mobile">
    <div class="c-header-inner-2-mobile__inner">
      <a class="c-header-inner-2-mobile__logo" href="#">
        <span class="c-header-inner-2-mobile__logo-icon" aria-hidden="true"></span>
      </a>
      <div class="c-header-inner-2-mobile__group">
        <button class="c-header-inner-2-mobile__menu-toggle" type="button">
          <span class="c-header-inner-2-mobile__menu-toggle-icon" aria-hidden="true"></span>
        </button>
      </div>
    </div>
  </header>
</div>

.c-header-inner-2-mobile-scope {
  background-color: #FAF9F5;
  color: #141413;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-header-inner-2-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: sticky;
  top: 0px;
  z-index: 9999;
  background-color: #FAF9F5;
  color: #0F0F0E;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.16px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.c-header-inner-2-mobile__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 1400px;
  padding-right: 32px;
  padding-left: 32px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-inner-2-mobile__logo {
  display: block;
  box-sizing: border-box;
  color: #141413;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: #141413;
  transition: color 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.c-header-inner-2-mobile__logo-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-header-inner-2-mobile__group {
  display: flex;
  align-items: center;
  gap: 24px;
  box-sizing: border-box;
  margin-left: auto;
}

.c-header-inner-2-mobile__menu-toggle {
  display: flex;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #141413;
  border: 0;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}

.c-header-inner-2-mobile__menu-toggle-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-header-inner-2-mobile__logo:hover {
  color: #87867F;
  text-decoration-color: #87867F;
}

.c-header-inner-2-mobile__logo:focus {
  color: #87867F;
  outline: none;
  text-decoration-color: #87867F;
}

<div class="c-header-inner-3-scope">
  <header class="c-header-inner-3">
    <div class="c-header-inner-3__inner">
      <a class="c-header-inner-3__logo" href="#">
        <div class="c-header-inner-3__group">
          <div class="c-header-inner-3__group-2">
            <span class="c-header-inner-3__logo-icon" aria-hidden="true"></span>
          </div>
        </div>
      </a>
      <div class="c-header-inner-3__group-3">
        <nav class="c-header-inner-3__nav">
          <ul class="c-header-inner-3__nav-list">
            <li class="c-header-inner-3__nav-item">
              <button class="c-header-inner-3__cta" type="button">
                <span class="c-header-inner-3__text">lorem ip</span>
                <span class="c-header-inner-3__cta-icon" aria-hidden="true"></span>
              </button>
            </li>
            <li class="c-header-inner-3__nav-item">
              <a class="c-header-inner-3__nav-link" href="#">lorem</a>
            </li>
            <li class="c-header-inner-3__nav-item">
              <button class="c-header-inner-3__cta" type="button">
                <span class="c-header-inner-3__text">lorem ipsum</span>
                <span class="c-header-inner-3__cta-icon" aria-hidden="true"></span>
              </button>
            </li>
            <li class="c-header-inner-3__nav-item">
              <button class="c-header-inner-3__button" type="button">
                <span class="c-header-inner-3__text">lorem</span>
                <span class="c-header-inner-3__button-icon" aria-hidden="true"></span>
              </button>
            </li>
            <li class="c-header-inner-3__nav-item">
              <a class="c-header-inner-3__nav-link" href="#">lore</a>
            </li>
          </ul>
        </nav>
        <div class="c-header-inner-3__group-4">
          <a class="c-header-inner-3__cta-2" href="#">lorem ipsu</a>
          <div class="c-header-inner-3__group-5">
            <span class="c-header-inner-3__icon" aria-hidden="true"></span>
          </div>
        </div>
      </div>
    </div>
  </header>
</div>

.c-header-inner-3-scope {
  background-color: #FAF9F5;
  color: #141413;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-header-inner-3 {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: sticky;
  top: 0px;
  z-index: 9999;
  background-color: #FAF9F5;
  color: #0F0F0E;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.16px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.c-header-inner-3__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 1400px;
  padding-right: 64px;
  padding-left: 64px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-inner-3__logo {
  display: block;
  box-sizing: border-box;
  color: #141413;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: #141413;
  transition: color 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.c-header-inner-3__group {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 143px;
  height: 16px;
  position: relative;
}

.c-header-inner-3__group-2 {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  position: relative;
}

.c-header-inner-3__logo-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 143px;
  height: 16px;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
  transform: matrix(1, 0, 0, 1, 0, 0);
}

.c-header-inner-3__group-3 {
  display: flex;
  align-items: center;
  gap: 24px;
  box-sizing: border-box;
  margin-left: auto;
}

.c-header-inner-3__nav {
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.c-header-inner-3__nav-list {
  display: flex;
  gap: 24px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-header-inner-3__nav-item {
  display: list-item;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  line-height: 21px;
}

.c-header-inner-3__cta {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #0F0F0E;
  border: 0;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -0.0375px;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
}

.c-header-inner-3__cta-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 6px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix(1, 0, 0, 1, 0, 1);
  transition: transform 0.2s ease-in-out;
}

.c-header-inner-3__nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  color: #0F0F0E;
  cursor: pointer;
  letter-spacing: -0.0375px;
  text-decoration-line: none;
  white-space: nowrap;
}

.c-header-inner-3__button {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #0F0F0E;
  border: 0;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -0.0375px;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
}

.c-header-inner-3__button-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 6px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix(1, 0, 0, 1, 0, 1);
  transition: transform 0.2s ease-in-out;
}

.c-header-inner-3__group-4 {
  display: flex;
  box-sizing: border-box;
  position: relative;
}

.c-header-inner-3__cta-2 {
  display: block;
  box-sizing: border-box;
  height: 36px;
  padding: 8px 16px;
  background-color: #0F0F0E;
  color: #FAF9F5;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  line-height: 21px;
  text-decoration-line: none;
  transition: background-color 0.2s ease;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.c-header-inner-3__group-5 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 12px 16px;
  position: relative;
  background-color: #0F0F0E;
  color: #FAF9F5;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #FFFFFF33;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.c-header-inner-3__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 6px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transition: transform 0.2s ease-in-out;
}

.c-header-inner-3__logo:hover {
  color: #87867F;
  text-decoration-color: #87867F;
}

.c-header-inner-3__logo:focus {
  color: #87867F;
  outline: none;
  text-decoration-color: #87867F;
}

.c-header-inner-3__cta:hover {
  text-decoration-line: underline;
}

.c-header-inner-3__nav-link:hover {
  text-decoration-line: underline;
}

.c-header-inner-3__button:hover {
  text-decoration-line: underline;
}

.c-header-inner-3__cta-2:hover {
  background-color: #000000CC;
}

<div class="c-header-inner-3-mobile-scope">
  <header class="c-header-inner-3-mobile">
    <div class="c-header-inner-3-mobile__inner">
      <a class="c-header-inner-3-mobile__logo" href="#">
        <span class="c-header-inner-3-mobile__logo-icon" aria-hidden="true"></span>
      </a>
      <div class="c-header-inner-3-mobile__group">
        <button class="c-header-inner-3-mobile__menu-toggle" type="button">
          <span class="c-header-inner-3-mobile__menu-toggle-icon" aria-hidden="true"></span>
        </button>
      </div>
    </div>
  </header>
</div>

.c-header-inner-3-mobile-scope {
  background-color: #FAF9F5;
  color: #141413;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-header-inner-3-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: sticky;
  top: 0px;
  z-index: 9999;
  background-color: #FAF9F5;
  color: #0F0F0E;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.16px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.c-header-inner-3-mobile__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 1400px;
  padding-right: 32px;
  padding-left: 32px;
  margin-right: auto;
  margin-left: auto;
}

.c-header-inner-3-mobile__logo {
  display: block;
  box-sizing: border-box;
  color: #141413;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: #141413;
  transition: color 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.c-header-inner-3-mobile__logo-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-header-inner-3-mobile__group {
  display: flex;
  align-items: center;
  gap: 24px;
  box-sizing: border-box;
  margin-left: auto;
}

.c-header-inner-3-mobile__menu-toggle {
  display: flex;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #141413;
  border: 0;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
}

.c-header-inner-3-mobile__menu-toggle-icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-header-inner-3-mobile__logo:focus {
  color: #87867F;
  outline: none;
  text-decoration-color: #87867F;
}

<div class="c-footer-landing-scope">
  <footer class="c-footer-landing">
    <h2 class="c-footer-landing__heading">lorem</h2>
    <div class="c-footer-landing__inner">
      <nav class="c-footer-landing__nav">
        <div class="c-footer-landing__group">
          <span class="c-footer-landing__icon" aria-hidden="true"></span>
          <div class="c-footer-landing__group-2">
            <div class="c-footer-landing__group-3">
              <span class="c-footer-landing__text">l</span>
              <span class="c-footer-landing__text">lore</span>
              <span class="c-footer-landing__text-2">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor</span>
            </div>
            <ul class="c-footer-landing__list">
              <li class="c-footer-landing__nav-item">
                <a class="c-footer-landing__nav-link" href="#">
                  <div class="c-footer-landing__group-4"></div>
                </a>
              </li>
              <li class="c-footer-landing__nav-item">
                <a class="c-footer-landing__nav-link" href="#">
                  <div class="c-footer-landing__group-4"></div>
                </a>
              </li>
              <li class="c-footer-landing__nav-item">
                <a class="c-footer-landing__nav-link" href="#">
                  <div class="c-footer-landing__group-4"></div>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="c-footer-landing__columns">
          <section class="c-footer-landing__column">
            <div class="c-footer-landing__group-5">
              <h3 class="c-footer-landing__column-heading">lorem ip</h3>
              <ul class="c-footer-landing__list-2">
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
              </ul>
            </div>
            <div class="c-footer-landing__group-5">
              <h3 class="c-footer-landing__column-heading">lorem</h3>
              <ul class="c-footer-landing__list-2">
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
              </ul>
            </div>
          </section>
          <section class="c-footer-landing__column">
            <div class="c-footer-landing__group-5">
              <h3 class="c-footer-landing__column-heading">lorem ips</h3>
              <ul class="c-footer-landing__list-2">
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
              </ul>
            </div>
            <div class="c-footer-landing__group-5">
              <h3 class="c-footer-landing__column-heading">lorem ipsum dol</h3>
              <ul class="c-footer-landing__list-2">
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2">
                  <a class="c-footer-landing__nav-link-2" href="#"></a>
                </li>
                <li class="c-footer-landing__nav-item-2"></li>
              </ul>
            </div>
          </section>
        </div>
      </nav>
    </div>
  </footer>
</div>

.c-footer-landing-scope {
  background-color: #F0EEE6;
  color: #141413;
  font-family: "Anthropic Serif", Georgia, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}

.c-footer-landing {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  background-color: #141413;
  color: #FAF9F5;
  font-family: "Anthropic Sans", Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
}

.c-footer-landing__heading {
  display: flow-root;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: 0px auto;
  position: absolute;
  top: 0%;
  right: 0%;
  left: 0%;
  overflow-x: hidden;
  overflow-y: hidden;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}

.c-footer-landing__heading::before {
  content: "";
  display: table;
  box-sizing: border-box;
  margin-bottom: -4.31844px;
}

.c-footer-landing__heading::after {
  content: "";
  display: table;
  box-sizing: border-box;
  margin-bottom: -3.59844px;
}

.c-footer-landing__inner {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 1284.54px;
  position: relative;
  padding-top: 75.8204px;
  padding-bottom: 75.8204px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-landing__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 31.4776px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  box-sizing: border-box;
}

.c-footer-landing__group {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  width: 297.527px;
}

.c-footer-landing__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 45px;
  height: 32px;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-footer-landing__group-2 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  box-sizing: border-box;
  width: 100%;
}

.c-footer-landing__group-3 {
  display: block;
  box-sizing: border-box;
  color: #B0AEA5;
}

.c-footer-landing__text-2 {
  display: inline;
  box-sizing: border-box;
}

.c-footer-landing__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: "";
}

.c-footer-landing__nav-item {
  display: flex;
  box-sizing: border-box;
}

.c-footer-landing__nav-link {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  color: #B0AEA5;
  cursor: pointer;
  text-decoration-line: none;
  transition: color 0.2s ease;
}

.c-footer-landing__group-4 {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
}

.c-footer-landing__columns {
  display: grid;
  justify-content: space-between;
  flex-grow: 1;
  flex-basis: 0%;
  gap: 31.4776px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  box-sizing: border-box;
}

.c-footer-landing__column {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0%;
  gap: 46.4327px;
  box-sizing: border-box;
  position: relative;
}

.c-footer-landing__group-5 {
  display: block;
  box-sizing: border-box;
}

.c-footer-landing__column-heading {
  display: flow-root;
  box-sizing: border-box;
  margin: 0px 0px 8px;
  font-size: 12px;
  font-weight: 500;
}

.c-footer-landing__column-heading::before {
  content: "";
  display: table;
  box-sizing: border-box;
  margin-bottom: -4.31844px;
}

.c-footer-landing__column-heading::after {
  content: "";
  display: table;
  box-sizing: border-box;
  margin-bottom: -3.59844px;
}

.c-footer-landing__list-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-landing__nav-item-2 {
  display: flex;
  box-sizing: border-box;
  padding-top: 4px;
  padding-bottom: 8px;
}

.c-footer-landing__nav-link-2 {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  color: #B0AEA5;
  cursor: pointer;
  letter-spacing: -0.24px;
  text-decoration-line: none;
  transition: color 0.2s ease;
}

.c-footer-landing__nav-link:hover {
  color: #FAF9F5;
}

.c-footer-landing__nav-link:focus {
  outline: 2px solid #FAF9F5;
  outline-offset: 4px;
}

.c-footer-landing__nav-link-2:hover {
  color: #FAF9F5;
  text-decoration-line: underline;
  text-decoration-color: #FAF9F5;
}

.c-footer-landing__nav-link-2:focus {
  outline: 2px solid #FAF9F5;
  outline-offset: 4px;
}

<div class="c-footer-landing-mobile-scope">
  <footer class="c-footer-landing-mobile">
    <h2 class="c-footer-landing-mobile__heading">lorem</h2>
    <div class="c-footer-landing-mobile__inner">
      <nav class="c-footer-landing-mobile__nav">
        <div class="c-footer-landing-mobile__group">
          <span class="c-footer-landing-mobile__icon" aria-hidden="true"></span>
        </div>
        <div class="c-footer-landing-mobile__columns">
          <section class="c-footer-landing-mobile__column">
            <div class="c-footer-landing-mobile__group-2">
              <h3 class="c-footer-landing-mobile__column-heading">lorem ip</h3>
              <ul class="c-footer-landing-mobile__list">
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
              </ul>
            </div>
            <div class="c-footer-landing-mobile__group-2">
              <h3 class="c-footer-landing-mobile__column-heading">lorem</h3>
              <ul class="c-footer-landing-mobile__list">
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
              </ul>
            </div>
          </section>
          <section class="c-footer-landing-mobile__column">
            <div class="c-footer-landing-mobile__group-2">
              <h3 class="c-footer-landing-mobile__column-heading">lorem ips</h3>
              <ul class="c-footer-landing-mobile__list">
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
              </ul>
            </div>
            <div class="c-footer-landing-mobile__group-2">
              <h3 class="c-footer-landing-mobile__column-heading">lorem ipsum dol</h3>
              <ul class="c-footer-landing-mobile__list">
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
              </ul>
            </div>
          </section>
          <section class="c-footer-landing-mobile__column">
            <div class="c-footer-landing-mobile__group-2">
              <h3 class="c-footer-landing-mobile__column-heading">lorem ips</h3>
              <ul class="c-footer-landing-mobile__list">
                <li class="c-footer-landing-mobile__nav-item">
                  <a class="c-footer-landing-mobile__nav-link" href="#"></a>
                </li>
                <li class="c-footer-landing-mobile__nav-item"></li>
              </ul>
            </div>
          </section>
        </div>
      </nav>
    </div>
  </footer>
</div>

.c-footer-landing-mobile-scope {
  background-color: #F0EEE6;
  color: #141413;
  font-family: "Anthropic Serif", Georgia, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
}

.c-footer-landing-mobile {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  position: relative;
  background-color: #141413;
  color: #FAF9F5;
  font-family: "Anthropic Sans", Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
}

.c-footer-landing-mobile__heading {
  display: flow-root;
  box-sizing: border-box;
  width: 1px;
  height: 1px;
  margin: 0px auto;
  position: absolute;
  top: 0%;
  right: 0%;
  left: 0%;
  overflow-x: hidden;
  overflow-y: hidden;
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
}

.c-footer-landing-mobile__heading::before {
  content: "";
  display: table;
  box-sizing: border-box;
  margin-bottom: -4.31844px;
}

.c-footer-landing-mobile__heading::after {
  content: "";
  display: table;
  box-sizing: border-box;
  margin-bottom: -3.59844px;
}

.c-footer-landing-mobile__inner {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 324.824px;
  position: relative;
  padding-top: 48.3918px;
  padding-bottom: 48.3918px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-landing-mobile__nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 48.3918px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  box-sizing: border-box;
}

.c-footer-landing-mobile__group {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  width: 89.5755px;
}

.c-footer-landing-mobile__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 45px;
  height: 32px;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: currentcolor;
}

.c-footer-landing-mobile__columns {
  display: grid;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  flex-basis: 0%;
  gap: 28.049px;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  box-sizing: border-box;
}

.c-footer-landing-mobile__column {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  flex-basis: 0%;
  gap: 28.049px;
  box-sizing: border-box;
  position: relative;
}

.c-footer-landing-mobile__group-2 {
  display: block;
  flex-grow: 1;
  flex-basis: 0%;
  box-sizing: border-box;
}

.c-footer-landing-mobile__column-heading {
  display: flow-root;
  box-sizing: border-box;
  margin: 0px 0px 8px;
  font-size: 12px;
  font-weight: 500;
}

.c-footer-landing-mobile__column-heading::before {
  content: "";
  display: table;
  box-sizing: border-box;
  margin-bottom: -4.31844px;
}

.c-footer-landing-mobile__column-heading::after {
  content: "";
  display: table;
  box-sizing: border-box;
  margin-bottom: -3.59844px;
}

.c-footer-landing-mobile__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-landing-mobile__nav-item {
  display: flex;
  box-sizing: border-box;
  padding-top: 4px;
  padding-bottom: 8px;
}

.c-footer-landing-mobile__nav-link {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  color: #B0AEA5;
  cursor: pointer;
  letter-spacing: -0.24px;
  text-decoration-line: none;
  transition: color 0.2s ease;
}

.c-footer-landing-mobile__nav-link:hover {
  color: #FAF9F5;
  text-decoration-line: underline;
  text-decoration-color: #FAF9F5;
  text-decoration-thickness: auto;
  text-underline-offset: 3px;
}

.c-footer-landing-mobile__nav-link:focus {
  outline: 2px solid #FAF9F5;
  outline-offset: 4px;
}

<div class="c-footer-inner-scope">
  <footer class="c-footer-inner">
    <div class="c-footer-inner__columns">
      <div class="c-footer-inner__column">
        <a class="c-footer-inner__link" href="#">
          <span class="c-footer-inner__link-icon" aria-hidden="true"></span>
        </a>
      </div>
      <nav class="c-footer-inner__nav">
        <div class="c-footer-inner__group">
          <div class="c-footer-inner__group-2">
            <h3 class="c-footer-inner__heading">lorem ip</h3>
            <ul class="c-footer-inner__list">
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsum</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsum dolor sit</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsum d</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem i</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsum d</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsum do</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsum dol</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsum dolo</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsum dolor sit am</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsum</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem i</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsum dolo</a>
              </li>
            </ul>
          </div>
          <div class="c-footer-inner__group-2">
            <h3 class="c-footer-inner__heading">lorem</h3>
            <ul class="c-footer-inner__list">
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lore</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="c-footer-inner__group">
          <div class="c-footer-inner__group-2">
            <h3 class="c-footer-inner__heading">lorem ips</h3>
            <ul class="c-footer-inner__list">
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ips</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsum dolor</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ip</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsum dolo</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsum d</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsu</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsum dolor</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsu</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsu</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsum dolo</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsum d</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsum d</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsu</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsum do</a>
              </li>
            </ul>
          </div>
          <div class="c-footer-inner__group-2">
            <h3 class="c-footer-inner__heading">lorem ipsum dol</h3>
            <ul class="c-footer-inner__list">
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ip</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsum do</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem i</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ips</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsum</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsum dolor s</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsum d</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsum</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsum dolor</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsum d</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="c-footer-inner__group">
          <div class="c-footer-inner__group-2">
            <h3 class="c-footer-inner__heading">lorem ips</h3>
            <ul class="c-footer-inner__list">
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lore</a>
              </li>
              <li class="c-footer-inner__nav-item">
                <a class="c-footer-inner__nav-link" href="#">lorem ipsum dolor sit</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  </footer>
</div>

.c-footer-inner-scope {
  background-color: #FAF9F5;
  color: #141413;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-footer-inner {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  background-color: #141413;
  color: #FAF9F5;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.16px;
}

.c-footer-inner__columns {
  display: grid;
  flex-direction: column;
  gap: 64px;
  grid-template-columns: repeat(11, 1fr);
  box-sizing: border-box;
  width: 100%;
  max-width: 1400px;
  padding: 64px;
  margin-right: auto;
  margin-left: auto;
}

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

.c-footer-inner__link {
  display: inline;
  box-sizing: border-box;
  color: #141413;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: #141413;
  transition: color 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.c-footer-inner__link-icon {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 46px;
  height: 32px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-inner__nav {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(4, 1fr);
  box-sizing: border-box;
}

.c-footer-inner__group {
  display: flex;
  flex-direction: column;
  gap: 48px;
  box-sizing: border-box;
}

.c-footer-inner__group-2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
}

.c-footer-inner__heading {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 16.8px;
}

.c-footer-inner__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-inner__nav-item {
  display: list-item;
  box-sizing: border-box;
}

.c-footer-inner__nav-link {
  display: inline;
  box-sizing: border-box;
  color: #B0AEA5;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 12px;
  line-height: 16.8px;
  text-decoration-line: none;
}

.c-footer-inner__link:focus {
  color: #87867F;
  outline: none;
  text-decoration-color: #87867F;
}

.c-footer-inner__nav-link:hover {
  color: #FFFFFF;
  text-decoration-line: underline;
  text-decoration-color: #FFFFFF;
}

<div class="c-footer-inner-mobile-scope">
  <footer class="c-footer-inner-mobile">
    <div class="c-footer-inner-mobile__inner">
      <div class="c-footer-inner-mobile__group">
        <a class="c-footer-inner-mobile__link" href="#">
          <span class="c-footer-inner-mobile__link-icon" aria-hidden="true"></span>
        </a>
      </div>
      <nav class="c-footer-inner-mobile__nav">
        <div class="c-footer-inner-mobile__group-2">
          <div class="c-footer-inner-mobile__group-3">
            <h3 class="c-footer-inner-mobile__heading">lorem ip</h3>
            <ul class="c-footer-inner-mobile__list">
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsum</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsum dolor sit</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsum d</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem i</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsum d</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsum do</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsum dol</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsum dolo</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsum dolor sit am</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsum</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem i</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsum dolo</a>
              </li>
            </ul>
          </div>
          <div class="c-footer-inner-mobile__group-3">
            <h3 class="c-footer-inner-mobile__heading">lorem</h3>
            <ul class="c-footer-inner-mobile__list">
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lore</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="c-footer-inner-mobile__group-2">
          <div class="c-footer-inner-mobile__group-3">
            <h3 class="c-footer-inner-mobile__heading">lorem ips</h3>
            <ul class="c-footer-inner-mobile__list">
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ips</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsum dolor</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ip</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsum dolo</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsum d</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsu</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsum dolor</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsu</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsu</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsum dolo</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsum d</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsum d</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsu</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsum do</a>
              </li>
            </ul>
          </div>
          <div class="c-footer-inner-mobile__group-3">
            <h3 class="c-footer-inner-mobile__heading">lorem ipsum dol</h3>
            <ul class="c-footer-inner-mobile__list">
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ip</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsum do</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem i</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ips</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsum</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsum dolor s</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsum d</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsum</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsum dolor</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsum d</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="c-footer-inner-mobile__group-2">
          <div class="c-footer-inner-mobile__group-3">
            <h3 class="c-footer-inner-mobile__heading">lorem ips</h3>
            <ul class="c-footer-inner-mobile__list">
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lore</a>
              </li>
              <li class="c-footer-inner-mobile__nav-item">
                <a class="c-footer-inner-mobile__nav-link" href="#">lorem ipsum dolor sit</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  </footer>
</div>

.c-footer-inner-mobile-scope {
  background-color: #FAF9F5;
  color: #141413;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-footer-inner-mobile {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  background-color: #141413;
  color: #FAF9F5;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.16px;
}

.c-footer-inner-mobile__inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
  box-sizing: border-box;
  width: 100%;
  max-width: 1400px;
  padding: 32px;
  margin-right: auto;
  margin-left: auto;
}

.c-footer-inner-mobile__group {
  display: block;
  box-sizing: border-box;
}

.c-footer-inner-mobile__link {
  display: inline;
  box-sizing: border-box;
  color: #141413;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: #141413;
  transition: color 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.c-footer-inner-mobile__link-icon {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 46px;
  height: 32px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-footer-inner-mobile__nav {
  display: block;
  box-sizing: border-box;
}

.c-footer-inner-mobile__group-2 {
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-sizing: border-box;
  margin-bottom: 32px;
}

.c-footer-inner-mobile__group-3 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
}

.c-footer-inner-mobile__heading {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 16.8px;
}

.c-footer-inner-mobile__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-inner-mobile__nav-item {
  display: list-item;
  box-sizing: border-box;
}

.c-footer-inner-mobile__nav-link {
  display: inline;
  box-sizing: border-box;
  color: #B0AEA5;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 12px;
  line-height: 16.8px;
  text-decoration-line: none;
}

.c-footer-inner-mobile__link:hover {
  color: #87867F;
  text-decoration-color: #87867F;
}

.c-footer-inner-mobile__link:focus {
  color: #87867F;
  outline: none;
  text-decoration-color: #87867F;
}

.c-footer-inner-mobile__nav-link:hover {
  color: #FFFFFF;
  text-decoration-line: underline;
  text-decoration-color: #FFFFFF;
}

<div class="c-footer-nav-scope">
  <nav class="c-footer-nav">
    <div class="c-footer-nav__group">
      <div class="c-footer-nav__group-2">
        <h3 class="c-footer-nav__title">lorem ip</h3>
        <ul class="c-footer-nav__list">
          <li class="c-footer-nav__item"></li>
          <li class="c-footer-nav__item"></li>
          <li class="c-footer-nav__item"></li>
          <li class="c-footer-nav__item"></li>
          <li class="c-footer-nav__item"></li>
          <li class="c-footer-nav__item"></li>
          <li class="c-footer-nav__item"></li>
          <li class="c-footer-nav__item"></li>
          <li class="c-footer-nav__item"></li>
          <li class="c-footer-nav__item"></li>
          <li class="c-footer-nav__item"></li>
          <li class="c-footer-nav__item"></li>
          <li class="c-footer-nav__item"></li>
          <li class="c-footer-nav__item"></li>
        </ul>
      </div>
      <div class="c-footer-nav__group-2">
        <h3 class="c-footer-nav__title">lorem</h3>
        <ul class="c-footer-nav__list">
          <li class="c-footer-nav__item"></li>
          <li class="c-footer-nav__item"></li>
          <li class="c-footer-nav__item"></li>
          <li class="c-footer-nav__item"></li>
          <li class="c-footer-nav__item"></li>
        </ul>
      </div>
    </div>
    <div class="c-footer-nav__group">
      <div class="c-footer-nav__group-2">
        <h3 class="c-footer-nav__title">lorem ips</h3>
        <ul class="c-footer-nav__list">
          <li class="c-footer-nav__item"></li>
          <li class="c-footer-nav__item"></li>
          <li class="c-footer-nav__item"></li>
          <li class="c-footer-nav__item"></li>
          <li class="c-footer-nav__item"></li>
          <li class="c-footer-nav__item"></li>
          <li class="c-footer-nav__item"></li>
          <li class="c-footer-nav__item"></li>
          <li class="c-footer-nav__item"></li>
        </ul>
      </div>
    </div>
  </nav>
</div>

.c-footer-nav-scope {
  background-color: #141413;
  color: #FAF9F5;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-footer-nav {
  display: inline-grid;
  gap: 32px;
  grid-template-columns: repeat(4, 1fr);
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FAF9F5;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.16px;
}

.c-footer-nav__group {
  display: flex;
  flex-direction: column;
  gap: 48px;
  box-sizing: border-box;
}

.c-footer-nav__group-2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
}

.c-footer-nav__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 16.8px;
}

.c-footer-nav__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-nav__item {
  display: list-item;
  box-sizing: border-box;
}

<div class="c-social-link-scope">
  <ul class="c-social-link">
    <li class="c-social-link__item">
      <a class="c-social-link__link" href="#">
        <span class="c-social-link__icon" aria-hidden="true"></span>
      </a>
    </li>
    <li class="c-social-link__item">
      <a class="c-social-link__link" href="#">
        <span class="c-social-link__icon" aria-hidden="true"></span>
      </a>
    </li>
    <li class="c-social-link__item">
      <a class="c-social-link__link" href="#">
        <span class="c-social-link__icon" aria-hidden="true"></span>
      </a>
    </li>
  </ul>
</div>

.c-social-link-scope {
  background-color: #141413;
  color: #FAF9F5;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-social-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  color: #FAF9F5;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.16px;
  list-style-type: none;
}

.c-social-link__item {
  display: list-item;
  box-sizing: border-box;
}

.c-social-link__link {
  display: inline;
  box-sizing: border-box;
  color: #141413;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-color: #141413;
  transition: color 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.c-social-link__icon {
  display: inline-block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

<div class="c-input-scope">
  <input class="c-input" type="text" placeholder="lorem">
</div>

.c-input-scope {
  background-color: #FAF9F5;
  color: #141413;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-input {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  width: 294px;
  height: 44px;
  min-height: 44px;
  padding: 8px 16px 8px 40px;
  overflow-x: clip;
  overflow-y: clip;
  background-color: #FFFFFF;
  color: #141413;
  border: 1px solid #D1CFC5;
  border-radius: 12px;
  cursor: text;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: normal;
  text-transform: none;
  text-align: start;
  transition: all 0.2s ease;
}

.c-input:focus {
  border: 1px solid #87867F;
  outline: none;
}

<div class="c-footer-navigation-scope">
  <nav class="c-footer-navigation">
    <div class="c-footer-navigation__group">
      <div class="c-footer-navigation__group-2">
        <h3 class="c-footer-navigation__title">lorem ip</h3>
        <ul class="c-footer-navigation__list">
          <li class="c-footer-navigation__item"></li>
          <li class="c-footer-navigation__item"></li>
          <li class="c-footer-navigation__item"></li>
          <li class="c-footer-navigation__item"></li>
          <li class="c-footer-navigation__item"></li>
          <li class="c-footer-navigation__item"></li>
          <li class="c-footer-navigation__item"></li>
          <li class="c-footer-navigation__item"></li>
          <li class="c-footer-navigation__item"></li>
          <li class="c-footer-navigation__item"></li>
          <li class="c-footer-navigation__item"></li>
          <li class="c-footer-navigation__item"></li>
          <li class="c-footer-navigation__item"></li>
          <li class="c-footer-navigation__item"></li>
        </ul>
      </div>
      <div class="c-footer-navigation__group-2">
        <h3 class="c-footer-navigation__title">lorem</h3>
        <ul class="c-footer-navigation__list">
          <li class="c-footer-navigation__item"></li>
          <li class="c-footer-navigation__item"></li>
          <li class="c-footer-navigation__item"></li>
          <li class="c-footer-navigation__item"></li>
          <li class="c-footer-navigation__item"></li>
        </ul>
      </div>
    </div>
    <div class="c-footer-navigation__group">
      <div class="c-footer-navigation__group-2">
        <h3 class="c-footer-navigation__title">lorem ips</h3>
        <ul class="c-footer-navigation__list">
          <li class="c-footer-navigation__item"></li>
          <li class="c-footer-navigation__item"></li>
          <li class="c-footer-navigation__item"></li>
          <li class="c-footer-navigation__item"></li>
          <li class="c-footer-navigation__item"></li>
          <li class="c-footer-navigation__item"></li>
          <li class="c-footer-navigation__item"></li>
          <li class="c-footer-navigation__item"></li>
          <li class="c-footer-navigation__item"></li>
        </ul>
      </div>
    </div>
  </nav>
</div>

.c-footer-navigation-scope {
  background-color: #141413;
  color: #FAF9F5;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-footer-navigation {
  display: inline-grid;
  gap: 32px;
  grid-template-columns: repeat(4, 1fr);
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FAF9F5;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.16px;
}

.c-footer-navigation__group {
  display: flex;
  flex-direction: column;
  gap: 48px;
  box-sizing: border-box;
}

.c-footer-navigation__group-2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
}

.c-footer-navigation__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 16.8px;
}

.c-footer-navigation__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-navigation__item {
  display: list-item;
  box-sizing: border-box;
}

<div class="c-navigation-menu-scope">
  <nav class="c-navigation-menu">
    <ul class="c-navigation-menu__list">
      <li class="c-navigation-menu__item">
        <button class="c-navigation-menu__button" type="button">
          <span class="c-navigation-menu__text">lorem ip</span>
          <span class="c-navigation-menu__icon" aria-hidden="true"></span>
        </button>
      </li>
      <li class="c-navigation-menu__item">
        <a class="c-navigation-menu__link" href="#">lorem</a>
      </li>
      <li class="c-navigation-menu__item">
        <button class="c-navigation-menu__button" type="button">
          <span class="c-navigation-menu__text">lorem ipsum</span>
          <span class="c-navigation-menu__icon" aria-hidden="true"></span>
        </button>
      </li>
      <li class="c-navigation-menu__item">
        <button class="c-navigation-menu__button" type="button">
          <span class="c-navigation-menu__text">lorem</span>
          <span class="c-navigation-menu__icon" aria-hidden="true"></span>
        </button>
      </li>
      <li class="c-navigation-menu__item">
        <a class="c-navigation-menu__link" href="#">lore</a>
      </li>
    </ul>
  </nav>
</div>

.c-navigation-menu-scope {
  background-color: #FAF9F5;
  color: #0F0F0E;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-navigation-menu {
  display: inline-flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #0F0F0E;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.16px;
}

.c-navigation-menu__list {
  display: flex;
  gap: 24px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-navigation-menu__item {
  display: list-item;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  line-height: 21px;
}

.c-navigation-menu__button {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #0F0F0E;
  border: 0;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -0.0375px;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
}

.c-navigation-menu__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 6px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix(1, 0, 0, 1, 0, 1);
  transition: transform 0.2s ease-in-out;
}

.c-navigation-menu__link {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  color: #0F0F0E;
  cursor: pointer;
  letter-spacing: -0.0375px;
  text-decoration-line: none;
  white-space: nowrap;
}

<div class="c-navigation-menu-2-scope">
  <button class="c-navigation-menu-2" type="button">
    <span class="c-navigation-menu-2__text">lorem ip</span>
    <span class="c-navigation-menu-2__icon" aria-hidden="true"></span>
  </button>
</div>

.c-navigation-menu-2-scope {
  background-color: #FAF9F5;
  color: #0F0F0E;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
}

.c-navigation-menu-2 {
  display: flex;
  align-items: center;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #0F0F0E;
  border: 0;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -0.0375px;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  list-style-type: none;
}

.c-navigation-menu-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 6px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix(1, 0, 0, 1, 0, 1);
  transition: transform 0.2s ease-in-out;
}

.c-navigation-menu-2:hover {
  text-decoration-line: underline;
}

<div class="c-navigation-menu-3-scope">
  <button class="c-navigation-menu-3" type="button">
    <span class="c-navigation-menu-3__text">lorem ipsum</span>
    <span class="c-navigation-menu-3__icon" aria-hidden="true"></span>
  </button>
</div>

.c-navigation-menu-3-scope {
  background-color: #FAF9F5;
  color: #0F0F0E;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
}

.c-navigation-menu-3 {
  display: flex;
  align-items: center;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #0F0F0E;
  border: 0;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -0.0375px;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  list-style-type: none;
}

.c-navigation-menu-3__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 6px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix(0.984618, 0.174719, -0.174719, 0.984618, 0, 0.944098);
  transition: transform 0.2s ease-in-out;
}

.c-navigation-menu-3:hover {
  text-decoration-line: underline;
}

<div class="c-footer-link-column-scope">
  <nav class="c-footer-link-column">
    <div class="c-footer-link-column__group">
      <div class="c-footer-link-column__group-2">
        <h3 class="c-footer-link-column__title">lorem ip</h3>
        <ul class="c-footer-link-column__list">
          <li class="c-footer-link-column__item"></li>
          <li class="c-footer-link-column__item"></li>
          <li class="c-footer-link-column__item"></li>
          <li class="c-footer-link-column__item"></li>
          <li class="c-footer-link-column__item"></li>
          <li class="c-footer-link-column__item"></li>
          <li class="c-footer-link-column__item"></li>
          <li class="c-footer-link-column__item"></li>
          <li class="c-footer-link-column__item"></li>
          <li class="c-footer-link-column__item"></li>
          <li class="c-footer-link-column__item"></li>
          <li class="c-footer-link-column__item"></li>
          <li class="c-footer-link-column__item"></li>
          <li class="c-footer-link-column__item"></li>
        </ul>
      </div>
      <div class="c-footer-link-column__group-2">
        <h3 class="c-footer-link-column__title">lorem</h3>
        <ul class="c-footer-link-column__list">
          <li class="c-footer-link-column__item"></li>
          <li class="c-footer-link-column__item"></li>
          <li class="c-footer-link-column__item"></li>
          <li class="c-footer-link-column__item"></li>
          <li class="c-footer-link-column__item"></li>
        </ul>
      </div>
    </div>
    <div class="c-footer-link-column__group">
      <div class="c-footer-link-column__group-2">
        <h3 class="c-footer-link-column__title">lorem ips</h3>
        <ul class="c-footer-link-column__list">
          <li class="c-footer-link-column__item"></li>
          <li class="c-footer-link-column__item"></li>
          <li class="c-footer-link-column__item"></li>
          <li class="c-footer-link-column__item"></li>
          <li class="c-footer-link-column__item"></li>
          <li class="c-footer-link-column__item"></li>
          <li class="c-footer-link-column__item"></li>
          <li class="c-footer-link-column__item"></li>
          <li class="c-footer-link-column__item"></li>
        </ul>
      </div>
    </div>
  </nav>
</div>

.c-footer-link-column-scope {
  background-color: #141413;
  color: #FAF9F5;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-footer-link-column {
  display: inline-grid;
  gap: 32px;
  grid-template-columns: repeat(4, 1fr);
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FAF9F5;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.16px;
}

.c-footer-link-column__group {
  display: flex;
  flex-direction: column;
  gap: 48px;
  box-sizing: border-box;
}

.c-footer-link-column__group-2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
}

.c-footer-link-column__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 16.8px;
}

.c-footer-link-column__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-footer-link-column__item {
  display: list-item;
  box-sizing: border-box;
}

<div class="c-navigation-dropdown-scope">
  <button class="c-navigation-dropdown" type="button">
    <span class="c-navigation-dropdown__text">lorem ip</span>
    <span class="c-navigation-dropdown__icon" aria-hidden="true"></span>
  </button>
</div>

.c-navigation-dropdown-scope {
  background-color: #FAF9F5;
  color: #0F0F0E;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
}

.c-navigation-dropdown {
  display: flex;
  align-items: center;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #0F0F0E;
  border: 0;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -0.0375px;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  list-style-type: none;
}

.c-navigation-dropdown__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 6px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix(1, 0, 0, 1, 0, 1);
  transition: transform 0.2s ease-in-out;
}

.c-navigation-dropdown:hover {
  text-decoration-line: underline;
}

<div class="c-navigation-dropdown-2-scope">
  <button class="c-navigation-dropdown-2" type="button">
    <span class="c-navigation-dropdown-2__text">lorem ipsum</span>
    <span class="c-navigation-dropdown-2__icon" aria-hidden="true"></span>
  </button>
</div>

.c-navigation-dropdown-2-scope {
  background-color: #FAF9F5;
  color: #0F0F0E;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
}

.c-navigation-dropdown-2 {
  display: flex;
  align-items: center;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #0F0F0E;
  border: 0;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -0.0375px;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  list-style-type: none;
}

.c-navigation-dropdown-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 6px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix(1, 0, 0, 1, 0, 1);
  transition: transform 0.2s ease-in-out;
}

.c-navigation-dropdown-2:hover {
  text-decoration-line: underline;
}

<div class="c-navigation-dropdown-3-scope">
  <button class="c-navigation-dropdown-3" type="button">
    <span class="c-navigation-dropdown-3__text">lorem</span>
    <span class="c-navigation-dropdown-3__icon" aria-hidden="true"></span>
  </button>
</div>

.c-navigation-dropdown-3-scope {
  background-color: #FAF9F5;
  color: #0F0F0E;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
}

.c-navigation-dropdown-3 {
  display: flex;
  align-items: center;
  gap: 8px;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #0F0F0E;
  border: 0;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -0.0375px;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
  list-style-type: none;
}

.c-navigation-dropdown-3__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 6px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix(1, 0, 0, 1, 0, 1);
  transition: transform 0.2s ease-in-out;
}

.c-navigation-dropdown-3:hover {
  text-decoration-line: underline;
}

<div class="c-legal-text-scope">
  <small class="c-legal-text">lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor lorem</small>
</div>

.c-legal-text-scope {
  background-color: #141413;
  color: #FAF9F5;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-legal-text {
  display: inline-block;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #B0AEA5;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
}

<div class="c-nav-scope">
  <nav class="c-nav">
    <ul class="c-nav__list">
      <li class="c-nav__item">
        <button class="c-nav__button" type="button">
          <span class="c-nav__text">lorem ip</span>
          <span class="c-nav__icon" aria-hidden="true"></span>
        </button>
      </li>
      <li class="c-nav__item">
        <a class="c-nav__link" href="#">lorem</a>
      </li>
      <li class="c-nav__item">
        <button class="c-nav__button" type="button">
          <span class="c-nav__text">lorem ipsum</span>
          <span class="c-nav__icon" aria-hidden="true"></span>
        </button>
      </li>
      <li class="c-nav__item">
        <button class="c-nav__button" type="button">
          <span class="c-nav__text">lorem</span>
          <span class="c-nav__icon" aria-hidden="true"></span>
        </button>
      </li>
      <li class="c-nav__item">
        <a class="c-nav__link" href="#">lore</a>
      </li>
    </ul>
  </nav>
</div>

.c-nav-scope {
  background-color: #FAF9F5;
  color: #0F0F0E;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-nav {
  display: inline-flex;
  align-items: center;
  border-spacing: 0px;
  box-sizing: border-box;
  color: #0F0F0E;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.16px;
}

.c-nav__list {
  display: flex;
  gap: 24px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-nav__item {
  display: list-item;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  line-height: 21px;
}

.c-nav__button {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 0px;
  background-color: transparent;
  color: #0F0F0E;
  border: 0;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 21px;
  letter-spacing: -0.0375px;
  text-transform: none;
  text-align: center;
  white-space: nowrap;
}

.c-nav__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 12px;
  height: 6px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
  transform: matrix(1, 0, 0, 1, 0, 1);
  transition: transform 0.2s ease-in-out;
}

.c-nav__link {
  display: flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  color: #0F0F0E;
  cursor: pointer;
  letter-spacing: -0.0375px;
  text-decoration-line: none;
  white-space: nowrap;
}

<div class="c-nav-2-scope">
  <nav class="c-nav-2">
    <div class="c-nav-2__group">
      <div class="c-nav-2__group-2">
        <h3 class="c-nav-2__title">lorem ip</h3>
        <ul class="c-nav-2__list">
          <li class="c-nav-2__item"></li>
          <li class="c-nav-2__item"></li>
          <li class="c-nav-2__item"></li>
          <li class="c-nav-2__item"></li>
          <li class="c-nav-2__item"></li>
          <li class="c-nav-2__item"></li>
          <li class="c-nav-2__item"></li>
          <li class="c-nav-2__item"></li>
          <li class="c-nav-2__item"></li>
          <li class="c-nav-2__item"></li>
          <li class="c-nav-2__item"></li>
          <li class="c-nav-2__item"></li>
          <li class="c-nav-2__item"></li>
          <li class="c-nav-2__item"></li>
        </ul>
      </div>
      <div class="c-nav-2__group-2">
        <h3 class="c-nav-2__title">lorem</h3>
        <ul class="c-nav-2__list">
          <li class="c-nav-2__item"></li>
          <li class="c-nav-2__item"></li>
          <li class="c-nav-2__item"></li>
          <li class="c-nav-2__item"></li>
          <li class="c-nav-2__item"></li>
        </ul>
      </div>
    </div>
    <div class="c-nav-2__group">
      <div class="c-nav-2__group-2">
        <h3 class="c-nav-2__title">lorem ips</h3>
        <ul class="c-nav-2__list">
          <li class="c-nav-2__item"></li>
          <li class="c-nav-2__item"></li>
          <li class="c-nav-2__item"></li>
          <li class="c-nav-2__item"></li>
          <li class="c-nav-2__item"></li>
          <li class="c-nav-2__item"></li>
          <li class="c-nav-2__item"></li>
          <li class="c-nav-2__item"></li>
          <li class="c-nav-2__item"></li>
        </ul>
      </div>
    </div>
  </nav>
</div>

.c-nav-2-scope {
  background-color: #141413;
  color: #FAF9F5;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-nav-2 {
  display: inline-grid;
  gap: 32px;
  grid-template-columns: repeat(4, 1fr);
  border-spacing: 0px;
  box-sizing: border-box;
  color: #FAF9F5;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.16px;
}

.c-nav-2__group {
  display: flex;
  flex-direction: column;
  gap: 48px;
  box-sizing: border-box;
}

.c-nav-2__group-2 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
  width: 100%;
}

.c-nav-2__title {
  display: block;
  box-sizing: border-box;
  margin: 0px;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 16.8px;
}

.c-nav-2__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.c-nav-2__item {
  display: list-item;
  box-sizing: border-box;
}

<div class="c-video-scope">
  <button class="c-video" type="button">
    <span class="c-video__media" aria-hidden="true"></span>
    <div class="c-video__group">
      <span class="c-video__icon" aria-hidden="true"></span>
    </div>
  </button>
</div>

.c-video-scope {
  background-color: #FAF9F5;
  color: #141413;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-video {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: transparent;
  color: #000000;
  border: 0;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition: all 0.2s ease;
}

.c-video__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 636px;
  height: 358px;
  max-width: 100%;
  aspect-ratio: auto 1440 / 810;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-video__group {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #0F0F0E;
  color: #FFFFFF;
  border: 1px solid #0F0F0E;
  border-radius: 16px;
  box-shadow: #0000000D 0px 4px 24px 0px;
  transform: matrix(1, 0, 0, 1, -28, -28);
  transition-duration: 0.2s, 0.2s;
  transition-timing-function: ease, ease;
  transition-property: background, color;
}

.c-video__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}

<div class="c-video-2-scope">
  <button class="c-video-2" type="button">
    <span class="c-video-2__media" aria-hidden="true"></span>
    <div class="c-video-2__group">
      <span class="c-video-2__icon" aria-hidden="true"></span>
    </div>
  </button>
</div>

.c-video-2-scope {
  background-color: #FAF9F5;
  color: #141413;
  font-family: anthropicSerif, "anthropicSerif Fallback", serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

.c-video-2 {
  display: block;
  border-spacing: 0px;
  box-sizing: border-box;
  padding: 0px;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: transparent;
  color: #000000;
  border: 0;
  cursor: pointer;
  font-family: anthropicSans, "anthropicSans Fallback", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: center;
  transition: all 0.2s ease;
}

.c-video-2__media {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 837px;
  height: 471px;
  max-width: 100%;
  aspect-ratio: auto 1280 / 720;
  overflow-x: clip;
  overflow-y: clip;
  vertical-align: middle;
  background-color: currentcolor;
}

.c-video-2__group {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #0F0F0E;
  color: #FFFFFF;
  border: 1px solid #0F0F0E;
  border-radius: 16px;
  box-shadow: #0000000D 0px 4px 24px 0px;
  transform: matrix(1, 0, 0, 1, -28, -28);
  transition-duration: 0.2s, 0.2s;
  transition-timing-function: ease, ease;
  transition-property: background, color;
}

.c-video-2__icon {
  display: block;
  flex-shrink: 0;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  background-color: currentcolor;
}