.arraysubs-help {
  --arraysubs-help-surface: var(--wp-components-color-background, #fff);
  --arraysubs-help-border: var(--wp-components-color-gray-300, #c3c4c7);
  --arraysubs-help-text: var(--wp-components-color-foreground, #1d2327);
  --arraysubs-help-muted: var(--wp-components-color-gray-700, #646970);
  --arraysubs-help-primary: var(--wp-admin-theme-color, #2271b1);
  --arraysubs-help-primary-hover: var(
    --wp-admin-theme-color-darker-10,
    #135e96
  );
  --arraysubs-help-on-primary: var(--wp-components-color-white, #fff);

  display: flex;
  flex-direction: column;
  gap: $spacing-lg;
  width: 100%;

  &__card {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    align-items: flex-start;
    padding: $spacing-lg;
    border: 1px solid var(--arraysubs-help-border);
    border-radius: $radius-sm;
    background: var(--arraysubs-help-surface);
    box-shadow: none;
  }

  &__eyebrow {
    margin: 0 0 10px;
    color: var(--arraysubs-help-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  &__title {
    margin: 0 0 10px;
    color: var(--arraysubs-help-text);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
  }

  &__description {
    max-width: 900px;
    margin: 0;
    color: var(--arraysubs-help-muted);
    font-size: 14px;
    line-height: 1.6;

    + .arraysubs-help__description {
      margin-top: $spacing-sm;
    }
  }

  &__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: $spacing-lg;
  }

  &__link {
    color: var(--arraysubs-help-primary);
    font-weight: 600;
    text-decoration: none;

    &:hover,
    &:focus {
      color: var(--arraysubs-help-primary-hover);
      text-decoration: underline;
    }

    &--button.button.button-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 36px;
      margin: 0;
      padding: 0 $spacing-md;
      border-color: var(--arraysubs-help-primary);
      border-radius: $radius-sm;
      background: var(--arraysubs-help-primary);
      color: var(--arraysubs-help-on-primary);
      font-size: 13px;
      font-weight: 600;
      line-height: 34px;
      text-decoration: none;

      &:hover,
      &:focus {
        border-color: var(--arraysubs-help-primary-hover);
        background: var(--arraysubs-help-primary-hover);
        color: var(--arraysubs-help-on-primary);
        text-decoration: none;
      }
    }
  }

  @media (max-width: 782px) {
    gap: $spacing-md;

    &__card {
      padding: $spacing-md;
    }

    &__links {
      align-items: stretch;
      flex-direction: column;
      width: 100%;
      margin-top: $spacing-md;
    }

    &__link--button.button.button-primary {
      width: 100%;
    }
  }
}